:root{
  --bg:#f4f5f0; --bg-raised:#ffffff; --bg-sunk:#eceee6;
  --ink:#1c2226; --ink-soft:#4d565a; --ink-faint:#818b8a;
  --line:#dadfd3; --line-soft:#e6e9e0;
  --accent:#1c4d73; --accent-ink:#0f3450; --accent-soft:#e3ebf0;
  --gold:#8a5a24; --gold-soft:#f2e6d3;
  --good:#3f6b4a; --good-soft:#e5eee7;
  --danger:#9c4430; --danger-soft:#f4e5e0;
  --surface:#ffffff;--paper:#ffffff;--paper-soft:#f7f8f4;--warning:#8a5a24;
  --song-shell-bg:linear-gradient(155deg,#ffffff 0%,#f6f7fb 58%,#f2f5f8 100%);
  --song-panel:#ffffff;--song-panel-soft:#f5f7fb;--song-panel-alpha:rgba(255,255,255,.9);
  --song-border:#d8deea;--song-bar:rgba(244,245,240,.94);--song-teal:#0f766e;
  --song-hero-bg:radial-gradient(circle at 18% 30%,rgba(236,72,153,.16),transparent 34%),radial-gradient(circle at 84% 55%,rgba(13,148,136,.13),transparent 36%),#f5f3ff;
  --song-active-text:#10212c;--song-shadow:rgba(31,41,55,.16);
  /* Colores del "test principal" de Frasly (MODELO_PANTALLA.md): español y
     inglés, iguales que allí. Solo para el modo Práctica. */
  --tf-es:#1256b3; --tf-en:#1f7a4d;
  --radius:8px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14181a; --bg-raised:#1b2124; --bg-sunk:#101314;
    --ink:#e9ecec; --ink-soft:#b7c1c2; --ink-faint:#7c888a;
    --line:#333c3f; --line-soft:#262d2f;
    --accent:#7bb0da; --accent-ink:#cfe6f7; --accent-soft:#1e2f3c;
    --gold:#dba85f; --gold-soft:#332715;
    --good:#84bd92; --good-soft:#1c2c20;
    --danger:#e0967d; --danger-soft:#33221c;
    --surface:#1b2124;--paper:#1b2124;--paper-soft:#161b1e;--warning:#dba85f;
    --song-shell-bg:linear-gradient(155deg,#11182b 0%,#0b1020 58%,#10162a 100%);
    --song-panel:#11182a;--song-panel-soft:#080d1a;--song-panel-alpha:rgba(20,26,46,.82);
    --song-border:#29324e;--song-bar:rgba(11,16,32,.94);--song-teal:#5eead4;
    --song-hero-bg:radial-gradient(circle at 18% 30%,rgba(236,72,153,.26),transparent 34%),radial-gradient(circle at 84% 55%,rgba(45,212,191,.19),transparent 36%),#0d1325;
    --song-active-text:#ffffff;--song-shadow:rgba(4,8,20,.34);
    /* Mismo azul/verde que en claro no se leería bien sobre fondo oscuro:
       se usan los mismos tonos que ya prueba --accent/--good aquí. */
    --tf-es:#7bb0da; --tf-en:#84bd92;
  }
}

/* La elección manual gana siempre al tema del sistema. */
:root[data-theme="light"]{
  --bg:#f4f5f0;--bg-raised:#ffffff;--bg-sunk:#eceee6;--ink:#1c2226;--ink-soft:#4d565a;--ink-faint:#818b8a;
  --line:#dadfd3;--line-soft:#e6e9e0;--accent:#1c4d73;--accent-ink:#0f3450;--accent-soft:#e3ebf0;
  --gold:#8a5a24;--gold-soft:#f2e6d3;--good:#3f6b4a;--good-soft:#e5eee7;--danger:#9c4430;--danger-soft:#f4e5e0;
  --surface:#ffffff;--paper:#ffffff;--paper-soft:#f7f8f4;--warning:#8a5a24;
  --song-shell-bg:linear-gradient(155deg,#ffffff 0%,#f6f7fb 58%,#f2f5f8 100%);--song-panel:#ffffff;--song-panel-soft:#f5f7fb;--song-panel-alpha:rgba(255,255,255,.9);
  --song-border:#d8deea;--song-bar:rgba(244,245,240,.94);--song-teal:#0f766e;--song-hero-bg:radial-gradient(circle at 18% 30%,rgba(236,72,153,.16),transparent 34%),radial-gradient(circle at 84% 55%,rgba(13,148,136,.13),transparent 36%),#f5f3ff;--song-active-text:#10212c;--song-shadow:rgba(31,41,55,.16);
  --tf-es:#1256b3;--tf-en:#1f7a4d;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#14181a;--bg-raised:#1b2124;--bg-sunk:#101314;--ink:#e9ecec;--ink-soft:#b7c1c2;--ink-faint:#7c888a;
  --line:#333c3f;--line-soft:#262d2f;--accent:#7bb0da;--accent-ink:#cfe6f7;--accent-soft:#1e2f3c;
  --gold:#dba85f;--gold-soft:#332715;--good:#84bd92;--good-soft:#1c2c20;--danger:#e0967d;--danger-soft:#33221c;
  --surface:#1b2124;--paper:#1b2124;--paper-soft:#161b1e;--warning:#dba85f;
  --song-shell-bg:linear-gradient(155deg,#11182b 0%,#0b1020 58%,#10162a 100%);--song-panel:#11182a;--song-panel-soft:#080d1a;--song-panel-alpha:rgba(20,26,46,.82);
  --song-border:#29324e;--song-bar:rgba(11,16,32,.94);--song-teal:#5eead4;--song-hero-bg:radial-gradient(circle at 18% 30%,rgba(236,72,153,.26),transparent 34%),radial-gradient(circle at 84% 55%,rgba(45,212,191,.19),transparent 36%),#0d1325;--song-active-text:#ffffff;--song-shadow:rgba(4,8,20,.34);
  --tf-es:#7bb0da;--tf-en:#84bd92;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
button, input, select, textarea{font-family:inherit;}
button{background:none;border:none;cursor:pointer;padding:0;font:inherit;color:inherit;}

/* ---------- marca / cabecera común ---------- */
.brand{display:flex;align-items:baseline;gap:8px;}
.brand .mark{font-size:20px;}
.brand h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.01em;}
.app-version{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border:1px solid var(--song-teal);border-radius:999px;background:var(--accent-soft);color:var(--song-teal);font-size:9px;font-weight:900;letter-spacing:.08em}

/* ---------- pantalla de acceso ---------- */
.auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-screen[hidden]{display:none;}
.auth-card{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;
  padding:28px 26px 30px;width:100%;max-width:360px;
}
.auth-sub{font-size:13.5px;color:var(--ink-faint);margin:6px 0 20px;}
.auth-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.auth-tab{
  font-size:14px;font-weight:600;color:var(--ink-faint);background:none;border:none;
  padding:9px 4px;margin-right:18px;cursor:pointer;border-bottom:2px solid transparent;
}
.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.auth-error{
  font-size:13px;color:var(--danger);background:var(--danger-soft);border-radius:6px;
  padding:8px 10px;margin:12px 0 0;
}
.auth-ok{
  font-size:13px;color:#0f766e;background:rgba(45,212,191,.14);border-radius:6px;
  padding:8px 10px;margin:12px 0 0;
}
.auth-help{font-size:12.5px;color:var(--ink-faint);margin:7px 0 0;line-height:1.5;}
.auth-legal{font-size:11.5px;color:var(--ink-faint);margin:18px 0 0;text-align:center;line-height:1.5;}
.auth-legal a{color:var(--ink-faint);text-decoration:underline;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--ink-faint);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
button.auth-gratis{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg-raised);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;
}
button.auth-gratis:hover{background:var(--bg-sunk);}
button.auth-gratis:active{transform:scale(.98);}

/* Banner del modo gratis (con anuncios), editable desde el CRM (banner.json) */
#top-banner{
  margin:0;padding:9px 14px;background:var(--gold-soft);color:var(--gold);
  font-size:13px;text-align:center;border-bottom:1px solid var(--line-soft);line-height:1.45;
}
#top-banner-img{height:18px;width:18px;object-fit:contain;vertical-align:middle;
  margin-right:7px;border-radius:4px;}

/* ---------- formularios (compartido) ---------- */
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 0 5px;}
label:first-of-type{margin-top:0;}
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select{
  width:100%;font-size:14.5px;padding:9px 11px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
}
textarea{resize:vertical;min-height:52px;}
input:focus, textarea:focus, select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.required{color:var(--danger);}

button.primary{
  font-size:14.5px;font-weight:700;background:var(--accent);color:#fff;
  border:none;border-radius:8px;padding:11px 18px;cursor:pointer;
}
button.primary:disabled{opacity:.6;cursor:default;}
button.primary.full{width:100%;margin-top:20px;}
button.ghost{
  font-size:14.5px;font-weight:600;background:none;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:8px;padding:11px 16px;cursor:pointer;
}
button.ghost.full{width:100%;margin-top:14px;}

/* La pantalla de activación (4-sep-2026): "¿Tienes una clave?" ya no es lo
   primero que se ve, es un desplegable aparte -- ver activacion-screen. */
.activacion-clave-acordeon{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
.activacion-clave-acordeon summary{font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;list-style:none;}
.activacion-clave-acordeon summary:hover{color:var(--accent);}
.activacion-clave-acordeon[open] summary{margin-bottom:12px;}

.theme-toggle{
  position:fixed;right:18px;top:16px;z-index:40;min-height:36px;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg-raised);color:var(--ink);
  box-shadow:0 5px 18px rgba(0,0,0,.10);font-size:12px;font-weight:750;cursor:pointer;
}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--accent);outline:none}

/* ---------- Ayuda general y contextual ---------- */
.ayuda-general-btn{margin:12px 0 0;padding:8px 12px;border:1px solid var(--song-teal);border-radius:999px;background:var(--accent-soft);color:var(--song-teal);font-size:11.5px;font-weight:850;cursor:pointer}.ayuda-general-btn:hover,.ayuda-general-btn:focus-visible{outline:2px solid var(--song-teal);outline-offset:2px}
.ayuda-acceso{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:15px;align-items:center;margin:0 0 16px;padding:16px;border:1px solid var(--song-border);border-radius:16px;background:linear-gradient(135deg,var(--song-panel-soft),var(--accent-soft))}.ayuda-acceso-icono{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,var(--accent),var(--song-teal));color:#fff;font-size:23px;box-shadow:0 8px 22px var(--song-shadow)}.ayuda-acceso h2{margin:3px 0;font-size:18px}.ayuda-acceso p{margin:0;color:var(--ink-soft);font-size:12px;line-height:1.45}.ayuda-acceso-acciones{display:flex;gap:7px}.ayuda-acceso-acciones button{white-space:nowrap}
.ficha-ayuda-btn{flex:none;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--song-panel-alpha);color:var(--ink-soft);font-size:11px;font-weight:800;cursor:pointer}.ficha-ayuda-btn:hover,.ficha-ayuda-btn:focus-visible{border-color:var(--song-teal);color:var(--song-teal);outline:none}.ficha-ayuda-btn[hidden]{display:none}
.ayuda-dialog{box-sizing:border-box;width:min(720px,calc(100% - 28px));max-height:min(86vh,820px);padding:0;border:1px solid var(--song-border);border-radius:20px;overflow:auto;background:var(--bg-raised);color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.45)}.ayuda-dialog::backdrop{background:rgba(3,7,18,.72);backdrop-filter:blur(4px)}.ayuda-dialog[hidden]{display:none}.ayuda-dialog-cerrar{position:sticky;float:right;right:14px;top:12px;z-index:2;display:grid;place-items:center;width:35px;height:35px;margin:12px 12px -47px 0;border:1px solid var(--line);border-radius:50%;background:var(--bg-raised);color:var(--ink-soft);font-size:24px;cursor:pointer}.ayuda-dialog-cerrar:hover{border-color:var(--danger);color:var(--danger)}#ayuda-dialog-cuerpo{padding:27px}.ayuda-dialog-cab{display:flex;align-items:center;gap:13px;padding-right:42px}.ayuda-dialog-cab h2{margin:4px 0 0;font-size:clamp(21px,4vw,29px);line-height:1.12}.ayuda-dialog-icono{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px;background:linear-gradient(145deg,var(--accent),var(--song-teal));color:#fff;font-size:25px}.ayuda-dialog-intro{margin:17px 0;color:var(--ink-soft);font-size:14px;line-height:1.6}.ayuda-pasos{display:grid;gap:8px;margin:0;padding:0;list-style:none}.ayuda-pasos li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;padding:11px;border:1px solid var(--line-soft);border-radius:11px;background:var(--paper-soft)}.ayuda-pasos li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:900}.ayuda-pasos p{margin:3px 0;color:var(--ink-soft);font-size:13px;line-height:1.5}.ayuda-consejo{margin-top:14px;padding:13px 14px;border-left:4px solid var(--song-teal);border-radius:0 11px 11px 0;background:var(--accent-soft)}.ayuda-consejo strong{color:var(--song-teal);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.ayuda-consejo p{margin:4px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.45}
/* V55: guías completas, legibles y comprobables */
.ayuda-cambiar{display:grid;gap:7px;margin:0 0 16px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-soft);color:var(--ink-soft);font-size:12px;font-weight:800}.ayuda-cambiar select{width:100%;min-height:42px;padding:8px 38px 8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg-raised);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}.ayuda-objetivo,.ayuda-resultado{margin:14px 0;padding:15px 16px;border-radius:13px;background:var(--accent-soft);border:1px solid var(--line)}.ayuda-objetivo strong,.ayuda-resultado strong{display:block;margin-bottom:5px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.ayuda-objetivo p,.ayuda-resultado p{margin:0;color:var(--ink);font-size:14px;font-weight:650;line-height:1.55}.ayuda-bloque{margin:19px 0}.ayuda-bloque>h3{margin:0 0 10px;color:var(--ink);font-size:16px}.ayuda-bloque>ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.ayuda-bloque>ul li{position:relative;padding:9px 10px 9px 31px;border:1px solid var(--line-soft);border-radius:10px;background:var(--paper-soft);color:var(--ink-soft);font-size:13px;line-height:1.5}.ayuda-bloque>ul li::before{content:"✓";position:absolute;left:10px;top:9px;color:var(--song-teal);font-weight:900}.ayuda-pasos-detallados{gap:10px}.ayuda-pasos-detallados li{padding:13px 14px}.ayuda-pasos h4{margin:2px 0 4px;color:var(--ink);font-size:14px;line-height:1.35}.ayuda-pasos-detallados p{margin:4px 0}.ayuda-comprobacion{margin-top:9px!important;padding:8px 10px;border-radius:8px;background:var(--good-soft);color:var(--ink-soft)!important}.ayuda-comprobacion strong{color:var(--good)}.ayuda-resultado{border-color:var(--good);background:var(--good-soft)}.ayuda-resultado strong{color:var(--good)}.ayuda-fallos{display:grid;gap:7px}.ayuda-fallos>h3{margin-bottom:3px}.ayuda-fallos details{border:1px solid var(--line);border-radius:10px;background:var(--bg-raised);overflow:hidden}.ayuda-fallos summary{padding:11px 38px 11px 13px;color:var(--ink);font-size:13px;font-weight:750;cursor:pointer;list-style-position:inside}.ayuda-fallos details[open] summary{border-bottom:1px solid var(--line-soft);background:var(--paper-soft);color:var(--accent)}.ayuda-fallos details p{margin:0;padding:11px 13px;color:var(--ink-soft);font-size:13px;line-height:1.55}.ayuda-dialog-pie{position:sticky;bottom:-27px;margin:21px -27px -27px;padding:13px 27px;background:var(--bg-raised);border-top:1px solid var(--line);box-shadow:0 -8px 22px rgba(0,0,0,.06)}.ayuda-dialog-pie button{width:100%;min-height:43px}
@media(max-width:700px){.ayuda-acceso{grid-template-columns:auto 1fr}.ayuda-acceso-acciones{grid-column:1/-1}.ayuda-acceso-acciones button{flex:1}.ficha-ayuda-btn{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(max-width:480px){.ayuda-general-btn{width:100%}.ayuda-acceso{grid-template-columns:1fr;text-align:center}.ayuda-acceso-icono{margin:auto}.ayuda-acceso-acciones{flex-direction:column}.ayuda-dialog{width:calc(100% - 14px);max-height:92vh;border-radius:15px}#ayuda-dialog-cuerpo{padding:21px 16px}.ayuda-dialog-cab{align-items:flex-start}.ayuda-dialog-icono{width:43px;height:43px}.ayuda-pasos li{grid-template-columns:28px 1fr;padding:9px}.ficha-ayuda-btn{max-width:92px}.ficha-ayuda-btn{font-size:0}.ficha-ayuda-btn::after{content:"? Ayuda";font-size:11px}.ayuda-dialog-pie{bottom:-21px;margin:18px -16px -21px;padding:11px 16px}.ayuda-objetivo,.ayuda-resultado{padding:13px}.ayuda-pasos-detallados li{padding:11px 10px}.ayuda-cambiar{padding:11px}}

/* ---------- cabecera de la app ---------- */
header.top{max-width:640px;margin:0 auto;width:100%;padding:22px 18px 0;}
header.top .brand{margin-bottom:18px;}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);}
.tabs{overflow-x:auto;white-space:nowrap}
.selector-tipo-recurso{border:0;padding:0;margin:0 0 18px}.selector-tipo-recurso legend{font-weight:700;margin-bottom:9px}.selector-tipo-opciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.selector-tipo-opciones label{margin:0;cursor:pointer}.selector-tipo-opciones input{position:absolute;opacity:0;pointer-events:none}.selector-tipo-opciones span{display:flex;justify-content:center;align-items:center;gap:7px;padding:13px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.selector-tipo-opciones input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.biblioteca-titulo-filtrado{margin-bottom:18px}
.archivo-detectado{padding:8px 10px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--ink)}
.tab{
  font-size:13px;font-weight:600;color:var(--ink-faint);background:none;border:none;
  padding:10px 4px;margin-right:11px;cursor:pointer;border-bottom:2px solid transparent;
}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);}



