:root {
    /* Forzar esquema de color claro para el navegador */
    color-scheme: light;

    /* Paleta Institucional Fija (Modo Claro) */
    --primary-color: #006452;    /* Verde institucional (Headers, Progreso, Carrito) */
    --secondary-color: #4aa685;  /* Verde botones y acciones secundarias */
    --accent-red: #ab2c29;       /* Rojo para alertas o acentos del banner */
    --accent-cream: #f6e0a5;     /* Crema para resaltados de precios bajos */
    
    /* Colores de Fondo y Texto (Forzado Claro) */
    --background-color: #f9fafb; /* Gris muy claro para el fondo */
    --card-background: #ffffff;  /* Blanco para tarjetas */
    --text-color: #111827;       /* Gris oscuro para textos principales */
    --text-muted-color: #4b5563; /* Gris medio para textos secundarios */
    --border-color: #e5e7eb;     /* Gris claro para bordes */
}

/* Estilos Globales */
html { 
    scroll-behavior: smooth; 
}

body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease;
    margin: 0;
}

/* Tipografía */
.header-title {
    color: var(--primary-color) !important;
    line-height: 1.1;
}

/* Componentes de Tarjeta */
.card {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: all 0.3s ease;
    color: var(--text-color) !important;
}

/* Botones con el Verde de Acción #4aa685 */
.btn-primary, 
.add-to-cart-btn, 
#confirm-location-btn, 
#compare-btn,
.btn-primary-custom {
    background-color: var(--secondary-color) !important;
    color: #ffffff !important;
    border: none;
    transition: filter 0.2s ease;
}

.btn-primary:hover, 
.add-to-cart-btn:hover {
    filter: brightness(90%);
}

.btn-secondary {
    background-color: #f3f4f6 !important;
    color: var(--text-muted-color) !important;
    border: 1px solid var(--border-color);
}

/* Barra de Progreso y Footer con Verde Institucional #006452 */
#progress-bar, 
#cart-summary, 
#search-prices-btn,
.bg-institutional {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Inputs y Selects */
.input-field {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color);
    color: var(--text-color) !important;
    transition: border-color 0.2s ease;
}

.input-field:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 2px rgba(74, 166, 133, 0.2);
}

/* Animaciones de Vistas */
.view {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Overlay de Carga */
#loading-overlay {
    background-color: rgba(255, 255, 255, 0.9) !important;
    z-index: 100;
}

.spinner {
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Resaltado de Precio Más Bajo */
.lowest-price {
    background-color: #ecfdf5 !important; /* Verde muy pálido */
    color: var(--primary-color) !important;
    border: 1px solid #10b981;
    font-weight: bold;
}

/* Acordeón de Categorías */
.product-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#categories-container .category-open {
    border-color: var(--secondary-color);
}

/* Estilos de Resultados y Comparación */
.results-section-complete .selection-tab {
    background-color: var(--secondary-color);
}

.results-section-incomplete .selection-tab {
    background-color: #fbbf24; /* Amarillo para incompletos */
}

/* Banner de Promoción */
.promo-banner {
    width: 100%;
    border-radius: 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Ajustes para Carrito e Íconos */
#cart-summary .fa-shopping-cart,
#cart-summary .fa-chevron-up {
    color: #ffffff !important;
}

.price-up { color: var(--accent-red) !important; }
.price-down { color: var(--secondary-color) !important; }

.price-diff-up { background-color: rgba(171, 44, 41, 0.1) !important; }
.price-diff-down { background-color: rgba(74, 166, 133, 0.1) !important; } 

/* Forzar fondos claros en elementos específicos */
#fullscreen-menu, .modal-content {
    background-color: #ffffff !important;
    color: var(--text-color) !important;
}

/* =============================================
   AJUSTES PARA ESCRITORIO (v5)
   ============================================= */
@media (min-width: 768px) {
    /* 1. Estructura de Productos en 2 Columnas */
    #categories-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        align-content: start;
    }

    /* Evitar que las categorías ocupen todo el ancho si hay pocas */
    .category-group {
        break-inside: avoid;
        align-self: start;
    }

    /* 2. Resultados: Layout de tarjetas de tiendas */
    #results-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Encabezados de sección en resultados (Carros completos/incompletos) */
    .results-group-title {
        grid-column: span 2;
        font-size: 1.25rem;
        margin-top: 1rem;
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 0.5rem;
    }

    /* 3. Vista de Comparación (Tabla Inteligente) */
    #comparison-container {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Si solo hay una tienda comparada, centrar la "boleta" */
    #comparison-container:only-child {
        max-width: 500px;
        margin: 0 auto;
    }

    /* 4. Tipografía y Botones */
    .header-title {
        font-size: 2.25rem !important;
    }

    .btn-primary-custom, 
    #confirm-location-btn, 
    #search-prices-btn {
        padding: 1.25rem !important;
        font-size: 1.1rem;
    }

    /* Ajuste de Modales en PC */
    .modal-content {
        max-width: 500px;
        margin: auto;
        border-radius: 1.5rem !important;
    }

    /* El carrito flotante se ajusta al contenedor máximo */
    footer.fixed {
        left: 50%;
        transform: translateX(-50%);
        max-width: 896px; /* Equivalente a max-w-4xl */
    }
}