/* ===================== FOCO VISIBLE PARA SMART TV / MANDO D-PAD ===================== */
/* Estilos para navegación con mando a distancia - visible desde 10 pies (10-foot UI) */
/* Usa :focus-visible para mostrar solo con teclado/D-pad, no con ratón */
/* Color naranja (#ff6400): raro en marcas/temas → contraste estable sobre morados/azules */

@keyframes tv-focus-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255, 100, 0, 0.65),
                0 0 20px rgba(255, 100, 0, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 100, 0, 0.95),
                0 0 30px rgba(255, 100, 0, 0.8),
                0 0 50px rgba(220, 60, 0, 0.4);
  }
}


/* Botones principales (Games, Estadísticas, Yo Nunca, etc.) */
.games-action-btn:focus-visible,
.games-action-btn:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
  transform: translateY(-2px) scale(1.02);
}

/* Ítems del dropdown */
.dropdown-menu-large .dropdown-item:focus-visible,
.dropdown-menu-large .dropdown-item:focus {
  outline: 4px solid rgba(255, 100, 0, 0.92) !important;
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(255, 100, 0, 0.55);
}

/* Botón Reiniciar (stats-likes) */
.reiniciar:focus-visible,
.reiniciar:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Modal temporizador - selects y botones */
#temporizadorModal select:focus-visible,
#temporizadorModal select:focus,
#temporizadorModal button:focus-visible,
#temporizadorModal button:focus,
#temporizadorModal .btn-action:focus-visible,
#temporizadorModal .btn-action:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Botones de intro Yo Nunca (Comenzar, Volver) */
.game-btn:focus-visible,
.game-btn:focus,
.settings-button:focus-visible,
.settings-button:focus,
.boton-atras:focus-visible,
.boton-atras:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Botones QR generator */
.qr-btn:focus-visible,
.qr-btn:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Botones intro/espera jugador */
.btn-entrar:focus-visible,
.btn-entrar:focus,
.btn-volver:focus-visible,
.btn-volver:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Popups de confirmación */
.confirm-btn:focus-visible,
.confirm-btn:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 4px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Inputs y selects en modales (sin animación para no distraer al escribir) */
.modal input:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible {
  outline: 4px solid rgba(255, 100, 0, 0.92) !important;
  outline-offset: 2px;
  box-shadow: 0 0 15px rgba(255, 100, 0, 0.45);
}

/* Configuración de juegos (setting_juegos) - para D-pad en TV */
.sj-back:focus-visible,
.sj-back:focus,
.sj-save:focus-visible,
.sj-save:focus,
.sj-action-btn:focus-visible,
.sj-action-btn:focus,
.sj-soluciones-btn:focus-visible,
.sj-soluciones-btn:focus,
.sj-field select:focus-visible,
.sj-field select:focus,
.sj-field input:focus-visible,
.sj-field input:focus,
#sj-branding-widget button:focus-visible,
#sj-branding-widget button:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Soluciones (Rulo) - ítems focusables */
.solucion-item:focus-visible,
.solucion-item:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* ===================== BINGO - Intro / Bombo ===================== */
.temporizador-container button:focus-visible,
.temporizador-container button:focus,
.temporizador-container .btn-action:focus-visible,
.temporizador-container .btn-action:focus,
.temporizador-container .btn-danger:focus-visible,
.temporizador-container .btn-danger:focus,
.temporizador-container select:focus-visible,
.temporizador-container select:focus,
.temporizador-btn-cerrar:focus-visible,
.temporizador-btn-cerrar:focus,
.btn-celebracion-salir:focus-visible,
.btn-celebracion-salir:focus,
.btn-celebracion-salir-small:focus-visible,
.btn-celebracion-salir-small:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* Bingo cartón móvil jugador */
.btn-enviar-apodo:focus-visible,
.btn-enviar-apodo:focus,
.btn-add-carton:focus-visible,
.btn-add-carton:focus,
.btn-remove-carton:focus-visible,
.btn-remove-carton:focus,
.ganador-btn:focus-visible,
.ganador-btn:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}

/* ===================== EL RULO / PASAPALABRA - Intro / Rosco ===================== */
.centro-rosco button:focus-visible,
.centro-rosco button:focus,
.botones-respuesta button:focus-visible,
.botones-respuesta button:focus,
.popup-content button:focus-visible,
.popup-content button:focus,
.confirm-popup-buttons button:focus-visible,
.confirm-popup-buttons button:focus {
  outline: 4px solid rgba(255, 100, 0, 0.95) !important;
  outline-offset: 3px;
  animation: tv-focus-pulse 1.5s ease-in-out infinite;
}