/*estilos generales*/
body {
    font-family: Montserrat, sans-serif !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #a90c3c;
}

.sticky-wrapper {
    background-color: #34151f;
}

.indicadores-title {
    color: #a90c3c;
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
}

i.icon-filter {
    color: black !important;
    font-size: 1.5rem;
    vertical-align: top;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

i.icon-gear {
    font-size: 1.8rem;
    background-color: transparent;
    padding: 0;
    padding-right: .35em;
}

.opt-btn {
    color: black !important;
    border-radius: 12px;
    background-color: #ebeef2;
    font-weight: 700;

    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.opt-btn:hover {
    color: white !important;
    background-color: #929599 !important;

    i {
        color: white !important;
        background-color: transparent;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
            border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

.opt-btn:active {
    color: white !important;
    background-color: #929599 !important;

    i {
        color: white !important;
        background-color: transparent;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
            border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

.btn-help{
    margin-left: 10px;
}

.btn-help i {
    font-size: 18px;
}

.icon-download-general{
    color: black !important;
}

.compare-btn {
    color: white;
    background-color: #ab0b3d;
    font-weight: 700;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.compare-btn:hover {
    color: white !important;
    background-color: #78072a !important;
}

.compare-btn:active {
    color: white !important;
    background-color: #78072a !important;
}

.indicadores-container {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    grid-template-rows: auto;
    grid-column-gap: 1.125rem;
    grid-row-gap: 1.125rem;
}

.card-toolbar {
    align-content: flex-start;
    justify-content: flex-end;
}

.card-hidden {
    display: none !important;
}

i.indicador-opt-icon {
    font-size: 1.8rem;
    font-weight: 500;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:hover {
        color: black !important;
    }
}

.popover .popover-header {
    font-weight: bolder;
    text-align: center;
}

/* Estilos del popup de filtrado */
/*ventana de filtrado*/
.destinations-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
}

.zone-accordion {
    display: flex !important;
    flex-direction: row;
    gap: 4px;
    padding: 0 4px;
    user-select: none;
}

/*estilo de los botones de filtrado*/
.btn-close-filter {
    background-color: #78829d1a;
}

.btn-filtrar {
    background-color: #a90c3c;
    color: white;
}
/* Estilos para el popup de opciones de exportación  */
.options-popup .popover-body {
    padding: 0;
}

.export-opt {
    text-align: start;
}
.export-opt:hover {
    background-color: #f2f3f5;
}
/* Estilos para el popup de opciones de exportación fin */
/* Estilos para el mensaje de alerta/confirmación */
.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}
/* Estilos para el mensaje de alerta/confirmación fin */

/* Estilos del popup de filtrado fin*/

/*configuracion del popup de configuración*/
.settings-popup {
    max-width: 650px;
    max-height: 635px;
    overflow-y: auto !important;
    min-width: 370px;

}

.popup-scroll{
    scrollbar-color: var(--bs-scrollbar-hover-color) !important;
}

.destinations-container label {
    font-size: 12px;
}

.indicators-container {
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 60vh;
}

.indicators-container label {
    width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.indicators-container label:hover::before {
    content: attr(title);
    position: absolute;
    z-index: 1;
    background-color: #a90c3c;
    color: #fff;
    padding: 2px;
    border-radius: 5px;
    white-space: normal;
}

.indicators-header, .indicators-footer {
    flex-shrink: 0;
}

.indicadores-container .card-body {
    padding: 0px !important;
}
.indicadores-container .card {
    min-height: 350px !important;
}
/*fin de configuración*/

.apexcharts-menu-item {
    text-align: start;
    padding: 4px auto !important;
    font-size: 10.5px !important;
    font-weight: 600;
}

.container-icons {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    right: 0;
    width: 150px;
    top: 5px;
    background-color: #ffffff;
    padding-top: 20px;
    padding-left: 20px;
    z-index: 1000;
    margin-left: auto;
}

.icon-th,
.icon-th-large,
.icon-stop {
    width: 50px;
    height: 50px;
}

.icon-th::before,
.icon-th-large::before,
.icon-stop::before {
    font-size: 25px;
}

.container-icons span:hover {
    cursor: pointer;
    color: #ab0a3d;
}

/*clases para columnas*/

.indicadores-container-3 {
    grid-template-columns: repeat(3, 1fr);
}

.indicadores-container-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.indicadores-container-1 {
    grid-template-columns: repeat(1, 1fr) !important;
}

/*telefonos*/
@media only screen and (max-width: 600px) {
    .indicadores-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .container-icons {
        display: none;
    }
}

/*tooltip comaprativa*/
.arrow_box {
    position: relative;
    background: #ebeef3;
    border: 2px solid #000000;
    color: #8393b3 !important;
    padding: 5px 10px;
}

.icon-pie-chart,
.icon-bar-chart {
    font-size: 21px !important;
    padding-top: 3px;
    color: #99a1b7;
}

.icon-pie-chart:hover,
icon-bar-chart:hover {
    color: #000000;
}

.pie-chart {
    margin-top: 3px;
}

.bar-chart {
    display: none;
}

.notes-indicator {
    font-size: 10px !important;
    color: #3f3f3f;
}
/*
 * Estilos del contenedor para el mapa
 */
.chartdiv-map {
    width: 480px;
    height: 350px;
    padding: 10px;
}

/*
 * Estilo para centrar el mapa en el contenedor.
 */
.center-map {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 97%;
}
/*
 * Estilos del contenedor para el mapa
 */
#listCountry,
.chartdiv-map {
    display: inline-block;
}

/*
 * Estilos de la imagen de las banderas de los países
 * del mapa.
*/
.imagen {
    width: 35px;
    display: block;
    height: 25px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/*
 * Estilos de las filas en la lista de países
 */
.fila {
    display: block;
    padding: 10px;
}

.columna{
    width: 50%;
    display: inline-grid;
}

/*
 * Estilos para las columnas que muestran los países
 * en los mapas.
 */
.column-country {
    display: flex;
    align-items: center;
    width: 90%;
}

.titulo {
    color: #b5b5c3;
    font-weight: 600;
    font-size: 15px;
    margin-left: 10px;
}

/*
 * Estilos para los valores que se muestran por cada
 * nacionalidad..
 */
.valor {
    margin-left: auto;
    color: #252f4a;
    font-weight: 600;
    font-size: small;
    min-width: 80px !important;
}

#contentmap {
    text-align: center;
}

.fc-daygrid-day{
    height: 200px;
}

/*ocupacion hotelera*/
.ocupacion-hotelera {
    color: red;
    position: absolute;
    padding-top: 32px;
    right: 5px;
    font-weight: 600;
    font-size: 20px;
}

.ocupacion-hotelera-destino {
    position: absolute;
    padding-top: 32px;
    right: 5px;
}

.ocupacion-hotelera-dia {
    padding-top: 32px;
    position: absolute;
    overflow-y: auto;
    width: auto;
}

.fc .fc-daygrid-day-number {
    color: #5b5b5b !important;
}

.fc .fc-col-header-cell-cushion {
    color: #373737 !important;
}
.abrirModal {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: #383838 !important;
}

.td-ocupacion {
    font-weight: 600;
    color: #78829d;
    font-size: 15px;
}

.table-ocupacion table {
    border-collapse: separate;
    border-spacing: 20px;
    margin: 0 auto; /* Centrar el contenido de la tabla. */
}

.table-ocupacion th,
.table-ocupacion td {
    padding-left: 30px !important;
    padding-bottom: 10px;
}

.fc .fc-toolbar.fc-header-toolbar {
    display: none;
}

.card-title {
    display: block !important;
    margin: 20px;
    margin-top: 40px !important;
    text-align: center;
}

.card-title-center {
    margin-top: -90px;
}

.icon-pie-chart-center {
    z-index: 10;
}

.element-tooltip {
    position: relative;
  }

.tooltip {
    visibility: hidden;
    width: 180px;
    background-color: white;
    color: var(--bs-body-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 9999;
    bottom: 110%;
    left: 50%;
    margin-left: -90px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.tooltip .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }

.element-tooltip:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.displaynone {
    display: none;
}
.filters-padding-left {
    padding-left: 13em;
}

.filters-padding-right {
    padding-right: 2.4em;
}

/**
 * Se agrega el media query, para centrar los botones del filtro,
 * indicadores,comparación y mover al final los botones descargar y ayuda.
 * esto cuando la pantalla es de 600px o menos.
 */
@media (max-width: 600px) {
    .filters-padding-left {
        padding: 1em;
    }

    /*Botones Descargar y Ver ayuda*/
    .filters-padding-right {
        padding-left: 0;
        padding-right: 1em;
        justify-content: center;
    }
  }

  /*
   * Estilos para adaptar la tabla de la ocupación en dispositivos
   * móviles, esto para que no se desborde.
   */
  @media (max-width: 599px) {
    .table-ocupacion th,
    .table-ocupacion td {
        padding-left: 0px !important;
        padding-bottom: 0px;
    }

    .table-ocupacion table {
        border-collapse: separate;
        border-spacing: 10px;
    }
  }

  /**
  * Se agrega el media query, para centrar los 3 botones principales y subir
  * el botón de descarga y ver ayuda para que queden en una linea cuando sea horizontal
  * y entre el rango de 601px - 1023px de resolución.
  */
  @media(min-width: 601px) and (max-width: 1023px) and (orientation: landscape){
    .filters-padding-left {
        padding-left: 1em;
        padding-right: 1em;
        justify-content: center;
    }
    /* Subir los botones a la primera fila. */
    .landscape {
        flex: 0 0 auto;
        width: auto;
    }

    .table-ocupacion th,
    .table-ocupacion td {
        padding-left: 10px !important;
        padding-bottom: 0px;
    }

    .table-ocupacion table {
        border-collapse: separate;
        border-spacing: 15px;
        margin: 0 auto;
    }
    /* Elimina el icono para cambiar las gráficas a 3 columnas. */
    .icon-th{
        display: none;
    }
  }

  /**
  * Se agrega el media query para cambiar el tamaño del popup del filtro, esto para que
  * se adapte bien a los dispositivos móviles en modo horizontal.
  */
  @media(min-width: 600px) and (max-width: 1023px) and (orientation: landscape) {
    .popover-body{
        max-height: 200px;
    }
}


/*fin ocupacion*/

.icon-download{
    font-size: 21px !important;
    padding-top: 3px;
    color: #99a1b7;
}

.icon-download:hover,
icon-bar-chart:hover {
    color: #000000;
}

.settings-popup .modal-body{
    max-height: 400px;
}

/*
 * Estilos para los títulos que indican las fechas del
 * cierre de indicadores.
 */
.title-market {
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: #263832;
    word-spacing: 1px;
    font-family: 'Montserrat';
    letter-spacing: normal;
}

.responsive-header {
    padding-left: 40px!important;
    padding-right: 40px!important;
    padding-bottom: 4.175rem!important;
}

.downloadExport{
    font-family: Helvetica !important;
    size: 14 !important;
}

/*
*Estilos para el popup indicadores config inicio
*/
.style-pop-up-indicators {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*
 * Grupo de estilos para alinear la bandera de
 * los países en el tooltip del mapa.
 */
.tooltip-content {
    display: flex;
    align-items: center;
}

.tooltip-content img {
    margin-right: 5px;
    width: 20px;
    height: 22px;
}

.tooltip-content b {
    font-weight: bold;
}
/*
 * Fin del grupo de estilos para alinear la bandera de
 * los países en el tooltip del mapa.
 */

 /*
 * Estilo para agregar el scroll vertical a la tabla de ocupación hotelera.
 */
.scrollable-occupancy {
    max-height: 600px; /* Establece un máximo de altura */
    overflow-y: auto !important; /*Agrega el scroll vertical */
    overflow-x: hidden;
}

 /*
 * Estilo para quitar el scroll de la ocupación y mostrar el contenido completo,
 *esto para la exportación de PDF e IMAGE
 */
.no-scroll-occupancy{
    max-height: none !important;
    overflow-y: visible !important; /* Remueve el scroll vertical */
}