/*
|--------------------------------------------------------------------------
| Matec Design System - Popup / Modal
|--------------------------------------------------------------------------
| Componente global reutilizable.
|
| Uso recomendado:
|
| <div class="mtc-popup" data-mtc-popup>
|   <div class="mtc-popup__dialog">
|     <button class="mtc-popup__close" data-mtc-close>...</button>
|     <div class="mtc-popup__body">...</div>
|   </div>
| </div>
|
| Estado:
| .is-open
|--------------------------------------------------------------------------
*/

.mtc-popup {
    position: fixed;
    inset: 0;
    z-index: var(--mtc-z-popup, 10000);

    display: grid;
    place-items: center;

    padding: var(--mtc-space-5, 20px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity var(--mtc-transition-panel, 280ms ease),
        visibility var(--mtc-transition-panel, 280ms ease);
}

.mtc-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/*
|--------------------------------------------------------------------------
| Dialog
|--------------------------------------------------------------------------
*/

.mtc-popup__dialog {
    position: relative;
    z-index: 2;

    width: min(var(--mtc-popup-width, 560px), 100%);
    max-height: min(760px, 90vh);
    max-height: min(760px, 90dvh);

    padding: var(--mtc-popup-padding, var(--mtc-space-8, 40px));

    background: var(--mtc-color-popup-bg, var(--mtc-color-surface, #ffffff));
    color: var(--mtc-color-popup-text, var(--mtc-color-text, #1c1c1b));

    border-radius: var(--mtc-popup-radius, var(--mtc-radius-2xl, 24px));
    box-shadow: var(--mtc-shadow-2xl, 0 24px 80px rgba(0, 0, 0, 0.22));

    overflow-y: auto;
    overscroll-behavior: contain;

    opacity: 0;
    transform: translateY(16px) scale(0.98);

    transition:
        opacity var(--mtc-transition-panel, 280ms ease),
        transform var(--mtc-transition-panel, 280ms ease);
}

.mtc-popup.is-open .mtc-popup__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*
|--------------------------------------------------------------------------
| Sizes
|--------------------------------------------------------------------------
*/

.mtc-popup--sm {
    --mtc-popup-width: 420px;
}

.mtc-popup--md {
    --mtc-popup-width: 560px;
}

.mtc-popup--lg {
    --mtc-popup-width: 720px;
}

.mtc-popup--xl {
    --mtc-popup-width: 920px;
}

.mtc-popup--full {
    --mtc-popup-width: 100%;

    padding: var(--mtc-space-4, 16px);
}

.mtc-popup--full .mtc-popup__dialog {
    width: 100%;
    height: 100%;
    max-height: none;
}

/*
|--------------------------------------------------------------------------
| Position modifiers
|--------------------------------------------------------------------------
*/

.mtc-popup--top {
    place-items: start center;
}

.mtc-popup--bottom {
    place-items: end center;
}

.mtc-popup--bottom .mtc-popup__dialog {
    border-radius:
        var(--mtc-radius-2xl, 24px)
        var(--mtc-radius-2xl, 24px)
        var(--mtc-radius-lg, 16px)
        var(--mtc-radius-lg, 16px);
}

/*
|--------------------------------------------------------------------------
| Layout
|--------------------------------------------------------------------------
*/

.mtc-popup__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mtc-space-4, 16px);

    margin-bottom: var(--mtc-space-5, 20px);
}

.mtc-popup__content {
    min-width: 0;
}

.mtc-popup__eyebrow {
    display: inline-block;

    margin-bottom: var(--mtc-space-2, 8px);

    color: var(--mtc-color-text-muted, currentColor);
    opacity: 0.65;

    font-size: var(--mtc-font-size-xs, 12px);
    font-weight: var(--mtc-font-weight-semibold, 600);
    line-height: 1;
    letter-spacing: var(--mtc-letter-spacing-wide, 0.08em);
    text-transform: uppercase;
}

.mtc-popup__title {
    margin: 0;

    font-family: var(--mtc-font-family-heading, inherit);
    font-size: var(--mtc-font-size-2xl, 28px);
    font-weight: var(--mtc-font-weight-bold, 700);
    line-height: var(--mtc-line-height-tight, 1.15);
}

.mtc-popup__description {
    margin: var(--mtc-space-3, 12px) 0 0;

    color: var(--mtc-color-text-muted, currentColor);

    font-size: var(--mtc-font-size-base, 15px);
    line-height: var(--mtc-line-height-base, 1.55);
}

.mtc-popup__body {
    display: grid;
    gap: var(--mtc-space-5, 20px);
}

.mtc-popup__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mtc-space-3, 12px);

    margin-top: var(--mtc-space-8, 40px);
    padding-top: var(--mtc-space-5, 20px);

    border-top: 1px solid var(--mtc-color-border-subtle, rgba(0, 0, 0, 0.08));
}

/*
|--------------------------------------------------------------------------
| Close button
|--------------------------------------------------------------------------
*/

.mtc-popup__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: var(--mtc-size-icon-button, 44px);
    height: var(--mtc-size-icon-button, 44px);

    padding: 0;
    border: 0;
    border-radius: var(--mtc-radius-pill, 999px);

    background: transparent;
    color: currentColor;

    cursor: pointer;

    transition:
        background-color var(--mtc-transition-fast, 180ms ease),
        transform var(--mtc-transition-fast, 180ms ease),
        opacity var(--mtc-transition-fast, 180ms ease);
}

