/* ============================================================
   ENGLISH ACADEMY RVN — speakflow.css
   Usa las variables de variables.css → hereda los 10 temas
   y los 3 tamaños de letra automáticamente.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-darker);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background var(--transition), color var(--transition);
}

/* ── BARRA SUPERIOR ── */
.sf-top {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 20px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    flex-wrap: wrap;
}
.sf-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; }
.sf-brand i { color: var(--primary); }
.sf-brand small { font-weight: 500; color: var(--text-muted); font-size: .72rem; }
.sf-home-link {
    color: var(--text-muted); font-size: .72rem; font-weight: 500;
    text-decoration: none; border-radius: 5px; transition: var(--transition);
}
.sf-home-link:hover, .sf-home-link:focus-visible {
    color: var(--primary-light); text-decoration: underline; outline: none;
}
.sf-top-ctrls { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sf-selbox {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 6px 10px;
}
.sf-selbox i { color: var(--text-muted); }
.sf-selbox select {
    background: transparent; color: var(--text-primary); border: none;
    font-size: .82rem; outline: none; cursor: pointer; font-family: inherit;
}
.sf-selbox select option { background: var(--bg-dark); color: var(--text-primary); }
.sf-menu-btn {
    display: none; background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text-primary); border-radius: var(--radius-md);
    padding: 8px 12px; cursor: pointer;
}

/* ── LAYOUT ── */
.sf-layout { display: flex; min-height: calc(100vh - 58px); }