.shell{max-width:640px;margin:0 auto;width:100%;padding:0 18px 100px;}
main{padding-top:20px;}

.search-box{
  width:100%;font-size:14.5px;padding:10px 13px;border-radius:8px;margin-top:18px;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink);
}
.search-box[hidden]{display:none;}
.search-box:focus{outline:2px solid var(--accent);outline-offset:1px;}
.search-box::-webkit-search-cancel-button{cursor:pointer;}

/* ---------- estados vacíos y grupos ---------- */
.empty{text-align:center;padding:48px 20px;color:var(--ink-faint);font-size:14px;}
.empty .big{font-size:28px;margin-bottom:8px;}

.group{margin-bottom:26px;}
.group-title{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--ink-faint);margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
.group-title .n{background:var(--line-soft);color:var(--ink-soft);border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;}
.group-title.dudas{color:var(--gold);}
.group-title.repasar{color:var(--accent);}
.group-title.olvidado{color:var(--ink-faint);}

.resumen-hoy{
  font-size:13px;color:var(--ink-faint);margin:0 0 22px;padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.materia-block{margin-bottom:22px;}
.materia-block h2{font-size:15px;margin:0 0 4px;font-weight:700;}
.cat-block{margin:10px 0 0;}
.cat-block h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 8px;font-weight:700;}
.heading-row{display:flex;align-items:center;gap:6px;}
.heading-row .icon-btn{font-size:12px;}

/* ---------- tarjeta de recurso ---------- */
.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;margin-bottom:8px;}
.card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.card-title{font-size:14.5px;font-weight:600;line-height:1.35;}
.card-title a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-faint);}
.card-title a:hover{border-bottom-style:solid;}
.card-meta{font-size:10.5px;color:var(--ink-faint);margin-top:2px;opacity:.7;letter-spacing:.01em}
.card-actions{display:flex;gap:2px;flex-shrink:0;}
.icon-btn{
  background:none;border:none;cursor:pointer;font-size:14px;line-height:1;
  padding:5px 6px;border-radius:6px;opacity:.55;
}
.icon-btn:hover{opacity:1;background:var(--bg-sunk);}
.card-note{font-size:13px;color:var(--ink-soft);margin-top:7px;line-height:1.4;background:var(--bg-sunk);border-radius:6px;padding:7px 10px;}

/* ---------- el semáforo: tres luces ---------- */
.estado-row{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap;}
.estado-pill{
  font-size:11.5px;font-weight:600;border-radius:20px;padding:5px 11px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-faint);
  display:inline-flex;align-items:center;gap:6px;
}
.estado-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.35;}
.estado-pill.is-active .dot{opacity:1;}
.estado-pill.rojo.is-active{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-soft);}
.estado-pill.ambar.is-active{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-soft);}
.estado-pill.verde.is-active{background:var(--good-soft);color:var(--good);border-color:var(--good-soft);}
.estado-pill:not(.is-active):hover{border-color:var(--ink-faint);}
.estado-pill:disabled{opacity:.5;cursor:default;}

/* ---------- las dudas dentro de una ficha ---------- */
.dudas-bloque{margin-top:11px;}
.dudas-cab{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--gold);margin-bottom:7px;
}
.duda{
  border-left:3px solid var(--gold);background:var(--bg-sunk);
  border-radius:0 6px 6px 0;padding:9px 11px;margin-bottom:7px;
}
.duda.cerrada{border-left-color:var(--good);opacity:.75;}
.duda-cab{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;}
.duda-texto{font-size:13.5px;line-height:1.42;color:var(--ink);flex:1;}
.duda-ancla{
  font-size:11.5px;color:var(--accent);margin-top:4px;
  font-variant-numeric:tabular-nums;cursor:default;
}
.duda-respuesta{
  font-size:13px;line-height:1.42;color:var(--ink-soft);margin-top:7px;
  padding-top:7px;border-top:1px solid var(--line-soft);
}
.duda-accion{
  font-size:11.5px;font-weight:700;background:none;border:none;cursor:pointer;
  color:var(--accent);padding:5px 0 0;
}
.duda-accion:hover{text-decoration:underline;}
.duda-accion[hidden]{display:none;}

.dudas-cerradas{margin-top:4px;}
.dudas-cerradas summary{
  font-size:11.5px;color:var(--ink-faint);cursor:pointer;padding:3px 0;font-weight:600;
}
.dudas-cerradas summary:hover{color:var(--ink-soft);}

.anotar-duda{
  font-size:12px;font-weight:600;background:none;cursor:pointer;
  border:1px dashed var(--line);border-radius:6px;
  color:var(--ink-soft);padding:6px 11px;margin-top:4px;
}
.anotar-duda:hover{border-color:var(--gold);color:var(--gold);border-style:solid;}
.anotar-duda[hidden]{display:none;}

/* ---------- escribir una duda o su respuesta ---------- */
.duda-form{margin-top:8px;}
.duda-form textarea{font-size:13.5px;min-height:44px;}
.duda-pista{font-size:11.5px;color:var(--ink-faint);margin:0 0 6px;line-height:1.4;}
.duda-form-acciones{display:flex;gap:7px;margin-top:7px;align-items:center;}
button.pequeno{font-size:12.5px;padding:7px 13px;}

/* ---------- la duda como tarjeta propia, en la pantalla Hoy ---------- */
.card-duda{border-left:3px solid var(--gold);}
.duda-titulo{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);margin-bottom:5px;}
.duda-desde{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
.ver-mas{
  font-size:12.5px;font-weight:600;background:none;border:none;cursor:pointer;
  color:var(--accent);padding:6px 0 0;
}
.ver-mas:hover{text-decoration:underline;}

.note-label{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--good);margin-bottom:3px;
}
.campo-pista{font-size:11.5px;color:var(--ink-faint);margin:5px 0 0;line-height:1.4;}
#campo-tipo[hidden]{display:none;}

/* ---------- aviso global (red de seguridad ante fallos no atrapados) ---------- */
.aviso-global{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,120%);
  max-width:min(420px,calc(100vw - 32px));z-index:999;
  background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger);
  border-radius:10px;padding:12px 18px;font-size:13.5px;font-weight:600;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .25s ease;
}
.aviso-global.visible{transform:translate(-50%,0);}

/* ---------- botón flotante y modal de añadir ---------- */
.fab{
  position:fixed;right:20px;bottom:22px;z-index:20;
  background:var(--accent);color:#fff;border:none;border-radius:999px;
  font-size:14px;font-weight:700;padding:14px 20px;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);display:flex;align-items:center;gap:7px;
}
.fab:hover{filter:brightness(1.08);}

.overlay{position:fixed;inset:0;background:rgba(10,14,15,.45);z-index:30;display:flex;align-items:flex-end;justify-content:center;}
.overlay[hidden]{display:none;}
@media (min-width:560px){ .overlay{align-items:center;} }

.sheet{background:var(--bg-raised);width:100%;max-width:480px;border-radius:14px 14px 0 0;padding:22px 20px 26px;max-height:88vh;overflow-y:auto;}
@media (min-width:560px){ .sheet{border-radius:14px;} }
.sheet h2{font-size:17px;margin:0 0 18px;}

.new-field{margin-top:6px;}
.new-field[hidden]{display:none;}

.sheet-actions{display:flex;gap:10px;margin-top:22px;}
.sheet-actions button.primary{flex:1;}

@media (max-width:480px){
  header.top .brand{flex-wrap:wrap;}
}

/* ==========================================================================
   La ficha abierta y el visor
   ========================================================================== */

.ficha{max-width:640px;margin:0 auto;width:100%;padding:0 18px 110px;}
.ficha[hidden]{display:none;}

.ficha-barra{
  display:flex;align-items:center;gap:10px;
  padding:14px 0 12px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:5;
}
.ficha-atras{
  font-size:13.5px;font-weight:700;background:none;border:none;cursor:pointer;
  color:var(--accent);padding:6px 2px 6px 0;flex-shrink:0;
}
.ficha-atras:hover{text-decoration:underline;}
.ficha-titulo{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.ficha-fuera{
  font-size:12px;font-weight:600;color:var(--ink-faint);text-decoration:none;
  flex-shrink:0;padding:6px 0;
}
.ficha-fuera:hover{color:var(--accent);}
.ficha-fuera[hidden]{display:none;}

/* El reproductor. Proporción 16:9 sostenida por el relleno, que funciona
   en navegadores viejos igual que aspect-ratio. */
.visor-hueco{position:relative;width:100%;background:var(--bg-sunk);border-radius:8px;overflow:hidden;}
.visor-hueco:empty{display:none;}
.visor-marco{position:relative;width:100%;padding-top:56.25%;}
.visor-marco > div, .visor-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.visor-marco.visor-plataforma{padding-top:0;min-height:152px;overflow:hidden;border-radius:12px;background:var(--bg-raised)}
.visor-marco.visor-plataforma iframe,.visor-plataforma-frame{position:static;display:block;width:100%;height:152px;min-height:152px;border:0}
.visor-marco.visor-plataforma.soundcloud,.visor-marco.visor-plataforma.soundcloud iframe{height:166px;min-height:166px}
.visor-hueco audio{width:100%;display:block;padding:14px;}
/* Un audio no es 16:9. La clase solo-audio ya se ponia desde visor.js y no
   tenia regla, asi que un mp3 abria un rectangulo negro vacio de media
   pantalla con el reproductor perdido dentro. Con una cancion en mp3, que es
   el caso donde la letra cuadra sin desfases, eso se ve todos los dias. */
.visor-marco.solo-audio{padding-top:0;}
.visor-marco.solo-audio>.audio-extras{position:static;inset:auto;width:auto;height:auto;display:flex;justify-content:flex-end;gap:7px;padding:0 14px 12px;}
.audio-extras button{min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink-soft);font-size:11px;font-weight:700;cursor:pointer;}
.audio-extras button:hover,.audio-extras button:focus-visible{border-color:var(--accent);outline:none;}.audio-extras button.is-active{background:var(--gold-soft);border-color:var(--gold);color:var(--gold);}
.visor-hueco video{width:100%;display:block;background:#000;}

/* La barra de marcas: dónde están tus dudas dentro del material. */
.visor-barra{margin-top:10px;}
.visor-barra[hidden]{display:none;}
.visor-barra-titulo{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-faint);margin-bottom:6px;
}
.visor-pista{
  position:relative;height:22px;background:var(--bg-sunk);
  border-radius:4px;border:1px solid var(--line-soft);
}
.visor-relleno{
  position:absolute;top:0;left:0;bottom:0;width:0;
  background:var(--accent-soft);border-radius:4px 0 0 4px;
}
.visor-marca{
  position:absolute;top:2px;bottom:2px;width:4px;margin-left:-2px;
  background:var(--gold);border:none;border-radius:2px;cursor:pointer;padding:0;
}
.visor-marca:hover{background:var(--ink);transform:scaleX(1.6);}
.visor-marca.resuelta{background:var(--good);opacity:.5;}
.visor-marca:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.visor-aviso{
  background:var(--bg-sunk);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}
.visor-aviso[hidden]{display:none;}
.visor-aviso a{color:var(--accent);font-weight:600;}

.visor-cuerpo:empty{display:none;}
.ficha-cuerpo{padding-top:16px;}

/* El botón de ver dentro de la app, en la tarjeta. El título de la tarjeta
   sigue siendo un enlace normal: a veces se quiere abrir fuera, para verlo a
   otra velocidad o con subtítulos. */
.card-ver{
  font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-soft);border-radius:20px;padding:5px 12px;
  cursor:pointer;margin-top:9px;
}
.card-ver:hover{filter:brightness(.96);}

/* "Volver al 4:32": el botón que justifica toda la pantalla. Con tamaño de
   dedo, no de enlace de 11 píxeles pegado al icono de borrar. */
.volver-al-minuto{
  font-size:12.5px;font-weight:700;background:var(--accent-soft);color:var(--accent);
  border:none;border-radius:18px;padding:9px 14px;cursor:pointer;
  margin-top:8px;min-height:38px;display:inline-flex;align-items:center;gap:6px;
}
.volver-al-minuto:hover{filter:brightness(.96);}

/* El botón flotante lleva display:flex por clase, y eso le gana al atributo
   hidden del navegador. Sin esta regla se queda flotando sobre el vídeo. */
.fab[hidden]{display:none;}

/* ==========================================================================
   La letra de una canción, dentro de #visor-cuerpo.
   Solo con los tokens de arriba: en claro y en oscuro se resuelve solo.
   ========================================================================== */

.letra{margin-top:12px;}

.letra-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;}
.letra-vistas{display:flex;gap:4px;}
.letra-vista{
  font-size:11.5px;font-weight:600;border-radius:20px;padding:6px 11px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-faint);
}
.letra-vista.is-active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);}
.letra-vista:not(.is-active):hover{border-color:var(--ink-faint);}
.letra-idioma{width:auto;min-width:112px;padding:7px 9px;font-size:12px;}
.letra-tapar{
  font-size:11.5px;font-weight:700;border-radius:20px;padding:6px 12px;cursor:pointer;
  border:1px dashed var(--line);background:none;color:var(--ink-soft);margin-left:auto;
}
.letra-tapar.is-active{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-soft);border-style:solid;}

.letra-aviso{
  font-size:12px;line-height:1.45;color:var(--ink-soft);background:var(--bg-sunk);
  border-radius:6px;padding:8px 10px;margin:0 0 8px;
}
.letra-aviso[hidden]{display:none;}

/* La cola de oído y el bucle: dos barras finas, cada una solo cuando dice algo. */
.letra-cola, .letra-bucle{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:12.5px;
}
.letra-cola[hidden], .letra-bucle[hidden]{display:none;}
.letra-cola{background:var(--gold-soft);color:var(--gold);}
.letra-bucle{background:var(--accent-soft);color:var(--accent);}
.letra-cola-texto, .letra-bucle-texto{font-weight:700;flex:1;min-width:140px;}
.letra-cola-boton, .letra-bucle-soltar{
  font-size:11.5px;font-weight:700;border:none;border-radius:16px;cursor:pointer;
  padding:7px 12px;min-height:34px;background:var(--bg-raised);color:inherit;
}
.letra-cola-boton.ghost{background:none;text-decoration:underline;}

/* ---------- la lista de versos ----------
   position:relative es OBLIGATORIO y no es decoración: offsetTop se mide contra
   el primer antepasado posicionado, así que sin esto la cuenta de centrar el
   verso saldría desviada por toda la altura del reproductor.
   El alto lo pone letra.js en PÍXELES: en vh, el teclado del móvil lo cambiaría
   justo al empezar a escribir. */
