:root{
    --cn-azul-900: #0F2D4F;
    --cn-azul-700: #184A7D;
    --cn-azul-500: #2D6BB3;
    --cn-azul-400: #5D8FCA;
    --cn-azul-200: #8FB3DC;
    --cn-azul-100: #C6D6EA;

    --cn-rojo-900: #7F1D1D;
    --cn-rojo-700: #C03434;
    --cn-rojo-500: #D95A5A;
    --cn-rojo-400: #E78787;
    --cn-rojo-200: #F2B4B4;
    --cn-rojo-100: #F9DADA;

    --cn-gris-900: #212529;
    --cn-gris-700: #495057;
    --cn-gris-500: #6C757D;
    --cn-gris-400: #ADB5BD;
    --cn-gris-200: #DEE2E6;
    --cn-gris-100: #F1F3F5;

    --cn-exito: #28A745;
    --cn-advertencia: #FFC107;
    --cn-error: #DC3545;
    --cn-info: #17A2B8;

    --cn-primario: var(--cn-azul-700);
    --cn-primario-hover: var(--cn-azul-900);
    --cn-secundario: var(--cn-rojo-700);
    --cn-secundario-hover: var(--cn-rojo-900);
    --cn-neutro: var(--cn-gris-500);
    --cn-neutro-hover: var(--cn-gris-700);

    --cn-superficie: #FFFFFF;
    --cn-superficie-alt: var(--cn-gris-100);
    --cn-borde: var(--cn-gris-200);
    --cn-texto: var(--cn-gris-900);
    --cn-texto-suave: var(--cn-gris-500);

    --cn-grafico-1: #184A7D;
    --cn-grafico-2: #C03434;
    --cn-grafico-3: #5D8FCA;
    --cn-grafico-4: #6C757D;
    --cn-grafico-5: #7F1D1D;
    --cn-grafico-6: #2D6BB3;
    --cn-grafico-7: #D95A5A;
    --cn-grafico-8: #495057;
    --cn-grafico-resto: #ADB5BD;
}

.btn-dark{
    --bs-btn-bg: #184A7D;
    --bs-btn-border-color: #184A7D;
    --bs-btn-hover-bg: #0F2D4F;
    --bs-btn-hover-border-color: #0F2D4F;
    --bs-btn-active-bg: #0F2D4F;
    --bs-btn-active-border-color: #0F2D4F;
    --bs-btn-disabled-bg: #184A7D;
    --bs-btn-disabled-border-color: #184A7D;
    --bs-btn-focus-shadow-rgb: 24, 74, 125;
}

.btn-primary{
    --bs-btn-hover-bg: #0F2D4F;
    --bs-btn-hover-border-color: #0F2D4F;
    --bs-btn-active-bg: #0F2D4F;
    --bs-btn-active-border-color: #0F2D4F;
}

.btn-secondary{
    --bs-btn-hover-bg: #495057;
    --bs-btn-hover-border-color: #495057;
    --bs-btn-active-bg: #495057;
    --bs-btn-active-border-color: #495057;
}

#toast-container > div{
    background-color: #F1F3F5;
    background-image: none;
    color: #212529;
    border-left: 4px solid #6C757D;
    border-radius: 0;
    opacity: 1;
    padding: 12px 30px 12px 14px;
    box-shadow: 0 2px 8px rgba(33, 37, 41, .15);
}

#toast-container > div:hover{
    box-shadow: 0 4px 12px rgba(33, 37, 41, .22);
    opacity: 1;
}

#toast-container > .toast-success{ border-left-color: #28A745; }
#toast-container > .toast-error{ border-left-color: #DC3545; }
#toast-container > .toast-warning{ border-left-color: #FFC107; }
#toast-container > .toast-info{ border-left-color: #17A2B8; }

.toast-title,
.toast-message{ color: #212529; }

.toast-close-button{
    color: #6C757D;
    text-shadow: none;
    opacity: 1;
}

.toast-close-button:hover,
.toast-close-button:focus{
    color: #212529;
    opacity: 1;
}

.toast-progress{ opacity: 1; }
#toast-container > .toast-success .toast-progress{ background-color: #28A745; }
#toast-container > .toast-error .toast-progress{ background-color: #DC3545; }
#toast-container > .toast-warning .toast-progress{ background-color: #FFC107; }
#toast-container > .toast-info .toast-progress{ background-color: #17A2B8; }

.select2-container--bootstrap-5 .select2-selection{ border-color: #ADB5BD; }

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
    border-color: #184A7D;
    box-shadow: 0 0 0 .25rem rgba(24, 74, 125, .25);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected{
    background-color: #DEE2E6;
    color: #212529;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted{
    background-color: #184A7D;
    color: #FFFFFF;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice{
    background-color: #184A7D;
    border-color: #0F2D4F;
    color: #FFFFFF;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover{
    color: #DC3545;
}

.select2-container--bootstrap-5.is-invalid .select2-selection{ border-color: #DC3545; }
.select2-container--bootstrap-5.is-valid .select2-selection{ border-color: #28A745; }
