:root {
    /* Colores funcionales de UI */
    --header-bg: #ffffff;
    --header-border: #e8eef5;
    --header-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    /* Tipografía */
    --text-main: #444444; /* Títulos gris oscuro */
    --text-soft: #676767; /* Texto normal gris más claro */
    --text-muted: #a0a0a0; /* Texto secundario, más apagado (placeholders, notas) */
    /* Color de marca (Laboral Barberá) */
    --accent: #DE2623; /* Rojo — acciones principales, Salida, elementos interactivos */
    --accent-secondary: #1f1f1f; /* Segundo color de marca (negro suave) */
    /*Secciones y cabeceras */
    --banda-seccion: #444444;
    --cabecera-tabla: #7f7f7f; /* Gris intermedio — cabeceras de tablas/grids */
    /* Estados funcionales */
    --success: #10B981; /* Entrada / acciones positivas */
    --success-soft: #d1fae5; /* Fondo suave de éxito */
    /* Estados de error/peligro */
    --danger-soft: #fff1f2;
    --danger-border: #fecdd3;
    --danger-text: #e11d48;
    /* Fondos grises suaves */
    --bg-suave: #f5f5f5; /* Fondo gris muy claro (secciones neutras) */
    /* Sombreados cards */
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.12), 0 24px 48px rgba(15, 23, 42, 0.10);
}