/* ==========================================================================
   SISTEMA DE DISEÑO E360 - VARIABLES GLOBALES Y MODO OSCURO
   ========================================================================== */

/* 1. PALETA BASE Y MODO CLARO (Default) */
:root {
    /* Paleta Oficial Enfoque 360° SAC */
    --primary-color: #734E46;      /* Marrón Piedra / Títulos principales */
    --secondary-color: #6D8C7B;    /* Verde Olivo / Badges y elementos secundarios */
    --accent-color: #D9B777;       /* Dorado Tierra / Detalles */
    --accent-hover: #BF7F5A;       /* Terracota Cálido / Botones principales y llamadas a la acción */
    --alt-bg-color: #D99962;       /* Naranja Mudo / Fondos alternativos */
    
    /* Superficies y Textos (Modo Claro) */
    --bg-main: #fdfcfb;            /* Blanco cálido/arena para el fondo general */
    --bg-card: #f4efea;            /* Crema suave para tarjetas y modales */
    --bg-nav: rgba(253, 252, 251, 0.85); /* Fondo semitransparente para la barra de navegación */
    --text-main: #2d2825;          /* Gris/Marrón muy oscuro para lectura descansada (no negro puro) */
    --text-muted: #78716c;         /* Gris cálido para textos secundarios */
    --border-color: #e5e0dc;       /* Gris muy claro para separar elementos sutilmente */
    --title-color: var(--primary-color); /* Marrón en modo claro */
}

/* 2. MODO OSCURO */
[data-theme="dark"] {
    /* Mantenemos los colores de marca (primary, secondary, etc.) pero invertimos las superficies */
    --bg-main: #1c1817;            /* Marrón ultra oscuro para el fondo general */
    --bg-card: #282321;            /* Marrón un poco más claro para elevar las tarjetas */
    --bg-nav: rgba(28, 24, 23, 0.85); /* Navegación oscura semitransparente */
    --text-main: #f8f5f2;          /* Blanco cálido/crema para el texto principal */
    --text-muted: #a8a29e;         /* Gris claro para textos secundarios */
    --border-color: #3d3532;       /* Borde oscuro para que no resalte demasiado */
    --title-color: var(--accent-color); /* Dorado Tierra para que resalte elegante en fondo oscuro */
}

/* ==========================================================================
   ESTILOS BASE Y TRANSICIONES
   ========================================================================== */

/* Aseguramos que el html y body ocupen toda la pantalla */
html, body {
    height: 100%;
    scroll-behavior: smooth; /* Desplazamiento suave para los anclajes (ej. #catalogo) */
}

/* Aplicación global de superficies y textos */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* 
   Transiciones globales para el cambio de tema. 
   Esto hace que al presionar el botón de Dark Mode, los colores cambien de forma suave (fade) 
   en lugar de un parpadeo brusco. 
*/
body, nav, div, section, header, footer, button, a, input, p, h1, h2, h3, h4, span {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Evitar transición en elementos donde pueda causar 'glitches' visuales */
.no-transition {
    transition: none !important;
}

/* ==========================================================================
   UTILIDADES ESPECÍFICAS
   ========================================================================== */

/* Clases de apoyo si necesitas forzar colores de la paleta directamente desde HTML */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }

/* Ajustes finos para la barra de desplazamiento (Scrollbar) acorde a la paleta */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-main);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}