.letra-lista{
  position:relative;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line-soft);border-radius:8px;background:var(--bg-raised);
  padding:6px 4px;
}
.letra-idiomas-iniciales{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.letra-idiomas-flecha{font-size:12px;color:var(--ink-faint)}
.letra-acciones-iniciales{justify-content:center}.letra-acciones-iniciales .letra-traer-boton{margin:0}
.letra-acciones-iniciales .primary,.letra-acciones-iniciales .letra-traer-boton{min-width:170px;min-height:46px}
.letra-instruccion-importante{max-width:680px;margin:10px auto 0;padding:10px 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;line-height:1.5}
.letra-paso-titulo{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}.letra-como-funciona{max-width:680px;margin:10px auto 14px;text-align:left;border:1px solid var(--line);border-radius:9px;padding:11px 14px;background:var(--bg-raised)}
.letra-como-funciona ol{margin:0;padding-left:23px;font-size:13px;line-height:1.7}.letra-limite{margin:9px 0 0;padding:9px 11px;border-radius:7px;background:var(--gold-soft);color:var(--ink);font-size:12.5px;line-height:1.45}
.letra-guia-sync{border:1px solid var(--accent);background:var(--accent-soft);border-radius:10px;padding:12px 14px;margin:10px 0;color:var(--accent-ink)}
.letra-guia-titulo{display:block;margin-bottom:5px}.letra-guia-texto,.letra-guia-nota{font-size:12.5px;line-height:1.45;margin:5px 0}.letra-guia-pasos{font-size:12.5px;margin:8px 0;padding-left:22px}.letra-guia-nota{color:var(--ink-soft)}
.letra-retardo{display:flex!important;align-items:center;gap:7px;flex-wrap:wrap;margin:9px 0!important;font-size:12px!important;font-weight:400!important;color:var(--ink-soft)}
.letra-retardo input{width:86px!important;margin:0!important;padding:6px 8px!important}
.letra-recalibrar{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin:7px 0}.letra-recalibrar button{color:var(--accent);border-color:var(--accent-soft)}
.verso-tiempo-editor{display:flex;align-items:end;gap:6px;flex-wrap:wrap;width:100%;padding-top:6px}.verso-tiempo-editor input{width:9em}

.verso{border-radius:6px;padding:2px 4px;margin-bottom:1px;}
.verso-linea{
  display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;
  background:none;border:none;cursor:pointer;padding:7px 6px;border-radius:6px;
  font-size:14.5px;line-height:1.4;color:var(--ink);font-family:inherit;
}
.verso-linea:hover{background:var(--bg-sunk);}
.verso-num{
  font-size:10.5px;color:var(--ink-faint);min-width:20px;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.verso-ingles{flex:1;}
.verso-tapa{display:none;flex:1;color:var(--ink-faint);letter-spacing:.06em;}

/* El verso que suena. En cada cambio de verso solo cambian dos nodos: medido,
   ensuciar los 200 cuesta 13,40 ms de recálculo de estilo y estos dos, 0,10 ms. */
.verso.suena{background:var(--accent-soft);}
.verso.suena .verso-linea{color:var(--accent-ink);font-weight:600;}
.verso.abierto{background:var(--bg-sunk);}
.verso.en-bucle{box-shadow:inset 3px 0 0 var(--accent);}
.verso.no-lo-oigo{box-shadow:inset 3px 0 0 var(--gold);}
.verso.no-lo-oigo .verso-num{color:var(--gold);font-weight:700;}
.verso.guardado{background:var(--good-soft);}
.verso.fallo{background:var(--danger-soft);}

.verso-duda{
  font-size:10.5px;font-weight:700;color:var(--gold);background:var(--gold-soft);
  border-radius:10px;padding:1px 7px;flex-shrink:0;align-self:center;
}
.verso-duda.resuelta{color:var(--good);background:var(--good-soft);}

/* Tapada: se ve cuántas palabras hay, y nada más. */
.letra.tapada .verso:not(.descubierto) .verso-ingles{display:none;}
.letra.tapada .verso:not(.descubierto) .verso-tapa{display:block;}

/* ---------- tu traducción ---------- */
.verso-tuyo{padding:0 6px 4px 34px;}
.verso-tuyo-texto{
  font-size:13.5px;line-height:1.4;color:var(--ink-soft);cursor:text;
  padding:3px 0;border-bottom:1px dotted transparent;
}
.verso-tuyo-texto:hover{border-bottom-color:var(--line);}
.verso-tuyo-texto.vacio{color:var(--ink-faint);font-style:italic;opacity:.75;}
.verso-auto{color:var(--ink);font-size:13.5px;line-height:1.45;margin-bottom:3px;}
.verso-auto::before{content:"Auto · ";font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.verso-editor{font-size:13.5px;min-height:40px;width:100%;}
.verso-pista{font-size:11px;color:var(--ink-faint);margin:4px 0 0;line-height:1.4;}
.verso-repe{
  font-size:11.5px;color:var(--ink-soft);margin-top:6px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}

.verso-mandos{display:flex;flex-wrap:wrap;gap:6px;padding:4px 6px 8px 34px;}
.verso-boton{
  font-size:11.5px;font-weight:600;border-radius:16px;padding:7px 12px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-raised);color:var(--ink-soft);
  min-height:34px;
}
.verso-boton:hover{border-color:var(--ink-faint);color:var(--ink);}
.verso-boton.bucle{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft);}
.verso-boton.oido.is-active{color:var(--gold);border-color:var(--gold-soft);background:var(--gold-soft);}
.verso-boton.duda{color:var(--gold);border-style:dashed;}

/* En "Solo original" desaparece la traducción. En "Solo traducción" desaparece el
   original, MENOS en los versos que todavía no has traducido, que se quedan en
   gris: un hueco en blanco no enseña nada, y aquí nada se apaga. */
.letra[data-vista="ingles"] .verso-tuyo{display:none;}
.letra[data-vista="tuyo"] .verso.tiene-tuyo .verso-ingles{display:none;}
.letra[data-vista="tuyo"] .verso:not(.tiene-tuyo) .verso-ingles{color:var(--ink-faint);}
.letra[data-vista="tuyo"] .verso-tuyo{padding-top:0;}

/* ---------- el pie: seguir la letra, ajustes, lo que se quedó suelto ---------- */
.letra-pie{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.letra-seguir{
  align-self:flex-start;font-size:11.5px;font-weight:700;cursor:pointer;
  border:none;border-radius:16px;padding:8px 14px;min-height:34px;
  background:var(--accent-soft);color:var(--accent);
}
.letra-seguir[hidden]{display:none;}
.letra-ajustes summary, .letra-sueltos summary{
  font-size:11.5px;color:var(--ink-faint);cursor:pointer;padding:3px 0;font-weight:600;
}
.letra-ajustes summary:hover, .letra-sueltos summary:hover{color:var(--ink-soft);}
.letra-ajustes-dentro{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px;align-items:flex-start;}
.letra-offset{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.letra-offset-etiqueta{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-faint);}
.letra-offset input{width:130px;font-variant-numeric:tabular-nums;}

.letra-suelto{
  border-left:3px solid var(--line);background:var(--bg-sunk);
  border-radius:0 6px 6px 0;padding:8px 10px;margin-bottom:6px;
}
.letra-suelto-ingles{font-size:13px;color:var(--ink);}
.letra-suelto-tuyo{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.letra-suelto-marca{font-size:11px;color:var(--gold);margin-top:3px;}

/* Guía permanente: una intención y un siguiente paso, sin perder las herramientas. */
.centro-guia{margin:14px 0 16px;padding:16px;border:1px solid var(--song-border);border-radius:16px;background:var(--song-panel-soft);}
.centro-guia-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.centro-guia-cab h3{margin:2px 0 0;font-size:18px;letter-spacing:-.01em;}
.centro-guia-kicker{color:var(--song-teal);font-size:10px;font-weight:850;letter-spacing:.12em;}
.centro-autoguardado{flex:none;padding:5px 9px;border-radius:999px;background:var(--good-soft);color:var(--good);font-size:10.5px;font-weight:750;}
.centro-modos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.centro-modo{display:flex;align-items:center;gap:9px;min-width:0;min-height:58px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;}
.centro-modo:hover,.centro-modo:focus-visible{border-color:var(--accent);outline:none;}
.centro-modo.is-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);}
.centro-modo-icono{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--bg-sunk);color:var(--accent);font-weight:850;}
.centro-modo-textos{display:flex;flex-direction:column;min-width:0;}.centro-modo-textos strong{font-size:12.5px;}.centro-modo-textos small{margin-top:2px;color:var(--ink-faint);font-size:10px;line-height:1.25;}
.centro-siguiente{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:11px 12px;border-radius:12px;background:var(--paper);border-left:4px solid var(--song-teal);}
.centro-siguiente strong{font-size:11px;color:var(--song-teal);}.centro-siguiente p{margin:3px 0 0;color:var(--ink-soft);font-size:12px;line-height:1.4;}
.centro-siguiente-icono{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:900;}.centro-siguiente p{flex:1;margin:0;}
.centro-accion{flex:none;max-width:240px;min-height:40px;padding:8px 13px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;cursor:pointer;}
.centro-accion:hover,.centro-accion:focus-visible{filter:brightness(1.08);outline:2px solid var(--accent);outline-offset:2px;}

/* Reproductor, extracción y lista de frases dentro de la propia canción. */
.frases-panel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.frases-cab{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.frases-cab h3{font-size:17px;margin:0;}
.frases-cuenta{font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent);padding:2px 7px;border-radius:999px;}
.frases-reproductor{margin:14px 0;padding:16px;border:1px solid var(--song-border);border-radius:16px;background:linear-gradient(135deg,var(--song-panel-soft),var(--song-panel));box-shadow:0 10px 28px var(--song-shadow);}
.frases-reproductor-cab{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.frases-reproductor-icono{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-size:23px;font-weight:800;}
.frases-reproductor-textos{display:flex;flex-direction:column;min-width:0;gap:2px;}
.frases-reproductor-textos strong{font-size:15px;}
.frases-reproductor-textos span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-faint);font-size:12px;}
.frases-progreso{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:13px;}
.frases-progreso input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer;}
.frases-tiempo{min-width:82px;text-align:right;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums;}
.frases-reproductor-botones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.frases-control,.frases-accion{min-width:0;min-height:42px;white-space:normal;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:8px 9px;font-size:12px;font-weight:720;cursor:pointer;}
.frases-control:hover,.frases-control:focus-visible,.frases-accion:hover,.frases-accion:focus-visible{border-color:var(--accent);outline:none;}
.frases-control.principal,.frases-accion.principal{background:var(--accent);border-color:var(--accent);color:#fff;}
.frases-control.principal.is-playing{background:var(--good);border-color:var(--good);}
.frases-control.is-active,.frase-audio.is-active{background:var(--gold-soft);border-color:var(--gold);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
.frases-descargar{display:inline-block;margin-top:12px;color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;}
.frases-descargar:hover{text-decoration:underline;}
.frases-sin-audio{margin:11px 0 0;padding:9px 10px;border-radius:8px;background:var(--danger-soft);color:var(--danger);font-size:12px;}
.frases-acciones-globales{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--paper-soft);}
.frases-acciones-globales>strong{display:block;margin-bottom:10px;font-size:13px;}
.frases-acciones-botones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;}
.frases-ayuda{margin:9px 0 0;color:var(--ink-faint);font-size:11.5px;line-height:1.45;}
.frases-subtitulo{margin:18px 0 9px;font-size:14px;}
.cuaderno-panel{margin:16px 0;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--paper);}
.cuaderno-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cuaderno-cab h4{margin:0;font-size:16px;}.cuaderno-cab p{margin:3px 0 0;color:var(--ink-faint);font-size:11.5px;}
.cuaderno-nuevo,.cuaderno-descargar,.cuaderno-guardar{min-height:38px;border:0;border-radius:9px;background:var(--accent);color:#fff;padding:8px 12px;font-size:11.5px;font-weight:800;cursor:pointer;}
.cuaderno-tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 0 8px;scrollbar-width:thin;}
.cuaderno-tab{flex:none;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper-soft);color:var(--ink-soft);font-size:11px;font-weight:700;cursor:pointer;}
.cuaderno-tab.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.cuaderno-formulario{margin:4px 0 10px;border:1px dashed var(--line);border-radius:10px;padding:9px 10px;}
.cuaderno-formulario summary{cursor:pointer;color:var(--ink-soft);font-size:11.5px;font-weight:700;}
.cuaderno-form-grid{display:grid;grid-template-columns:150px 1.2fr 1fr 1fr auto;gap:7px;align-items:center;margin-top:9px;}
.cuaderno-form-grid input,.cuaderno-form-grid select,.cuaderno-herramientas input,.cuaderno-herramientas select,.cuaderno-editor input{margin:0;min-width:0;font-size:12px;padding:8px 9px;}
.cuaderno-herramientas{display:grid;grid-template-columns:minmax(180px,1fr) 170px auto auto;gap:7px;align-items:center;margin:10px 0;}
.cuaderno-lista{display:flex;flex-direction:column;gap:7px;}
.cuaderno-vacio{margin:0;padding:15px;border:1px dashed var(--line);border-radius:9px;color:var(--ink-faint);font-size:12px;text-align:center;}
.cuaderno-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line-soft);border-radius:11px;background:var(--paper-soft);}
.cuaderno-tipo{padding:4px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.cuaderno-tipo.tipo-frase{background:var(--gold-soft);color:var(--gold);}.cuaderno-tipo.tipo-nota{background:var(--good-soft);color:var(--good);}
.cuaderno-contenido{min-width:0;}.cuaderno-contenido strong{display:block;overflow-wrap:anywhere;font-size:13px;}.cuaderno-contenido p{margin:3px 0 0;font-size:11.5px;line-height:1.35;}.cuaderno-traduccion{color:var(--ink-soft);}.cuaderno-nota{color:var(--ink-faint);font-style:italic;}
.cuaderno-item-acciones{display:flex;align-items:center;gap:5px;}.cuaderno-estado{width:auto;min-width:105px;margin:0;padding:6px 7px;font-size:10.5px;}
.cuaderno-mini{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink-soft);padding:6px 8px;font-size:10.5px;font-weight:700;cursor:pointer;}.cuaderno-mini.peligro{color:var(--danger);}
.cuaderno-editor{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:7px;padding-top:8px;border-top:1px solid var(--line);}
.frases-vacio{font-size:13px;color:var(--ink-soft);padding:16px;border:1px dashed var(--line);border-radius:10px;background:var(--paper-soft);}
.frases-voces{margin:16px 0 2px;padding-top:12px;border-top:1px solid var(--line-soft);}
.frases-voces summary{cursor:pointer;font-size:12.5px;color:var(--ink-soft);}
.frases-voces-dentro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;}
.frase-voz-label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-faint);}
.frase-voz-label select{width:100%;}
.frases-lista{display:flex;flex-direction:column;gap:12px;}
.frase-card{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--paper);}
.frase-original{font-size:15px;font-weight:650;line-height:1.5;margin-bottom:8px;}
.frase-idiomas{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.frase-idiomas .letra-idioma{flex:1;min-width:0;}
.frase-traduccion{width:100%;min-height:58px;font-size:13.5px;}
.frase-audios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px;}
.frase-audio{border:1px solid var(--line);background:var(--paper-soft);color:var(--ink);border-radius:7px;padding:8px 5px;font-size:11.5px;cursor:pointer;}
.frase-audio:hover{border-color:var(--accent);}
.frase-audio.original{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);}
.frase-audio:disabled{opacity:.45;cursor:not-allowed;}
.frase-acciones{display:flex;gap:8px;align-items:center;margin-top:8px;}
@media(max-width:620px){
  .centro-guia{padding:13px;}.centro-autoguardado{display:none;}.centro-modos{grid-template-columns:1fr 1fr;}.centro-siguiente{align-items:stretch;flex-direction:column;}.centro-accion{width:100%;max-width:none;}
  .frases-reproductor{padding:13px;}
  .frases-reproductor-botones{grid-template-columns:repeat(2,minmax(0,1fr));}
  .frases-repetir-cancion{grid-column:1/-1;}
  .frases-acciones-botones{grid-template-columns:1fr 1fr;}
  .frases-voces-dentro{grid-template-columns:1fr;}
  .frase-audios{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cuaderno-cab{align-items:stretch;flex-direction:column;}.cuaderno-nuevo{width:100%;}.cuaderno-form-grid{grid-template-columns:1fr;}.cuaderno-herramientas{grid-template-columns:1fr 1fr;}.cuaderno-herramientas input{grid-column:1/-1;}.cuaderno-item{grid-template-columns:auto minmax(0,1fr);}.cuaderno-item-acciones{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap;}.cuaderno-editor{grid-template-columns:1fr;}
}
@media(max-width:410px){
  .frases-progreso{grid-template-columns:1fr;gap:5px;}
  .frases-tiempo{text-align:left;}
  .frases-acciones-botones{grid-template-columns:1fr;}
}

/* Biblioteca y reproductor continuo. */
.musica-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;}
.musica-top h2{margin:0;font-size:21px}.musica-top p{margin:3px 0 0;color:var(--ink-faint);font-size:12px}
.musica-controles{display:flex;gap:8px;align-items:center;margin-bottom:12px}.musica-filtro{max-width:320px}.musica-player{position:sticky;top:0;z-index:5;background:var(--paper);border:1px solid var(--line);padding:12px;border-radius:10px;box-shadow:0 5px 18px rgba(0,0,0,.06);margin-bottom:14px}
.derechos-box{border:1px solid var(--line);border-radius:10px;padding:12px;margin:14px 0;background:var(--paper-soft)}
.derechos-box legend{font-weight:700;padding:0 6px}.check-line{display:flex!important;align-items:flex-start;gap:9px;margin-top:10px;font-weight:400!important}.check-line input{width:auto;margin-top:3px;flex:none}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.form-grid label{margin:0}.aprendizaje-grid{margin:14px 0}
.musica-player strong{display:block;margin-bottom:7px}.musica-player audio{width:100%;display:block}.musica-mandos{display:flex;justify-content:space-between;margin-top:7px}.musica-mandos button{border:0;background:none;color:var(--accent);cursor:pointer}
.musica-lista{display:flex;flex-direction:column;gap:8px}.musica-cancion{display:grid;grid-template-columns:auto minmax(130px,1fr) auto minmax(120px,auto) auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px;background:var(--paper)}
.musica-play{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:white;cursor:pointer}.musica-info{min-width:0}.musica-info strong,.musica-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musica-info span{font-size:11px;color:var(--ink-faint);margin-top:2px}
.musica-estudiar{white-space:nowrap;color:var(--accent);font-weight:700}
@media(max-width:680px){.musica-cancion{grid-template-columns:auto minmax(0,1fr) auto}.musica-cancion>select:nth-of-type(2),.musica-cancion>.ghost{grid-column:2/4}.musica-top{align-items:flex-start}.musica-player{top:4px}.musica-controles{flex-wrap:wrap}.musica-filtro{max-width:100%;flex:1 1 145px}.form-grid{grid-template-columns:1fr}}

