/* Estilos específicos para esta sección */

.col-12 {
    width: 100%;
}

.md\:col-6 {
    width: 50%;
}

.lg\:col-3 {
    width: 33.33333%;
}

.overview-box {
    display: flex;
    flex-direction: row; /* Cambiado a fila para alinear elementos en una fila */
    align-items: center; /* Alinea verticalmente */
    padding: 20px;
    margin: 10px;
    text-align: center;
    border-radius: 10px;
    background-color: #0080db; /* Color de fondo */
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.overview-box-content {
    flex: 1; /* Hace que el contenido ocupe todo el espacio disponible */
}

.overview-box-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.overview-box-value {
    font-size: 24px;
    margin-bottom: 10px;
}

.overview-box-icons {
    display: flex;
    flex-direction: column; /* Alinea los iconos en una columna */
    margin-right: 10px; /* Ajusta el margen derecho para separar de la tarjeta */
}

.overview-box-icon {
    margin-bottom: 10px; /* Espaciado entre los iconos */
}

.disponible {
    background-color: #16b97e;
}

.pendiente {
    background-color: #fd5689;
}

.ocupado {
    background-color: #f5a930;
}

.notification-icon {
    display: inline-flex; /* Alinea los elementos en línea y usa flexbox */
    align-items: center; /* Alinea verticalmente en el centro */
    margin-left: 5px; /* Espaciado entre el título y el icono de campana */
}

    .notification-icon i {
        background-color: #fff; /* Color de fondo del icono de campana */
        border-radius: 50%; /* Hace el icono de campana circular */
        padding: 5px; /* Espaciado interno del icono de campana */
        font-size: 20px; /* Tamaño del icono de campana */
    }