/* General Styles */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #e9ecef;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.container-fluid {
    flex: 1;
    background-color: #fff;
    padding: 24px 10px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px 0;
}

.text-blue-hb {
    color: #044586 !important;
}

/* Card Styles */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
    border-top: 2.4px solid #044586;
    display: flex;

}

.card.general {
    border-top: 3px solid #ec0928;
}

.card i {
    padding: 5px 0px;
}

/* Text Styles */
.tiempoespera {
    color: grey;
    font-size: small;
    padding-left: 51px;
}

.personas {
    font-weight: 400;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
}

.personas span {
    font-size: large;
    font-weight: 600;
}

.especialidad {
    all: unset;
    margin: 0px;
    padding: 0px;
    font-size: 24px;
    font-family: 'Rubik', sans-serif;
}

.estimado {
    font-size: 11px;
}

/* Button Styles */
.horasconcurridas {
    cursor: pointer;
}

/* Chart Container */
#chartclinica {
    display: none;
    /* El contenido estar� oculto por defecto */
    margin-top: 10px;
}

/* Preloader Styles */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #ffffff;
    /* Fondo blanco */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Icon Circle Button Styles */
.diasespera {
    display: flex;
    flex-wrap: wrap;
    /* Permitir que los botones se envuelvan en varias l�neas */
    gap: 8px;
    /* Espacio entre botones */
}

.icon-circle {
    width: 20px;
    height: 20px;
    max-width: 20px;
    border-radius: 50%;
    background-color: grey;
    /* Color de fondo */
    color: white;
    /* Color de la letra */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border: none;
    /* Eliminar bordes predeterminados de los botones */
    cursor: pointer;
    /* Cambiar el cursor al pasar sobre los botones */
}

.icon-circle.active,
.icon-circle:hover,
.icon-circle:active {
    background-color: #044586;
    /* Color de fondo para el bot�n activo, hover y al presionar */
    font-weight: bold;
    color: white;
    /* Asegurar que el texto siga siendo blanco */
}

.icon-circle:last-child {
    margin-right: 0;
    /* Eliminar margen del �ltimo bot�n */
}

/* Responsive Layout for Days Buttons */
@media (max-width: 767px) {
    .diasespera {
        width: 100%;
    }

    .diasespera button {
        flex: 1 0 22%;
        /* Hacer que los botones ocupen aproximadamente 22% de ancho en m�viles */
    }

    .diasespera button:nth-child(4n + 1) {
        clear: both;
        /* Iniciar una nueva fila despu�s de cada grupo de 4 botones */
    }

    .especialidad {
        all: unset;
        font-size: 16px;
        text-align: left;
    }

    .personas {
        font-size: 13px;
    }
}

/* Chart Styles */
/*#chLine {
    max-width: 100%;
    max-height: 300px;
    width: 100%;
    height: auto;
}*/


/* Estilo base del bot�n */
#toggleChart_0,
#toggleChart_1,
#toggleChart_2,
#toggleChart_3,
#toggleChart_4,
#toggleChart_5,
#toggleChart_6 {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 8px;
    font-size: small;
    line-height: 1.5;
    border-radius: 0.25rem;
    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;
    margin-right: 8px;
    border: 1px solid transparent;
}

/* Estilo cuando el bot�n est� activo como 'Por hora' (azul) */
.btn-por-hora {
    background-color: #044586;
    border-color: #044586;
}

.btn-por-hora:hover {
    background-color: #0557a6;
    /* Azul m�s claro */
    border-color: #0557a6;
}

/* Estilo cuando el bot�n est� activo como 'Por d�a' (rojo) */
.btn-por-dia {
    background-color: #ec0928;
    border-color: #ec0928;
}

.btn-por-dia:hover {
    background-color: #ff4b5a;
    /* Rojo m�s claro */
    border-color: #ff4b5a;
}

.custom-sub-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


.font-title-especialidades {
    all: unset;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
}


.sub-container-items {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid red;
}


.btn-hb {
    border-radius: 4px;
}

.btn-hb-primary {
    background-color: #044586;
    color: white;
}

.counter {
    font-family: 'Rubik', sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}

.introjs-skipbutton {
    display: none !important;
}


.introjs-tooltip {
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px;
    border: 1px solid #044586 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.customIntroJS .introjs-button {
    background-color: #044586 !important;
    color: white !important;
    text-shadow: none !important;
    border-radius: 4px;
    font-family: 'Rubik', sans-serif;

}

.customIntroJS .introjs-button:hover {
    background-color: #0056b3;
}

.customHighlight {
    box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 0px, rgba(33, 33, 33, 0.5) 0px 0px 0px 4000px !important;
}

.modal-content {
    border-radius: 4px !important;
}

.modal-header {
    border-bottom: none !important;
}

.modal-footer {
    border-top: none !important;
}

.introjs-bullets {
    border-bottom: none !important;
    display: none !important;
}

.introjs-tooltipbuttons {
    border-top: none !important;
}


.icon-graph {
    width: 24px;
    height: 24px;
}

@media (width >=40rem) {
    .container-fluid {
        padding: 20px 15px;
    }

    .icon-graph {
        width: 32px;
        height: 32px;
    }
}