/* ====================================
   ACCESIBILIDAD.CSS
   Correcciones de accesibilidad para Kutxabank Store
   ================================== */

/* ====================================
   CORRECCIÓN: Elementos sin rol asociado - Consentimientos
   Criterio WCAG: 4.1.2 Name, Role, Value (AA)
   ================================== */

/* Styling para elementos de consentimiento estructurados semánticamente */
.consentimiento-link {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* Hacer que el enlace se vea como parte del texto original */
.consentimiento-link a {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegurar que no hay saltos de línea no deseados */
.custom-control-label + .consentimiento-link {
    display: inline !important;
}

/* Mantener el estilo de subrayado original si existe */
.consentimiento-link a.subraya {
    text-decoration: underline !important;
}

/* Asegurar que el color del enlace sea consistente */
.consentimiento-link a.consentimiento {
    color: inherit !important;
}

/* Mejorar visibilidad de texto de ayuda */
[role="note"] {
    font-style: italic !important;
    color: #6c757d !important;
    margin-top: 0.25rem !important;
}

/* Asegurar que los grupos de consentimiento tengan suficiente espacio */
[role="group"] + [role="group"] {
    margin-top: 1.5rem !important;
}

/* Mejorar la visibilidad de fieldsets */
fieldset[role="group"] {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ocultar visualmente pero mantener accesible para lectores de pantalla */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ====================================
   CORRECCIÓN: Contraste de texto 4.5:1
   Criterio WCAG: 1.4.3 Contrast (Minimum) (AA)
   ================================== */

/* Mejorar contraste del borde de checkboxes */
.custom-control-label::after {
    border: 1px solid #4a4a4a !important; /* Cambiar de #666666 a #4a4a4a para mejor contraste */
}

/* ====================================
   CORRECCIÓN: Contraste de elementos no textuales 3:1
   Criterio WCAG: 1.4.11 Non-text Contrast (AA)
   ================================== */

/* Mejorar contraste de separadores entre elementos de consentimiento */
.well-consentimiento ul li {
    border-bottom: 1px solid #949494 !important; /* Cambiar de #dfdfdf a #949494 para cumplir 3:1 */
}

/* ====================================
   CORRECCIÓN: Textos informativos navegables
   Criterio WCAG: 2.4.7 Focus Visible (AA)
   Aplicar estilos solo cuando son necesarios para accesibilidad
   ================================== */

/* FORZAR que no haya outline por defecto - sobrescribir cualquier CSS existente */
.informative-text,
.informative-text:focus,
h1[tabindex="0"],
h1[tabindex="0"]:focus,
h1:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Sobrescribir cualquier estilo de foco del navegador o tema */
*:focus {
    outline: none !important;
}

/* Restaurar outline solo para elementos de formulario que realmente lo necesitan */
input:focus,
button:focus,
select:focus,
textarea:focus,
a:focus {
    outline: revert !important;
}

/* SOLO aplicar outline cuando se detecta tecnología asistiva mediante JavaScript */
.accessibility-mode .informative-text:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 1px !important;
}

.accessibility-mode h1[tabindex="0"]:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 1px !important;
}

/* Solo en modo Windows Alto Contraste */
@media (forced-colors: active) {
    .accessibility-mode .informative-text:focus {
        outline: 2px solid ButtonText !important;
        outline-offset: 1px !important;
    }
    
    .accessibility-mode h1[tabindex="0"]:focus {
        outline: 2px solid ButtonText !important;
        outline-offset: 1px !important;
    }
}

/* ====================================
   CORRECCIÓN: Enlaces visitados en consentimientos
   Criterio WCAG: 1.4.1 Use of Color (A)
   Evitar confusión con el estado "visitado" de enlaces
   ================================== */

/* Normalizar apariencia de enlaces en consentimientos */
.consentimiento-link a,
.consentimiento-link a:link,
.consentimiento-link a:visited {
    color: inherit !important; /* Heredar color del texto padre */
    text-decoration: underline !important;
    font-weight: inherit !important;
}

/* Foco para enlaces en consentimientos */
.well-consentimiento a:focus,
.consentimiento-link a:focus {
    background-color: #fff3cd !important; /* Fondo amarillo claro */
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* Estado hover para enlaces */
.consentimiento-link a:hover {
    color: #0066cc !important;
    text-decoration: underline !important;
}

/* Asegurar que el estado visitado no anule otros estilos importantes */
.consentimiento-link a:visited:focus {
    background-color: #fff3cd !important;
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* ====================================
   CORRECCIÓN: Foco visible
   Criterio WCAG: 2.4.7 Focus Visible (AA)
   
   CRÍTICO: El CSS original elimina los outlines, esto es un problema grave de accesibilidad
   ================================== */

/* RESTAURAR y MEJORAR indicadores de foco para todos los elementos interactivos */

/* Foco general para todos los elementos interactivos */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
[tabindex]:focus {
    outline: 3px solid #0066cc !important; /* Azul accesible */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc !important; /* Doble outline para mejor visibilidad */
}

/* Foco específico para elementos de consentimientos */
.well-consentimiento input[type="checkbox"]:focus + .custom-control-label::after {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc !important;
}

/* Foco para enlaces en consentimientos */
.well-consentimiento a:focus,
.consentimiento-link a:focus {
    background-color: #fff3cd !important; /* Fondo amarillo claro */
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}

/* Foco para botón de consentimientos */
.well-consentimiento button:focus {
    outline: 3px solid #ffffff !important; /* Outline blanco en botón negro */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #000000, 0 0 0 4px #ffffff, 0 0 0 6px #0066cc !important;
}

/* Foco mejorado para elementos de formulario */
.form-control:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    border-color: #0066cc !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc !important;
}

/* Foco para custom selects */
.custom-select:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    border-color: #0066cc !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc !important;
}

/* Foco para botones de navegación */
.navbar-toggler:focus {
    outline: 3px solid #ffffff !important; /* Outline blanco en fondo negro */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #000000, 0 0 0 4px #ffffff !important;
}

/* Foco para botones de búsqueda */
.btn-show-search:focus,
.btn-search:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc !important;
}