/* ---------- traer la letra ---------- */
.letra-traer{
  border:1px dashed var(--line);border-radius:8px;padding:14px;margin-top:12px;
  text-align:center;
}
.letra-traer-texto{font-size:13px;color:var(--ink-faint);margin:0 0 10px;}
.letra-traer-boton{
  font-size:12.5px;font-weight:700;background:var(--accent-soft);color:var(--accent);
  border:none;border-radius:18px;padding:9px 16px;cursor:pointer;min-height:38px;
}
.letra-panel{text-align:left;}
.letra-campos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.letra-campos input{flex:1;min-width:140px;}
.letra-panel-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.letra-resultados{margin-top:10px;}
.letra-resultado{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:7px;
  background:var(--bg-raised);
}
.letra-resultado.mejor{border-color:var(--accent);}
.letra-resultado-datos{min-width:0;}
.letra-resultado-titulo{font-size:13px;font-weight:600;color:var(--ink);}
.letra-resultado-meta{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
.letra-resultado-muestra{
  font-size:12px;color:var(--ink-soft);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.letra-pista, .letra-fuente{font-size:11.5px;color:var(--ink-faint);line-height:1.45;margin:6px 0;}
.letra-esperando{font-size:12.5px;color:var(--ink-faint);}
.letra-error{
  font-size:12.5px;color:var(--danger);background:var(--danger-soft);
  border-radius:6px;padding:8px 10px;margin:8px 0 0;
}
.letra-pegar{font-size:12.5px;min-height:140px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

/* La cita del verso, debajo del botón de volver. En "title" no la ve nadie: en
   un móvil no hay ratón que pase por encima, y ahí es donde más se usa la app. */
.duda-cita{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.4;font-style:italic;}
.card-oido{border-left:3px solid var(--accent);}

/* Cuando un guardado de traducción falla, se dice con palabras y se devuelve
   el texto al campo. Un borde de color no explica nada, y perder cuatro versos
   traducidos sin saber por qué es de lo que no se vuelve. */
.verso-aviso-fallo{
  font-size:12px;line-height:1.4;margin:6px 0 0;
  color:var(--danger);background:var(--danger-soft);
  border-radius:6px;padding:7px 9px;
}
.verso-editor-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.verso-editor-cabecera strong{font-size:12px;color:var(--ink-soft)}.verso-editor-cerrar{flex:0 0 auto}

.letra-guia-sync{position:relative;}
.letra-guia-cerrar{position:absolute;right:12px;top:12px;}
.letra-guia-sync .letra-guia-titulo{display:block;padding-right:95px;}
.letra-guia-seccion{margin:13px 0 3px;font-size:13px;color:var(--accent-ink);}
.letra-guia-busqueda .letra-guia-pasos{margin-top:3px;}

/* Lector de textos */
.texto-lector{margin-top:12px}.texto-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.texto-exportar,.letra-exportar{position:relative}.texto-exportar summary,.letra-exportar summary{cursor:pointer;color:var(--accent);font-size:12px;font-weight:700}.texto-exportar[open],.letra-exportar[open]{flex-basis:100%;padding:9px;border:1px solid var(--line);border-radius:9px}
.texto-idioma{min-width:125px}.texto-lista{display:grid;gap:10px}.texto-fragmento{display:grid;grid-template-columns:30px 1fr;gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);cursor:pointer}
.texto-fragmento.activo{border-color:var(--accent);background:var(--accent-soft)}.texto-fragmento.con-duda{box-shadow:inset 3px 0 var(--warning)}
.texto-numero{color:var(--ink-faint);font-size:12px}.texto-original,.texto-frase-card p{margin:0 0 8px;line-height:1.6}.texto-traduccion-vista{margin:0 0 8px;color:var(--ink-soft);line-height:1.55}.texto-traduccion-vista.vacia{font-style:italic;color:var(--ink-faint)}.texto-editor-traduccion[hidden]{display:none}.texto-editor-traduccion{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}.texto-editor-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.texto-editor-cabecera strong{font-size:12px;color:var(--ink-soft)}.texto-traduccion{width:100%;resize:vertical;min-height:58px}.texto-guardar-traduccion{margin-top:7px}.texto-acciones{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.texto-voces,.texto-frases{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.texto-config-voces{display:grid;gap:8px;margin-top:10px}.texto-config-voces label{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center}
.texto-frase-card{border:1px solid var(--line);border-radius:9px;padding:10px;margin:8px 0}.texto-frase-traduccion{color:var(--ink-soft)}.texto-vacio{border:1px dashed var(--line);border-radius:10px;padding:20px;text-align:center}
@media(max-width:650px){.texto-fragmento{grid-template-columns:22px 1fr;padding:10px}.texto-barra>*{flex:1 1 auto}.texto-acciones button{flex:1 1 135px}}

/* Parrilla profesional de biblioteca */
.biblioteca-parrilla{margin-bottom:24px}.biblioteca-cabecera h2{margin:0}.biblioteca-cabecera p{margin:4px 0 14px;color:var(--ink-soft)}
.biblioteca-filtros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.biblioteca-filtro{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:13px;cursor:pointer}
.biblioteca-filtro:hover,.biblioteca-filtro.activo{border-color:var(--accent);background:var(--accent-soft)}.biblioteca-icono{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--bg);color:var(--accent);font-size:20px}.biblioteca-filtro strong,.biblioteca-filtro small{display:block}.biblioteca-filtro small{margin-top:3px;color:var(--ink-faint);font-size:11px;line-height:1.25}.biblioteca-filtro em{font-style:normal;font-weight:700;color:var(--accent);font-size:18px}
@media(max-width:850px){.biblioteca-filtros{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:500px){.biblioteca-filtros{grid-template-columns:1fr}.biblioteca-filtro{padding:11px}}
.peligro{border-color:#b75b55;color:#ffaaa3;background:rgba(183,91,85,.10);}

/* ========================================================================== 
   Canción desplegable: biblioteca y estudio viven en la misma pantalla.
   ========================================================================== */
.shell.shell-musica,header.top.top-musica{max-width:1040px}
.shell.shell-musica{padding-bottom:120px}
.musica-lista{gap:12px}
.musica-cancion{
  border-radius:16px;padding:12px;border-color:var(--line);background:var(--bg-raised);
  box-shadow:0 8px 24px rgba(4,8,20,.08);transition:border-color .2s,box-shadow .2s;
}
.musica-cancion.is-expanded{border-color:#8b5cf6;box-shadow:0 0 0 1px rgba(139,92,246,.24),0 14px 34px rgba(4,8,20,.18)}
.musica-cancion-abrible{cursor:pointer}.musica-cancion-abrible:focus-visible{outline:2px solid #8b5cf6;outline-offset:3px}.musica-cancion-abrible button,.musica-cancion-abrible select{cursor:pointer}
.musica-play{width:44px;height:44px;background:linear-gradient(145deg,#8b5cf6,#ec4899);box-shadow:0 6px 18px rgba(139,92,246,.28)}
.musica-abrir{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);cursor:pointer;text-align:left;
}
.musica-abrir:hover,.musica-abrir:focus-visible{border-color:#8b5cf6;background:rgba(139,92,246,.09);outline:none}
.musica-abrir-texto strong,.musica-abrir-texto small{display:block}.musica-abrir-texto strong{font-size:13px}.musica-abrir-texto small{font-size:11px;color:var(--ink-faint);margin-top:2px}
.musica-chevron{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(139,92,246,.13);color:#a78bfa;font-size:20px;transition:transform .2s}
.musica-cancion.is-expanded .musica-chevron{transform:rotate(180deg)}

.ficha.ficha-inline{
  max-width:none;margin:0;padding:0 18px 26px;border:1px solid var(--song-border);border-radius:18px;
  background:var(--song-shell-bg);box-shadow:0 20px 50px var(--song-shadow);overflow:hidden;
}
.ficha-inline .ficha-barra{background:var(--song-bar);backdrop-filter:blur(12px);padding:12px 0;top:0}
.ficha-inline .ficha-atras{margin-left:auto;order:3;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.ficha-inline .ficha-titulo{display:none}
.ficha-inline .ficha-fuera{order:2}

.cancion-presentacion{
  position:relative;display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:20px;align-items:center;
  min-height:150px;margin:8px 0 14px;padding:20px;border:1px solid var(--song-border);border-radius:16px;overflow:hidden;
  background:var(--song-hero-bg);
}
.cancion-presentacion[hidden]{display:none}
.cancion-presentacion::after{content:"";position:absolute;left:110px;right:-40px;top:50%;height:1px;background:linear-gradient(90deg,rgba(236,72,153,.65),rgba(139,92,246,.65),rgba(45,212,191,.45));box-shadow:0 -18px rgba(139,92,246,.16),0 18px rgba(45,212,191,.13);transform:rotate(-4deg)}
.cancion-ilustracion{position:relative;z-index:1;width:104px;height:104px;border-radius:22px;background:radial-gradient(circle,#ec4899 0 8%,#8b5cf6 32%,#17203b 68%);box-shadow:0 0 35px rgba(236,72,153,.28);overflow:hidden}
.cancion-ilustracion::before,.cancion-ilustracion::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.35);border-radius:50%;inset:14px}.cancion-ilustracion::after{inset:27px;border-color:rgba(94,234,212,.45)}
.cancion-nota{position:absolute;z-index:2;color:white;text-shadow:0 0 12px currentColor}.nota-uno{font-size:35px;left:34px;top:28px}.nota-dos{font-size:19px;right:14px;top:12px;color:#5eead4}.cancion-onda{display:none}
.cancion-presentacion-texto{position:relative;z-index:1;min-width:0}.cancion-eyebrow{display:block;color:var(--song-teal);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px}.cancion-presentacion-texto strong{display:block;font-size:clamp(22px,4vw,34px);line-height:1.08;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancion-presentacion-texto>span:last-child{display:block;color:var(--ink-soft);font-size:12px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancion-nivel{position:relative;z-index:1;align-self:start;border:1px solid var(--song-teal);border-radius:999px;padding:6px 10px;color:var(--song-teal);background:var(--accent-soft);font-size:11px;font-weight:800}

/* ---------- acordeón "Ajustes" reutilizable ---------- */
.ajustes-acordeon{margin:0 0 10px;border:1px solid var(--song-border);border-radius:13px;background:var(--song-panel-soft);overflow:hidden}
.ajustes-acordeon summary{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;font-size:12px;font-weight:800;color:var(--ink-soft);list-style:none;user-select:none;transition:color .15s}
.ajustes-acordeon summary::before{content:"⚙";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(139,92,246,.10);color:#c4b5fd;font-size:14px;flex-shrink:0}
.ajustes-acordeon summary:hover{color:var(--ink)}
.ajustes-acordeon[open] summary{border-bottom:1px solid var(--song-border)}
.ajustes-acordeon[open] summary::before{background:rgba(45,212,191,.12);color:var(--song-teal)}
.ajustes-acordeon-cuerpo{display:grid;gap:8px;padding:12px 14px}
.ajustes-acordeon-cuerpo select{min-height:38px;font-size:13px}
.ajustes-acordeon-cuerpo label{display:grid;gap:4px;font-size:11px;font-weight:700;color:var(--ink-soft)}

/* toolbar: el acordeón se adapta al grid de 3 columnas */
.ficha-herramientas-acordeon{grid-column:1/-1;margin:0}
.ficha-herramientas-acordeon summary{padding:10px 12px;border:1px solid var(--song-border);border-radius:13px;background:var(--song-panel)}
.ficha-herramientas-acordeon[open] summary{border-radius:13px 13px 0 0;border-bottom:1px solid var(--song-border)}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo button{min-width:0;min-height:72px;padding:8px 4px;border:1px solid var(--song-border);border-radius:13px;background:var(--song-panel);color:var(--ink);cursor:pointer;text-align:center;transition:transform .15s,border-color .15s,background .15s}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo button:hover{transform:translateY(-2px);border-color:#8b5cf6}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo button.is-active{border-color:#5eead4;background:linear-gradient(180deg,rgba(45,212,191,.14),rgba(139,92,246,.08));box-shadow:inset 0 0 0 1px rgba(45,212,191,.14)}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo button>span{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 5px;border-radius:8px;background:rgba(139,92,246,.15);color:#c4b5fd;font-size:16px}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo strong{display:block;font-size:11px}
.ficha-herramientas-acordeon .ajustes-acordeon-cuerpo small{display:block;font-size:9px;color:var(--ink-faint);margin-top:2px}

/* ---------- toolbar de ficha: 3 visibles + acordeón ---------- */
.ficha-herramientas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.ficha-herramientas[hidden]{display:none}
.ficha-herramientas button{min-width:0;min-height:82px;padding:11px 7px;border:1px solid var(--song-border);border-radius:13px;background:var(--song-panel);color:var(--ink);cursor:pointer;text-align:center;transition:transform .15s,border-color .15s,background .15s}
.ficha-herramientas button:hover{transform:translateY(-2px);border-color:#8b5cf6}.ficha-herramientas button.is-active{border-color:#5eead4;background:linear-gradient(180deg,rgba(45,212,191,.14),rgba(139,92,246,.08));box-shadow:inset 0 0 0 1px rgba(45,212,191,.14)}
.ficha-herramientas button>span{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 7px;border-radius:10px;background:rgba(139,92,246,.15);color:#c4b5fd;font-size:20px}.ficha-herramientas button:nth-child(2)>span{color:#5eead4;background:rgba(45,212,191,.12)}.ficha-herramientas button:nth-child(3)>span{color:#f472b6;background:rgba(244,114,182,.12)}.ficha-herramientas button:nth-child(4)>span{color:#facc15;background:rgba(250,204,21,.10)}
.ficha-herramientas strong,.ficha-herramientas small{display:block;overflow:hidden;text-overflow:ellipsis}.ficha-herramientas strong{font-size:12px}.ficha-herramientas small{font-size:9.5px;line-height:1.25;color:var(--ink-faint);margin-top:3px}

.ficha-panel-rapido{margin:0 0 14px;padding:16px;border:1px solid var(--song-border);border-radius:14px;background:var(--song-panel-alpha)}.ficha-panel-rapido[hidden]{display:none}.ficha-panel-rapido>div:first-child{display:flex;align-items:center;gap:9px}.ficha-panel-rapido h3{font-size:15px;margin:0}.ficha-panel-icono{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(139,92,246,.15);color:#8b5cf6}.ficha-panel-rapido p{color:var(--ink-soft);line-height:1.5}.ficha-panel-rapido dl{display:grid;grid-template-columns:minmax(100px,.4fr) 1fr;gap:7px 14px;font-size:12.5px}.ficha-panel-rapido dt{color:var(--ink-faint)}.ficha-panel-rapido dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

.ficha-inline .visor-hueco{border:1px solid var(--song-border);border-radius:14px;background:var(--song-panel-soft)}.ficha-inline .visor-hueco audio{padding:16px}.ficha-inline .letra{margin-top:14px}.ficha-inline .letra-cab{padding:10px;border:1px solid var(--song-border);border-radius:12px;background:var(--song-panel-alpha)}
.ficha-inline .letra-lista{padding:10px 8px;border-radius:14px;background:var(--song-panel-soft);border-color:var(--song-border)}
.ficha-inline .verso{opacity:1;transition:opacity .18s,transform .18s,background .18s}.ficha-inline .letra-lista.tiene-linea-activa .verso:not(.suena):not(.abierto){opacity:.48}.ficha-inline .letra-lista.tiene-linea-activa .verso.suena+ .verso{opacity:.72}
.ficha-inline .verso-linea{min-height:48px;padding:10px 9px;font-size:16px}.ficha-inline .verso-num{min-width:78px;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.02em}.ficha-inline .verso.suena{opacity:1;background:linear-gradient(90deg,rgba(45,212,191,.18),rgba(139,92,246,.18));border:1px solid var(--song-teal);box-shadow:0 0 24px rgba(45,212,191,.13);transform:scale(1.005)}.ficha-inline .verso.suena .verso-linea{min-height:64px;color:var(--song-active-text);font-size:clamp(18px,2.5vw,24px);font-weight:750}.ficha-inline .verso.suena .verso-num{color:var(--song-teal)}.ficha-inline .verso.suena .verso-ingles::before{content:"▥";color:var(--song-teal);margin-right:10px;font-size:14px}

.ficha-inline .letra-ajustes{margin-top:10px;border:1px solid var(--song-border);border-radius:14px;background:var(--song-panel-alpha);overflow:hidden}.ficha-inline .letra-ajustes summary{padding:15px 16px;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer;list-style:none}.ficha-inline .letra-ajustes summary::before{content:"◷";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:8px;background:rgba(45,212,191,.12);color:var(--song-teal)}.ficha-inline .letra-ajustes[open] summary{border-bottom:1px solid var(--song-border)}.ficha-inline .letra-ajustes-dentro{padding:15px;align-items:stretch}
.sync-offset-controles{display:grid!important;grid-template-columns:repeat(2,minmax(74px,1fr)) minmax(130px,1.35fr) repeat(2,minmax(74px,1fr));gap:7px!important}.sync-offset-controles .verso-boton{min-height:42px}.sync-offset-lectura{display:grid;place-items:center;min-height:42px;padding:6px 9px;border:1px solid var(--song-teal);border-radius:9px;background:var(--accent-soft);color:var(--song-teal);font-size:11px;font-weight:850;letter-spacing:.05em;font-variant-numeric:tabular-nums}.sync-acciones-principales{display:grid;grid-template-columns:1.25fr 1fr;gap:9px}.sync-acciones-principales button{min-height:46px}.ficha-inline .letra-offset{padding:10px;border-radius:10px;background:var(--song-panel-soft)}

@media(max-width:760px){
  .ficha-herramientas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cancion-presentacion{grid-template-columns:72px minmax(0,1fr);min-height:116px;padding:14px;gap:13px}.cancion-ilustracion{width:72px;height:72px;border-radius:17px}.nota-uno{font-size:27px;left:23px;top:19px}.nota-dos{font-size:14px}.cancion-nivel{grid-column:2;justify-self:start;align-self:auto}.cancion-presentacion::after{left:70px}
  .sync-offset-controles{grid-template-columns:repeat(2,minmax(0,1fr))}.sync-offset-lectura{grid-column:1/-1;grid-row:1}.sync-acciones-principales{grid-template-columns:1fr}
}

/* Un único acceso de práctica oral para canción, vídeo y texto. */
.ficha-practica-btn{flex:none;min-height:34px;padding:7px 12px;border:1px solid var(--song-teal);border-radius:999px;background:var(--accent-soft);color:var(--song-teal);font-size:11.5px;font-weight:850;cursor:pointer}.ficha-practica-btn:hover,.ficha-practica-btn:focus-visible{outline:2px solid var(--song-teal);outline-offset:2px}.ficha-practica-btn[hidden]{display:none}.ficha-inline .ficha-practica-btn{order:1}
.ficha-practica-btn.cta-primario{background:var(--song-teal);color:#fff;border-color:var(--song-teal)}.ficha-practica-btn.cta-primario:hover,.ficha-practica-btn.cta-primario:focus-visible{background:#177a6a;outline:none}
.ficha-compartir-btn{flex:none;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:11.5px;font-weight:700;cursor:pointer}.ficha-compartir-btn:hover{border-color:var(--accent);color:var(--accent)}.ficha-compartir-btn[hidden]{display:none}
.ficha-repaso-btn{flex:none;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-size:11.5px;font-weight:700;cursor:pointer}.ficha-repaso-btn:hover{border-color:var(--accent);color:var(--accent)}.ficha-repaso-btn[hidden]{display:none}
.practica-oral{margin:14px 0 18px;padding:18px;border:1px solid rgba(139,92,246,.45);border-radius:18px;background:radial-gradient(circle at 12% 5%,rgba(236,72,153,.17),transparent 32%),radial-gradient(circle at 90% 95%,rgba(45,212,191,.14),transparent 38%),var(--song-panel-soft);box-shadow:0 15px 38px var(--song-shadow)}.practica-oral[hidden]{display:none}.practica-oral-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.practica-oral-cab h3{margin:4px 0;font-size:19px}.practica-oral-intro{margin:8px 0 14px;color:var(--ink-soft);font-size:12.5px;line-height:1.45}.practica-oral-editor{padding:14px;border:1px solid var(--song-border);border-radius:13px;background:var(--song-panel)}.practica-oral-editor textarea{min-height:150px;margin:0}.practica-oral-editor-acciones{display:grid;grid-template-columns:180px 1fr;gap:8px;margin-top:9px}.practica-oral-editor-acciones select{margin:0}
.practica-oral-escenario{padding:28px 20px 23px;border:1px solid var(--song-border);border-radius:16px;text-align:center;background:#080d1a;color:#fff}.practica-oral-marca{display:block;color:#5eead4;font-size:9px;font-weight:900;letter-spacing:.18em}.practica-oral-marca.siguiente{margin-top:24px;color:#a78bfa}.practica-oral-actual{max-width:900px;min-height:1.4em;margin:9px auto 0;font-size:clamp(25px,4.5vw,43px);font-weight:850;line-height:1.16;text-wrap:balance}.practica-oral-siguiente{margin-top:7px;color:#aeb8c7;font-size:clamp(14px,2vw,18px)}.practica-oral-controles{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.practica-oral-controles button{min-height:40px}.practica-oral-controles .is-recording{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.practica-oral-estado{min-height:1.3em;margin:10px 0 0;color:var(--ink-faint);font-size:11.5px}.practica-oral-grabacion{width:100%;margin-top:8px}.practica-oral-grabacion[hidden]{display:none}
.practica-oral:fullscreen{display:flex;flex-direction:column;justify-content:center;margin:0;padding:5vw;border:0;border-radius:0;background:#070b16;color:#fff}.practica-oral:fullscreen .practica-oral-cab,.practica-oral:fullscreen .practica-oral-intro,.practica-oral:fullscreen .practica-oral-editor{color:#fff}.practica-oral:fullscreen .practica-oral-actual{font-size:clamp(42px,7vw,90px)}.practica-oral:fullscreen .practica-oral-escenario{border:0;background:transparent}

/* ---------- Karaoke: una sola experiencia dentro de la canción ---------- */
.karaoke-panel{position:relative;margin:12px 0 16px;padding:18px;border:1px solid rgba(139,92,246,.45);border-radius:18px;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(236,72,153,.20),transparent 35%),radial-gradient(circle at 88% 90%,rgba(45,212,191,.15),transparent 38%),var(--song-panel-soft);box-shadow:0 18px 45px var(--song-shadow)}
.letra.karaoke-activo>*:not(.karaoke-panel){display:none!important}
.karaoke-panel[hidden]{display:none}.karaoke-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035),transparent 70%)}
.karaoke-cab{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.karaoke-kicker{display:block;color:#ec4899;font-size:10px;font-weight:900;letter-spacing:.15em}.karaoke-cab h3{margin:4px 0 0;font-size:18px}.karaoke-cerrar{border:1px solid var(--song-border);border-radius:999px;background:var(--song-panel-alpha);color:var(--ink-soft);padding:7px 11px;cursor:pointer}
.karaoke-escenario{position:relative;margin:18px 0;padding:28px 20px 23px;border:1px solid var(--song-border);border-radius:16px;text-align:center;background:rgba(3,7,18,.88);color:#fff}.karaoke-marca{display:block;color:#5eead4;font-size:9px;font-weight:900;letter-spacing:.18em}.karaoke-actual{min-height:1.35em;margin:10px auto 5px;max-width:850px;font-size:clamp(24px,4.4vw,43px);font-weight:850;line-height:1.14;text-wrap:balance;text-shadow:0 0 25px rgba(94,234,212,.18)}.karaoke-traduccion{min-height:1.3em;color:#cbd5e1;font-size:14px}.karaoke-marca-siguiente{margin-top:22px;color:#a78bfa}.karaoke-siguiente{margin-top:6px;color:#aeb8c7;font-size:clamp(14px,2vw,18px)}
.karaoke-controles{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.karaoke-velocidades{display:flex;padding:3px;border:1px solid var(--song-border);border-radius:10px;background:var(--song-panel)}.karaoke-velocidad,.karaoke-accion{min-height:38px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink-soft);font-weight:750;cursor:pointer;padding:8px 11px}.karaoke-velocidad.is-active{background:var(--accent);color:#fff}.karaoke-accion{border-color:var(--song-border);background:var(--song-panel)}.karaoke-accion:hover,.karaoke-accion:focus-visible{border-color:var(--song-teal);outline:none}.karaoke-grabar{margin-left:auto}.karaoke-grabar.is-recording{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}.karaoke-estado{margin:12px 0 0;color:var(--ink-faint);font-size:11.5px}.karaoke-mi-voz{width:100%;margin-top:10px}.karaoke-mi-voz[hidden]{display:none}
.karaoke-panel:fullscreen{display:flex;flex-direction:column;justify-content:center;margin:0;padding:5vw;border:0;border-radius:0;background:#070b16}.karaoke-panel:fullscreen .karaoke-actual{font-size:clamp(40px,7vw,90px)}.karaoke-panel:fullscreen .karaoke-escenario{border:0;background:transparent}

/* ---------- Progreso y siguiente acción ---------- */
.continuar-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:18px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,var(--bg-raised),var(--accent-soft))}.continuar-card h2{margin:3px 0;font-size:20px}.continuar-card p{margin:0 0 10px;color:var(--ink-soft)}.continuar-card>div{flex:1;min-width:0}.continuar-progreso{height:6px;border-radius:9px;background:var(--line-soft);overflow:hidden}.continuar-progreso span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--song-teal))}.continuar-card small{display:block;margin-top:6px;color:var(--ink-faint)}
.progreso-cabecera,.comunidad-cabecera{margin-bottom:18px}.progreso-cabecera h2,.comunidad-cabecera h2{margin:4px 0;font-size:27px}.progreso-cabecera p,.comunidad-cabecera p{margin:0;color:var(--ink-soft)}.comunidad-kicker{color:var(--song-teal);font-size:9.5px;font-weight:900;letter-spacing:.14em}
.objetivo-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bg-raised);overflow:hidden}
.objetivo-card .ajustes-acordeon{grid-column:1/-1}
.objetivo-card select{width:100%;margin:0}.objetivo-anillo{display:grid;place-items:center;width:90px;height:90px;border-radius:50%;background:conic-gradient(var(--song-teal) var(--progreso),var(--line-soft) 0);position:relative}.objetivo-anillo::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg-raised)}.objetivo-anillo strong,.objetivo-anillo span{position:relative;z-index:1;grid-area:1/1}.objetivo-anillo strong{font-size:20px;transform:translateY(-7px)}.objetivo-anillo span{color:var(--ink-faint);font-size:10px;transform:translateY(12px)}.objetivo-texto h3{margin:4px 0;font-size:18px}.objetivo-texto p{margin:0;color:var(--ink-soft);font-size:12px}
.progreso-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.progreso-metricas article{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--bg-raised)}.progreso-metricas article>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:18px}.progreso-metricas strong{font-size:17px}.progreso-metricas small{color:var(--ink-faint)}
.mision-card{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid var(--gold);border-radius:14px;background:var(--gold-soft)}.mision-icono{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--gold);color:#fff;font-weight:900}.mision-card h3{margin:3px 0;font-size:16px}.mision-card p{margin:0;color:var(--ink-soft);font-size:12px}
.semana-card{margin-top:12px;padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised)}.semana-card h3{margin:0 0 14px;font-size:15px}.semana-grafico{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;height:120px}.semana-dia{display:grid;grid-template-rows:1fr auto;gap:5px;text-align:center}.semana-dia>div{display:flex;align-items:flex-end;justify-content:center;border-radius:8px;background:var(--bg-sunk);overflow:hidden}.semana-dia span{display:block;width:100%;min-height:5px;border-radius:7px 7px 0 0;background:linear-gradient(var(--song-teal),var(--accent))}.semana-dia small{color:var(--ink-faint)}

/* ---------- Comunidad y listas compartidas ---------- */
.invitar-card{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--bg-raised),var(--accent-soft))}.invitar-ilustracion{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:24px;background:linear-gradient(145deg,#8b5cf6,#0f766e);color:#fff;font-size:35px}.invitar-ilustracion span{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#ec4899;font-size:15px}.invitar-card h3{margin:4px 0;font-size:18px}.invitar-card p{margin:0;color:var(--ink-soft);font-size:12px}.invitar-card code{display:inline-block;margin-top:8px;padding:5px 8px;border-radius:7px;background:var(--bg-raised);color:var(--ink);letter-spacing:.12em}.invitar-acciones{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.aceptar-invitacion,.comunidad-seccion,.paquete-abierto{margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised)}.aceptar-invitacion h3,.comunidad-seccion h3,.paquete-abierto h3{margin:0 0 5px}.aceptar-invitacion p{margin:0 0 10px;color:var(--ink-soft);font-size:12px}.aceptar-invitacion>div{display:grid;grid-template-columns:1fr auto;gap:8px}.comunidad-aviso{margin-top:9px!important;padding:8px;border-radius:8px;background:var(--accent-soft);color:var(--accent)!important}.comunidad-seccion>h3 span{display:inline-block;margin-left:5px;padding:2px 7px;border-radius:10px;background:var(--line-soft);color:var(--ink-faint);font-size:10px}
.amigo-card,.paquete-card{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft)}.amigo-card>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:850}.amigo-card div,.paquete-card div{display:flex;flex:1;min-width:0;flex-direction:column}.amigo-card small,.paquete-card small{color:var(--ink-faint)}.paquete-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.paquete-elementos{display:flex;flex-direction:column;gap:6px;margin:12px 0}.paquete-elementos article{display:grid;grid-template-columns:70px 1fr;gap:3px 10px;padding:10px;border-radius:9px;background:var(--paper-soft)}.paquete-elementos small{grid-row:1/3;color:var(--song-teal);text-transform:uppercase;font-weight:850}.paquete-elementos span{color:var(--ink-soft)}
.compartir-dialog{width:min(520px,calc(100% - 28px));padding:0;border:0;border-radius:17px;background:var(--bg-raised);color:var(--ink);box-shadow:0 28px 80px rgba(0,0,0,.35)}.compartir-dialog::backdrop{background:rgba(3,7,18,.68);backdrop-filter:blur(3px)}.compartir-dialog-cuerpo{position:relative;padding:24px}.compartir-dialog h2{margin:4px 0}.compartir-dialog p{color:var(--ink-soft)}.dialog-cerrar{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--ink-faint);font-size:25px;cursor:pointer}.compartir-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.compartir-sin-amigos{padding:9px;border-radius:8px;background:var(--gold-soft)}.compartir-exito{padding:9px;border-radius:8px;background:var(--good-soft)!important;color:var(--good)!important}
.comprar-ventajas{margin:0 0 14px;padding-left:20px;color:var(--ink-soft)}.comprar-ventajas li{margin-bottom:6px}.comprar-precio{font-size:17px;font-weight:800;color:var(--ink)!important}
/* #comprar-dialog necesita más sitio que el resto de .compartir-dialog: un
   formulario de pago con menos de 520px queda apretado. El límite en móvil
   (calc(100% - 28px)) es el MISMO que ya usa .compartir-dialog: nunca más
   ancho que la pantalla, con el mismo margen a los lados. */
#comprar-dialog{width:min(600px,calc(100% - 28px))}
.comprar-error{margin:10px 0 0;padding:9px 11px;border-radius:8px;background:var(--danger-soft);color:var(--danger);font-size:12.5px;font-weight:600}

/* ---------- Voces naturales exportables ---------- */
.voz-descarga-pista{margin:0 0 10px!important;padding:9px 11px;border-left:3px solid var(--song-teal);border-radius:0 8px 8px 0;background:var(--accent-soft)}

/* ---------- Centro de estudio unificado: canción, vídeo y texto ---------- */
.ficha.ficha-centro:not(.ficha-inline){max-width:1100px;padding:0 22px 90px}
.ficha-centro:not(.ficha-inline) .ficha-barra{padding:12px 4px;background:var(--song-bar);backdrop-filter:blur(12px)}
.ficha-centro:not(.ficha-inline) .ficha-atras{margin-right:auto;padding:8px 13px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.ficha-centro .ficha-titulo{display:none}
.cancion-presentacion[data-tipo="texto"]{background:radial-gradient(circle at 12% 10%,rgba(45,212,191,.17),transparent 32%),radial-gradient(circle at 88% 90%,rgba(139,92,246,.14),transparent 38%),var(--song-panel-soft)}
.cancion-presentacion[data-tipo="texto"] .cancion-ilustracion{background:linear-gradient(145deg,#0f766e,#17203b 64%,#8b5cf6);box-shadow:0 0 35px rgba(45,212,191,.22)}
.cancion-presentacion[data-tipo="texto"] .cancion-ilustracion::before{inset:15px 18px;border-radius:8px;border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 -15px rgba(255,255,255,.04)}
.cancion-presentacion[data-tipo="texto"] .cancion-ilustracion::after{inset:25px 28px;border:0;border-radius:0;border-top:2px solid rgba(94,234,212,.55);border-bottom:2px solid rgba(255,255,255,.24)}
.cancion-presentacion[data-tipo="texto"] .nota-uno{left:28px;top:28px;font-size:25px;font-weight:900;letter-spacing:-.08em}.cancion-presentacion[data-tipo="texto"] .nota-dos{right:17px;top:14px;font-size:18px}
.cancion-presentacion[data-tipo="video"] .cancion-ilustracion{display:grid;place-items:center;background:linear-gradient(145deg,#7c3aed,#17203b 65%,#0f766e)}
.cancion-presentacion[data-tipo="video"] .nota-uno{position:static;font-size:36px}.cancion-presentacion[data-tipo="video"] .nota-dos{right:10px;bottom:10px;top:auto;padding:3px 5px;border-radius:5px;background:#080d1a;font-size:10px}

/* El lector de texto utiliza la misma jerarquía visual de las canciones. */
.texto-centro{margin-top:14px}.texto-centro-guia{margin-top:0}
.texto-controles{display:block;margin:0 0 16px;padding:16px;border:1px solid var(--song-border);border-radius:16px;background:var(--song-panel-soft)}
.texto-controles-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.texto-controles-cab h3{margin:3px 0 0;font-size:18px}.texto-controles-cab button{flex:none}
.texto-vistas-modernas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:4px;border:1px solid var(--song-border);border-radius:12px;background:var(--song-panel)}
.texto-vista{min-height:40px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:800;cursor:pointer}.texto-vista:hover{border-color:var(--accent)}.texto-vista.is-active{border-color:var(--song-teal);background:linear-gradient(135deg,rgba(45,212,191,.14),rgba(139,92,246,.10));color:var(--ink)}
.texto-idiomas-grid{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(150px,.8fr);gap:9px;align-items:end;margin-top:12px}.texto-idiomas-grid label{display:grid;gap:5px;color:var(--ink-faint);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.texto-idiomas-grid select{width:100%;margin:0;min-height:42px}.texto-idiomas-grid button{min-height:42px}
.texto-exportar-fila{display:flex;justify-content:flex-end;margin-top:10px}.texto-exportar{width:min(100%,760px);border:1px solid var(--song-border);border-radius:11px;background:var(--song-panel)}.texto-exportar summary{padding:12px 14px;color:var(--ink);font-size:12px;list-style:none}.texto-exportar summary::before{content:"↓";display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:8px;background:var(--accent-soft);color:var(--accent)}.texto-exportar[open]{padding:0;border-color:var(--song-teal)}.texto-exportar[open] summary{border-bottom:1px solid var(--song-border)}.texto-exportar .texto-acciones{padding:12px;margin:0}.texto-exportar .texto-idioma{flex:1 1 260px}
.texto-lista-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:20px 2px 9px}.texto-lista-cab h3{margin:3px 0 0;font-size:19px}.texto-lista-ayuda{color:var(--ink-faint);font-size:11px}
.texto-lista{gap:9px;padding:10px;border:1px solid var(--song-border);border-radius:16px;background:var(--song-panel-soft)}
.texto-fragmento{grid-template-columns:42px minmax(0,1fr);gap:10px;padding:13px;border-color:var(--song-border);border-radius:13px;background:var(--song-panel);transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}.texto-fragmento:hover{transform:translateY(-1px);border-color:rgba(139,92,246,.65)}.texto-fragmento.activo{border-color:var(--song-teal);background:linear-gradient(100deg,rgba(45,212,191,.14),rgba(139,92,246,.10));box-shadow:0 0 25px rgba(45,212,191,.10)}
.texto-numero{display:grid;place-items:center;align-self:start;width:31px;height:31px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:900}.texto-fragmento.activo .texto-numero{background:var(--song-teal);color:#07111c}
.texto-original{margin:0 0 9px;font-size:16.5px;line-height:1.65;color:var(--ink)}.texto-traduccion-vista{padding-left:12px;border-left:2px solid rgba(139,92,246,.45);color:var(--ink-soft)}
.texto-fragmento-acciones{padding-top:9px;border-top:1px solid var(--line-soft)}.texto-fragmento-acciones button{min-height:36px}
.texto-panel-desplegable{margin-top:14px;padding:0;border:1px solid var(--song-border);border-radius:14px;background:var(--song-panel-soft);overflow:hidden}.texto-panel-desplegable summary{padding:15px 16px;cursor:pointer;font-size:13px;font-weight:850;list-style:none}.texto-panel-desplegable[open] summary{border-bottom:1px solid var(--song-border)}.texto-panel-desplegable .texto-config-voces{padding:14px;margin:0}
.texto-frases{margin-top:16px;padding:16px;border:1px solid var(--song-border);border-radius:16px;background:var(--song-panel-soft)}.texto-frases>h3{margin:0 0 10px}.texto-frase-card{border-color:var(--song-border);border-radius:12px;background:var(--song-panel)}

/* ---------- V57: reproductor audiovisual, controles e historial ---------- */
.tab-reproductor{color:var(--song-teal)!important;font-weight:900!important}.tab-reproductor.active{color:var(--accent-ink)!important}
.reproductor-cabecera{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px;padding:20px;border:1px solid var(--song-border);border-radius:18px;background:radial-gradient(circle at 90% 10%,rgba(45,212,191,.17),transparent 35%),linear-gradient(135deg,var(--song-panel),var(--song-panel-soft))}.reproductor-cabecera span{color:var(--song-teal);font-size:9px;font-weight:950;letter-spacing:.16em}.reproductor-cabecera h2{margin:5px 0 3px;font-size:clamp(22px,3.6vw,31px);line-height:1.1}.reproductor-cabecera p{max-width:650px;margin:0;color:var(--ink-soft);font-size:13px;line-height:1.5}.reproductor-cabecera>div:last-child{flex:none}
.reproductor-selector-zona{display:flex;align-items:end;gap:9px;margin-bottom:13px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--bg-raised)}.reproductor-selector-zona label{display:grid;flex:1;gap:5px;color:var(--ink-faint);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.reproductor-selector-zona select{width:100%;margin:0;min-height:43px;color:var(--ink);font-size:14px;text-transform:none;letter-spacing:0}.reproductor-selector-zona>button{min-height:43px}

/* filtros de música dentro del acordeón */
.musica-filtros-acordeon .musica-filtros-fila{display:flex;gap:8px;flex-wrap:wrap}
.musica-filtros-acordeon .musica-filtros-fila select{flex:1 1 140px;min-height:38px;font-size:13px}
.musica-origen-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.musica-origen-btn{grid-template-columns:38px 1fr}
@media(max-width:500px){.musica-origen-fila{grid-template-columns:1fr}}
.estanteria-biblioteca{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.estanteria-biblioteca h3{margin:0 0 2px;font-size:16px}
.estanteria-biblioteca-sub{margin:0 0 12px;color:var(--ink-faint);font-size:12px}
.estanteria-nota-plan{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink-soft);font-size:12.5px}
.musica-filtros-acordeon .ghost{margin-top:4px}
.reproductor-centro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:13px;align-items:start}.reproductor-panel,.reproductor-cola{border:1px solid var(--song-border);border-radius:18px;background:var(--song-panel);box-shadow:0 16px 42px var(--song-shadow);overflow:hidden}.reproductor-panel{position:sticky;top:8px;padding:16px}.reproductor-ahora{display:flex;align-items:center;gap:12px;margin-bottom:12px}.reproductor-ahora-icono{display:grid;place-items:center;width:49px;height:49px;flex:none;border-radius:15px;background:linear-gradient(145deg,#8b5cf6,var(--song-teal));color:#fff;font-size:22px;box-shadow:0 9px 25px rgba(91,33,182,.22)}.reproductor-ahora small,.reproductor-cola>div:first-child small{color:var(--song-teal);font-size:9px;font-weight:950;letter-spacing:.14em}.reproductor-ahora h3{margin:2px 0 1px;font-size:19px}.reproductor-ahora p{margin:0;color:var(--ink-faint);font-size:11px}
.reproductor-media{display:grid;min-height:290px;place-items:center;border:1px solid var(--song-border);border-radius:14px;background:radial-gradient(circle at 30% 30%,rgba(139,92,246,.22),transparent 40%),radial-gradient(circle at 75% 75%,rgba(45,212,191,.17),transparent 38%),#080d1a;overflow:hidden}.reproductor-media .visor-marco{width:100%;margin:0;border:0;border-radius:0;background:#080d1a}.reproductor-media .visor-marco:not(.solo-audio){min-height:290px}.reproductor-media .visor-marco iframe,.reproductor-media .visor-marco video{width:100%;min-height:290px;border:0}.reproductor-media .visor-marco.solo-audio{align-self:stretch;display:grid;place-content:center;padding:32px;background:transparent}.reproductor-media .visor-marco.solo-audio audio{width:min(100%,540px)}.reproductor-media .visor-marco.solo-audio audio:not([controls]){display:none}.reproductor-media .audio-extras{justify-content:center}.reproductor-audio-visual{display:grid;place-items:center;color:#e0f2fe;text-align:center}.reproductor-audio-visual>span{display:grid;place-items:center;width:104px;height:104px;margin-bottom:14px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:conic-gradient(from 20deg,#7c3aed,#0f766e,#ec4899,#7c3aed);font-size:42px;box-shadow:0 0 0 12px rgba(255,255,255,.035),0 0 55px rgba(45,212,191,.22)}.reproductor-audio-visual strong{max-width:430px;font-size:19px}.reproductor-audio-visual small{margin-top:5px;color:#67e8f9;font-size:9px;font-weight:900;letter-spacing:.16em}.reproductor-espera{display:grid;place-items:center;padding:28px;color:#dbeafe;text-align:center}.reproductor-espera>span{display:grid;place-items:center;width:78px;height:78px;margin-bottom:13px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:linear-gradient(145deg,#7c3aed,#0f766e);font-size:34px;box-shadow:0 0 45px rgba(45,212,191,.2)}.reproductor-espera strong{font-size:18px}.reproductor-espera p{margin:5px 0 0;color:#9ca3af;font-size:12px}
.reproductor-estado{min-height:18px;margin:10px 2px 6px;color:var(--ink-soft);font-size:11px;line-height:1.4}.reproductor-estado.is-error{color:var(--danger)}.reproductor-progreso{width:100%;height:5px;margin:6px 0 0;padding:0;accent-color:var(--song-teal);cursor:pointer}.reproductor-progreso:disabled{opacity:.45}.reproductor-tiempo{text-align:right;color:var(--ink-faint);font-size:10px;font-variant-numeric:tabular-nums}.reproductor-mandos{display:grid;grid-template-columns:1fr minmax(125px,1.25fr) minmax(86px,.8fr) 1fr;gap:7px;margin-top:9px}.reproductor-mandos button{min-height:44px}.reproductor-play{font-size:13px}.reproductor-opciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:7px}.reproductor-opciones button,.reproductor-opciones select{min-height:38px;margin:0;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--paper-soft);color:var(--ink-soft);font-size:10.5px;font-weight:800;cursor:pointer}.reproductor-opciones .is-active{border-color:var(--song-teal);background:var(--accent-soft);color:var(--song-teal)}.reproductor-volumen{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;min-height:38px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;background:var(--paper-soft);color:var(--ink-soft);font-size:9.5px;font-weight:800}.reproductor-volumen input{min-width:48px;width:100%;margin:0;padding:0;accent-color:var(--song-teal)}.reproductor-estudiar{width:100%;margin-top:9px;padding:10px;border:1px solid var(--song-teal);border-radius:10px;background:transparent;color:var(--song-teal);font-size:12px;font-weight:850;cursor:pointer}.reproductor-estudiar:disabled{border-color:var(--line);color:var(--ink-faint);cursor:not-allowed}
.reproductor-cola{max-height:780px;padding:13px;box-shadow:none}.reproductor-cola>div:first-child{display:flex;align-items:end;justify-content:space-between;padding:2px 3px 10px;border-bottom:1px solid var(--line-soft)}.reproductor-cola h3{margin:2px 0 0;font-size:17px}.reproductor-lista{display:flex;flex-direction:column;gap:7px;margin-top:9px}.reproductor-pista{border:1px solid var(--line-soft);border-radius:11px;background:var(--paper-soft);overflow:hidden;transition:border-color .15s,transform .15s,background .15s}.reproductor-pista:hover{transform:translateY(-1px);border-color:var(--accent)}.reproductor-pista.is-active{border-color:var(--song-teal);background:var(--accent-soft);box-shadow:0 0 0 1px var(--song-teal)}.reproductor-pista-elegir{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;width:100%;padding:10px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.reproductor-pista-icono{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--bg-raised);color:var(--song-teal);font-size:15px}.reproductor-pista-elegir>span:last-child{display:flex;min-width:0;flex-direction:column}.reproductor-pista-elegir strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.reproductor-pista-elegir small{margin-top:2px;overflow:hidden;color:var(--ink-faint);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}.reproductor-pista-acciones{display:flex;gap:5px;padding:0 8px 8px}.reproductor-pista-acciones select{min-width:0;flex:1;margin:0;padding:5px 7px;border-radius:7px;font-size:10px}.reproductor-pista-acciones button{padding:5px 8px;font-size:9.5px}
.reproductor-historial{margin-top:14px;padding:17px;border:1px solid var(--song-border);border-radius:17px;background:var(--song-panel)}.reproductor-historial-cab{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}.reproductor-historial-cab span{color:var(--song-teal);font-size:9px;font-weight:900;letter-spacing:.14em}.reproductor-historial-cab h3{margin:3px 0 1px;font-size:19px}.reproductor-historial-cab p{margin:0;color:var(--ink-faint);font-size:11px}.reproductor-historial-cab button{flex:none}.reproductor-historial-vacio{margin:12px 0 0;padding:14px;border-radius:10px;background:var(--paper-soft);color:var(--ink-soft);font-size:12px}.reproductor-historial-lista{display:flex;flex-direction:column}.reproductor-historial-lista article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line-soft)}.reproductor-historial-lista article:last-child{border-bottom:0}.reproductor-historial-lista article>span{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--song-teal)}.reproductor-historial-lista article>div{display:flex;min-width:0;flex-direction:column}.reproductor-historial-lista strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}.reproductor-historial-lista small{margin-top:3px;overflow:hidden;color:var(--ink-faint);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.reproductor-historial-lista button{min-width:112px}
.reproductor-panel:fullscreen{width:100%;height:100%;padding:22px;border:0;border-radius:0;overflow:auto;background:var(--song-panel)}.reproductor-panel:fullscreen .reproductor-media{min-height:min(60vh,680px)}.reproductor-panel:fullscreen .reproductor-media .visor-marco:not(.solo-audio),.reproductor-panel:fullscreen .reproductor-media iframe,.reproductor-panel:fullscreen .reproductor-media video{min-height:min(60vh,680px)}

@media(max-width:850px){.reproductor-centro{grid-template-columns:1fr}.reproductor-panel{position:relative;top:auto}.reproductor-cola{max-height:none}.reproductor-media{min-height:250px}.reproductor-media .visor-marco:not(.solo-audio),.reproductor-media .visor-marco iframe,.reproductor-media .visor-marco video{min-height:250px}}
@media(max-width:560px){.reproductor-cabecera{align-items:stretch;flex-direction:column;padding:16px}.reproductor-cabecera>div:last-child button{width:100%}.reproductor-selector-zona{align-items:stretch;flex-direction:column}.reproductor-mandos{grid-template-columns:1fr 1.2fr}.reproductor-mandos button{padding:8px 4px;font-size:10px}.reproductor-opciones{grid-template-columns:1fr 1fr}.reproductor-opciones select,.reproductor-volumen{grid-column:auto}.reproductor-media{min-height:210px}.reproductor-media .visor-marco:not(.solo-audio),.reproductor-media .visor-marco iframe,.reproductor-media .visor-marco video{min-height:210px}.reproductor-media .visor-marco.solo-audio{padding:20px 10px}.reproductor-panel{padding:11px}.reproductor-audio-visual>span{width:82px;height:82px;font-size:34px}.reproductor-audio-visual strong{font-size:16px}.reproductor-historial{padding:12px}.reproductor-historial-cab{align-items:stretch;flex-direction:column}.reproductor-historial-lista article{grid-template-columns:auto minmax(0,1fr)}.reproductor-historial-lista article>button{grid-column:2;width:100%}}

@media(max-width:760px){.ficha.ficha-centro:not(.ficha-inline){padding:0 12px 80px}.texto-idiomas-grid{grid-template-columns:1fr 1fr}.texto-idiomas-grid button{grid-column:1/-1}.texto-fragmento{grid-template-columns:34px minmax(0,1fr)}}
@media(max-width:520px){.texto-vistas-modernas{grid-template-columns:1fr}.texto-idiomas-grid{grid-template-columns:1fr}.texto-idiomas-grid button{grid-column:auto}.texto-controles{padding:12px}.texto-controles-cab{align-items:stretch;flex-direction:column}.texto-controles-cab button{width:100%}.texto-lista{padding:6px}.texto-fragmento{grid-template-columns:28px minmax(0,1fr);padding:10px}.texto-numero{width:25px;height:25px}.texto-original{font-size:15px}.texto-fragmento-acciones button{flex:1 1 135px}.texto-lista-ayuda{display:none}.texto-config-voces label{grid-template-columns:1fr}}

@media(max-width:700px){.objetivo-card{grid-template-columns:auto 1fr}.objetivo-card select{grid-column:1/-1;width:100%}.progreso-metricas{grid-template-columns:1fr}.invitar-card{grid-template-columns:1fr}.invitar-ilustracion{width:62px;height:62px}.continuar-card{align-items:stretch;flex-direction:column}.continuar-card button{width:100%}.karaoke-grabar{margin-left:0}.cuaderno-herramientas{grid-template-columns:1fr 1fr}.cuaderno-herramientas input,.cuaderno-herramientas select{grid-column:1/-1}}
@media(max-width:500px){.ficha-herramientas{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ficha-herramientas button{min-height:72px;padding:8px 4px}.ficha-herramientas small{display:none}.karaoke-panel,.practica-oral{padding:13px}.karaoke-controles>*,.practica-oral-controles>*{width:100%}.karaoke-velocidades{display:grid;grid-template-columns:repeat(3,1fr)}.practica-oral-editor-acciones{grid-template-columns:1fr}.invitar-acciones,.compartir-acciones{flex-direction:column}.invitar-acciones button,.compartir-acciones button{width:100%}.aceptar-invitacion>div{grid-template-columns:1fr}.paquete-elementos article{grid-template-columns:1fr}.paquete-elementos small{grid-row:auto}.objetivo-anillo{width:74px;height:74px}}
@media(max-width:560px){
  .ficha.ficha-inline{padding:0 10px 22px;border-radius:14px}.ficha-inline .ficha-titulo{display:none}.ficha-inline .ficha-fuera{margin-right:auto}   .ficha-herramientas{gap:6px}.ficha-herramientas button{min-height:72px;padding:8px 4px}.ficha-herramientas small{display:none}
  .cancion-presentacion-texto strong{font-size:21px}.ficha-inline .verso-num{min-width:65px}.ficha-inline .verso-linea{font-size:14px}.ficha-inline .verso.suena .verso-linea{font-size:17px}.ficha-inline .verso.suena .verso-ingles::before{display:none}
}

/* =====================================================================
   AÑADIDOS DE LAS FUNCIONES NUEVAS

   El diseño de arriba es el original y NO se toca. Aquí abajo solo va el
   estilo de las cosas que antes no existían: traer un artículo de una página,
   el trozo de texto que enseña el buscador, la copia de seguridad, el aviso de
   material repetido y el mensaje de que los subtítulos se han leído bien.
   ===================================================================== */

/* --- traer el texto de una página, en el formulario de añadir --- */
.traer-articulo{
  background:var(--bg-sunk);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:12px;margin:0 0 14px;
}
.traer-articulo>label{margin-top:0}
.traer-articulo-fila{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.traer-articulo-fila input{flex:1 1 220px;min-width:0;margin:0}
.traer-articulo-fila button{flex:0 0 auto;white-space:nowrap}
.traer-articulo-fila button[disabled]{opacity:.6;cursor:progress}
.traer-articulo-aviso{
  font-size:12px;font-weight:600;color:var(--good);
  background:var(--good-soft);border-radius:6px;padding:7px 9px;margin-top:8px;
}
.traer-articulo-aviso.es-error{color:var(--danger);background:var(--danger-soft)}
.traer-articulo-aviso[hidden]{display:none}

/* --- el trozo de texto donde el buscador ha encontrado la palabra --- */
.card-pasaje{cursor:pointer;transition:border-color .15s,background .15s;margin-top:8px;padding:8px 10px;border-radius:6px;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}.card-pasaje:hover{border-color:var(--accent);background:var(--accent-soft)}
.card-pasaje .note-label{color:var(--accent)}

/* --- pantalla de bienvenida (onboarding) --- */
.onboarding{max-width:420px;margin:60px auto 0;text-align:center;padding:32px 24px;border-radius:14px;background:var(--bg-raised);border:1px solid var(--line)}
/* 17px, no los 22px de .estanteria-oficial h2 (5-sep-2026): con el mismo
   tamaño, "Empieza con una canción lista" y "O crea tu propio material"
   competían como si fueran la misma decisión. Esta es la opción avanzada
   (lo dice su propia etiqueta) -- el titular más pequeño lo confirma con
   solo mirarlo, no hace falta leer el paréntesis. */
.onboarding h2{font-size:17px;margin:0 0 6px}
.onboarding-sub{color:var(--ink-soft);font-size:14px;margin:0 0 20px;line-height:1.5}
/* padding-left a 44px, no 22px (5-sep-2026): con la lista pegada al borde
   de la tarjeta, el globo fijo de "opinión" (abajo a la izquierda, siempre
   visible a propósito) tapaba el arranque del primer paso -- justo la
   frase que le dice a alguien recién llegado qué botón tocar. Comprobado
   en píxeles reales (getBoundingClientRect), no a ojo: se pisaban 13px. */
.onboarding-pasos{text-align:left;margin:0 0 18px;padding-left:44px;counter-reset:paso}
.onboarding-pasos li{margin-bottom:14px;font-size:14px;line-height:1.5;color:var(--ink)}
.onboarding-pasos li strong{color:var(--accent)}
.onboarding-pasos li small{color:var(--ink-soft);font-size:12px}
.onboarding-consejo{text-align:left;font-size:13px;color:var(--ink-soft);background:var(--accent-soft);border-radius:8px;padding:10px 14px;margin:0}
.onboarding-avanzado{font-weight:400;font-size:.75em;color:var(--ink-soft)}

.estanteria-oficial{max-width:900px;margin:40px auto 0;padding:0 16px;text-align:center}
.estanteria-oficial h2{margin:0 0 6px;font-size:22px}
.estanteria-oficial .onboarding-sub{margin:0 0 22px}
.estanteria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;text-align:left}
.estanteria-cargando,.estanteria-vacia{grid-column:1/-1;color:var(--ink-soft);font-size:14px;padding:24px;text-align:center}
.estanteria-card{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised);overflow:hidden;display:flex;flex-direction:column}
.estanteria-miniatura{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--accent-soft)}
.estanteria-miniatura-vacia{display:grid;place-items:center;font-size:32px;color:var(--accent)}
.estanteria-badge{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;letter-spacing:.02em}
.estanteria-card-cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.estanteria-titulo{margin:0;font-weight:700;font-size:14.5px;color:var(--ink)}
.estanteria-artista{margin:0;font-size:12.5px;color:var(--ink-soft)}
.estanteria-ensena{margin:4px 0 10px;font-size:12px;color:var(--accent);font-weight:600}
.estanteria-card .estanteria-importar{margin-top:auto;width:100%}
.estanteria-codigo{margin:22px 0 0;font-size:13px;color:var(--ink-soft)}
.link-btn{background:none;border:none;padding:0;font:inherit;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline}

/* menú usuario en el header */
.top-menu{position:relative}
.top-menu-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:20px;background:var(--surface);cursor:pointer;font-size:13px;color:var(--ink);transition:border-color .15s}
.top-menu-btn:hover{border-color:var(--accent)}
.top-menu-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;text-transform:uppercase;line-height:24px;text-align:center}
.top-menu-chevron{font-size:10px;color:var(--ink-faint)}
.top-menu-dropdown{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised);box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:60;overflow:hidden}
.top-menu-dropdown[hidden]{display:none}
.top-menu-user{padding:10px 14px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-menu-sep{margin:0;border:none;border-top:1px solid var(--line)}
.top-menu-item{display:block;width:100%;padding:10px 14px;border:none;background:none;text-align:left;font-size:13px;color:var(--ink);cursor:pointer}
.top-menu-item:hover{background:var(--accent-soft);color:var(--accent)}
.top-menu-logout{color:var(--error)}
.card-pasaje mark{background:var(--gold-soft);color:var(--ink);font-weight:700;border-radius:3px;padding:0 2px}

/* --- copia de seguridad, en Progreso --- */
.copia-card{
  margin:14px 0;padding:16px;border:1px solid var(--line);border-radius:13px;
  background:var(--bg-raised);
}
.copia-card h3{margin:4px 0 6px;font-size:18px}
.copia-card p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55}
.copia-card code{
  padding:1px 5px;border-radius:4px;background:var(--bg-sunk);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
}
.copia-acciones{display:flex;gap:9px;flex-wrap:wrap;margin:13px 0 0}
.copia-acciones button[disabled]{opacity:.6;cursor:progress}
.copia-nota{
  margin-top:11px!important;padding:9px 11px;border-radius:7px;
  border-left:3px solid var(--gold);background:var(--gold-soft);
  color:var(--ink)!important;font-size:12px!important;
}
.copia-aviso{
  margin-top:10px!important;padding:9px 11px;border-radius:7px;
  font-size:12.5px!important;font-weight:600;
  color:var(--good)!important;background:var(--good-soft);
}
.copia-aviso.es-error{color:var(--danger)!important;background:var(--danger-soft)}
.copia-aviso[hidden]{display:none}

/* --- aviso de que ese enlace ya lo tienes --- */
.aviso-repetido{
  color:var(--gold)!important;background:var(--gold-soft);
  border-radius:6px;padding:7px 9px;font-size:12px!important;font-weight:600;
}
.aviso-repetido[hidden]{display:none}
.enlace-como-boton{
  background:none;border:none;padding:0;font:inherit;color:var(--accent);
  text-decoration:underline;cursor:pointer;
}

/* --- «Leídos 312 subtítulos»: el mismo hueco del error, pero en verde --- */
.letra-error.letra-error-bien{color:var(--good);background:var(--good-soft)}
.letra-error[hidden]{display:none}

/* --- la explicación de «conseguir la letra», plegada --- */
.letra-como-funciona-plegable{
  margin:8px 0 0;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--bg-sunk);
}
.letra-como-funciona-plegable>summary{
  cursor:pointer;padding:7px 10px;font-size:12px;font-weight:700;
  color:var(--accent);list-style:none;
}
.letra-como-funciona-plegable>summary::-webkit-details-marker{display:none}
.letra-como-funciona-plegable>summary::before{content:"▸ "}
.letra-como-funciona-plegable[open]>summary::before{content:"▾ "}
.letra-como-funciona-plegable>ol{margin:0;padding:0 12px 0 30px;font-size:12.5px;line-height:1.5}
.letra-como-funciona-plegable>ol li{margin-bottom:4px}
.letra-como-funciona-plegable>p{
  margin:6px 0 0;padding:0 10px 9px;font-size:12px;line-height:1.5;color:var(--ink-soft);
}

/* --- soltar el archivo de subtítulos encima --- */
.letra-traer{transition:background .12s,box-shadow .12s}
.letra-traer.letra-soltar-encima{
  background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--radius);
}

/* La fila de «buscar otra letra / borrarla y empezar», donde antes estaba
   «Tu siguiente paso». Discreta: se usa poco, pero cuando hace falta tiene
   que estar a la vista y no dentro de un panel. */
.letra-fuente-acciones{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;
}
.letra-fuente-acciones button{flex:0 1 auto}

/* EL VÍDEO, UNA VENTANA PEQUEÑA.
   Ocupaba todo el ancho, y en 16:9 eso son 748 píxeles de alto en un monitor
   normal: no quedaba sitio para la letra. Se le pone un ancho máximo y el alto
   baja solo, porque la proporción la lleva el padding. En el móvil no cambia
   nada: ahí el ancho ya era menor que el tope. */
.ficha .visor-hueco .visor-marco:not(.solo-audio):not(.visor-plataforma){
  max-width:min(100%,440px);
  margin-left:auto;margin-right:auto;
  /* padding-top:56.25% se calcula sobre el ancho del PADRE, no sobre el suyo:
     con solo el max-width, el vídeo se quedaba estrecho pero igual de alto.
     Con aspect-ratio el alto sale de su propio ancho. */
  padding-top:0;
  aspect-ratio:16/9;
}

/* La fila única entre el audio y la letra: cuatro botones pequeños, seguidos.
   Si no caben, bajan; no se apilan tres bloques como antes. */
.letra-fuente-acciones{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;align-items:center}
.letra-fuente-acciones button{flex:0 0 auto;font-size:11.5px;padding:5px 10px;min-height:30px}

/* TODAS LAS OPCIONES DE LA LETRA, PLEGADAS.
   Cerrado: una línea. Abierto: todo lo que había. Así el audio y la letra
   quedan pegados, que es lo que se mira. */
.letra-opciones{
  margin:0 0 8px;border:1px solid var(--song-border);border-radius:10px;
  background:var(--song-panel-soft);
}
.letra-opciones>summary{
  cursor:pointer;padding:7px 11px;list-style:none;
  font-size:12px;font-weight:700;color:var(--accent);
}
.letra-opciones>summary::-webkit-details-marker{display:none}
.letra-opciones>summary::before{content:"▸ "}
.letra-opciones[open]>summary::before{content:"▾ "}
.letra-opciones[open]>summary{border-bottom:1px solid var(--song-border)}
.letra-opciones .letra-cab{margin:0;border:0;background:transparent}
.letra-opciones .letra-fuente-acciones{margin:0;padding:0 11px 9px}

/* Los dos botones del mp3 («Parar y volver al inicio», «Repetir canción») ya no
   cuelgan bajo el reproductor: viven dentro del desplegable de opciones. */
.letra-opciones .audio-extras{
  position:static;inset:auto;width:auto;height:auto;
  display:flex;flex-wrap:wrap;gap:6px;padding:0 11px 9px;justify-content:flex-start;
}
.letra-opciones .audio-extras button{font-size:11.5px;padding:5px 10px;min-height:30px}

/* ============================================================
   Clases usadas por JS que no existían en la hoja de estilos.
   ============================================================ */

/* --- Componentes compartidos --- */
.fila{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-soft);}
.fila:last-child{border-bottom:0;}
.traduccion{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.sin-voces{font-size:12px;color:var(--ink-faint);font-style:italic;margin:6px 0;}

/* --- Selector de idioma de la letra --- */
.letra-idioma{min-width:0;margin:0;padding:6px 8px;font-size:12px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);}

/* --- Verso: botones de acción --- */
.verso-boton{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);
  background:none;border:1px solid var(--line);border-radius:7px;
  padding:5px 10px;min-height:28px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.verso-boton:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
.verso-boton.frase{border-color:var(--good-soft);color:var(--good);font-weight:700;}
.verso-boton.frase:hover{background:var(--good-soft);border-color:var(--good);}
.verso-boton.palabra{border-color:var(--accent-soft);color:var(--accent);font-weight:700;}
.verso-boton.palabra:hover{background:var(--accent-soft);border-color:var(--accent);}

/* --- Letra: barra de desfase (siempre visible bajo el vídeo) --- */
.letra-desfase{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 10px;margin:6px 0;border:1px solid var(--song-border);
  border-radius:9px;background:var(--song-panel-soft);font-size:12px;
}
.letra-desfase .sync-offset-lectura{
  font-weight:700;min-width:70px;text-align:center;font-variant-numeric:tabular-nums;
}

/* --- Letra: acciones para cambiar la letra --- */
.letra-panel-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.letra-cambiar-letra{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* --- Letra: botón de peligro --- */
.letra-boton-peligro{
  color:var(--danger);border-color:var(--danger-soft);
}
.letra-boton-peligro:hover{
  background:var(--danger-soft);border-color:var(--danger);color:var(--danger);
}

/* --- Cuaderno de estudio --- */
.cuaderno-intro{font-size:12px;color:var(--ink-faint);margin:0;}
.cuaderno-compartir{
  min-height:38px;border:0;border-radius:9px;
  background:var(--bg-sunk);color:var(--ink-soft);
  padding:8px 12px;font-size:11.5px;font-weight:800;cursor:pointer;
}
.cuaderno-compartir:hover{background:var(--accent-soft);color:var(--accent);}
.cuaderno-frase-completa{
  padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.cuaderno-frase-completa .frase-original{margin-bottom:8px;}

/* --- Cuaderno: badges de tipo --- */
.cuaderno-tipo.tipo-palabra{background:var(--accent-soft);color:var(--accent);}
.cuaderno-tipo.tipo-expresion{background:var(--gold-soft);color:var(--gold);}

/* --- Frase: botón repetir --- */
.frase-repetir{
  font-weight:700;
}
.frase-repetir.is-active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* --- Spotify (visor) --- */
.visor-plataforma.spotify{
  width:100%;min-height:166px;border:0;border-radius:10px;
}

/* --- Texto: fragmento --- */
.texto-fragmento-contenido{flex:1;min-width:0;}

/* --- Texto: acciones de traducción --- */
.texto-abrir-traduccion{
  margin-top:5px;
}
.texto-editor-cerrar{
  margin-left:auto;
}

/* --- Barra global de botón (fallback sin clase) ---
   Cualquier button que no tenga ya un estilo propio queda con aspecto
   legible y clickable en vez del nativo del navegador.
   5-sep-2026: esta regla llevaba 17 ":not()" seguidos para no pisar los
   botones con estilo propio -- y por eso mismo GANABA a cualquier botón
   nuevo que no se acordara de añadirse a la lista (habia 4 casos reales:
   .acceso-rapido-primario, .repaso-btn-bien/-mal, .practicar-hoy-btn y la
   estrella .activa, todos pintando su color por CSS sin que se viera
   nunca). Cada ":not(X)" suma la especificidad de X; ":where(...)" en
   cambio suma SIEMPRE cero, pase lo que pase dentro. Metiendo toda la
   lista dentro de un único ":where()" esta regla vuelve a pesar lo mismo
   que un simple "button" sola, así que cualquier clase futura la gana
   sin tener que acordarse de apuntarse aquí. */
button:not(:where(.primary,.ghost,.icon-btn,.fab,.theme-toggle,.dialog-cerrar,[class*="verso"],[class*="frase"],[class*="cuaderno"],[class*="letra"],[class*="texto"],[class*="karaoke"],[class*="card"],[class*="musica"],[class*="ayuda"],.estado-pill,[class*="sheet"],.ayuda-dialog-cerrar)){
  min-height:32px;padding:6px 12px;border-radius:7px;border:1px solid var(--line);
  background:var(--bg-raised);color:var(--ink);font-size:13px;font-weight:600;
  cursor:pointer;transition:border-color .12s,background .12s;
}
button:not(:where(.primary,.ghost,.icon-btn,.fab,.theme-toggle,.dialog-cerrar,[class*="verso"],[class*="frase"],[class*="cuaderno"],[class*="letra"],[class*="texto"],[class*="karaoke"],[class*="card"],[class*="musica"],[class*="ayuda"],.estado-pill,[class*="sheet"],.ayuda-dialog-cerrar)):hover{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}

/* mini-reproductor persistente */
.mini-player{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg-raised);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.mini-player[hidden]{display:none}
.mini-player-play{width:36px;height:36px;border:none;border-radius:50%;background:var(--song-teal);color:#fff;font-size:14px;cursor:pointer;flex-shrink:0;display:grid;place-items:center}
.mini-player-play:hover{opacity:.85}
.mini-player-play:disabled{opacity:.4;cursor:default}
.mini-player-info{flex:1;min-width:0}
.mini-player-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.mini-player-info small{font-size:11px;color:var(--ink-faint)}
.mini-player-abrir{padding:6px 12px;border:1px solid var(--song-border);border-radius:8px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}
.mini-player-abrir:hover{border-color:var(--accent);color:var(--accent)}
.mini-player-abrir[hidden]{display:none}

/* toast de atajos de teclado */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:8px;background:rgba(0,0,0,.78);color:#fff;font-size:12px;font-weight:600;z-index:80;pointer-events:none;opacity:0;transition:opacity .15s}
.toast.visible{opacity:1}


/* ====== AÑADIDO 27-08-2026: pestañas fijas abajo en móvil (zona del pulgar) ====== */
@media (max-width:700px){
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;
    display:flex;gap:2px;border-bottom:0;border-top:1px solid var(--line);
    background:var(--bg-raised);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(0,0,0,.14);
    overflow-x:visible;white-space:normal;
  }
  .tab{
    flex:1;margin:0;padding:9px 2px;font-size:11.5px;text-align:center;
    border-bottom:0;border-radius:9px;
  }
  .tab.active{background:var(--accent-soft);border-bottom:0}
  /* hueco para que el contenido no quede tapado por pestañas + mini reproductor */
  .shell{padding-bottom:175px}
  .mini-player{bottom:calc(53px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(125px + env(safe-area-inset-bottom))}

  /* 1-sep-2026: el "+ Añadir recurso" y el "💬" de opinión (z-index:20)
     quedaban tapados del todo por esta misma barra de pestañas
     (z-index:60) -- justo donde debía caer cada uno hay una pestaña
     real (Comunidad / Hoy), así que tocar ahí cambiaba de pantalla en
     vez de abrir nada, sin ningún error. Confirmado: ningún @media los
     reposicionaba, a diferencia de .mini-player y .toast arriba. */
  .fab, .opinion-fab{bottom:calc(53px + env(safe-area-inset-bottom))}

  /* El modal "Nuevo recurso" (.overlay/.sheet, z-index:30) tenía el
     mismo problema: esta barra de pestañas se pintaba por encima de su
     mitad inferior, incluido el botón "Guardar". Un modal bloqueante
     tiene que quedar siempre por delante de la navegación, así que aquí
     sube por encima de las pestañas en vez de perseguir con padding
     cuánto ocupan. */
  .overlay{z-index:70}
}

/* ============================================================
   MODO PRÁCTICA (repaso.js), 28-ago-2026.
   La tarjeta de repaso copia la carcasa del "test principal" de Frasly
   (Dropbox/PROGRAMA CLAUDE INGLES/MODELO_PANTALLA.md): una sola tarjeta
   blanca, dos mitades iguales, FIJA (la mitad de abajo ya ocupa su sitio
   antes de revelar; al pulsar "Ver" solo cambia el texto). No copiar de
   memoria si hay que retocarla: mirar ese archivo.
   ============================================================ */

/* --- Pantalla de elegir qué repasar (dentro de #content, como cualquier pestaña) --- */
.repaso-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;}
.repaso-chip{
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);
}
.repaso-chip.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);}
.repaso-informe{font-size:13px;color:var(--ink-faint);margin:0 0 12px;}
.repaso-lista{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 16px;}
.repaso-item{display:flex;flex-direction:column;gap:2px;padding:11px 14px;background:var(--surface);font-size:13.5px;}
.repaso-item-es{font-weight:700;color:var(--tf-es);}
.repaso-item-en{color:var(--tf-en);}
.repaso-item-origen{color:var(--ink-faint);font-size:12px;}
.repaso-vacio{color:var(--ink-faint);padding:30px 10px;text-align:center;}
.repaso-empezar{display:block;width:100%;font:inherit;font-weight:800;font-size:17px;cursor:pointer;
  padding:16px 22px;margin:4px 0 22px;border:0;border-radius:12px;background:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22);}
.repaso-empezar:hover{filter:brightness(1.08);}
.repaso-empezar:disabled{opacity:.5;cursor:default;box-shadow:none;}

/* --- La tarjeta de repaso a pantalla completa --- */
.repaso-pantalla{position:fixed;inset:0;z-index:500;background:var(--bg);display:flex;flex-direction:column;}
/* EL FALLO REAL (28-ago-2026): sin esta línea, [hidden] no bastaba para
   ocultarla. Un author-stylesheet con "display:flex" en una clase gana
   SIEMPRE al display:none del navegador para [hidden], aunque las dos reglas
   tengan la misma especificidad: los estilos de página siempre ganan a los
   del navegador en el cascade, no importa el orden en que se escriban. Por
   eso la tarjeta de repaso, vacía, tapaba TODA la app desde que se cargaba,
   antes de pulsar nada -- lo que parecía "la app se queda en blanco". Hay
   que decirle explícitamente que si lleva [hidden], se oculte de verdad. */
.repaso-pantalla[hidden]{display:none;}
.repaso-cima{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);}
.repaso-cima-contador{font-size:13px;color:var(--ink-faint);}
.repaso-cerrar{font:inherit;font-size:20px;line-height:1;cursor:pointer;border:0;background:none;color:var(--ink-soft);padding:4px 8px;}
.repaso-tarjeta{flex:1;max-width:1100px;width:100%;margin:0 auto;overflow:hidden;padding:0;
  display:flex;flex-direction:column;background:var(--surface);}
.repaso-origen{flex:0 0 auto;text-align:center;padding:8px 3vw 0;
  font-size:clamp(11px,1.3vw,14px);color:var(--ink-faint);}
.repaso-fila{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;}
.repaso-mitad{flex:1 1 0;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:3vh 3vw;text-align:center;}
.repaso-mitad + .repaso-mitad{border-top:1px solid var(--line);}
.repaso-texto{font-size:calc(clamp(20px,7vw,46px));line-height:1.25;}
.repaso-texto.repaso-es{color:var(--tf-es);}
.repaso-texto.repaso-en{color:var(--tf-en);}
/* Antes de revelar, gana el gris del placeholder aunque el span siga
   llevando la clase .repaso-en (misma especificidad que .repaso-texto.repaso-en:
   sin esto ganaba el verde por venir después en la hoja). */
.repaso-texto.repaso-placeholder{color:var(--ink-faint);font-size:clamp(14px,1.6vw,18px);font-weight:400;}

/* Contenido de estudio sin copiar (28-ago-2026): "nada se puede copiar ni
   descargar" (Ramón). Antes user-select:none solo estaba en elementos de
   interfaz (ver .ajustes-acordeon summary más arriba); esto lo extiende a
   las letras, traducciones y frases de verdad. El aviso al intentar copiar
   o hacer clic derecho va en app.js (evento copy/contextmenu). */
.verso-ingles,.verso-auto,.verso-tuyo-texto,
.texto-original,.texto-traduccion-vista,
.repaso-texto,
.karaoke-actual,.karaoke-traduccion,.karaoke-siguiente{
  user-select:none;-webkit-user-select:none;-moz-user-select:none;
  -webkit-touch-callout:none;
}
.repaso-botones{flex:0 0 auto;display:flex;width:100%;border-top:1px solid var(--line);background:var(--surface);}
.repaso-botones button{flex:1;font:inherit;font-weight:700;font-size:clamp(13px,1.8vw,16px);
  cursor:pointer;border:0;background:none;padding:14px 6px;color:var(--ink);}
.repaso-botones button + button{border-left:1px solid var(--line);}
.repaso-botones button:disabled{opacity:.4;cursor:default;}
.repaso-btn-bien{color:var(--good);}
/* Ámbar, no rojo de alarma (4-sep-2026): "Me costó" no es un error, es la
   mitad honesta de la respuesta -- --danger es el mismo tono que usan los
   avisos de fallo de verdad en toda la web (p.ej. .comprar-error), y
   mezclarlos hacía que fallar aquí se sintiera como un error del sistema. */
.repaso-btn-mal{color:var(--gold);}

/* Aviso de una sola vez al entrar (28-ago-2026): mismo patrón visual que
   .ayuda-dialog pero mucho más pequeño, es un mensaje corto con un botón. */
.aviso-una-vez{box-sizing:border-box;width:min(440px,calc(100% - 28px));padding:26px 24px;
  border:1px solid var(--line);border-radius:16px;background:var(--bg-raised);color:var(--ink);
  box-shadow:0 30px 100px rgba(0,0,0,.45);}
.aviso-una-vez::backdrop{background:rgba(3,7,18,.6);backdrop-filter:blur(3px);}
.aviso-una-vez[hidden]{display:none;}
.aviso-una-vez h2{margin:0 0 10px;font-size:19px;}
.aviso-una-vez p{margin:0 0 18px;color:var(--ink-soft);line-height:1.55;font-size:14.5px;}
.aviso-una-vez button{width:100%;}

/* Valoración y sugerencias (30-ago-2026): estrellas dentro del mismo molde
   .compartir-dialog que ya usan nueva-lista/receta/importar/compartir. Un
   icono propio, siempre visible, en la esquina contraria al .fab de añadir
   recurso para que no choquen. */
.valoracion-estrellas{display:flex;gap:8px;justify-content:center;margin:8px 0 20px;}
.valoracion-estrellas button{background:none;border:0;padding:2px;font-size:44px;line-height:1;
  cursor:pointer;color:var(--ink-faint);}
.valoracion-estrellas button.activa{color:var(--gold);}
.opinion-sep{border:none;border-top:1px solid var(--line);margin:22px 0 18px;}

/* Icono más visible (30-ago-2026, Ramón: "tiene que ser más visible... sin
   ser invasivo"): más grande, color propio en vez de mezclarse con el
   fondo, y un pulso suave espaciado (la mayor parte del ciclo en reposo)
   en vez de un parpadeo constante. */
@keyframes opinion-fab-pulso{
  0%,80%{box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 0 var(--accent-soft);}
  90%{box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 12px transparent;}
  100%{box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 0 transparent;}
}
.opinion-fab{
  position:fixed;left:20px;bottom:22px;z-index:20;
  width:58px;height:58px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  animation:opinion-fab-pulso 6s ease-out infinite;
}
.opinion-fab:hover{filter:brightness(1.08);animation-play-state:paused;}

/* Instalar como app (30-ago-2026): pasos numerados dentro del mismo molde
   .compartir-dialog. */
.instalar-pasos{margin:14px 0;padding-left:22px;line-height:1.6;font-size:14.5px;}
.instalar-pasos li{margin-bottom:6px;}
.instalar-nota{margin:0 0 14px;padding:10px 12px;border-radius:8px;
  background:var(--gold-soft);color:var(--ink);font-size:13px;line-height:1.5;}
.instalar-no-mostrar{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-size:13px;color:var(--ink-soft);cursor:pointer;}

/* ===== 04-09-2026 · desbordamientos horizontales (informe Frasly Lab V120) ===== */

/* 1. La barra de la ficha: puede bajar de línea y el título va entero arriba */
.ficha-barra{ flex-wrap:wrap; gap:8px; }
.ficha-titulo{ flex:1 1 100%; order:-1; white-space:normal; overflow:visible;
               font-size:15px; line-height:1.3; }
.ficha-ayuda-btn,.ficha-practica-btn,
.ficha-repaso-btn,.ficha-compartir-btn{ flex:0 1 auto; min-width:0; min-height:44px; }

/* 2. Los flotantes, por encima del mini-reproductor, en móvil Y en escritorio */
.fab,.opinion-fab{ z-index:55; }
body:has(.mini-player:not([hidden])) .fab,
body:has(.mini-player:not([hidden])) .opinion-fab{
  bottom:calc(80px + env(safe-area-inset-bottom));
}

@media (max-width:700px){
  /* 3. Las pestañas: nada queda fuera de alcance */
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tab{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        min-height:44px; }
  .tab-reproductor{ font-size:0; }
  .tab-reproductor::after{ content:"▶"; font-size:15px; }

  .fab,.opinion-fab{ bottom:calc(53px + env(safe-area-inset-bottom)); }
  body:has(.mini-player:not([hidden])) .fab,
  body:has(.mini-player:not([hidden])) .opinion-fab{
    bottom:calc(113px + env(safe-area-inset-bottom));
  }
}

/* 4. "Comunidad" ya no vive en la barra: con 6 pestañas no hay ancho de
   móvil en el que quepan sin deslizar (511 px pedidos contra 360 disponibles,
   incluso con el ▶ reducido a icono). Se movió al menú de usuario
   (index.html), reutilizando la misma clase .tab para no tocar el cableado
   de app.js. Estas reglas (selector de dos clases, gana a cualquier .tab de
   una sola clase sea cual sea su orden en la hoja) la hacen parecer un
   elemento de menú normal, no una pestaña suelta. */
.top-menu-dropdown .tab{
  display:block; width:100%; margin:0; padding:10px 14px;
  font-size:13px; font-weight:600; color:var(--ink); text-align:left;
  border-bottom:none; border-radius:0; flex:none; min-height:0;
}
.top-menu-dropdown .tab:hover{ background:var(--accent-soft); color:var(--accent); }
.top-menu-dropdown .tab.active{ background:var(--accent-soft); color:var(--accent); border-bottom:none; }

/* "▶ Practicar (X pendientes hoy)" en la pantalla Hoy (4-sep-2026, Fase 2).
   Vacío mientras no se sabe si hay algo pendiente -- por eso el hueco no
   tiene borde ni fondo propios: si la cuenta da 0, no debe notarse que
   hubo un hueco ahí. */
.practicar-hoy-slot:empty{ margin:0; }
.practicar-hoy-btn{
  display:block; width:100%; margin:10px 0 22px; padding:14px 16px;
  border:none; border-radius:10px; background:var(--song-teal); color:#fff;
  font-size:15px; font-weight:800; cursor:pointer; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12); min-height:44px;
}
.practicar-hoy-btn:hover{ filter:brightness(1.06); }

