:root {
    /* Marca */
    /* 1. Definimos los colores base */
    --frost: #98C1D9; /* El azul claro de acción */
    --frost-hover: #7DAFC9; /* Frost un poco más oscuro */
    --midnight: #2C3E50; /* El azul oscuro del menú */
    /* 2. Mapeamos según tu petición */
    --zc-primario: var(--frost); /* Primario = Color de Acción */
    --zc-primario-hover: var(--frost-hover);
    --zc-secundario: var(--midnight); /* Secundario = Color de Marca/Estructura */
    /* Variables auxiliares */
    --zc-gris-texto: #546E7A;
    --zc-seleccion: #f1f4f8;
    --zc-peligro: #E74C3C;
    --zc-translucido: rgba(44, 62, 80, 0.1);
    /* Estados */
    --zc-success-bg: rgba(25, 135, 84, 0.12);
    --zc-success-text: #146c43;
    --zc-success-border: rgba(22, 163, 74, 0.18);
    --zc-danger-bg: rgba(220, 53, 69, 0.12);
    --zc-danger-text: #b02a37;
    --zc-danger-border: rgba(239, 68, 68, 0.18);
    /* Info */
    --zc-info-bg: rgba(152, 193, 217, 0.18);
    --zc-info-text: #2C3E50;
    --zc-info-border: rgba(125, 175, 201, 0.35);
    /* Alert */
    --zc-alert-bg: rgba(255, 193, 7, 0.12);
    --zc-alert-text: #997404;
    --zc-alert-border: rgba(255, 193, 7, 0.2);

    /*Divider */
    --zc-dropdown-divider: rgba(44, 62, 80, 0.13);
    /* CSS HEX */
    /*--zc-primario: #002364FF;*/
    /*--zc-secundario: #78CBAAff;*/
    /*--zc-secundario: #2C3E50;
    --zc-secundario-boton: #98C1D9;
    --zc-terciario: #B0BBCFFF;
    --zc-primario-translucido: #00236450;
    --zc-secundario-translucido: #78CBAA50;
    --zc-terciario-translucido: #B0BBCF50;*/
    --azul-translucido: #78CBAA70;
    --verde: #54c981ff;
    --verde-translucido: #54c98140;
    --verde-claro: #9dd15Aff;
    --verde-claro-translucido: #9dd15A40;
    --amarillo: #f1e77eff;
    --amarillo-translucido: #f1e77e40;
    --naranja: #f5ab66ff;
    --naranja-translucido: #f5ab6640;
    --sombra: #A0A0A0;
    --sombra-rgba: rgba(160,160,160,0.08);
    --LetraGeneral: font-family: 'Inter', sans-serif;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.03);
}