/* Asegurar foco visible en alto contraste */
@media (prefers-contrast: high) {
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus,
    [tabindex]:focus {
        outline: 4px solid #000000 !important;
        outline-offset: 2px !important;
        background-color: #ffff00 !important;
        color: #000000 !important;
    }
}

/* Foco visible para modo oscuro */
@media (prefers-color-scheme: dark) {
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    a:focus,
    [tabindex]:focus {
        outline: 3px solid #66b3ff !important; /* Azul más claro para modo oscuro */
        outline-offset: 2px !important;
        box-shadow: 0 0 0 1px #000000, 0 0 0 4px #66b3ff !important;
    }
}

/* ====================================
   CORRECCIÓN: Solapamientos en zoom 200% - Consentimientos
   Criterio WCAG: 1.4.10 Reflow (AA)
   
   OBJETIVO: Mantener el aspecto visual original pero evitar solapamientos en zoom
   ================================== */

/* Solo aplicar cambios mínimos necesarios para zoom alto */

/* Contenedor principal - solo reducir padding en pantallas muy pequeñas */
@media (max-width: 576px) {
    .well-consentimiento {
        padding: 1.5rem !important; /* Reducir solo en móviles */
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
}

/* Pantallas muy pequeñas o zoom muy alto */
@media (max-width: 400px) {
    .well-consentimiento {
        padding: 1rem !important; /* Padding mínimo para zoom alto */
    }
    
    /* Reducir ligeramente el tamaño de fuente solo en casos extremos */
    .well-consentimiento .custom-checkbox label {
        font-size: 1.6rem !important;
    }
    
    .well-consentimiento ul li {
        font-size: 1.4rem !important;
    }
}

/* Permitir word-wrap solo cuando sea absolutamente necesario */
.well-consentimiento .custom-checkbox label,
.well-consentimiento label + a.consentimiento,
.consentimiento-link a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* NO modificar: spacing, margins, display, flex, line-height 
   para mantener el aspecto original */

/* ====================================
   CORRECCIÓN: Mensajes de validación enfocables (manteniendo estilos originales)
   Criterio WCAG: 3.3.1 Error Identification (A) + 3.3.3 Error Suggestion (AA)
   ================================== */

/* Contenedor de mensajes de error enfocable - mantiene estilos originales */
.mensaje-error-container {
    outline: none !important;
    /* No añadir padding, background, ni border adicionales para mantener el estilo original */
}

/* Cuando no hay error, ocultar completamente */
.mensaje-error-container:empty {
    display: none !important;
}

/* Foco visible en mensajes de error - solo añadir outline */
.mensaje-error-container:focus {
    outline: 3px solid #e71313 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #e71313 !important;
}

/* MANTENER el estilo original del mensaje_error tal como está en estiloak.css */
.mensaje-error-container p.mensaje_error {
    color: #e71313;
    padding: 5px 0px;
    font-size: 1.4rem;
    position: relative;
    z-index: 0;
    margin: 0;
}

/* MANTENER el estilo original para checkboxes */
.mensaje-error-container .custom-checkbox p.mensaje_error {
    padding: 12px 10px;
}

/* MANTENER el icono original */
.mensaje-error-container .custom-checkbox p.mensaje_error + .icon_error {
    display: none;
}

/* Asegurar que el icono_error se mantiene igual */
.mensaje-error-container .icon_error {
    position: absolute;
    display: block;
    right: 7px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff url(/img/form_error.svg) center center no-repeat;
}

/* ====================================
   CORRECCIÓN: Mensajes de validación enfocables
   Criterio WCAG: 3.3.1 Error Identification (A) + 3.3.3 Error Suggestion (AA)
   ================================== */

/* Contenedor de mensajes de error enfocable */
.mensaje-error-container {
    outline: none !important;
    border-radius: 4px !important;
    margin-top: 0.25rem !important;
}

/* ====================================
   CORRECCIÓN AMPLIADA: Elementos sin rol asociado - Consentimientos
   Mejoras adicionales para estructura semántica
   ================================== */

/* Estilos para elementos de estructura semántica */
[role="region"] {
    position: relative !important;
}

/* Mejorar espaciado entre grupos de consentimientos */
[role="list"] + [role="list"] {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #e9ecef !important;
}

/* Styling para elementos de grupo dentro de consentimientos */
[role="group"] + [role="group"] {
    margin-top: 1rem !important;
}

/* Asegurar que los elementos con rol listitem tengan suficiente espacio */
[role="listitem"] {
    margin-bottom: 1rem !important;
}

/* Mejorar la visibilidad de notas de ayuda cuando se muestran */
[role="note"]:not(.sr-only) {
    background-color: #f8f9fa !important;
    border-left: 3px solid #6c757d !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    font-size: 0.875em !important;
}

/* Styling específico para fieldsets con rol group */
fieldset[role="group"] {
    position: relative !important;
}

fieldset[role="group"] legend {
    font-weight: bold !important;
}

/* Mejorar el botón de envío con contexto adicional */
button[role="button"] + [role="note"] {
    margin-top: 0.25rem !important;
    font-size: 0.8em !important;
    color: #495057 !important;
}

/* ====================================
   FUTUROS: Espacio para otras correcciones de accesibilidad
   ================================== */

/**
 * Correcciones de accesibilidad para Kutxabank Store
 * Tarea T10002: Mejora de contraste de texto (mínimo 4,5:1)
 */

/* Texto sobre fondos con imágenes en carrusel */
.carousel-caption h3, 
.carousel-caption p {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fondo semi-transparente para mejorar el contraste */
    padding: 5px !important;
    color: #FFFFFF !important;
}

/* Mejora de contraste en precios y ofertas */
.precio-tachado {
    color: #B40000 !important; /* Rojo más oscuro para mejor contraste */
}

.precio-tachado-cupon {
    color: #8A6700 !important; /* Amarillo más oscuro para mejor contraste */
}

/* Mejora de contraste en textos de ventajas */
.bg-advantage ul li {
    color: #000000 !important;
}

/* Mejora de contraste en información adicional y textos secundarios */
.mes,
.financialo,
.vendido-enviado,
.legal-text {
    color: #595959 !important; /* Gris más oscuro para mejor contraste */
}

/* Mejora de contraste en el placeholder del buscador */
::-webkit-input-placeholder,
#nuevo ::-webkit-input-placeholder {
    color: #595959 !important;
}
:-moz-placeholder,
#nuevo :-moz-placeholder {
    color: #595959 !important;
}
::-moz-placeholder,
#nuevo ::-moz-placeholder {
    color: #595959 !important;
}
:-ms-input-placeholder,
#nuevo :-ms-input-placeholder {
    color: #595959 !important;
}

