/* Layout: una sola columna tipo app (máx 520px), tarjetas grandes para dedos chicos, barra inferior fija. Look único y luminoso a propósito. */
:root{
  --cielo:#E4F3FF; --cielo2:#CFE8FF; --tinta:#1B2850; --tinta2:#55618A;
  --azul:#3D6BFF; --coral:#FF6A57; --menta:#1FBF98; --sol:#FFC531;
  --papel:#FFFFFF; --linea:#C7D9F2; --ok:#16A37F; --mal:#E5483A;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --r:20px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--cielo);color:var(--tinta)}
body{font-family:var(--body);font-size:16px;line-height:1.45;min-height:100%;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 calc(92px + env(safe-area-inset-bottom,0px));
  background-image:radial-gradient(circle at 12% 8%,#fff 0 60px,transparent 61px),radial-gradient(circle at 88% 4%,#fff 0 40px,transparent 41px);
  background-repeat:no-repeat}
.app{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-top:14px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.15rem}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.muted{color:var(--tinta2)}
.lbl{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2)}
.card{background:var(--papel);border-radius:var(--r);padding:18px;box-shadow:0 4px 0 var(--cielo2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:16px;
  font-family:var(--display);font-weight:700;font-size:1.15rem;background:var(--azul);color:#fff;box-shadow:0 5px 0 #2448C2;transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #2448C2}
.btn.sec{background:var(--papel);color:var(--tinta);box-shadow:0 5px 0 var(--linea)}
.btn.sol{background:var(--sol);color:var(--tinta);box-shadow:0 5px 0 #D69A00}
.btn.full{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1 1 140px}
input[type=text]{width:100%;min-height:54px;border-radius:14px;border:3px solid var(--linea);padding:0 14px;font:inherit;font-size:1.1rem;font-weight:700;color:var(--tinta);background:var(--papel)}
input[type=text]:focus{border-color:var(--azul);outline:none}
.field{display:flex;flex-direction:column;gap:6px}
.hint{font-size:.85rem;color:var(--tinta2)}
.err{color:var(--mal);font-weight:800;font-size:.9rem}

/* top bar */
.top{display:flex;align-items:center;gap:12px}
.av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:2rem;flex:none;border:4px solid var(--papel);box-shadow:0 3px 0 var(--cielo2)}
.top .who{flex:1;min-width:0}
.top .who b{font-family:var(--display);font-size:1.3rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--papel);border-radius:999px;padding:6px 12px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--cielo2)}
.xp{height:14px;background:var(--cielo2);border-radius:99px;overflow:hidden}
.xp i{display:block;height:100%;background:var(--sol);border-radius:99px;transition:width .6s}

/* mundos */
.mundos{display:flex;flex-direction:column;gap:14px}
.mundo{display:flex;align-items:center;gap:14px;text-align:left;border-radius:24px;padding:16px;color:#fff;position:relative;overflow:hidden;transition:transform .1s}
.mundo:active{transform:scale(.98)}
.mundo .ico{width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:800;font-size:1.7rem}
.mundo h3{font-size:1.45rem}
.mundo .stars{font-size:.95rem;font-weight:800;opacity:.95}
.m-tablas{background:var(--coral);box-shadow:0 6px 0 #C94434}
.m-fracciones{background:var(--menta);box-shadow:0 6px 0 #128A6D}
.m-problemas{background:var(--sol);color:var(--tinta);box-shadow:0 6px 0 #D69A00}
.m-problemas .ico{background:rgba(255,255,255,.45)}

/* mapa de niveles */
.mapa{display:flex;flex-direction:column;gap:12px}
.nivel{display:flex;align-items:center;gap:14px;background:var(--papel);border-radius:20px;padding:14px;text-align:left;box-shadow:0 4px 0 var(--cielo2)}
.nivel .num{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff;flex:none}
.nivel.lock{opacity:.55}
.nivel .info{flex:1;min-width:0}
.nivel .est{font-size:1.2rem;letter-spacing:2px;color:var(--sol)}
.nivel .est .off{color:var(--linea)}

/* juego */
.juego{display:flex;flex-direction:column;gap:16px}
.ghead{display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:6px;flex:1}
.dots i{flex:1;height:10px;border-radius:9px;background:var(--cielo2)}
.dots i.ok{background:var(--menta)}.dots i.mal{background:var(--coral)}.dots i.now{background:var(--azul)}
.x{width:44px;height:44px;border-radius:12px;background:var(--papel);font-size:1.3rem;font-weight:800;box-shadow:0 3px 0 var(--cielo2)}
.preg{background:var(--papel);border-radius:26px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;box-shadow:0 6px 0 var(--cielo2)}
.preg .enun{font-size:1.15rem;font-weight:700;max-width:34ch}
.preg .big{font-family:var(--display);font-weight:800;font-size:3rem;line-height:1;font-variant-numeric:tabular-nums}
.vis{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.vis svg{max-width:100%}
.ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op{min-height:78px;border-radius:20px;background:var(--papel);font-family:var(--display);font-weight:800;font-size:1.9rem;box-shadow:0 6px 0 var(--linea);display:grid;place-items:center;transition:transform .08s;font-variant-numeric:tabular-nums}
.op:active{transform:translateY(4px);box-shadow:0 2px 0 var(--linea)}
.op.ok{background:var(--menta);color:#fff;box-shadow:0 6px 0 #128A6D;animation:pop .35s}
.op.mal{background:var(--coral);color:#fff;box-shadow:0 6px 0 #C94434;animation:shake .4s}
.op[disabled]{cursor:default}
.fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle;font-variant-numeric:tabular-nums}
.fr i{font-style:normal;padding:0 6px}
.fr i:first-child{border-bottom:3px solid currentColor;padding-bottom:3px}
.fr i:last-child{padding-top:3px}
.op .fr{font-size:1.6rem}
.feed{border-radius:20px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-weight:700}
.feed.ok{background:#D6F5EC;color:#0C5E48}
.feed.mal{background:#FFE1DC;color:#8E2418}
.feed.pista{background:#FFF2C6;color:#6B4F00}
.mascota{width:64px;height:64px;flex:none}
.mascota.salta{animation:salta .6s}
.mascota.triste{animation:wobble .6s}
.bonus{position:fixed;left:50%;top:35%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:2rem;color:var(--azul);pointer-events:none;animation:sube 1s forwards;z-index:30;text-shadow:0 3px 0 #fff}

/* resultados */
.res{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.estrellas{display:flex;gap:10px;justify-content:center}
.estrellas svg{width:76px;height:76px}
.estrellas .on{animation:estrella .5s both}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.kpi{background:var(--papel);border-radius:18px;padding:12px 6px;box-shadow:0 4px 0 var(--cielo2)}
.kpi b{display:block;font-family:var(--display);font-size:1.7rem;font-variant-numeric:tabular-nums}

/* insignias */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{background:var(--papel);border-radius:18px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;box-shadow:0 4px 0 var(--cielo2)}
.badge .med{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:var(--sol)}
.badge.off .med{background:var(--cielo2);filter:grayscale(1);opacity:.6}
.badge.off{color:var(--tinta2)}
.badge small{font-size:.75rem;line-height:1.2}
.badge b{font-size:.85rem;line-height:1.15}

/* ranking */
.rk{display:flex;flex-direction:column;gap:8px}
.rkrow{display:flex;align-items:center;gap:12px;background:var(--papel);border-radius:16px;padding:10px 12px;box-shadow:0 3px 0 var(--cielo2)}
.rkrow.yo{outline:3px solid var(--azul)}
.rkrow .pos{width:34px;font-family:var(--display);font-weight:800;font-size:1.3rem;text-align:center;font-variant-numeric:tabular-nums}
.rkrow .av{width:44px;height:44px;font-size:1.5rem;border-width:3px}
.rkrow .nm{flex:1;min-width:0}
.rkrow .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkrow .pts{font-family:var(--display);font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums}
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;text-align:center}
.podio div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.podio .base{width:100%;border-radius:14px 14px 4px 4px;color:#fff;font-family:var(--display);font-weight:800;font-size:1.4rem;display:grid;place-items:center}
.podio b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
.del{font-size:.8rem;font-weight:800;color:var(--mal);padding:6px 8px;border-radius:10px;background:#FFE1DC}

/* perfil */
.grid-av{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pick{aspect-ratio:1;max-width:100%;border-radius:16px;background:var(--papel);font-size:1.8rem;display:grid;place-items:center;box-shadow:0 3px 0 var(--linea);position:relative}
.pick.sel{outline:4px solid var(--azul)}
.pick.lock{opacity:.45}
.pick .lk{position:absolute;bottom:2px;right:4px;font-size:.65rem;font-weight:800;color:var(--tinta2)}
.grid-col{display:flex;gap:10px;flex-wrap:wrap}
.col{width:44px;height:44px;border-radius:50%;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.col.sel{outline:4px solid var(--tinta);outline-offset:2px}

/* nav */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--papel);border-top:3px solid var(--cielo2);
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
nav.tabs .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
nav.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;font-weight:800;font-size:.8rem;color:var(--tinta2)}
nav.tabs button svg{width:26px;height:26px}
nav.tabs button.on{color:var(--azul);background:var(--cielo)}

/* modal */
.sheet{position:fixed;inset:0;background:rgba(27,40,80,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet .box{background:var(--cielo);width:100%;max-width:520px;border-radius:26px 26px 0 0;padding:20px max(16px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;max-height:90%;overflow:auto;animation:subeSheet .25s}
.share-prev{border-radius:18px;max-width:100%;width:100%;aspect-ratio:1;display:block}
.redes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.redes a,.redes button{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;font-weight:800;text-decoration:none;color:#fff}
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tinta);color:#fff;padding:10px 18px;border-radius:14px;font-weight:800;z-index:50;max-width:90%;text-align:center}
#confeti{position:fixed;inset:0;pointer-events:none;z-index:35;width:100%;height:100%}
.aviso{background:#FFF2C6;color:#6B4F00;border-radius:16px;padding:12px 14px;font-weight:700;font-size:.92rem}

@keyframes pop{50%{transform:scale(1.08)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes salta{30%{transform:translateY(-18px) rotate(-6deg)}60%{transform:translateY(0)}80%{transform:translateY(-6px)}}
@keyframes wobble{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes sube{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-70px)}}
@keyframes estrella{from{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(8deg)}to{transform:scale(1)}}
@keyframes subeSheet{from{transform:translateY(40px);opacity:.4}}
@keyframes entra{from{transform:translateY(12px);opacity:.3}}
.entra{animation:entra .3s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* reloj */
.reloj{width:48px;height:48px;flex:none;position:relative}
.reloj svg{width:48px;height:48px;transform:rotate(-90deg)}
.reloj span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.reloj.fin span{font-size:1rem;color:var(--tinta2)}
.bonusTag{font-size:.8rem;font-weight:800;color:var(--azul);background:var(--cielo);border-radius:99px;padding:3px 10px}
.bonusTag.off{color:var(--tinta2);text-decoration:line-through}
.qimg{max-width:100%;max-height:300px;border-radius:14px;border:3px solid var(--linea);object-fit:contain;background:#fff}
.numbox{display:flex;gap:10px}
.numbox input{flex:1;min-width:0;text-align:center;font-family:var(--display);font-size:1.8rem;min-height:66px}
.numbox input.ok{border-color:var(--ok);background:#D6F5EC}
.numbox input.mal{border-color:var(--mal);background:#FFE1DC;animation:shake .4s}
/* panel docente */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--cielo2);padding:4px;border-radius:16px}
.seg button{min-height:42px;border-radius:12px;font-weight:800;color:var(--tinta2)}
.seg button.on{background:var(--papel);color:var(--tinta);box-shadow:0 2px 0 var(--linea)}
select,textarea,input[type=email],input[type=password]{width:100%;min-height:50px;border-radius:14px;border:3px solid var(--linea);padding:10px 12px;font:inherit;font-weight:700;color:var(--tinta);background:var(--papel)}
textarea{min-height:90px;resize:vertical}
select:focus,textarea:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--azul);outline:none}
.filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lista{display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:12px;background:var(--papel);border-radius:16px;padding:12px;text-align:left;box-shadow:0 3px 0 var(--cielo2);width:100%}
.item .nm{flex:1;min-width:0}
.item .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-block;font-size:.75rem;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--cielo);color:var(--tinta2)}
.chip.ok{background:#D6F5EC;color:#0C5E48}.chip.mal{background:#FFE1DC;color:#8E2418}.chip.sol{background:#FFF2C6;color:#6B4F00}
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.92rem}
.tabla th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta2);text-align:left;padding:6px 8px}
.tabla td{padding:9px 8px;border-top:2px solid var(--cielo)}
.tabla tr.click{cursor:pointer}
.tabla td.n{text-align:right}
.scroll{overflow-x:auto}
.barra-m{height:10px;background:var(--cielo2);border-radius:9px;overflow:hidden}
.barra-m i{display:block;height:100%;border-radius:9px}
.resp{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:2px solid var(--cielo)}
.resp .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex:none}
.opsEd{display:flex;flex-direction:column;gap:8px}
.opsEd label{display:flex;gap:8px;align-items:center}
.opsEd input[type=radio]{width:24px;height:24px;flex:none;accent-color:var(--menta)}
.check{display:flex;gap:10px;align-items:center;font-weight:800}
.check input{width:24px;height:24px;accent-color:var(--azul)}
.thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--cielo)}
nav.tabs .in{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}

/* ---- v2 ---- */
.objs{display:flex;flex-direction:column;gap:4px;font-size:2rem;line-height:1.1;align-items:center}
.objs div{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.objs .tach{opacity:.28;position:relative}
.objs .tach::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;border-top:4px solid var(--mal);transform:rotate(-30deg)}
.objs .diez{display:inline-grid;place-items:center;width:36px;height:52px;border-radius:8px;background:var(--azul);color:#fff;font-family:var(--display);font-weight:800;font-size:1rem}
.fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.fila>b{font-family:var(--display);font-size:2rem}
.colv{display:flex;flex-direction:column;gap:8px;align-items:center}
.plata{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.billete{display:inline-grid;place-items:center;min-width:86px;height:46px;padding:0 10px;border-radius:8px;background:#BFE9D2;border:3px solid #128A6D;font-family:var(--display);font-weight:800;font-size:1.2rem;color:#0C5E48}
.moneda{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#FFE08A;border:3px solid #D69A00;font-weight:800}
.palabras{font-family:var(--body);font-size:1.35rem;font-weight:800;line-height:1.3;display:block;max-width:24ch;margin:0 auto}
.tprop{border-collapse:collapse;font-variant-numeric:tabular-nums;font-weight:800;margin:0 auto}
.tprop td{border:3px solid var(--tinta);padding:8px 12px;min-width:48px;text-align:center;background:#fff}
.tprop tr:first-child td{background:var(--cielo2)}
.ops.dos{grid-template-columns:1fr 1fr}
.pmeta{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}
.voz{border-radius:999px;background:var(--cielo);padding:4px 10px;font-weight:800;font-size:1rem}
.voz.grande{background:var(--sol);font-size:1.05rem;padding:8px 16px;box-shadow:0 3px 0 #D69A00}
.btn.rojo{background:var(--coral);box-shadow:0 5px 0 #C94434}
.btn[disabled]{opacity:.55;cursor:default}
.grados{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.gchip{flex:none;min-width:52px;min-height:44px;border-radius:14px;background:var(--papel);font-family:var(--display);font-weight:800;font-size:1.15rem;box-shadow:0 3px 0 var(--linea);padding:0 12px}
.gchip.on{background:var(--azul);color:#fff;box-shadow:0 3px 0 #2448C2}
.gnum{width:54px;height:54px;border-radius:16px;background:var(--azul);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1;flex:none}
.gnum small{font-size:.8rem}
.post{display:flex;flex-direction:column;gap:10px}
.post .who b{display:block}
.txt{white-space:pre-wrap;overflow-wrap:anywhere}
.logro,.desafio{display:flex;gap:12px;align-items:center;background:var(--cielo);border-radius:16px;padding:12px}
.desafio .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;flex:none}
.reacs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.reac{display:inline-flex;gap:4px;align-items:center;border-radius:999px;background:var(--cielo);padding:6px 10px;font-size:1.05rem;min-height:38px}
.reac span{font-size:.85rem;font-weight:800;font-variant-numeric:tabular-nums}
.reac.on{background:#FFF2C6;outline:2px solid var(--sol)}
.perfil-cab{display:flex;gap:16px;align-items:center}
.perfil-cab h2{font-size:1.6rem}
.cont{display:flex;flex-direction:column;gap:4px}
.cont-h{display:flex;align-items:center;gap:10px;padding-bottom:6px}
.cont-h .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none}
.cont-r{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:2px solid var(--cielo)}
.cont-r.apag{opacity:.5}
.num-s{width:28px;height:28px;border-radius:50%;background:var(--tinta2);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.switch{position:relative;width:52px;height:30px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--linea);transition:background .15s}
.switch span::after{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked+span{background:var(--menta)}
.switch input:checked+span::after{transform:translateX(22px)}
.switch input:focus-visible+span{outline:3px solid var(--azul);outline-offset:2px}
.switch.dis{opacity:.45;cursor:not-allowed}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;background:var(--cielo);padding:2px 6px;border-radius:6px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tarjeta{border:3px dashed var(--linea);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;background:#fff;break-inside:avoid}
.tarjeta div{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tarjeta small{color:var(--tinta2);font-weight:800}
#printArea{display:none}
@media print{
  body.imprimiendo>*:not(#printArea){display:none!important}
  body.imprimiendo #printArea{display:block!important}
  body.imprimiendo{background:#fff!important;padding:0!important}
  .tarjetas{grid-template-columns:repeat(3,1fr)}
}
.item{color:inherit}
.who{min-width:0;flex:1}
.who .hint{display:block}
.linkbtn{font-weight:800;text-decoration:underline;color:var(--tinta2);padding:6px;align-self:center}
.card.alt{background:#FFF7DB;box-shadow:0 4px 0 #F2DFA0}
.codigo{display:flex;gap:12px;align-items:center}
.cod{font-family:var(--display);font-size:2.1rem;font-weight:800;letter-spacing:.18em;line-height:1.1;font-variant-numeric:tabular-nums}

/* ---- v4: avatar con accesorios ---- */
.avx{position:relative;overflow:visible}
.ax{position:absolute;line-height:1;pointer-events:none}
.ax.som{top:-.5em;left:50%;transform:translateX(-50%) rotate(-6deg);font-size:.62em}
.ax.ant{top:.52em;left:50%;transform:translateX(-50%);font-size:.5em}
.ax.man{bottom:-.2em;right:-.38em;font-size:.48em}
.ax.mas{bottom:-.2em;left:-.42em;font-size:.48em}
.vitrina{display:flex;gap:22px;align-items:center;padding:26px 18px 22px}
.vitrina .av{flex:none}
.tienda{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.titem{background:var(--papel);border-radius:18px;padding:12px 6px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;box-shadow:0 4px 0 var(--cielo2);min-width:0}
.titem b{font-size:.85rem;line-height:1.15}
.titem .tvis{font-size:2.2rem;line-height:1;height:44px;display:grid;place-items:center}
.titem .sw{width:44px;height:44px;border-radius:50%}
.titem .test{font-size:.78rem;font-weight:800;color:var(--tinta2)}
.titem.on{outline:3px solid var(--menta)}
.titem.on .test{color:var(--ok)}
.titem.caro{opacity:.55}
/* pausa */
.pausa{position:fixed;inset:0;z-index:60;background:var(--tinta);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pausa-top{display:flex;align-items:center;gap:12px;padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px));color:#fff;font-weight:800;min-height:56px}
.pausa-top .pz-n{flex:1;font-family:var(--display);font-size:1.1rem}
.pausa-top b{font-family:var(--display);font-size:1.5rem;color:var(--sol);font-variant-numeric:tabular-nums}
.pausa-zona{position:relative;flex:1;min-height:0}
.pausa canvas{display:block;touch-action:none;cursor:crosshair}
.pausa-msg{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(27,40,80,.55)}
.pausa-msg .card{max-width:360px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.pz-cuenta{font-family:var(--display);font-size:3.5rem;font-weight:800;color:var(--azul);line-height:1}
.pausa-card{display:flex;flex-direction:column;gap:10px;background:linear-gradient(135deg,#FFF7DB,#FFE9F4)}
.juegos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jbtn{background:var(--papel);border-radius:16px;padding:12px 4px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 var(--linea);font-size:.9rem}
.jbtn span{font-size:2rem}
.jbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--linea)}
/* adecuaciones y premium */
.adapt-aviso{background:#FFF2C6;box-shadow:0 4px 0 #F2DFA0;display:flex;flex-direction:column;gap:8px}
.adapt{border:3px solid #F2DFA0}
.premium-on{background:linear-gradient(135deg,#FFF7DB,#FFFFFF)}
.premium-off{background:var(--cielo)}
.lista-p{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.guia-link{display:flex;gap:12px;align-items:center;width:100%;text-align:left}
/* guía */
.guia{display:flex;flex-direction:column;gap:16px}
.guia h2{font-size:1.45rem;margin-top:10px}
.guia-hero{display:flex;gap:14px;align-items:center;background:var(--papel);border-radius:24px;padding:18px;box-shadow:0 6px 0 var(--cielo2)}
.guia-hero h1{font-size:1.6rem;margin-bottom:6px}
.guia-hero p{max-width:60ch}
.claves{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.clave{display:flex;gap:10px;background:var(--papel);border-radius:18px;padding:14px;box-shadow:0 4px 0 var(--cielo2)}
.clave>span{font-size:1.6rem;line-height:1}
.clave p{font-size:.92rem;color:var(--tinta2);margin-top:2px}
.tl{border-collapse:separate;border-spacing:6px;min-width:720px;font-size:.85rem}
.tl th{text-align:left;font-family:var(--display);font-size:1rem;white-space:nowrap}
.tl thead th{text-align:center;font-size:1.3rem}
.tl td{vertical-align:middle}
.tl .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.tl-c{display:block;background:var(--papel);border-left:5px solid;border-radius:10px;padding:8px;font-weight:700;line-height:1.2}
.linea{list-style:none;margin:0;padding:0 0 0 6px;display:flex;flex-direction:column;gap:14px;position:relative}
.linea::before{content:"";position:absolute;left:28px;top:10px;bottom:10px;width:4px;background:linear-gradient(var(--coral),var(--sol),var(--menta),var(--azul),#8A5CF6);border-radius:4px}
.linea li{display:flex;gap:12px;align-items:flex-start;position:relative}
.linea .nodo{flex:none;width:48px;height:48px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.25rem;z-index:1;border:4px solid var(--cielo)}
.linea .card{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;border-top:5px solid var(--c)}
.linea ul,.frases ul{margin:4px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.linea summary{cursor:pointer;font-weight:800;color:var(--azul)}
.linea details[open] summary{margin-bottom:8px}
.frases{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.pausa .x{color:var(--tinta)}
.cont-r{flex-wrap:wrap}
.cont-r>span:nth-child(2){flex:1 1 150px}
.cont-r>.chip:first-of-type{margin-left:auto}
.guia-hero{flex-wrap:wrap}
.guia-hero>div{flex:1 1 220px;min-width:0}
.tl td{min-width:118px}
.tl tbody th{min-width:120px;white-space:normal}

/* ---- v5: personaje de cuerpo entero ---- */
.avs{padding:0;overflow:hidden;background:var(--cielo2)}
.avs svg{width:100%;height:100%;display:block}
.pj{display:block}
.probador{background:var(--papel);border-radius:26px;box-shadow:0 6px 0 var(--cielo2);overflow:hidden;display:flex;flex-direction:column}
.escenario{position:relative;display:flex;justify-content:center;background:var(--cielo)}
.escenario .pj.grande{width:100%;max-width:300px;height:auto;aspect-ratio:2/3}
.probando{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;font-weight:800;font-size:.85rem;border-radius:999px;padding:5px 12px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.pr-acc{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:12px}
.pr-acc b{font-family:var(--display);font-size:1.15rem}
.pr-acc .btn{min-height:46px}
.slots{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;padding:8px;border-top:3px solid var(--cielo);overflow-x:auto}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;min-width:38px}
.slot span{font-size:1.35rem;line-height:1;filter:grayscale(1);opacity:.45}
.slot.lleno span{filter:none;opacity:1}
.slot small{font-size:.62rem;font-weight:800;color:var(--tinta2);white-space:nowrap}
.slot.on{background:var(--cielo);outline:2px solid var(--azul)}
.tienda .titem{padding:8px 6px 10px}
.tsv{width:100%;max-width:96px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--cielo);display:block}
.tsv.alto{aspect-ratio:2/3;max-width:72px}
.tsv svg{width:100%;height:100%;display:block}
.titem .tvis{height:auto;aspect-ratio:1;width:100%;max-width:96px;font-size:2.6rem;border-radius:14px;background:var(--cielo)}
.titem.prob{outline:3px solid var(--azul)}
.vitrina-xl{display:flex;justify-content:center;background:var(--cielo);border-radius:22px;overflow:hidden}
.vitrina-xl .pj.xl{width:100%;max-width:340px;height:auto;aspect-ratio:2/3}
.ficha{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
.ficha b{font-family:var(--display);font-size:1.5rem}
.ficha .xp{width:100%;max-width:260px}
.puestos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.puesto{background:var(--cielo);border-radius:999px;padding:5px 10px;font-weight:800;font-size:.82rem}
.puesto.vacio{opacity:.55;font-weight:700}
.puesto i{font-style:normal}
.mini-pj{width:70px;flex:none;border-radius:14px;overflow:hidden;display:block}
.mini-pj svg{width:100%;height:auto;display:block}
.prev-pj{width:84px;flex:none;border-radius:16px;overflow:hidden;background:var(--cielo)}
.prev-pj svg{width:100%;height:auto;display:block}
.escenario .pj.grande{max-width:230px}
.slots{grid-template-columns:repeat(9,minmax(46px,1fr))}
.slot small{font-size:.6rem}

/* ---- v6: cuenta, alcancía, consultorio ---- */
.app.ancha{max-width:980px}
.tienda-top{display:grid;grid-template-columns:1fr;gap:12px}
.lado{display:flex;flex-direction:column;gap:12px}
@media (min-width:760px){.tienda-top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}.app.ancha .tienda{grid-template-columns:repeat(5,1fr)}}
.cuenta{background:var(--papel);border-radius:22px;padding:14px 16px 16px;box-shadow:0 5px 0 var(--cielo2);display:flex;flex-direction:column;gap:10px;animation:entra .3s}
.cuenta-h{display:flex;align-items:center;gap:8px}
.cuenta-h span{font-size:1.5rem}.cuenta-h b{font-family:var(--display);font-size:1.25rem}.cuenta-h small{margin-left:auto;color:var(--tinta2);font-weight:800;max-width:50%;text-align:right}
.cuaderno{--c:30px;background-color:#FFFEF7;background-image:linear-gradient(#D7E6F7 1px,transparent 1px),linear-gradient(90deg,#D7E6F7 1px,transparent 1px);background-size:var(--c) var(--c);border-radius:14px;padding:12px 14px;border:2px solid #E7EEF8;position:relative}
.cuaderno::before{content:"";position:absolute;left:84px;top:0;bottom:0;width:2px;background:#FFB3B3}
.cf{display:flex;align-items:center;height:var(--c);gap:8px}
.cf .et{width:72px;font-weight:800;font-size:.85rem;color:var(--tinta2);flex:none}
.cf .dig{display:flex;margin-left:auto;align-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.cf .dig i{width:var(--c);text-align:center;font-style:normal;line-height:var(--c)}
.cf .dig i.q{color:var(--azul);animation:pulso 1.4s infinite}
.cf .menos{color:var(--coral);margin-right:4px}
.cf.rr .dig{color:var(--ok)}
.cuenta.falta .cf.rr .dig{color:var(--mal)}
.raya{height:3px;background:var(--tinta);border-radius:2px;margin:2px 0 2px auto;width:60%}
.cuenta-msg{font-weight:700}
.adivina{display:flex;flex-direction:column;gap:8px}
.adivina label{font-weight:800}
.adivina .numbox input{font-size:1.4rem;min-height:54px}
@keyframes pulso{50%{opacity:.35}}
.alcancia{background:linear-gradient(160deg,#FFE9F4,#FFF7DB);border-radius:22px;padding:14px 16px;box-shadow:0 5px 0 #F2DFA0;display:flex;flex-direction:column;gap:8px}
.alc-top{display:flex;gap:12px;align-items:center}
.cerdo{font-size:2.6rem;line-height:1;animation:salta 2.4s infinite}
.alc-q{font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums}
.alc-ec{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.alc-ec span{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:12px;padding:6px 10px;min-width:62px}
.alc-ec span small{font-size:.7rem;font-weight:800;color:var(--tinta2)}
.alc-ec span b{font-family:var(--display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.alc-ec span.op{background:none;min-width:0;padding:0;font-family:var(--display);font-weight:800;font-size:1.4rem}
.alc-ec span.hl{background:var(--menta);color:#fff}.alc-ec span.hl small{color:#E6FFF6}
.alc-barra{height:12px;border-radius:9px;background:#fff;overflow:hidden}
.alc-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--sol),var(--coral));border-radius:9px}
.alc-h{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.alc-h li{display:flex;justify-content:space-between;background:#fff;border-radius:10px;padding:6px 10px;font-weight:700;font-size:.9rem}
.alc-h li b{color:var(--mal);font-variant-numeric:tabular-nums}
.plan{display:flex;flex-direction:column;gap:8px;border-top:5px solid var(--menta)}
.tarea{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:2px solid var(--cielo);flex-wrap:wrap}
.tarea .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none}
.tarea .nm{flex:1 1 140px;min-width:0}.tarea .nm b{display:block}
.tarea .cnt{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
.tarea.lista .cnt{color:var(--ok)}
.nota{background:var(--cielo);border-radius:12px;padding:10px}
.precio-r{display:flex;align-items:center;gap:6px;padding:6px 0;border-top:2px solid var(--cielo)}
.precio-r .nm{flex:1;min-width:0}.precio-r .nm b{display:block}
.precio-r input{width:84px;min-height:42px;text-align:center;font-variant-numeric:tabular-nums}
.guardar-barra{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;justify-content:flex-end;background:var(--cielo);padding:10px 0;z-index:5}

/* ===== v7 · documentos, consentimientos y perfil de escuela ===== */
.leg{margin:10px 0}.leg b{display:block;font-family:var(--display);font-size:1.02rem}.leg p{margin:3px 0 0;line-height:1.5}
.lista-p{margin:6px 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.bloq{background:#F1F4FB;border-radius:12px;padding:10px 12px;font-weight:700;color:var(--tinta2);margin:0}
textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}
.card.cons{border-left:6px solid var(--sol);display:flex;flex-direction:column;gap:8px}
.card.cons.ok{border-left-color:var(--menta)}
.docu{background:#fff;border:2px solid var(--linea);border-radius:14px;padding:14px 16px;line-height:1.5;font-size:.95rem}
.docu.chico{max-height:190px;overflow:auto;font-size:.88rem}
.docu p{margin:6px 0}.docu h2{margin:0 0 4px}
.firmas{margin-top:14px;border-top:2px dashed var(--linea);padding-top:10px}
.firma-img{max-width:260px;height:auto;display:block;border-bottom:2px solid var(--tinta)}
.firma-foto{max-width:100%;max-height:380px;display:block;border-radius:10px;margin:6px 0}
canvas.firma{width:100%;height:150px;background:#fff;border:3px dashed var(--linea);border-radius:14px;touch-action:none;cursor:crosshair}
.card.autoriz{display:flex;gap:12px;align-items:center}
@media print{
  .docu.imp{border:0;padding:0;font-size:11pt}
  .hoja{page-break-after:always;padding:10mm 4mm}.hoja:last-child{page-break-after:auto}
}
.tesc{display:flex;align-items:center;gap:12px;text-align:left;width:100%;color:inherit;border-left:7px solid var(--ec,var(--azul))}
.tesc .nm{flex:1;min-width:0;display:flex;flex-direction:column}
.tesc .nm b{font-family:var(--display);font-size:1.1rem}
.esc-mini{margin-left:auto;flex:none;border-radius:50%;padding:0;line-height:0}
.escp{display:flex;flex-direction:column;gap:14px}
.escp-portada{height:170px;border-radius:22px;background-size:cover;background-position:center;display:flex;justify-content:space-between;align-items:flex-start;padding:12px}
.escp-portada .x{background:rgba(255,255,255,.92);color:var(--tinta)}
.escp-cab{display:flex;gap:14px;align-items:flex-end;margin-top:-58px;padding:0 10px}
.escp-cab>.av{border:5px solid #fff;box-shadow:0 6px 18px rgba(27,40,80,.18);flex:none;border-radius:24px}
.escp-cab h1{margin:6px 0 0;font-size:1.6rem;line-height:1.1;overflow-wrap:anywhere}
.escp-cab .muted{margin:2px 0 0}
.escp-lema{font-family:var(--display);font-size:1.15rem;font-weight:700;text-align:center;padding:12px 16px;border-radius:18px;background:color-mix(in srgb,var(--ec) 14%,#fff);color:var(--tinta)}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.galeria.ed .gimg{position:relative}.galeria.ed .del{position:absolute;top:4px;right:4px;min-height:30px;padding:0 8px}
.port-prev{height:110px;border-radius:16px;background-size:cover;background-position:center}
.equipo{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.miembro{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:8px;border-radius:14px;color:inherit}
.miembro:hover{background:var(--cielo)}
.miembro b{font-size:.92rem;overflow-wrap:anywhere}
.ejm{display:flex;gap:10px;align-items:center}
.ejm-q{flex:1;min-width:0;display:flex;gap:10px;align-items:center}
.ejm-vis{flex:none;max-width:110px;max-height:110px;overflow:hidden;font-size:.8rem;line-height:1.1}
.ejm-vis svg{max-width:100px;height:auto}
.ejm-big{font-family:var(--display);font-size:1.3rem;font-weight:800}
.cont-r{flex-wrap:wrap;row-gap:6px}
.cont-r>span:nth-child(2){flex:1 1 calc(100% - 50px)!important}
.cont-r>.chip:first-of-type{margin-left:42px}
.cont-r>.switch{margin-left:auto}