/* Concepto: un cuaderno-juego de cielo azul con nubes, un búho graduado como guía y botones amarillos grandes. */
:root{
  --sky:#dff2ff;      /* celeste de fondo */
  --sky-2:#bfe3fb;    /* celeste medio */
  --blue:#1d6fd8;     /* azul principal */
  --blue-d:#0f4aa3;   /* azul profundo */
  --ink:#12306b;      /* texto */
  --sun:#ffc928;      /* amarillo botón */
  --sun-d:#e0a400;
  --white:#ffffff;
  --ok:#17894b; --ok-bg:#e5f7ec;
  --bad:#c8432b; --bad-bg:#fff0ec;
  --skip:#6b7a99; --skip-bg:#eef2f9;
  --font-display:"Baloo 2","Nunito","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); font-weight:700; font-size:1.125rem; line-height:1.5;
  color:var(--ink); background-color:var(--sky);
  background-image:
    radial-gradient(ellipse 160px 60px at 12% 9%, rgba(255,255,255,.9) 60%, transparent 62%),
    radial-gradient(ellipse 220px 70px at 86% 14%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(ellipse 180px 60px at 70% 62%, rgba(255,255,255,.55) 60%, transparent 62%),
    linear-gradient(180deg,#c4e7ff 0%,#e9f6ff 60%,#ffffff 100%);
  background-attachment:fixed;
  padding-inline:16px; padding-block:calc(12px + env(safe-area-inset-top,0px)) calc(40px + env(safe-area-inset-bottom,0px));
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--font-display); line-height:1.15; margin:0; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:4px solid var(--sun); outline-offset:3px; border-radius:12px}
.app{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:16px}

/* barra superior */
.top{display:flex; align-items:center; gap:10px; justify-content:space-between; min-width:0}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand svg{width:44px; height:44px; flex:none}
.brand b{font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--blue-d); line-height:1.1}
.link-btn{background:transparent; border:2px solid var(--sky-2); border-radius:999px; padding:8px 14px; font-size:.9rem; font-weight:800; color:var(--blue-d); min-height:44px; background-color:rgba(255,255,255,.7)}
.link-btn:hover{border-color:var(--blue)}

/* tarjetas */
.card{background:var(--white); border-radius:28px; padding:22px; box-shadow:0 6px 0 var(--sky-2), 0 18px 30px rgba(18,48,107,.10); min-width:0}
.hero{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.hero .owl{width:150px; height:150px}
.hero h1{font-size:2.3rem; color:var(--blue-d)}
.hero .eng{font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue)}
.lead{font-size:1.25rem}
.note{background:#fff8dc; border:3px dashed var(--sun); border-radius:18px; padding:12px 16px}
.deco{display:flex; gap:18px; justify-content:center; align-items:flex-end}
.deco svg{width:56px; height:56px}
.how{text-align:left; width:100%; background:var(--sky); border-radius:20px; padding:16px 18px}
.how h2{font-size:1.35rem; margin-bottom:6px; color:var(--blue-d)}
.how ul{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:4px}

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:60px; padding:12px 26px; border:0; border-radius:20px;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:.02em; text-align:center; line-height:1.15;
  transition:transform .12s ease, box-shadow .12s ease}
