@charset "UTF-8";
/* Estilos base */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Estilos de la app */
/* Layout: columna de teléfono (máx. 460px) sobre azul noche.
   Barra superior (águila + usuario) · selector de vista · pantalla · navegación inferior.
   Tema oscuro único con azul como color principal; el color se cambia desde Perfil. */
:root{
  --bg:#04111F; --bg-col:#071827; --glow:#0B3A66;
  --surface:#0A1D31; --surface-2:#112B47; --line:#1C3A58;
  --fg:#EAF5FF; --fg-soft:#A4BDD4; --fg-muted:#7790AA;
  --accent:#19B6EC; --accent-2:#5FD0F7; --accent-deep:#107597;
  --accent-soft:rgba(25,182,236,.16); --accent-ring:rgba(25,182,236,.45); --on-accent:#04243C;
  --font-display:'Fredoka','Nunito',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --font-serif:'Cinzel','Times New Roman',serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg);font-family:var(--font-body);font-size:15px;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
svg{display:block}

#app{height:100%;max-width:460px;margin:0 auto;display:flex;flex-direction:column;position:relative}
@media(min-width:500px){#app{border-inline:1px solid var(--line);background:var(--bg-col)}}

/* Barra superior */
.top{display:flex;align-items:center;gap:10px;padding:10px 16px 6px}
.mascot{flex:none;border:0;background:none;padding:0;cursor:pointer;line-height:0;border-radius:16px}
.brand{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.brand .bl{height:34px;width:auto;flex:none}
.brand .bt{min-width:0}
.brand b{display:block;font:600 17px/1.05 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{font-weight:800;font-size:13px;color:var(--accent)}
.me{flex:none;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font:600 16px var(--font-display);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.avatar img{width:100%;height:100%;object-fit:cover}
.hop img{animation:hop .6s ease}
.bear{display:block;height:auto;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));user-select:none}
.bear.wow{transform:scale(1.06)}
.bear.sad{transform:rotate(-4deg) translateY(2px);filter:saturate(.55) brightness(.9) drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes hop{30%{transform:translateY(-8px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}

/* Selector de vista */
.views{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(84px,1fr);gap:6px;padding:6px 16px 10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.views[hidden],#app[hidden],#auth[hidden]{display:none}
.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px;padding:5px 4px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);cursor:pointer;line-height:1.1;transition:background .12s,border-color .12s}
.chip small{font-size:10.5px;font-weight:700;opacity:.85;white-space:nowrap}
.chip b{font-size:13px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Pantalla */
#screen{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 28px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;outline:0}

/* Navegación inferior */
.nav{display:flex;gap:2px;padding:6px 6px 8px;border-top:2px solid var(--line);background:var(--bg-col)}
.nav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:2px solid transparent;border-radius:14px;background:none;color:var(--fg-muted);font:800 11px var(--font-body);cursor:pointer}
.nav button[aria-current=page]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}
.nav svg{width:26px;height:26px}

/* Ruta de aprendizaje */
.insts{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 14px;padding:2px 16px;scrollbar-width:none}
.insts::-webkit-scrollbar{display:none}
.ip{flex:none;padding:8px 15px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 14px var(--font-body);cursor:pointer}
.ip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.unit{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:20px;background:var(--accent);color:var(--on-accent);box-shadow:0 6px 0 var(--accent-deep)}
.unit::after{content:"";position:absolute;right:-26px;bottom:-34px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
.unit p{margin:0;font-weight:800;font-size:13px;opacity:.85}
.unit h1{margin:2px 0 0;font:600 22px/1.15 var(--font-display);text-wrap:balance}
.unit .pct{position:relative;z-index:1;font:600 20px var(--font-display);background:rgba(0,0,0,.16);border-radius:14px;padding:8px 12px;white-space:nowrap}
.path{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-direction:column;align-items:center}
.path li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:44px;transform:translateX(var(--x,0))}
.node{width:76px;height:76px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 7px 0 var(--accent-deep);cursor:pointer;transition:transform .1s,box-shadow .1s}
.node:active{transform:translateY(5px);box-shadow:0 2px 0 var(--accent-deep)}
.node svg{width:32px;height:32px;stroke-width:2.6}
.node.open,.node.active{background:var(--accent-2)}
.node.active{animation:ring 2s ease-out infinite}
.node.locked{background:var(--surface-2);color:var(--fg-muted);box-shadow:0 7px 0 var(--line)}
.insts.mods{margin-top:-4px}
/* Profe Águila: camina y vuela por la pantalla */
#pet,#pet-shadow{position:fixed;left:0;top:0;z-index:45;pointer-events:none;will-change:transform}
#pet[hidden],#pet-shadow[hidden]{display:none}
#pet{width:60px;height:82px}
#pet .flip{position:absolute;inset:0;transform-origin:50% 92%}
#pet .bodyimg{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4));transform-origin:50% 100%;user-select:none;-webkit-user-drag:none}
#pet.walk .bodyimg{animation:waddle .44s ease-in-out infinite alternate}
#pet.fly .bodyimg{animation:fbob .36s ease-in-out infinite alternate}
#pet .wing{position:absolute;width:62px;height:31px;opacity:0;transition:opacity .15s;pointer-events:none}
#pet .wing svg{display:block;width:100%;height:100%;overflow:visible}
#pet .wing.r{left:42px;top:12px;transform-origin:0 50%}
#pet .wing.l{left:-44px;top:12px;transform-origin:100% 50%}
#pet .wing.l svg{transform:scaleX(-1)}
#pet.fly .wing{opacity:1}
#pet.fly .wing.r{animation:flapR .34s ease-in-out infinite}
#pet.fly .wing.l{animation:flapL .34s ease-in-out infinite}
#pet .pb{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;border-radius:12px}
#pet.fly .pb{pointer-events:none}
#pet .pb:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
#pet-shadow{width:38px;height:9px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(2px);z-index:44}
@keyframes waddle{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-3px)}}
@keyframes fbob{from{transform:translateY(2px)}to{transform:translateY(-3px)}}
@keyframes flapR{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(38deg)}}
@keyframes flapL{0%,100%{transform:rotate(62deg)}50%{transform:rotate(-38deg)}}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:10px 14px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14.5px var(--font-body);text-align:left;cursor:pointer}
.toggle b{flex:none;padding:5px 12px;border-radius:999px;background:var(--surface-2);color:var(--fg-soft);font-size:13px}
.toggle[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.toggle[aria-pressed=true] b{background:var(--accent);color:var(--on-accent)}
@media (prefers-reduced-motion:reduce){#pet.walk .bodyimg,#pet.fly .bodyimg{animation:none}}
/* Mis alumnos */
.al-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.al-head>div:first-child{flex:1 1 150px;min-width:0}
.al-hb{margin-left:auto}
.al-head h1{margin:0;font:600 24px var(--font-display)}
.al-head small{display:block;color:var(--fg-muted);font:700 13px var(--font-body);margin-top:2px}
.al-q{width:100%;min-height:48px;padding:9px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 16px var(--font-body)}
.al-q::placeholder{color:var(--fg-muted);font-weight:600}
.al-q:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.al-chips{margin-top:10px}
.al-chips .ip b{margin-left:6px;opacity:.75;font-weight:800}
.al-sel{display:grid;gap:8px;margin-top:2px}
.al-sel3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fld select.al-s,.fld input.al-s{width:100%;min-width:0;min-height:46px;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 14.5px var(--font-body);color-scheme:dark;text-overflow:ellipsis}
.al-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 2px 6px;color:var(--fg-soft);font-weight:800;font-size:13.5px}
.al-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.al-letter{margin:10px 4px 0;color:var(--accent);font:600 18px var(--font-display);padding:2px 0}
.al-item{border-radius:18px;border:2px solid var(--line);background:var(--surface);overflow:hidden}
.al-item.open{border-color:var(--accent)}
.al-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer;min-height:64px;font-family:var(--font-body)}
.al-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--font-display);color:#fff}
.al-av.m{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.al-av.f{background:linear-gradient(135deg,#EC4899,#BE185D)}
.al-av.n{background:linear-gradient(135deg,#6B7280,#4B5563)}
.al-main{flex:1;min-width:0;display:grid;gap:3px}
.al-main b{font-size:15px;font-weight:800;overflow-wrap:anywhere}
.al-main small{color:var(--fg-muted);font-weight:700;font-size:12.5px}
.al-ins{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.ic-chip{display:inline-block;padding:3px 9px;border-radius:8px;color:#fff;font:800 11.5px var(--font-body);line-height:1.3}
.ic-chip.none{background:var(--surface-2);color:var(--fg-muted)}
.al-n{flex:none;text-align:center;min-width:46px;padding:4px 6px;border-radius:12px;background:var(--surface-2)}
.al-n b{display:block;font:600 18px var(--font-display)}
.al-n small{display:block;font-size:10.5px;font-weight:800;color:var(--fg-muted)}
.al-form{display:grid;gap:12px;padding:4px 14px 14px;border-top:2px solid var(--line);background:var(--surface-2)}
.al-form .fld{margin-top:0}
.al-form .fld input.al-s,.al-form .fld select.al-s{background:var(--surface)}
.al-checks{display:flex;flex-wrap:wrap;gap:8px}
.al-checks label{position:relative}
.al-checks input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0}
.al-checks span{display:flex;align-items:center;min-height:42px;padding:0 13px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 13.5px var(--font-body)}
.al-checks input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.al-checks input:focus-visible+span{outline:3px solid var(--accent-2);outline-offset:2px}
.al-acts{display:flex;flex-wrap:wrap;gap:8px}
.al-acts .btn{flex:1 1 120px}
.al-acts .btn:first-child{flex-basis:100%}
.btn.ghost.danger{color:#FCA5A5;border-color:#F87171}
.mi-banner{margin:0 0 10px;padding:10px 12px;border-radius:12px;border:2px solid var(--accent);background:var(--accent-soft);font-size:13.5px;font-weight:700;line-height:1.4}
.mi-pick{display:flex;flex-wrap:wrap;gap:8px}
.mi-pick .ip{display:inline-flex;align-items:center;gap:8px}
.mi-g{border:2px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.mi-g>h3,.mi-it>h4{margin:0}
.mi-h{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;background:transparent;border:0;color:var(--fg);font:600 18px var(--font-display);text-align:left;cursor:pointer}
.mi-h .ico{flex:none;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.mi-h .tt{flex:1;min-width:0}
.mi-h small{color:var(--fg-muted);font:800 12px var(--font-body)}
.mi-h .chev,.mi-ih .chev{flex:none;color:var(--fg-soft);transition:transform .2s}
.mi-h[aria-expanded=true] .chev,.mi-ih[aria-expanded=true] .chev{transform:rotate(180deg)}
.mi-h:focus-visible,.mi-ih:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px}
.mi-b{padding:0 10px 10px}
.mi-b[hidden],.mi-ib[hidden]{display:none}
.mi-it{border:2px solid var(--line);border-radius:14px;background:var(--surface-2);margin-top:8px;overflow:hidden}
.mi-ih{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:8px 14px;background:transparent;border:0;color:var(--fg);font:800 15px/1.3 var(--font-body);text-align:left;cursor:pointer}
.mi-ib{padding:2px 14px 14px;font-size:14px;line-height:1.45;display:grid;gap:10px}
.mi-ib .btn{width:100%;margin:0;text-decoration:none;text-align:center}
.mi-ib .btn.sm{width:auto}
.mi-ib input[type=date],.mi-ib input[type=time]{color-scheme:dark}
.mi-ib textarea.tx{background:var(--bg-col)}
.mi-help{margin:0;color:var(--fg-soft)}
.mi-h4{margin:6px 0 0;font:600 15px var(--font-display);color:var(--fg)}
.mi-kv{margin:0;display:grid}
.mi-kv>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line)}
.mi-kv dt{color:var(--fg-muted);font-weight:800;font-size:13px;flex:none}
.mi-kv dd{margin:0;font-weight:800;text-align:right;min-width:0;overflow-wrap:anywhere}
.mi-ok{color:#4ADE80}
.mi-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mi-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.mi-lt{flex:1;min-width:0;display:grid;gap:3px}
.mi-lt b{font-size:14px}
.mi-lt span:not(.mi-bar){color:var(--fg-soft);font-size:13px;overflow-wrap:anywhere}
.mi-lt a{color:var(--accent)}
.mi-rt{flex:none;display:grid;justify-items:end;gap:4px}
.mi-rt em{font:600 15px var(--font-display);font-style:normal}
.mi-x{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:2px solid var(--line);background:transparent;color:#FCA5A5;cursor:pointer}
.mi-chip{flex:none;display:inline-block;padding:3px 9px;border-radius:999px;font:800 11.5px var(--font-body);border:1.5px solid var(--line);color:var(--fg-soft);white-space:nowrap}
.mi-chip.ok{color:#4ADE80;border-color:#4ADE80;background:rgba(74,222,128,.12)}
.mi-chip.warn{color:#FBBF24;border-color:#FBBF24;background:rgba(251,191,36,.12)}
.mi-chip.bad{color:#FCA5A5;border-color:#F87171;background:rgba(248,113,113,.12)}
.mi-bar{display:block;height:8px;border-radius:99px;background:var(--bg-col);overflow:hidden}
.mi-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.mi-nt{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.mi-grade{flex:none;min-width:52px;text-align:center;padding:6px 8px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font:600 20px var(--font-display)}
.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mi-tw{overflow-x:auto}
.mi-tbl{width:100%;border-collapse:collapse;font-size:13px}
.mi-tbl th,.mi-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;font-weight:800}
.mi-tbl thead th{color:var(--fg-muted);font-size:12px}
.mi-tbl tbody th{font-weight:800}
.mi-tbl tfoot th,.mi-tbl tfoot td{border-bottom:0;color:var(--accent)}
.mi-det{margin-top:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 12px}
.mi-det summary{cursor:pointer;min-height:42px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
.mi-det summary small{margin-left:auto;color:var(--fg-muted);font-weight:800}
.mi-det[open]{padding-bottom:10px}
.mi-mod{margin:8px 0 4px;color:var(--fg-muted);font-weight:800;font-size:12.5px}
.mi-plan{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mi-plan li{display:flex;gap:8px;align-items:baseline;font-size:13.5px;color:var(--fg-soft)}
.mi-plan li i{font-style:normal;width:16px;flex:none;text-align:center;color:var(--fg-muted)}
.mi-plan li.done i{color:#4ADE80}
.mi-plan li.next{color:var(--fg);font-weight:800}
.mi-plan li.next i{color:var(--accent)}
.mi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mi-crit{display:grid;gap:2px}
.mi-crit>span{font-weight:800;font-size:13px;color:var(--fg-soft)}
.mi-stars{display:flex;gap:2px}
.mi-stars button{min-width:40px;min-height:42px;padding:0;border:0;background:transparent;font-size:28px;line-height:1;color:var(--line);cursor:pointer}
.mi-stars button[aria-pressed=true]{color:#F5C84B}
.mi-err{margin:0;color:#FCA5A5;font-weight:800;font-size:13.5px}
.mi-err[hidden]{display:none}
.mi-md .btn.sm{flex:none}
.mi-form{display:grid;gap:10px}

.lk-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.lk-st{border:2px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.lk-st.open{border-color:var(--accent)}
.lk-sh{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px;background:transparent;border:0;color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.lk-sh .nm{flex:1;min-width:0;display:grid;gap:3px;justify-items:start}
.lk-sh .nm b{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-sh .nm small{color:var(--fg-muted);font-weight:800;font-size:12.5px}
.lk-sh .chev{flex:none;color:var(--fg-soft);transition:transform .2s}
.lk-sh[aria-expanded=true] .chev{transform:rotate(180deg)}
.lk-sh:focus-visible{outline:3px solid var(--accent-ring);outline-offset:-3px}
.lk-sb{padding:10px 12px 14px;display:grid;gap:10px;border-top:1px solid var(--line)}
.lk-sb .btn{margin:0}
.lk-cl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lk-c{display:grid;gap:8px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface-2)}
.lk-c.locked{border-color:#F87171}
.lk-cr{display:flex;align-items:center;gap:10px}
.lk-cr .ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.lk-c.locked .ico{background:rgba(248,113,113,.14);color:#FCA5A5}
.lk-ct{flex:1;min-width:0;display:grid;gap:3px;justify-items:start}
.lk-ct b{font-size:15px}
.lk-ct small{color:var(--fg-muted);font-weight:800;font-size:12.5px}
.lk-chips{display:flex;flex-wrap:wrap;gap:4px}
.lk-cr .btn{flex:none;width:auto}
.lk-more{justify-self:start;min-height:36px}
.lk-ls{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lk-ls li{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.lk-ls li.locked{border-color:#F87171;background:rgba(248,113,113,.08)}
.lk-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-soft);font:800 12.5px var(--font-body)}
.lk-t{flex:1;min-width:0;display:grid;font-weight:800;font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.lk-t small{color:#FCA5A5;font-weight:800;font-size:12px}
.lk-lb{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--fg-muted);cursor:pointer}
.lk-lb[aria-pressed=true]{color:#FCA5A5;border-color:#F87171;background:rgba(248,113,113,.14)}
.lk-ban{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;padding:14px;border-radius:18px;border:2px solid #F59E0B;background:rgba(245,158,11,.12)}
.lk-ban>svg{flex:none;color:#FBBF24}
.lk-ban>div{flex:1 1 180px;min-width:0}
.lk-ban b{display:block;font-size:15px}
.lk-ban p{margin:2px 0 0;color:var(--fg-soft);font-size:13.5px;line-height:1.4}
.lk-ban .btn{flex:none;width:auto;margin:0;text-decoration:none}
.lk-note{display:flex;align-items:center;gap:8px}
.lk-note svg{flex:none;color:#FBBF24}
.lk-bl{display:inline-block;max-width:100%;overflow-wrap:anywhere;filter:blur(6px);-webkit-user-select:none;user-select:none;pointer-events:none}
.lk-bs{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.lk-bs:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.lk-bs[aria-checked=true]{border-color:var(--accent)}
.lk-bt{flex:1;min-width:0;display:grid;gap:2px}
.lk-bt b{font-size:14px}
.lk-bt small{color:var(--fg-muted);font-weight:800;font-size:12.5px;line-height:1.3}
.lk-sw{flex:none;position:relative;width:46px;height:28px;border-radius:999px;border:2px solid var(--line);background:var(--surface-2);transition:background .15s,border-color .15s}
.lk-sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--fg-muted);transition:transform .15s,background .15s}
.lk-bs[aria-checked=true] .lk-sw{background:var(--accent);border-color:var(--accent)}
.lk-bs[aria-checked=true] .lk-sw::after{transform:translateX(18px);background:#fff}
.ip.lkp{display:inline-flex;align-items:center;gap:6px}
.ip.lkp svg{color:#FBBF24}
.node.tlock{background:var(--surface-2);color:#FBBF24;box-shadow:0 7px 0 var(--line)}
.node.tlock .ins{opacity:.45}
.node.tlock .bdg{background:#F59E0B;color:#1B1200}
.mi-lkc{display:inline-flex;align-items:center;gap:4px;margin-left:6px;color:#FBBF24;font-size:12px;font-weight:800}
.mi-lkc svg{width:13px;height:13px}
.mi-plan li.tlock{color:var(--fg-muted)}
.mi-plan li.tlock i svg{width:13px;height:13px;margin:0 auto;color:#FBBF24}
@media (min-width:900px){#screen[data-tab=ruta]>.lk-ban,#screen[data-tab=ruta]>.lk-note{max-width:640px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.lk-sh .chev{transition:none}}
@media (prefers-reduced-motion:reduce){.mi-h .chev,.mi-ih .chev{transition:none}}
/* Clase 2: lista de temas de la ruta (la edita el profesor) */
.mt-sec{margin:0 0 18px}
.mt-lead{margin:0 0 12px;color:var(--fg-soft);font-size:14.5px;line-height:1.45}
.mt-n{flex:none;position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:600 17px var(--font-display);box-shadow:0 3px 0 var(--accent-deep)}
.mt-n.sm{width:30px;height:30px;font-size:14px;box-shadow:none}
.mt-path{list-style:none;margin:0;padding:0}
.mt-path li{position:relative;display:flex;align-items:center;gap:12px;padding:5px 0}
.mt-path li::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:3px;background:var(--line)}
.mt-path li:first-child::before{top:50%}
.mt-path li:last-child::before{bottom:50%}
.mt-path li:only-child::before{display:none}
.mt-t{flex:1;min-width:0;padding:11px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font:800 15.5px/1.3 var(--font-body);overflow-wrap:anywhere}
.mt-ed{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.mt-r{display:flex;align-items:center;gap:6px;min-width:0}
.mt-in{flex:1;min-width:0;min-height:46px;padding:8px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 16px var(--font-body)}
.mt-in:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.mt-b{flex:none;width:40px;height:46px;padding:0;display:grid;place-items:center;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--fg-soft);cursor:pointer}
.mt-b svg{width:20px;height:20px}
.mt-b[disabled]{opacity:.35;cursor:default}
.mt-b.del{color:#FCA5A5}
.mt-b:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px}

/* Afinador */
.tn-ins{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tn-chip{min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 14px var(--font-body);cursor:pointer}
.tn-chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.tn-strs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.tn-s{flex:1 1 56px;max-width:84px;min-height:58px;padding:6px 4px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.tn-s b{font:800 16px/1.1 var(--font-body)}
.tn-s small{color:var(--fg-muted);font-weight:700;font-size:11.5px}
.tn-s[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.tn-s[aria-pressed=true] b{color:var(--accent)}
.tn-help{margin:8px 0 12px}
.tn-tone{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px}
.tn-card{margin-top:4px;padding:18px 16px;border:2px solid var(--line);border-radius:22px;background:var(--surface);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.tn-ic{align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.tn-h{margin:0;font:700 22px/1.2 var(--font-display)}
.tn-p{margin:0;color:var(--fg-soft);font-size:14.5px;line-height:1.5}
.tn-bad{color:#FCA5A5}
.tn-card .gp-how{text-align:left;margin:0}
.tn-card .gp-priv{text-align:left}
.tn-live{outline:0;gap:6px}
.tn-k{margin:0;color:var(--fg-muted);font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.tn-note{font:700 76px/1.05 var(--font-display);color:var(--fg);min-height:80px}
.tn-sub{margin:0;color:var(--fg-soft);font-weight:800;font-size:14px;min-height:20px}
.tn-gauge{position:relative;height:60px;margin:12px 4px 2px;border-radius:14px;background:var(--surface-2);overflow:hidden}
.tn-zone{position:absolute;top:0;bottom:0;left:45%;width:10%;background:rgba(34,197,94,.3)}
.tn-tk{position:absolute;bottom:0;height:14px;width:2px;margin-left:-1px;background:var(--line)}
.tn-tk.mid{top:0;height:auto;background:var(--fg-muted);opacity:.7}
.tn-ndl{position:absolute;top:8px;bottom:8px;left:50%;width:8px;margin-left:-4px;border-radius:5px;background:var(--fg-muted);transition:left .09s linear,background-color .15s}
.tn-ends{display:flex;justify-content:space-between;gap:8px;margin:0 4px;color:var(--fg-muted);font-weight:800;font-size:12.5px}
.tn-ends span:nth-child(2){color:var(--fg-soft)}
.tn-say{margin:6px 0 0;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15.5px;line-height:1.4;color:var(--fg-soft)}
.tn-say svg{flex:none;width:24px;height:24px;stroke-width:3.2}
.tn-live .gp-meter{margin-top:8px}
.tn-live[data-st=ok]{border-color:#22C55E;background:rgba(34,197,94,.12)}
.tn-live[data-st=ok] .tn-note,.tn-live[data-st=ok] .tn-say{color:#4ADE80}
.tn-live[data-st=ok] .tn-ndl{background:#22C55E}
.tn-live[data-st=near] .tn-ndl{background:#FBBF24}
.tn-live[data-st=near] .tn-say{color:#FCD34D}
.tn-live[data-st=far] .tn-ndl{background:#F87171}
.tn-live[data-st=far] .tn-say{color:#FCA5A5}
.tn-live[data-st=off] .tn-ndl,.tn-live[data-st=idle] .tn-ndl{opacity:.22}
.tn-live[data-st=idle] .tn-note{color:var(--fg-muted)}
.tn-act{display:flex;justify-content:center;margin-top:4px}
.tn-ins button:focus-visible,.tn-s:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tn-ndl{transition:none}}
@media (max-width:899px){#nav.n7 button{font-size:10px}#nav.n7 svg{width:24px;height:24px}}
@media (max-width:340px){#nav.n7{gap:0;padding:6px 2px 8px}#nav.n7 button{font-size:9.5px;padding:6px 0;border-width:1px;border-radius:12px}#nav.n7 svg{width:22px;height:22px}}

/* Resumen de clases */
.al-rp{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:0 0 10px;padding:6px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14px var(--font-body);text-align:left;cursor:pointer}
.al-rp i{flex:none;font-style:normal;color:var(--accent);font-size:22px;line-height:1}
.rp-nav{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center}
.rp-nav button{height:48px;padding:0;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 24px/1 var(--font-body);cursor:pointer}
.rp-nav button:disabled{opacity:.35;cursor:default}
.rp-nav select.al-s{width:100%;min-width:0;height:48px;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14.5px var(--font-body);color-scheme:dark;text-overflow:ellipsis}
.rp-nav select.al-s:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.rp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.rp-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:84px;padding:10px 4px;border-radius:14px;border:2px solid var(--line);background:var(--surface);text-align:center}
.rp-stat b{font:800 22px/1.1 var(--font-display);color:var(--accent)}
.rp-stat em{font-style:normal;font-weight:800;font-size:13px;color:var(--accent)}
.rp-stat small{margin-top:4px;color:var(--fg-muted);font-weight:700;font-size:12px}
.rp-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.rp-i{border:2px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.rp-r,.rp-g{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 12px;border:0;background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.rp-r span,.rp-g span{flex:1;min-width:0}
.rp-r b,.rp-g b{display:block;font:800 14.5px/1.25 var(--font-body);overflow-wrap:anywhere}
.rp-r small,.rp-g small{display:block;margin-top:2px;color:var(--fg-muted);font-weight:700;font-size:12.5px;overflow-wrap:anywhere}
.rp-r i{flex:none;font-style:normal;color:var(--accent);font-weight:800;font-size:22px;line-height:1;transition:transform .15s}
.rp-r[aria-expanded=true] i{transform:rotate(90deg)}
.rp-g{min-height:48px;padding:6px 0}
.rp-g i{flex:none;font-style:normal;color:var(--accent);font-weight:800;font-size:13px}
.rp-d{list-style:none;margin:0;padding:4px 12px 12px;display:grid;gap:8px;border-top:2px solid var(--line)}
.rp-d>li{padding-top:4px}
.rp-d>li>b{display:block;font:800 13.5px/1.25 var(--font-body);text-transform:capitalize}
.rp-d>li>small{display:block;color:var(--fg-muted);font-weight:700;font-size:12.5px;overflow-wrap:anywhere}
.rp-d .btn{margin-top:4px}
.rp-r:focus-visible,.rp-g:focus-visible,.rp-nav button:focus-visible,.al-rp:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}

/* Asistencia */
.al-hb{display:flex;gap:8px;flex:none}
.at-sec{margin:2px 0 0;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--surface)}
.at-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-bottom:10px}
.at-h h4{margin:0;font:600 16px var(--font-display)}
.at-h small{color:var(--fg-muted);font-weight:700;font-size:12.5px}
.at-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.at-r{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:6px 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg-col);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.at-r span{flex:1;min-width:0}
.at-r b{display:block;font:800 14px/1.25 var(--font-body);text-transform:capitalize}
.at-r small{display:block;color:var(--fg-muted);font-weight:700;font-size:12.5px;overflow-wrap:anywhere}
.at-r i{flex:none;font-style:normal;color:var(--accent);font-weight:800;font-size:13px}
.at-r:focus-visible,.at-add:focus-visible,.at-seg button:focus-visible,.at-chip button:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.at-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.at-seg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.at-seg button{min-height:46px;padding:6px 8px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 14px/1.2 var(--font-body);cursor:pointer}
.at-seg button[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.at-chips{display:flex;flex-wrap:wrap;gap:6px}
.at-chip{display:inline-flex;align-items:center;gap:2px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--fg);font-weight:800;font-size:13.5px}
.at-chip button{display:grid;place-items:center;width:28px;height:28px;margin:-4px -8px -4px 2px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg-soft);cursor:pointer}
.at-chip button svg{width:16px;height:16px}
.at-res{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.at-add{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.at-add span{flex:none;color:var(--accent);font-weight:800}
.at-add b{flex:1;min-width:0;font:800 14px/1.25 var(--font-body);overflow-wrap:anywhere}
.at-add small{flex:none;color:var(--fg-muted);font-weight:700;font-size:12px}
.at-none{padding:10px 4px;color:var(--fg-muted);font-weight:700;font-size:13.5px}

/* Administrar cursos, módulos y clases */
.ad-bar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.ad-bar .btn{flex:1 1 auto}
.ad-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ad-card{min-width:0;padding:10px;border-radius:16px;border:2px solid var(--line);background:var(--surface)}
.ad-open{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.ad-open:focus-visible,.ad-ic:focus-visible,.ad-go:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.ad-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent)}
.ad-ico b{font:600 18px var(--font-display)}
.ad-main{flex:1;min-width:0}
.ad-main b{display:block;font:800 16px/1.25 var(--font-body);overflow-wrap:anywhere}
.ad-main small{display:block;margin-top:2px;color:var(--fg-muted);font-weight:700;font-size:12.5px}
.ad-chev{flex:none;color:var(--fg-muted)}
.ad-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;margin-top:8px}
.ad-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ad-row .ad-open{flex:1 1 168px;width:auto;min-width:0}
.ad-row .ad-act{margin:0 0 0 auto;flex:none}
.ad-row .ad-conf{flex:1 1 100%;margin:0}
.ad-go{flex:1 1 110px;min-width:0}
.ad-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.ad-ics{display:flex;flex-wrap:wrap;gap:8px}
.ad-ic{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);cursor:pointer}
.ad-ic[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.ad-conf{margin-top:8px;padding:10px;border-radius:12px;border:2px solid #F87171;background:rgba(248,113,113,.1)}
.ad-conf p{margin:0 0 8px;color:var(--fg);font-weight:700;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.ad-cb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-foot .ad-conf{margin:0}
.btn.dng{background:#F87171;color:#2A0A0A;box-shadow:0 3px 0 #B91C1C}
.btn.dng:active{transform:translateY(2px);box-shadow:0 1px 0 #B91C1C}
.path li.ad-empty{list-style:none;padding:26px 12px;text-align:center;color:var(--fg-soft);font-weight:800;line-height:1.4;--x:0px}
.cl-prevw{margin-top:8px}
.cl-prevw:empty{display:none}
.cl-prev{display:block;width:100%;max-height:320px;border-radius:12px;background:var(--surface)}
img.cl-prev{object-fit:contain}

.reg-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.reg-item{padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:var(--surface)}
.reg-row{display:flex;align-items:center;gap:12px}
.reg-nm{flex:1;min-width:0;display:grid}
.reg-nm b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-nm small{color:var(--fg-muted);font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-row .btn.sm{flex:none;width:auto;margin:0}
.reg-conf{margin-top:10px;padding:12px;border-radius:12px;border:2px solid #F87171;background:rgba(248,113,113,.12)}
.reg-conf p{margin:0 0 10px;font-size:14px;line-height:1.45}
.reg-conf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reg-conf .btn{margin:0}

.al-empty{padding:26px 12px;text-align:center;color:var(--fg-muted);font-weight:700}
/* Lección interactiva */
#lesson{position:fixed;inset:0;z-index:55;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#lesson[hidden]{display:none}
#gp{position:fixed;inset:0;z-index:55;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#gp[hidden]{display:none}
.gp-card{padding:16px;border:2px solid var(--line);border-radius:22px;background:var(--surface);text-align:center}
.gp-k{margin:0 0 4px;color:var(--fg-muted);font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.gp-t{margin:0;font:700 54px/1.05 var(--font-display);color:var(--accent)}
.gp-sub{margin:4px 0 8px;color:var(--fg-soft);font-weight:800;font-size:15px}
.gp-dia{width:min(172px,52%);margin:0 auto 4px}
.gp-leg{margin:0 0 2px;color:var(--fg-muted);font-weight:700;font-size:12.5px}
.gd{display:block;width:100%;height:auto;overflow:visible}
.gd-nut{stroke:var(--fg);stroke-width:4}
.gd-f{stroke:var(--line);stroke-width:1.6}
.gd-s{stroke:var(--fg-muted);stroke-width:1.8}
.gd-s.hl{stroke:var(--accent);stroke-width:4}
.gd-d{fill:var(--accent)}
.gd-n{fill:#04111F;font:800 11px var(--font-body)}
.gd-o{fill:none;stroke:var(--fg-soft);stroke-width:2}
.gd-o.hl{fill:var(--accent);stroke:var(--accent)}
.gd-x{fill:none;stroke:var(--fg-muted);stroke-width:2.2;stroke-linecap:round}
.gd-l{fill:var(--fg-muted);font:800 10px var(--font-body)}
.gd-l.hl{fill:var(--accent)}
.gp-tip{margin:6px 0 0;color:var(--fg-soft);font-size:14px;line-height:1.45;text-align:left}
.gp-head{padding:12px 16px}
.gp-head .gp-t{font-size:48px}
.gp-head .gp-sub{margin:2px 0 0}
.gp-dg{margin-top:12px}
.gp-live{margin-top:12px;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--surface);display:flex;flex-direction:column;gap:10px;align-items:stretch}
.gp-live.ok{border-color:#22C55E;background:rgba(34,197,94,.14)}
.gp-meter{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gp-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .1s}
.gp-hold{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gp-hold i{display:block;height:100%;width:0;background:#22C55E;transition:width .1s}
.gp-heard{margin:0;min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:800;font-size:15px;line-height:1.4;color:var(--fg-soft)}
.gp-heard.good{color:#4ADE80}
.gp-heard.bad{color:#FCA5A5}
.gp-heard svg{flex:none;width:22px;height:22px;stroke-width:3.2}
.gp-sens{align-self:center;min-height:32px}
.gp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.gp-chip{padding:6px 12px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:13px}
.gp-how{margin:0 0 14px;padding-left:22px;color:var(--fg-soft);font-size:14.5px;line-height:1.5}
.gp-how li{margin-bottom:6px}
.gp-priv{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px;border-radius:14px;background:var(--surface);color:var(--fg-soft);font-size:13.5px;line-height:1.4}
.gp-priv svg{flex:none;color:var(--accent)}
.gp-err .ls-sub{color:#FCA5A5}
#gp .ls-foot .btn.wa{text-decoration:none;text-align:center}
/* Batería táctil (Percusión · Módulo 2 y actividad de cada clase) */
#dr{position:fixed;inset:0;z-index:55;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#dr[hidden]{display:none}
.dr-body{display:flex;flex-direction:column;gap:10px}
.dr-kw{padding:2px 0}
.dr-kw[hidden]{display:none}
.dr-svg{display:block;width:100%;height:auto;max-height:46vh;margin:0 auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.dr-p{cursor:pointer;outline:none}
.dr-p .ht{fill:transparent}
.dr-p .hl{fill:transparent;stroke:transparent;stroke-width:5;transition:fill .08s}
.dr-cy{fill:url(#drGold);stroke:#7A5A14;stroke-width:1.5}
.dr-cb{fill:#6C4E10}
.dr-sk,.dr-bk{fill:#22364F;stroke:#0A1626;stroke-width:2}
.dr-hd{fill:#F1E9D8;stroke:#B9AE96;stroke-width:1.5}
.dr-ri{fill:none;stroke:#9AA7B6;stroke-width:3}
.dr-bh{fill:#E4DAC4;stroke:#9AA7B6;stroke-width:1.5}
.dr-st path{fill:none;stroke:#506A87;stroke-width:4;stroke-linecap:round}
.dr-lb{fill:#1B2A3E;font:800 12px var(--font-body);pointer-events:none}
.nolab .dr-lb{display:none}
.dr-p.tgt .hl{stroke:var(--accent-2);stroke-width:6;animation:drtgt 1.1s ease-in-out infinite}
.dr-p.got .hl,.dr-p.hit .hl{fill:rgba(25,182,236,.55);stroke:var(--accent-2);stroke-width:6}
.dr-p.bad .hl{fill:rgba(239,68,68,.6);stroke:#F87171;stroke-width:6}
.dr-p.sel .hl{stroke:var(--accent);stroke-width:5}
.dr-p:focus-visible .hl{stroke:var(--accent-2);stroke-width:6}
@keyframes drtgt{50%{stroke-opacity:.3}}
.dr-ed .dr-svg{max-height:none}
.dr-ed.join .dr-svg{outline:2px dashed var(--accent);outline-offset:4px;border-radius:12px}
.dr-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dr-sc{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 13.5px var(--font-body);white-space:nowrap}
.dr-sc i{flex:none;width:12px;height:12px;border-radius:50%}
.dr-sc.cur{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.dr-sc.done{opacity:.55}
.dr-sc.done b::after{content:' ✓'}
.dr-free{min-height:30px}
@media (prefers-reduced-motion:reduce){.dr-p.tgt .hl{animation:none}}
@media (max-height:700px){.dr-svg{max-height:40vh}.dr-body{gap:6px}}
@media (orientation:landscape) and (max-height:520px){
  #dr .ls{max-width:none}
  #dr .ls-top{padding:calc(env(safe-area-inset-top,0px) + 4px) max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #dr .ls-x,#dr .ls-snd{width:36px;height:36px}
  #dr .pn-skip{min-height:34px}
  #dr .dr-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0 14px;align-content:start;padding:2px max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #dr .ls-body.dr-body{overflow:hidden;min-height:0;align-content:stretch;grid-template-rows:minmax(0,1fr)}
  #dr-dyn{grid-column:1;grid-row:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px}
  #dr-dyn>*{margin-bottom:4px}
  #dr .dr-kw{grid-column:2;grid-row:1;align-self:center;min-height:0}
  #dr .dr-svg{max-height:calc(100vh - 104px)}
  #dr-aft{display:none}
  #dr .pn-d1{display:block}
  #dr .pn-d2{display:none}
  #dr .pn-q,#dr .ls-h{margin:0;font-size:17px;text-align:left}
  #dr .pn-tt{margin:0;text-align:left;font-size:12px}
  #dr .ls-sub.pn-d1{margin:0;font-size:12.5px;line-height:1.35}
  #dr .dr-strip{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px;gap:5px}
  #dr .dr-sc{min-height:30px;padding:0 8px;font-size:12px}
  #dr .pn-row{justify-content:flex-start;gap:6px}
  #dr .pn-pill{min-height:34px;padding:0 10px;font-size:12.5px;gap:5px}
  #dr .pn-pill svg{width:18px;height:18px}
  #dr .pn-msg,#dr .pn-free{display:block;min-height:0;text-align:left;font-size:13.5px}
  #dr .pn-free.on{font-size:19px}
  #dr .ls-foot{min-height:0;padding:6px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 6px) max(16px,env(safe-area-inset-left,0px));flex-direction:row;align-items:center;gap:14px}
  #dr .ls-foot .btn{width:auto;min-width:200px;flex:none;min-height:40px;margin-left:auto}
  #dr .ls-foot .ls-fb{flex:1}
  #dr .ls-foot .btn+.btn{margin-left:0}
}

/* Vientos: flauta dibujada y notas para elegir */
.fl-svg{display:block;height:210px;width:auto;margin:0 auto;overflow:visible}
.fl-svg.mini{height:76px}
.fl-b{fill:var(--surface-2);stroke:var(--fg-muted);stroke-width:2;stroke-linejoin:round}
.fl-w{fill:var(--surface);stroke:var(--fg-muted);stroke-width:1.5}
.fl-c{fill:var(--accent);stroke:var(--accent-deep);stroke-width:1.5}
.fl-o{fill:var(--surface);stroke:var(--fg-soft);stroke-width:2}
.fl-ln{stroke:var(--fg-muted);stroke-width:1.5;stroke-dasharray:2 2}
.fl-t{fill:var(--fg-muted);font:800 9px var(--font-body)}
.wi-st{max-width:300px;margin:0 auto}
.wi-st svg{display:block;width:100%;height:auto}
.wi-row{display:flex;gap:10px;align-items:center;justify-content:center}
.wi-row .wi-st{flex:1 1 55%;min-width:0;margin:0}
.wi-fl{flex:none;width:auto!important;margin:0!important}
.wi-sd{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wi-sd .wi-st{width:150px;margin:0}
.wi-kb{display:flex;flex-wrap:wrap;gap:8px}
.wi-k{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:44px;padding:8px 8px 6px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--surface);color:var(--fg);font:800 14px var(--font-body);cursor:pointer;touch-action:manipulation}
.wi-k b{color:var(--c);font-weight:800}
.wi-k small{color:var(--fg-muted);font-size:11px;font-weight:700}
.wi-k:active{transform:translateY(2px);border-bottom-width:2px}
.wi-k:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wi-n{min-width:52px}
@media (max-height:700px){.fl-svg{height:160px}}
@media (orientation:landscape) and (max-height:520px){
  .fl-svg{height:120px}
  #gp:has(.wi-st) .ls{max-width:none}
  #gp:has(.wi-st) .ls-top,#gp:has(.wi-st) .ls-body{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  #gp:has(.wi-st) .ls-top{padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:2px}
  #gp:has(.wi-st) .ls-x{width:36px;height:36px}
  #gp:has(.wi-st) .ls-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0 12px;align-content:start;padding-top:2px;padding-bottom:6px}
  #gp:has(.wi-st) .gp-head{grid-column:1;padding:6px 10px}
  #gp:has(.wi-st) .gp-head .gp-t{font-size:34px}
  #gp:has(.wi-st) .gp-head .gp-k,#gp:has(.wi-st) .gp-head .gp-sub{font-size:12px;margin:0}
  #gp:has(.wi-st) .gp-live{grid-column:1;margin-top:8px;padding:8px 10px;gap:6px}
  #gp:has(.wi-st) .gp-dg{grid-column:2;grid-row:1/span 3;margin-top:0;padding:8px 10px}
  #gp:has(.wi-st) .gp-dg .gp-tip{font-size:12.5px;margin-top:2px}
  #gp:has(.wi-st) .gp-dg .gp-leg{font-size:11.5px}
  #gp:has(.wi-st) .ls-foot{min-height:0;padding:6px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 6px) max(16px,env(safe-area-inset-left,0px));flex-direction:row;align-items:center;gap:12px}
  #gp:has(.wi-st) .ls-hint{margin:0;flex:1;text-align:left}
  #gp:has(.wi-st) .ls-foot .btn{width:auto;min-width:150px;flex:none;min-height:40px}
  #gp:has(.wi-st) .ls-foot.ok .btn{margin-left:auto}
}

/* TouchPad (Producción Musical · Módulo 3 y actividad de cada clase) */
#tp{position:fixed;inset:0;z-index:55;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#tp[hidden]{display:none}
.tp-dev{margin:0 auto;width:min(100%,400px,max(236px,calc(100vh - 470px)));width:min(100%,400px,max(236px,calc(100dvh - 470px)));padding:12px 12px 14px;border-radius:22px;background:linear-gradient(180deg,#1B2535,#111A28);border:2px solid #2C3B52;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.tp-kr{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px;padding:6px 4px 4px;border-radius:14px;background:rgba(0,0,0,.28)}
.tp-kn{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 0;border-radius:12px;outline:none;cursor:ns-resize;touch-action:none;color:#DCE6F2}
.tp-kn svg{display:block;width:clamp(42px,13vw,58px);height:auto;aspect-ratio:1;overflow:visible}
.tp-kn b{font:800 10.5px/1.15 var(--font-body);color:#AFC0D6;text-align:center;margin-top:1px}
.tp-kn output{font:800 12px var(--font-body);color:#fff}
.tk-tr{fill:none;stroke:#34465F;stroke-width:5;stroke-linecap:round}
.tk-va{fill:none;stroke:var(--accent-2);stroke-width:5;stroke-linecap:round}
.tk-bd{fill:#26354B;stroke:#4A617F;stroke-width:2}
.tk-pn{stroke:#fff;stroke-width:3.4;stroke-linecap:round}
.tk-tg{fill:var(--accent);stroke:#fff;stroke-width:1.5}
.tp-kn:focus-visible .tk-bd{stroke:var(--accent-2);stroke-width:3}
.tp-kn.tgt b{color:#fff}
.tp-kn.tgt .tk-tg{animation:tptgt 1s ease-in-out infinite}
.tp-kn.bad .tk-bd{fill:#7F1D1D;stroke:#F87171}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,10px)}
.tp-grid.main{margin:0 auto}
.tp-pad{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:14px;border:2px solid color-mix(in srgb,var(--c,#38BDF8) 55%,#1B2535);background:linear-gradient(180deg,color-mix(in srgb,var(--c,#38BDF8) 26%,#18222F),color-mix(in srgb,var(--c,#38BDF8) 14%,#0F1723));box-shadow:0 3px 0 rgba(0,0,0,.45);cursor:pointer;outline:none;padding:0;color:#fff;font-family:var(--font-body);transition:transform .06s,background .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tp-pad b{font:800 clamp(10px,3vw,13px)/1.1 var(--font-body);text-align:center;pointer-events:none;padding:0 2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tp-pad small{position:absolute;left:6px;top:4px;font:800 10px var(--font-body);color:rgba(255,255,255,.6);pointer-events:none}
.tp-grid.nolab .tp-pad b{display:none}
.tp-pad b em{font-style:normal;font-size:.72em;font-weight:700;opacity:.8;margin-left:1px}
.tp-pad.hit,.tp-pad.got{background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));border-color:#fff;transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45),0 0 16px var(--c)}
.tp-pad.tgt{border-color:var(--accent-2);box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 0 3px var(--accent-2);animation:tptgt 1.1s ease-in-out infinite}
.tp-pad.bad{background:linear-gradient(180deg,#EF4444,#991B1B);border-color:#FCA5A5;box-shadow:0 0 14px rgba(239,68,68,.7)}
.tp-pad.sel{border-color:var(--accent);box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 0 3px var(--accent)}
.tp-pad:focus-visible{border-color:var(--accent-2);box-shadow:0 3px 0 rgba(0,0,0,.45),0 0 0 3px var(--accent-2)}
@keyframes tptgt{50%{opacity:.55}}
.tp-ed{width:min(100%,340px);margin:6px auto 0;padding:10px;border-radius:18px;background:linear-gradient(180deg,#1B2535,#111A28);border:2px solid #2C3B52}
.tp-ed.join{outline:2px dashed var(--accent);outline-offset:4px}
.tp-ed .tp-pad b{font-size:clamp(10px,2.6vw,12.5px)}
.tp-mode,.tp-rbtn{margin:0 0 8px}
.tp-rc svg{color:#EF4444}
.tp-rc.on{border-color:#EF4444;background:rgba(239,68,68,.18);color:var(--fg)}
.tp-rc.on svg{animation:tptgt 1s ease-in-out infinite}
.tp-pad.ed{}
.tp-sl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 6px}
.tp-sv{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden}
.tp-sv button{min-height:36px;padding:0 12px;border:0;background:none;color:var(--fg-soft);font:800 12.5px var(--font-body);cursor:pointer}
.tp-sv button.x{padding:0 11px 0 8px;font-size:17px;line-height:1;color:var(--fg-muted)}
.tp-sv button:focus-visible{outline:2px solid var(--accent-2);outline-offset:-2px}
.tp-ki{font-style:normal;flex:none;width:12px;height:12px;border-radius:50%;border:3px solid var(--accent)}
#tp .tp-body{gap:8px}
#tp .pn-d1{display:none}
#tp .pn-d2{display:block}
#tp .pn-q{font-size:20px;margin:0}
#tp .pn-tt{margin:0}
#ga-kv{width:100%;accent-color:var(--accent)}
.fld output{font-weight:800;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.tp-pad.tgt,.tp-kn.tgt .tk-tg,.tp-rc.on svg{animation:none}.tp-pad{transition:none}}
@media (max-height:700px) and (orientation:portrait){
  #tp .tp-dev{padding:8px 8px 10px;width:min(100%,400px,max(206px,calc(100vh - 392px)));width:min(100%,400px,max(206px,calc(100dvh - 392px)))}
  #tp .tp-kr{margin-bottom:6px;padding:4px 2px 2px}
  #tp .tp-kn svg{width:clamp(34px,10vw,44px)}
  #tp .tp-kn b{font-size:9.5px}
  #tp .tp-kn output{font-size:11px}
  #tp .tp-grid{gap:6px}
  #tp .tp-body{gap:5px}
  #tp .pn-q{display:none}
  #tp .pn-pill{min-height:36px;padding:0 12px}
  #tp .pn-msg{min-height:0;font-size:13px}
  #tp .tp-pad small{font-size:9px;left:5px;top:3px}
}
@media (orientation:landscape) and (max-height:520px){
  #tp .ls{max-width:none}
  #tp .ls-top{padding:calc(env(safe-area-inset-top,0px) + 4px) max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #tp .ls-x,#tp .ls-snd{width:36px;height:36px}
  #tp .pn-skip{min-height:34px}
  #tp .tp-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;gap:0 14px;align-content:stretch;padding:2px max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #tp .ls-body.tp-body{overflow:hidden;min-height:0}
  #tp .dr-kw,#tp .tp-dev{display:contents}
  #tp .dr-kw[hidden]{display:none}
  #tp-dyn{grid-column:1;grid-row:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:4px}
  #tp-dyn>*{margin-bottom:4px}
  #tp .tp-kr{grid-column:1;grid-row:2;margin:0;padding:3px 4px 2px;gap:4px}
  #tp .tp-grid{grid-column:2;grid-row:1/3;align-self:center;height:calc(100vh - 108px);max-height:calc(100vh - 108px);aspect-ratio:1;padding:8px;gap:6px;border-radius:16px;background:linear-gradient(180deg,#1B2535,#111A28);border:2px solid #2C3B52;box-sizing:border-box}
  #tp .tp-kn{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 4px}
  #tp .tp-kn svg{width:clamp(28px,8vh,38px)}
  #tp .tp-kn b{flex:1 0 100%;order:3;font-size:9px;margin:0}
  #tp .tp-kn output{order:2;font-size:10.5px;align-self:center}
  #tp-aft{display:none}
  #tp .pn-d1{display:block}
  #tp .pn-d2{display:none}
  #tp .pn-q,#tp .ls-h{margin:0;font-size:17px;text-align:left}
  #tp .pn-tt{margin:0;text-align:left;font-size:12px}
  #tp .ls-sub.pn-d1{margin:0;font-size:12.5px;line-height:1.35}
  #tp .dr-strip{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 4px;gap:5px}
  #tp .dr-sc{min-height:30px;padding:0 8px;font-size:12px}
  #tp .pn-row{justify-content:flex-start;gap:6px}
  #tp .pn-pill{min-height:34px;padding:0 10px;font-size:12.5px;gap:5px}
  #tp .pn-pill svg{width:18px;height:18px}
  #tp .tp-mode,#tp .tp-rbtn{margin-bottom:4px}
  #tp .tp-sv button{min-height:30px}
  #tp .pn-msg,#tp .pn-free{display:block;min-height:0;text-align:left;font-size:13.5px}
  #tp .pn-free.on{font-size:17px}
  #tp .ls-foot{min-height:0;padding:6px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 6px) max(16px,env(safe-area-inset-left,0px));flex-direction:row;align-items:center;gap:14px}
  #tp .ls-foot .btn{width:auto;min-width:200px;flex:none;min-height:40px;margin-left:auto}
  #tp .ls-foot .ls-fb{flex:1}
  #tp .ls-foot .btn+.btn{margin-left:0}
}

/* Vista de madres y padres */
.par{max-width:640px;margin-inline:auto;padding-bottom:12px}
.par-h{padding:6px 2px 2px}
.par-ro{display:inline-block;padding:4px 10px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg-muted);font-size:11.5px;font-weight:800}
.par-h h1{margin:10px 0 4px;font:700 26px var(--font-display)}
.par-kid{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-weight:800;color:var(--fg-soft)}
.par-top{display:flex;align-items:center;gap:14px}
.par-top h2{margin:0}
.par-kt{margin-top:14px}
.par-kt2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.par-s{margin:16px 0 6px;font:700 15px var(--font-display)}
.par-list,.par-acts,.par-codes,.par-adms{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.par-list li,.par-acts li,.par-codes li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface-2,var(--surface))}
.par-list li{flex-direction:column;align-items:flex-start;gap:2px}
.par-list small,.par-acts small{display:block;color:var(--fg-muted);font-weight:700;font-size:12px}
.par-acts li>span{min-width:0}
.par-acts li>i{font-style:normal;font-weight:800;color:var(--accent);flex:none}
.par-pr{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.par-codes b{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.par-act{margin-top:10px;display:grid}
.par-bar{height:10px;border-radius:99px;background:var(--surface-2,var(--line));overflow:hidden;margin:10px 0 4px;border:1.5px solid var(--line)}
.par-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.par-now{margin:8px 0 0;font-size:14px}
.par-lock{margin:6px 0 0;padding:8px 10px;border-radius:12px;border:2px solid var(--line);font-weight:800;font-size:13px}
.par-mods{display:grid;gap:8px;margin-top:12px}
.par-m{border-radius:14px;border:2px solid var(--line);background:var(--surface-2,var(--surface))}
.par-m>summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;padding:11px 12px;font-size:14px;list-style:none}
.par-m>summary::-webkit-details-marker{display:none}
.par-m>summary span{color:var(--fg-muted);font-weight:800;flex:none}
.par-m ul{list-style:none;margin:0;padding:0 10px 10px;display:grid;gap:6px}
.par-l{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);font-size:13.5px}
.par-l em{font-style:normal;font-weight:800;font-size:11.5px;color:var(--fg-muted);flex:none;text-align:right}
.par-l.done{border-color:var(--accent)}
.par-l.done em,.par-l.active em{color:var(--accent)}
.par-l.tlock{opacity:.8}
.par-tb{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.par-tb th,.par-tb td{text-align:left;padding:8px 6px;border-bottom:1.5px solid var(--line)}
.par-tb th{color:var(--fg-muted);font-size:12px}
.par-out{margin-top:16px}
.par .one{display:flex;justify-content:center;margin-top:10px}
.par-adm{list-style:none;display:grid;gap:8px;padding:12px;border-radius:16px;border:2px solid var(--line);background:var(--surface)}
.par-ah{display:flex;align-items:center;gap:10px}
.par-ah small{display:block;color:var(--fg-muted);font-weight:700;font-size:12px}
.par .idcard{max-width:420px;margin-inline:auto}
.par-ph{position:absolute;inset:0;display:grid;place-items:center;font:700 56px var(--font-display);color:#fff;letter-spacing:.02em}

/* Facultades: cabecera, pestañas y fichas de instrumento */
.fac-h{text-align:center;margin:2px 0 14px}
.fac-hi{margin:0;font:800 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.fac-h h1{margin:4px 0 0;font:700 clamp(24px,6vw,34px)/1.15 var(--font-display)}
.fac-tabs{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px;scrollbar-width:none}
.fac-tabs::-webkit-scrollbar{display:none}
.ftab{flex:none;padding:7px 14px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--fg-muted);font:800 13px var(--font-body);cursor:pointer}
.ftab[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.insts.facs{align-items:stretch;padding-top:6px;padding-bottom:10px}
.ip.ft{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;width:96px;padding:12px 6px 10px;border-radius:18px;font-size:13.5px;line-height:1.15;text-align:center}
.ip.ft .ftn{flex:1;display:flex;align-items:center;justify-content:center}
.ip.ft svg{flex:none}
.ip.ft[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent-soft)}
#screen[data-tab=ruta]>.fac-h{max-width:640px;margin-inline:auto}
@media (min-width:900px){
  .fac-tabs{margin:0 auto 14px;padding:2px 0;flex-wrap:wrap;overflow:visible;justify-content:center;max-width:640px}
}
.fa-box{margin:0 0 12px;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--surface)}
.fa-box small{display:block;margin:2px 0 10px;color:var(--fg-muted);font-weight:700;font-size:12.5px}
.fa-chips{display:flex;flex-wrap:wrap;gap:8px}
.fa-chip{padding:8px 12px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--fg-soft);font:800 13px var(--font-body);cursor:pointer}
.fa-chip[aria-checked=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.lk-sh .fa-sum{display:block;margin-top:2px;color:var(--fg-muted);font-weight:700;font-size:12px}

/* Piano interactivo (Piano · Módulo 2) */
#pn{position:fixed;inset:0;z-index:55;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#pn[hidden]{display:none}
.pn-body{display:flex;flex-direction:column;gap:10px}
.pn-d2{display:none;margin:6px 0 0}
.pn-skip{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 13.5px var(--font-body);cursor:pointer}
.pn-skip[hidden]{display:none}
.pn-skip:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.pn-q{margin:2px 0 0;font:600 22px/1.2 var(--font-display);text-align:center}
.pn-tt{margin:-4px 0 0;text-align:center;color:var(--fg-soft);font-weight:800;font-size:13.5px;line-height:1.35}
.pn-st{padding:8px 6px 4px;border:2px solid var(--line);border-radius:20px;background:var(--surface)}
.pn-st svg{display:block;width:100%;height:auto;max-height:min(190px,26vh);overflow:visible}
.pn-ln{stroke:#52758F;stroke-width:1.3}
.pn-clef path{fill:none;stroke:var(--fg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pn-clef circle{fill:var(--fg)}
.pn-ts{fill:var(--fg);font:800 23px var(--font-display)}
.pn-bar{stroke:var(--fg-soft);stroke-width:1.5}
.pn-bar.fin{stroke:var(--fg);stroke-width:4}
.pn-stem,.pn-led{stroke:var(--fg);stroke-width:1.8;stroke-linecap:round}
.pn-halo{fill-opacity:.16;stroke-width:1.5;stroke-opacity:.9}
.pn-ng.done{opacity:.6}
.pn-ng.cur{animation:pnbob 1.3s ease-in-out infinite}
.pn-ng.hear .pn-head{filter:brightness(1.25)}
.pn-ng.shake{animation:pnshake .36s}
.pn-acc{font:700 19px var(--font-body);text-anchor:middle}
.pn-nm{font:800 11.5px var(--font-body);text-anchor:middle}
@keyframes pnbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pnshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.pn-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pn-pill{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 13.5px var(--font-body);cursor:pointer}
.pn-pill svg{width:20px;height:20px;flex:none}
.pn-pill[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.pn-pill:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.pn-msg{margin:0;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:14.5px;line-height:1.4;color:var(--fg-soft)}
.pn-msg.bad{color:#FCA5A5}
.pn-msg.good{color:#4ADE80}
.pn-free{margin:0;min-height:30px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 15px/1.3 var(--font-body);color:var(--fg-muted)}
.pn-free.on{font:700 24px/1.2 var(--font-display);color:var(--fg)}
.pn-tips{margin:6px 0 0;padding:0 0 0 20px;color:var(--fg-soft);font-size:14px;line-height:1.5}
.pn-tips li{margin-bottom:6px}
.pn-kbw{margin-top:auto;padding-top:6px}
.pn-kb{position:relative;display:flex;height:clamp(150px,27vh,230px);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.pn-w{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 0 10px;margin:0 1px;border:0;border-radius:0 0 10px 10px;background:linear-gradient(#F6FAFF,#DCE9F6);color:#0B2A44;box-shadow:0 5px 0 #8FAAC4;font-family:var(--font-body);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .05s}
.pn-w i{display:block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-bottom:5px}
.pn-w b{font:800 13px/1 var(--font-body)}
.pn-w small{font:700 11px/1 var(--font-body);opacity:.7}
.pn-kb.nolab .pn-w i,.pn-kb.nolab .pn-w b,.pn-kb.nolab .pn-w small{visibility:hidden}
.pn-b{position:absolute;top:0;z-index:2;width:calc(60%/var(--kn,8));height:62%;margin-left:calc(-30%/var(--kn,8));padding:0 0 6px;display:flex;align-items:flex-end;justify-content:center;border:0;border-radius:0 0 8px 8px;background:linear-gradient(#2A3E54,#08121E);color:#fff;box-shadow:0 4px 0 #02070D;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .05s}
.pn-b span{font:800 10.5px/1 var(--font-body);opacity:0;white-space:nowrap;pointer-events:none}
.pn-b.hint span,.pn-b.on span{opacity:1}
.pn-w.on{background:var(--c);transform:translateY(3px);box-shadow:0 2px 0 #8FAAC4}
.pn-b.on{background:linear-gradient(#475E78,#1B2C40);transform:translateY(3px);box-shadow:0 1px 0 #02070D}
.pn-w.good{background:#86EFAC}
.pn-w.bad{background:#FCA5A5}
.pn-b.good{background:#16A34A}
.pn-b.bad{background:#DC2626}
.pn-w.hint{box-shadow:inset 0 0 0 4px var(--c),0 5px 0 #8FAAC4;animation:pnhint 1.1s ease-in-out infinite}
.pn-b.hint{box-shadow:0 0 0 3px var(--accent-2),0 4px 0 #02070D;animation:pnhint 1.1s ease-in-out infinite}
@keyframes pnhint{50%{filter:brightness(1.22)}}
.pn-w:focus-visible,.pn-b:focus-visible{outline:3px solid var(--accent-2);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.pn-ng.cur,.pn-w.hint,.pn-b.hint{animation:none}.pn-ng.shake{animation:none}}
@media (max-width:340px){.pn-w b{font-size:12px}.pn-w small{font-size:10px}.pn-b span{font-size:9.5px}.pn-pill{padding:0 11px;font-size:13px}}
@media (max-height:700px){
  .pn-d1{display:none}
  .pn-d2{display:block}
  .pn-body{gap:6px}
  .pn-q{font-size:18px;margin-top:0}
  .pn-tt{font-size:12px;margin-top:-2px}
  .pn-st{padding:6px 4px 2px}
  .pn-pill{min-height:40px;font-size:13px}
  .pn-msg{min-height:30px;font-size:13.5px}
  .pn-kb{height:clamp(100px,19.5vh,230px)}
  .pn-kbw{padding-top:2px}
  .pn-nav{margin-bottom:3px}
  .pn-nb{height:30px}
}

/* Celular acostado: dos columnas (texto a la izquierda, pentagrama a la derecha) y el teclado ancho abajo */
@media (orientation:landscape) and (max-height:520px){
  #pn .ls{max-width:none}
  #pn .ls-top{padding:calc(env(safe-area-inset-top,0px) + 4px) max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #pn .ls-x,#pn .ls-snd{width:36px;height:36px}
  #pn .pn-skip{min-height:34px}
  #pn .pn-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 14px;align-content:start;padding:2px max(16px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px))}
  #pn-dyn{display:contents}
  #pn-dyn>*{grid-column:1;margin-bottom:4px}
  #pn-dyn>.pn-st{grid-column:2;grid-row:1/span 6;align-self:start}
  #pn-dyn>.ls-fin{grid-column:1/-1}
  #pn .pn-st svg{width:auto;max-width:100%;height:min(150px,34vh);margin:0 auto}
  #pn .pn-kbw{grid-column:1/-1;margin-top:4px;padding-top:0}
  #pn-aft{display:none}
  #pn .pn-d1{display:block}
  #pn .pn-d2{display:none}
  #pn .pn-kb{height:clamp(76px,26vh,150px)}
  #pn .pn-w{padding-bottom:6px}
  #pn .pn-kbw{padding-bottom:6px}
  #pn .pn-kbw{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
  #pn .pn-nav{display:contents}
  #pn .pn-nav>.pn-nb:first-child{grid-column:1;grid-row:1}
  #pn .pn-kb{grid-column:2;grid-row:1}
  #pn .pn-kb:only-child{grid-column:1/-1}
  #pn .pn-nav>.pn-nb:last-child{grid-column:3;grid-row:1}
  #pn .pn-rg{display:none}
  #pn .pn-nb{height:44px;width:38px}
  #pn .pn-nb svg{width:18px;height:18px}
  #pn .pn-q,#pn .ls-h{margin:0;font-size:17px;text-align:left}
  #pn .pn-tt{margin:0;text-align:left;font-size:12px}
  #pn .ls-sub.pn-d1{margin:0;font-size:12.5px;line-height:1.35}
  #pn .pn-row{justify-content:flex-start;gap:6px}
  #pn .pn-pill{min-height:34px;padding:0 10px;font-size:12.5px;gap:5px}
  #pn .pn-pill svg{width:18px;height:18px}
  #pn .pn-msg,#pn .pn-free{display:block;min-height:0;text-align:left;font-size:13.5px}
  #pn .pn-free.on{font-size:19px}
  #pn .ls-foot{min-height:0;padding:6px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 6px) max(16px,env(safe-area-inset-left,0px));flex-direction:row;align-items:center;gap:14px}
  #pn .ls-foot .btn{width:auto;min-width:200px;flex:none;min-height:40px;margin-left:auto}
  #pn .ls-foot .ls-fb{flex:1}
  #pn .ls-foot .btn+.btn{margin-left:0}
}

/* Teclado de dos octavas: flechas para moverlo */
.pn-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.pn-nb{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:36px;padding:0;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pn-nb svg{width:20px;height:20px}
.pn-nb:disabled{opacity:.35;cursor:default}
.pn-nb:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.pn-rg{font:800 12.5px var(--font-body);color:var(--fg-soft)}
.pn-st svg+svg{margin-top:4px}
.pa-st svg{max-height:150px}

/* Actividad con piano: tarjeta de la clase y editor del profe */
.pa-card{display:flex;gap:12px;align-items:center;margin:0 0 12px;padding:14px;border:2px solid var(--line);border-radius:18px;background:var(--surface)}
.pa-ic{flex:none;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.pa-ic svg{width:32px;height:32px}
.pa-tx{display:grid;gap:2px;min-width:0}
.pa-tx .cl-h{margin:0}
.pa-tx b{font-size:16px;overflow-wrap:anywhere}
.pa-tx small{color:var(--fg-soft);font-weight:700;font-size:13px}
.pa-tabs{justify-content:flex-start}
.pa-tab{min-width:46px;justify-content:center;padding:0 12px}
.pa-chips{display:flex;flex-wrap:wrap;gap:6px}
.pa-chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 11px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14px var(--font-body);cursor:pointer}
.pa-chip i{display:block;width:10px;height:10px;border-radius:50%;background:var(--c)}
.pa-chip small{font:700 11px var(--font-body);opacity:.7}
.pa-chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.pa-chip:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.pa-sel{margin-top:10px;padding:10px 12px;border:2px solid var(--accent);border-radius:14px;background:var(--surface)}
.pa-sel>b{display:block;margin-bottom:8px;font-size:14px}
.pa-lb{align-self:center;font-weight:800;font-size:13px;color:var(--fg-soft)}
.pa-acc{justify-content:flex-start;margin-bottom:8px}
.pa-kbw{margin-top:6px;padding-top:0}
.pa-kbw .pn-kb{height:clamp(120px,22vh,170px)}
.pa-gen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.pa-wide{grid-column:1/-1}
.pa-s{width:100%;min-width:0;min-height:46px;padding:0 10px;border-radius:12px;border:2px solid var(--line);background:var(--bg-col,var(--surface));color:var(--fg);font:700 15px var(--font-body)}
.pa-err{color:#FCA5A5}

/* Actividad con guitarra: mástil para elegir notas, acordes y paso elegido */
.ga-fb{display:grid;gap:4px}
.ga-fr{display:grid;grid-template-columns:20px repeat(7,minmax(0,1fr));gap:4px;align-items:center}
.ga-sl{font:800 12px var(--font-body);color:var(--fg-soft);text-align:center}
.ga-fn{font:800 11px var(--font-body);color:var(--fg-soft);text-align:center}
.ga-c{min-width:0;min-height:42px;padding:0 1px;border-radius:10px;border:2px solid var(--line);border-left:5px solid var(--c);background:var(--surface);color:var(--fg);font:800 13px var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ga-c.op{border-style:dashed;border-left-style:solid}
.ga-c[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.ga-c:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.ga-chs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ga-ch{display:grid;gap:0;justify-items:center;min-height:52px;padding:4px 2px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.ga-ch b{font:800 16px var(--font-body)}
.ga-ch small{font:700 10.5px var(--font-body);color:var(--fg-soft);text-align:center;line-height:1.1}
.ga-ch:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.ga-sd{display:flex;gap:12px;align-items:center}
.ga-dia{flex:none;width:92px}
.ga-dia svg{display:block;width:100%;height:auto}
@media (max-width:359px){.ga-chs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ls{position:relative;width:100%;max-width:460px;height:100%;margin:0 auto;display:flex;flex-direction:column}
.ls-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 8px}
.ls-x,.ls-snd{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--fg-soft);cursor:pointer}
.ls-x svg,.ls-snd svg{width:24px;height:24px}
.ls-snd[aria-pressed=false]{color:var(--fg-muted);opacity:.8}
.ls-bar{flex:1;height:16px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ls-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .4s}
.ls-body{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ls-h{margin:6px 0 4px;font:600 23px/1.2 var(--font-display)}
.ls-sub{margin:0 0 16px;color:var(--fg-soft);font-size:14.5px;line-height:1.45}
.ls-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ls-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ls-grid4 .ls-ins{padding:5px;border-width:2.5px;border-radius:14px}
.ls-hero.spk .ls-img{border-radius:50%;border-color:#A855F7;background:#fff}
.ls-hero.spk .ls-img img{object-fit:cover}
.ls-reveal{margin:10px 0 0;text-align:center;font:700 17px var(--font-display);color:var(--fg-soft)}
.ls-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ls-ins,.ls-opt,.ls-mc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:8px;border:3px solid var(--line);border-radius:18px;background:var(--surface);color:var(--fg);font:800 12.5px/1.2 var(--font-body);text-align:center;cursor:pointer}
.ls-img{display:block;width:100%;aspect-ratio:1;border-radius:12px;background:#fff;overflow:hidden}
.ls-img img{display:block;width:100%;height:100%;object-fit:contain}
.ls-ins.heard{border-color:var(--accent-deep)}
.ls-ins.playing{border-color:var(--accent);animation:lspulse .9s ease-in-out infinite}
.ls-opt.sel,.ls-ins.sel,.ls-mc.sel,.ls-name.sel{border-color:var(--accent);background:var(--accent-soft)}
.ls-opt.ok,.ls-ins.ok,.ls-mc.ok,.ls-name.ok,.ls-kind.ok{border-color:#22C55E;background:rgba(34,197,94,.2)}
.ls-opt.bad,.ls-ins.bad,.ls-mc.bad,.ls-name.bad,.ls-kind.bad{border-color:#F87171;background:rgba(248,113,113,.18);animation:lsshake .36s}
.ls-opt.dim,.ls-name.dim,.ls-kind.dim{opacity:.55;cursor:default}
.ls-names{display:grid;gap:10px;margin-top:16px}
.ls-name{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px 14px;border:3px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);font:800 16px var(--font-body);cursor:pointer}
.ls-name[disabled]{cursor:default}
.ls-play{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:68px;border:3px solid var(--accent);border-radius:20px;background:var(--accent-soft);color:var(--fg);font:800 16px var(--font-body);cursor:pointer}
.ls-play svg{width:30px;height:30px;flex:none}
.ls-play.sm{min-height:52px;margin-top:10px}
.ls-hero{width:min(150px,44%,20vh);margin:2px auto 0}
.ls-hero .ls-img{border:3px solid var(--line);border-radius:20px}
.ls-kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ls-kind{min-height:64px;border:3px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);font:800 17px var(--font-body);cursor:pointer}
.ls-mc{aspect-ratio:.86;padding:6px}
.ls-mc .ls-img{height:100%;aspect-ratio:auto}
.ls-q{font:600 34px var(--font-display);color:var(--accent)}
.ls-mc:not(.ok):not(.sel):not(.bad){background:var(--surface-2)}
.ls-mn{font:800 14px/1.2 var(--font-body)}
.ls-foot{padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px);border-top:2px solid var(--line);min-height:76px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.ls-foot.ok{background:#0F3320;border-color:#22C55E}
.ls-foot.bad{background:#3A1418;border-color:#F87171}
.ls-fb{display:flex;align-items:center;gap:10px}
.ls-fi{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ls-fi svg{width:20px;height:20px;stroke-width:3.4}
.ls-foot.ok .ls-fi{background:#22C55E}
.ls-foot.bad .ls-fi{background:#EF4444}
.ls-fb b{font:700 21px var(--font-display);letter-spacing:.02em}
.ls-foot.ok .ls-fb b{color:#4ADE80}
.ls-foot.bad .ls-fb b{color:#FCA5A5}
.ls-foot .btn{width:100%;margin:0}
.ls-foot.ok .btn{background:#22C55E;color:#04260F;box-shadow:0 4px 0 #15803D}
.ls-hint{margin:0;text-align:center;color:var(--fg-muted);font-weight:700;font-size:14px}
.ls-fin{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px;text-align:center}
.ls-fin h1{margin:0;font:600 28px var(--font-display)}
.ls-stars{display:flex;gap:6px}
.ls-stars svg{width:46px;height:46px}
.ls-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:6px}
.ls-stats div{padding:14px 8px;border-radius:18px;border:2px solid var(--line);background:var(--surface)}
.ls-stats b{display:block;font:600 28px var(--font-display);color:var(--accent)}
.ls-stats small{color:var(--fg-muted);font-weight:800;font-size:12.5px}
.ls-sheet{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(0,0,0,.55)}
.ls-sheet .box{width:100%;padding:22px 18px calc(env(safe-area-inset-bottom,0px) + 18px);border-radius:24px 24px 0 0;background:var(--surface);border-top:2px solid var(--line);display:grid;gap:12px}
.ls-sheet h2{margin:0;font:600 21px var(--font-display)}
.ls-sheet p{margin:0;color:var(--fg-soft);font-size:14.5px}
@keyframes lspulse{50%{transform:scale(1.04)}}
@keyframes lsshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ls-info{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding-top:4px}
.ls-hi{margin:0;color:var(--accent);font:700 18px var(--font-display)}
.ls-ipic{display:block;width:min(86%,300px);border-radius:24px;overflow:hidden;background:#fff;border:3px solid var(--line)}
.ls-ipic img{display:block;width:100%;height:auto;max-height:36vh;object-fit:contain;margin:0 auto}
.ls-info .ls-h{font-size:25px;margin:6px 0 0}
.ls-itx{margin:0;font:600 20px/1.35 var(--font-display);color:var(--fg)}
.ls-iby{margin:6px 0 0;padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--fg-soft);font:800 13px var(--font-body);letter-spacing:.02em}
.ls-pzr{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.ls-pzref{flex:none;display:block;width:72px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;border:2px solid var(--line)}
.ls-pzref img{display:block;width:100%;height:100%;object-fit:contain}
.ls-pz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;width:min(100%,360px,calc(46vh*var(--ar,1)));aspect-ratio:var(--ar,1);margin:0 auto;padding:3px;border-radius:14px;background:var(--line)}
.ls-pp{min-width:0;padding:0;border:3px solid transparent;border-radius:8px;background-color:#fff;background-image:var(--im);background-size:300% 300%;background-repeat:no-repeat;cursor:pointer}
.ls-pp.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.ls-pp.ok{border-color:#22C55E;cursor:default}
.ls-words{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
.ls-sw{min-width:0;padding:4px;border:2.5px solid var(--line);border-radius:12px;background:var(--surface);text-align:center}
.ls-sw .ls-img{width:min(100%,60px);margin:0 auto;border-radius:8px}
.ls-sw b{display:block;margin-top:3px;font:800 11px/1.2 var(--font-body);color:var(--fg-muted)}
.ls-sw.ok{border-color:#22C55E;background:rgba(34,197,94,.2)}
.ls-sw.ok b{color:var(--fg)}
.ls-sg{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;max-width:340px;margin:0 auto}
.ls-sc{aspect-ratio:1;display:grid;place-items:center;min-width:0;padding:0;border:2px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:800 15px var(--font-body);cursor:pointer}
.ls-sc.sel{border-color:var(--accent);background:var(--accent-soft)}
.ls-sc.f{border-color:hsl(var(--h),65%,55%);background:hsla(var(--h),65%,50%,.38)}
.ls-sc.bad{border-color:#F87171;background:rgba(248,113,113,.3);animation:lsshake .36s}
.ls-hero.big{width:min(170px,50%,22vh)}
.ls-phr{display:grid;gap:8px;margin-top:12px}
.ls-wr{display:flex;justify-content:center;gap:3px}
.ls-ch{flex:none;width:calc((100% - 33px)/12);max-width:30px;aspect-ratio:.78;display:grid;place-items:center;border-bottom:3px solid var(--accent);border-radius:6px 6px 2px 2px;background:var(--surface);color:var(--fg);font:700 18px var(--font-display)}
.ls-ch.on{background:rgba(34,197,94,.2)}
.ls-keys{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin-top:14px}
.ls-key{min-height:42px;padding:0;border:2.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:800 16px var(--font-body);cursor:pointer}
.ls-key.ok{border-color:#22C55E;background:rgba(34,197,94,.2)}
.ls-key.bad{border-color:#F87171;background:rgba(248,113,113,.18);opacity:.7}
.ls-key.dim{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){.ls-sc.bad{animation:none}}
.in-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.in-card{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);text-align:left;font-family:var(--font-body);cursor:pointer}
.in-card:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.in-th{flex:none;width:48px;height:48px;border-radius:10px;overflow:hidden;background:#fff}
.in-th img{display:block;width:100%;height:100%;object-fit:contain}
.in-nm{flex:1;min-width:0;display:grid}
.in-nm b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.in-nm small{color:var(--fg-muted);font-weight:700;font-size:12.5px}
.in-nm small.ok{color:#4ADE80}
.in-nm small.warn{color:#FBBF24}
.in-chev{flex:none;width:20px;height:20px;color:var(--fg-muted)}
.in-pv{width:min(150px,44%);aspect-ratio:1;margin:0 0 10px;border-radius:16px;overflow:hidden;background:#fff;border:2px solid var(--line)}
.in-pv img{display:block;width:100%;height:100%;object-fit:contain}
.in-aud{display:block;width:100%;margin:0 0 10px}
.in-chips{display:flex;flex-wrap:wrap;gap:8px}
.in-chip{min-height:46px;padding:0 18px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 15px var(--font-body);cursor:pointer}
.in-chip[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft)}
.in-inp{display:block;width:100%;min-width:0;margin-top:6px;padding:11px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 16px var(--font-body)}
.in-inp:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.ls-vids{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:12px}
.ls-vids b{width:100%;text-align:center;color:var(--fg-muted);font:800 12.5px var(--font-body)}
.ls-vchip{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--accent);background:var(--accent-soft);color:var(--fg);font:800 14px var(--font-body);cursor:pointer}
.ls-sheet .cl-vid{margin:0 auto}
.ls-sheet .cl-vid.v{height:min(46vh,420px)}
@media (prefers-reduced-motion:reduce){.ls-ins.playing,.ls-opt.bad,.ls-name.bad,.ls-mc.bad,.ls-kind.bad{animation:none}}
.node{position:relative}
.node .ins{width:44px;height:44px;stroke-width:1.9}
.node.locked .ins{opacity:.5}
.node .bdg{position:absolute;right:-5px;bottom:-1px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--bg);background:var(--accent-deep);color:#fff}
.node .bdg svg{width:14px;height:14px;stroke-width:3.4}
.node.locked .bdg{background:var(--fg-muted);color:var(--bg)}
@keyframes ring{0%{box-shadow:0 7px 0 var(--accent-deep),0 0 0 0 var(--accent-ring)}70%,100%{box-shadow:0 7px 0 var(--accent-deep),0 0 0 16px transparent}}
.nl{max-width:150px;text-align:center;font-weight:800;font-size:12.5px;line-height:1.25;color:var(--fg-soft)}
.start{position:absolute;top:-40px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--accent);font-weight:800;font-size:13px;white-space:nowrap;animation:bob 1.6s ease-in-out infinite}
.start::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{50%{transform:translateX(-50%) translateY(-4px)}}

/* Pantallas por llegar */
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 6px;text-align:center}
.empty h1{margin:6px 0 0;font:600 25px/1.15 var(--font-display);text-wrap:balance}
.empty p{margin:0;max-width:34ch;color:var(--fg-soft);line-height:1.5}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.tag{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg-soft);font-weight:800;font-size:13px}

/* Perfil */
.hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 0}
.photo-btn{position:relative;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.photo-btn .avatar{width:112px;height:112px;font-size:40px;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent)}
.photo-btn .cam{position:absolute;right:-2px;bottom:2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 3px var(--bg)}
.cam svg{width:19px;height:19px}
.hero h1{margin:10px 0 0;font:600 28px/1.1 var(--font-display)}
.role{padding:4px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:13px}
.greet{display:flex;align-items:center;gap:14px;margin:22px 0 4px}
.bubble{position:relative;flex:1;min-width:0;padding:12px 14px;border-radius:18px;border:2px solid var(--line);background:var(--surface);font-weight:700;line-height:1.4}
.bubble::before{content:"";position:absolute;left:-8px;top:50%;width:13px;height:13px;background:var(--surface);border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateY(-50%) rotate(45deg)}
h2.sec{margin:28px 0 12px;font:600 19px var(--font-display)}
.note{margin:12px 2px 0;color:var(--fg-muted);font-size:13px;line-height:1.45}

/* Carnet */
.idcard{background:#F7FAFD;color:#0B2342;border:2px solid #0B2342;border-radius:20px;overflow:hidden;font-family:var(--font-serif);box-shadow:0 14px 36px rgba(0,0,0,.5)}
.idc-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:end;padding:16px 16px 0}
.idc-left{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding-bottom:14px}
.crest{width:100%;max-width:120px;height:auto}
.idc-name{text-align:center;font-weight:600;font-size:clamp(13px,4vw,17px);letter-spacing:.04em;overflow-wrap:anywhere}
.idc-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.idc-inst{text-align:center;font-weight:700;font-size:clamp(14px,4.6vw,19px);line-height:1.1;letter-spacing:.02em}
.idc-inst span{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.6em;font-weight:600;letter-spacing:.32em}
.idc-inst span::before,.idc-inst span::after{content:"";flex:1;height:2px;background:#0B2342}
.idc-photo{position:relative;aspect-ratio:1/1.05;overflow:hidden;background:#fff;border:4px solid var(--accent-deep);border-bottom:0}
.idc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek{position:absolute;left:50%;bottom:-34%;width:86%;transform:translateX(-50%);line-height:0}
.idc-band{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:6px 16px 9px;background:var(--accent-deep);color:#fff}
.idc-band strong{font-weight:600;font-size:clamp(26px,9vw,38px);line-height:1.1;letter-spacing:.04em}
.idc-band small{font:700 12.5px var(--font-body)}

/* Colores */
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sw{position:relative;width:40px;height:40px;padding:0;border-radius:50%;border:3px solid var(--bg);box-shadow:0 0 0 2px var(--line);cursor:pointer;overflow:hidden}
.sw[aria-pressed=true]{box-shadow:0 0 0 3px var(--fg)}
.sw.custom{background:conic-gradient(#ff5d5d,#ffb13d,#f3e64a,#5fdc6d,#3cc8ff,#6a6bff,#c15bff,#ff5d5d)}
.sw.custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.sw.custom:focus-within{outline:3px solid var(--accent-2);outline-offset:2px}

/* Tienda ampliada */
.pa{position:relative}
.ptag{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 11px var(--font-body);box-shadow:0 2px 0 var(--accent-deep)}
.ptag.inl{position:static;display:inline-block;margin:0 0 6px}
.pout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 11px;border-radius:10px;background:#3A1418;color:#FCA5A5;border:2px solid #F87171;font:800 12px var(--font-body);white-space:nowrap}
.pout.hidn{top:auto;bottom:8px;transform:translateX(-50%);background:var(--surface-2);color:var(--fg-soft);border-color:var(--line)}
.prod{cursor:pointer;position:relative}
.prod:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.prod.soldout .pimg,.prod.soldout .pa svg{opacity:.45}
.prod.hid{opacity:.7}
.pwa{font:800 11.5px var(--font-body);color:var(--fg-muted)}
.fr{font:700 12px var(--font-body);color:var(--fg-muted)}
.shop-empty{grid-column:1/-1;text-align:center;padding:24px 0}
.shopbar{display:flex;gap:8px;margin:0 0 12px}
.shopbar input[type=search]{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 15px var(--font-body);-webkit-appearance:none;appearance:none}
.shopbar input[type=search]::placeholder{color:var(--fg-muted);font-weight:600}
.shopbar input[type=search]:focus-visible,.shopbar select:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.shopbar select{flex:none;max-width:42%;min-height:44px;padding:0 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 14px var(--font-body);color-scheme:dark}
.shopcount{margin:-4px 2px 10px;color:var(--fg-muted);font-size:13px;font-weight:700}
/* Hoja de detalle */
#pdet{position:fixed;inset:0;z-index:48;background:rgba(2,8,20,.66);display:flex;align-items:flex-end;justify-content:center}
#pdet[hidden]{display:none}
.pd{position:relative;width:100%;max-width:460px;max-height:94%;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px calc(env(safe-area-inset-bottom,0px) + 20px);border:2px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;background:var(--bg);background-image:radial-gradient(120% 40% at 50% 0,var(--glow) 0%,transparent 70%);color:var(--fg)}
.pd-x{position:sticky;top:0;z-index:2;float:right;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--fg-soft);cursor:pointer}
.pd-x svg{width:22px;height:22px}
.pd-img{clear:both;width:min(250px,68%);aspect-ratio:1;margin:2px auto 12px;border-radius:20px;overflow:hidden;background:var(--surface);border:2px solid var(--line)}
.pd-img.sm{width:120px;margin:0}
.pd-img .pimg{width:100%;height:100%;object-fit:cover}
.pd-img svg{width:100%;height:100%;display:block}
.pd-h{margin:2px 0 2px;font:600 24px/1.2 var(--font-display)}
.pd-c{margin:0;color:var(--fg-muted);font-weight:700;font-size:13.5px}
.pd-money{margin:8px 0 10px;font-size:24px}
.pd-d{margin:0 0 14px;color:var(--fg-soft);line-height:1.5}
.pd-og{margin:0 0 14px}
.pd-ol{display:block;margin:0 0 7px;color:var(--fg-soft);font-weight:800;font-size:13px}
.pd-ol b{color:var(--fg)}
.pd-chips{display:flex;flex-wrap:wrap;gap:8px}
.pd-chip{min-width:46px;min-height:42px;padding:0 13px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font:800 14px var(--font-body);cursor:pointer}
.pd-chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.pd-acts{display:grid;gap:10px;margin-top:6px}
.pd-acts .btn{width:100%;margin:0;text-decoration:none}
.btn.wa{background:#25D366;color:#04260F;box-shadow:0 4px 0 #128C7E}
.btn.wa:active{box-shadow:0 1px 0 #128C7E}
.btn.wa svg{width:22px;height:22px}
.btn[disabled]{background:var(--surface-2);color:var(--fg-muted);box-shadow:none;cursor:default;transform:none;border:2px solid var(--line)}
.btn.ghost[disabled]{background:transparent}
.pd-note{margin:-2px 2px 0;text-align:center}
.pd-form{display:grid;gap:12px;margin-top:6px}
.pd-ph{display:flex;align-items:center;gap:14px}
.pd-form textarea.tx{width:100%;min-width:0;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 15px/1.4 var(--font-body);resize:vertical}
.pd-form .fld input.tx{background:var(--surface)}
.pd-form select.al-s{width:100%;min-height:46px;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 14.5px var(--font-body);color-scheme:dark}
.chk{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:700;font-size:14.5px;color:var(--fg)}
.chk input{width:22px;height:22px;accent-color:var(--accent);flex:none}
.pd-err{margin:0;padding:10px 12px;border-radius:12px;background:#3A1418;border:2px solid #F87171;color:#FCA5A5;font-weight:800;font-size:13.5px}

.svcnote{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--surface);border:2px solid var(--line)}
/* Clases: video y documentos */
#cls,#adm,#att,#rp{position:fixed;inset:0;z-index:49;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#cls[hidden],#adm[hidden],#att[hidden],#rp[hidden]{display:none}
.cl{position:relative;width:100%;max-width:460px;height:100%;margin:0 auto;display:flex;flex-direction:column}
.cl-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 8px}
.cl-x{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--fg-soft);cursor:pointer}
.cl-x svg{width:22px;height:22px}
.cl-t{min-width:0}
.cl-t small{display:block;color:var(--fg-muted);font-weight:800;font-size:12.5px}
.cl-t b{display:block;font:600 19px/1.2 var(--font-display)}
.cl-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 18px}
.cl-foot{display:grid;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px);border-top:2px solid var(--line);background:var(--bg)}
.cl-foot .btn{width:100%;margin:0}
.cl-vid{margin:0 auto 14px;border-radius:18px;overflow:hidden;background:#000;border:2px solid var(--line)}
.cl-vid.h{width:100%;aspect-ratio:16/9}
.cl-vid.v{height:min(60vh,540px);aspect-ratio:9/16;max-width:100%}
.cl-vid video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.cl-vid iframe{display:block;width:100%;height:100%;border:0;background:#000}
.cl-miss{margin:0 0 14px;padding:16px;border-radius:16px;border:2px dashed var(--line);background:var(--surface);color:var(--fg-soft);font-weight:700;line-height:1.4;text-align:center}
.cl-note{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--surface);border:2px solid var(--line);color:var(--fg);line-height:1.5;white-space:pre-wrap}
.cl-h{margin:0 0 8px;font:600 16px var(--font-display)}
.cl-sec{margin:0 0 18px}
.cl-docs{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.cl-doc{display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;cursor:pointer}
button.cl-doc{width:100%;font:inherit;text-align:left}
.cl-doc:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
button.cl-doc.miss{opacity:.55}
.cl-ext{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--fg);font:800 11px var(--font-body);letter-spacing:.3px}
.cl-dn{flex:1;min-width:0;display:grid}
.cl-dn b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-dn small{color:var(--fg-muted);font-weight:700;font-size:12.5px}
.cl-rm{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#FCA5A5;cursor:pointer}
.cl-rm svg{width:20px;height:20px}
.cl-empty{display:grid;justify-items:center;gap:6px;padding:26px 8px;text-align:center}
.cl-empty h2{margin:6px 0 0;font:600 20px var(--font-display)}
.cl-empty p{margin:0;max-width:30ch;color:var(--fg-soft);line-height:1.45}
.cl-tools{margin:0 0 14px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:var(--surface)}
.cl-tools b{display:block;margin:0 0 4px;color:var(--accent)}
.cl-tools p{margin:0;color:var(--fg-soft);line-height:1.45}
.cl-done{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;color:#4ADE80;font-weight:800}
.cl-done svg{width:22px;height:22px;stroke-width:3}
.cl-pick{display:grid;justify-items:center;align-content:center;gap:6px;width:100%;min-height:150px;padding:16px;border:2px dashed var(--accent);border-radius:18px;background:var(--surface);color:var(--fg);font:800 16px var(--font-body);cursor:pointer}
.cl-pick svg{width:38px;height:38px;color:var(--accent)}
.cl-pick small{color:var(--fg-muted);font-weight:700;font-size:13px}
.cl-meta{margin:0 0 10px;color:var(--fg-soft);font-size:13.5px;word-break:break-word}
.cl-row{display:flex;flex-wrap:wrap;gap:8px}
.cl-or{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-orb{display:grid;justify-items:center;gap:4px;min-height:110px;padding:12px 8px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);cursor:pointer;font-family:var(--font-body)}
.cl-orb b{font-size:15px;color:var(--fg)}
.cl-orb small{font-weight:700;font-size:12px;color:var(--fg-muted)}
.cl-orb[aria-checked=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.cl-orb:focus-visible{outline:3px solid var(--accent-ring);outline-offset:2px}
.gl{display:block;border:3px solid currentColor;border-radius:6px;margin:2px 0 4px}
.gl.h{width:52px;height:30px}
.gl.v{width:30px;height:52px}
.cl-ta{width:100%;min-width:0;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 15px/1.4 var(--font-body);resize:vertical}
.cl-ta:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.clnote{margin:8px 0 10px}
.node .bdg.pl{background:var(--accent-deep)}

/* Contacto por WhatsApp */
.wacard{display:grid;gap:10px;margin:0 0 14px;padding:14px;border-radius:20px;border:2px solid #1F8F4E;background:linear-gradient(160deg,rgba(37,211,102,.16),var(--surface) 70%)}
.wacard h2{margin:0;font:600 19px/1.2 var(--font-display)}
.wacard p{margin:0;color:var(--fg-soft);line-height:1.4;font-size:14px}
.wacard .btn.wa{width:100%;margin:0;text-decoration:none;text-align:center}
.wacard .wanum{text-align:center;color:var(--fg-muted);font-weight:800;font-size:13px;letter-spacing:.2px}

/* Tienda */
.shophead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 14px}
.shophead h1{margin:0;font:600 28px/1.1 var(--font-display)}
.shophead p{margin:4px 0 0;max-width:30ch;color:var(--fg-soft);line-height:1.4}
.bal,.coin{display:inline-flex;align-items:center;gap:6px;font:600 17px var(--font-display);color:#F5C84B}
.bal{flex:none;padding:8px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prod{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;border:2px solid var(--line);background:var(--surface)}
.pa{padding:8px;background:radial-gradient(90% 80% at 50% 30%,var(--surface-2),var(--surface))}
.pa svg{width:100%;height:auto}
.buy.wide{width:100%;padding:10px 12px}
.buy.on{background:var(--surface-2);color:var(--fg);box-shadow:0 4px 0 var(--line);border:2px solid var(--accent)}
.pa .pimg{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#fff}
.pi{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.pi b{font-weight:800;font-size:14px;line-height:1.2}
.pc{color:var(--fg-muted);font-size:12.5px;font-weight:700}
.pr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.buy{border:0;border-radius:12px;padding:8px 12px;background:var(--accent);color:var(--on-accent);font:800 13px var(--font-body);cursor:pointer;box-shadow:0 4px 0 var(--accent-deep)}
.buy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.buy:disabled{background:var(--surface-2);color:var(--fg-muted);box-shadow:none;cursor:default;transform:none}
.link{background:none;border:0;padding:0;color:var(--accent);font:800 13px var(--font-body);cursor:pointer;text-decoration:underline}
.shopfoot{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.shopfoot img{width:120px;height:auto;opacity:.9}

/* Temas */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.theme{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14px var(--font-body);cursor:pointer;text-align:left}
.theme[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.tdots{display:flex;padding-left:6px}
.tdots i{width:24px;height:24px;margin-left:-6px;border-radius:50%;border:2px solid var(--bg-col)}

/* Tarjetas de nivel y moneda */
.one{display:flex;justify-content:center}
.one .mcard{width:min(100%,250px)}
.cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cardwrap{flex:none;width:210px;scroll-snap-align:center;display:flex;flex-direction:column;gap:12px}
.cardwrap .ip{width:100%}
.mcard{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.cursel{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--fg-soft);font-weight:800;font-size:13.5px;white-space:nowrap}
select.cur{flex:1;min-width:0;padding:9px 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:800 14px var(--font-body)}
.money{margin-top:6px;font:600 18px/1.1 var(--font-display)}
.money small{display:block;margin-top:2px;color:var(--fg-muted);font:700 12px var(--font-body)}

/* Aviso */
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translate(-50%,-12px);max-width:min(92vw,420px);padding:10px 16px;border-radius:14px;border:2px solid var(--line);background:var(--surface-2);color:var(--fg);font-weight:800;font-size:14px;line-height:1.35;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* Finanzas */
.fin-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px}
.fin-h h1{margin:0;font:600 26px var(--font-display)}
.badge{padding:4px 11px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--line);color:var(--fg);font-weight:800;font-size:12px}
.hero-k{padding:18px 18px 16px;border-radius:22px;background:var(--accent);color:var(--on-accent);box-shadow:0 6px 0 var(--accent-deep)}
.hero-k .lbl{font-weight:800;font-size:14px;opacity:.85}
.hero-k .val{margin:4px 0 8px;font:600 48px/1.05 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.hero-k .sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:800;font-size:13px}
.delta{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;background:color-mix(in srgb,var(--on-accent) 16%,transparent)}
.ktiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.kt{display:flex;flex-direction:column;gap:3px;padding:12px 10px;border-radius:18px;border:2px solid var(--line);background:var(--surface);min-width:0}
.kt .l{font-weight:800;font-size:12px;color:var(--fg-soft)}
.kt .v{font:600 17px/1.15 var(--font-display);overflow-wrap:anywhere}
.kt .s{font-weight:700;font-size:12px;color:var(--fg-muted)}
.panel{margin-top:14px;padding:16px 14px 14px;border-radius:20px;border:2px solid var(--line);background:var(--surface)}
.panel h2{margin:0;font:600 18px var(--font-display)}
.panel .sub{margin:3px 0 0;color:var(--fg-muted);font-size:12.5px;font-weight:700}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px}
.readout{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:12px 0 4px;color:var(--fg-soft);font-weight:800;font-size:13px;min-height:24px}
.readout b{font:600 20px var(--font-display);color:var(--fg)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.col{fill:var(--accent);transition:opacity .15s}
.col.past{opacity:.5}
.barhit{fill:transparent;cursor:pointer}
.hb{display:grid;grid-template-columns:76px minmax(0,1fr) 84px;align-items:center;gap:10px;margin-top:12px;font-weight:800;font-size:13.5px}
.hb .tr{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.hb .fl{height:100%;border-radius:0 4px 4px 0;background:var(--accent)}
.hb .n{text-align:right;color:var(--fg-soft);font-variant-numeric:tabular-nums;font-size:13px}
.srow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.panel h2+.srow{margin-top:8px}
.srow .sm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.srow small,.pm small{color:var(--fg-muted);font-weight:700;font-size:12.5px;line-height:1.35}
.st{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 7px;border-radius:999px;border:1px solid;font-weight:800;font-size:12px;white-space:nowrap}
.st.ok{color:#6EEBB0;border-color:rgba(110,235,176,.4);background:rgba(110,235,176,.1)}
.st.warn{color:#FCD34D;border-color:rgba(252,211,77,.4);background:rgba(252,211,77,.1)}
.st.bad{color:#FCA5A5;border-color:rgba(252,165,165,.45);background:rgba(252,165,165,.12)}
.plist{margin-top:6px}
.prow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.prow .avatar{box-shadow:none}
.pm{display:flex;flex-direction:column;gap:1px;min-width:0}
.pm b{font-size:15px}
.pr{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pr b{font:600 15px var(--font-display);white-space:nowrap}
.pact{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 12px 48px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font:800 15px var(--font-body);cursor:pointer;box-shadow:0 4px 0 var(--accent-deep)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.sm{min-height:38px;padding:0 13px;font-size:13.5px;border-radius:12px}
.btn.ghost{background:transparent;color:var(--fg);border:2px solid var(--line);box-shadow:none}
.btn.ghost:active{transform:none;background:var(--surface-2)}
.btn.wide{width:100%;margin-top:10px}
.payform{display:grid;gap:12px;margin:14px 0 8px;padding:14px;border-radius:18px;border:2px solid var(--accent);background:var(--surface-2)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fld{display:grid;gap:5px;font-weight:800;font-size:12.5px;color:var(--fg-soft);min-width:0}
.fld input[type=number],.fld input[type=date],.fld select{width:100%;min-width:0;max-width:100%;min-height:46px;padding:9px 11px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);font:700 15px var(--font-body);color-scheme:dark}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg-soft);font-weight:800;font-size:14px}
.seg input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.seg input:focus-visible+span{outline:3px solid var(--accent-2);outline-offset:2px}
.err{margin:0;color:#FCA5A5;font-weight:800;font-size:13px}
.dtl{margin-top:8px;color:var(--fg-soft);font-weight:800;font-size:13px}
.dtl summary{cursor:pointer;padding:8px 0}
.dtl table{width:100%;border-collapse:collapse;margin-top:4px;font-size:13px}
.dtl th{text-align:left;color:var(--fg-muted);font-weight:800;padding:6px 4px;border-bottom:1px solid var(--line)}
.dtl td{padding:7px 4px;border-bottom:1px solid var(--line);color:var(--fg);font-variant-numeric:tabular-nums}
.dtl td:first-child{text-transform:capitalize}
.finfoot{margin-top:6px;padding-bottom:6px}
.finfoot .two{margin-top:12px}

/* Blog dentro de la app */
#screen.blogmode{padding:0;overflow:hidden}
.blog-host{display:block;height:100%}

/* Iniciar sesión / registrarse */
#auth{position:fixed;inset:0;z-index:60;overflow-y:auto;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
.auth-in{max-width:460px;margin:0 auto;min-height:100%;padding:calc(env(safe-area-inset-top,0px) + 26px) 20px 34px;display:flex;flex-direction:column;gap:14px}
.au-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.au-logo{width:min(210px,62%);height:auto;display:block}
.au-brand h1{margin:6px 0 0;font:600 27px/1.15 var(--font-display)}
.au-brand p{margin:0;color:var(--fg-soft);font-size:14.5px;line-height:1.45;max-width:340px}
#splash{position:fixed;inset:0;z-index:61;overflow-y:auto;background:var(--bg);background-image:radial-gradient(120% 55% at 50% -8%,var(--glow) 0%,transparent 62%);color:var(--fg)}
#splash[hidden]{display:none}
.sp-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.sp-c{position:absolute;display:block;border-radius:50%}
.sp-c.a{width:210px;height:210px;left:-76px;top:5%;background:var(--accent-soft)}
.sp-c.b{width:104px;height:104px;right:-24px;top:15%;background:var(--glow);opacity:.75}
.sp-c.c{width:132px;height:132px;left:7%;bottom:8%;background:var(--glow);opacity:.6}
.sp-c.d{width:240px;height:240px;right:-84px;bottom:-64px;background:var(--accent-soft)}
.sp-in{position:relative;z-index:1;max-width:460px;min-height:100%;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 24px) 28px calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.sp-hero{margin-bottom:24px}
.sp-tile{position:relative;width:128px;height:128px;border-radius:32px;display:grid;place-items:center;background:radial-gradient(circle at 50% 26%,var(--glow),var(--surface) 80%);border:2px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 0 6px var(--accent-soft);animation:spfloat 4.2s ease-in-out infinite}
.sp-eagle{display:block;width:90%;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.sp-badge{position:absolute;right:-12px;bottom:-12px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:3px solid var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.sp-badge img{display:block;width:28px;height:auto}
.sp-kick{margin:0 0 8px;color:var(--fg-soft);font:800 12px var(--font-body);letter-spacing:.22em;text-transform:uppercase}
.sp-in h1{margin:0;font:600 clamp(36px,11vw,48px)/1.04 var(--font-display);text-wrap:balance;color:var(--fg)}
.sp-l{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;color:var(--accent);font:700 17px var(--font-display);letter-spacing:.32em;text-transform:uppercase}
.sp-l::before,.sp-l::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent);opacity:.6}
.sp-tag{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:8px;justify-items:center;color:var(--fg-muted);font:800 12.5px var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.sp-tag li+li::before{content:"";display:block;width:5px;height:5px;margin:0 auto 8px;border-radius:50%;background:var(--accent);opacity:.85}
.sp-go{width:100%;max-width:300px;margin:0}
.sp-in>*{animation:spin .55s ease both}
.sp-in>:nth-child(2){animation-delay:.07s}.sp-in>:nth-child(3){animation-delay:.14s}.sp-in>:nth-child(4){animation-delay:.21s}.sp-in>:nth-child(5){animation-delay:.28s}
@keyframes spfloat{50%{transform:translateY(-6px)}}
@keyframes spin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sp-tile,.sp-in>*{animation:none}}
.atabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:var(--surface);border:2px solid var(--line)}
.atabs button{min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--fg-soft);font:800 14.5px var(--font-body);cursor:pointer}
.atabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent);box-shadow:0 3px 0 var(--accent-deep)}
.aform{display:grid;gap:12px;padding:16px;border-radius:20px;border:2px solid var(--line);background:var(--surface)}
.fld input.tx{width:100%;min-width:0;min-height:48px;padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg-col);color:var(--fg);font:700 16px var(--font-body)}
.fld input.tx::placeholder{color:var(--fg-muted);font-weight:600}
.fld input.tx:focus,.fld input.tx:focus-visible{outline:3px solid var(--accent-ring);outline-offset:1px;border-color:var(--accent)}
.pw{position:relative}
.pw input.tx{padding-right:70px}
.pw button{position:absolute;right:4px;top:4px;bottom:4px;min-width:58px;border:0;border-radius:9px;background:var(--surface-2);color:var(--fg-soft);font:800 13px var(--font-body);cursor:pointer}
.aform .btn{width:100%;margin-top:2px}
.aform .btn[disabled]{opacity:.65;cursor:progress}
.okmsg{margin:0;padding:10px 12px;border-radius:12px;border:2px solid var(--accent);background:var(--accent-soft);color:var(--fg);font-weight:800;font-size:13.5px}
.demo{padding:14px;border-radius:18px;border:2px dashed var(--line);background:transparent}
.demo h2{margin:0 0 4px;font:600 16px var(--font-display)}
.demo p{margin:0 0 10px;color:var(--fg-muted);font-size:13px;line-height:1.4}
.demo .row{display:flex;flex-wrap:wrap;gap:8px}
.demo .ip{min-height:44px}
.au-hint{font:700 12px/1.35 var(--font-body);color:var(--fg-muted)}
.demo .demo-cd{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;font-size:12.5px}
.demo-cd b{color:var(--fg);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.idc-cd{margin:10px 0 0;text-align:center;font:800 13px var(--font-body);color:var(--fg-muted)}
.idc-cd b{color:var(--fg);font-size:15px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.idc-cd.has-btn{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px}
.idc-cd .btn.sm,.cd-pan .btn.sm{min-height:44px;width:auto;margin:0;flex:none}
.cd-pan .reg-nm b{font-size:15px}
.cd-pan .cd-cur b{font-size:inherit;color:var(--fg);letter-spacing:.05em;font-variant-numeric:tabular-nums}
.cd-form{margin-top:10px;padding:12px;border-radius:12px;border:2px solid var(--accent);background:var(--accent-soft);display:grid;gap:10px}
.cd-form p{margin:0}
.cd-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-form .two .btn.sm{width:100%}
.cd-pan .al-av{width:40px;height:40px;font-size:14px}
.cd-pan .al-q{margin:0 0 8px}
.cd-pan .cd-lead{margin:0 0 10px}
.cd-cnt{margin:0 0 10px;font:700 12.5px/1.4 var(--font-body);color:var(--fg-muted)}
.cd-empty{padding:14px;text-align:center;color:var(--fg-muted);font:700 14px var(--font-body)}
.sc-box{display:grid;gap:10px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--surface)}
.sc-h{margin:0;font:800 13px var(--font-body);color:var(--fg-soft)}
.sc-row{display:grid;gap:8px;padding-top:10px;border-top:2px solid var(--line)}
.sc-h+.sc-row{padding-top:0;border-top:0}
.sc-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sc-n{font:800 17px var(--font-body);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--fg);overflow-wrap:anywhere}
.sc-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-acts .btn.sm{width:100%;min-height:44px;margin:0}
.sc-hint,.sc-none{margin:0;font:700 12.5px/1.4 var(--font-body);color:var(--fg-muted)}
.link.inl{display:inline;padding:0;min-height:0}
.acct{display:grid;gap:12px;padding:14px;border-radius:18px;border:2px solid var(--line);background:var(--surface)}
.acct small{display:block;color:var(--fg-muted);font-weight:800;font-size:12px}
.acct b{display:block;margin-top:2px;font-size:15px;overflow-wrap:anywhere}
.btn.out{width:100%;background:transparent;color:#FCA5A5;border:2px solid #F87171;box-shadow:none}
.btn.out:active{transform:none;background:rgba(248,113,113,.14)}
.btn.out svg{width:20px;height:20px}
/* ═══ Diseño adaptable ═══
   Celular (hasta 639 px): igual que siempre, con la barra de pestañas abajo.
   Tableta (640 a 899 px): columna más ancha y cuadrículas de 3 columnas.
   Computador (900 px o más): menú lateral, barra superior completa y varias columnas.
   Cambia solo con el ancho de la ventana: no hay que elegir nada. */

/* Efectos con ratón (no afectan al celular) */
@media (hover:hover) and (pointer:fine){
  .nav button:not([aria-current=page]):hover{background:var(--surface);color:var(--fg)}
  .ip:not([aria-pressed=true]):hover,.chip:not([aria-pressed=true]):hover{border-color:var(--accent);color:var(--fg)}
  .prod{transition:transform .15s,border-color .15s}
  .prod:hover{transform:translateY(-3px);border-color:var(--accent)}
  .theme:not([aria-pressed=true]):hover,.in-card:hover,.cl-doc:hover,.al-item:not(.open):hover{border-color:var(--accent)}
  .mi-h:hover,.mi-ih:hover,.prow:hover,.al-row:hover{background:var(--accent-soft)}
  .node:not(.locked):hover,.btn:not([disabled]):hover,.buy:not(:disabled):hover{filter:brightness(1.08)}
  .btn.ghost:not([disabled]):hover{background:var(--surface-2);filter:none}
  .photo-btn:hover .cam{filter:brightness(1.12)}
}

/* ── Tableta ── */
@media (min-width:640px){
  #app{max-width:820px}
  .top{padding:12px 24px 6px}
  .views{padding:6px 24px 10px}
  #screen{padding:10px 24px 32px}
  .insts{margin-inline:-24px;padding-inline:24px}
  .cards{margin-inline:-24px;padding-inline:24px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .themes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .al-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .al-letter,.al-item.open{grid-column:1/-1}
  .ls,.cl{max-width:640px}
  .pd{max-width:560px}
  .auth-in{max-width:520px}
}

/* ── Computador ── */
@media (min-width:900px){
  body{font-size:16px}
  #app{max-width:none;border-inline:0;background:transparent;display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .top{grid-column:1/-1;grid-row:1;gap:14px;padding:12px 28px;border-bottom:2px solid var(--line);background:var(--bg-col)}
  .brand{order:1}
  .mascot{order:2}
  .me{order:3}
  .brand .bl{height:40px}
  .brand b{font-size:21px}
  .brand small{font-size:14px}
  .views{grid-column:2;grid-row:2;grid-auto-columns:minmax(112px,164px);justify-content:start;padding:14px max(32px,calc((100% - 1080px)/2)) 2px}
  .nav{grid-column:1;grid-row:2/4;flex-direction:column;justify-content:flex-start;align-content:start;gap:6px;padding:20px 14px;border-top:0;border-right:2px solid var(--line);background:var(--bg-col);overflow-y:auto}
  .nav button{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 16px;font-size:15.5px;border-radius:16px;text-align:left}
  .nav button span{white-space:nowrap}
  .nav svg{width:24px;height:24px;flex:none}
  #screen{grid-column:2;grid-row:3;padding:10px max(32px,calc((100% - 1080px)/2)) 48px}
  .insts{margin:0 0 14px;padding:2px 0;flex-wrap:wrap;overflow:visible}
  .cards{margin:0;padding:4px 0 12px}
  /* Ruta: columna central, como en las apps de aprendizaje de escritorio */
  #screen[data-tab=ruta]>.insts,#screen[data-tab=ruta]>.unit,#screen[data-tab=ruta]>.path,#screen[data-tab=ruta]>.clnote,#screen[data-tab=ruta]>.ad-bar{max-width:640px;margin-inline:auto}
  #screen[data-tab=ruta]>.insts{justify-content:center}
  /* Tienda */
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .shophead p{max-width:none}
  .shopbar{max-width:680px}
  .cursel{max-width:440px}
  #screen[data-tab=tienda] .wacard{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 28px}
  #screen[data-tab=tienda] .wacard>div{grid-column:1;grid-row:1/3}
  #screen[data-tab=tienda] .wacard .btn.wa{grid-column:2;grid-row:1;width:auto;padding:0 28px}
  #screen[data-tab=tienda] .wacard .wanum{grid-column:2;grid-row:2}
  /* Perfil */
  #screen[data-tab=perfil] .pf{max-width:680px;margin-inline:auto}
  /* Mis alumnos */
  .al-list{gap:10px}
  .al-sel{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);align-items:end;gap:12px}
  .al-q{max-width:680px}
  /* Finanzas */
  .fin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;align-items:start}
  .fin>.fin-h,.fin>.hero-k,.fin>.ktiles,.fin>.finfoot{grid-column:1/-1}
  .hero-k .val{font-size:56px}
  .ktiles{gap:14px}
  .kt .v{font-size:21px}
  /* Blog */
  .blog-host{max-width:780px;margin-inline:auto;border-inline:2px solid var(--line)}
  /* Lección interactiva */
  .ls{max-width:720px;border-inline:2px solid var(--line);background:var(--bg-col)}
  .ls-top,.cl-top{padding-inline:28px}
  .ls-body{padding:12px 32px 24px}
  .ls-foot{padding-inline:32px}
  .ls-h{font-size:28px}
  .ls-sub{font-size:16px}
  .ls-hero{width:min(210px,44%,26vh)}
  .ls-hero.big{width:min(240px,50%,28vh)}
  .ls-ipic{width:min(74%,380px)}
  .ls-ipic img{max-height:42vh}
  .ls-pz{width:min(100%,480px,calc(52vh*var(--ar,1)))}
  .ls-sg{max-width:460px}
  .ls-sheet .box{border-radius:24px}
  /* Clases (video y documentos) */
  .cl{max-width:860px;border-inline:2px solid var(--line);background:var(--bg-col)}
  .cl-body{padding:12px 32px 24px}
  .cl-foot{padding-inline:32px}
  .cl-vid.v{height:min(64vh,620px)}
  .in-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Detalle de producto como ventana centrada */
  #pdet{align-items:center}
  .pd{max-width:660px;max-height:90%;border-radius:26px;border-bottom:2px solid var(--line);padding-bottom:24px}
  .pd-img{width:min(300px,55%)}
  /* Iniciar sesión */
  .auth-in{max-width:540px;justify-content:center}
}
@media (min-width:1100px){
  #screen[data-tab=perfil] .pf{max-width:none;display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:0 44px;align-items:start}
  #screen[data-tab=perfil] .pf-b>h2.sec:first-child{margin-top:14px}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .al-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}