/* Etiquetas con fondos claros */
.tag-descuento,
.tag-novedad {
    color: #FFFFFF !important; /* Asegurar texto blanco sobre fondos oscuros */
}

/* Mejora de contraste en elementos de filtro */
.btn-filtrar,
.custom-select,
.form-control-palabra {
    color: #333333 !important; /* Texto más oscuro para mejor contraste */
}


/* Mejora de contraste en cuadros de texto y formularios */
.form-control {
    color: #333333 !important; /* Texto más oscuro en campos de formulario */
}

/* Mejora del contraste en el texto del pie de página */
.copyright p {
    color: #FFFFFF !important;
}

/* Mejora del contraste en elementos de paginación */
.pagination .page-link {
    color: #000000 !important;
}

/* Mejora de contraste en las etiquetas */
label {
    color: #333333 !important;
}

/* Mejora de contraste en elementos de navegación */
.breadcrumb-item a {
    color: #333333 !important;
}

/* Mejora de contraste en iconos de navegación .well-icons */
.well-icons .btn-user,
.well-icons .btn-favorite,
.well-icons .btn-cart {
    /* Mantener estilos originales de fondo e imagen */
    border-radius: 50%;
}

/* Mejora de contraste en elementos interactivos de menor importancia */
.ver-todo a,
.modificar-opciones,
.btn-masopciones:before {
    color: #000000 !important;
}

