/* modal */

/*-- AJUSTES GENERALES --*/

/* contenedor principal */
.modal-base,
.modal-large{
    border-radius: .5rem !important;
}

/* header modal */
.modal-base .ui-dialog-titlebar,
.modal-large .ui-dialog-titlebar {
    border: none !important;
    text-align: center;
    font-size: 1.1rem !important;
}

/* titulo */
.modal-base .ui-dialog-titlebar .ui-dialog-title,
.modal-large .ui-dialog-titlebar .ui-dialog-title {
    padding-left: 2rem;
    vertical-align: sub;
}

/* contenedor content modal */
.modal-base .ui-dialog-content,
.modal-large .ui-dialog-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
    align-items: center;
    background-color: var(--color-white-bold) !important;
    padding: 1.5rem !important;
}

/* icono de cerrar modal */
.modal-base .ui-dialog-titlebar-icon,
.modal-base .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-closethick,
.modal-large .ui-dialog-titlebar-icon,
.modal-large .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-closethick{
    font-size: 1.25rem !important;
}

/* ajuste tamaño iconos  */
.modal-base .btn-save-icon,
.modal-base .btn-close-icon,
.modal-large .btn-save-icon,
.modal-large .btn-close-icon{
    width: 4rem;
    height: 4rem;
}

/* transicion al reposicionar centro */
.modal-base,
.modal-large{
    transition: top 0.5s ease, left 0.5s ease, bottom 0.5s ease, right 0.5s ease;
}

/* scrolling */

/* Solo funciona para Firefox */
@-moz-document url-prefix()  {
    .modal-base .ui-dialog-content,
    .modal-large .ui-dialog-content {
        scrollbar-width: thin;
        scrollbar-color: #666 #f1f1f1;
    }
}

/* chromium */

/* Estilo del fondo de la barra de desplazamiento */
.modal-base .ui-dialog-content::-webkit-scrollbar,
.modal-large .ui-dialog-content::-webkit-scrollbar{
    width: 1rem;
    height: 1rem;
}

/* Estilo del track (pista) de la barra de desplazamiento */
.modal-base .ui-dialog-content::-webkit-scrollbar-track,
.modal-large .ui-dialog-content::-webkit-scrollbar-track{
    border-radius: 0 .5rem .5rem 0 !important;
    background-color: var(--color-white-bold); /* Color de fondo de la pista */
}

/* Estilo del thumb (el bloque que se mueve dentro de la barra) */
.modal-base .ui-dialog-content::-webkit-scrollbar-thumb,
.modal-large .ui-dialog-content::-webkit-scrollbar-thumb {
    background-color: #777; /* Color del bloque */
    border-radius: 1rem; /* Bordes redondeados */
    border: 3px solid var(--color-white-bold); /* Borde del bloque */
}

/* Estilo del thumb al hacer hover */
.modal-base .ui-dialog-content::-webkit-scrollbar-thumb:hover,
.modal-large .ui-dialog-content::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cambia el color al pasar el cursor */
}

/*-- AJUSTES ESPECIFICOS --*/

/* Tamaño base */

.modal-base{
    max-height: 70vh !important;
    max-width: 60% !important;
    min-width: 40% !important;
    min-height: 20vh !important;
}

/* ajuste res pantalla */
@media (max-width: 1440px) {
    .modal-base{
        max-width: 70% !important;
        min-width: 50% !important;
    }
}

@media (max-width: 1024px) {
    .modal-base{
        max-width: 80% !important;
        min-width: 60% !important;
    }
}

@media (max-width: 640px) {
    .modal-base{
        max-width: 90% !important;
        min-width: 80% !important;
    }
}

.modal-base .ui-dialog-content{
    max-height: 60vh;
    min-height: 20vh;
}

/* Tamaño large */

.modal-large{
    max-height: 85vh !important;
    max-width: 80% !important;
    min-width: 50% !important;
    min-height: 25vh !important;
}

/* ajuste res pantalla */
@media (max-width: 1440px) {
    .modal-large{
        max-width: 90% !important;
        min-width: 55% !important;
    }
}

@media (max-width: 1024px) {
    .modal-large{
        max-width: 100% !important;
        min-width: 70% !important;
    }
}

@media (max-width: 640px) {
    .modal-large{
        min-width: 80% !important;
    }
}

.modal-large .ui-dialog-content{
    max-height: 75vh;
    min-height: 20vh;
}

/* modificador para contenido pequeño dentro de un modal */
.modal-small-content .ui-dialog-content{
    min-height: fit-content !important;
}

/* color gris */

/* header modal */
.modal-grey .ui-dialog-titlebar{
    background: var(--color-grey) !important;
    color: var(--color-light-grey) !important;
}

/* icono de cerrar modal */
.modal-grey .ui-dialog-titlebar-icon,
.modal-grey .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon-closethick{
    color: var(--color-strong-error) !important;
}