/*
==========================================
PM UI Framework
Modals
Version: 0.1.0
==========================================
*/


/* ==========================================
   MODAL OVERLAY
========================================== */

.pm-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 1rem;

    background: rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(4px);
}


/* Modal activo */

.pm-modal.is-active {
    display: flex;
}


/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */

.pm-modal__dialog {

    width: 100%;
    max-width: 520px;

    background: #ffffff;

    border-radius: var(--pm-radius-lg);

    box-shadow: var(--pm-shadow-lg);

    overflow: hidden;

    animation: pm-modal-enter .25s ease;
}


/* Animación entrada */

@keyframes pm-modal-enter {

    from {

        opacity: 0;
        transform: translateY(-20px) scale(.96);

    }

    to {

        opacity: 1;
        transform: translateY(0) scale(1);

    }

}

/* ==========================================
   MODAL HEADER
========================================== */

.pm-modal__header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--pm-border-color);

}


/* Título */

.pm-modal__title {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--pm-text-color);

    line-height: 1.3;

}


/* ==========================================
   BOTÓN CERRAR
========================================== */

.pm-modal__close {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: none;

    border-radius: var(--pm-radius-full);

    background: transparent;

    color: var(--pm-text-muted);

    font-size: 1.5rem;

    cursor: pointer;

    transition: 
        background .2s ease,
        color .2s ease;

}


.pm-modal__close:hover {

    background: var(--pm-gray-100);

    color: var(--pm-text-color);

}


/* ==========================================
   MODAL BODY
========================================== */

.pm-modal__body {

    padding: 1.5rem;

    color: var(--pm-text-color);

    font-size: 1rem;

    line-height: 1.6;

}

/* ==========================================
   MODAL FOOTER
========================================== */

.pm-modal__footer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: .75rem;

    padding: 1.25rem 1.5rem;

    border-top: 1px solid var(--pm-border-color);

    background: var(--pm-gray-50);

}


/* ==========================================
   FOOTER VARIACIONES
========================================== */


/* Centrado */

.pm-modal__footer--center {

    justify-content: center;

}


/* Distribuido */

.pm-modal__footer--between {

    justify-content: space-between;

}


/* Inicio */

.pm-modal__footer--start {

    justify-content: flex-start;

}


/* ==========================================
   MODAL ACCIONES
========================================== */

.pm-modal__actions {

    display: flex;

    align-items: center;

    gap: .75rem;

    flex-wrap: wrap;

}


/* Botones dentro del modal */

.pm-modal .pm-btn {

    min-width: 120px;

}


/* ==========================================
   MODAL SIN FOOTER
========================================== */

.pm-modal__body--compact {

    padding: 1rem 1.5rem;

}

/* ==========================================
   MODAL SIZES
========================================== */


/* Pequeño */

.pm-modal--sm .pm-modal__dialog {

    max-width: 360px;

}


/* Estándar */

.pm-modal--md .pm-modal__dialog {

    max-width: 520px;

}


/* Grande */

.pm-modal--lg .pm-modal__dialog {

    max-width: 760px;

}


/* Extra grande */

.pm-modal--xl .pm-modal__dialog {

    max-width: 1000px;

}


/* Pantalla completa */

.pm-modal--fullscreen {

    padding: 0;

}


.pm-modal--fullscreen .pm-modal__dialog {

    width: 100%;

    max-width: none;

    height: 100%;

    border-radius: 0;

}



/* ==========================================
   MODAL SCROLL
========================================== */

.pm-modal__body {

    overflow-y: auto;

    max-height: 60vh;

}


/* ==========================================
   RESPONSIVE MOBILE
========================================== */

@media (max-width: 576px) {


    .pm-modal {

        padding: .75rem;

    }


    .pm-modal__dialog {

        max-width: 100%;

        border-radius: var(--pm-radius-md);

    }


    .pm-modal__header {

        padding: 1rem;

    }


    .pm-modal__body {

        padding: 1rem;

        max-height: 70vh;

    }


    .pm-modal__footer {

        padding: 1rem;

        flex-direction: column;

        align-items: stretch;

    }


    .pm-modal__footer .pm-btn {

        width: 100%;

    }


}

/* ==========================================
   MODAL STATES
========================================== */


/* Modal de éxito */

.pm-modal--success .pm-modal__header {

    background: rgba(46, 125, 50, .08);

}


.pm-modal--success .pm-modal__title {

    color: var(--pm-success);

}


/* Modal de advertencia */

.pm-modal--warning .pm-modal__header {

    background: rgba(255, 193, 7, .12);

}


.pm-modal--warning .pm-modal__title {

    color: #b28704;

}


/* Modal de error */

.pm-modal--danger .pm-modal__header {

    background: rgba(211, 47, 47, .08);

}


.pm-modal--danger .pm-modal__title {

    color: var(--pm-danger);

}



/* ==========================================
   MODAL CONFIRMATION
========================================== */

.pm-modal--confirm .pm-modal__dialog {

    max-width: 420px;

    text-align: center;

}


.pm-modal--confirm .pm-modal__header {

    justify-content: center;

}


.pm-modal--confirm .pm-modal__footer {

    justify-content: center;

}



/* ==========================================
   MODAL PRODUCT
========================================== */

.pm-modal--product .pm-modal__dialog {

    max-width: 680px;

}


.pm-modal--product .pm-modal__body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    align-items: center;

}



/* ==========================================
   ACCESIBILIDAD
========================================== */

.pm-modal[aria-hidden="true"] {

    display: none;

}


.pm-modal[aria-hidden="false"] {

    display: flex;

}



.pm-modal__close:focus-visible {

    outline: 3px solid var(--pm-secondary);

    outline-offset: 2px;

}



/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {


    .pm-modal__dialog {

        animation: none;

    }


}


/* ==========================================
   MOBILE PRODUCT MODAL
========================================== */

@media (max-width: 768px) {


    .pm-modal--product .pm-modal__body {

        grid-template-columns: 1fr;

    }


}