/* Estilos para el Ayudante de Accesibilidad WCAG */

/*
 * Estilos para el enlace "Saltar al contenido".
 * Estos estilos ocultan el enlace visualmente hasta que recibe foco (navegación por teclado).
 */

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000000;
	color: #ffffff;
	padding: 15px;
	z-index: 100000;
	text-decoration: none;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}

.skip-link:focus {
	top: 0;
	outline: 2px solid #005177;
}


/*
 * Mejorar el indicador de foco para todos los elementos enfocables.
 * Esto es un ejemplo general. El tema Astra ya tiene buenos estilos de foco.
 * Es importante asegurarse de que los estilos de foco tengan suficiente contraste
 * con el fondo (WCAG SC 1.4.11 Non-text Contrast - AA).
 *
 * Para AA, el indicador de foco debe ser claramente perceptible (SC 2.4.7 Focus Visible).
 * No es necesario que cumpla los requisitos más estrictos de tamaño y contraste de AAA,
 * pero sigue siendo una buena práctica asegurar una buena visibilidad.
 */

/* Ejemplo de un estilo de foco mejorado - descomentar y ajustar según sea necesario */

*:focus-visible {
	outline: 2px solid #005177 !important; /* Azul oscuro, buen contraste sobre fondos claros */
	outline-offset: 1px;
	/* box-shadow: 0 0 0 3px rgba(0, 81, 119, 0.25) !important; /* Un halo adicional opcional */
}
*/

/* 🎯 Correcciones específicas para TinySlider aria-hidden */
.tns-item[aria-hidden="true"] .aaw-tns-fixed,
.client-slider[aria-hidden="true"] .aaw-tns-fixed,
[aria-hidden="true"] .aaw-force-unfocusable {
    /* Asegurar que los elementos corregidos NO sean enfocables */
    pointer-events: none !important;
    user-select: none !important;
    outline: none !important;
    /* Hacer que el navegador los trate como no enfocables */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Forzar tabindex en elementos aria-hidden */
[aria-hidden="true"] a,
[aria-hidden="true"] button,
[aria-hidden="true"] input,
[aria-hidden="true"] select,
[aria-hidden="true"] textarea {
    /* CSS para asegurar que no sean enfocables */
    -webkit-user-focus: ignore !important;
    -moz-user-focus: ignore !important;
}

/* Corrección específica para enlaces en tns-item */
.tns-item[aria-hidden="true"] a[tabindex="-1"],
.aaw-ultra-fixed {
    /* Asegurar que los enlaces con tabindex="-1" NO sean enfocables */
    pointer-events: none !important;
    outline: none !important;
    cursor: default !important;
    /* Forzar que no sean enfocables de ninguna manera */
    -webkit-user-focus: ignore !important;
    -moz-user-focus: ignore !important;
    user-select: none !important;
}

/* 🔥 Corrección ULTRA AGRESIVA para elementos específicamente identificados por Lighthouse */
[data-aaw-ultra-fix="lighthouse-aria-hidden-emergency"] {
    /* Máxima prioridad para hacer no enfocables */
    pointer-events: none !important;
    outline: none !important;
    cursor: default !important;
    -webkit-user-focus: ignore !important;
    -moz-user-focus: ignore !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Indicador visual para elementos TinySlider corregidos (solo en modo debug) */
.aaw-debug-mode .aaw-tns-fixed {
    position: relative;
}

.aaw-debug-mode .aaw-tns-fixed::after {
    content: "🔒 TNS";
    position: absolute;
    top: -2px;
    right: -2px;
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
}

/* Contenedores TinySlider corregidos */
.aaw-debug-mode .aaw-tns-corrected {
    border: 1px dashed #28a745 !important;
    position: relative;
}

.aaw-debug-mode .aaw-tns-corrected::before {
    content: "✅ TinySlider Aria-Hidden Corregido";
    position: absolute;
    top: -15px;
    left: 0;
    background: #28a745;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    z-index: 1000;
    white-space: nowrap;
}

/* 
 * Correcciones específicas para errores detectados por Lighthouse
 */

/* 1. Mejorar contraste de color para botones específicos */
.aaw-high-contrast,
a.jkit-button-wrapper.aaw-high-contrast {
    background-color: #1a1a1a !important; /* Fondo más oscuro */
    color: #ffffff !important; /* Texto blanco para máximo contraste */
    border: 2px solid #ffffff !important;
}

.aaw-high-contrast:hover,
a.jkit-button-wrapper.aaw-high-contrast:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #cccccc !important;
}

/* Clase general para mejorar contraste en elementos */
.aaw-contrast-enhanced {
    filter: contrast(1.2) brightness(1.1);
}

/* 2. Indicadores mejorados de foco para navegación por teclado */
.aaw-focusable:focus,
.aaw-focus-enhanced {
    outline: 3px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 115, 170, 0.3) !important;
    background-color: rgba(0, 115, 170, 0.1) !important;
    transition: all 0.2s ease-in-out;
}

/* 3. Estilos para encabezados con errores de jerarquía */
.aaw-heading-error {
    border-left: 4px solid #d63638 !important;
    padding-left: 15px !important;
    background-color: rgba(214, 54, 56, 0.1) !important;
    position: relative;
}

.aaw-heading-error::before {
    content: "⚠️ Error de jerarquía";
    font-size: 12px;
    color: #d63638;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

/* Estilos específicos para el encabezado de newsletter corregido */
.aaw-heading-corrected[data-aaw-reason="lighthouse-newsletter"] {
    border-left: 4px solid #00a32a !important;
    padding-left: 15px !important;
    background-color: rgba(0, 163, 42, 0.1) !important;
    position: relative;
}

.aaw-heading-corrected[data-aaw-reason="lighthouse-newsletter"]::before {
    content: "✅ Corregido por AAW (H3→H2)";
    font-size: 12px;
    color: #00a32a;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

/* Estilo para el encabezado específico detectado por Lighthouse */
.aaw-lighthouse-corrected.heading-title {
    position: relative;
}

.aaw-lighthouse-corrected.heading-title::after {
    content: "Corregido automáticamente por el plugin de accesibilidad";
    position: absolute;
    top: -20px;
    right: 0;
    font-size: 10px;
    color: #646970;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Mostrar información de corrección en modo debug */
.aaw-debug-mode .aaw-lighthouse-corrected.heading-title::after {
    opacity: 1;
}

/* Hover para mostrar información de corrección */
.aaw-lighthouse-corrected.heading-title:hover::after {
    opacity: 1;
}

/* Estilos específicos para diferentes tipos de errores de encabezados */
.aaw-heading-jump::before {
    content: "⚠️ Salto en jerarquía de encabezados";
}

.aaw-heading-first-not-h1::before {
    content: "⚠️ El primer encabezado debería ser H1";
}

.aaw-heading-lighthouse-issue {
    border-left: 4px solid #ff9800 !important;
    padding-left: 15px !important;
    background-color: rgba(255, 152, 0, 0.1) !important;
    position: relative;
}

.aaw-heading-lighthouse-issue::before {
    content: "🔍 Detectado por Lighthouse";
    font-size: 12px;
    color: #ff9800;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

.aaw-heading-first-should-be-h1 {
    border-left: 4px solid #2196f3 !important;
    padding-left: 15px !important;
    background-color: rgba(33, 150, 243, 0.1) !important;
}

.aaw-heading-first-should-be-h1::before {
    content: "💡 Primer encabezado debería ser H1";
    font-size: 12px;
    color: #2196f3;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

/* Estilos para encabezados corregidos automáticamente */
.aaw-heading-corrected {
    border-left: 4px solid #4caf50 !important;
    padding-left: 15px !important;
    background-color: rgba(76, 175, 80, 0.1) !important;
    position: relative;
}

.aaw-heading-corrected::before {
    content: "✅ Nivel corregido automáticamente (era H" attr(data-aaw-original-level) ")";
    font-size: 12px;
    color: #4caf50;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

/* Tooltip para mostrar información de corrección */
.aaw-heading-error[title],
.aaw-heading-lighthouse-issue[title],
.aaw-heading-corrected[title] {
    cursor: help;
}

/* Estilos específicos para el encabezado de newsletter detectado por Lighthouse */
h3.heading-title[data-aaw-suggested-level] {
    border-left: 4px solid #ff5722 !important;
    padding-left: 15px !important;
    background-color: rgba(255, 87, 34, 0.1) !important;
    position: relative;
}

h3.heading-title[data-aaw-suggested-level]::before {
    content: "🎯 Lighthouse: H" attr(data-aaw-original-level) " → H" attr(data-aaw-suggested-level);
    font-size: 12px;
    color: #ff5722;
    font-weight: normal;
    display: block;
    margin-bottom: 5px;
}

/* Indicador visual para elementos corregidos */
.aaw-heading-corrected::after {
    content: "🔄";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* Estilos para modo de desarrollo (mostrar más información) */
.aaw-debug-mode .aaw-heading-error::after,
.aaw-debug-mode .aaw-heading-lighthouse-issue::after {
    content: " [" attr(data-aaw-original-level) " → " attr(data-aaw-suggested-level) "]";
    font-size: 11px;
    color: #666;
    font-weight: normal;
}

/* Estilos específicos para correcciones de Lighthouse */
.aaw-lighthouse-corrected {
    position: relative;
}

/* Tooltips de Lighthouse solo en modo debug */
.aaw-debug-mode .aaw-lighthouse-corrected::after {
    content: "✅ Lighthouse";
    position: absolute;
    top: -20px;
    right: 0;
    background: #46b450;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
}

.aaw-debug-mode .aaw-lighthouse-corrected:hover::after {
    opacity: 1;
}

/* Estilos específicos para el encabezado newsletter corregido */
.aaw-newsletter-heading-fixed {
    border-left: 4px solid #46b450 !important;
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(70, 180, 80, 0.1) 0%, transparent 100%);
}

/* 🔥 Estilos específicos para el encabezado "SOBRE NOSOTROS" corregido */
.aaw-sobre-nosotros-fixed {
    border-left: 4px solid #2196F3 !important;
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.1) 0%, transparent 100%);
    position: relative;
}

.aaw-sobre-nosotros-fixed::before {
    content: "✅ H4→H" attr(data-aaw-corrected-level) " (SOBRE NOSOTROS)";
    position: absolute;
    top: -15px;
    right: 0;
    background: #2196F3;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
    font-weight: normal;
}

.aaw-sobre-nosotros-fixed:hover::before {
    opacity: 1;
}

/* Modo debug - mostrar siempre el indicador */
.aaw-debug-mode .aaw-sobre-nosotros-fixed::before {
    opacity: 1;
}

/* Animación sutil para elementos corregidos - solo en modo debug */
.aaw-debug-mode .aaw-lighthouse-corrected {
    animation: aaw-correction-pulse 2s ease-in-out;
}

@keyframes aaw-correction-pulse {
    0% { box-shadow: 0 0 0 0 rgba(70, 180, 80, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(70, 180, 80, 0.1); }
    100% { box-shadow: 0 0 0 0 rgba(70, 180, 80, 0); }
}

/* 4. Mejorar botones de formulario sin texto */
button:empty::after,
button[aria-label]:empty::after {
    content: attr(aria-label);
    font-size: 14px;
    padding: 8px 12px;
}

/* 5. Mejorar contraste en formularios */
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #0073aa !important;
    outline-offset: 1px !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2) !important;
}

/* 6. Asegurar que los elementos interactivos tengan un tamaño mínimo */
button,
a[href],
input[type="button"],
input[type="submit"],
input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
}

/* 7. Mejorar la visibilidad de enlaces */
a:not(.aaw-high-contrast) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover:not(.aaw-high-contrast) {
    text-decoration-thickness: 3px;
    background-color: rgba(0, 115, 170, 0.1);
}

/* 8. Estilos para imágenes sin texto alternativo */
img:not([alt]),
img[alt=""] {
    border: 2px dashed #d63638 !important;
    opacity: 0.7;
}

/* 9. Mejorar la legibilidad general del texto */
body {
    line-height: 1.6 !important;
}

p, li, div {
    line-height: 1.5 !important;
}

/* 10. Asegurar que el texto tenga suficiente espaciado */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em !important;
    margin-top: 1em !important;
    line-height: 1.3 !important;
}

/* 11. Mejorar la navegación de listas */
ul[role="menubar"] li,
ol[role="menubar"] li,
nav ul li,
nav ol li {
    border: 1px solid transparent;
    border-radius: 3px;
}

ul[role="menubar"] li:focus-within,
ol[role="menubar"] li:focus-within,
nav ul li:focus-within,
nav ol li:focus-within {
    border-color: #0073aa;
    background-color: rgba(0, 115, 170, 0.1);
}

/* 12. Modo de alto contraste activable */
.aaw-high-contrast-mode {
    filter: contrast(1.5) brightness(1.2);
}

.aaw-high-contrast-mode * {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* 13. Indicadores para screen readers */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* 🍪 Botones de cookies corregidos por contraste - Lighthouse Mobile Fix */
.cky-btn.cky-btn-accept,
.cky-btn.cky-btn-reject,
.aaw-cookie-high-contrast {
    /* Forzar colores con contraste 4.5:1 o superior */
    color: #ffffff !important; /* Blanco puro para máximo contraste */
    font-weight: bold !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) !important; /* Sombra para mejorar legibilidad */
    border: 2px solid #ffffff !important; /* Borde blanco para definición */
    transition: all 0.2s ease-in-out !important;
}

/* Botón ACEPTAR TODO - fondo naranja oscuro para mejor contraste */
.cky-btn.cky-btn-accept {
    background-color: #CC4200 !important; /* Naranja más oscuro (ratio: ~5.2:1 con blanco) */
}

.cky-btn.cky-btn-accept:hover,
.cky-btn.cky-btn-accept:focus {
    background-color: #B33800 !important; /* Aún más oscuro en hover */
    color: #ffffff !important;
    outline: 3px solid #ffb900 !important;
    box-shadow: 0 0 0 5px rgba(255, 185, 0, 0.4) !important;
}

/* Botón RECHAZAR TODO - fondo rojo oscuro para mejor contraste */
.cky-btn.cky-btn-reject {
    background-color: #CC2200 !important; /* Rojo oscuro (ratio: ~6.8:1 con blanco) */
}

.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-reject:focus {
    background-color: #B31C00 !important; /* Aún más oscuro en hover */
    color: #ffffff !important;
    outline: 3px solid #ffb900 !important;
    box-shadow: 0 0 0 5px rgba(255, 185, 0, 0.4) !important;
}

/* Corrección ultra específica para elementos inline style */
button[style*="color: #d0d0d0"] {
    color: #ffffff !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
}

button[style*="background-color: #FC5404"] {
    background-color: #CC4200 !important;
}

/* Clase aplicada por JavaScript para corrección automática */
.aaw-cookie-high-contrast {
    font-weight: bold !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #CC4200 !important;
    outline: 2px solid #CC4200 !important;
    transition: box-shadow 0.2s, outline 0.2s !important;
}

.aaw-cookie-high-contrast.cky-btn-reject {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #CC2200 !important;
    outline: 2px solid #CC2200 !important;
}

.aaw-cookie-high-contrast:focus {
    outline: 3px solid #ffb900 !important;
    box-shadow: 0 0 0 4px #ffb900 !important;
}

/* Correcciones de aria-hidden */
.aaw-aria-hidden-fixed {
    opacity: 0.7 !important;
    pointer-events: none !important;
    outline: 1px dashed #dc3232 !important;
    outline-offset: 2px;
}

.aaw-aria-hidden-corrected {
    position: relative;
}

.aaw-aria-hidden-corrected::before:not(i) {
    content: "🎯 aria-hidden corregido";
    position: absolute;
    top: -15px;
    left: 0;
    background: #dc3232;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 9999;
}

.aaw-aria-hidden-corrected:hover::before {
    opacity: 1;
}

/* Modo debug - mostrar siempre los indicadores aria-hidden */
body.aaw-debug-mode .aaw-aria-hidden-corrected::before {
    opacity: 1;
    background: #0073aa;
}

body.aaw-debug-mode .aaw-aria-hidden-fixed {
    outline: 2px dashed #0073aa !important;
}


/*
 * Es crucial probar estos estilos con el diseño del tema talleres-alberto-child y Astra
 * para asegurar que no haya conflictos y que mejoren la experiencia.
 */

 .elementor-68 .elementor-element.elementor-element-2cc078c8 .jeg-elementor-kit.jkit-fun-fact .fun-fact-inner .content .number-wrapper, .elementor-68 .elementor-element.elementor-element-2cc078c8 .jeg-elementor-kit.jkit-fun-fact .fun-fact-inner .content .title  {
    color: #000000 !important; /* Blanco puro para máximo contraste */
 }