/* Minification failed. Returning unminified contents.
(31,24): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(37,28): run-time error CSS1039: Token not allowed after unary operator: '-color-hover'
(43,28): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(49,24): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(74,28): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(75,24): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(79,32): run-time error CSS1039: Token not allowed after unary operator: '-color-hover'
(91,26): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(92,28): run-time error CSS1039: Token not allowed after unary operator: '-color-hover'
(98,28): run-time error CSS1039: Token not allowed after unary operator: '-color-hover'
(112,24): run-time error CSS1039: Token not allowed after unary operator: '-color-hover'
(116,35): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
(120,28): run-time error CSS1039: Token not allowed after unary operator: '-color-principal'
 */

/* Ajusta la altura del cuadro de selección a tamaño normal */
.select2-container .select2-selection--single {
    height: 36px !important; /* Altura estándar de Bootstrap */
    font-size: 14px !important; /* Tamaño de fuente normal */
    border-radius: 4px;
    display: flex;
    align-items: center;
}

/* Alinea el texto internamente */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important; /* Centrado vertical para 38px de altura */
    padding-left: 12px !important;
}

/* Alinea la flecha lateral */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    width: 30px !important;
}

/* Ajusta el tamaño de las opciones al desplegarse */
.select2-results__option {
    font-size: 14px !important;
    padding: 8px 12px !important;
}

/* 1. Cambiar el color del borde cuando el select está enfocado (Focus) */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-principal) !important;
    outline: 0;
}

/* 2. Color de la opción RESALTADA (Hover) en la lista desplegable */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-hover) !important; /* Tu color de hover dinámico */
    color: white !important;
}

/* 3. Color de la opción SELECCIONADA actualmente en la lista */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--color-principal) !important; /* Tu color base */
    color: white !important;
}

/* 4. Ajuste estético opcional: cambiar el color de la flecha a negro */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-principal) transparent transparent transparent !important;
}

.landing-page .btn-default {
    /*background-color: #1ab394;
            border-color: #1ab394;
            color: #FFFFFF;*/
    font-size: 14px;
    padding: 10px 20px;
    font-weight: 600;
}

.mensaje-exito {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.mensaje-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.mi-boton {
    background-color: var(--color-principal) !important; /* Color de fondo negro */
    border-color: var(--color-principal) !important;
}

    .mi-boton:hover {
        background-color: var(--color-hover) !important; /* Cambiar color de fondo al pasar el ratón */
    }

/* Quitamos la imagen de fondo de iCheck */
.icheckbox_square-green {
    background: #ffffff !important; /* Fondo inicial blanco */
    border: 2px solid #e5e6e7 !important; /* Borde negro */
    /*border-radius: 3px;*/
}

    /* Cuando está seleccionado (Checked) */
    .icheckbox_square-green.checked {
        background: var(--color-principal) !important; /* Se vuelve negro total */
        border-color: var(--color-hover) !important;
    }

    /* El Hover dinámico */
    .icheckbox_square-green.hover {
        background: white !important; /* Gris claro al pasar el mouse */
        border-color: var(--color-hover) !important;
    }

    /* Para que aparezca una 'X' o un check blanco sin imagen */
    .icheckbox_square-green.checked::after {
        content: '✓';
        color: white;
        position: absolute;
        top: -2px;
        left: 3px;
        font-size: 14px;
    }

.form-control:focus, .single-line:focus {
    border-color: var(--color-hover);
}

.landing-page .navy-line {
    border-bottom: 2px solid var(--color-principal) !important;
}

#team {
    background-color: var(--color-principal);
}