/*
IMPORTANTE!
-------------
    Este fichero contiene estilos genéricos que se usan en toda la aplicación
    --> NO MODIFICAR NADA
*/
:root {
    --background: #FFF !important;
    --texto: #6A6B6E !important;
    --color1: #FDC200 !important;
    --color2: #1C61B2 !important;
    --color3: #2D3D57 !important;
    --color4: #2D3D57 !important;
    --color5: #FFFFFF !important;
    --color6: #014391 !important;
    --color7: #ED8B00 !important;

    /* Colores nuevos */
    --amarillo2: #be9200 !important;
    --azul1: #1C61B2 !important;
    --azul2: #2263ad !important;
    --azul3: #2b75ab !important;
    --azul4: #edf5ff !important;
    --granate: #a62837 !important;
    --gris1: #f0efef !important;
    --gris2: #9b9b9b !important;
    --gris3: #f1efef !important;
    --gris4: #979797 !important;

    /* Docs v3 */
    --blanco: #FFFFFF;
    --negro: #4A4A4A;

    --gris: #C4C4C4;
    --gris-light: #F6F6F6;
    --gris-dark: #979797;

    --azul: #C6D8EB;
    --azul-light: #EEF5FE;
    --azul-mid: #56B1D8;
    --azul-dark: #1C62B2;
    --azul-dark-2: #014391;

    --amarillo: #FDC101;
    --amarillo-light: #FFEFBF;
    --amarillo-dark: #C79700;

    --rojo: #DC3912;
    --rojo-light: #F6CDC4;
    --rojo-dark: #961D00;

    --verde: #8FBF56;
    --verde-light: #D4E4C1;
    --verde-mid: #8FBF56;
    --verde-dark: #529405;
}

/* Colores iconos */
.icNegro {
    color: var(--negro) !important;
}

.icBlanco {
    color: var(--blanco) !important;
}

.icAzul2 {
    color: var(--azul2) !important;
}

.icAzul3 {
    color: var(--azul3) !important;
}

.icAzul4 {
    color: var(--azul4) !important;
}

.icVerde {
    color: var(--verde) !important;
}

.icGranate {
    color: var(--granate) !important;
}

.icGris1 {
    color: var(--gris1) !important;
}

.icGris2 {
    color: var(--gris2) !important;
}

.icGris3 {
    color: var(--gris3) !important;
}

.icGris4 {
    color: var(--gris4) !important;
}

.icAmarillo {
    color: var(--amarillo) !important;
}

.icAzul {
    color: var(--azul) !important;
}

.icAzulAlt {
    color: var(--azul-light-2) !important;
}

.icRojo {
    color: var(--rojo) !important;
}

.icVerde {
    color: var(--alt-color-2) !important;
}

.icNaranja {
    color: var(--alt-color-3);
}

/* CSS Genérico */
.contenedorTitulo {
    margin-bottom: 0;
    padding: 0 10px;
    border-bottom: 2px solid #929292;
}

.titulo {
    font-family: 'Roboto', sans-serif;
    color: #2f3f59;
    position: relative;
    display: inline-block;
}

.titulo::before {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 100%;
    background-color: #FDC200;
}

.btn {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    width: max-content;
    padding: 6px 14px;
    cursor: pointer;
}

.btn .ic:not(.btn__icono) {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    /* margin-right: 4px; */
}

.btn .ic:not(.btn__icono)::before {
    /* font-size: 20px; */
}

.btn span {
    font-family: 'Roboto', sans-serif;
    color: #4a4a4a;
    font-size: 12px;
}

.btn .btnSm span {
    font-size: 10px;
}

.btn.btnPrimario {
    background-color: #FFC401;
}

.btn.btnPrimario .ic {
    color: #2b75ab;
}

.btn.btnPrimario span {
    color: #2b75ab;
}

.btn.btnSecundario {
    background-color: #2b75ab;
}

.btn.btnAzulClaro {
    background-color: #eef5fe;
    border: 1px solid #c4c4c4;
}

.btn.btnSecundario .ic {
    color: #FFC401;
}

.btn.btnSecundario span {
    color: #FFC401;
}

.btn span.spanBlanco {
    color: #fff;
}

.btn.btnTercero {
    border: solid 1px #2366b5;
}

.btn.btnTercero span {
    color:#2366b5;
}

.btn.btnLigero {
    padding: 4px 10px 4px 6px;
}

.btn.btnAncho {
    padding: 8px 40px;
}

.btn.btnBorde {
    border: 1px solid #bbb;
}

.btn.btnRedondeado {
    border-radius: 24px;
}

.dragover {
    border: 2px solid #666;
}

/* [docs] Spinner de carga */
.contenedorSpinnerCargando {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contenedorSpinnerCargando .spinnerCargando {
    border: 6px solid var(--azul1);
    border-top: 6px solid var(--azul4);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spinnerCargando 2s linear infinite;
    background-color: transparent;
    box-sizing: border-box !important;
}

.contenedorSpinnerCargando .textoSpinnerCargando {
    margin-top: 10px;
}

@keyframes spinnerCargando {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* [docs] INCIO CUENTA ATRAS */
.cuentaAtrasContenedor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.cuentaAtrasContenedor * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;;
}

.cuentaAtrasContenedor .cuentaAtras {
    display: grid;
    grid-template-columns: repeat(7, max-content);
    justify-items: center;
    align-items: center;
}

.cuentaAtrasContenedor .valor,
.cuentaAtrasContenedor .separador {
    font-size: 48px;
}

.cuentaAtrasContenedor .separador {
    padding: 0 6px;
}

.cuentaAtrasContenedor .texto {
    text-transform: uppercase;
    font-size: 12px;
}

.cuentaAtrasContenedor .texto:nth-child(9) {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
}

.cuentaAtrasContenedor .texto:nth-child(10) {
    -ms-grid-column: 5;
    -ms-grid-column-span: 1;
    grid-column: 5 / 6;
}

.cuentaAtrasContenedor .texto:nth-child(11) {
    -ms-grid-column: 7;
    -ms-grid-column-span: 1;
    grid-column: 7 / 8;
}

.cuentaAtrasContenedor .fechaFin {
    margin-top: 10px;
}

.cuentaAtrasContenedor .cuentaAtrasContenedor.pocoTiempo .valor {
    animation: 1s ease-out 0s infinite normal pocoTiempo;
    color: red;
}

@keyframes pocoTiempo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* FIN CUENTA ATRAS */


/* [docs] INICIO MODALES NUEVAS */

.modalCapa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999999999999;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.modalCapa * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    color: #4a4a4a;
}

