/* ============================================
   Elkin Vallejo - Accessibility Improvements
   ============================================ */

/* ============================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================ */
:root {
    /* Brand Colors */
    --ev-green: #2f5d46;
    --ev-green-dark: #234a37;
    --ev-green-light: #3d7a5c;
    
    --ev-gold: #c9a35c;
    --ev-gold-dark: #b08d4a;
    --ev-gold-light: #d4b574;
    
    --ev-cream: #f6f2ea;
    --ev-cream-dark: #ebe4d6;
    --ev-cream-light: #faf8f4;
    
    --ev-dark: #1a1a1a;
    --ev-dark-lighter: #2d2d2d;
    
    /* Text Colors */
    --ev-text-primary: #1a1a1a;
    --ev-text-secondary: #3a4a40;
    --ev-text-muted: #6d6d6d;
    --ev-text-light: #999999;
    --ev-text-on-dark: #f6f2ea;
    --ev-text-on-green: #ffffff;

    /* Acentos de contenido con contraste AA (WCAG 1.4.3, medido sobre
       blanco): mismo tono de marca, sólo más oscuros — nunca gris.
       --ev-link       #1a5b73 = azul #4599ba oscurecido       7.5:1
       --ev-link-dark  #14485a = hover del azul               10.0:1
       --ev-link-warm  #9a5410 = naranja #ba6813 oscurecido    5.8:1
       --ev-heading    #1e576e = teal de encabezados (ya AA)   7.9:1 */
    --ev-link: #1a5b73;
    --ev-link-dark: #14485a;
    --ev-link-warm: #9a5410;
    --ev-heading: #1e576e;
    
    /* Background Colors */
    --ev-bg-primary: #ffffff;
    --ev-bg-secondary: #f6f2ea;
    --ev-bg-tertiary: #ebe4d6;
    --ev-bg-dark: #1a1a1a;
    --ev-bg-green: #2f5d46;
    
    /* Border Colors */
    --ev-border: #e0e0e0;
    --ev-border-light: #f0f0f0;
    --ev-border-dark: #cccccc;
    
    /* Shadows */
    --ev-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ev-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ev-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --ev-space-xs: 4px;
    --ev-space-sm: 8px;
    --ev-space-md: 16px;
    --ev-space-lg: 24px;
    --ev-space-xl: 32px;
    --ev-space-2xl: 48px;
    
    /* Border Radius */
    --ev-radius-sm: 4px;
    --ev-radius-md: 8px;
    --ev-radius-lg: 12px;
    --ev-radius-full: 999px;
    
    /* Transitions */
    --ev-transition-fast: 150ms ease;
    --ev-transition-normal: 300ms ease;
    --ev-transition-slow: 500ms ease;
}

/* ============================================
   2. SKIP LINK
   ============================================ */