/* ====================================
   TAREA T10005: Presentación de elementos no textuales 
   que no tiene una relación de contraste de al menos 3:1
   Criterio WCAG: 1.4.11 Non-text Contrast (AA)
   ================================== */

/* Bordes de botones outline más oscuros para mejor contraste */
.btn-outline-primary {
    border-color: #0056b3 !important; /* Azul más oscuro (antes #007bff) */
    border-width: 2px !important; /* Borde más grueso para mejor visibilidad */
}

.btn-outline-secondary {
    border-color: #545b62 !important; /* Gris más oscuro (antes #6c757d) */
    border-width: 2px !important;
}

.btn-outline-danger {
    border-color: #bd2130 !important; /* Rojo más oscuro (antes #dc3545) */
    border-width: 2px !important;
}

.btn-outline-success {
    border-color: #1e7e34 !important; /* Verde más oscuro (antes #28a745) */
    border-width: 2px !important;
}

/* Indicadores del carrusel más oscuros para mejor contraste */
.carousel-indicators li {
    background-color: #495057 !important; /* Gris más oscuro para mejor contraste */
    border: 2px solid #495057 !important; /* Borde más oscuro */
    opacity: 0.7 !important;
}

.carousel-indicators .active {
    background-color: #212529 !important; /* Negro para indicador activo */
    border-color: #212529 !important;
    opacity: 1 !important;
}

/* Controles del carrusel (flechas) más visibles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Fondo oscuro */
    padding: 20px !important;
    border-radius: 4px !important;
}


.form-control:focus {
    border-color: #0056b3 !important; /* Azul más oscuro en foco */
    border-width: 2px !important;
}

/* Custom select con mejor contraste */
.custom-select {
    border-color: #495057 !important; /* Borde más oscuro */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important; /* Flecha más oscura */
}

/* Flechas de navegación del slider de productos más visibles */
.slick-arrow {
    opacity: 1 !important;
}

.slick-prev:before,
.slick-next:before {
    color: #212529 !important; /* Flechas negras para mejor contraste */
    font-size: 30px !important; /* Tamaño más grande */
    opacity: 1 !important;
}

/* Hover en flechas del slider */
.slick-prev:hover:before,
.slick-next:hover:before {
    color: #000000 !important;
}

/*.btn-favorite:hover,*/
/*.btn-cart:hover {*/
/*    border-color: #212529 !important; !* Borde más oscuro en hover *!*/
/*    background-color: rgba(0, 0, 0, 0.05) !important; !* Fondo ligero en hover *!*/
/*}*/

/* Etiquetas y badges con bordes más visibles */
.badge {
    border: 1px solid #495057 !important;
}

.tag-novedad {
    border: 2px solid #495057 !important; /* Borde visible */
}

.tag-descuento {
    background: #bd2130 !important; /* Fondo rojo oscuro */
}

