/**
 * Variables CSS - Plantilla Villa del Totoral
 * 
 * Sistema de compatibilidad dual:
 * - Variables Legacy (nomenclatura original del sistema villatotoral.local)
 * - Variables del sistema nuevo (sobrescritas con colores institucionales)
 * 
 * Esto permite que:
 * 1. El CSS Legacy funcione sin modificaciones
 * 2. Los componentes del sistema nuevo usen los colores correctos
 */

:root {
    /* ========================================
       VARIABLES LEGACY (Nomenclatura Original)
       ======================================== */
    
    /* Colores institucionales */
    --primario: #2d5a27;        /* Verde oscuro institucional */
    --secundario: #4a8b3c;      /* Verde medio */
    --terciario: #adc232;       /* Verde lima */
    
    /* Colores base */
    --negro: #272522;           /* Negro cálido */
    --blanco: #ffffff;          /* Blanco */
    --gris: #f5f5f5;            /* Gris claro */
    --grisoscuro: #666666;      /* Gris oscuro */
    
    /* Tipografía */
    --fuente: 'Nunito Sans', sans-serif;
    
    /* Colores de módulos específicos (Legacy) */
    --modulo-verde: #adc232;    /* Verde lima */
    --modulo-violeta: #9685d8;  /* Violeta */
    --modulo-rojo: #ff7373;     /* Rojo */
    
    /* ========================================
       SOBRESCRITURA PARA SISTEMA NUEVO
       (Compatibilidad con componentes base)
       ======================================== */
    
    /* Colores principales del sistema nuevo */
    --color-primary: #2d5a27;      /* = --primario (Verde oscuro) */
    --color-secondary: #4a8b3c;    /* = --secundario (Verde medio) */
    --color-success: #adc232;      /* = --terciario (Verde lima) */
    
    /* Tipografía del sistema nuevo */
    --font-family: 'Nunito Sans', sans-serif;  /* = --fuente */
    
    /* ========================================
       VARIABLES ADICIONALES ESPECÍFICAS
       ======================================== */
    
    /* Header */
    --header-1-bg: var(--primario);           /* Fondo header superior (verde oscuro) */
    --header-2-bg: var(--terciario);          /* Fondo header principal (verde lima) */
    --header-logo-height: 60px;               /* Altura del logo */
    
    /* Footer */
    --footer-telefonos-bg: #2d5a27;           /* Fondo sección teléfonos (verde oscuro) */
    --footer-info-bg: #1e4a1a;                /* Fondo sección info (verde muy oscuro) */
    --footer-card-bg: var(--secundario);      /* Fondo cards teléfonos (verde medio) */
    
    /* Slider */
    --slider-border-color: var(--secundario); /* Borde inferior slider (verde medio) */
    --slider-border-width: 0.8rem;            /* Grosor borde slider */
    --slider-height-desktop: 55rem;           /* Altura slider desktop */
    --slider-height-mobile: 30rem;            /* Altura slider móvil */
    
    /* Botones */
    --btn-primary-bg: var(--primario);        /* Fondo botón primario */
    --btn-primary-color: var(--blanco);       /* Color texto botón primario */
    --btn-secondary-bg: var(--terciario);     /* Fondo botón secundario */
    --btn-secondary-color: var(--negro);      /* Color texto botón secundario */
    
    /* Módulos */
    --modulo-padding: 4rem 0;                 /* Padding vertical de módulos */
    --modulo-titulo-size: 3rem;               /* Tamaño título de módulo */
    --modulo-titulo-color: var(--primario);   /* Color título de módulo */
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    /* Bordes */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 2rem;
    --border-radius-full: 50%;
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   SOBRESCRITURAS DE BOOTSTRAP
   (Para que use colores institucionales)
   ======================================== */

.text-primary {
    color: var(--primario) !important;
}

.bg-primary {
    background-color: var(--primario) !important;
}

.text-secondary {
    color: var(--secundario) !important;
}

.bg-secondary {
    background-color: var(--secundario) !important;
}

.text-success {
    color: var(--terciario) !important;
}

.bg-success {
    background-color: var(--terciario) !important;
}

.btn-primary {
    background-color: var(--primario) !important;
    border-color: var(--primario) !important;
    color: var(--blanco) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1e4a1a !important;  /* Verde más oscuro */
    border-color: #1e4a1a !important;
}

.btn-secondary {
    background-color: var(--terciario) !important;
    border-color: var(--terciario) !important;
    color: var(--negro) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #9ab82a !important;  /* Verde lima más oscuro */
    border-color: #9ab82a !important;
}