/* ==========================================
   SISTEMA DE VARIABLES DE CONTRASTE
   NOTA: Las variables se definen pero NO se aplican automáticamente
   ========================================== */

:root {
    /* Modo Normal (WCAG AA - 4.5:1) */
    /* Estas variables existen pero NO se usan por defecto */
    --text-primary-aa: #1f2937;
    --text-secondary-aa: #4b5563;
    --text-muted-aa: #64748b;
    --link-color-aa: #3483fa;
    --link-hover-aa: #2968c8;
    --success-color-aa: #16a34a;
    --border-color-aa: #d1d1d1;
    --icon-color-aa: #3483fa;
    --shadow-card-aa: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover-aa: 0 12px 24px rgba(52, 131, 250, 0.15);
}

/* ==========================================
   MODO ALTO CONTRASTE (WCAG AAA - 7:1)
   SOLO SE APLICA CUANDO body.high-contrast-mode ESTÁ ACTIVO
   ========================================== */

body.high-contrast-mode {
    /* Definir variables AAA */
    --text-primary-aaa: #000000;
    --text-secondary-aaa: #1a1a1a;
    --text-muted-aaa: #3d3d3d;
    --link-color-aaa: #1642A2;
    --link-hover-aaa: #0d2b6b;
    --success-color-aaa: #0f7a35;
    --border-color-aaa: #666666;
    --icon-color-aaa: #0052CC;
    --shadow-card-aaa: 0 2px 12px rgba(0, 0, 0, 0.25);
    --shadow-card-hover-aaa: 0 12px 28px rgba(0, 0, 0, 0.35);
}

    /* ==========================================
   APLICAR ESTILOS SOLO EN MODO AAA
   ========================================== */

    /* Textos secundarios y descripciones */
    body.high-contrast-mode .feature-description,
    body.high-contrast-mode .method-description,
    body.high-contrast-mode .info-content p,
    body.high-contrast-mode .payment-notes li,
    body.high-contrast-mode .product-brand,
    body.high-contrast-mode .category-card p,
    body.high-contrast-mode .text-muted,
    body.high-contrast-mode .hero-subtitle {
        color: var(--text-muted-aaa) !important;
    }

    /* Iconos */
    body.high-contrast-mode .feature-icon {
        color: var(--icon-color-aaa) !important;
    }

    /* Enlaces SOLO en tarjetas y contenido (NO header ni footer) */
    body.high-contrast-mode .feature-link {
        color: var(--link-color-aaa) !important;
        border-color: var(--link-color-aaa) !important;
    }

        body.high-contrast-mode .feature-link:hover {
            background-color: var(--link-hover-aaa) !important;
            border-color: var(--link-hover-aaa) !important;
            color: white !important;
        }

    /* Elementos de éxito */
    body.high-contrast-mode .feature-title.green {
        color: var(--success-color-aaa) !important;
    }

    /* Tarjetas con bordes más pronunciados */
    body.high-contrast-mode .feature-card,
    body.high-contrast-mode .category-card,
    body.high-contrast-mode .product-card {
        box-shadow: var(--shadow-card-aaa) !important;
        border: 2px solid var(--border-color-aaa) !important;
    }

        body.high-contrast-mode .feature-card:hover,
        body.high-contrast-mode .category-card:hover {
            box-shadow: var(--shadow-card-hover-aaa) !important;
        }

    /* ==========================================
   MEJORAS ESPECÍFICAS PARA MODO AAA
   ========================================== */

    /* Botones más contrastados */
    body.high-contrast-mode .feature-link {
        border-width: 2px;
        font-weight: 600;
    }

    /* Focus más visible en TODOS los elementos interactivos */
    body.high-contrast-mode *:focus-visible {
        outline: 3px solid #0052CC !important;
        outline-offset: 3px;
    }

    /* Badges y etiquetas */
    body.high-contrast-mode .product-shipping,
    body.high-contrast-mode .notification-badge,
    body.high-contrast-mode .cart-badge,
    body.high-contrast-mode .mobile-notification-badge,
    body.high-contrast-mode .product-discount-badge {
        background-color: #000000 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: 2px solid #ffffff !important;
    }

    /* Indicadores de carrusel */
    body.high-contrast-mode .carousel-indicator {
        border: 2px solid #666666;
    }

        body.high-contrast-mode .carousel-indicator.active {
            background-color: #000000 !important;
            border: 3px solid #ffffff !important;
        }

    /* Controles de carrusel */
    body.high-contrast-mode .carousel-control {
        background-color: rgba(0, 0, 0, 0.8) !important;
        border: 2px solid #ffffff !important;
    }

        body.high-contrast-mode .carousel-control:hover {
            background-color: rgba(0, 0, 0, 1) !important;
        }

    /* Promo strip con mejor contraste */
    body.high-contrast-mode .promo-strip {
        background: #000000 !important;
        border-top: 3px solid #ffffff !important;
        border-bottom: 3px solid #ffffff !important;
    }

    body.high-contrast-mode .promo-message {
        color: #ffffff !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }

        body.high-contrast-mode .promo-message strong {
            color: #FFD700 !important;
        }

    /* Títulos más oscuros */
    body.high-contrast-mode h1,
    body.high-contrast-mode h2,
    body.high-contrast-mode h3,
    body.high-contrast-mode .products-title,
    body.high-contrast-mode .hero-title,
    body.high-contrast-mode .feature-title {
        color: var(--text-primary-aaa) !important;
    }

    /* Mejorar contraste de botones de formulario */
    body.high-contrast-mode button[type="submit"],
    body.high-contrast-mode .btn-primary,
    body.high-contrast-mode .search-box button {
        background-color: #003D99 !important;
        border: 2px solid #003D99 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

        body.high-contrast-mode button[type="submit"]:hover,
        body.high-contrast-mode .btn-primary:hover,
        body.high-contrast-mode .search-box button:hover {
            background-color: #002966 !important;
            border-color: #002966 !important;
        }

    /* Mejorar contraste de inputs */
    body.high-contrast-mode input,
    body.high-contrast-mode textarea,
    body.high-contrast-mode select,
    body.high-contrast-mode .search-box input {
        border: 2px solid #666666 !important;
        color: #000000 !important;
        background-color: #ffffff !important;
    }

        body.high-contrast-mode input:focus,
        body.high-contrast-mode textarea:focus,
        body.high-contrast-mode select:focus,
        body.high-contrast-mode .search-box input:focus {
            border-color: #0052CC !important;
            outline: 2px solid #0052CC !important;
            outline-offset: 0px;
        }

        body.high-contrast-mode input::placeholder,
        body.high-contrast-mode textarea::placeholder {
            color: #666666 !important;
            opacity: 1;
        }

    /* Enlaces del footer en modo AAA */
    body.high-contrast-mode .footer-links a,
    body.high-contrast-mode .legal-links a,
    body.high-contrast-mode .contact-info-footer a {
        color: #0052CC !important;
        text-decoration: underline;
    }

        body.high-contrast-mode .footer-links a:hover,
        body.high-contrast-mode .legal-links a:hover,
        body.high-contrast-mode .contact-info-footer a:hover {
            color: #003D99 !important;
        }

    /* Bottom nav en modo AAA */
    body.high-contrast-mode .bottom-nav-item {
        color: #3d3d3d !important;
    }

        body.high-contrast-mode .bottom-nav-item:hover,
        body.high-contrast-mode .bottom-nav-item.active {
            color: #0052CC !important;
        }

    /* Mejorar contraste de precios */
    body.high-contrast-mode .current-price {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    body.high-contrast-mode .original-price {
        color: #666666 !important;
    }

    /* Separadores más visibles */
    body.high-contrast-mode .account-dropdown-divider,
    body.high-contrast-mode .more-menu-divider,
    body.high-contrast-mode .mobile-nav-divider {
        background: #666666 !important;
        height: 2px !important;
    }

    /* Mejorar contraste de dropdowns */
    body.high-contrast-mode .account-dropdown,
    body.high-contrast-mode .notification-dropdown {
        border: 2px solid #666666 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }

    body.high-contrast-mode .account-dropdown-item:hover,
    body.high-contrast-mode .notification-item:hover {
        background: #e6e6e6 !important;
    }

    /* Categorías más contrastadas */
    body.high-contrast-mode .category-name {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    /* Modales más contrastados */
    body.high-contrast-mode .modal-content {
        border: 3px solid #666666 !important;
    }

    body.high-contrast-mode .modal-header {
        background: #000000 !important;
        color: #ffffff !important;
        border-bottom: 3px solid #666666 !important;
    }

    body.high-contrast-mode .modal-title {
        color: #ffffff !important;
    }

    /* Anuncio de screen reader cuando se activa */
    body.high-contrast-mode::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }