/*
Theme Name: GeneratePress Child - MultyRadios Ecuador
Description: Tema accesible con los colores de la bandera de Ecuador
Template: generatepress
Version: 2.0
*/

/* =========================
 * PALETA DE COLORES ECUADOR (WCAG AA/AAA)
 * Basado en: https://es.wikipedia.org/wiki/Bandera_de_Ecuador
 * Colores oficiales: #FFD100 (Amarillo), #0072CE (Azul), #EF3340 (Rojo)[citation:8]
 * ========================= */
:root {
    /* Colores principales - Bandera de Ecuador */
    --ecuador-amarillo: #FFD100;     /* Pantone 109 C */
    --ecuador-azul: #0072CE;         /* Pantone 285 C */
    --ecuador-rojo: #EF3340;         /* Pantone 032 C */
    
    /* Variantes accesibles con mejor contraste */
    --amarillo-oscuro: #D4A900;      /* Para texto sobre fondo claro */
    --azul-oscuro: #0056A3;          /* Para enlaces y botones */
    --rojo-oscuro: #CC2A35;          /* Para alertas y énfasis */
    
    /* Colores neutros para fondos y texto */
    --blanco: #FFFFFF;
    --gris-claro: #F8F9FA;
    --gris-medio: #6C757D;
    --gris-oscuro: #343A40;
    --negro: #212529;
    
    /* Colores de estado para interactividad */
    --focus-outline: 3px solid var(--ecuador-azul);
    --focus-shadow: 0 0 0 4px rgba(0, 114, 206, 0.25);
    
    /* Espaciado consistente */
    --espacio-xs: 0.5rem;
    --espacio-sm: 1rem;
    --espacio-md: 1.5rem;
    --espacio-lg: 2rem;
    --espacio-xl: 3rem;
    
    /* Bordes */
    --radio-borde: 0.5rem;
    --radio-borde-lg: 1rem;
    
    /* Sombras */
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.1);
    --sombra-media: 0 10px 15px rgba(0, 0, 0, 0.1);
    --sombra-fuerte: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* =========================
 * RESET Y NORMALIZACIÓN ACCESIBLE
 * ========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--gris-oscuro);
    background-color: var(--blanco);
}

/* =========================
 * TIPOGRAFÍA ACCESIBLE
 * ========================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--espacio-md);
    color: var(--gris-oscuro);
}

h1 {
    font-size: 2.5rem;
    color: var(--ecuador-azul);
}

h2 {
    font-size: 2rem;
    border-bottom: 3px solid var(--ecuador-amarillo);
    padding-bottom: var(--espacio-xs);
}

h3 {
    font-size: 1.5rem;
    color: var(--ecuador-rojo);
}

p {
    margin-bottom: var(--espacio-md);
}

/* Contraste mínimo WCAG AA: 4.5:1 para texto normal[citation:1][citation:3] */
.texto-contraste {
    color: var(--gris-oscuro);
    background-color: var(--blanco);
}

/* =========================
 * ENLACES ACCESIBLES
 * ========================= */
a {
    color: var(--azul-oscuro);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

a:hover, a:focus {
    color: var(--ecuador-rojo);
    text-decoration-thickness: 3px;
}

a:focus {
    outline: var(--focus-outline);
    outline-offset: 3px;
    box-shadow: var(--focus-shadow);
}

/* Enlaces que son botones */
a[role="button"] {
    display: inline-block;
    text-decoration: none;
    padding: var(--espacio-sm) var(--espacio-lg);
    border-radius: var(--radio-borde);
    font-weight: bold;
    text-align: center;
}

/* =========================
 * BOTONES ACCESIBLES (VISUAL Y LECTOR PANTALLA)
 * ========================= */
button, .btn, input[type="submit"], input[type="button"] {
    /* SEMÁNTICA: Usar <button> en lugar de <div> o <a> con JavaScript[citation:5][citation:9] */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-sm) var(--espacio-lg);
    border: none;
    border-radius: var(--radio-borde);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px; /* Tamaño mínimo para tactil[citation:7] */
    min-width: 44px;
}

/* Estados de botón VISIBLES */
button:hover, .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

button:focus, .btn:focus {
    outline: var(--focus-outline);
    outline-offset: 3px;
    box-shadow: var(--focus-shadow);
}

button:active, .btn:active {
    transform: translateY(0);
}

/* Estilos específicos por color */
.btn-primary {
    background: linear-gradient(135deg, var(--ecuador-azul) 0%, var(--azul-oscuro) 100%);
    color: var(--blanco);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--ecuador-amarillo) 0%, var(--amarillo-oscuro) 100%);
    color: var(--negro);
}

.btn-danger {
    background: linear-gradient(135deg, var(--ecuador-rojo) 0%, var(--rojo-oscuro) 100%);
    color: var(--blanco);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--ecuador-azul);
    color: var(--ecuador-azul);
}

.btn-outline:hover {
    background-color: var(--ecuador-azul);
    color: var(--blanco);
}

/* Estados para lectores de pantalla (ARIA) */
button[aria-pressed="true"] {
    background-color: var(--ecuador-rojo);
    color: var(--blanco);
}

button[aria-expanded="true"]::after {
    content: " (expandido)";
    /* Texto oculto visualmente pero leído por lectores */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================
 * FORMULARIOS ACCESIBLES
 * ========================= */
label {
    display: block;
    margin-bottom: var(--espacio-xs);
    font-weight: 600;
    color: var(--gris-oscuro);
}

input, textarea, select {
    width: 100%;
    padding: var(--espacio-sm);
    border: 2px solid var(--gris-medio);
    border-radius: var(--radio-borde);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--ecuador-azul);
    outline: var(--focus-outline);
    box-shadow: var(--focus-shadow);
}

/* Agrupar label + input para lectores de pantalla[citation:3] */
.form-group {
    margin-bottom: var(--espacio-md);
}

/* Mensajes de error/éxito */
.form-error {
    color: var(--ecuador-rojo);
    font-size: 0.875rem;
    margin-top: var(--espacio-xs);
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
}

.form-success {
    color: var(--ecuador-azul);
    font-size: 0.875rem;
    margin-top: var(--espacio-xs);
}

/* =========================
 * TARJETAS Y CONTENEDORES
 * ========================= */
.card {
    background: var(--blanco);
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-suave);
    padding: var(--espacio-lg);
    margin-bottom: var(--espacio-lg);
    border: 1px solid var(--gris-claro);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}

.card-header {
    background: linear-gradient(135deg, var(--ecuador-azul) 0%, var(--azul-oscuro) 100%);
    color: var(--blanco);
    padding: var(--espacio-md);
    border-radius: var(--radio-borde) var(--radio-borde) 0 0;
    margin: -var(--espacio-lg) -var(--espacio-lg) var(--espacio-lg);
}

/* =========================
 * COMPONENTES DE RADIO (Actualizados para accesibilidad)
 * ========================= */
.radio-player {
    background: var(--gris-claro);
    border-radius: var(--radio-borde);
    padding: var(--espacio-md);
    margin: var(--espacio-md) 0;
}

.player-controls {
    display: flex;
    gap: var(--espacio-xs);
    align-items: center;
    flex-wrap: wrap;
}

.volume-controls {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    margin-top: var(--espacio-sm);
}

/* Range input accesible */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--gris-medio);
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--ecuador-azul);
    border-radius: 50%;
    border: 3px solid var(--blanco);
    cursor: pointer;
    box-shadow: var(--sombra-suave);
}

input[type="range"]:focus::-webkit-slider-thumb {
    border-color: var(--ecuador-amarillo);
    box-shadow: var(--focus-shadow);
}

/* =========================
 * NAVEGACIÓN Y HEADER
 * ========================= */
.main-navigation ul {
    display: flex;
    list-style: none;
    gap: var(--espacio-md);
    flex-wrap: wrap;
}

.main-navigation a {
    padding: var(--espacio-sm) var(--espacio-md);
    border-radius: var(--radio-borde);
    text-decoration: none;
    font-weight: 600;
}

.main-navigation a:hover,
.main-navigation a:focus {
    background-color: var(--ecuador-amarillo);
    color: var(--negro);
}

/* Navegación por teclado: skip link[citation:7] */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ecuador-azul);
    color: var(--blanco);
    padding: var(--espacio-sm);
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}

/* =========================
 * UTILITARIOS DE ACCESIBILIDAD
 * ========================= */