.ev-skip-link {
    position: absolute;
    /* Con min-height:44px el enlace mide 44px de alto: -60px garantiza que
       quede totalmente fuera del viewport en reposo (-40px dejaría 4px visibles). */
    top: -60px;
    left: 0;
    /* !important: en /cursos-fotografia/ una regla de cascada de la página pisaba
       el color (azul #208eba sobre verde = 2.03:1). Estas tres declaraciones
       sostienen la FUNCIÓN del componente (legibilidad y tamaño táctil). */
    background: var(--ev-green, #2f5d46) !important;
    color: var(--ev-text-on-green, #ffffff) !important;
    padding: 8px 16px;
    /* border-box: así min-height:44px es la altura TOTAL y no 44+16 de padding. */
    box-sizing: border-box;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    z-index: 10000;
    transition: top var(--ev-transition-normal, 0.3s);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--ev-radius-sm, 4px) 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ev-skip-link:focus {
    top: 0;
    /* En cursos el outline también salía azul 3px: fijar el foco visible. */
    outline: 2px solid var(--ev-gold, #c9a35c) !important;
    outline-offset: 2px !important;
}

/* ============================================
   3. TOUCH TARGETS (Minimum 44x44px)
   ============================================ */
.ev-tab-label,
.ev-btn,
.ev-button,
.elementor-button,
.wpcf7-submit,
.woocommerce-button,
button[type="submit"],
input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ev-tab-label {
    padding: 14px 32px !important;
}

/* Cabecera móvil: medido carrito 16x23 y hamburguesa 13x23 (visibles). */
#mobile_nav_icon,
.header_cart_wrapper a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Navigation links touch targets */
.site-nav a,
.main-navigation a,
.nav-menu a,
.ev-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
}

/* Nav horizontal del tema (ul#main_menu.nav): los enlaces son inline-block con
   line-height 25.2px -> 25px de alto (30-140px de ancho). inline-flex con
   align-items:center los lleva a 44px sin mover el texto. Verificado por
   inyección sobre /foto-individual/ 1440px: header sigue midiendo 75px,
   #wrapper padding-top 75px, contenido en y=135 y la captura queda idéntica.
   Sin media query: en móvil esta lista está oculta (rect 0), así que no aplica. */
#main_menu li > a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
}

/* Menú off-canvas (#mobile_main_menu dentro de .mobile_menu_wrapper): medido
   210-220x40 (block + line-height 40px). flex conserva el ancho completo y
   centra el texto dentro de los 44px. */
.mobile_menu_wrapper li > a {
    display: flex !important;
    align-items: center;
    min-height: 44px !important;
}

/* Nube de etiquetas: medida 149x32 / 155x37. */
.tag-cloud-link.tag-cloud-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Enlace de tarjeta: medida 114x19. */
.ev-card-link.ev-card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Lightbox controls */
.ev-close,
.ev-close-btn,
.ev-nav-btn,
.ev-overlay-close,
.ev-overlay-prev,
.ev-overlay-next,
.mfp-close {
    min-width: 44px;
    min-height: 44px;
    padding: 12px !important;
}

/* Controles del lightbox del tema (Modulobox): 40x40 y 44x32. */
button[class*="mobx-"],
a[class*="mobx-"] {
    min-width: 44px;
    min-height: 44px;
}

/* ============================================
   4. FULL-BLEED LAYOUT FIX
   ============================================ */
body {
    overflow-x: hidden;
}

/* El hack clásico `width:100vw; margin-left:calc(50% - 50vw)` solo es correcto
   si el padre está centrado. Medido en producción:
     - /activos-digitales/ .ev-hero dentro de .sidebar_content.left_sidebar
       (x=496, NO centrado) -> héroe en x=199..1639 (hueco + 199px desbordados)
     - /foto-individual/ .ev-cta-fi con content-box + padding 64/24 -> +48px en
       escritorio y +48px en móvil, lo que ensancha el viewport de layout a 448px
       y empuja el menú hamburguesa fuera de pantalla.

   class-ev-bleed.php mide el borde izquierdo real del padre y del viewport, y
   fija --ev-vw / --ev-bleed. Sin JS se conserva el cálculo original. */
.ev-hero.ev-hero,
.ev-hero-fi.ev-hero-fi,
.ev-cta.ev-cta,
.ev-cta-fi.ev-cta-fi {
    box-sizing: border-box;
    width: var(--ev-vw, 100vw);
    margin-left: var(--ev-bleed, calc(50% - 50vw));
}

/* Tabla de precios: en móvil su min-content (394px) supera el contenedor (330px)
   y desborda el viewport. table-layout:fixed la obliga a respetar el 100%. */
.ev-price-table.ev-price-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
}

.ev-price-table.ev-price-table th,
.ev-price-table.ev-price-table td {
    padding-left: 10px;
    padding-right: 10px;
    overflow-wrap: anywhere;
}