/* Los 2 botones grandes de la portada (4-sep-2026, Fase 2). */
.accesos-rapidos-hoy{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.acceso-rapido-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:16px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-raised); color:var(--ink); text-align:left; cursor:pointer;
  min-height:76px;
}
.acceso-rapido-btn strong{ font-size:15px; }
.acceso-rapido-btn small{ color:var(--ink-faint); font-size:11.5px; }
.acceso-rapido-btn:hover{ border-color:var(--accent); }
.acceso-rapido-primario{ background:var(--accent); border-color:var(--accent); color:#fff; }
.acceso-rapido-primario small{ color:rgba(255,255,255,.8); }
.acceso-rapido-primario:hover{ filter:brightness(1.06); border-color:var(--accent); }
@media (max-width:420px){
  .accesos-rapidos-hoy{ grid-template-columns:1fr; }
}

/* "Texto grande" (4-sep-2026, Fase 4): no es un tema aparte, es este único
   bloque. Sube lo que de verdad hay que pulsar y leer -- botones, pestañas,
   campos, texto de lectura -- sin tocar layout ni colores. Deliberadamente
   NO es una reescritura de toda la hoja a rem: sube los sitios de más
   tráfico (los mismos que la Parte 1 del informe señaló como demasiado
   pequeños), no cada regla de la app. */
:root[data-tamano="grande"]{
  --tf-tamano-cuerpo:18px; --tf-tamano-boton-alto:58px;
}
[data-tamano="grande"] body{ font-size:16px; }
[data-tamano="grande"] button.primary,
[data-tamano="grande"] button.ghost,
[data-tamano="grande"] .acceso-rapido-btn,
[data-tamano="grande"] .practicar-hoy-btn,
[data-tamano="grande"] .ficha-atras,
[data-tamano="grande"] .ficha-ayuda-btn,
[data-tamano="grande"] .ficha-practica-btn,
[data-tamano="grande"] .ficha-repaso-btn,
[data-tamano="grande"] .ficha-compartir-btn,
[data-tamano="grande"] .top-menu-item,
[data-tamano="grande"] .estado-pill{
  font-size:16px; min-height:var(--tf-tamano-boton-alto); padding-top:14px; padding-bottom:14px;
}
/* .tab NO sube de tamaño aquí a propósito: en móvil es la barra fija de
   abajo, y su altura está descontada a pelo en píxeles en .mini-player/.fab
   (ver el parche de desbordamientos horizontales, más arriba). Subirla
   volvería a romper justo lo que ese parche arregló. Sus 44px de la Fase 0
   ya cumplen el mínimo de accesibilidad sin tocar esos huecos. */
[data-tamano="grande"] input[type="text"],
[data-tamano="grande"] input[type="email"],
[data-tamano="grande"] input[type="password"],
[data-tamano="grande"] input[type="url"],
[data-tamano="grande"] textarea,
[data-tamano="grande"] select{ font-size:17px; padding:13px 14px; min-height:var(--tf-tamano-boton-alto); }
[data-tamano="grande"] label{ font-size:14px; }
[data-tamano="grande"] .ficha-titulo{ font-size:17px; }
/* Asistente de 3 pasos para añadir contenido (4-sep-2026, Fase 2). */
.alta-paso-indicador{
  margin:0 0 14px; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent);
}
.alta-paso-indicador:empty{ display:none; }
#alta-siguiente-btn, #alta-guardar-btn{ margin-left:auto; }

