/* Escuela de Cielo — estilos adicionales (juegos, Modo Tranquilo, logros, diario)
   Se carga DESPUÉS de cursos.css y solo agrega; no pisa el motor original. */

/* ===== Modo Tranquilo (toggle en el header) ===== */
#edc-calma-btn{background:#fff;border:1.5px solid rgba(124,67,214,.22);border-radius:999px;padding:8px 14px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:#7C43D6;cursor:pointer;white-space:nowrap;box-shadow:0 3px 8px rgba(124,67,214,.10)}
#edc-calma-btn.on{background:#3D4A5C;color:#fff;border-color:#3D4A5C}
@media(max-width:560px){#edc-calma-btn{font-size:12px;padding:7px 10px}}

/* Cuando el modo tranquilo está activo: sin animaciones, colores más suaves */
html.calma *,html.calma *::before,html.calma *::after{animation:none !important;transition:none !important}
html.calma body{background:#F2F4F6 !important;background-image:none !important}
html.calma body.leccion{background:#F2F4F6 !important;background-image:none !important}
html.calma .jg-card,html.calma .lesson-page .content{box-shadow:0 2px 8px rgba(0,0,0,.06) !important}
html.calma .jg-opt{box-shadow:none !important}
html.calma .act-confetti{display:none !important}
html.calma .jg-mascota{animation:none !important}
html.calma .lesson-head h1::after{content:'' !important}

/* ===== TARJETA DE JUEGO ===== */
.jg-card{background:#fff;border:1.5px solid rgba(124,67,214,.16);border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(124,67,214,.12);margin:0 0 24px}
.jg-head{display:flex;align-items:flex-start;gap:14px}
.jg-head-t{flex:1;min-width:0}
.jg-head h2{font-family:'Fredoka',sans-serif;color:#9469E0;font-size:24px;margin:0 0 4px}
.jg-inst{margin:0;color:#4A382B;font-size:15px}
.jg-oir{background:#FFF3DC;border:1.5px solid rgba(244,177,26,.5);border-radius:50%;width:46px;height:46px;font-size:20px;cursor:pointer;flex-shrink:0}
.jg-oir:active{transform:scale(.92)}

/* Mascota Nube */
.jg-mascota{position:relative;font-size:44px;line-height:1;cursor:pointer;flex-shrink:0;animation:jgFlota 3.4s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(124,67,214,.25))}
@keyframes jgFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.jg-mascota.cheer{animation:jgCheer .7s ease}
@keyframes jgCheer{0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-8deg)}60%{transform:scale(.92) rotate(6deg)}100%{transform:scale(1)}}
.jg-burbuja{position:absolute;left:54px;top:-4px;background:#9469E0;color:#fff;font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;border-radius:14px 14px 14px 4px;padding:8px 12px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .25s,transform .25s;z-index:5}
.jg-burbuja.show{opacity:1;transform:translateY(0)}

/* Puntos de progreso */
.jg-dots{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
.jg-dots span{width:14px;height:14px;border-radius:50%;background:#EDE6F9;border:1.5px solid rgba(124,67,214,.25)}
.jg-dots span.now{background:#FFC93C;border-color:#F4B11A;box-shadow:0 0 0 4px rgba(255,201,60,.25)}
.jg-dots span.done{background:#57C45C;border-color:#3FA044}

/* Zona de juego */
.jg-zone{margin-top:14px}
.jg-q{font-family:'Fredoka',sans-serif;font-weight:600;font-size:20px;color:#2A1B12;text-align:center;margin:6px 0 16px}
.jg-sym{font-size:30px;color:#9469E0}
.jg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:560px){.jg-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.jg-grid-2{grid-template-columns:repeat(2,1fr) !important}

/* Botones de opción: GRANDES para deditos chiquitos, con brillito */
.jg-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;background:#FBF8FF;border:2px solid rgba(124,67,214,.20);border-radius:18px;padding:14px 10px;cursor:pointer;font-family:'Nunito',sans-serif;box-shadow:0 6px 16px rgba(124,67,214,.10);transition:transform .12s,box-shadow .12s,background .12s;position:relative}
.jg-opt:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(124,67,214,.18)}
.jg-opt:active{transform:scale(.95)}
.jg-emoji{font-size:48px;line-height:1}
.jg-emoji.big{font-size:64px}
.jg-img{width:84px;height:84px;object-fit:contain}
.jg-t{font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;color:#2A1B12;text-align:center}
.jg-opt.ok{background:#E5F8E7;border-color:#57C45C;box-shadow:0 0 0 5px rgba(87,196,92,.28)}
.jg-opt.shake{animation:jgShake .4s ease}
@keyframes jgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.jg-opt.used{opacity:.38;pointer-events:none}
.jg-opt.sel{border-color:#FFC93C;background:#FFF8E4;box-shadow:0 0 0 4px rgba(255,201,60,.30)}

/* Secuencia */
.jg-linea{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:46px;background:#F7F2FF;border:2px dashed rgba(124,67,214,.30);border-radius:14px;padding:8px;margin-bottom:14px}
.jg-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid rgba(124,67,214,.25);border-radius:999px;padding:6px 12px;font-family:'Fredoka',sans-serif;font-size:14px}
.jg-chip b{color:#9469E0}
.jg-chip .jg-emoji{font-size:20px}
.jg-chip .jg-img{width:26px;height:26px}

/* Clasificar */
.jg-item-big{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto 16px;background:#FFF8E4;border:2px solid rgba(244,177,26,.45);border-radius:20px;padding:18px;max-width:230px}
.jg-item-big .jg-emoji{font-size:64px}
.jg-item-big .jg-img{width:110px;height:110px}
.jg-grupo{min-height:110px}

/* Parejas */
.jg-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jg-col{display:flex;flex-direction:column;gap:10px}
.jg-pareja{min-height:78px}

/* Memorama */
.jg-memo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:480px;margin:0 auto}
@media(max-width:480px){.jg-memo{grid-template-columns:repeat(3,1fr)}}
.jg-memo-c{position:relative;aspect-ratio:1;background:#9469E0;border:none;border-radius:16px;cursor:pointer;box-shadow:0 5px 14px rgba(124,67,214,.20);transition:transform .12s;padding:0;overflow:hidden}
.jg-memo-c:active{transform:scale(.94)}
.jg-memo-c .dorso{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;background:linear-gradient(135deg,#9469E0,#7C43D6);color:#fff}
.jg-memo-c .frente{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;border:2px solid rgba(124,67,214,.25);border-radius:16px}
.jg-memo-c .frente .jg-emoji{font-size:34px}
.jg-memo-c .frente .jg-img{width:52px;height:52px}
.jg-memo-c .frente .jg-t{font-size:11px}
.jg-memo-c.open .dorso{display:none}
.jg-memo-c.open .frente{display:flex}
.jg-memo-c.used{opacity:.45;pointer-events:none}
.jg-memo-c.used .dorso{display:none}
.jg-memo-c.used .frente{display:flex}

/* Trazar */
.jg-canvas-wrap{display:flex;justify-content:center}
.jg-canvas{background:#FBF8FF;border:2px dashed rgba(124,67,214,.35);border-radius:20px;touch-action:none;width:min(320px,86vw);height:auto}
.jg-canvas-btns{display:flex;gap:12px;justify-content:center;margin-top:14px}
.jg-btn{background:#FFC93C;border:1.5px solid rgba(0,0,0,.06);border-radius:999px;padding:13px 24px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 6px 14px rgba(124,67,214,.16)}
.jg-btn:active{transform:translateY(2px)}
.jg-listo{background:#57C45C;color:#fff}

/* Checklist (papás) */
.jg-checklist{display:flex;flex-direction:column;gap:10px}
.jg-check{display:flex;align-items:flex-start;gap:12px;text-align:left;background:#FBF8FF;border:1.5px solid rgba(124,67,214,.18);border-radius:14px;padding:14px 16px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:16px;line-height:1.45;color:#2A1B12}
.jg-check .box{font-size:20px;line-height:1.2;flex-shrink:0}
.jg-check.done{background:#EFFAF0;border-color:rgba(87,196,92,.45);text-decoration:line-through;color:#5d7a60}

/* Pantalla de victoria */
.jg-win{text-align:center;padding:18px 0 8px}
.jg-win-big{font-family:'Fredoka',sans-serif;font-weight:700;font-size:40px;color:#9469E0;animation:jgPopIn .5s ease}
@keyframes jgPopIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.jg-win .jg-premio{font-family:'Fredoka',sans-serif;font-size:18px;color:#2A1B12;margin:10px 0 16px}
.jg-win .jg-premio a{color:#7C43D6}
.jg-play{display:block;margin:0 auto 8px;background:#9469E0;color:#fff;border:none;border-radius:999px;padding:16px 30px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;cursor:pointer;box-shadow:0 8px 20px rgba(124,67,214,.30);animation:jgGlow 1.6s ease-in-out infinite}
@keyframes jgGlow{0%,100%{box-shadow:0 8px 20px rgba(124,67,214,.30)}50%{box-shadow:0 8px 28px rgba(124,67,214,.55)}}
.jg-play:active{transform:scale(.95)}

/* ===== Página MIS LOGROS (/vestir) ===== */
.lg-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:20px 0 50px}
@media(min-width:760px){.lg-grid{grid-template-columns:1fr 1fr}}
.lg-card{background:#fff;border:1.5px solid rgba(124,67,214,.16);border-radius:22px;padding:22px;box-shadow:0 10px 26px rgba(124,67,214,.10)}
.lg-card h2{font-family:'Fredoka',sans-serif;color:#9469E0;font-size:22px;margin:0 0 12px}
.lg-stars-big{font-family:'Fredoka',sans-serif;font-size:44px;font-weight:700;color:#F4B11A;text-align:center;margin:8px 0}
.lg-avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lg-av{display:flex;flex-direction:column;align-items:center;gap:4px;background:#FBF8FF;border:2px solid rgba(124,67,214,.18);border-radius:16px;padding:12px 6px;cursor:pointer;font-family:'Fredoka',sans-serif;font-size:12px;color:#4A382B}
.lg-av .e{font-size:38px;line-height:1}
.lg-av.locked{opacity:.45;filter:grayscale(.7)}
.lg-av.mine{border-color:#57C45C;background:#EFFAF0;box-shadow:0 0 0 4px rgba(87,196,92,.22)}
.lg-stickers{display:flex;flex-wrap:wrap;gap:10px}
.lg-sticker{position:relative;font-size:38px;background:#FBF8FF;border:1.5px solid rgba(124,67,214,.18);border-radius:16px;padding:10px 12px;line-height:1}
.lg-sticker b{position:absolute;right:-6px;top:-6px;background:#E63946;color:#fff;font-family:'Fredoka',sans-serif;font-size:11px;border-radius:999px;padding:2px 7px}
.lg-badges{display:flex;flex-direction:column;gap:10px}
.lg-badge{display:flex;align-items:center;gap:12px;background:#FBF8FF;border:1.5px solid rgba(124,67,214,.16);border-radius:14px;padding:12px 14px}
.lg-badge .e{font-size:30px}
.lg-badge.off{opacity:.4;filter:grayscale(.8)}
.lg-badge b{font-family:'Fredoka',sans-serif;display:block}
.lg-badge small{color:#4A382B}
.lg-cursos{display:flex;flex-direction:column;gap:8px}
.lg-curso{display:flex;align-items:center;gap:10px;font-size:14px;font-family:'Fredoka',sans-serif}
.lg-curso .bar{flex:1;height:10px;background:#F1ECFB;border-radius:999px;overflow:hidden}
.lg-curso .bar i{display:block;height:100%;background:#57C45C}
.lg-curso .pct{width:74px;text-align:right;color:#4A382B}

/* ===== MI DIARIO (papás) ===== */
.dia-tabs{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}
.dia-tab{background:#fff;border:1.5px solid rgba(124,67,214,.22);border-radius:999px;padding:10px 18px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:#7C43D6;cursor:pointer}
.dia-tab.on{background:#9469E0;color:#fff;border-color:#9469E0}
.dia-form{background:#fff;border:1.5px solid rgba(124,67,214,.16);border-radius:18px;padding:18px;box-shadow:0 8px 22px rgba(124,67,214,.10);margin-bottom:18px}
.dia-form textarea{width:100%;box-sizing:border-box;border:1.5px solid rgba(124,67,214,.25);border-radius:14px;padding:14px;font-family:'Nunito',sans-serif;font-size:16px;min-height:90px;resize:vertical}
.dia-form button{margin-top:10px;background:#57C45C;color:#fff;border:none;border-radius:999px;padding:12px 26px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;cursor:pointer}
.dia-list{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.dia-item{background:#fff;border:1.5px solid rgba(124,67,214,.14);border-radius:14px;padding:14px 16px;position:relative}
.dia-item .fecha{font-family:'Fredoka',sans-serif;font-size:12px;color:#9469E0;font-weight:600}
.dia-item p{margin:4px 0 0;font-size:15px;line-height:1.5;white-space:pre-wrap}
.dia-item .del{position:absolute;top:10px;right:12px;background:none;border:none;color:#c9b8e8;font-size:16px;cursor:pointer}
.dia-item .del:hover{color:#E63946}
.dia-export{background:#fff;border:1.5px solid rgba(124,67,214,.22);border-radius:999px;padding:10px 20px;font-family:'Fredoka',sans-serif;font-weight:600;color:#7C43D6;cursor:pointer;margin-bottom:30px}
.dia-vacio{text-align:center;color:#8a7a9a;padding:26px;font-style:italic}

/* ===== Portada ===== */
.hero-edc{padding:56px 0 26px;text-align:center}
.hero-edc h1{font-family:'Fredoka',sans-serif;font-size:clamp(34px,6vw,58px);color:#9469E0;margin:0 0 12px}
.hero-edc .nube{font-size:64px;display:block;margin:0 auto 8px;animation:jgFlota 3.4s ease-in-out infinite}
.hero-edc p{font-size:clamp(16px,2.2vw,20px);color:#4A382B;max-width:62ch;margin:0 auto}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.hero-badges span{background:#fff;border:1.5px solid rgba(124,67,214,.18);border-radius:999px;padding:8px 16px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:#7C43D6;box-shadow:0 4px 10px rgba(124,67,214,.10)}
.faja-aviso{background:#FFF8E4;border:1.5px solid rgba(244,177,26,.45);border-radius:14px;padding:12px 16px;font-size:13.5px;color:#6b5a2b;margin:26px 0}