/* Estudio USS · estilos · © Braulio Sielpe */
:root {
  --bg: #f6f7fb; --card: #ffffff; --txt: #1b2030; --muted: #60697e; --borde: #dfe3ee; --acento: #3b5bdb; --acento-txt: #fff;
  --ok: #1f9d55; --mal: #d9363e; --aviso: #c77700; --sombra: 0 1px 2px rgba(20,30,60,.06), 0 6px 20px rgba(20,30,60,.06);
  --c1: #2563eb; --c2: #ea580c; --c3: #16a34a; --c4: #9333ea; --c5: #db2777;
  --c1-bg: rgba(37,99,235,.14); --c2-bg: rgba(234,88,12,.14); --c3-bg: rgba(22,163,74,.14); --c4-bg: rgba(147,51,234,.14); --c5-bg: rgba(219,39,119,.14);
  --nuevo: rgba(250,204,21,.55); --radio: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --bg: #0f1320; --card: #181d2e; --txt: #e8ebf5; --muted: #98a2bd; --borde: #2a3150; --acento: #7c93ff; --acento-txt: #0f1320;
  --ok: #4ade80; --mal: #ff6b73; --aviso: #fbbf24; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --c1: #6ea8ff; --c2: #ffa05a; --c3: #5ee08a; --c4: #c79bff; --c5: #ff7eb6; --c1-bg: rgba(110,168,255,.2); --c2-bg: rgba(255,160,90,.2); --c3-bg: rgba(94,224,138,.2); --c4-bg: rgba(199,155,255,.2); --c5-bg: rgba(255,126,182,.2); --nuevo: rgba(250,204,21,.4); } }
:root[data-tema="oscuro"] { --bg: #0f1320; --card: #181d2e; --txt: #e8ebf5; --muted: #98a2bd; --borde: #2a3150; --acento: #7c93ff; --acento-txt: #0f1320;
  --ok: #4ade80; --mal: #ff6b73; --aviso: #fbbf24; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --c1: #6ea8ff; --c2: #ffa05a; --c3: #5ee08a; --c4: #c79bff; --c5: #ff7eb6; --c1-bg: rgba(110,168,255,.2); --c2-bg: rgba(255,160,90,.2); --c3-bg: rgba(94,224,138,.2); --c4-bg: rgba(199,155,255,.2); --c5-bg: rgba(255,126,182,.2); --nuevo: rgba(250,204,21,.4); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--acento); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* ── barra superior ── */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.top .logo { font-weight: 800; letter-spacing: -.3px; font-size: 1.05rem; } .top .logo span { color: var(--acento); }
.top .mig { flex: 1; min-width: 0; color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .mig a { color: var(--muted); } .top .mig b { color: var(--txt); font-weight: 600; }
.btn-i { border: 1px solid var(--borde); background: var(--card); border-radius: 10px; padding: 6px 10px; line-height: 1; }
main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 90px; }

/* ── botones y etiquetas ── */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); background: var(--card); border-radius: 12px; padding: 9px 14px; font-weight: 600; }
.btn:hover { border-color: var(--acento); }
.btn.pri { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); }
.btn.peq { padding: 5px 10px; font-size: .86rem; border-radius: 9px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; border: 1.5px solid var(--txt); }
.tag.ancla, .tag.esencial { background: var(--txt); color: var(--bg); }
.tag.espejo { background: transparent; } .tag.util { background: var(--borde); border-color: var(--borde); } .tag.bonus { border-style: dashed; }
.tag.Guiado { background: var(--ok); border-color: var(--ok); color: #fff; } .tag.Medio { background: var(--aviso); border-color: var(--aviso); color: #fff; } .tag.Solo { background: var(--mal); border-color: var(--mal); color: #fff; }
.muted { color: var(--muted); } .peq { font-size: .86rem; }
h1 { font-size: 1.7rem; letter-spacing: -.4px; margin: .2em 0 .3em; } h2 { font-size: 1.25rem; margin: 1.2em 0 .5em; } h3 { font-size: 1.05rem; margin: 1em 0 .4em; }

/* ── tarjetas y cuadrículas ── */
.card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card.link { display: block; color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; } .card.link:hover { transform: translateY(-2px); border-color: var(--acento); text-decoration: none; }
.barra { height: 8px; border-radius: 8px; background: var(--borde); overflow: hidden; } .barra > i { display: block; height: 100%; background: var(--acento); border-radius: 8px; transition: width .4s; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sep { flex: 1; }

/* ── acceso ── */
.login { max-width: 380px; margin: 12vh auto 0; text-align: center; }
.login input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--bg); text-align: center; letter-spacing: 3px; font-size: 1.1rem; margin: 12px 0; }
.err { color: var(--mal); font-size: .92rem; min-height: 1.4em; }