/* Roadmap de la ficha (4-sep-2026, Fase 3): una línea, sin botones -- es un
   mapa de dónde estás, no un sitio nuevo donde pulsar (para eso ya está el
   botón grande de siempre, que decide lo mismo que aquí se pinta). */
.ficha-roadmap{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 0 4px; font-size:11.5px; }
.ficha-roadmap[hidden]{ display:none; }
.roadmap-paso{
  padding:3px 10px; border-radius:999px; background:var(--bg-sunk); color:var(--ink-faint); font-weight:700;
}
.roadmap-separador{ color:var(--ink-faint); }
.roadmap-hecho{ background:var(--good-soft); color:var(--good); }
.roadmap-actual{ background:var(--accent); color:#fff; }

[data-tamano="grande"] .verso-ingles,
[data-tamano="grande"] .verso-auto,
[data-tamano="grande"] .verso-tuyo-texto,
[data-tamano="grande"] .texto-original,
[data-tamano="grande"] .texto-traduccion-vista,
[data-tamano="grande"] .repaso-texto,
[data-tamano="grande"] .card-title,
[data-tamano="grande"] .duda-texto{ font-size:calc(1em + 2.5px); line-height:1.5; }

/* Textos auxiliares que ni el modo grande subía todavía (4-sep-2026):
   quedaban a 9-11,5px, por debajo del cuerpo normal de la propia app. */
[data-tamano="grande"] .card-meta,
[data-tamano="grande"] .roadmap-paso,
[data-tamano="grande"] .campo-pista{ font-size:13px; }
[data-tamano="grande"] .app-version{ font-size:11px; }