/* Switches/toggles de cookies con mejor contraste */
.onoffswitch-checkbox + .onoffswitch-label .onoffswitch-inner {
    border: 2px solid #495057 !important;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    background: #212529 !important; /* Switch más oscuro */
    border: 2px solid #212529 !important;
}

/* Paginación con mejor contraste */
.pagination .page-link {
    border-color: #495057 !important; /* Borde más oscuro */
}

.pagination .page-item.active .page-link {
    background-color: #212529 !important;
    border-color: #212529 !important;
}

/* Iconos de redes sociales con mejor contraste */
.social-icon {
    border: 2px solid #495057 !important;
    opacity: 1 !important;
}

/* Separadores y líneas divisorias más visibles */
hr {
    border-color: #495057 !important;
    opacity: 1 !important;
}

/* Tabs/pestañas con mejor contraste */
.nav-tabs .nav-link {
    border-color: #dee2e6 #dee2e6 #fff !important;
}

.nav-tabs .nav-link.active {
    border-color: #495057 #495057 #fff !important;
    border-width: 2px !important;
}

/* Tooltips con mejor contraste */
.tooltip-inner {
    background-color: #212529 !important;
}

.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #212529 !important;
}

/* Dropdowns con mejor contraste en bordes */
.dropdown-menu {
    border-color: #495057 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Progress bars con mejor contraste */
.progress {
    background-color: #e9ecef !important;
    border: 1px solid #495057 !important;
}

/* Checkboxes y radio buttons personalizados con mejor contraste */
.custom-control-label::before {
    border-color: #495057 !important;
    border-width: 2px !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #212529 !important;
    border-color: #212529 !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #212529 !important;
    border-color: #212529 !important;
}

/* Iconos de búsqueda y lupa con mejor contraste */
.btn-search,
.btn-show-search {
    border: 2px solid #495057 !important;
}

/* Elementos del menú desplegable con mejor contraste */
.dropdown-toggle::after {
    border-top-color: #212529 !important;
    border-width: 0.4em !important;
}

/* Mejora de contraste para elementos de la barra de navegación */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Asegurar que los elementos deshabilitados también cumplan el contraste */
.btn:disabled,
.form-control:disabled,
.custom-select:disabled {
    opacity: 0.7 !important; /* Mantener visible pero indicar estado deshabilitado */
    border-color: #6c757d !important;
}

/* ==========================================================================
   T10009: INDICADORES DE FOCO VISIBLE
   Todos los elementos interactivos necesitan un indicador de foco claro
   ========================================================================== */

/* Indicador de foco general para todos los elementos interactivos */
:focus {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* Estilos de foco específicos para botones */
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.5) !important;
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* Estilos de foco para campos de formulario */
.form-control:focus,
.form-control:focus-visible {
  border-color: #1976d2 !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.5) !important;
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* Estilos de foco para enlaces de navegación */
.nav-link:focus,
.nav-link:focus-visible {
  text-decoration: underline !important;
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
  background-color: rgba(25, 118, 210, 0.1) !important;
}

/* Estilos de foco para enlaces en general */
a:focus,
a:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
}

/* Estilos de foco para elementos del carrito */
.btn-user:focus,
.btn-favorite:focus,
.btn-cart:focus {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.5) !important;
}

/* ==========================================================================
   T10006, T10007: ACCESIBILIDAD DE CARRUSELES
   Mejoras específicas para el carrusel principal y sliders de productos
   ========================================================================== */

/* Controles del carrusel principal */
.carousel-control-prev,
.carousel-control-next {
  /* Asegurar que son elementos focusables */
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1000;
}


/* Indicadores del carrusel */
.carousel-indicators li {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.carousel-indicators li:focus,
.carousel-indicators li:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  opacity: 1;
}

.carousel-indicators li.active {
  opacity: 1;
}

/* Botones de pausa/play del carrusel (cuando se implementen) */
.carousel-pause-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.carousel-pause-button:focus,
.carousel-pause-button:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
  background: rgba(0, 0, 0, 0.9);
}

/* Mejorar la visibilidad del carousel cuando tiene foco */
#demo.carousel:focus-within {
    outline: 3px solid #1976d2 !important;
    outline-offset: 2px !important;
}

