/* ============================================================
   LSPedia - Estilos de Subtítulos en tiempo real (SubtitulosV2)
   Archivo independiente. No modifica estilos.css ni quiz.css,
   aunque reutiliza la clase .quiz-btn-fullscreen que ya existe.
   ============================================================ */

/* ============================================================
   PANTALLA COMPLETA REAL (overlay fijo que cubre TODO el viewport,
   incluso en móviles donde el navegador deja barras/huecos con un
   simple 100vh). Usamos 100dvh con fallback a 100vh, y position:
   fixed para que no dependa del scroll ni del layout de la página.
   ============================================================ */
#seccionSubtitulos.quiz-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2050;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 10px;
    background-color: #000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
/* Evita que la página de fondo haga scroll mientras estamos en
   pantalla completa simulada (se activa/desactiva por JS). */
body.subtitulos-bloquear-scroll {
    overflow: hidden;
}

#seccionSubtitulos.quiz-fullscreen #subtitulosEnVivo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#seccionSubtitulos.quiz-fullscreen .subtitulos-pantalla {
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   MODO INMERSIVO (pantalla completa): se oculta el encabezado
   blanco y la barra de controles de arriba, dejando solo los
   subtítulos, los controles flotantes (tamaño de letra y color) y
   un botón discreto para salir.
   ============================================================ */
#seccionSubtitulos.subtitulos-inmersivo #subtitulosPanelTitulo,
#seccionSubtitulos.subtitulos-inmersivo #subtitulosBarraControles,
#seccionSubtitulos.subtitulos-inmersivo #subtitulosControlesInferiores {
    display: none !important;
}
#seccionSubtitulos.subtitulos-inmersivo .subtitulos-btn-salir-cine {
    display: inline-flex !important;
}
/* En modo inmersivo no mostramos el texto de "Escuchando…": la idea
   es una pantalla negra limpia hasta que aparezca el primer subtítulo. */
#seccionSubtitulos.subtitulos-inmersivo .subtitulos-placeholder {
    display: none;
}

/* --- Caja principal donde aparece el texto de los subtítulos ---
   El texto (.subtitulos-texto) se centra tanto vertical como
   horizontalmente dentro de esta caja. Como .subtitulos-texto ya
   no ocupa todo el alto disponible (ver más abajo), el primer
   subtítulo aparece centrado en la pantalla negra; a medida que
   crece pasa a ocupar más líneas, siempre centrado, hasta el
   máximo de 4 líneas que permite .subtitulos-texto. */
.subtitulos-pantalla {
    position: relative;
    background-color: #0f172a;
    border-radius: 18px;
    height: 46vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
}
#seccionSubtitulos.subtitulos-inmersivo .subtitulos-pantalla {
    background-color: #000;
    border-radius: 0;
}

/* --- Controles flotantes (tamaño de letra y color): siempre visibles,
   tanto en la vista normal como en pantalla completa. --- */
