/*=========ASSIGN/TAKE OUT USER============*/
.card-tot-users{
    background-color: #efe4f8 !important;
}
.bg-primary{
    background-color: #d37a7a96 !important;
}
.bg-info{
    background-color: #66b46696 !important;
}

#buscador-input, #registros-select{
    border-radius: 10px !important;
    border: var(--gray) 1px solid;
}
#registros-select:active{
    border: var(--violet) !important;
}

.import-group{
    align-items: center !important;
    margin-bottom: 0 !important; }
.table-light tr th{
    background-color: #cc9ffa2d !important;
    color: #8e809e !important;
    font-weight: bold !important;
}
.buttons{
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--bluishViolet);
}
.buttons:hover {
    color: var(--white);
    background-color: var(--lilac);
}
.buttons:active{
    color: var(--white) !important;
    background-color: var(--bluishViolet) !important;
}
.buttons-sec{
    border: 2px solid var(--bluishViolet) !important;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500 !important;
    color: var(--bluishViolet) !important;
}
.buttons-sec:hover{
    color: var(--white) !important;
    border: 2px solid var(--lilac) !important;
    background-color: var(--lilac) !important;
    transform: none !important;
}
.text-regist {
    margin-left: 20px;
    margin-bottom: 20px;
}



/*=========CREATE USER============*/



#textDiagnosis, 
#textReason {
    width: 100%;
    min-height: 150px; 
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
}
.button-notif{
    background: #26662177;
    border: none !important;
    outline: none !important;
    padding: 8px 15px;
    font-size: 1rem !important;
    border-radius: 20px;
    color: var(--white);
    margin-left: 5px;
}
.ri-circle-fill{
    color: red;
    border: 1px solid white; /* Un borde un poco más grueso para que resalte */
    border-radius: 50%;      /* Esto quita las esquinas cuadradas */
    font-size: 0.5rem;       /* Ajusta el tamaño del círculo rojo */
    position: relative;
    left: 5px;
    top: -8px;
    
}
.buttons-create{
    border: none;
    border-radius: 25px;
    padding: 10px 40px;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--bluishViolet);
}
.buttons-create:hover {
    color: var(--white) !important;
    background-color: var(--lilac) !important;
}
.buttons-create:active{
    color: var(--white) !important;
    transform: none !important;
    background-color: var(--bluishViolet) !important;
}

.buttons-closee{
    border: none;
    border-radius: 25px;
    padding: 10px 40px;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--violet);
}
.buttons-closee:hover {
    color: var(--white) !important;
    background-color: var(--lilac) !important;
}
.btn-back{
    margin-bottom: 30px !important;
}
.buttons-select{
    border: none !important;
    outline: none !important;
    padding: 8px 25px;
    font-size: 0.9rem !important;
    border-radius: 20px;
    color: var(--white);
    background-color: var(--bluishViolet) ;
}
.buttons-select:hover{
    color: var(--white) !important;
    background-color: var(--lilac) !important;
}
.buttons-select:active{
    color: var(--white) !important;
    background-color: var(--lilac) !important;
}
.label-yes, .label-no, .label-pend{
    font-weight: normal;
    padding: 8px 25px;
    font-size: 1rem;
    color: var(--white);
    border-radius: 20px;    
}
.label-pend{
    border: none;
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 1rem;
    color: var(--white);
    background-color: rgb(241, 168, 59);
}
.label-no{
    border: none;
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 1rem;
    color: var(--white);
    background-color: rgb(247, 79, 79);
}
/*=========CREATE PROFESSIONAL============*/

/*=========PERFIL USAURIO============*/
.p-us span{
    font-size: 1.03rem !important;
}
.p-us-lab label{
    font-size: 1.03rem !important;
}

/*=========PERFIL PROFESIONAL============*/
/* Colores de texto según estado */
.text-disponible { color: #28a745 !important; font-weight: 600; } /* Verde */
.text-ocupado { color: #dc3545 !important; font-weight: 600; }    /* Rojo */
.text-agendada { color: #ddaf26 !important; font-weight: 600; }   /* Amarillo/Naranja */



/* Estilo para los botones de navegación del calendario */
.btn-calendar-nav {
    background-color: transparent !important;
    color: var(--bluishViolet) !important;
    border: 1.5px solid var(--bluishViolet) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    transition: all 0.2s ease-in-out;
}

.btn-calendar-nav:hover {
    background-color: var(--bluishViolet) !important;
    color: #ffffff !important;
}


/*======================================================*/
/*========= SOLUCIÓN DE POSICIONAMIENTO DEL MODAL ALTO =========*/
/*======================================================*/

#verDetalleRegistroModal .modal-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
    
    margin-top: 3rem !important; 
    margin-bottom: 1rem !important;
    
    max-width: 90% !important;
}

#verDetalleRegistroModal .modal-body {
    max-height: 70vh !important;
    overflow-y: auto !important; 
    max-height: none !important;
}

#verDetalleRegistroModal .modal-content {
    height: auto !important; 
}
/*======================================================*/
/*========= CONTROL DE ANCHO DEL MODAL EN PC =========*/
/*======================================================*/

@media (min-width: 992px) {
    #verDetalleRegistroModal .modal-dialog {
        max-width: 1000px !important; 
        
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

#verDetalleRegistroModal .modal-dialog {
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
}

#verDetalleRegistroModal .modal-body {
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/*======================================================*/
/*========= SOLUCIÓN POSICIONAMIENTO MODAL #detalleSesionModal =========*/
/*======================================================*/

/* 1. POSICIONAMIENTO Y CENTRADO HORIZONTAL DEL DIÁLOGO */
#detalleSesionModal .modal-dialog {
    margin-top: 3rem !important; 
    margin-bottom: 1rem !important;
    
    margin-left: auto !important;
    margin-right: auto !important;
    
    max-width: 800px !important; 
}

#detalleSesionModal .modal-content {
    height: auto !important; 
}

#detalleSesionModal .modal-body {
    max-height: 70vh !important; 
    overflow-y: auto !important; 
}

.modal.fade {
    padding-top: 0 !important; 
}

/*========= SWEETALERT2 =========*/
.swal2-actions .buttons-create {
    border: none !important; 
    outline: none !important;
}
/* Ajuste para que la tarjeta no empuje el footer si hay poco contenido */
.role-button {
    border-radius: 10px !important;
    border-width: 1.5px !important;
    transition: transform 0.2s, background-color 0.2s;
}

.role-button:hover {
    transform: translateY(-2px);
    background-color: rgba(var(--vz-primary-rgb), 0.05);
}

/* Evita que el container sea más alto que la pantalla */
.flex-grow-1 {
    min-height: calc(100vh - 150px); /* Resta la altura aproximada de header + footer */
}