/* ── SIDEBAR ── */
.sf-side {
    width: 300px; flex-shrink: 0;
    background: var(--bg-dark); border-right: 1px solid var(--border);
    padding: 18px 14px; overflow-y: auto;
    max-height: calc(100vh - 58px); position: sticky; top: 58px;
}
.sf-side-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.sf-side-sub { font-size: .72rem; color: var(--text-muted); margin-bottom: 14px; }
.sf-search {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 9px 12px; color: var(--text-primary);
    font-size: .85rem; margin-bottom: 14px; outline: none; font-family: inherit;
}
.sf-search:focus { border-color: var(--border-hover); }
.sf-coll {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer;
    margin-bottom: 7px; border: 1px solid transparent; transition: var(--transition);
}
.sf-coll:hover { background: var(--bg-input); border-color: var(--border); }
.sf-coll.active { background: var(--primary-glow); border-color: var(--border-hover); }
.sf-coll-emoji { font-size: 1.5rem; flex-shrink: 0; }
.sf-coll-info { flex: 1; min-width: 0; }
.sf-coll-label { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-coll.active .sf-coll-label { color: var(--primary-light); }
.sf-coll-meta { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.sf-side-note {
    margin-top: 16px; padding: 11px; background: var(--bg-input);
    border: 1px dashed var(--border-hover); border-radius: var(--radius-md);
    font-size: .72rem; color: var(--text-muted); line-height: 1.5;
}
.sf-side-note code { color: var(--primary-light); }

/* ── MAIN ── */
.sf-main { flex: 1; padding: 22px; display: flex; flex-direction: column; align-items: center; max-width: 840px; margin: 0 auto; width: 100%; }

.sf-banner {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: var(--bg-dark); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 16px; font-weight: 600;
}
.sf-banner .sf-b-count { margin-left: auto; font-size: .78rem; color: var(--text-muted); font-weight: 500; }

/* ── CONTROLES (modo + repeticiones + categoría) ── */
.sf-controls { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.sf-modes { display: flex; gap: 8px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; }
.sf-mode {
    flex: 1; padding: 9px 16px; border: none; background: transparent; color: var(--text-secondary);
    border-radius: var(--radius-md); cursor: pointer; font-size: .9rem; font-weight: 600;
    transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit;
}
.sf-mode.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.sf-mode.sf-disabled { opacity: .4; cursor: not-allowed; }
[data-theme="oro-negro"] .sf-mode.active,
[data-theme="lima-acido"] .sf-mode.active,
[data-theme="claro-profesional"] .sf-mode.active { color: #1a2332; }

.sf-controls-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sf-cat-select {
    flex: 1; min-width: 180px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 9px 12px; color: var(--text-primary);
    font-size: .85rem; outline: none; cursor: pointer; font-family: inherit;
}
.sf-cat-select option { background: var(--bg-dark); }

/* Rango y configuración de lectura */
.sf-range-group {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 16px; background: var(--bg-darker); border: 1px solid var(--border-hover);
    border-radius: 16px;
}
.sf-range-label { color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sf-range-sep { color: var(--border-hover); font-size: 1rem; font-weight: 700; }
.sf-range-input {
    width: 70px; padding: 6px 10px; border: 1px solid var(--border-hover); border-radius: 10px;
    outline: none; background: var(--primary-glow); color: var(--primary-light);
    font-family: inherit; font-size: .9rem; font-weight: 700; text-align: center;
    transition: var(--transition); -moz-appearance: textfield;
}
.sf-range-input::-webkit-outer-spin-button, .sf-range-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.sf-range-input:hover, .sf-range-input:focus { border-color: var(--primary-light); background: rgba(74,144,217,.18); }
.sf-audio-controls-row {
    width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-top: 10px; border-top: 1px solid var(--border);
}
.sf-audio-settings { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf-control-label { color: var(--text-muted); font-size: .725rem; font-weight: 500; white-space: nowrap; }
.sf-control-select {
    padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; outline: none;
    background: var(--bg-input); color: var(--text-primary); font-family: inherit;
    font-size: .775rem; cursor: pointer; transition: var(--transition);
}
.sf-control-select:hover, .sf-control-select:focus { border-color: var(--border-hover); }
.sf-control-select option { background: var(--bg-dark); color: var(--text-primary); }
.sf-story-level { display: flex; align-items: center; gap: 7px; }
.sf-story-level[hidden] { display: none; }
.sf-level-select { border-color: var(--primary-light); color: var(--primary-light); font-weight: 700; }
.sf-reading-mode {
    margin-left: auto; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-input); color: var(--text-muted); font-family: inherit;
    font-size: .725rem; font-weight: 600; cursor: default;
}
.sf-reading-mode.active { background: var(--primary-glow); color: var(--primary-light); }
.sf-playback-controls { display: flex; align-items: center; gap: 7px; }
.sf-playback-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 13px; border: 1px solid var(--border); border-radius: 9px;
    font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
    transition: var(--transition);
}
.sf-start-btn { background: var(--primary); border-color: var(--primary); color: #fff; }
.sf-start-btn:hover { filter: brightness(1.1); }
.sf-start-btn.paused { background: var(--primary-glow); color: var(--primary-light); }
.sf-stop-btn { background: var(--bg-input); color: var(--text-secondary); }
.sf-stop-btn:hover { border-color: var(--error); color: var(--error); }

/* ── ESTADOS DE CARGA ── */
.sf-loading, .sf-error { width: 100%; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 60px 20px; color: var(--text-muted); text-align: center; }
.sf-error { color: var(--error); }
.sf-spinner { width: 38px; height: 38px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: sf-spin 0.9s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ── TARJETA DE PRÁCTICA ── */
.sf-card {
    width: 100%; background: var(--bg-dark); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 26px;
}
.sf-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.sf-pill { font-size: .72rem; padding: 4px 10px; border-radius: 20px; }
.sf-tense { color: var(--text-muted); background: var(--bg-input); }
.sf-lvl { font-weight: 700; color: #fff; }
.sf-role { background: var(--primary-glow); color: var(--primary-light); font-weight: 600; }
.sf-sub-toggle { cursor: pointer; color: var(--text-muted); border: 1px solid var(--border); user-select: none; }
.sf-counter { margin-left: auto; font-size: .78rem; color: var(--text-muted); }

/* Indicador visual de turno */
.sf-turn-cue {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0 0 18px; padding: 14px 18px; border: 2px solid var(--border);
    border-radius: var(--radius-lg); background: var(--bg-input); color: var(--text-secondary);
    text-align: center; transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.sf-turn-icon {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; border-radius: 50%; background: var(--bg-dark); font-size: 1.05rem;
}
.sf-turn-text { font-size: 1rem; font-weight: 800; letter-spacing: .01em; }
.sf-turn-cue.speaking {
    border-color: var(--primary); background: var(--primary-glow); color: var(--primary-light);
}
.sf-turn-cue.speaking .sf-turn-icon { background: var(--primary); color: #fff; animation: sf-turn-sound 1s ease-in-out infinite; }
.sf-turn-cue.respond {
    border-color: var(--success); background: rgba(76, 175, 80, .14); color: var(--success);
    box-shadow: 0 0 0 5px rgba(76, 175, 80, .08);
    animation: sf-turn-respond 1.15s ease-in-out infinite;
}
.sf-turn-cue.respond .sf-turn-icon { background: var(--success); color: #fff; }
.sf-turn-cue.checking { border-color: var(--border-hover); color: var(--primary-light); }
.sf-turn-cue.checking .sf-turn-icon { color: var(--primary-light); animation: sf-spin 1s linear infinite; }
.sf-turn-cue.teaching { border-color: #ffb347; background: rgba(255, 179, 71, .12); color: #ffb347; }
.sf-turn-cue.teaching .sf-turn-icon { background: #ffb347; color: #1a2332; animation: sf-turn-sound 1s ease-in-out infinite; }
.sf-turn-cue.success { border-color: var(--success); background: rgba(76, 175, 80, .12); color: var(--success); }
.sf-turn-cue.retry { border-color: #ffb347; background: rgba(255, 179, 71, .1); color: #ffb347; }
@keyframes sf-turn-sound { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
@keyframes sf-turn-respond { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }

.sf-question {
    background: var(--primary-glow); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; display: none;
}
.sf-question.show { display: block; }
.sf-q-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.sf-q-en { font-size: 1.05rem; font-weight: 600; }
.sf-q-es { font-size: .85rem; color: var(--text-secondary); margin-top: 3px; }

.sf-animo { text-align: center; color: var(--text-muted); font-size: .82rem; margin-bottom: 10px; }
.sf-en { font-size: 1.75rem; font-weight: 700; text-align: center; line-height: 1.35; margin: 6px 0; }
.sf-w { transition: color .25s; }
.sf-w.ok { color: var(--success); }
.sf-w.miss { color: var(--text-muted); text-decoration: underline dotted var(--border-hover); }
.sf-teach-word {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 6px;
    color: var(--text-muted);
    transition: color .2s, background .2s, transform .2s;
}
.sf-teach-word.spoken { color: var(--success); }
.sf-teach-word.current {
    color: #1a2332;
    background: #ffb347;
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(255, 179, 71, .18);
}
.sf-divider { height: 1px; background: var(--border); margin: 16px 0; }
.sf-es { font-size: 1.05rem; color: var(--text-secondary); text-align: center; transition: filter .2s; }
.sf-es.sf-hidden { filter: blur(6px); cursor: pointer; }

/* ── MICRÓFONO ── */
.sf-mic-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.sf-mic-btn {
    width: 96px; height: 96px; border-radius: 50%; border: none; background: var(--primary);
    color: #fff; font-size: 2rem; cursor: pointer; box-shadow: var(--shadow-primary);
    transition: transform .2s; position: relative; display: flex; align-items: center; justify-content: center;
}
[data-theme="oro-negro"] .sf-mic-btn,
[data-theme="lima-acido"] .sf-mic-btn { color: #1a2332; }
.sf-mic-btn:hover { transform: scale(1.05); }
.sf-mic-btn.listening { animation: sf-pulse 1.3s infinite; }
.sf-mic-btn.listening::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    border: 3px solid var(--primary); opacity: .5; animation: sf-ring 1.3s infinite;
}
@keyframes sf-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--primary-glow); } 50% { box-shadow: 0 0 0 18px transparent; } }
@keyframes sf-ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.4); opacity: 0; } }
.sf-mic-label { margin-top: 10px; font-size: .82rem; color: var(--text-muted); }
.sf-transcript { margin-top: 12px; min-height: 24px; font-size: 1rem; color: var(--text-secondary); font-style: italic; text-align: center; }
.sf-mic-hint { margin-top: 8px; font-size: .78rem; color: var(--error); min-height: 18px; text-align: center; }

/* ── PUNTUACIÓN ── */
.sf-score-box { margin-top: 18px; text-align: center; display: none; }
.sf-score-box.show { display: block; animation: sf-pop .35s; }
@keyframes sf-pop { 0% { transform: scale(.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.sf-score-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.sf-score-msg { font-size: .95rem; margin-top: 6px; font-weight: 600; }
.sf-ladder { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.sf-ladder-item { background: var(--bg-input); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: .82rem; font-weight: 700; }
.sf-ladder-item.best { border-color: var(--success); color: var(--success); }
.sf-ladder-arrow { color: var(--text-muted); }

/* ── NAVEGACIÓN ── */
.sf-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    gap: 10px;
    justify-content: center;
    margin-top: 24px;
}
.sf-btn {
    border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary);
    border-radius: var(--radius-md); padding: 11px 20px; cursor: pointer; font-size: .9rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; transition: var(--transition); font-family: inherit;
}
.sf-btn:hover { border-color: var(--border-hover); }
.sf-btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }

@media (max-width: 520px) {
    .sf-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        position: sticky;
        bottom: 8px;
        z-index: 20;
        padding: 10px;
        background: var(--bg-dark);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .22);
    }
    .sf-nav .sf-btn {
        min-width: 0;
        padding: 10px 6px;
        justify-content: center;
        gap: 5px;
        font-size: .78rem;
        white-space: nowrap;
    }
}
[data-theme="oro-negro"] .sf-btn-primary,
[data-theme="lima-acido"] .sf-btn-primary,
[data-theme="claro-profesional"] .sf-btn-primary { color: #1a2332; }

/* ── PROGRESO DIARIO ── */
.sf-prog { width: 100%; display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.sf-prog-card { flex: 1; min-width: 120px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 16px; text-align: center; }
.sf-prog-num { font-size: 1.4rem; font-weight: 800; color: var(--primary-light); }
.sf-prog-lbl { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
    .sf-side {
        position: fixed; left: 0; top: 58px; bottom: 0; z-index: 40;
        transform: translateX(-100%); transition: transform .3s;
    }
    .sf-side.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sf-menu-btn { display: block; }
    .sf-en { font-size: 1.4rem; }
    .sf-main { padding: 16px; }
    .sf-audio-controls-row { flex-direction: column; align-items: stretch; }
    .sf-audio-settings { justify-content: center; }
    .sf-reading-mode { margin-left: 0; align-self: flex-end; }
    .sf-playback-controls { justify-content: center; }
}

/* ── ACCESIBILIDAD ── */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}