.subtitulos-controles-flotantes {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: flex;
    gap: 6px;
}
.subtitulos-controles-flotantes .btn {
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.subtitulos-controles-flotantes .btn:hover,
.subtitulos-controles-flotantes .btn:focus {
    opacity: 1;
}

/* El bloque de texto crece desde el centro de la pantalla y se
   detiene en 4 líneas (line-height 1.45 × 4 ≈ 5.8em, en "em" para
   que se ajuste solo al tamaño de fuente elegido en tam-sm/md/lg/xl).
   Al superar las 4 líneas, en vez de seguir creciendo se vuelve un
   "visor" que se desplaza solo (ver renderizarTexto() en
   subtitulos.js): las líneas más viejas se recortan por arriba y la
   más reciente queda siempre visible abajo, sin scrollbar. */
.subtitulos-texto {
    color: #ffffff;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    max-width: 900px;
    max-height: 5.8em;
    overflow-y: auto;
    white-space: normal;
    word-wrap: break-word;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    scrollbar-width: none; /* Firefox: oculta la barra de scroll */
}
.subtitulos-texto::-webkit-scrollbar {
    display: none; /* Chrome/Safari: oculta la barra de scroll */
}

.subtitulos-placeholder {
    color: #94a3b8;
    font-weight: 500;
    font-style: italic;
    font-size: 1.15rem;
}

/* Texto todavía "en proceso" de reconocerse (no confirmado): se
   muestra pegado al texto ya confirmado, en el mismo párrafo, pero
   resaltado en el color elegido por el usuario (ver botón 🟢/🟡/🔵). */
.subtitulos-interina {
    font-weight: 800;
}
.subtitulos-interina.color-verde { color: #4ade80; }
.subtitulos-interina.color-amarillo { color: #facc15; }
.subtitulos-interina.color-azul { color: #38bdf8; }

/* --- Tamaños de texto ajustables (accesibilidad) --- */
.subtitulos-texto.tam-sm { font-size: 1.25rem; }
.subtitulos-texto.tam-md { font-size: 1.75rem; }
.subtitulos-texto.tam-lg { font-size: 2.35rem; }
.subtitulos-texto.tam-xl { font-size: 3.1rem; }

@media (max-width: 576px) {
    .subtitulos-texto.tam-sm { font-size: 1.05rem; }
    .subtitulos-texto.tam-md { font-size: 1.4rem; }
    .subtitulos-texto.tam-lg { font-size: 1.8rem; }
    .subtitulos-texto.tam-xl { font-size: 2.3rem; }
}

/* ============================================================
   MODO HORIZONTAL: en pantalla completa los subtítulos siempre van
   centrados, en blanco y grandes. Al entrar se intenta bloquear la
   orientación en horizontal por JS (screen.orientation.lock, ver
   subtitulos.js); esto solo funciona en Chrome Android con pantalla
   completa nativa. Como respaldo para cuando el bloqueo no está
   disponible (Safari/iOS, pantalla completa simulada, etc.), si el
   celular sigue en vertical mientras está en pantalla completa,
   rotamos el contenido con CSS para que de todas formas se vea
   horizontal.
   ============================================================ */
@media (orientation: landscape) {
    #seccionSubtitulos.quiz-fullscreen .subtitulos-texto {
        max-width: 92vw;
    }
    #seccionSubtitulos.quiz-fullscreen .subtitulos-texto.tam-md { font-size: 2rem; }
    #seccionSubtitulos.quiz-fullscreen .subtitulos-texto.tam-lg { font-size: 2.6rem; }
    #seccionSubtitulos.quiz-fullscreen .subtitulos-texto.tam-xl { font-size: 3.3rem; }
}

/* Respaldo: si screen.orientation.lock() no funcionó y el celular
   sigue en vertical dentro de pantalla completa, se fuerza la vista
   horizontal rotando el contenido con CSS. */
@media (orientation: portrait) and (max-width: 600px) {
    #seccionSubtitulos.quiz-fullscreen #subtitulosEnVivo {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100vh;
        height: 100vw;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }
}

.subtitulos-btn-salir-cine {
    position: absolute;
    top: 14px;
    right: 14px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    z-index: 5;
}
.subtitulos-btn-salir-cine:hover,
.subtitulos-btn-salir-cine:focus {
    opacity: 1;
}

/* Círculo rojo de "grabación" junto al botón Empezar de la pantalla intro */
.subtitulos-icono-grabar {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #dc2626;
    vertical-align: middle;
    margin-left: 2px;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* --- Insignia "EN VIVO" con parpadeo suave --- */
#subtitulosBadgeEnVivo {
    animation: subtitulosPulsoVivo 1.6s ease-in-out infinite;
}
@keyframes subtitulosPulsoVivo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ============================================================
   MEDIDOR DE NIVEL DE AUDIO (pantalla intro): barra horizontal que
   sube/baja según el volumen ambiente captado por el micrófono,
   con 3 tramos de color (bajo/regular/bien) para que el usuario
   ajuste la posición del celular ANTES de iniciar la escucha real.
   ============================================================ */
.subtitulos-medidor-barra-wrap {
    width: 100%;
    height: 22px;
    border-radius: 20px;
    background-color: #e2e8f0;
    overflow: hidden;
    position: relative;
}
.subtitulos-medidor-barra {
    height: 100%;
    width: 0%;
    border-radius: 20px;
    background-color: #dc2626; /* rojo por defecto (bajo); JS cambia a amarillo/verde */
    transition: width 0.12s linear, background-color 0.2s ease;
}
.subtitulos-medidor-barra.nivel-regular { background-color: #f59e0b; }
.subtitulos-medidor-barra.nivel-bien { background-color: #16a34a; }

#subtitulosMedidorEtiqueta.etiqueta-bajo { color: #dc2626; }
#subtitulosMedidorEtiqueta.etiqueta-regular { color: #b45309; }
#subtitulosMedidorEtiqueta.etiqueta-bien { color: #16a34a; }