/*=========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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0 15px;
    background-color: #26662177;
    font-size: 16px;
    border-radius: 20px;
    color: var(--white);
    border: none;
    outline: none;
    margin-left: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.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 !important;       /* Ajusta el tamaño del círculo rojo */
    position: relative;
    left: 5px;
    top: -8px;
    
}
.dropdown-menu .dropdown-item i{
    margin-right: 0 !important;
}
/* botones rechazar y aceptar */
.buttons-create,
.buttons-closee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    width: auto;
    min-width: 130px;
    padding: 0 1.5rem;
    font-size: 16px;
    border-radius: 1.8rem;
    color: var(--white) !important;
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}
.buttons-create { background-color: #9E8BFF; }
.buttons-closee { background-color: #A77CD3; }
.buttons-create:hover,
.buttons-closee:hover,
.buttons-closee:active {
    background-color: var(--lilac);
}
.buttons-create:active {
    background-color: #9E8BFF;
    transform: none;
}
.buttons-create i,
.buttons-closee i {
    font-size: 18px; 
    margin: 0;
}
.btn-back {
    margin-bottom: 30px;
}
/* boton terminar */
.btn-amarillo {
    background-color: #e9ad3e !important;
}
.btn-amarillo:hover, 
.btn-amarillo:active {
    background-color: #e9ad3e !important;
}
/* boton guardar */
.btn-verde {
    background-color: #88b855 !important;
}
.btn-verde:hover, 
.btn-verde:active {
    background-color: #7aa54c !important;
}

.btn-rojo {
    background-color: #e74c3c !important; 
}
.btn-rojo:hover, 
.btn-rojo:active {
    background-color: #c0392b !important;
}

/* botón ver interior */
.buttons-select {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 35px !important;
    width: 4.1rem !important;
    padding: 0 !important;
    font-size: 16px !important;
    border-radius: 1.8rem !important;
    color: var(--white) !important;
    background-color: var(--bluishViolet) !important;
    border: none !important;
    outline: none !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease;
}

.buttons-select:hover,
.buttons-select:active {
    background-color: var(--lilac) !important;
    color: var(--white) !important;
}
.buttons-select.w-auto {
    height: 40px !important;
    width: auto !important;
    padding: 0 1.5rem !important;
}
 /* botón resultado interior */
.buttons-resultado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 4.1rem;
    padding: 0;
    font-size: 16px;
    border-radius: 1.8rem;
    color: var(--white);
    background-color: #db83c2;
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.buttons-resultado:hover,
.buttons-resultado:active {
    color: var(--white);
    background-color: #eb99d3;
}
/* botón ver informe interior */
.buttons-informe {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 435x !important;
    width: 4.1rem !important;
    padding: 0 !important;
    font-size: 16px !important;
    border-radius: 1.8rem !important;
    color: var(--white) !important;
    background-color: #7294e0 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease;
}

.buttons-informe:hover,
.buttons-informe:active {
    color: var(--white) !important;
    background-color: #90ace9 !important;
}
.buttons-informe.w-auto {
    height: 40px !important;
    width: auto !important;
    padding: 0 1.5rem !important;
    white-space: nowrap !important;
}
/* botón compartido interior */
.buttons-accion-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px; 
    width: 4.1rem; 
    padding: 0;
    border-radius: 1.8rem;
    color: var(--white) !important;
    background-color: #88b855c7;
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.buttons-accion-ok:hover,
.buttons-accion-ok:active {
    background-color: #7aa54c; 
}
.buttons-accion-ok i {
    font-size: 20px !important; 
    margin: 0; 
}
.buttons-accion-ok.disabled {
    cursor: not-allowed;
}

.buttons-pdf,
.buttons-link,
.buttons-ok,
.buttons-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 4.1rem;
    padding: 0;
    font-size: 16px;
    border-radius: 1.8rem;
    color: var(--white) !important;
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

/* Colores originales */
.buttons-pdf { background-color: #e04b4bc7; }
.buttons-link { background-color: #4473c4c2; }
.buttons-ok { background-color: #88b855c7; }
.buttons-save { background-color: #e9ad3eef; }

/* Efectos Hover */
.buttons-pdf:hover, .buttons-pdf:active { background-color: #e04b4baf; }
.buttons-link:hover, .buttons-link:active { background-color: #4473c49f; }
.buttons-ok:hover, .buttons-ok:active { background-color: #7aa54c; }
.buttons-save:hover, .buttons-save:active { background-color: #e9ad3ec7; }

/* botones para el informe de la IA */
.buttons-pdf i, 
.buttons-link i,
.buttons-ok i,
.buttons-save i {
    font-size: 20px !important;
    margin: 0 !important;
}
.buttons-pdf.w-auto,
.buttons-link.w-auto,
.buttons-ok.w-auto,
.buttons-save.w-auto {
    height: 40px;
    width: auto !important;
    padding: 0 1.5rem !important;
    font-size: 16px !important;
}
.buttons-ok.w-auto i,
.buttons-save.w-auto i {
    font-size: 26px !important; 
    margin-right: 5px !important; 
}
strong, b {
    display: inline;
    font-weight: bold;
}

/*=========INSTITUTION============*/
/*botón borrador */
.text-info-ok, 
.text-info, 
.text-info-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px; 
    padding: 0 25px; 
    font-size: 16px !important;
    border-radius: 20px;
    color: var(--white) !important;
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap; 
}
.text-info-ok { background-color: #88b855c7; }
.text-info { background-color: #4473c4c2; }
.text-info-save { background-color: #e9ad3ec7; }

/*botón borrador/finalizado/compartido en estado */
.buttons-interior-link,
.buttons-interior-ok,
.buttons-interior-ver,
.buttons-interior-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 125px !important;
    padding: 0; 
    font-size: 16px !important; 
    font-weight: normal !important; 
    border-radius: 1.8rem;
    color: var(--white) !important;
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
.buttons-interior-link { background-color: #4473c4c2; }
.buttons-interior-ok { background-color: #88b855c7; }
.buttons-interior-save { background-color: #e9ad3eef; }
.buttons-interior-ver { background-color: var(--bluishViolet); }
.buttons-interior-save i {
    font-size: 20px !important;
    margin-right: 5px;
}
.buttons-interior-link:hover, .buttons-interior-link:active { background-color: #4473c49f; }
.buttons-interior-ok:hover, .buttons-interior-ok:active { background-color: #7aa54c; }
.buttons-interior-save:hover, .buttons-interior-save:active { background-color: #e9ad3ec7; }
.buttons-interior-ver:hover, .buttons-interior-ver:active { background-color: var(--lilac); }

/* botón evaluación pendiente */
.label-pend-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 4.1rem;
    padding: 0;
    font-size: 16px;
    border-radius: 1.8rem;
    color: var(--white);
    background-color: rgb(241, 168, 59);
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
.label-pend-select:hover,
.label-pend-select:active {
    background-color: rgb(221, 148, 39);
    color: var(--white);
}


.button-eliminar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 4.1rem !important; 
    padding: 0 !important; 
    font-size: 16px;
    font-weight: normal;
    border-radius: 1.8rem;
    color: #fff !important;
    background-color: #e74c3c;
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
/*botón eliminar*/

.button-eliminar:hover, 
.button-eliminar:focus,
.button-eliminar:active {
    color: #fff !important;
    background-color: #ff6151;
}
.button-eliminar.w-auto {
    width: auto !important;
    padding: 0 15px !important;
    white-space: nowrap !important;
}
@media (max-width: 991.98px) {
    .button-eliminar.w-auto,
    .buttons-select.w-auto,
    .buttons-informe.w-auto {
        width: 4.1rem !important;
        padding: 0 !important;
        justify-content: center !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(221, 80, 80);
}
.label-mas{
    border: none;
    border-radius: 25px;
    padding: 5px 11px;
    font-size: 1rem;
    color: var(--white);
    background-color: #88b855c7;
}
.label-elim{
    border: none;
    border-radius: 25px;
    padding: 5px 11px;
    font-size: 1rem;
    color: var(--white);
    background-color: rgb(221, 80, 80);
}
.label-mas:hover{
    background-color: #7ba054c7;
}
.label-elim:hover{
    background-color: rgb(228, 106, 106);
}

/*=========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; }
.text-ocupado { color: #dc3545 !important; font-weight: 600; }   
.text-agendada { color: #ddaf26 !important; font-weight: 600; }  



/* 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 */
}
/* Color de la flecha fijada abajo a la derecha (para subir rapido) */
.progress-wrap svg .progress {
    stroke:#9E8BFF !important;
}
/* botón asignar */
.button-asignar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 35px !important;
    width: 6rem !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    border-radius: 1.8rem !important;
    color: var(--white) !important;
    background-color: var(--bluishViolet) !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease;
}

.button-asignar:hover,
.button-asignar:active {
    color: var(--white) !important;
    background-color: var(--lilac) !important;
}
/* botón desasignar*/
.button-desasignar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 7.5rem;
    padding: 0;
    font-size: 16px;
    font-weight: normal !important;
    border-radius: 1.8rem;
    color: var(--white);
    background-color: var(--bluishViolet);
    border: none;
    outline: none;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.button-desasignar:hover,
.button-desasignar:active {
    color: var(--white);
    background-color: var(--lilac);
}
/* botones de alerta */
.swal2-actions {
    gap: 15px !important;
}
.swal-btn-ancho {
    min-width: 175px !important; 
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important; 
    margin: 0 !important;
}

/* Modificador para botón rojo (Rechazar) */
.btn-rechazar {
    background-color: #e74c3c !important; /* Rojo estilo alerta */
}
.btn-rojo:hover, 
.btn-rojo:active {
    background-color: #c0392b !important;
}

/* botón pendiente naranja */
.button-pendiente {
    background-color: #fd7e14 !important;
}