/* Estilos específicos para enlaces dentro del carousel */
#demo .carousel-item a {
    display: block !important;
    outline: none !important;
    border-radius: 4px !important;
    transition: box-shadow 0.2s ease !important;
}

#demo .carousel-item a:focus {
    outline: 3px solid #ffffff !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #1976d2, 0 0 20px rgba(25, 118, 210, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Indicador visual sutil cuando el carousel está pausado por foco */
#demo.carousel-paused-by-focus::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    background-color: #ffc107;
    border-radius: 50%;
    z-index: 1000;
    animation: pause-indicator 1s ease-in-out infinite alternate;
}

@keyframes pause-indicator {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* Mejorar contraste de texto en los enlaces del carousel */
#demo .carousel-item a img {
    transition: opacity 0.2s ease !important;
}

#demo .carousel-item a:focus img {
    opacity: 0.9 !important;
}

/* Asegurar que el contenido descriptivo sea accesible */
#demo .carousel-item [id^="desc-"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Indicadores del carousel con mejor accesibilidad */
#demo .carousel-indicators li {
    cursor: pointer !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

#demo .carousel-indicators li:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 3px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

#demo .carousel-indicators li.active {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 1) !important;
}

/* ==========================================================================
   ACCESIBILIDAD DE SLIDERS DE PRODUCTOS (Slick.js)
   ========================================================================== */

/* Controles de navegación del slider */
.slick-prev,
.slick-next {
  z-index: 1000;
  opacity: 1 !important;
}

.slick-prev:focus,
.slick-prev:focus-visible,
.slick-next:focus,
.slick-next:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
}

/* Mejorar la visibilidad de las flechas del slider */
.slick-prev:before,
.slick-next:before {
  color: #333333 !important;
  font-size: 24px !important;
  opacity: 1 !important;
}

/* Puntos de navegación del slider (si se usan) */
.slick-dots li button:focus,
.slick-dots li button:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   MEJORAS GENERALES DE CONTRASTE Y VISIBILIDAD
   T10002 y T10005: Mejorar contraste de texto y elementos no textuales
   ========================================================================== */

/* Mejorar contraste de botones outline */
.btn-outline-primary {
  border-color: #333333 !important;
  color: #333333 !important;
}

/* ==========================================================================
   T10008: MEJORAS EN EL ORDEN DE TABULACIÓN
   ========================================================================== */