.modalCapa button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
}

.modalCapa .modalContenedor {
    position: absolute;
    top: 200px;
    width: 500px;
    max-height: 500px;
    max-width: 90%;
    /*max-height: 90%;*/
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-80px);
    transition: all 0.6s ease-out;
}

.modalCapa.modalParaCerrar {
    transition: all 0.6s ease-out;
}

.modalCapa.modalParaCerrar .modalContenedor {
    transition: all 0.2s ease-out;
}

.modalCapa.mostrarModal {
    visibility: visible;
    opacity: 1;
}

.modalCapa.mostrarModal .modalContenedor {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.modalCapa .modalCabecera,
.modalCapa .modalCuerpo,
.modalCapa .modalPie {
    padding: 10px 20px;
}

.modalCapa .modalCabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ededed;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    padding-top: 16px;
}

.modalCapa .modalCabeceraTexto {
    font-size: 14px;
    text-transform: uppercase;
}

.modalCapa .modalCerrarContenedor {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.modalCapa .modalCerrarContenedor span {
    font-size: 12px;
    text-transform: uppercase;
}

.modalCapa .modalCerrar {
    margin-left: 10px;
}

.modalCapa .modalCerrar .ic {
    font-size: 24px;
}

.modalCapa .modalCuerpo {
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
}

.modalCapa .modalMensaje {
    font-size: 14px;
    line-height: 1.2;
}

.modalCapa .modalPie {
    display: flex;
    border-top: 1px solid #ededed;
}

.modalCapa .modalPie button:first-of-type {
    margin-left: auto;
}

.modalCapa .modalPie button:nth-of-type(2) {
    margin-left: 20px;
}

.modalCapa .modalPie .modalAceptar {
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
}

/* Estilos según tipo de modal */

.modalCapa .modalContenedor.modalAlert .modalCabecera {
    border-color: #4a90e2;
}

.modalCapa .modalContenedor.modalAlert .modalAceptar {
    background-color: #4a90e2;
}

.modalCapa .modalContenedor.modalConfirm .modalCabecera {
    border-color: #5f9025;
}

.modalCapa .modalContenedor.modalConfirm .modalAceptar {
    background-color: #5f9025;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloCambiar .modalCabecera {
    border-color: #fdc200;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloCambiar .modalAceptar {
    background-color: #fdc200;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloEliminar .modalCabecera {
    border-color: #d0021b;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloEliminar .modalAceptar {
    background-color: #d0021b;
}

/* Modal aviso-importante */
.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante {
    border-radius: 0;
    width: 360px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalCabecera {
    padding: 10px 14px;
    border: none;
    background-image: url(../images/barra-modal.png);
    background-repeat: repeat-x;
    background-position: top left;
}
.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalCabecera * {
    color: white;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .imagenCabecera {
    width: 32px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalCabeceraTexto {
    font-size: 16px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .imagenAviso {
    float: left;
    margin-bottom: 4px;
    margin-right: 6px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalMensaje {
    margin-top: 4px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalCerrarContenedor span {
    font-size: 14px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalCerrar .ic {
    font-size: 30px;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalRechazar {
    display: none;
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalAceptar {
    margin: 0 auto;
    background-color: var(--color3);
}

.modalCapa .modalContenedor.modalConfirm.modalEstiloAvisoImportante .modalPie {
    border-top: none;
}


/* INICIO MODALES MÓVIL */

.modalMovil {
    position: fixed;
    z-index: 10;
    top: 43px;
    right: 0;
    width: 100vw !important;
    /*width: calc(100vw - 60px) !important;*/
    height: calc(100vh - 43px - 40px);
    background-color: var(--azul4);
    transform: translate3d(100%, 0, 0);
    transition: all 0.2s ease-out;
}

/*#ventanas.xMenuLateral .modalMovil {*/
/*    right: 45px;*/
/*}*/

/*#contenedorMenuVentanas.menuAbierto .modalMovil {*/
/*    width: calc(100vw - 80px) !important;*/
/*}*/

.modalMovil.mostrar {
    transform: translate3d(0, 0, 0);
}

.modalMovil .cabeceraModal {
    display: flex;
    padding: 8px 10px;
}

.modalMovil .btnCerrarModal {
    /* margin-left: auto !important; */
    margin: 5px 5px 0 auto !important;
    background-color: transparent;
    border: none;
    outline: none;
}

.modalMovil .btnCerrarModal .ic {
    color: var(--negro);
    font-size: 24px;
}

/* FIN MODALES MÓVIL */

/* FIN MODALES NUEVAS */

.contenedorRangoDoble {
    background-color: #f2f1f1;
    display: flex;
    justify-content: center;
    padding: 2px 16px 2px !important;
    border-radius: 48px;
    width: max-content;
}

.contenedorRangoDoble * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

.rangoDoble {
    position: relative;
    width: 320px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos del input rango */
.rangoDoble input[type="range"] {
    all: unset;
    width: 100%;
    -webkit-appearance: none;
    opacity: 0;
    z-index: 1;
    position: absolute;
}

.rangoDoble input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin: -14px 0 0;
    /* width: 30px; */
    height: 30px;
    border-radius: 50%;
    /* background-color: red; */
    cursor: pointer;
    border: 0 !important;
}

.rangoDoble input[type="range"].rangoMin::-webkit-slider-thumb {
    margin: -14px 0 0 -10px;
    width: 40px;
}

.rangoDoble input[type="range"].rangoMax::-webkit-slider-thumb {
    margin: -14px 0 0 10px;
    width: 40px;
}

.rangoDoble input[type="range"]::-webkit-slider-runnable-track {
    all: unset;
    width: 100%;
    /* height: 4px; */
    height: 0 !important;
    cursor: pointer;
}

.rangoDoble input[type="range"]:focus {
    background: none;
    outline: none;
}

.rangoDoble .rangoMin::-webkit-slider-thumb {
    background-color: deepskyblue;
}

.rangoDoble .rangoMax::-webkit-slider-thumb  {
    background-color: seagreen;
}

.rangoDoble .linea {
    width: 98%;
    height: 3px;
    background-color: #d8d8d8;
    position: absolute;
}

.rangoDoble .progreso {
    position: absolute;
    height: 3px;
    background: #2a7bda;
    width: 100%;
}

.rangoDoble .rangoFalso {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 6px;
}

.rangoDoble .rangoFalso .opcion {
    margin-top: 24px;
    font-size: 10px;
}

.rangoDoble .opcion.seleccionada {
    margin-top: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid #2a7bda;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* FIN RANGO DOBLE */

/* [docs] INICIO RANGO DOBLE CUSTOM */

.rangoDobleCustom {
    display: flex;
    justify-content: center;
    width: max-content;
    position: relative;
}

.rangoDobleCustom * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

.rangoDoble {
    position: relative;
    width: 350px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos del input rango */
.rangoDobleCustom .rangoDoble input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    opacity: 0;
    z-index: 1;
    position: absolute;
}

.rangoDobleCustom .rangoDoble input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin: -14px 0 0;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 0 !important;
}

.rangoDobleCustom .rangoDoble input[type="range"].rangoMin::-webkit-slider-thumb {
    margin: -14px 0 0 -10px;
    width: 40px;
}

.rangoDobleCustom .rangoDoble input[type="range"].rangoMax::-webkit-slider-thumb {
    margin: -14px 0 0 10px;
    width: 40px;
}

.rangoDobleCustom .rangoDoble input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0;
    cursor: pointer;
}

.rangoDobleCustom .rangoDoble input[type="range"]:focus {
    background: none;
    outline: none;
}

.rangoDobleCustom .rangoDoble .rangoMin::-webkit-slider-thumb {
    background-color: deepskyblue;
}

.rangoDobleCustom .rangoDoble .rangoMax::-webkit-slider-thumb  {
    background-color: seagreen;
}

.rangoDobleCustom .rangoDoble .linea {
    width: 98%;
    height: 3px;
    background-color: #d8d8d8;
    position: absolute;
}

.rangoDobleCustom .rangoDoble .progreso {
    position: absolute;
    height: 3px;
    background: #2a7bda;
    width: 100%;
}

.rangoDobleCustom .rangoDoble .rangoFalso {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 6px;
}

.rangoDobleCustom .rangoDoble .rangoFalso .opcion {
    margin-top: 38px;
    font-size: 10px;
}

.rangoDobleCustom .rangoDoble .rangoFalso .opcion:not(.seleccionada).rotada {
    transform: rotate(65deg);
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 2px solid #2a7bda;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada span {
    display: none;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada::after {
    content: attr(data-valor);
    position: absolute;
    padding: 6px 8px;
    border-radius: 4px;
    background:#2a7bda;
    color: white;
    z-index: 2;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada:not(.max)::after {
    top: 30px;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada.max::after {
    top: -26px;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    z-index: 2;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada:not(.max)::before {
    top: 23px;
    left: 6px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #2a7bda;
}

.rangoDobleCustom .rangoDoble .opcion.seleccionada.max::before {
    top: -3px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #2a7bda;
}

.rangoDobleCustom .editarRango {
    position: absolute;
    top: 8px;
    left: 110px;
    background: transparent;
    border: none;
    width: max-content;
    outline: none;
    padding: 0;
    height: 20px;
    color: #777;
}

/* Animación para dar la vuelta */
.rangoDobleCustom {
    width: 390px;
    height: 90px;
    perspective: 1500px;
    position: relative;
    transition: all 0.3s ease-out;
}

.rangoDobleCustom .rangoCara {
    background-color: #f2f1f1;
    position: absolute;
    /* overflow: hidden !important; */
    width: 100%;
    backface-visibility: hidden !important;
    transition: all 0.3s ease-out;
}

.rangoDobleCustom .rangoCara.caraTrasera {
    transform: rotateX(180deg);
}

.rangoDobleCustom.mostrarTrasera .caraFrontal {
    transform: rotateX(-180deg);
}

.rangoDobleCustom.mostrarTrasera .caraTrasera {
    transform: rotateX(0);
}

.rangoDobleCustom .caraFrontal {
    padding: 24px 20px 25px;
    border-radius: 48px;
}

.rangoDobleCustom .caraTrasera {
    width: 360px;
    height: 90px;
    display: flex;
    justify-content: center;
    border-radius: 48px;
}

.rangoDobleCustom .inputManual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rangoDobleCustom .inputManual span {
    text-transform: uppercase;
    color: #777;
    font-size: 12px;
    margin-right: 4px;
}

.rangoDobleCustom .inputManual span:nth-of-type(2) {
    margin-left: 8px;
}

.rangoDobleCustom .inputManual input {
    width: 80px;
    outline: 0;
    padding: 2px 4px;
    box-shadow: none;
}

.rangoDobleCustom .caraTrasera .btnVolver {
    position: absolute;
    bottom: 5px;
    right: 40px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    outline: 0;
    cursor: pointer;
}

.rangoDobleCustom .caraTrasera .btnVolver .ic {
    transform: rotate(90deg);
}

/* FIN RANGO DOBLE CUSTOM */

/* [docs] INICIO RANGO PREFERENCIA */

.rangoPreferencia input[type="range"] {
    -webkit-appearance: none;
    opacity: 0;
}

.rangoPreferencia input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin: -8px 0 0 !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    cursor: pointer;
    border: 0 !important;
}

.rangoPreferencia input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;
    cursor: pointer;
    background: red;
}

.rangoPreferencia input[type="range"]:focus {
    background: none;
    outline: none;
}

/* Estilo del contenedor */
.rangoPreferencia {
    position: relative;
    width: 220px;
    height: 40px;
}

.rangoPreferencia * {
    user-select: none;
}

.rangoPreferencia input[type="range"] {
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 0;
}

.rangoPreferencia .rangoFalso {
    position: absolute;
    top: -10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rangoPreferencia .lineaRango {
    position: absolute;
    width: 96%;
    margin: 0 2% !important;
    height: 2px;
    background: #4a4a4a;
}

.rangoPreferencia .rangoFalso .opcion {
    z-index: 1;
    visibility: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.rangoPreferencia .rangoFalso .opcion .emoji {
    font-size: 24px;
}

.rangoPreferencia .rangoFalso .opcion .texto {
    position: absolute;
    width: max-content;
    color: #4a4a4a;
    top: 36px;
    left: -10px;
    font-size: 10px;
    text-transform: uppercase;
}

.rangoPreferencia .rangoFalso .opcion[data-valor="0"] .texto {
    left: -16px;
}

.rangoPreferencia .rangoFalso .opcion[data-valor="1"] .texto {
    left: -24px;
}

.rangoPreferencia .rangoFalso .opcion[data-valor="2"] .texto {
    left: -16px;
}

/* Funcionamiento dinámico */
.rangoPreferencia[data-valor="0"] .rangoFalso .opcion[data-valor="0"],
.rangoPreferencia[data-valor="1"] .rangoFalso .opcion[data-valor="1"],
.rangoPreferencia[data-valor="2"] .rangoFalso .opcion[data-valor="2"],
.rangoPreferencia[data-valor="3"] .rangoFalso .opcion[data-valor="3"] {
    visibility: visible;
}

/* FIN RANGO PREFERENCIA */

/******************************************************************
ESTILOS GENÉRICOS DICIEMBRE 2020
******************************************************************/

/* VARIABLES */
/******************************************************/

:root {
    /* font-weight */
    --fw-thin: 100;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;
    --fw-black: 800;

    /* font-size */
    --fs-xs:  10px;
    --fs-s:   12px;
    --fs-md:  14px;
    --fs-l:   16px;
    --fs-xl:  18px;
    --fs-2xl: 24px;

    /* colores principales */
    --blanco: #FFFFFF;
    --negro: #4A4A4A;
    --gris-1: #F6F6F6;
    --gris-2: #C4C4C4;
    --gris-3: #979797;
    --azul: #1C62B2;
    --azul-light: #C6D8EB;
    --azul-light-2: #EEF5FE;
    --amarillo: #FDC101;
    --amarillo-light: #FFEFBF;
    --amarillo-dark: #C79700;
    --rojo: #DC3912;
    --rojo-light: #F6CDC4;
    --verde: #529405;
    --verde-light: #D4E4C1;

    /* colores secundarios */
    --alt-color-1: #56B1D8;
    --alt-color-2: #8FBF56;
    --alt-color-3: #F1AD27;
    --alt-color-4: #DD6287;
    --alt-color-5: #B373C9;

    /* otros */
    --box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}


/* RESET/AJUSTES */
/******************************************************/

/* Quitar borde negro en Chrome v83, sigue saliendo en option */
*, *:focus,*:hover, input, select, textarea, option, button {
    outline: none !important;
}

/* Para Safari, en algunos casos se chafa el color */
*, *::before, *::after {
    -webkit-text-fill-color: currentColor !important;
}

body {
    -webkit-text-size-adjust: 100% !important;
}

*,
*::before,
*::after {
    font-weight: 400;
}

strong, b, h1, h2, h3, h4, h5 {
    font-weight: bold;
}


/* ICONOS */
/******************************************************/
.ic.icXS {
    font-size: 12px !important;
}

.ic.icS {
    font-size: 15px !important;
}

.ic.icM {
    font-size: 20px !important;
}

.ic.icL {
    font-size: 30px !important;
}


/* FORMULARIOS */
/******************************************************/
.grupoInput label {
    text-decoration: none !important;
}

input[type="text"].input-text,
input[type="number"].input-number,
input[type="email"].input-email,
input[type="password"].input-password,
select.select,
textarea.textarea {
    box-shadow: none;
    border: 1px solid #ccc !important;
    padding: 6px !important;
    background-color: white;
    border-radius: 5px;
}

input[type="text"].input-text:focus,
input[type="number"].input-number:focus,
input[type="email"].input-email:focus,
input[type="password"].input-password:focus,
select.select:focus,
textarea.textarea:focus,
input[type="text"].input-text:hover,
input[type="number"].input-number:hover,
input[type="email"].input-email:hover,
input[type="password"].input-password:hover,
select.select:hover,
textarea.textarea:hover {
    box-shadow: none;
}

textarea.textarea {
    resize: none;
}

/* Checkbox y radio */
input[type="radio"].iradio,
input[type="checkbox"].icheck {
    margin: 0 !important;
    width: 15px !important;
    height: 15px !important;
    background: #fff !important;
    position: relative !important;
    appearance: none !important;
    border: 1px solid #ccc;
    overflow: hidden !important;
    outline: none !important;
    cursor: pointer !important;
}

input[type="checkbox"].icheck {
    border-radius: 4px !important;
}

input[type="radio"].iradio {
    border-radius: 50% !important;
}

input[type="radio"].iradio::after,
input[type="checkbox"].icheck::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

input[type="radio"].iradio:checked::after,
input[type="checkbox"].icheck:checked::after {
    background-color: #1C61B2 !important;
}

input[type="checkbox"].icheck:checked::after {
    content: '✔' !important;
    color: white !important;
    text-align: center !important;
    font-size: 9px !important;
}

/* Switch */
input[type="checkbox"].iCheckbox {
    cursor: pointer !important;
    position: relative !important;
    -webkit-appearance: none !important;
    outline: none !important;
    width: 38px !important;
    height: 13px !important;
    background: none !important;
    background-color: #9b9b9b !important;
    border-radius: 50px !important;
    transition: all 0.2s ease-out !important;
    display: flex;
    align-items: center;
}

input[type="checkbox"].iCheckbox:checked {
    background-color: #91d146 !important;
}

input[type="checkbox"].iCheckbox::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.1s ease-out;
    box-sizing: border-box;
    border: 1px solid #9b9b9b;
}

input[type="checkbox"].iCheckbox:checked::after {
    left: 20px;
    /*background-image: url('../images/checksolo.png');*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Estilo grande */
input[type="checkbox"].iCheckbox.iLg {
    width: 50px !important;
    height: 18px !important;
}

input[type="checkbox"].iCheckbox.iLg::after {
    top: -4px;
    width: 26px;
    height: 26px;
}

input[type="checkbox"].iCheckbox.iLg:checked::after {
    left: 26px;
}

/* Con imagen de fondo para confirmar acciones */
input[type="checkbox"].iCheckbox.iImg:checked::after {
    background-image: url('../images/checksolo.png');
}

/* Rango nativo */
input[type='range'].rango {
    overflow: hidden;
    width: 100%;
    border-radius: 17px;
    height: 22px;
    -webkit-appearance: none;
    background-color: var(--gris-2);
    border: 1px solid var(--gris-2);
}

input[type='range'].rango:focus {
    outline: none;
}

input[type='range'].rango::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    border-radius: 17px;
    background-color: var(--gris-1);
}

input[type='range'].rango::-webkit-slider-thumb {
    width: 22px;
    -webkit-appearance: none;
    height: 22px;
    margin-top: -1px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--gris-2);
    background: #8DB0D8;
    box-shadow: -5000px 0 0 4990px var(--azul);
}

/* Select por defecto */
select.select {
    box-shadow: none;
    border: 1px solid #ccc !important;
    padding: 5px !important;
    background-color: white;
    border-radius: 5px;
}

/* Select con opción simple y múltiple */
.selectMultiple,
.selectSimple {
    position: relative;
    width: max-content !important;
    background-color: white;
}

.selectMultiple input[data-lista],
.selectSimple input[data-lista] {
    width: 200px;
    background-image: url('../images/select_check.png');
    background-size: 12px;
    background-position: right 4px top 9px;
    background-repeat: no-repeat;
}

.selectMultiple .selectValor,
.selectSimple .selectValor {
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid #ccc !important;
    padding: 6px !important;
    background-color: transparent;
    border-radius: 5px;
    padding-right: 18px !important;
}

.selectMultiple .buscadorSelect,
.selectSimple .buscadorSelect {
    padding: 6px !important;
    width: 100%;
    margin-bottom: 6px !important;
    border: none !important;
    border-radius: 0;
}

.selectMultiple .toggleTodosSelect {
    background: transparent;
    border: none;
    color: #666;
    padding: 8px !important;
}

.selectMultiple .selectListado,
.selectSimple .selectListado {
    position: absolute;
    top: 0;
    width: 100%;
    max-height: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
}

.selectMultiple .selectListado {
    top: 28px;
    width: 100%;
}

.selectMultiple[data-buscador="1"] .selectListado {
    top: 0;
}

.selectMultiple .cuerpoSelectMultiple,
.selectSimple .cuerpoSelectSimple {
    flex: 1;
    overflow-y: auto !important;
}

.selectMultiple.mostrar .selectListado,
.selectSimple.mostrar .selectListado {
    z-index: 210;
    visibility: visible;
    opacity: 1;
}

.selectMultiple ul,
.selectSimple ul {
    max-height: 60vh;
    /*overflow: auto;*/ /* hacia que salieran dos barras de scroll */
    list-style: none;
}

.selectMultiple li,
.selectSimple li {
    display: flex;
    align-items: center;
    padding: 5px 8px !important;
    font-size: 12px;
}
.selectMultiple li:hover,
.selectSimple li:hover {
    background-color: var(--azul-light-2);
}

.selectMultiple li.opcionReset .ic,
.selectSimple li.opcionReset .ic {
    margin-right: 6px !important;
}

.selectMultiple li:first-child,
.selectSimple li:first-child {
    margin-top: 5px !important;
}

.selectMultiple li:last-child,
.selectSimple li:last-child {
    margin-bottom: 5px !important;
}

.selectMultiple li > span,
.selectSimple li > span {
    margin-left: 5px;
}

.selectMultiple input[type="checkbox"] {
    -webkit-appearance: button;
    visibility: visible;
    padding: 0;
    margin-right: 4px;
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.selectSimple label,
.selectMultiple label {
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90%;
    margin-bottom: 0 !important;
    margin-left: 5px !important;
}

/* Estilos personalizados para las opciones de los select custom */
/* agentes-foto */
.selectSimple .opcion[data-estilo="agentes-foto"] .contenedorAgenteFoto {
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 24px;
    border-radius: 50% !important;
    border: 1px solid var(--gris-3);
    overflow: hidden;
    font-size: 10px;
    color: var(--negro);
    background-color: var(--gris-1);
}

.selectSimple .opcion[data-estilo="agentes-foto"] .contenedorAgenteFoto.agenteSiglasSM {
    font-size: 8px;
}

.selectSimple .opcion[data-estilo="agentes-foto"] .agenteFoto {
    position: absolute;
    width: 100%;
    object-fit: contain;
}

/* agentes-color */
.selectMultiple li span[data-estilo="agentes-color"] {
    flex-shrink: 0;
    margin: 0 4px !important;
    height: 20px !important;
    display: flex;
    align-items: center;
}

.selectMultiple li span[data-estilo="agentes-color"] .agenteColorSeguimiento,
.selectMultiple li span[data-estilo="agentes-color"] .agenteSiglas {
    box-sizing: border-box;
    border-radius: 50% !important;
    height: 20px;
    width: 20px;
}

.selectMultiple li span[data-estilo="agentes-color"] .agenteColorSeguimiento {
    background-color: var(--gris-1);
}

.selectMultiple li span[data-estilo="agentes-color"] .agenteSiglas {
    border: 1px solid var(--gris2) !important;
    color: var(--gris2);
    padding: 2px !important;
    font-size: 10px;
    background-color: #fff;
    margin-left: -15px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selectMultiple li span[data-estilo="agentes-color"] .agenteSiglas.agenteSiglasSM {
    font-size: 7px;
}


/* Timepicker */
.contenedorTimePicker {
    position: relative;
}

.contenedorTimePicker * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.contenedorTimePicker .timePicker {
    cursor: pointer;
    padding: 4px 8px;
    border: solid 1px #ededed;
}

.contenedorTimePicker .timePicker:disabled {
    background-color: #fff;
    border: solid 1px #ededed;
}

.selectorTimePicker {
    position: absolute;
    width: 120px;
    height: 110px;
    padding: 8px;
    background-color: #edf5ff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-out;
}

.contenedorTimePicker.mostrarSelector .selectorTimePicker {
    visibility: visible;
    opacity: 1;
}

.selectorTimePicker {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
}

.selectorTimePicker button {
    cursor: pointer;
    background: none;
    border: none;
}

.selectorTimePicker [data-display],
.selectorTimePicker .separador {
    font-weight: bold;
}

.selectorTimePicker [data-rol="separador"] {
    grid-row: span 3;
}

.contenedorTimePicker .timePicker::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.contenedorTimePicker .timePicker::-webkit-clear-button {
    -webkit-appearance: none;
}

@media only screen and (max-width: 480px) {
    .contenedorTimePicker .timePicker::-webkit-inner-spin-button {
        -webkit-appearance: button;
    }

    .contenedorTimePicker .timePicker::-webkit-clear-button {
        -webkit-appearance: button;
    }
}

/*
Para la funcionalida de agregar una opción al vuelo
! Pendiente de unificar
*/
.selectSimple .selectAgregar {
    position: relative;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.selectSimple .selectAgregar .btnAgregar {
    width: 100%;
    background: #fff;
    border: none;
    padding: 6px 10px !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selectSimple .selectAgregar .btnAgregar .ic {
    font-size: 16px;
}

.selectSimple .inputAgregarContenedor {
    width: 100%;
    height: 100%;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 22px;
}

.selectSimple .inputAgregarContenedor .inputAgregar {
    border: none !important;
    box-shadow: none !important;
    padding: 5px 2px 5px 10px !important
}

.selectSimple .inputAgregarContenedor .aceptarAgregar {
    align-self: center;
    border-radius: 50%;
    border: none;
    width: 18px;
    height: 18px;
    background-color: transparent;
}

.selectSimple .inputAgregarContenedor .aceptarAgregar .ic {
    font-size: 16px;
}


/* Input subir archivo drag & drop */
.drop-zone,
.drop-zone * {
    box-sizing: border-box;
}

.drop-zone {
    width: 160px;
    height: 120px;
    padding: 8px;
    border: 3px dashed #C4C4C4;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drop-zone--over {
    border-style: solid;
}

.drop-zone__icon {
    font-size: 42px;
}

.drop-zone__text {
    font-size: 12px;
    margin: 8px 0 0 0;
    word-break: break-all;
}

.drop-zone__input {
    display: none;
}


/* BOTONES */
/******************************************************/

[class^="iBtn"],
[class*=" iBtn"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    padding: 0 16px !important;
    height: 36px !important;
    width: max-content !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition:
            color 0.2s ease-out,
            border-color 0.2s ease-out,
            background-color 0.2s ease-out;
}

[class^="iBtn"] span,
[class*=" iBtn"] span {
    font-weight: var(--fw-medium);
}

[class^="iBtn"] .ic::before,
[class*=" iBtn"] .ic::before {
    font-size: 18px !important;
    margin-right: 5px !important;
}

/* Botones pequeños */
.iBtnMini,
[class^="iBtn"].iBtnMini,
[class*=" iBtn"].iBtnMini {
    border-radius: 11px !important;
    height: 25px !important;
    padding: 2px 8px !important;
    width: max-content !important;
}

.iBtnMini .ic::before,
[class^="iBtn"].iBtnMini .ic::before,
[class*=" iBtn"].iBtnMini .ic::before {
    font-size: 12px !important;
}

/* Botones con imágenes */
[class^="iBtn"] img,
[class*=" iBtn"] img {
    height: 60%;
}


.iBtnMini img,
[class^="iBtn"].iBtnMini img,
[class*=" iBtn"].iBtnMini img {
    height: 60%;
}

/* Botones cuadrados */
[class^="iBtn"].iBtnCuadrado,
[class*=" iBtn"].iBtnCuadrado {
    border-radius: 5px !important;
}

[class^="iBtn"].iBtnCuadrado .ic,
[class*=" iBtn"].iBtnCuadrado .ic {
    color: var(--negro) !important;
}

/* Colores de los botones */
[class^="iBtn"],
[class*=" iBtn"] {
    background-color: var(--blanco) !important;
    color: var(--negro) !important;
    border-color: #C4C4C4 !important;
}

[class^="iBtn"]:hover,
[class*=" iBtn"]:hover {
    color: var(--azul) !important;
    border-color: var(--azul) !important;
}

.iBtnAmarillo {
    background-color: var(--amarillo) !important;
    border-color: var(--amarillo) !important;
    color: var(--azul) !important;
}

.iBtnAmarillo:hover {
    border-color: var(--azul) !important;
    color: var(--azul) !important;
}

.iBtnAzul {
    background-color: #1C62B2 !important;
    color: var(--blanco) !important;
}

.iBtnAzul:hover {
    background-color: var(--blanco) !important;
    border-color: #1C62B2 !important;
    color: #1C62B2 !important;
}

.iBtnAzulAlt {
    background-color: var(--azul-light-2) !important;
    color: var(--negro) !important;
}

.iBtnAzulAlt:hover {
    border-color: var(--azul) !important;
    color: var(--azul) !important;
}

.iBtnRojo {
     background-color: var(--rojo) !important;
     border-color: var(--rojo) !important;
     color: var(--blanco) !important;
 }

.iBtnRojo:hover {
    background-color: var(--blanco) !important;
    border-color: var(--rojo) !important;
    color: var(--rojo) !important;
}

.iBtnVerde {
    background-color: var(--alt-color-2) !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

.iBtnVerde:hover {
    background-color: var(--blanco) !important;
    border-color: var(--alt-color-2) !important;
    color: var(--alt-color-2) !important;
}

.iBtnNaranja {
    background-color: #f5a623 !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

.iBtnNaranja:hover {
    background-color: var(--blanco) !important;
    border-color: #f5a623  !important;
    color: #f5a623 !important;
}

/* Colores 2020, NO USAR */
.iBtnBlanco {
    color: var(--azul1) !important;
    background-color: var(--blanco) !important;
    border-color: var(--azul1) !important;
}

.iBtnBlanco * {
    color: var(--azul1) !important;
}

.iBtnAzulClaro {
    background-color: #eef5fe !important;
    border: 1px solid #e2e2e2 !important;
    color: var(--negro) !important;
}

.iBtnGris {
    background-color: var(--gris1) !important;
    color: var(--azul1) !important;
    border-color: var(--azul1) !important;
}

.iBtnGris * {
    color: var(--negro) !important;
}

.iBtnGris2 {
    background-color: var(--gris3) !important;
    border-color: var(--gris4) !important;
    color: var(--negro) !important;
}

.iBtnGris3 {
    background-color: #d8d8d8 !important;
    border-color: var(--gris4) !important;
    color: var(--negro) !important;
}

.iBtnGris4 {
    background-color: var(--gris2) !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

.iBtnAzul2 {
    background-color: #2e82c7 !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

/* Botones desactivados */
.iBtnDisabled,
[class^="iBtn"][disabled],
[class*=" iBtn"][disabled] {
    /* pointer-events: none !important; */
    cursor: not-allowed !important;
    background-color: #C4C4C4 !important;
    color: var(--blanco) !important;
    border-color: #C4C4C4 !important;
}

/* Respetar colores en los textos */
[class^="iBtn"] *,
[class*=" iBtn"] * {
    color: currentColor !important;
}


/* Botones normales se hacen pequeños en móvil */
@media only screen and (max-width: 480px) {
    [class^="iBtn"],
    [class*=" iBtn"] {
        border-radius: 11px !important;
        height: 25px !important;
        padding: 0 8px !important;
        width: max-content !important;
    }

    [class^="iBtn"] .ic::before,
    [class*=" iBtn"] .ic::before {
        font-size: 12px !important;
    }
}


/* TAGS */
/******************************************************/

/* Estilos tags antiguos, se conservan por compatibilidad, NO USAR */
.iTagGris,
.iTagGris2,
.iTagGris3,
.iTagDisabled {
    border-color: var(--negro) !important;
}

.iTagGris span,
.iTagGris2 span,
.iTagGris3 span,
.iTagDisabled span {
    color: var(--negro) !important;
}

.iTagBlanco * {
    color: var(--azul1) !important;
}

.iTagAzul {
    background-color: var(--azul1) !important;
    color: var(--blanco) !important;
}

.iTagAzulClaro {
    background-color: #eef5fe !important;
    border: 1px solid #e2e2e2 !important;
    color: var(--negro) !important;
}

.iTagAmarillo {
    background-color: var(--amarillo) !important;
    border-color: var(--amarillo) !important;
    color: var(--azul1) !important;
}

.iTagVerde {
    background-color: var(--verde) !important;
    border-color: var(--verde) !important;
    color: var(--blanco) !important;
}

.iTagRojo {
    background-color: var(--granate) !important;
    border-color: var(--granate) !important;
    color: var(--blanco) !important;
}

.iTagGris {
    background-color: var(--gris1) !important;
    color: var(--azul1) !important;
}

.iTagGris2 {
    background-color: var(--gris3) !important;
    border-color: var(--gris4) !important;
    color: var(--negro) !important;
}

.iTagGris3 {
    background-color: #d8d8d8 !important;
    border-color: var(--gris4) !important;
    color: var(--negro) !important;
}

.iTagGris4 {
    background-color: var(--gris2) !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

.iTagNaranja {
    background-color: #f5a623 !important;
    border-color: transparent !important;
}

.iTagVerde {
    background-color: #84b54b !important;
    border-color: transparent !important;
}

.iTagAzul2 {
    background-color: #2e82c7 !important;
    border-color: transparent !important;
}

.iTagDisabled {
    border-color: var(--gris2) !important;
    color: var(--gris2) !important;
}

/* Fin estilos antiguos */

[class^="iTag"],
[class*=" iTag"] {
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    padding: 0 7px !important;
    height: 20px !important;
    width: max-content !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

[class^="iTag"] *,
[class*=" iTag"] * {
    color: currentColor !important;
}

[class^="iTag"] span,
[class*=" iTag"] span {
    font-weight: var(--fw-light);
    color: currentColor !important;
}

/* Colores de los tags */
[class^="iTag"],
[class*=" iTag"] {
    background-color: var(--blanco) !important;
    color: var(--negro) !important;
    border-color: #C4C4C4 !important;
}

.iTagAmarillo {
    background-color: var(--amarillo) !important;
    border-color: var(--amarillo) !important;
    color: var(--azul) !important;
}

.iTagAzul {
    background-color: var(--azul) !important;
    color: var(--blanco) !important;
}

.iTagAzulAlt {
    background-color: var(--azul-light-2) !important;
    color: var(--negro) !important;
}

.iTagRojo {
    background-color: var(--rojo) !important;
    border-color: var(--rojo) !important;
    color: var(--blanco) !important;
}

.iTagVerde {
    background-color: var(--alt-color-2) !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

.iTagNaranja {
    background-color: #f5a623 !important;
    border-color: transparent !important;
    color: var(--blanco) !important;
}

/* TAGS */
/******************************************************/

.loadingInmovilla {
    width: 100px;
}

.loadingInmovillaSM {
    width: 50px;
}

.loadingInmovillaLG {
    width: 200px;
}

/* TOOLTIP CUSTOM CON HTML */
/******************************************************/
.tooltip-custom {
    position: relative;
}

.tooltip-custom__ventana {
    display: none;
    z-index: 25;
    position: absolute;
    left: -9px;
    width: max-content;
    max-width: 190px;
    flex-direction: column;
}

.tooltip-custom__disparador {
    cursor: help;
}

.tooltip-custom--abierto .tooltip-custom__ventana {
    display: flex;
}

.tooltip-custom__ventana::before {
    content: '';
    position: relative;
    left: 10px;
    width: 0;
    height: 0;
    margin-bottom: -1px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 9px solid #FFF;
}

.tooltip-custom__contenido {
    padding: 8px 12px !important;
    border-radius: 5px;
    font-size: 10px;
    background: white;
    box-shadow: var(--box-shadow);
}

.tooltip-custom--izquierda .tooltip-custom__ventana {
    left: unset;
    right: -11px;
}

.tooltip-custom--izquierda .tooltip-custom__ventana::before {
    left: calc(100% - 25px);
}

.tooltip-custom--arriba .tooltip-custom__ventana::before {
    order: 2;
    margin-bottom: 0;
    margin-top: -1px;
    border-top: 9px solid #FFF;
    border-bottom: none;
}

.tooltip-custom--arriba .tooltip-custom__contenido {
    order: 1;
}

/* CARRUSEL DE IMÁGENES */
/******************************************************/
.carrusel,
.carrusel * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.carrusel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.carrusel__parte-principal {
    height: calc(100% - 80px);
    display: flex;
}

.carrusel__contenedor-boton-direccion {
    display: flex;
    align-items: center;
}

.carrusel__contenedor-boton-direccion--previo {
    margin-right: 16px !important;
}

.carrusel__contenedor-boton-direccion--siguiente {
    margin-left: 16px !important;
}

.carrusel__boton-direccion {
    outline: none;
    padding: 6px 2px !important;
    background: var(--azul-light-2);
    color: #777;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 5px;
}

.carrusel__boton-direccion .ic::before {
    font-size: 24px;
    font-weight: var(--fw-black);
    color: var(--azul);
}

.carrusel__boton-direccion:hover {
    color: var(--azul);
    border-color: var(--azul);
}

.carrusel__contenedor-central {
    position: relative;
}

.carrusel__bloque-imagenes {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* scroll-behavior: smooth; */
}

.carrusel__boton-fullscreen {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 6px !important;
    border-radius: 5px;
    background: var(--azul-light-2);
    color: var(--azul);
    border: none;
    outline: none;
    cursor: pointer;
}

.carrusel__fila-imagenes {
    height: 100%;
    display: flex;
}

.carrusel__contenedor-imagen {
    width: 100%;
    flex-shrink: 0;
    background-color: #EEE;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrusel__imagen {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.carrusel__contenedor-botones-bola {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.carrusel__boton-bola {
    opacity: 0.6;
    outline: none;
    width: 16px;
    height: 10px;
    border-radius: 5px !important;
    background: #EEE !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3) !important;
    border: none !important;
    cursor: pointer;
}

.carrusel__boton-bola--activo,
.carrusel__boton-bola:hover {
    opacity: 1;
}

.carrusel__boton-bola:not(:first-child) {
    margin-left: 4px !important;
}

.carrusel__parte-inferior {
    position: relative;
    overflow: auto;
    height: 70px;
    margin-top: 10px !important;
}

.carrusel__parte-inferior--arrastrando {
    cursor: grab;
}

.carrusel__bloque-thumbnails {
    width: max-content;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
}

.carrusel__bloque-thumbnails--arrastrando * {
    cursor: grab;
}

.carrusel__contenedor-thumbnail {
    flex-shrink: 0;
    background-color: #EEE;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.6;
    width: 100px;
    cursor: pointer;
    border: 3px solid #CCC;
}

.carrusel__contenedor-thumbnail--activo,
.carrusel__contenedor-thumbnail:hover {
    opacity: 1;
    border-color: var(--azul);
}

.carrusel__contenedor-thumbnail:not(:first-child) {
    margin-left: 6px !important;
}

.carrusel__thumbnail {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.carrusel ::-webkit-scrollbar {
    display: none;
}

.carrusel * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.carrusel__parte-inferior {
    scrollbar-width: none;
}