/* ── pestañas ── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 14px 0; overflow-x: auto; }
.tabs a { padding: 9px 14px; border-radius: 10px 10px 0 0; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabs a.on { color: var(--txt); background: var(--card); border: 1px solid var(--borde); border-bottom-color: var(--card); margin-bottom: -1px; text-decoration: none; }

/* ── distribución con panel de fórmulas ── */
.conpanel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.panel { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
.panel h3 { margin: 0 0 8px; font-size: .8rem; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.fcard { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); transition: all .25s; opacity: .85; }
.fcard .fn { font-size: .78rem; font-weight: 700; color: var(--muted); } .fcard .fc { font-size: .8rem; color: var(--muted); }
.fcard .katex-display { margin: .3em 0; } .fcard .katex { font-size: 1em; }
.fcard.on { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); opacity: 1; transform: scale(1.02); }
.fab { display: none; }
@media (max-width: 880px) {
  .conpanel { grid-template-columns: 1fr; }
  .panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 55vh; z-index: 30; border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .25s; background: var(--bg); padding: 14px; border-top: 1px solid var(--borde); box-shadow: 0 -10px 30px rgba(0,0,0,.25); }
  .panel.abierto { transform: none; }
  .fab { display: inline-flex; position: fixed; right: 14px; bottom: 16px; z-index: 31; box-shadow: var(--sombra); }
}

