/* Checkout minimalista (AC509, diseño F): hoja de "Ver detalle" con los datos
   del cliente y el resumen (dialog nativo, card-information.php). Escritorio:
   ventana centrada; celular: hoja desde abajo. Textos compactos para que entre
   sin scroll en la mayoría de pantallas. */
.pm-min .pm-sheet {
    width: min(560px, calc(100% - 32px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: var(--pm-ink);
    box-shadow: 0 24px 60px rgba(18, 22, 51, 0.28);
    overflow: auto;
}

/* Navegador sin dialog (Safari < 15.4, Firefox < 98): oculta hasta que
   functions.js le pone open; entonces se ve como bloque en la página */
.pm-min .pm-sheet:not([open]) {
    display: none;
}

.pm-min .pm-sheet[open] {
    display: block;
}

.pm-min .pm-sheet::backdrop {
    background: rgba(18, 22, 51, 0.38);
}

.pm-min .pm-sheet[open] {
    animation: pm-sheet-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pm-sheet-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
}

.pm-min .pm-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 18px;
    background: #fff;
    border-bottom: 1px solid var(--pm-line-2);
}

.pm-min .pm-sheet-head h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
}

.pm-min .pm-sheet-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--pm-page);
    color: var(--pm-ink-2);
    cursor: pointer;
}

.pm-min .pm-sheet-close:hover {
    color: var(--pm-ink);
}

.pm-min .pm-sheet-close:focus-visible {
    outline: 2px solid var(--pm-brand);
    outline-offset: 2px;
}

.pm-min .pm-sheet-close svg {
    width: 16px;
    height: 16px;
}

.pm-min .pm-rows {
    display: grid;
    gap: 14px;
    padding: 12px 18px 18px;
    font-size: 0.8rem;
}

.pm-min .pm-box dl {
    margin: 0;
}

.pm-min .pm-box-title {
    margin: 0 0 2px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pm-muted);
}

.pm-min .pm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--pm-line-2);
}

.pm-min .pm-row dt {
    color: var(--pm-muted);
    font-weight: 500;
}

.pm-min .pm-row dd {
    margin: 0 0 0 12px;
    text-align: right;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.pm-min .pm-box-client .pm-row dd {
    font-weight: 600;
}

.pm-min .pm-row.is-total {
    padding-top: 8px;
    border-bottom: 0;
    font-size: 0.92rem;
    font-weight: 800;
}

.pm-min .pm-row.is-total dt {
    color: var(--pm-ink);
}

/* Celular: hoja pegada abajo, a todo el ancho, con barra de arrastre */
@media (max-width: 575.98px) {
    .pm-min .pm-sheet {
        width: 100%;
        max-width: none;
        max-height: 85vh;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(18, 22, 51, 0.18);
    }

    .pm-min .pm-sheet[open] {
        animation-name: pm-sheet-up;
    }

    .pm-min .pm-sheet-head {
        padding-top: 16px;
    }

    .pm-min .pm-sheet-head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 999px;
        background: var(--pm-line);
    }
}

@keyframes pm-sheet-up {
    from {
        transform: translateY(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-min .pm-sheet[open] {
        animation: none;
    }
}