.btn-sun{background:var(--sun); color:var(--ink); box-shadow:0 6px 0 var(--sun-d)}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 6px 0 var(--blue-d)}
.btn-ghost{background:#fff; color:var(--blue-d); box-shadow:0 0 0 3px var(--sky-2) inset}
.btn:active{transform:translateY(4px)}
.btn-sun:active{box-shadow:0 2px 0 var(--sun-d)}
.btn-blue:active{box-shadow:0 2px 0 var(--blue-d)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.btn-big{width:100%; font-size:1.5rem; min-height:68px}
.stack{display:flex; flex-direction:column; gap:12px; width:100%}

/* progreso */
.prog{display:flex; flex-direction:column; gap:8px}
.prog-row{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:var(--font-display); font-weight:800; color:var(--blue-d); font-size:1.15rem}
.bar{height:22px; background:#fff; border-radius:999px; box-shadow:0 0 0 3px var(--sky-2) inset; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sun),#ffdf6b); border-radius:999px; transition:width .35s ease}
.dots{display:flex; flex-wrap:wrap; gap:6px}
.dot{width:40px; height:40px; border-radius:12px; border:2px solid var(--sky-2); background:#fff; font-weight:800; font-size:.9rem; color:var(--blue-d); padding:0}
.dot.done{background:var(--blue); border-color:var(--blue); color:#fff}
.dot.now{outline:4px solid var(--sun); outline-offset:1px}

/* pregunta */
.chip{display:inline-flex; align-self:flex-start; background:var(--blue); color:#fff; font-family:var(--font-display); font-weight:800; font-size:.95rem; letter-spacing:.07em; padding:4px 14px; border-radius:999px; text-transform:uppercase}
.sec-es{font-size:1.1rem; color:var(--blue-d)}
.qcard{display:flex; flex-direction:column; gap:16px}
.qtext{font-size:1.6rem; font-weight:800; line-height:1.35}
.blank{display:inline-block; min-width:5ch; border-bottom:5px solid var(--sun); color:transparent; margin-inline:2px; user-select:none}
.base{display:inline-flex; align-self:flex-start; gap:8px; align-items:center; background:#fff8dc; border:3px solid var(--sun); padding:4px 14px; border-radius:14px; font-weight:800}
.opts{display:flex; flex-direction:column; gap:12px}
.opt{display:flex; align-items:center; gap:14px; width:100%; min-height:64px; text-align:left; background:#fff; border:3px solid var(--sky-2); border-radius:20px; padding:10px 16px; font-size:1.35rem; font-weight:800;
  box-shadow:0 4px 0 var(--sky-2); transition:transform .1s ease}
.opt .let{flex:none; width:40px; height:40px; border-radius:50%; background:var(--sky); color:var(--blue-d); display:grid; place-items:center; font-family:var(--font-display)}
.opt:active{transform:translateY(3px); box-shadow:0 1px 0 var(--sky-2)}
.opt[aria-pressed="true"]{background:var(--blue); border-color:var(--blue-d); color:#fff; box-shadow:0 4px 0 var(--blue-d)}
.opt[aria-pressed="true"] .let{background:var(--sun); color:var(--ink)}
.write{width:100%; font:inherit; font-size:1.7rem; font-weight:800; padding:14px 18px; border:4px solid var(--sky-2); border-radius:20px; color:var(--ink); background:#fff; min-height:68px}
.write:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 5px rgba(255,201,40,.7)}
.hint{background:var(--sky); border-radius:14px; padding:8px 14px}

/* relacionar */
.match{display:flex; flex-direction:column; gap:16px}
.match h3{font-size:1.1rem; color:var(--blue-d); margin-bottom:8px}
.words{display:flex; flex-wrap:wrap; gap:10px}
.w{display:flex; align-items:center; gap:8px; min-height:56px; padding:8px 14px; background:#fff; border:3px solid var(--sky-2); border-radius:18px; font-weight:800; font-size:1.15rem; box-shadow:0 4px 0 var(--sky-2)}
.w small{font-family:var(--font-display); font-size:.95rem; color:var(--blue)}
.w .tag{min-width:30px; height:30px; border-radius:50%; background:var(--sky); display:grid; place-items:center; font-family:var(--font-display); color:var(--blue-d)}
.w.set{border-color:var(--blue)}
.w.set .tag{background:var(--blue); color:#fff}
.w.sel{background:var(--sun); border-color:var(--sun-d); box-shadow:0 4px 0 var(--sun-d)}
.w.sel .tag{background:#fff}
.means{display:flex; flex-direction:column; gap:10px}
.m{display:flex; align-items:center; gap:12px; min-height:58px; width:100%; text-align:left; padding:8px 14px; background:#fff; border:3px solid var(--sky-2); border-radius:18px; font-weight:800; font-size:1.1rem}
.m .let{flex:none; width:36px; height:36px; border-radius:50%; background:var(--sky); display:grid; place-items:center; font-family:var(--font-display); color:var(--blue-d)}
.m .used{margin-left:auto; font-size:.85rem; font-family:var(--font-display); color:#fff; background:var(--blue); border-radius:999px; padding:2px 10px}
.m.on{background:#fff8dc; border-color:var(--sun)}
.step-msg{background:#fff8dc; border:3px dashed var(--sun); border-radius:16px; padding:10px 14px}

/* navegación */
.nav{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.finish-row{display:flex; justify-content:center}

/* resultados */
.res{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center}
.res .owl{width:110px; height:110px}
.score{font-family:var(--font-display); font-weight:800; font-size:4.2rem; line-height:1; color:var(--blue-d)}
.score small{font-size:1.6rem; color:var(--blue)}
.stars{display:flex; gap:6px}
.stars svg{width:38px; height:38px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%}
.stat{background:var(--sky); border-radius:18px; padding:10px 6px; min-width:0}
.stat b{display:block; font-family:var(--font-display); font-size:1.9rem; line-height:1.1}
.stat span{font-size:.95rem; display:block}
.unans{width:100%; text-align:center; color:var(--skip); font-weight:800}
.stat.g b{color:var(--ok)} .stat.r b{color:var(--bad)}
.msg{font-family:var(--font-display); font-size:1.45rem; font-weight:700; background:#fff8dc; border:3px solid var(--sun); border-radius:20px; padding:14px 18px; width:100%}
.tabs{display:flex; gap:10px; flex-wrap:wrap}
.tab{min-height:48px; padding:8px 18px; border-radius:999px; border:3px solid var(--sky-2); background:#fff; font-weight:800; color:var(--blue-d)}
.tab[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.review{display:flex; flex-direction:column; gap:14px}
.rv{background:#fff; border-radius:22px; padding:18px; border-left:10px solid var(--skip); box-shadow:0 4px 0 var(--sky-2); display:flex; flex-direction:column; gap:8px; min-width:0}
.rv.ok{border-left-color:var(--ok)} .rv.bad{border-left-color:var(--bad)}
.rv-head{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rv-n{font-family:var(--font-display); font-weight:800; color:var(--blue-d); font-size:1.15rem}
.rv-sec{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; background:var(--sky); border-radius:999px; padding:2px 10px}
.rv-q{font-size:1.2rem; font-weight:800; overflow-wrap:anywhere}
.rv-q mark{background:#fff3b0; color:inherit; border-radius:6px; padding:0 4px}
.lbl{font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--skip)}
.rv .line{overflow-wrap:anywhere}
.verdict{font-family:var(--font-display); font-weight:800; font-size:1.25rem}
.rv.ok .verdict{color:var(--ok)} .rv.bad .verdict{color:var(--bad)} .rv.skip .verdict{color:var(--skip)}
.correct-box{background:var(--ok-bg); border-radius:14px; padding:8px 12px}
.learn{background:var(--sky); border-radius:14px; padding:10px 14px; display:flex; flex-direction:column; gap:6px}
.exa{font-weight:700}
.foot{text-align:center; font-size:.9rem; color:var(--blue-d); display:flex; flex-direction:column; gap:10px; align-items:center}

/* ventana */
.veil{position:fixed; inset:0; background:rgba(18,48,107,.55); display:grid; place-items:center; padding:16px; z-index:20}
.modal{background:#fff; border-radius:28px; padding:24px; max-width:460px; width:100%; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 0 var(--sky-2)}
.modal h2{font-size:1.6rem; color:var(--blue-d)}

/* inicio */
.hello{display:flex; gap:12px; align-items:center; justify-content:space-between}
.hello>div{min-width:0}
.hello h1{font-size:1.9rem; color:var(--blue-d)}
.hello .date{font-size:1.05rem}
.starchip{display:inline-flex; gap:6px; align-items:center; background:#fff8dc; border:3px solid var(--sun); border-radius:999px; padding:6px 16px; font-family:var(--font-display); font-weight:800; font-size:1.3rem}
.sec-title{font-size:1.4rem; color:var(--blue-d)}
.tag-demo{background:#fff; border:3px dashed var(--sky-2); border-radius:14px; padding:6px 12px; font-size:.95rem}
.mat{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#fff8dc; border:4px solid var(--sun); border-radius:22px; padding:14px 16px}
.mat .ico{font-size:2.2rem}
.mat .txt{flex:1 1 180px; min-width:0}
.mat .btn{min-height:56px; font-size:1.1rem; padding-inline:18px}
.tasks{display:flex; flex-direction:column; gap:14px}
.task{position:relative; display:flex; gap:14px; background:#fff; border-radius:26px; padding:16px; box-shadow:0 6px 0 var(--sky-2), 0 14px 24px rgba(18,48,107,.08); overflow:hidden; min-width:0}
.task .emo{flex:none; width:64px; height:64px; border-radius:20px; background:var(--sky); display:grid; place-items:center; font-size:2rem}
.task .body{display:flex; flex-direction:column; gap:6px; min-width:0; flex:1}
.task h3{font-size:1.4rem; overflow-wrap:anywhere}
.task .due{color:var(--blue); font-size:1rem}
.task .acts{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.task .btn{min-height:60px; font-size:1.2rem}
.chip.sm{font-size:.8rem; padding:2px 12px}
.task.cel{animation:celebrate .9s ease forwards}
.task.cel .btn{pointer-events:none}
.plus{position:absolute; right:16px; top:10px; font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--sun-d); animation:rise .9s ease forwards}
.bit{position:absolute; top:40%; left:50%; width:10px; height:14px; border-radius:3px; animation:burst .9s ease-out forwards}
@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.04)}100%{transform:scale(.96); opacity:.15}}
@keyframes rise{from{transform:translateY(0); opacity:1}to{transform:translateY(-26px); opacity:0}}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(260deg); opacity:0}}
.progress-day{display:flex; flex-direction:column; gap:6px}
.progress-day .bar{height:16px}
.more{text-align:center; color:var(--blue-d)}
.alldone{text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center}
.alldone .owl{width:130px; height:130px}
.alldone h2{font-size:2rem; color:var(--blue-d)}
.prize{background:#fff8dc; border:4px solid var(--sun); border-radius:20px; padding:12px 18px; font-family:var(--font-display); font-weight:700; font-size:1.3rem}
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tile{display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; text-align:center; min-height:116px; padding:12px 8px; background:#fff; border:3px solid var(--sky-2); border-radius:24px; box-shadow:0 6px 0 var(--sky-2); font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--blue-d); line-height:1.15}
.tile span.big{font-size:2.3rem; line-height:1}
.tile .big-owl{width:2.6rem; height:2.6rem}
.tile:active{transform:translateY(4px); box-shadow:0 2px 0 var(--sky-2)}
.topic{display:flex; flex-direction:column; gap:8px}
.topic h3{font-size:1.5rem; color:var(--blue-d)}
.medals{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px}
.medal{background:#fff; border-radius:20px; padding:12px; text-align:center; border:3px solid var(--sun); display:flex; flex-direction:column; gap:2px; min-width:0}
.medal.lock{border-color:var(--sky-2); filter:grayscale(1); opacity:.6}
.medal .e{font-size:2.2rem}
.wordrow{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; padding:10px 0; border-bottom:2px solid var(--sky)}
.wordrow b{font-family:var(--font-display); font-size:1.3rem; color:var(--blue-d)}
.fab{position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px)); width:68px; height:68px; border-radius:50%; border:4px solid #fff; background:var(--sun); box-shadow:0 6px 18px rgba(18,48,107,.3); padding:4px; z-index:10}
.fab svg{width:100%; height:100%}
.bubble{position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(94px + env(safe-area-inset-bottom,0px)); max-width:min(320px, calc(100vw - 28px)); background:#fff; border:4px solid var(--sun); border-radius:22px; padding:14px 16px; box-shadow:0 10px 24px rgba(18,48,107,.25); z-index:10; display:flex; flex-direction:column; gap:8px}
.app{padding-bottom:96px}

/* inicio en dos columnas, mamá, diccionario */
.app.wide{max-width:1040px}
.homegrid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.maincol{display:flex; flex-direction:column; gap:16px; min-width:0}
.matsweek{display:flex; flex-direction:column; gap:8px; align-self:start}
.matsweek .small, .small{font-size:.9rem; color:var(--blue-d)}
.matsweek .grp{font-family:var(--font-display); font-size:1.05rem; color:var(--blue); margin-top:4px}
.mrow{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:2px solid var(--sky); flex-wrap:wrap}
.mrow .mtxt{display:flex; flex-direction:column; min-width:0; flex:1 1 140px}
.mrow .mtxt span{font-size:.85rem; color:var(--blue-d)}
.mrow.taken{opacity:.6}
.mrow.taken b{text-decoration:line-through}
.have{min-height:44px; padding:6px 14px; border-radius:999px; border:3px solid var(--sky-2); background:#fff; font-weight:800; color:var(--blue-d)}
.have.on{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.pill{display:inline-block; background:var(--sky); border-radius:999px; padding:2px 12px; font-size:.85rem; font-weight:800}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
@media (min-width:900px){
  .homegrid{grid-template-columns:minmax(0,1fr) 340px; align-items:start}
  .matsweek{position:sticky; top:12px}
  .tiles{grid-template-columns:repeat(4,1fr)}
}
.momgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.mom{display:flex; flex-direction:column; gap:12px}
.mom .sec-title{margin-top:8px}
.fld{display:flex; flex-direction:column; gap:4px; min-width:0}
.fld>span{font-size:.85rem; font-weight:800; color:var(--blue-d)}
.fld input, .fld textarea{width:100%; font:inherit; font-size:1rem; font-weight:700; padding:10px 12px; border:3px solid var(--sky-2); border-radius:14px; color:var(--ink); background:#fff; min-height:48px}
.fld textarea{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; min-height:160px}
.fld input:focus, .fld textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(255,201,40,.7)}
.erow{display:grid; gap:8px; background:var(--sky); border-radius:18px; padding:12px}
.erow .del{justify-self:end}
.warn{background:#fff8dc; border:3px solid var(--sun); border-radius:14px; padding:10px 14px}
.warn ul, .err ul{margin:6px 0 0; padding-left:1.2em}
.err{background:var(--bad-bg); color:var(--bad); border-radius:14px; padding:10px 14px}
.good-note{background:var(--ok-bg); color:var(--ok); border-radius:14px; padding:10px 14px}
.srow{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:2px solid var(--sky); min-width:0}
.srow>div{min-width:0}
.srow p{margin:0}
.semo{font-size:1.8rem; flex:none}
.pinbox{display:flex; flex-direction:column; gap:10px; width:100%; max-width:320px; text-align:left}
.pinbox label{font-weight:800; color:var(--blue-d)}
.pinbox input{font:inherit; font-size:2rem; letter-spacing:.5em; text-align:center; padding:10px; border:4px solid var(--sky-2); border-radius:16px; min-height:64px; width:100%}
.dtopics{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
.dtopic{display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; background:#fff; border:3px solid var(--sky-2); border-radius:24px; padding:16px 12px; box-shadow:0 6px 0 var(--sky-2); font-family:var(--font-display); font-size:1.15rem; color:var(--blue-d)}
.dtopic .big{font-size:2.4rem; line-height:1}
.dtopic .bar{width:100%; height:12px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.fcard{position:relative; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; min-height:130px; padding:12px; background:#fff; border:3px solid var(--sky-2); border-radius:22px; box-shadow:0 5px 0 var(--sky-2); font-size:1rem}
.fcard b{font-family:var(--font-display); font-size:1.15rem; line-height:1.1; color:var(--blue-d); overflow-wrap:break-word; hyphens:none}
@media (min-width:600px){ .fcard b{font-size:1.6rem} }
.fcard .hint{font-size:.8rem; color:var(--skip)}
.fcard.back{background:var(--blue); border-color:var(--blue-d); box-shadow:0 5px 0 var(--blue-d); color:#fff}
.fcard.back b{color:#fff}
.fcard .ex{font-size:.85rem; font-weight:700}
.fcard .ex2{font-size:.8rem; opacity:.9}
.fcard .kn{position:absolute; top:6px; right:8px; width:26px; height:26px; border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:.9rem}
.opt.good{background:var(--ok-bg); border-color:var(--ok); box-shadow:0 4px 0 var(--ok)}
.opt.bad{background:var(--bad-bg); border-color:var(--bad); box-shadow:0 4px 0 var(--bad)}
.opt[disabled]{cursor:default}
.fb{font-family:var(--font-display); font-weight:800; font-size:1.2rem}
.fb.good{color:var(--ok)} .fb.bad{color:var(--bad)}

/* juegos */
.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.gcard{display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; background:#fff; border:3px solid var(--sky-2); border-radius:24px; padding:18px 12px; box-shadow:0 6px 0 var(--sky-2); font-size:1rem; color:var(--blue-d)}
.gcard .big{font-size:2.6rem; line-height:1}
.gcard b{font-family:var(--font-display); font-size:1.4rem}
.tile.locked{opacity:.6; background:var(--skip-bg); border-style:dashed}
.tiles .tile:last-child:nth-child(odd){grid-column:1/-1}
.mem{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (min-width:600px){ .mem{grid-template-columns:repeat(4,1fr)} }
.mcard{min-height:92px; padding:6px; border-radius:18px; border:3px solid var(--blue-d); background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.05rem; line-height:1.15; overflow-wrap:anywhere; box-shadow:0 5px 0 var(--blue-d)}
.mcard svg{width:44px; height:44px}
.mcard.up{background:#fff; color:var(--ink); border-color:var(--sun)}
.mcard.ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.mcard[disabled]{opacity:1; cursor:default}
.slots{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.slot{width:44px; height:54px; border-bottom:5px solid var(--sun); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--blue-d)}
.slot.fill{background:var(--sky); border-radius:12px 12px 0 0}
.slot.hintch{color:var(--skip)}
.letters{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.lt{width:56px; height:60px; border-radius:16px; border:3px solid var(--sky-2); background:#fff; font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--blue-d); box-shadow:0 4px 0 var(--sky-2); padding:0}
.lt[disabled]{opacity:.35}

/* voz, ayudante y videos */
.spk{flex:none; width:44px; height:44px; border-radius:50%; border:3px solid var(--sky-2); background:#fff; font-size:1.2rem; line-height:1; display:inline-grid; place-items:center; padding:0; box-shadow:0 3px 0 var(--sky-2)}
.spk:active{transform:translateY(2px); box-shadow:0 1px 0 var(--sky-2)}
.spk.mini{width:34px; height:34px; font-size:1rem; border-width:2px}
.nospeech .spk{display:none}
.qrow{display:flex; gap:10px; align-items:flex-start; justify-content:space-between}
.qrow .qtext{flex:1; min-width:0}
.fwrap{position:relative; display:flex}
.fwrap .fcard{flex:1; min-width:0}
.fwrap .spk{position:absolute; left:6px; bottom:6px; width:36px; height:36px; font-size:1rem; border-width:2px}
.hpanel{position:fixed; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(90px + env(safe-area-inset-bottom,0px)); width:min(380px, calc(100vw - 28px)); max-height:calc(100vh - 130px); overflow:auto; background:#fff; border:4px solid var(--sun); border-radius:26px; padding:14px; box-shadow:0 12px 30px rgba(18,48,107,.3); z-index:12; display:flex; flex-direction:column; gap:10px}
.hhead{display:flex; align-items:center; gap:8px}
.hhead svg{width:44px; height:44px; flex:none}
.hhead b{font-family:var(--font-display); font-size:1.1rem; line-height:1.2; flex:1; color:var(--blue-d)}
.hrow{display:flex; gap:8px}
.hrow input{flex:1; min-width:0; font:inherit; font-size:1.2rem; font-weight:700; padding:10px 12px; border:3px solid var(--sky-2); border-radius:14px; min-height:52px; color:var(--ink); background:#fff}
.hrow input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(255,201,40,.7)}
.hrow .btn{min-height:52px; font-size:1.05rem; padding:6px 16px}
.hres{background:var(--sky); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center}
.hline{display:flex; gap:10px; align-items:center; justify-content:center}
.hline b{font-family:var(--font-display); font-size:1.7rem; line-height:1.1; overflow-wrap:anywhere}
.harrow{font-size:1rem}
.hex{font-size:.95rem}
.hmsg{font-family:var(--font-display); font-weight:700; font-size:1.2rem; text-align:center; background:#fff8dc; border-radius:16px; padding:12px}
.hhist{display:flex; flex-wrap:wrap; gap:6px}
.chip-btn{border:2px solid var(--sky-2); background:#fff; border-radius:999px; padding:4px 12px; font-weight:800; color:var(--blue-d); min-height:36px}
.noscroll{overflow:hidden}
.vveil{position:fixed; inset:0; background:rgba(10,24,60,.82); display:grid; place-items:center; padding:12px; z-index:40}
.vbox{background:#fff; border-radius:22px; padding:12px; width:min(900px,100%); max-height:100%; overflow:auto; display:flex; flex-direction:column; gap:10px}
.vtop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.vtop b{font-family:var(--font-display); font-size:1.1rem; color:var(--blue-d); min-width:0; overflow-wrap:anywhere}
.vframe{position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:14px; overflow:hidden}
.vframe iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vbtns{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.vbtns .btn{min-height:52px; font-size:1.05rem; padding:6px 18px; flex:1 1 180px}

.hpanel .tabs{gap:6px}
.hpanel .tab{min-height:40px; padding:4px 12px; font-size:.95rem}

/* progreso y premios */
.alerts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.al{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:var(--skip-bg)}
.al.warn{background:var(--bad-bg)} .al.good{background:var(--ok-bg)} .al.info{background:var(--sky)}
.hbars{display:flex; flex-direction:column; gap:8px}
.hb{display:grid; grid-template-columns:minmax(80px,42%) 1fr auto; gap:8px; align-items:center}
.hl{font-weight:800; overflow-wrap:break-word; font-size:.9rem; min-width:0}
.htrack{height:14px; background:var(--sky); border-radius:4px; overflow:hidden}
.htrack i{display:block; height:100%; background:var(--blue); border-radius:0 4px 4px 0}
.htrack i.bad{background:var(--bad)}
.hv{font-size:.9rem; font-weight:800; white-space:nowrap}
.vbars{display:flex; gap:8px; align-items:stretch; height:140px; padding-top:4px}
.vb{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center}
.vcol{width:100%; max-width:34px; flex:1; display:flex; align-items:flex-end; border-bottom:2px solid var(--sky-2)}
.vcol i{display:block; width:100%; background:var(--blue); border-radius:4px 4px 0 0}
.vv{font-size:.8rem; font-weight:800; min-height:1.1em}
.vl{font-size:.8rem; color:var(--skip); margin-top:2px}
.tevo{padding:8px 0; border-top:2px solid var(--sky); display:flex; flex-direction:column; gap:4px}
.tevo .vbars{height:100px}
.thead{display:flex; flex-wrap:wrap; gap:2px 10px; justify-content:space-between}
.wlist, .recs{margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:6px}
.repbox{width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8rem; border:3px solid var(--sky-2); border-radius:12px; padding:8px; min-height:200px; color:var(--ink); background:#fff}
.prize-row{display:grid; gap:4px; padding:10px 0; border-top:2px solid var(--sky)}
.prize-row .bar{height:14px}
details summary{cursor:pointer; font-weight:800; color:var(--blue-d); min-height:44px; display:flex; align-items:center}

/* pulido */
.link-btn{white-space:nowrap}
.top .sec-title{flex:1 1 0; min-width:0; text-align:center; overflow-wrap:anywhere}
.top .starchip{padding:4px 12px; font-size:1.1rem; border-width:2px}
.fab.small{width:52px; height:52px; opacity:.88; border-width:3px}
.fab.small ~ .bubble{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
.mat{flex-direction:column; align-items:stretch; gap:10px}
.mat .mhead{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; color:var(--blue-d)}
.mline{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-top:8px; border-top:2px dashed var(--sun)}
.mline .txt{flex:1 1 170px; min-width:0; display:flex; flex-direction:column}
.mline .txt span{font-size:.9rem}
.mline .btn{min-height:48px; font-size:1.05rem; padding:6px 16px}
.mrow .mtxt span{text-transform:none}

/* exámenes y juegos (fase 5) */
.opts.tf{flex-direction:row; flex-wrap:wrap}
.opts.tf .opt{flex:1 1 140px; justify-content:center}
.es-btn{align-self:flex-start; min-height:44px}
.es-box{background:var(--sky); border-radius:14px; padding:10px 14px; font-weight:700}
.goodline{background:var(--ok-bg); color:var(--ok); border-radius:16px; padding:10px 14px; width:100%; text-align:left}
.pair{padding:2px 0}
.pair.okp{color:var(--ok)}
.pair.badp{color:var(--bad)}
.review-wrap{display:flex; flex-direction:column; gap:14px}
.gmodes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.gmode{display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center; background:#fff; border:4px solid var(--sky-2); border-radius:28px; padding:22px 16px; box-shadow:0 7px 0 var(--sky-2); color:var(--blue-d); font-size:1.05rem}
.gmode .big{font-size:3.2rem; line-height:1}
.gmode b{font-family:var(--font-display); font-size:1.6rem}
.gmode:active{transform:translateY(4px); box-shadow:0 3px 0 var(--sky-2)}

/* entrada y estado de la nube */
.auth{display:flex; flex-direction:column; gap:12px; text-align:center; align-items:center}
.auth .owl{width:120px; height:120px}
.auth form{display:flex; flex-direction:column; gap:12px; width:100%; text-align:left}
.auth label{font-weight:800; color:var(--blue-d)}
.auth input{width:100%; font:inherit; font-size:1.2rem; font-weight:700; padding:12px 16px; border:4px solid var(--sky-2); border-radius:16px; min-height:56px; color:var(--ink); background:#fff}
.auth input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 5px rgba(255,201,40,.7)}
.auth .err{background:var(--bad-bg); color:var(--bad); border-radius:14px; padding:10px 14px}
.auth .good{background:var(--ok-bg); color:var(--ok); border-radius:14px; padding:10px 14px}
.syncst{font-weight:800}
.syncst.bad{color:var(--bad)}

@media (max-width:480px){
  body{font-size:1.05rem}
  .hero h1{font-size:1.9rem}
  .qtext{font-size:1.4rem}
  .score{font-size:3.4rem}
  .card{padding:18px; border-radius:24px}
  .brand b{font-size:1rem}
  .stat b{font-size:1.5rem}
  .dot{width:36px; height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (prefers-reduced-motion:no-preference){.owl{animation:bob 3.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}}

.more-btn{align-self:flex-start; min-height:44px; padding:8px 14px; border-radius:16px; border:2px solid var(--sky-2); background:var(--sky); color:var(--blue-d); font-family:var(--font-display); font-weight:800; font-size:1rem; cursor:pointer}
.dtl{background:var(--sky); border-radius:16px; padding:10px 14px; font-size:1rem; line-height:1.4}
.dtl p{margin:0 0 8px; overflow-wrap:anywhere}.dtl p:last-child{margin:0}
.nday{margin-top:14px}
.nrow{display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:20px; padding:12px; margin:8px 0; box-shadow:0 4px 0 var(--sky-2)}
.nrow p{margin:0; flex:1; min-width:0; overflow-wrap:anywhere; line-height:1.4}
.nrow.done p{opacity:.5; text-decoration:line-through}
.nchk{flex:none; width:48px; height:48px; border-radius:50%; border:3px solid var(--blue); background:#fff; color:#fff; font-size:1.6rem; font-weight:800; cursor:pointer}
.nrow.done .nchk{background:var(--blue)}

.ev{display:inline-block; margin-left:6px; padding:3px 10px; border-radius:999px; font-family:var(--font-display); font-weight:800; font-size:.9rem; vertical-align:middle}
.ev.su{background:#ffc928; color:#12306b}
.ev.fo{background:var(--sky); color:var(--blue-d); border:2px solid var(--sky-2)}
.task .blk{background:var(--sky); border-radius:16px; padding:10px 14px}
.task .blk b{font-family:var(--font-display); color:var(--blue-d)}
.task .blk p{margin:4px 0 0; overflow-wrap:anywhere; line-height:1.35}
.task .blk.rep{background:#fff6d6}
a.btn{text-decoration:none}

.chcard{display:flex; flex-direction:column; gap:12px}
.chtext{font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:1.5; overflow-wrap:anywhere}
.chhid{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--blue-d)}
.wtok{background:none; border:0; border-bottom:3px dotted var(--sky-2); padding:2px 3px; font:inherit; color:var(--ink); cursor:pointer; border-radius:8px}
.wtok.ok{background:#d9f7e0; border-color:#4cb36b}
.wtok.miss{background:#ffe6c7; border-color:#f08a24}
.chres{font-family:var(--font-display); font-weight:800; font-size:1.4rem; margin:0}
.chres.good{color:#1f8a46}.chres.mid{color:#b86b00}.chres.low{color:var(--blue-d)}
.blank{display:inline-block; min-width:3.5em; border-bottom:4px solid var(--blue); text-align:center; color:var(--blue-d)}
.chdone{margin:0; padding-left:1.4em; line-height:1.5; color:#1f8a46; font-weight:700}
.chopt{text-align:left; font-size:1.15rem; line-height:1.3; min-height:60px; height:auto}
.btn.rec{animation:recpulse 1s ease-in-out infinite}
@keyframes recpulse{50%{transform:scale(1.03)}}
.row2{display:grid; grid-template-columns:72px 1fr; gap:10px}
@media (prefers-reduced-motion:reduce){.btn.rec{animation:none}}
.due.late{color:#b45309}

.bigemo{font-size:4rem; text-align:center; margin:0; line-height:1.1}
.trad{margin:0; text-align:center; font-size:1.1rem; color:var(--blue-d)}
.gesto{margin:0; background:#fff6d6; border-radius:14px; padding:8px 12px; font-weight:700}
.chtext.sm{font-size:1.35rem}
.chain{display:flex; flex-direction:column; gap:6px}
.chain .chtext{margin:0}
.wtok.ok{background:#d9f7e0; border-color:#4cb36b}
.wtok.miss{background:#e8ebf0; border-color:#aab3c2; color:#5b6678}
.wtok.small{border-color:transparent}
.wtok.now{background:#ffc928; border-color:#e0a400}
.wtok.past{background:#d9f7e0; border-color:#4cb36b}
.reps{display:flex; gap:10px; justify-content:center; margin:0}
.dot{width:20px; height:20px; border-radius:50%; border:3px solid var(--blue); background:#fff}
.dot.on{background:var(--blue)}.dot.cur{background:#ffc928; border-color:#e0a400}
.emorow{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; font-size:2.4rem; margin:0}
.countdown{font-family:var(--font-display); font-weight:800; font-size:5rem; text-align:center; margin:20px 0; color:var(--blue-d)}
.stars-big{font-size:2rem; text-align:center; margin:0}
.lvl{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:3px solid var(--sky-2); border-radius:22px; padding:12px 14px; box-shadow:0 5px 0 var(--sky-2); cursor:pointer; font:inherit; min-height:72px}
.lvl.cur{border-color:#ffc928; box-shadow:0 5px 0 #e0a400}
.lvl.lock{opacity:.55}
.lvl .le{font-size:2rem; flex:none}
.lvl .lvtxt{display:flex; flex-direction:column; flex:1; min-width:0}
.lvl .lvtxt b{font-family:var(--font-display); color:var(--blue-d); font-size:1.15rem}
.lvl .lvtxt span{font-size:.95rem}
.lvl .ls{flex:none; font-weight:800; color:#e0a400; font-size:1.3rem}
.lvchip{display:inline-block; font-size:.8rem; padding:2px 8px; border-radius:999px; background:#e8ebf0; margin:2px 2px 2px 0}
.lvchip.on{background:#d9f7e0}
.charlamom{border-top:2px solid var(--sky); padding:10px 0}
.charlamom audio, .chcard audio{width:100%}

.lessons .lesson, .lessons-in .lesson{background:#f4fbff; border:2px solid var(--sky-2); border-radius:18px; padding:10px 14px; margin:10px 0}
.lesson h3{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:1.25rem; color:var(--blue-d); margin:0 0 6px}
.lesson ol{margin:0; padding-left:1.3em; line-height:1.45}
.lesson li{margin:4px 0; overflow-wrap:anywhere}
.lesson .ex-box{background:#fff; border-radius:14px; padding:8px 12px; margin:8px 0 0}
.lesson .trick{background:#fff6d6; border-radius:14px; padding:8px 12px; margin:8px 0 0; font-weight:700}
.lessons-in{margin-bottom:12px}

.cparte h3{font-size:1.35rem; margin:0 0 8px; color:var(--blue-d)}
.cparte.ok{opacity:.75}
.cptext{white-space:pre-wrap; font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:1.5; overflow-wrap:anywhere; background:#fffdf3; border:3px dashed #ffc928; border-radius:18px; padding:12px 14px; margin:6px 0}
.cpdib{background:var(--sky); border-radius:14px; padding:8px 12px; margin:8px 0}
.cptabwrap{overflow-x:auto; margin:8px 0}
.cptab{border-collapse:collapse; width:100%; font-size:1.2rem}
.cptab th{background:var(--blue); color:#fff; padding:8px 10px; text-align:left}
.cptab td{border:2px solid var(--sky-2); padding:8px 10px; background:#fff}
.mamanote{background:#fff6d6; border-radius:12px; padding:6px 10px}

.cpedit{border-top:2px dashed var(--sky-2); margin-top:10px; padding-top:8px}
.cppart{background:#f4fbff; border-radius:14px; padding:8px 10px; margin:8px 0}

.cpimgbtn{display:block; width:100%; padding:0; border:3px solid var(--sky-2); border-radius:18px; background:#fff; cursor:zoom-in; overflow:hidden; margin:8px 0; position:relative}
.cpimg{display:block; width:100%; height:auto}
.cpzoomhint{display:block; padding:6px 10px; font-weight:800; color:var(--blue-d); background:var(--sky)}
.zoomveil{position:fixed; inset:0; z-index:90; background:rgba(8,20,48,.985); display:flex; align-items:center; justify-content:center; padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom); touch-action:pinch-zoom}
.zoomveil img{max-width:100%; max-height:100%; object-fit:contain; background:#fff; border-radius:12px}
.zoomclose{position:fixed; top:calc(env(safe-area-inset-top) + 10px); right:10px}

.doneban,.tryban{display:flex; flex-direction:column; gap:2px; border-radius:18px; padding:10px 14px; margin:10px 0; font-weight:700}
.doneban{background:#d9f7e0; border:3px solid #4cb36b; color:#14612f}
.doneban b{font-family:var(--font-display); font-size:1.35rem}
.tryban{background:#fff6d6; border:3px solid #ffc928; color:#6b4a00}
.tryban b{font-family:var(--font-display); font-size:1.3rem}
.task.donecard{background:#f2fff5; border:3px solid #4cb36b}
.donebig{margin:0; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#14612f}
.regico{font-size:1.6rem; flex:none; width:48px; text-align:center}
.nrow.done p{text-decoration:none; opacity:.8}