/* Ocultar contenido visualmente pero mantenerlo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Solo para lectores de pantalla */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Alto contraste para texto */
.high-contrast {
    color: var(--negro) !important;
    background-color: var(--blanco) !important;
    border-color: var(--negro) !important;
}

/* Modo de alto contraste para el sitio */
body.high-contrast-mode {
    background-color: var(--negro) !important;
    color: var(--blanco) !important;
}

body.high-contrast-mode a {
    color: #FFFF00 !important; /* Amarillo brillante */
}

/* =========================
 * RESPONSIVE Y MEDIA QUERIES
 * ========================= */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .player-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: var(--espacio-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================
 * ESTILOS ESPECÍFICOS PARA BANDERA ECUADOR
 * ========================= */
/* Banner con colores de bandera */
.ecuador-flag-banner {
    height: 6px;
    background: linear-gradient(90deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-amarillo) 33%, 
        var(--ecuador-azul) 33%, 
        var(--ecuador-azul) 66%, 
        var(--ecuador-rojo) 66%, 
        var(--ecuador-rojo) 100%
    );
    width: 100%;
}

/* Gradientes patrios */
.gradient-ecuador {
    background: linear-gradient(135deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-azul) 50%, 
        var(--ecuador-rojo) 100%
    );
}

/* Badges especiales Ecuador */
.badge-ecuador {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-xs) var(--espacio-sm);
    background: linear-gradient(90deg, 
        var(--ecuador-amarillo) 0%, 
        var(--ecuador-azul) 50%, 
        var(--ecuador-rojo) 100%
    );
    color: var(--blanco);
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.875rem;
}
/* =========================
 * BOTONES DE RADIO VISIBLES Y ACCESIBLES
 * ========================= */

/* Botón principal "ESCUCHAR AHORA" - LA MÁS QUERIDA */
#player-querida button[onclick*="togglePlayPause"] {
    background: linear-gradient(90deg, #d32f2f 0%, #b71c1c 100%) !important;
    color: white !important;
    border: 3px solid #ffeb3b !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#player-querida button[onclick*="togglePlayPause"]:hover {
    background: linear-gradient(90deg, #b71c1c 0%, #8b0000 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(211, 47, 47, 0.6) !important;
    border-color: #fff176 !important;
}

#player-querida button[onclick*="togglePlayPause"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Estado de reproducción (cuando está sonando) */
#player-querida button[onclick*="togglePlayPause"][aria-pressed="true"] {
    background: linear-gradient(90deg, #388e3c 0%, #2e7d32 100%) !important;
    border-color: #a5d6a7 !important;
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4) !important;
}

#player-querida button[onclick*="togglePlayPause"][aria-pressed="true"]:hover {
    background: linear-gradient(90deg, #2e7d32 0%, #1b5e20 100%) !important;
}

/* Botón "ESCUCHAR AHORA" - QUITEÑA STEREO */
#player-quitena button[onclick*="togglePlayPause"] {
    background: linear-gradient(90deg, #ff8f00 0%, #ef6c00 100%) !important;
    color: #000 !important;
    border: 3px solid #ffd600 !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(255, 143, 0, 0.4) !important;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

#player-quitena button[onclick*="togglePlayPause"]:hover {
    background: linear-gradient(90deg, #ef6c00 0%, #e65100 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 143, 0, 0.6) !important;
    border-color: #ffea00 !important;
}

#player-quitena button[onclick*="togglePlayPause"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Estado de reproducción */
#player-quitena button[onclick*="togglePlayPause"][aria-pressed="true"] {
    background: linear-gradient(90deg, #00897b 0%, #00695c 100%) !important;
    color: white !important;
    border-color: #80cbc4 !important;
    box-shadow: 0 4px 15px rgba(0, 137, 123, 0.4) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* =========================
 * BOTONES DE DETENER VISIBLES
 * ========================= */

/* Botón "Detener" - Ambos reproductores */
#player-querida button[onclick*="stopRadio"],
#player-quitena button[onclick*="stopRadio"] {
    background: linear-gradient(90deg, #546e7a 0%, #37474f 100%) !important;
    color: white !important;
    border: 3px solid #b0bec5 !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(84, 110, 122, 0.4) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#player-querida button[onclick*="stopRadio"]:hover,
#player-quitena button[onclick*="stopRadio"]:hover {
    background: linear-gradient(90deg, #37474f 0%, #263238 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(84, 110, 122, 0.6) !important;
    border-color: #cfd8dc !important;
}

#player-querida button[onclick*="stopRadio"]:focus,
#player-quitena button[onclick*="stopRadio"]:focus {
    outline: 4px solid #1976d2 !important;
    outline-offset: 4px !important;
    border-color: #64b5f6 !important;
}

/* Iconos dentro de los botones */
#player-querida button i,
#player-quitena button i {
    font-size: 1.3rem !important;
    margin-right: 8px !important;
}

/* Contenedor de botones para mejor distribución */
#player-querida > div:last-child,
#player-quitena > div:last-child {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

/* =========================
 * MEJORAS VISUALES ADICIONALES
 * ========================= */

/* Efecto de pulso cuando está reproduciendo */
@keyframes pulse-playing {
    0% { box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(56, 142, 60, 0.8); }
    100% { box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4); }
}

