/* ==========================================================================
   TimeCastV - Navegación TV / Control Remoto (D-pad)
   ==========================================================================
   Estilos de :focus-visible para que cualquier elemento enfocado con las
   flechas del control remoto (o Tab en teclado) sea claramente visible en
   una pantalla vista a distancia ("10-foot UI"). No afecta el clic normal
   con mouse/touch: :focus-visible solo se activa con navegación por teclado
   o control remoto, nunca con clic/tap.

   Este archivo es ADITIVO — no modifica ninguna regla existente de
   frontend.css, solo agrega el estado de foco que faltaba.
   ========================================================================== */

/* Anillo de foco base, reutilizado por todos los elementos interactivos */
#valluno-timecast-container button:focus-visible,
#valluno-timecast-container input:focus-visible {
    outline: 4px solid #FFD54F !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.35), 0 0 24px rgba(255, 213, 79, 0.55) !important;
    transition: outline-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    z-index: 5;
    position: relative;
}

/* Insignia "EN VIVO" */
#valluno-timecast-container .tcv-live-badge:focus-visible {
    transform: translateY(-2px) scale(1.05);
}

/* Botón mostrar/ocultar panel lateral */
#valluno-timecast-container .timecast-toggle-sidebar:focus-visible {
    outline-offset: 2px !important;
}

/* Botón de pantalla completa (sobre el video) */
#valluno-timecast-container .tcv-fullscreen-btn:focus-visible {
    outline-offset: 2px !important;
}

/* Anterior / Siguiente */
#valluno-timecast-container .control-btn:focus-visible {
    transform: translateY(-2px) scale(1.04);
}

/* Tarjetas de Canales — el foco más importante, ya que es donde el usuario
   pasa más tiempo navegando. Escala más notoria para que se distinga bien
   entre las demás tarjetas del grid. */
#valluno-timecast-container .tab-card:focus-visible {
    outline: 4px solid #FFD54F !important;
    outline-offset: 2px !important;
    transform: scale(1.08);
    z-index: 6;
    box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.35), 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 213, 79, 0.55) !important;
}

/* Input de búsqueda — ya tenía :focus propio (verde); en TV lo reforzamos
   con el mismo color ámbar del resto para que el sistema de foco se vea
   consistente en toda la interfaz. */
#valluno-timecast-container .search-input:focus-visible {
    outline: 3px solid #FFD54F !important;
    outline-offset: 2px !important;
    border-color: #FFD54F !important;
    box-shadow: 0 0 15px rgba(255, 213, 79, 0.45) !important;
}

#valluno-timecast-container .search-clear:focus-visible {
    outline-offset: 2px !important;
}

/* Controles nativos de video.js (▶/⏸, 🔊 volumen, picture-in-picture) —
   ya son <button> reales, así que ya reciben el anillo genérico de arriba;
   acá solo se ajusta el offset para que no se recorte contra el borde
   del video. */
#valluno-timecast-container .vjs-control-bar button:focus-visible {
    outline-offset: -3px !important;
}

/* Overlay "Activar Sonido" — habilitado como focuseable por
   tv-navigation.js (tabindex="0"), ya que originalmente es un <div>
   pensado solo para clic/toque. Mismo anillo ámbar del resto. */
#valluno-timecast-container #tcvAudioOverlay:focus-visible,
#valluno-timecast-container #tcvAudioOverlay:focus {
    outline: 4px solid #FFD54F !important;
    outline-offset: -8px !important;
}

#valluno-timecast-container #tcvAudioOverlay:focus .tcv-play-icon,
#valluno-timecast-container #tcvAudioOverlay:focus-visible .tcv-play-icon {
    box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.35), 0 0 28px rgba(255, 213, 79, 0.6);
    border-color: #FFD54F;
}

/* ── Modo TV explícito (agregado por tv-navigation.js cuando detecta un
     WebView de Android TV o ?tvmode=1 en la URL): agranda un poco más los
     objetivos táctiles/de foco, pensado para verse desde el sofá. ── */
body.tcv-tv-mode #valluno-timecast-container .tab-card-label {
    font-size: 1.05em;
}

body.tcv-tv-mode #valluno-timecast-container .control-btn,
body.tcv-tv-mode #valluno-timecast-container .tcv-live-badge {
    min-height: 56px;
}