/* HI-LENGUAJE · Deletreo en LSM — mismos colores y fuentes que el front original */
@font-face{font-family:'DM Sans';src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/plus-jakarta-sans.woff2) format('woff2');font-weight:200 800;font-display:swap}

/* ── Modo claro (día) ─────────────────────────────────── */
:root{
  --teal:#0ABFA3;
  --blue:#3B82F6;
  --purple:#a855f7;        /* letras con movimiento, como en el original */
  --grad:linear-gradient(135deg,var(--teal),var(--blue));
  --grad-motion:linear-gradient(135deg,#a855f7,#6366f1);

  --bg-page:#f8f9fb;
  --bg-top:#f0fdfa;
  --bg-bottom:#eff6ff;
  --bg-card:rgba(255,255,255,.88);
  --bg-hover:#f1f5f9;
  --border:#e2e8f0;
  --text-main:#1e293b;
  --text-sub:#64748b;
  --text-muted:#94a3b8;
  --shadow-card:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --shadow-teal:0 4px 16px rgba(10,191,163,.25);
  --wave-1:rgba(10,191,163,.10);
  --wave-2:rgba(59,130,246,.08);
  --wave-3:rgba(10,191,163,.07);
  --skel-dot:#ffffff;

  --display:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  color-scheme:light;
}

/* ── Modo oscuro (noche) ──────────────────────────────── */
.dark{
  --bg-page:#0d1117;
  --bg-top:#020617;
  --bg-bottom:#0f172a;
  --bg-card:rgba(22,27,34,.88);
  --bg-hover:#1c2129;
  --border:rgba(255,255,255,.08);
  --text-main:#e6edf3;
  --text-sub:#8b949e;
  --text-muted:#6e7681;
  --shadow-card:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --wave-1:rgba(10,191,163,.12);
  --wave-2:rgba(59,130,246,.10);
  --wave-3:rgba(168,85,247,.08);
  --skel-dot:#e6edf3;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  font:400 1rem/1.55 var(--body);
  color:var(--text-main);
  background:linear-gradient(160deg,var(--bg-top),var(--bg-page) 45%,var(--bg-bottom));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s,color .3s;
}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── Ondas de fondo ───────────────────────────────────── */
.waves{position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:0;pointer-events:none;overflow:hidden}
.wave{position:absolute;bottom:0;left:0;width:200%;height:100%}
.w1{fill:var(--wave-1);animation:drift 26s linear infinite}
.w2{fill:var(--wave-2);animation:drift 18s linear infinite reverse;height:85%}
.w3{fill:var(--wave-3);animation:drift 34s linear infinite;height:70%}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.top,main,.foot{position:relative;z-index:1}

/* ── Encabezado ───────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:18px clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{flex:none;width:46px;height:46px;border-radius:12px;box-shadow:0 4px 14px rgba(69,179,234,.35)}
.logo svg{display:block;width:100%;height:100%}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font:800 1.12rem/1.15 var(--display);letter-spacing:.01em;color:var(--text-main)}
.brand-sub{font-size:.82rem;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:14px}
.status{margin:0;color:var(--text-sub);font-size:.85rem;text-align:right}
.status.ok::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px;animation:pulse 2s ease-in-out infinite}
.status.err{color:#ef4444}
@keyframes pulse{50%{opacity:.4}}

/* Interruptor día/noche (igual que el login original) */
.theme-toggle{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-card);cursor:pointer;font-size:.85rem;font-weight:500;color:var(--text-sub)}
.theme-toggle:hover{background:var(--bg-hover)}
.switch{position:relative;width:36px;height:20px;border-radius:999px;background:#d1d5db;transition:background .3s}
.knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);display:grid;place-items:center;transition:transform .3s,background .3s}
.knob svg{width:10px;height:10px;position:absolute}
.i-sun{color:#f59e0b}
.i-moon{color:#fcd34d;opacity:0}
.dark .switch{background:#fbbf24}
.dark .knob{transform:translateX(16px);background:#0f172a}
.dark .i-sun{opacity:0}
.dark .i-moon{opacity:1}
.dark .theme-toggle{color:#fcd34d}

main{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 40px}

/* ── Tarjetas ─────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .3s,border-color .3s}

/* ── Cámara + lectura ─────────────────────────────────── */
.stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);gap:20px;align-items:stretch}
.cam{position:relative;aspect-ratio:4/3;overflow:hidden}
.cam video,.cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam video{transform:scaleX(-1)}
.cam.on{background:#000}
.cam-idle{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,4vw,40px);
  background:radial-gradient(110% 80% at 90% 0%,rgba(10,191,163,.16),transparent 60%),radial-gradient(90% 70% at 0% 100%,rgba(59,130,246,.12),transparent 60%)}
.cam-idle h1{font:800 clamp(2rem,4.6vw,3.2rem)/1.05 var(--display);margin:0 0 14px;letter-spacing:-.02em;max-width:13ch;color:var(--text-main)}
.cam-idle p{margin:0 0 22px;max-width:46ch;color:var(--text-sub)}
.cam-idle .fine{margin:16px 0 0;font-size:.85rem;color:var(--text-muted)}
.cam.on .cam-idle{display:none}
.cam-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(15,23,42,.78);color:#fff;padding:8px 16px;border-radius:999px;font-size:.9rem;white-space:nowrap}

.reading{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.glyph-wrap{position:relative;width:min(100%,250px);aspect-ratio:1}
.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring-track{stroke:var(--border)}
.ring-fill{stroke:url(#gradStill);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .12s linear}
.reading.motion .ring-fill{stroke:url(#gradMotion)}
.glyph{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(5rem,12vw,8rem)/1 var(--display);letter-spacing:-.04em;color:var(--text-main);transition:color .2s}
.glyph.low{color:var(--text-muted)}
.reading.motion .glyph:not(.low){color:var(--purple)}
.glyph.pop{animation:pop .45s ease-out}
@keyframes pop{0%{color:var(--teal);transform:scale(1.12)}100%{transform:scale(1)}}
.mode{margin:0;color:var(--text-sub);font-size:.92rem;text-align:center;min-height:1.5em}
.top3{list-style:none;margin:6px 0 0;padding:0;width:100%;display:grid;gap:8px}
.top3 li{display:grid;grid-template-columns:2.4em 1fr 3em;align-items:center;gap:10px;font-size:.88rem}
.top3 b{font:700 1rem var(--display)}
.top3 .bar{height:6px;border-radius:3px;background:var(--bg-hover);overflow:hidden}
.top3 .bar i{display:block;height:100%;background:var(--text-muted);border-radius:3px}
.top3 li:first-child .bar i{background:var(--grad)}
.reading.motion .top3 li:first-child .bar i{background:var(--grad-motion)}
.top3 span:last-child{text-align:right;color:var(--text-sub);font-variant-numeric:tabular-nums}

/* ── Texto deletreado ─────────────────────────────────── */
.writing{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:20px 24px}
.text-line{flex:1 1 320px;min-height:1.3em;font:700 clamp(1.6rem,3.4vw,2.3rem)/1.25 var(--display);letter-spacing:.06em;word-break:break-word}
.text-line #text:empty::before{content:'Las letras aparecerán aquí';color:var(--text-muted);letter-spacing:0;font:400 1rem var(--body)}
.caret{display:inline-block;width:3px;height:.9em;background:var(--teal);margin-left:4px;vertical-align:-.08em;border-radius:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.actions{display:flex;flex-wrap:wrap;gap:8px}

.btn{border:1px solid var(--border);background:var(--bg-card);border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:.92rem;color:var(--text-main);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.btn.primary{background:linear-gradient(90deg,#0ABFA3,#0d9e88);border:0;color:#fff;padding:14px 26px;font-size:1rem;align-self:flex-start;box-shadow:var(--shadow-teal)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,191,163,.32)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}

/* ── Abecedario ───────────────────────────────────────── */
.alphabet{margin-top:20px;padding:20px 24px}
.alphabet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:14px}
.alphabet h2{font:700 1.2rem var(--display);margin:0}
.alphabet-head p{margin:0;color:var(--text-sub);font-size:.88rem}
.dot{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--purple);margin-right:8px;vertical-align:4px}
.letters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.letters li{position:relative;aspect-ratio:1;display:grid;place-items:center;padding-bottom:4px;border-radius:12px;background:var(--bg-hover);font:600 1.25rem var(--display);color:var(--text-sub);transition:background .15s,color .15s,box-shadow .15s}
.letters li.mv::after{content:'';position:absolute;bottom:6px;width:14px;height:3px;border-radius:2px;background:var(--purple)}
.letters li.done{color:var(--text-main)}
.letters li.now{background:var(--grad);color:#fff;box-shadow:var(--shadow-teal)}
.letters li.now.mv::after{background:#fff}

/* ── Ajustes ──────────────────────────────────────────── */
.settings{margin-top:20px;padding:16px 24px}
.settings summary{cursor:pointer;font-weight:600;color:var(--text-sub)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 28px;margin:16px 0 4px}
.settings label{display:grid;gap:8px;font-size:.9rem}
.settings label.check{display:flex;align-items:center;gap:10px}
.settings output{color:var(--teal);font-weight:700;margin-left:6px}
input[type=range]{accent-color:var(--teal);width:100%}
input[type=checkbox]{accent-color:var(--teal);width:18px;height:18px}

.foot{max-width:1180px;margin:0 auto;padding:4px clamp(16px,4vw,40px) 40px;color:var(--text-sub);font-size:.82rem}
.foot p{margin:0;max-width:72ch}

@media (max-width:820px){
  .stage{grid-template-columns:1fr}
  .cam:not(.on){aspect-ratio:auto}
  .cam:not(.on) .cam-idle{position:relative}
  .reading{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;padding:16px;gap:16px}
  .glyph-wrap{width:120px}
  .glyph{font-size:4.2rem}
  .reading .mode{text-align:left;flex:1 1 140px}
  .top3{flex:1 1 100%}
  .status{display:none}
  .brand-sub{display:none}
  .theme-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}