/* --- CENCOCAL CORPORATE STYLE - REFACTORIZADO --- */

:root {
    --cenco-indigo: #2A1B5E;
    --cenco-green: #76C043;
    --cenco-red: #E53935;
    --cenco-light: #F8F9FA;
    --sidebar-width: 260px;
    --nav-height: 110px; /* Altura estandarizada */
    
    /* JERARQUÍA DE CAPAS (Z-INDEX) */
    --z-modal: 2000;
    --z-backdrop: 1950;
    --z-navbar: 1060;
    --z-offcanvas: 1050;
}

/* === BASE & RESET === */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color: var(--cenco-light);
    overflow-x: hidden;
}

/* === ESTRUCTURA DE CONTENEDORES === */
#wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
}

#sidebar-wrapper {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background-color: #fff;
    border-right: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

#page-content-wrapper {
    flex: 1;
    min-width: 0;
    padding-top: var(--nav-height); /* Espacio para la Navbar fija */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* === NAVBAR: CAPA FIJA Y SUPREMA (Solo debajo de Modales) === */
nav.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: var(--z-navbar) !important;
    background-color: var(--cenco-indigo) !important;
    border-bottom: 3px solid var(--cenco-green) !important;
}

/* === OFFCANVAS (CARRITO Y CATEGORÍAS) === */
#offcanvasCategorias,
#offcanvasCarrito,
#adminSidebar {
    top: var(--nav-height) !important;
    height: calc(100vh - var(--nav-height)) !important;
    z-index: var(--z-offcanvas) !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.offcanvas-backdrop {
    top: var(--nav-height) !important;
    z-index: calc(var(--z-offcanvas) - 10) !important;
}

/* === FIX DEFINITIVO PARA MODALES (Peñablanca & Calera Fix) === */
/* Eliminamos los z-index específicos por ID y usamos una regla global */
.modal {
    z-index: var(--z-modal) !important;
}

.modal-backdrop {
    z-index: var(--z-backdrop) !important;
}

/* Evita que el fondo oscuro bloquee la interacción */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* === UTILIDADES DE COLOR Y BOTONES === */
.bg-cenco-indigo { background-color: var(--cenco-indigo) !important; color: white; }
.bg-cenco-green { background-color: var(--cenco-green) !important; color: white; }
.text-cenco-indigo { color: var(--cenco-indigo) !important; }
.text-cenco-green { color: var(--cenco-green) !important; }
.text-cenco-red { color: var(--cenco-red) !important; }

.btn-cenco-green {
    background-color: var(--cenco-green);
    border: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-cenco-green:hover {
    background-color: #5E9C36;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(118, 192, 67, 0.3);
}

/* === COMPONENTES: BRAND CARDS & HOVERS === */
.brand-card {
    min-height: 120px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.brand-card:hover {
    border-color: var(--cenco-green) !important;
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1) !important;
}

.hover-star:hover {
    color: #ffc107 !important;
    transform: scale(1.2);
    transition: all 0.2s ease;
    cursor: pointer;
}/* === CONFIGURACIONES DE ACCESIBILIDAD === */

/* 1. Modo Oscuro (Usando inversión inteligente) */
body.access-dark #wrapper,
body.access-dark .modal-content,
body.access-dark .offcanvas {
    filter: invert(1) hue-rotate(180deg);
    background-color: #fff; /* Al invertir se vuelve negro */
}
/* Re-invertimos imágenes para que no se vean como negativos */
body.access-dark #wrapper img, 
body.access-dark #wrapper video, 
body.access-dark #wrapper .map-container,
body.access-dark #wrapper .no-invert,
body.access-dark .modal-content img,
body.access-dark .offcanvas img {
    filter: invert(1) hue-rotate(180deg);
}

/* 2. Invertir Colores (Simple) */
body.access-invert #wrapper,
body.access-invert .modal-content,
body.access-invert .offcanvas {
    filter: invert(1);
}

/* 3. Alto Contraste */
body.access-high-contrast {
    background-color: #000 !important;
}
body.access-high-contrast #wrapper,
body.access-high-contrast .modal-content,
body.access-high-contrast .offcanvas,
body.access-high-contrast #wrapper *,
body.access-high-contrast .modal-content *,
body.access-high-contrast .offcanvas * {
    background-color: #000 !important;
    color: #00ff00 !important; /* Verde neón para máxima lectura */
    border-color: #00ff00 !important;
}

/* 4. Fuente Dislexia */
body.access-dyslexic * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}