/* Gallery horizontal scroll - hide scrollbar */
.ev-strip {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ev-strip::-webkit-scrollbar {
    display: none;
}

/* ============================================
   5. IMAGE DIMENSIONS (Prevent CLS)
   ============================================ */
.ev-hero img,
.ev-card img,
.ev-gallery img,
.ev-thumb img,
.elementor-widget-image img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   6. REDUCED MOTION SUPPORT
   ============================================ */
@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;
    }
    
    /* Disable hover effects */
    .ev-card:hover,
    .ev-thumb:hover,
    .ev-btn:hover,
    .elementor-button:hover {
        transform: none !important;
    }
    
    /* Disable lightbox transitions */
    .ev-overlay,
    .mfp-bg,
    .modulobox-overlay {
        transition: none !important;
    }
    
    /* Disable scroll animations */
    .ev-animate,
    .elementor-invisible {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   7. FOCUS VISIBLE (Better keyboard navigation)
   ============================================ */
:focus {
    outline: 2px solid var(--ev-gold, #c9a35c);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--ev-gold, #c9a35c);
    outline-offset: 2px;
}

/* ============================================
   8. ARIA LANDMARKS VISUAL HINTS
   ============================================ */
[role="main"],
main {
    min-height: 1px; /* Ensure it's focusable */
}

/* ============================================
   9. CONTRAST IMPROVEMENTS (WCAG AA — colorize 1.1.4)
   ============================================ */
/* Medido en producción 2026-09-23 sobre las 3 páginas auditadas: 26
   combinaciones de texto < AA (nav 4.14/3.22, grises 3.35–4.29, "$" 2.85,
   .ev-thumb-num 3.22, FAQ h3 3.22, CookieYes 2.79, h2 de sección oscura
   2.30 y heading del footer oscuro 2.32).

   Los colores vienen de #kirki-inline-styles, var() de Elementor, <style>
   de página y style-attr; todas las reglas de kirki mididas van SIN
   !important, así que con !important ganamos sin depender del orden
   (misma lección del skip link, registro 030).

   Sólo se fija COLOR, nunca layout, y cada regla va scopeada a su
   contexto: el footer oscuro conserva sus enlaces blancos (18.41:1) y la
   sección oscura conserva sus botones dorados (7.71:1). */

/* Clases heredadas de la v1.0.0 (gris AA, sin !important). */
.ev-text-muted,
.text-muted {
    color: var(--ev-text-muted, #6d6d6d);
}

/* --- Navegación de escritorio: mismo diseño del tema, tonos con AA --- */
/* Reposo naranja #ba6813 (4.14) -> #9a5410 (5.8). El hover del tema
   (teal #1e576e, 7.94) ya cumple: aquí se preserva tal cual. */
#menu_wrapper .nav li > a,
#menu_wrapper div .nav li > a {
    color: var(--ev-link-warm, #9a5410) !important;
}
#menu_wrapper .nav li > a:hover,
#menu_wrapper .nav li > a:focus,
#menu_wrapper .nav li > a.hover {
    color: var(--ev-heading, #1e576e) !important;
}
/* Página actual: azul #4599ba (3.22) -> #1a5b73 (7.5); conserva la
   señal de "estás aquí" (li.current-menu-item / current_page_item). */
#menu_wrapper div .nav > li.current-menu-item > a,
#menu_wrapper div .nav > li.current-menu-parent > a,
#menu_wrapper div .nav > li.current-menu-ancestor > a,
#menu_wrapper .nav li.current_page_item > a {
    color: var(--ev-link, #1a5b73) !important;
}

/* --- Azul de contenido #4599ba (3.22) -> #1a5b73 (7.5), fondo claro:
       preguntas FAQ, numeración de miniaturas y filtro de galería --- */
.faq-item h3,
.ev-thumb-num,
.gallery_proof_filter li a {
    color: var(--ev-link, #1a5b73) !important;
}
.gallery_proof_filter li a:hover,
.gallery_proof_filter li a:focus {
    color: var(--ev-link-dark, #14485a) !important;
}

/* --- Color base del sitio: el body hereda #7a7a7a (4.29) y todos los
       textos sin declaración propia se quedaban por debajo de AA (los
       widgets de Elementor de /cursos-fotografia/ eran el caso visible:
       8+ párrafos heredaban ese gris). Al gris de marca AA (5.2).
       Lo heredado nunca supera a la declaración propia de cada
       elemento, así que los textos con su propio color no se tocan. --- */
body {
    color: var(--ev-text-muted, #6d6d6d) !important;
}

/* --- Grises con color propio -> gris de marca AA (5.2 sobre blanco,
       4.6 sobre crema): nunca por debajo del mínimo WCAG --- */
.woocommerce-result-count,
.ev-form-wrap p,
.ev-form-wrap .wpcf7-list-item-label {
    color: var(--ev-text-muted, #6d6d6d) !important;
}

/* Tabla de precios de foto individual (3.35–3.74): celdas a tinta. */
.ev-price-table td {
    color: var(--ev-text-primary, #1a1a1a) !important;
}

/* Precios WooCommerce: kirki los pinta #999 (2.85) — "$", importe en
   <bdi>, ins y del. Toda la rama al gris AA. */
.price,
.price * {
    color: var(--ev-text-muted, #6d6d6d) !important;
}

/* --- Banner de cookies (tercero CookieYes): sólo la barra medida,
       no el modal. Mensaje 4.29 -> 5.2; botón 2.79 -> blanco sobre
       verde de marca 7.57 --- */
.cli-bar-message {
    color: var(--ev-text-muted, #6d6d6d) !important;
}
#cookie-law-info-bar a.cli-plugin-button,
#wt-cli-accept-all-btn {
    background-color: var(--ev-green, #2f5d46) !important;
    border-color: var(--ev-green, #2f5d46) !important;
    color: var(--ev-text-on-green, #ffffff) !important;
}

/* --- Fondos oscuros: el heading de marca #1e576e cumple 7.9 sobre
       blanco pero cae a 2.30/2.32 sobre #0e1713/#07161c -> se aclara a
       crema (16:1) SÓLO dentro de estos contenedores. El resto del
       texto blanco/dorado de la sección oscura ya pasaba y no se toca. --- */
.ev-cta-fi h2,
.ev-cta-fi h3,
#footer .widget_block h2,
#footer .widget_block h3,
#footer .widget_block h4,
#footer .widget_block strong {
    color: var(--ev-text-on-dark, #f6f2ea) !important;
}

/* ============================================
   10. RESPONSIVE GRID GUARD (layout 1.1.5)
   ============================================ */

/* /activos-digitales/: la rejilla .ev-cards (Additional CSS del Personalizador)
   declara minmax(300px, 1fr); con la columna de contenido en 212px (viewport
   320) la pista no puede encoger y la tarjeta acababa en x=54..354 → +34px de
   scroll horizontal (reflow WCAG 1.4.10). El piso fluido min(300px, 100%)
   conserva los 300px cuando hay sitio (escritorio intacto) y suelta la pista
   al ancho real del contenedor en pantallas angostas. Doble clase para ganar
   en especificidad a la regla del Personalizador sin !important. Corrige
   también en 390, donde la tarjeta (300px) se salía del padding de la sección
   (282px) sin llegar a producir scroll. Medido A/B en vivo: 320 scrollW
   354→320 (tarjetas 212, dentro); 390 tarjeta 300→282; 1440 idéntico. --- */
.ev-cards.ev-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* ============================================
   11. PRINT STYLES
   ============================================ */
@media print {
    .ev-skip-link,
    .ev-overlay,
    .lightbox,
    nav,
    header,
    footer {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
        color: #000;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}

/* ============================================
   12. TYPESET — COMPENSACIÓN DE RETAG (v1.1.7)
   EV_Headings demueve encabezados en el buffer PHP
   (marca .ev-retag) para unificar la jerarquía; estas
   reglas preservan el aspecto computado previo donde
   las hojas del tema o del kit etiquetan por nivel (hN).
   ============================================ */

/* Título del banner de cookies (h5 → h4): fija los valores
   vigentes con especificidad por encima de las reglas
   tag-scoped del kit Elementor (h3/h4) y de kirki.
   Medido antes del retag: Anton / 300 / 16px / 1.5 / 1px / teal. */
#cookie-law-info-bar .cli_messagebar_head,
#cookie-law-info-bar h3.cli_messagebar_head,
#cookie-law-info-bar h4.cli_messagebar_head {
    font-family: Anton, "Helvetica Neue", Arial, Verdana, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: none;
    color: #1e576e;
}

/* Título de sección vacío de /cursos-fotografia/ (h4 → h3):
   conserva la caja exacta de 36px y el peso del kit. */
h3.ev-retag.ev-section-title {
    font-family: Anton, "Helvetica Neue", Arial, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 36px;
    color: #1d2a23;
}

/* h1.page-title demovido a h2: el tema oculta el original
   (h1.page-title { display: none }); se mantiene la misma
   intención para la etiqueta demovida. */
h2.page-title {
    display: none;
}

/* ============================================
   13. POLISH — OBJETIVOS TÁCTILES COOKIEYES (v1.1.8)
   P3 de la re-auditoría: "Ajustes" = 67x31 y "Ok" = 41x31
   a 320px (pasan el mínimo AA2.5.8 de24 pero no el
   objetivo de44). Suben a 44x44 con centrado flex; el
   padding sólo da aire porque la altura la fija min-height.
   Selector por clase (sólo existe en CookieYes): cubre la
   barra y el modal de ajustes. Los COLORES siguen
   scopeados sólo a la barra (regla de la sección 6).
   ============================================ */
a.cli-plugin-button,
button.cli-plugin-button,
a.wt-cli-element {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 6px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* ============================================
   14. POLISH MODAL — TARGETS DEL MODAL DE AJUSTES (v1.1.9)
   Extensión del fix de la sección 13 a la única superficie
   táctil que queda por debajo de 44: el modal de
   preferencias (cerrado en el estado auditado; UX extra).
   Medido en la BASE (modalbefore.py, 320 y 1440):
   - .cli-modal-close ........... 40x40 (absoluto, top:0 right:0)
   - #wt-cli-privacy-save-btn ... 174x36 (pad 10px 15px)
   - a.cli-nav-link (x6) ........ 87x21 DENTRO de la fila-gris
     .cli-tab-header de 45px (padding 12px) — subir su
     min-height crecería cada fila a 68px (+138px de modal)
     y desbordaría la ventana a 320px.
   - label.cli-slider (x5) ...... 38x20: ES la píldora visual
     (background + border-radius en el propio label) y sus
     dos pseudos están ocupados (::before = knob blanco,
     ::after = "Desactivado") → no se puede agrandar la
     caja sin deformar la píldora.
   Estrategia: crecer sólo las cajas aisladas (close y
   save) y extender el ÁREA DE GOLPE de los enlaces de
   categoría con su ::after (libre: content:none verificado)
   a 44px centrado dentro de su propia fila (44 < 45: ni
   solapa con la fila vecina ni con el switch/etiqueta de la
   derecha) → 0 cambio de layout. Selectores de CookieYes
   (.cli-*, wt-cli-*): 0 efecto fuera del modal.
   Excepciones WCAG 2.5.8 documentadas: "Mostrar más"
   (72x18) vive dentro del bloque de texto → excepción
   inline (forzar 44 desplazaría la prosa); el switch 38x20
   queda cubierto por la excepción de espaciado (el vecino
   más próximo —enlace de categoría— está a >80px: los
   círculos de 24px no se intersectan) y su ::after ya
   extiende el clic horizontal con la etiqueta
   "Desactivado".
   ============================================ */
.cli-modal .cli-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
}
a.cli_setting_save_button,
#wt-cli-privacy-save-btn {
    min-height: 44px !important;
    box-sizing: border-box !important;
}
.cli-tab-header a.cli-nav-link::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    /* width OBLIGATORIO: CookieYes declara .cli-tab-header a::after
       { width: 2px } — sin competir en width la caja queda en 2px
       (right:0 sobreconstruido se ignora) y el área de golpe no
       se estira. 100% del enlace = 87-116px a ancho completo. */
    width: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 44px !important;
}