:root {
    /* =========================================
       1. FONDOS Y TEXTOS GLOBALES
       ========================================= */
    --bg-body: #f8fafc;
    
    /* Color de fondo de toda la página (slate-50) */
    --text-main: #0f172a;
    /* Color de texto principal (slate-900) */
    --text-muted: #94a3b8;
    /* Color para textos secundarios/apagados (slate-400) */

    /* =========================================
       2. CONTENEDORES Y TARJETAS
       ========================================= */
    --bg-card: #ffffff;
    /* Fondo de la tarjeta principal y modales (white) */
    --border-card: #e2e8f0;
    /* Líneas divisorias y bordes (slate-200) */
    --bg-header: #f8fafc80;
    /* Fondo de la cabecera "Cotizador de Servicios" con un poco de transparencia */

    /* =========================================
       3. COLORES DE MARCA Y ACCIÓN
       ========================================= */
    --color-primario: #2563eb;
    /* Acentos, iconos y algunos botones (blue-600) */
    --color-primario-hover: #1d4ed8;
    /* Color al pasar el mouse por el primario (blue-700) */

    --btn-secondary: #0f172a;
    /* Fondo del botón "+ Añadir Servicio" (slate-900) */
    --btn-secondary-hover: #1e293b;
    /* Hover del botón secundario (slate-800) */

    /* =========================================
       4. INPUTS Y MENÚS DESPLEGABLES
       ========================================= */
    --bg-input: #f8fafc;
    /* Fondo del input de cupones y caja de meses (slate-50) */
    --border-input: #e2e8f0;
    /* Borde de los inputs (slate-200) */

    /* =========================================
       5. PANEL DE TOTAL (ZONA INFERIOR)
       ========================================= */
    --bg-panel-total: #0f172a;
    /* Fondo oscuro del bloque donde sale el precio final */
    --text-total: #ffffff;
    /* Color del texto del precio final */
}