/* Asegurar que los elementos skip-links sean visibles al recibir foco */
.sr-only:focus,
.sr-only:focus-visible {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  background: #000000 !important;
  color: #ffffff !important;
  z-index: 9999 !important;
  top: 10px !important;
  left: 10px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   MEJORAS ESPECÍFICAS PARA DROPDOWNS Y MENÚS
   ========================================================================== */

/* Mejorar accesibilidad de dropdowns */
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

.dropdown-menu {
  border: 2px solid #1976d2;
}

.dropdown-item:focus,
.dropdown-item:focus-visible {
  background-color: rgba(25, 118, 210, 0.1) !important;
  outline: 3px solid #1976d2 !important;
  outline-offset: -3px !important;
}

/* ==========================================================================
   MEJORAS PARA ELEMENTOS DE COMPARACIÓN Y FAVORITOS
   ========================================================================== */

.icono-comparar:focus,
.icono-comparar:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   MEJORAS PARA MODALES Y DIÁLOGOS
   ========================================================================== */

/* Estilos para el modal de cookies cuando se implemente */
[role="dialog"]:focus,
[role="dialog"]:focus-visible {
  outline: 3px solid #1976d2 !important;
}

.modal:focus,
.modal:focus-visible {
  outline: none !important;
}

.modal-content:focus,
.modal-content:focus-visible {
  outline: 3px solid #1976d2 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   UTILIDADES DE ACCESIBILIDAD
   ========================================================================== */

/* Clase para ocultar elementos visualmente pero mantenerlos accesibles */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Clase para elementos que deben ser visibles solo al recibir foco */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

/* ==========================================================================
   RESPONSIVE: AJUSTES PARA DISPOSITIVOS MÓVILES
   ========================================================================== */

@media (max-width: 768px) {
  /* Aumentar el área de toque para elementos interactivos en móviles */
  .btn, .nav-link, .carousel-control-prev, .carousel-control-next {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ajustar indicadores de foco para pantallas pequeñas */
  :focus {
    outline-width: 2px !important;
    outline-offset: 1px !important;
  }
}

/* ==========================================================================
   MODO DE ALTO CONTRASTE
   Para usuarios que necesitan mayor contraste visual
   ========================================================================== */

@media (prefers-contrast: high) {
  :focus {
    outline-width: 4px !important;
    outline-color: #000000 !important;
  }

  .btn:focus,
  .form-control:focus,
  .nav-link:focus {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.8) !important;
  }
}

/* ==========================================================================
   REDUCCIÓN DE MOVIMIENTO
   Para usuarios sensibles al movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Desactivar animaciones del carrusel si el usuario prefiere menos movimiento */
  .carousel-item {
    transition: none !important;
  }

  .slick-track {
    transition: none !important;
  }

  /* Reducir transiciones en general */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   T10003: ÁREA TÁCTIL MÍNIMA DE 44x44 PÍXELES
   Criterio WCAG: 2.5.5 Target Size (AAA)
   Los elementos interactivos deben tener un área táctil suficiente
   ========================================================================== */

/* Botones de favoritos - área táctil mínima 44x44px */
.favorito {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Asegurar que el icono no interfiera con el área táctil */
.favorito .icono-favorito {
    pointer-events: none !important;
    display: block !important;
}

/* Botones de comparar con área táctil adecuada */
.icono-comparar,
.btn-comparar {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Botones del carrito y usuario en el header */
.well-icons .btn-user,
.well-icons .btn-favorite,
.well-icons .btn-cart {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Controles del slider/carrusel */
.slick-prev,
.slick-next {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}

.carousel-control-prev,
.carousel-control-next {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}




.slick-dots li button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}

/* Botones de filtros y opciones pequeñas */
.btn-filtrar,
.btn-ordenar,
.btn-vista {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}

/* Enlaces de paginación */
.pagination .page-link {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botones de cerrar en modales y alerts */
.btn-close,
.close {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Toggles y switches */
.btn-toggle,
.onoffswitch {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Botones de redes sociales y compartir */
.social-share-btn,
.btn-social {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botones de cantidad en productos */
.qty-btn,
.btn-qty {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
}

/* Iconos de acción en productos (zoom, vista rápida, etc.) */
.icono-zoom,
.icono-vista-rapida,
.product-action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar separación mínima entre elementos táctiles adyacentes */
.favorito + .favorito,
.icono-comparar + .icono-comparar,
.btn-social + .btn-social {
    margin-left: 8px !important;
}

/* En dispositivos móviles, aumentar ligeramente el área táctil */
@media (max-width: 768px) {
    .favorito,
    .icono-comparar,
    .btn-comparar,
    .well-icons .btn-user,
    .well-icons .btn-favorite,
    .well-icons .btn-cart {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 10px !important;
    }
    
    /* Mayor separación en móviles */
    .favorito + .favorito,
    .icono-comparar + .icono-comparar {
        margin-left: 12px !important;
    }
}

/* ==========================================================================
   CORRECCIÓN ESPECÍFICA PARA SLIDER DE MARCAS - ACCESIBILIDAD
   Forzar que elementos ocultos en slider no sean focusables pero mantengan funcionalidad visual
   ========================================================================== */

/* Slides ocultos en slider de marcas NO deben ser focusables pero SÍ visibles */
.slider-marcas .slick-slide[aria-hidden="true"] a,
.slider-marcas .slick-slide[aria-hidden="true"] button,
.slider-marcas .slick-slide[aria-hidden="true"] input,
.slider-marcas .slick-slide[aria-hidden="true"] select,
.slider-marcas .slick-slide[aria-hidden="true"] textarea,
.slider-marcas .slick-slide[aria-hidden="true"] [tabindex] {
    pointer-events: none !important;
    /* NO ocultamos visualmente, solo evitamos interacción */
}

/* Slides visibles deben ser completamente accesibles */
.slider-marcas .slick-slide.slick-active a,
.slider-marcas .slick-slide.slick-active button,
.slider-marcas .slick-slide.slick-active input,
.slider-marcas .slick-slide.slick-active select,
.slider-marcas .slick-slide.slick-active textarea {
    pointer-events: auto !important;
}