.playing {
    animation: pulse-playing 2s infinite !important;
}

/* Indicador visual de estado */
.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    background: #4caf50;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mejorar contraste del texto en botones */
#play-text-querida,
#play-text-quitena {
    font-weight: 900 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* Para Quiteña Stereo (texto negro) */
#player-quitena button[onclick*="togglePlayPause"] span {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7) !important;
}

/* =========================
 * RESPONSIVE PARA BOTONES
 * ========================= */
@media (max-width: 768px) {
    #player-querida button[onclick*="togglePlayPause"],
    #player-quitena button[onclick*="togglePlayPause"] {
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }
    
    #player-querida button[onclick*="stopRadio"],
    #player-quitena button[onclick*="stopRadio"] {
        width: 50px !important;
        height: 50px !important;
    }
    
    #player-querida > div:last-child,
    #player-quitena > div:last-child {
        gap: 10px !important;
    }
}

/* =========================
 * ESTILOS PARA MODO ALTO CONTRASTE
 * ========================= */
@media (prefers-contrast: high) {
    #player-querida button[onclick*="togglePlayPause"],
    #player-quitena button[onclick*="togglePlayPause"] {
        border: 4px solid white !important;
        color: white !important;
        background: black !important;
    }
    
    #player-querida button[onclick*="stopRadio"],
    #player-quitena button[onclick*="stopRadio"] {
        border: 4px solid white !important;
        color: white !important;
        background: black !important;
    }
}

/* =========================
 * MEJORAR ICONOS PARA VISIBILIDAD
 * ========================= */
#player-querida .fa-play,
#player-querida .fa-pause,
#player-querida .fa-stop,
#player-quitena .fa-play,
#player-quitena .fa-pause,
#player-quitena .fa-stop {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* Resplandor para iconos en hover */
#player-querida button:hover .fa-play,
#player-querida button:hover .fa-pause,
#player-querida button:hover .fa-stop,
#player-quitena button:hover .fa-play,
#player-quitena button:hover .fa-pause,
#player-quitena button:hover .fa-stop {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8)) !important;
}
/* =========================
 * MEJORAS DE ACCESIBILIDAD GLOBAL
 * SIN CAMBIAR DISEÑO EXISTENTE
 * ========================= */

/* 1. MEJORAR FOCO PARA TECLADO */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus {
    outline: 3px solid #0072CE !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(0, 114, 206, 0.3) !important;
}

/* 2. MEJORAR VISIBILIDAD DE ENLACES */
a:hover,
a:focus {
    text-decoration: underline !important;
}

/* 3. CONTRASTE MEJORADO PARA TEXTO */
body.high-contrast-mode {
    background-color: #000 !important;
    color: #FFF !important;
}

body.high-contrast-mode * {
    background-color: #000 !important;
    color: #FFF !important;
    border-color: #FFF !important;
}

body.high-contrast-mode a {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

body.high-contrast-mode button,
body.high-contrast-mode .btn {
    background-color: #000 !important;
    color: #FFF !important;
    border: 2px solid #FFF !important;
}

/* 4. BOTÓN DE ALTO CONTRASTE */
.contrast-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #0072CE;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.contrast-toggle:hover {
    background: #005a9c;
}