/* 5. Tamaños de Texto (Escalables desde la raíz) */
html.access-lvl-1 { font-size: 110% !important; } 
html.access-lvl-2 { font-size: 120% !important; } 
html.access-lvl-3 { font-size: 130% !important; }

/* Para que el botón de accesibilidad se vea siempre igual sin importar el zoom */
.btn-accessibility {
    font-size: 1rem !important; 
}

/* 6. Sin Animaciones */
body.access-no-anim * {
    transition: none !important;
    animation: none !important;
}

/* 7. Filtros de Color (Daltonismo) */
.filter-grayscale #wrapper, .filter-grayscale .modal-content, .filter-grayscale .offcanvas { filter: grayscale(100%) !important; }
.filter-protanopia #wrapper, .filter-protanopia .modal-content, .filter-protanopia .offcanvas { filter: url('#protanopia') grayscale(0%) !important; }
.filter-deuteranopia #wrapper, .filter-deuteranopia .modal-content, .filter-deuteranopia .offcanvas { filter: url('#deuteranopia') grayscale(0%) !important; }
.filter-tritanopia #wrapper, .filter-tritanopia .modal-content, .filter-tritanopia .offcanvas { filter: url('#tritanopia') grayscale(0%) !important; }
/* === ANIMACIONES === */
@keyframes ping {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

.animate-ping {
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* === RESPONSIVE === */
@media (max-width: 767.98px) {
    #sidebar-wrapper {
        margin-left: calc(var(--sidebar-width) * -1);
        position: fixed;
        height: 100vh;
        z-index: 1500;
    }
    body.sb-sidenav-toggled #sidebar-wrapper { margin-left: 0; }
}

/* Personalización Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--cenco-indigo); border-radius: 10px; }
/* =========================================
   RESCATE DE COLORES: CHECKOUT PREMIUM
   ========================================= */
/* =========================================
   RESCATE DE COLORES: CHECKOUT PREMIUM (VERSIÓN BLINDADA)
   ========================================= */

/* 1. Tarjetas de Selección (Envío / Retiro) */
.checkout-method-card {
    border: 2px solid #eee !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: white;
    cursor: pointer;
    position: relative;
}

.checkout-method-card:hover {
    border-color: var(--cenco-indigo) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* ESTADO SELECCIONADO: Cubrimos todas las estructuras de HTML posibles */
.btn-check:checked + .checkout-method-card,
.btn-check:checked + label.checkout-method-card,
.btn-check:checked + label .checkout-method-card,
.checkout-method-card:has(input:checked) {
    background-color: #f0f9eb !important; 
    border-color: var(--cenco-green) !important;
    box-shadow: 0 8px 20px rgba(118, 192, 67, 0.2) !important;
}

/* Cambio de color de Iconos y Textos al seleccionar */
.btn-check:checked + .checkout-method-card i,
.btn-check:checked + .checkout-method-card h5,
.btn-check:checked + .checkout-method-card .fw-bold,
.btn-check:checked + label.checkout-method-card i,
.btn-check:checked + label.checkout-method-card h5,
.btn-check:checked + label.checkout-method-card .fw-bold,
.btn-check:checked + label .checkout-method-card i,
.btn-check:checked + label .checkout-method-card h5,
.btn-check:checked + label .checkout-method-card .fw-bold,
.checkout-method-card:has(input:checked) i,
.checkout-method-card:has(input:checked) h5,
.checkout-method-card:has(input:checked) .fw-bold {
    color: var(--cenco-green) !important; 
}
/* 2. Resumen del Pedido (Colores de acento) */
#resumen-fijo .card {
    border-top: 5px solid var(--cenco-indigo) !important;
}

.text-total-checkout {
    color: var(--cenco-red) !important;
    font-size: 1.5rem;
    font-weight: 900;
}

/* 3. Inputs y Labels (Más contraste) */
.form-label.fw-bold {
    color: var(--cenco-indigo) !important;
    opacity: 0.9;
}

.form-control:focus {
    border-color: var(--cenco-indigo) !important;
    box-shadow: 0 0 0 0.25rem rgba(42, 27, 94, 0.1) !important;
}

/* 4. Mapa y Alertas */
#mapa_seleccion, #mapa-retiro-inline {
    border: 2px solid var(--cenco-indigo) !important;
    border-radius: 12px;
}

.alert-success-soft {
    background-color: #f0f9eb;
    border: 1px solid var(--cenco-green);
    color: #3c763d;
}

/* Badge de "¡GRATIS!" */
.badge-promo-checkout {
    background-color: var(--cenco-green);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* Esto asegura que SweetAlert gane la guerra de capas */
.swal2-container {
    z-index: 10000 !important;
}