/* ── contenido de resumen ── */
.big { font-size: 1.25rem; font-weight: 700; margin: .2em 0 .6em; }
.esen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.esen .tt { grid-column: 1 / -1; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.esen .n0 { width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: var(--acento-txt); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.esen .el { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: var(--muted); }
.esen .truco { background: color-mix(in srgb, var(--acento) 10%, transparent); border-left: 3px solid var(--acento); padding: 4px 10px; border-radius: 0 8px 8px 0; }
@media (max-width: 640px) { .esen { grid-template-columns: 1fr; } }
table.cmp { width: 100%; border-collapse: collapse; font-size: .92rem; } table.cmp th, table.cmp td { border: 1px solid var(--borde); padding: 7px 10px; vertical-align: top; text-align: left; }
table.cmp th.ancla { background: var(--txt); color: var(--bg); } table.cmp td.l { width: 120px; font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; }
.mal { color: var(--mal); } .bien { color: var(--ok); font-weight: 600; }
.scroll-x { overflow-x: auto; }
table.sym { width: 100%; border-collapse: collapse; font-size: .92rem; } table.sym td { border-bottom: 1px dotted var(--borde); padding: 4px 6px; }
/* clases del motor del PDF que aparecen dentro del texto de los apuntes */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .85em; line-height: 1.05; margin: 0 2px; } .frac .fn { border-bottom: 1px solid currentColor; padding: 0 2px; font-weight: 400; color: inherit; font-size: inherit; }
sub.r { font-size: .6em; color: var(--muted); } .n { white-space: nowrap; }
.paso-txt { border-left: 3px solid var(--borde); padding: 2px 12px; margin: 8px 0; } .paso-txt .res { background: var(--bg); border-radius: 8px; padding: 4px 10px; margin-top: 3px; }
details.det { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 14px; margin: 8px 0; background: var(--card); } details.det summary { cursor: pointer; font-weight: 600; }

/* ════ ANIMACIÓN: ESCENARIO ════ */
.player .head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.puntos { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; } .puntos button { border: 1px solid var(--borde); background: var(--card); width: 32px; height: 32px; border-radius: 50%; font-weight: 700; } .puntos button.on { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); } .puntos button.hecho { border-color: var(--ok); color: var(--ok); }
.stage { display: grid; background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 16px; min-height: 150px; place-items: center; box-shadow: var(--sombra); overflow-x: auto; }
.stage .layer { grid-area: 1 / 1; opacity: 0; transition: opacity 1.5s ease; max-width: 100%; text-align: center; }
.stage .layer.on { opacity: 1; }
.stage.scrub .layer { transition: none; }
.stage .katex-display { margin: 0; } .stage .katex { font-size: 1.55em; }
.katex .c1 { color: var(--c1); background: var(--c1-bg); border-radius: 5px; padding: 0 2px; box-shadow: 0 0 0 2px var(--c1-bg); }
.katex .c2 { color: var(--c2); background: var(--c2-bg); border-radius: 5px; padding: 0 2px; box-shadow: 0 0 0 2px var(--c2-bg); }
.katex .c3 { color: var(--c3); background: var(--c3-bg); border-radius: 5px; padding: 0 2px; box-shadow: 0 0 0 2px var(--c3-bg); }
.katex .c4 { color: var(--c4); background: var(--c4-bg); border-radius: 5px; padding: 0 2px; box-shadow: 0 0 0 2px var(--c4-bg); }
.katex .c5 { color: var(--c5); background: var(--c5-bg); border-radius: 5px; padding: 0 2px; box-shadow: 0 0 0 2px var(--c5-bg); }
.stage.f2 .la .c1, .stage.f2 .la .c2, .stage.f2 .la .c3, .stage.f2 .la .c4, .stage.f2 .la .c5 { animation: latido 1.2s ease-in-out 2; }
@keyframes latido { 50% { transform: translateY(-3px) scale(1.12); } }
.stage.f3 .lb .nuevo { animation: brilla 2.2s ease-out 1.1s 1 both; border-radius: 6px; }
@keyframes brilla { 0% { background: transparent; } 30% { background: var(--nuevo); box-shadow: 0 0 0 4px var(--nuevo); } 100% { background: transparent; box-shadow: none; } }
.regla { margin-top: 14px; opacity: 0; transform: translateY(8px); transition: all .5s; pointer-events: none; height: 0; overflow: hidden; }
.regla.on { opacity: 1; transform: none; height: auto; overflow: visible; }
.regla .nm { font-size: .78rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; color: var(--muted); }
.regla .rt { text-align: center; overflow-x: auto; } .regla .rd { opacity: 0; transition: opacity 1.1s ease .15s; } .regla.der .rd { opacity: 1; }
.regla .katex { font-size: 1.35em; }
.sust { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; min-height: 0; opacity: 0; transition: opacity .6s; } .sust.on { opacity: 1; }
.chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 3px 12px; border: 1.5px solid; font-size: .95rem; background: var(--card); }
.chip.c1 { border-color: var(--c1); } .chip.c2 { border-color: var(--c2); } .chip.c3 { border-color: var(--c3); } .chip.c4 { border-color: var(--c4); } .chip.c5 { border-color: var(--c5); }
.chip .ar { color: var(--muted); }
.porque { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 9%, transparent); opacity: 0; transition: opacity .6s; min-height: 2.6em; } .porque.on { opacity: 1; }
.ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ctrl input[type=range] { flex: 1; min-width: 140px; accent-color: var(--acento); }
.fases { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); } .fases i { width: 26px; height: 5px; border-radius: 4px; background: var(--borde); display: inline-block; } .fases i.on { background: var(--acento); }

/* ════ PRÁCTICA ════ */
.enun { font-size: 1.15rem; }
.meta { border: 1.5px dashed var(--acento); border-radius: 12px; padding: 8px 14px; margin: 10px 0; background: color-mix(in srgb, var(--acento) 6%, transparent); } .meta b { color: var(--acento); }
.prow { display: grid; grid-template-columns: minmax(70px, 120px) minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--borde); } .prow:first-child { border-top: 0; }
.prow .lab { font-size: 1.05rem; } .prow .lab .katex { font-size: 1.1em; }
.prow input { width: 100%; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--borde); background: var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; }
.prow input:focus { outline: none; border-color: var(--acento); }
.prow.ok input { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--bg)); } .prow.mal input { border-color: var(--mal); }
.prow .fb { grid-column: 1 / -1; font-size: .92rem; } .prow .fb.ok { color: var(--ok); } .prow .fb.mal { color: var(--mal); } .prow .pista { color: var(--muted); font-size: .9rem; }
.prow.bloq { opacity: .45; pointer-events: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .chips button { border: 1px solid var(--borde); background: var(--card); border-radius: 999px; padding: 6px 14px; font-weight: 600; } .chips button.on { background: var(--acento); color: var(--acento-txt); border-color: var(--acento); }
.exito { border-left: 5px solid var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--card)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; } .stat { text-align: center; padding: 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--card); } .stat b { font-size: 1.5rem; display: block; }
.visor { width: 100%; height: 78vh; border: 1px solid var(--borde); border-radius: 12px; background: #888; }

/* ════ ADMINISTRADOR ════ */
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; } table.t th, table.t td { border-bottom: 1px solid var(--borde); padding: 8px 8px; text-align: left; vertical-align: middle; } table.t th { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.drop { border: 2px dashed var(--borde); border-radius: 14px; padding: 24px; text-align: center; color: var(--muted); } .drop.sobre { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, transparent); }
input.txt, select.txt { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borde); background: var(--bg); }

/* ── avisos ── */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--txt); color: var(--bg); padding: 9px 16px; border-radius: 12px; font-size: .92rem; box-shadow: var(--sombra); transition: opacity .4s; } .toast.fuera { opacity: 0; } .toast.mal { background: var(--mal); color: #fff; } .toast.ok { background: var(--ok); color: #fff; }

/* ── celular: barra de navegación del reproductor fija abajo y botón de fórmulas por encima ── */
@media (max-width: 880px) {
  .player .ctrl.nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--borde); z-index: 25; gap: 8px; }
  .player .ctrl.nav .btn { padding: 9px 12px; }
  .player .ctrl.nav .sep { display: none; }
  .player .extras { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 120px; }
  body.conplayer .fab { bottom: 78px; }
  .regla .katex { font-size: 1.1em; } .stage .katex { font-size: 1.3em; }
}
.player .extras { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── teclado de símbolos ── */
.teclado { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--bg); }
.teclado .tg { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.teclado .tgn { font-size: .66rem; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; color: var(--muted); width: 100%; }
.teclado button { min-width: 38px; padding: 6px 10px; border: 1px solid var(--borde); background: var(--card); border-radius: 9px; font-size: 1rem; line-height: 1.1; touch-action: manipulation; }
.teclado button:active { background: var(--acento); color: var(--acento-txt); }
.teclado summary { cursor: pointer; font-size: .8rem; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .teclado button { min-width: 42px; padding: 8px 10px; } }

.teclado summary.tsum { font-weight: 600; font-size: .92rem; color: var(--txt); margin: 0 0 2px; }
@media (max-width: 640px) {
  .prow { grid-template-columns: auto minmax(0, 1fr); }
  .prow .fila { grid-column: 1 / -1; }
  .prow input { font-size: 16px; }   /* evita el zoom automático al enfocar en iPhone */
}

.masej { grid-column: 1 / -1; font-size: .93rem; } .masej ul { margin: 4px 0 0 18px; padding: 0; } .masej li { margin: 3px 0; }

/* alternativas */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:6px 0}
.opt{font:inherit;text-align:center;padding:12px 8px;min-height:52px;border:1.5px solid var(--borde,#cbd5e1);border-radius:10px;background:var(--card,#fff);color:inherit;cursor:pointer;overflow-x:auto}
.opt:hover:not(:disabled){border-color:#408FC2}
.opt.sel{border-color:#408FC2;background:rgba(64,143,194,.14)}
.opt.acierto{border-color:#2e9d5b;background:rgba(46,157,91,.16)}
.opt.fallo{border-color:#c0392b;background:rgba(192,57,43,.12);opacity:.65}
.opt.pista-ok{border-color:#408FC2;box-shadow:0 0 0 3px rgba(64,143,194,.35)}
.opt:disabled:not(.acierto):not(.fallo){opacity:.55}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
@media (max-width:700px){.prow:has(.opts){grid-template-columns:1fr !important}.prow:has(.opts) .lab{margin-bottom:2px}}