/* 5. SKIP LINK */
.skip-link {
    position: absolute;
    top: -40px;
    left: 10px;
    background: #0072CE;
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    top: 10px;
}

/* 6. CLASE PARA LECTORES DE PANTALLA */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 7. MEJORAR INPUTS PARA ACCESIBILIDAD */
input[type="range"]:focus::-webkit-slider-thumb {
    border-color: #0072CE !important;
    box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.3) !important;
}

/* 8. MEJORAR TAMAÑOS MÍNIMOS PARA TACTO */
button,
.btn,
a[role="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* 9. ANIMACIONES REDUCIDAS (para sensibilidad) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 10. MEJORAR LEGIBILIDAD */
@media (prefers-contrast: high) {
    body {
        background-color: #000 !important;
        color: #FFF !important;
    }
    
    a {
        color: #FFFF00 !important;
        text-decoration: underline !important;
    }
    
    button,
    .btn {
        border: 2px solid #FFF !important;
    }
}

/* 11. ZOOM SEGURO */
html {
    text-size-adjust: 100%;
}

/* 12. MEJORAR CONTRASTE EN TARJETAS */
.main-radio-card,
.tarjeta,
.card {
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 13. MEJORAR VISIBILIDAD DE ESTADOS */
[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px #0072CE !important;
}

/* 14. MEJORAR ICONOS PARA ACCESIBILIDAD */
.icon-with-label::after {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 15. MEJORAR FOOTER ACCESIBLE */
.site-footer a:focus {
    outline: 2px solid #FFD100 !important;
    outline-offset: 2px !important;
}

/* 16. RESPONSIVE PARA ACCESIBILIDAD */
@media (max-width: 768px) {
    .contrast-toggle {
        top: auto;
        bottom: 10px;
        right: 10px;
    }
    
    /* Asegurar que el texto sea legible en móviles */
    body {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* 17. MEJORAR TABLAS (si las hay) */
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* 18. MEJORAR MENÚS DESPLEGABLES */
[aria-expanded="true"] {
    background-color: #f0f0f0 !important;
}

/* 19. INDICADORES DE ESTADO */
[aria-busy="true"]::after {
    content: " (cargando)";
    font-size: 0.8em;
}

[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 20. MEJORAR SCROLL SUAVE PARA TECLADO */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* ==================== */
/* ACCESIBILIDAD BÁSICA */
/* ==================== */

/* Texto para lectores de pantalla */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Enlace para saltar al contenido */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 999999;
}

.skip-link:focus {
    top: 0;
}

/* Enfoque visible para todos los elementos */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0c4a6e;
    outline-offset: 2px;
}

/* ==================== */
/* HEADER BÁSICO */
/* ==================== */

.site-header {
    background: #fff;
    padding: 20px 0;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.site-logo a {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    font-weight: bold;
}

.site-logo .custom-logo {
    max-height: 60px;
    width: auto;
}

/* Menú principal */
.main-navigation {
    display: flex;
    align-items: center;
}

.menu-principal {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.menu-principal a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.menu-principal a:hover,
.menu-principal a:focus {
    color: #0c4a6e;
}

/* Botón menú móvil (oculto en desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

.menu-toggle .hamburger {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
}

.menu-toggle .hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    transition: 0.3s ease;
}

.menu-toggle .hamburger span:nth-child(1) {
    top: 0;
}

.menu-toggle .hamburger span:nth-child(2) {
    top: 8px;
}

.menu-toggle .hamburger span:nth-child(3) {
    top: 16px;
}

/* Menú móvil activo */
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
}

/* ==================== */
/* RESPONSIVE */
/* ==================== */

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .menu-principal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        display: none;
        z-index: 99;
    }
    
    .menu-principal.active {
        display: flex;
    }
    
    .menu-principal a {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
    }
    
    .menu-principal a:last-child {
        border-bottom: none;
    }
}

/* ==================== */
/* ALTO CONTRASTE */
/* ==================== */

@media (prefers-contrast: high) {
    .site-header {
        border-bottom: 2px solid #000;
    }
    
    .menu-toggle {
        border: 2px solid #000;
    }
    
    .menu-principal a {
        border: 1px solid #000;
    }
}