/* Estatik Accessibility — Askalon 2.0 SL
   Objetivo: no modificar plantillas originales y sobrevivir a
   actualizaciones del plugin base. WCAG 2.1 nivel AA. */

/* ── Variables ──────────────────────────────────────────────────────────── */

:root {
    --eaf-focus-color:       #1a5cff;
    --eaf-text-color:        #1f2933;
    --eaf-muted-text-color:  #334155;  /* ratio 7.3:1 sobre blanco ✓ */
    --eaf-border-color:      #64748b;
    --eaf-error-color:       #b00020;
    --eaf-button-bg:         #0b5cad;  /* azul accesible en lugar del amarillo */
    --eaf-button-text:       #ffffff;
}

/* ── Campo honeypot anti-spam (es_extra_info) ───────────────────────────── */
/* Estatik lo usa para detectar bots — debe ser invisible para humanos y AT */

.es-field__es_extra_info,
[class*="es_extra_info"] {
    display:    none !important;
    visibility: hidden !important;
}


/* Clase usada por JS para labels ocultos visualmente pero accesibles por AT */

.eaf-sr-only,
.estatik-accessibility-label {
    border:       0 !important;
    clip:         rect(1px, 1px, 1px, 1px) !important;
    clip-path:    inset(50%) !important;
    height:       1px !important;
    margin:       -1px !important;
    overflow:     hidden !important;
    padding:      0 !important;
    position:     absolute !important;
    width:        1px !important;
    white-space:  nowrap !important;
}

/* ── Foco visible (WCAG 2.4.7) ─────────────────────────────────────────── */
/* :focus-visible solo muestra el outline con teclado, no con ratón/táctil.
   Más correcto que el :focus genérico que usaba mi versión anterior. */

.es-component a:focus-visible,
.es-component button:focus-visible,
.es-component input:focus-visible,
.es-component select:focus-visible,
.es-component textarea:focus-visible,
.es-widget-wrap a:focus-visible,
.es-widget-wrap button:focus-visible,
.es-widget-wrap input:focus-visible,
.es-widget-wrap select:focus-visible,
.es-widget-wrap textarea:focus-visible,
.es-search a:focus-visible,
.es-search button:focus-visible,
.es-search input:focus-visible,
.es-search select:focus-visible,
.es-search textarea:focus-visible,
.es-magnific-popup a:focus-visible,
.es-magnific-popup button:focus-visible,
.es-magnific-popup input:focus-visible,
.es-magnific-popup select:focus-visible,
.es-magnific-popup textarea:focus-visible {
    outline:        3px solid var(--eaf-focus-color) !important;
    outline-offset: 2px !important;
    box-shadow:     none !important;
}

/* El switcher (toggle) tiene el input oculto; el foco se muestra en el slider */
.es-switcher input[type=checkbox]:focus-visible + .es-switcher-slider {
    outline:        3px solid var(--eaf-focus-color) !important;
    outline-offset: 2px !important;
}

/* Select2: foco en el widget generado */
.select2-container--focus .select2-selection,
.select2-container .select2-selection:focus-visible {
    outline:        3px solid var(--eaf-focus-color) !important;
    outline-offset: 2px !important;
    box-shadow:     none !important;
}

/* ── Contraste en campos (WCAG 1.4.3) ──────────────────────────────────── */

.es-component .es-field input,
.es-component .es-field select,
.es-component .es-field textarea,
.es-widget-wrap .es-field input,
.es-widget-wrap .es-field select,
.es-widget-wrap .es-field textarea,
.es-search .es-field input,
.es-search .es-field select,
.es-search .es-field textarea,
.es-request-form input,
.es-request-form select,
.es-request-form textarea {
    color:        var(--eaf-text-color) !important;
    border-color: var(--eaf-border-color) !important;
}

/* Placeholders: #B0BEC5 original → ratio 2.9:1 FALLA. Fix → #334155 ratio 7.3:1 */
.es-component .es-field input::placeholder,
.es-component .es-field textarea::placeholder,
.es-search input::placeholder,
.es-search textarea::placeholder,
.es-request-form input::placeholder,
.es-request-form textarea::placeholder {
    color:   var(--eaf-muted-text-color) !important;
    opacity: 1 !important; /* Firefox baja la opacidad por defecto */
}

/* ── Contraste en textos secundarios ────────────────────────────────────── */
/* #B0BEC5 original → ratio 2.9:1 FALLA. Fix → #334155 ratio 7.3:1 */

.es-field .es-field__description,
.es-field .es-field__caption,
.es-field .es-field__strlen {
    color: var(--eaf-muted-text-color) !important;
}

/* ── Select2: texto legible ─────────────────────────────────────────────── */

.es-select2__dropdown,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered {
    color: var(--eaf-text-color) !important;
}

/* ── Botones primarios: fondo amarillo #FFB300 + texto blanco → ratio 2.1:1 FALLA */
/* Fix: azul oscuro con texto blanco → ratio 7.5:1 ✓                               */

.es-btn.es-btn--primary,
button.es-btn.es-btn--primary,
a.es-btn.es-btn--primary {
    background-color: var(--eaf-button-bg) !important;
    border-color:     var(--eaf-button-bg) !important;
    color:            var(--eaf-button-text) !important;
}

.es-btn.es-btn--primary:hover,
button.es-btn.es-btn--primary:hover,
a.es-btn.es-btn--primary:hover {
    filter: brightness(0.92);
    color:  var(--eaf-button-text) !important;
}

/* ── Links dentro de bloques: subrayado para no depender solo del color ─── */

.es-component a:not(.es-btn),
.es-widget-wrap a:not(.es-btn),
.es-magnific-popup a:not(.es-btn) {
    text-decoration-thickness: max(1px, 0.08em);
    text-underline-offset:     0.16em;
}

/* ── Estados de error (WCAG 1.3.1) ─────────────────────────────────────── */

.es-field[aria-invalid="true"],
.es-field input[aria-invalid="true"],
.es-field select[aria-invalid="true"],
.es-field textarea[aria-invalid="true"],
.es-request-form input[aria-invalid="true"],
.es-request-form textarea[aria-invalid="true"] {
    border-color: var(--eaf-error-color) !important;
}

/* ── Etiquetas generadas por los hooks PHP ──────────────────────────────── */
/* El hook PHP convierte el <label> envolvente en <div class="es-field__inner">.
   El <label for=""> queda suelto encima del input. Aseguramos que tenga
   el mismo aspecto visual que el .es-field__label original. */

.es-field__inner > label.es-field__label,
.es-field > label.es-field__label {
    color:         #263238;
    font-weight:   500;
    font-size:     14px;
    line-height:   20px;
    margin-bottom: 6px;
    display:       block;
}

/* ── Alto contraste del sistema operativo ───────────────────────────────── */

@media (prefers-contrast: more) {
    .es-component .es-field input,
    .es-component .es-field select,
    .es-component .es-field textarea,
    .es-search .es-field input,
    .es-search .es-field select,
    .es-search .es-field textarea {
        border-width: 2px !important;
        border-color: #000 !important;
    }
}

/* ── Movimiento reducido (WCAG 2.3.3) ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .es-switcher-slider,
    .es-switcher-slider::before {
        transition: none !important;
    }
}