.mtc-popup__close:hover {
    background: var(--mtc-color-muted, rgba(0, 0, 0, 0.06));
    transform: rotate(4deg);
}

.mtc-popup__close:focus-visible {
    outline: 2px solid var(--mtc-color-focus, currentColor);
    outline-offset: 3px;
}

.mtc-popup__close svg {
    display: block;
    width: 22px;
    height: 22px;
}

/*
|--------------------------------------------------------------------------
| Media
|--------------------------------------------------------------------------
*/

.mtc-popup__media {
    overflow: hidden;
    border-radius: var(--mtc-radius-xl, 18px);
    background: var(--mtc-color-surface-muted, #f7f7f7);
}

.mtc-popup__media img,
.mtc-popup__media video,
.mtc-popup__media iframe {
    display: block;
    width: 100%;
}

.mtc-popup__media img,
.mtc-popup__media video {
    height: auto;
    object-fit: cover;
}

/*
|--------------------------------------------------------------------------
| Variants
|--------------------------------------------------------------------------
*/

.mtc-popup--commerce .mtc-popup__dialog {
    border: 1px solid var(--mtc-color-buy-soft, rgba(0, 0, 0, 0.08));
}

.mtc-popup--success .mtc-popup__dialog {
    border: 1px solid var(--mtc-color-success-soft, rgba(0, 128, 0, 0.18));
}

.mtc-popup--warning .mtc-popup__dialog {
    border: 1px solid var(--mtc-color-warning-soft, rgba(255, 170, 0, 0.22));
}

.mtc-popup--danger .mtc-popup__dialog {
    border: 1px solid var(--mtc-color-danger-soft, rgba(255, 0, 0, 0.18));
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    .mtc-popup {
        padding: var(--mtc-space-4, 16px);
    }

    .mtc-popup__dialog {
        --mtc-popup-padding: var(--mtc-space-5, 20px);

        max-height: 92vh;
        max-height: 92dvh;

        border-radius: var(--mtc-radius-xl, 18px);
    }

    .mtc-popup__title {
        font-size: var(--mtc-font-size-xl, 24px);
    }

    .mtc-popup__footer {
        display: grid;
        justify-content: stretch;
    }

    .mtc-popup--bottom {
        padding: 0;
        place-items: end center;
    }

    .mtc-popup--bottom .mtc-popup__dialog {
        width: 100%;
        max-height: 90vh;
        max-height: 90dvh;

        border-radius:
            var(--mtc-radius-2xl, 24px)
            var(--mtc-radius-2xl, 24px)
            0
            0;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .mtc-popup,
    .mtc-popup__dialog {
        transition-duration: 1ms !important;
    }
}