/* ==========================================================================
   Dialogs and sheets: the structure managed by K.dialogs (SPEC 3.7, 8.2). One pattern: a bottom sheet on a phone
   (grab handle, header with a 44px close, scrolling body, sticky footer with safe-area padding, at most two footer
   buttons) and a centred modal from 761px (560px; .dialog--wide 780px for the payment dialogs).
   The CONTENT of a dialog is styled by the slice that owns it, in its own view file:
     review dialog   -> css/view-campana-lanzar.css      call sheet and hand-off -> css/view-llamadas.css
     payment dialogs -> css/view-cuenta.css              confirm dialog          -> nothing extra (this file)
   Prototype rules to bring along: final-proto/css/dialogs.css (.pay*, .pick, .net-grid, .done-panel, .sum*, .sheet-actions, .note-line).
   Not linked yet; link order: after shell.css, before the view files.
   ========================================================================== */
.dialog { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.dialog__scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade var(--t-base) ease-out; }
.dialog__panel { position: relative; width: 100%; max-height: calc(100vh - 12px - var(--safe-t)); max-height: calc(100dvh - 12px - var(--safe-t)); display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3); animation: sheet-in var(--t-slow) var(--ease); }
.dialog__grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 10px auto 0; flex: none; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 8px 10px 20px; flex: none; }
.dialog__title { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.02em; padding-top: 6px; }
.dialog__lead { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.dialog__close { width: 44px; height: 44px; border-radius: 12px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; flex: none; }
.dialog__close:hover { background: var(--wash-2); color: var(--ink); }
.dialog__body { padding: 4px 20px 20px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--sp-5); align-content: start; }
:where(#payModal, #topupContactModal, #campaignReviewModal, #agentHandoffModal) .dialog__body { gap: var(--sp-3); }
:where(.dialog__body) label { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.dialog__foot { flex: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 20px calc(16px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--raised); }
.dialog__foot .btn { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; }     /* S10 round 1: equal widths while they fit, stacked when a long label ("Sí, reemplazar") does not fit at 200% text */
.dialog.is-leaving .dialog__panel { animation: sheet-out var(--t-base) var(--ease) forwards; }
.dialog.is-leaving .dialog__scrim { animation: fade-out var(--t-base) ease-in forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }
@media (min-width: 761px) {
  .dialog { align-items: center; padding: 24px; }
  .dialog__panel { max-width: 560px; border-radius: var(--r-xl); border-bottom: 1px solid var(--line-strong); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  .dialog--wide .dialog__panel { max-width: 780px; }
  .dialog__grab { display: none; }
  .dialog__head { padding-top: 18px; }
  .dialog__foot .btn { flex: 0 1 auto; }
  .dialog__foot { justify-content: flex-end; border-radius: 0 0 var(--r-xl) var(--r-xl); }
  @keyframes sheet-in { from { transform: translateY(16px) scale(.98); opacity: 0; } }
}
body.is-locked { overflow: hidden; }

/* ---------- Short viewports (S10 round 1): the panel scrolls as a whole, so the buttons of the footer can always be reached (the footer used to stay put and the body got a 24 px window) ---------- */
@media (max-height: 520px) {
  .dialog__panel { overflow-y: auto; }
  .dialog__body { overflow: visible; flex: none; }
}