/* viperptt.com · base.css — el sistema de diseño.
 *
 * Tipografía: Inter (la de realptt.mx), alojada aquí.
 * Color: todo sale de las variables --vp-* que Brand::estilo() escribe en el <head>
 * (Admin → Apariencia). Los tonos derivados se calculan con color-mix, así que
 * cambiar UN azul cambia toda la plataforma.
 * Prefijo vp- en todo. Componentes: botones, tarjetas, formularios, tablas,
 * diálogos, avisos, insignias, pestañas, interruptores, vacíos.
 */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --vp-primary:#1162f4; --vp-accent:#22b8f0; --vp-ink:#0a1a3a; --vp-bg:#f3f8ff;
  --vp-ok:#1fb864; --vp-danger:#e5393a; --vp-warn:#f59e0b;

  --vp-p50:  color-mix(in srgb,var(--vp-primary) 7%,#fff);
  --vp-p100: color-mix(in srgb,var(--vp-primary) 13%,#fff);
  --vp-p200: color-mix(in srgb,var(--vp-primary) 26%,#fff);
  --vp-p600: color-mix(in srgb,var(--vp-primary) 86%,#000);
  --vp-p700: color-mix(in srgb,var(--vp-primary) 68%,#000);
  --vp-muted:color-mix(in srgb,var(--vp-ink) 60%,#fff);
  --vp-soft: color-mix(in srgb,var(--vp-ink) 45%,#fff);
  --vp-line: color-mix(in srgb,var(--vp-ink) 11%,#fff);
  --vp-line2:color-mix(in srgb,var(--vp-ink) 6%,#fff);
  --vp-card:#fff;
  --vp-ok-bg:    color-mix(in srgb,var(--vp-ok) 12%,#fff);
  --vp-danger-bg:color-mix(in srgb,var(--vp-danger) 10%,#fff);
  --vp-warn-bg:  color-mix(in srgb,var(--vp-warn) 14%,#fff);

  --vp-r-s:8px; --vp-r:12px; --vp-r-l:20px; --vp-r-xl:28px;
  --vp-sh-1:0 1px 2px rgba(10,26,58,.06),0 1px 3px rgba(10,26,58,.05);
  --vp-sh-2:0 6px 18px -6px rgba(10,26,58,.14),0 2px 6px rgba(10,26,58,.05);
  --vp-sh-3:0 22px 50px -18px rgba(17,98,244,.35),0 6px 16px rgba(10,26,58,.08);
  --vp-nav-h:64px; --vp-side-w:268px; --vp-gut:16px; --vp-wrap:1180px;
  --vp-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--vp-nav-h) + 12px)}
body{margin:0;font:400 16px/1.55 var(--vp-font);color:var(--vp-ink);background:var(--vp-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh;
  overflow-wrap:anywhere}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:900;line-height:1.04;letter-spacing:-.035em}
h2{font-size:clamp(1.55rem,3.4vw,2.35rem);font-weight:900;letter-spacing:-.028em}
h3{font-size:1.15rem}
p{margin:0;text-wrap:pretty}
a{color:var(--vp-primary);text-decoration:none}
a:hover{color:var(--vp-p600)}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
hr{border:0;border-top:1px solid var(--vp-line);margin:0}
:focus-visible{outline:3px solid color-mix(in srgb,var(--vp-primary) 55%,transparent);outline-offset:2px;border-radius:6px}
::selection{background:var(--vp-p200)}
[hidden]{display:none!important}
.vp-ico{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.22em}
.vp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── Estructura ───────────────────────────────────────────────────────────── */
.vp-wrap{width:100%;max-width:var(--vp-wrap);margin-inline:auto;padding-inline:var(--vp-gut)}
.vp-stack{display:grid;gap:var(--g,16px)}
.vp-row{display:flex;align-items:center;gap:var(--g,12px);flex-wrap:wrap}
.vp-grid{display:grid;gap:var(--g,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr))}
.vp-spacer{flex:1}
.vp-muted{color:var(--vp-muted)}
.vp-small{font-size:.875rem}
.vp-xs{font-size:.78rem}
.vp-strong{font-weight:700}
.vp-center{text-align:center}
.vp-nowrap{white-space:nowrap}
.vp-eyebrow,.vp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vp-p700)}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.vp-btn{--bg:var(--vp-primary);--fg:#fff;--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border-radius:var(--vp-r);border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);
  font-weight:650;font-size:.95rem;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .08s,box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.vp-btn:hover{--bg:var(--vp-p600);color:var(--fg);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--vp-primary) 70%,transparent)}
.vp-btn:active{transform:translateY(1px)}
.vp-btn[disabled],.vp-btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.vp-btn--soft{--bg:var(--vp-p100);--fg:var(--vp-p700)}
.vp-btn--soft:hover{--bg:var(--vp-p200);--fg:var(--vp-p700);box-shadow:none}
.vp-btn--ghost{--bg:transparent;--fg:var(--vp-ink);--bd:var(--vp-line)}
.vp-btn--ghost:hover{--bg:var(--vp-p50);--fg:var(--vp-p700);--bd:var(--vp-p200);box-shadow:none}
.vp-btn--white{--bg:#fff;--fg:var(--vp-p700)}
.vp-btn--white:hover{--bg:var(--vp-p50);--fg:var(--vp-p700)}
.vp-btn--danger{--bg:var(--vp-danger)}
.vp-btn--danger:hover{--bg:color-mix(in srgb,var(--vp-danger) 84%,#000)}
.vp-btn--accent{--bg:var(--vp-accent);--fg:var(--vp-ink);font-weight:800}
.vp-btn--accent:hover{--bg:color-mix(in srgb,var(--vp-accent) 86%,#fff);--fg:var(--vp-ink)}
.vp-btn--ok{--bg:var(--vp-ok)}
.vp-btn--ok:hover{--bg:color-mix(in srgb,var(--vp-ok) 84%,#000)}
.vp-btn--sm{min-height:36px;padding:0 14px;font-size:.85rem;border-radius:10px}
.vp-btn--lg{min-height:52px;padding:0 28px;font-size:1.02rem;border-radius:14px}
.vp-btn--block{width:100%}
.vp-btn--icon{width:44px;padding:0}
.vp-btn--icon.vp-btn--sm{width:36px}
.vp-link{color:var(--vp-primary);font-weight:600;background:none;border:0;padding:0}
.vp-link:hover{text-decoration:underline}

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.vp-card{background:var(--vp-card);border:1px solid var(--vp-line);border-radius:var(--vp-r-l);padding:20px;box-shadow:var(--vp-sh-1)}
.vp-card--flat{box-shadow:none}
.vp-card--pad-l{padding:28px}
.vp-card__head{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.vp-card__head h2,.vp-card__head h3{font-size:1.05rem}
.vp-card--tint{background:var(--vp-p50);border-color:var(--vp-p100);box-shadow:none}
.vp-icobox{width:44px;height:44px;border-radius:13px;background:var(--vp-p100);color:var(--vp-primary);display:grid;place-items:center;flex:none;font-size:1.25rem}
.vp-icobox--lg{width:56px;height:56px;border-radius:17px;font-size:1.5rem}

/* ── Formularios ──────────────────────────────────────────────────────────── */
.vp-field{display:grid;gap:6px}
.vp-field>label,.vp-label{font-size:.85rem;font-weight:650;color:var(--vp-ink)}
.vp-help{font-size:.8rem;color:var(--vp-muted)}
.vp-err{font-size:.82rem;color:var(--vp-danger);font-weight:600}
.vp-input,.vp-select,.vp-textarea{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--vp-line);border-radius:var(--vp-r);
  background:#fff;color:var(--vp-ink);font-size:1rem;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.vp-textarea{min-height:110px;resize:vertical;line-height:1.5}
.vp-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235b6b8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.vp-input::placeholder,.vp-textarea::placeholder{color:var(--vp-soft)}
.vp-input:hover,.vp-select:hover,.vp-textarea:hover{border-color:var(--vp-p200)}
.vp-input:focus,.vp-select:focus,.vp-textarea:focus{outline:0;border-color:var(--vp-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--vp-primary) 16%,transparent)}
.vp-input[aria-invalid=true]{border-color:var(--vp-danger)}
.vp-input--sm{min-height:38px;padding:6px 12px;font-size:.92rem}
.vp-input-group{position:relative;display:flex;align-items:center}
.vp-input-group>.vp-ico{position:absolute;left:14px;color:var(--vp-soft);pointer-events:none}
.vp-input-group>.vp-input{padding-left:42px}
.vp-input-group>.vp-input-end{position:absolute;right:6px}
.vp-form-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.vp-check{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;cursor:pointer}
.vp-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--vp-primary);flex:none}
.vp-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.vp-switch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.vp-switch i{width:46px;height:26px;border-radius:99px;background:color-mix(in srgb,var(--vp-ink) 20%,#fff);position:relative;flex:none;transition:background .18s}
.vp-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.vp-switch input:checked+i{background:var(--vp-primary)}
.vp-switch input:checked+i::after{transform:translateX(20px)}
.vp-switch input:focus-visible+i{outline:3px solid color-mix(in srgb,var(--vp-primary) 50%,transparent);outline-offset:2px}
.vp-color{display:flex;align-items:center;gap:10px}
.vp-color input[type=color]{width:52px;height:46px;padding:3px;border:1.5px solid var(--vp-line);border-radius:var(--vp-r);background:#fff;cursor:pointer}

/* ── Insignias, avisos ────────────────────────────────────────────────────── */
.vp-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.76rem;font-weight:700;
  background:var(--vp-p100);color:var(--vp-p700);white-space:nowrap}
.vp-badge--ok{background:var(--vp-ok-bg);color:color-mix(in srgb,var(--vp-ok) 70%,#000)}
.vp-badge--warn{background:var(--vp-warn-bg);color:color-mix(in srgb,var(--vp-warn) 55%,#000)}
.vp-badge--danger{background:var(--vp-danger-bg);color:color-mix(in srgb,var(--vp-danger) 80%,#000)}
.vp-badge--mute{background:var(--vp-line2);color:var(--vp-muted)}
.vp-dot{width:9px;height:9px;border-radius:50%;background:var(--vp-ok);display:inline-block;box-shadow:0 0 0 3px color-mix(in srgb,var(--vp-ok) 25%,transparent)}
.vp-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--vp-r);background:var(--vp-p50);border:1px solid var(--vp-p100);font-size:.92rem}
.vp-alert>.vp-ico{margin-top:2px;color:var(--vp-primary)}
.vp-alert--ok{background:var(--vp-ok-bg);border-color:color-mix(in srgb,var(--vp-ok) 28%,#fff)}
.vp-alert--ok>.vp-ico{color:var(--vp-ok)}
.vp-alert--warn{background:var(--vp-warn-bg);border-color:color-mix(in srgb,var(--vp-warn) 35%,#fff)}
.vp-alert--warn>.vp-ico{color:var(--vp-warn)}
.vp-alert--danger{background:var(--vp-danger-bg);border-color:color-mix(in srgb,var(--vp-danger) 28%,#fff)}
.vp-alert--danger>.vp-ico{color:var(--vp-danger)}

/* ── Pestañas y segmentos ─────────────────────────────────────────────────── */
.vp-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--vp-line)}
.vp-tabs::-webkit-scrollbar{display:none}
.vp-tab{padding:12px 16px;font-weight:650;font-size:.92rem;color:var(--vp-muted);background:none;border:0;border-bottom:3px solid transparent;white-space:nowrap;margin-bottom:-1px}
.vp-tab:hover{color:var(--vp-ink)}
.vp-tab[aria-selected=true],.vp-tab.is-on{color:var(--vp-primary);border-bottom-color:var(--vp-primary)}
.vp-seg{display:inline-flex;background:var(--vp-line2);border-radius:13px;padding:4px;gap:2px}
.vp-seg button,.vp-seg a{border:0;background:none;padding:8px 16px;border-radius:10px;font-weight:650;font-size:.88rem;color:var(--vp-muted);display:inline-flex;align-items:center;gap:6px}
.vp-seg .is-on{background:#fff;color:var(--vp-ink);box-shadow:var(--vp-sh-1)}

/* ── Tablas (en móvil se vuelven tarjetas con data-l) ─────────────────────── */
.vp-tablewrap{overflow-x:auto;border:1px solid var(--vp-line);border-radius:var(--vp-r-l);background:#fff}
.vp-table{width:100%;border-collapse:collapse;font-size:.92rem}
.vp-table th{background:var(--vp-p50);text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--vp-muted);padding:11px 16px;white-space:nowrap;font-weight:700}
.vp-table td{padding:13px 16px;border-top:1px solid var(--vp-line2);vertical-align:middle}
.vp-table tbody tr:hover{background:color-mix(in srgb,var(--vp-primary) 3%,#fff)}
.vp-table .vp-num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .vp-table--cards thead{display:none}
  .vp-table--cards,.vp-table--cards tbody,.vp-table--cards tr,.vp-table--cards td{display:block;width:100%}
  .vp-table--cards tr{border-top:1px solid var(--vp-line);padding:10px 4px}
  .vp-table--cards tr:first-child{border-top:0}
  .vp-table--cards td{border:0;padding:5px 14px;display:flex;justify-content:space-between;gap:16px;text-align:right}
  .vp-table--cards td::before{content:attr(data-l);font-weight:650;color:var(--vp-muted);font-size:.8rem;text-align:left;flex:none}
}

/* ── Diálogo (<dialog class="vp-dialog">) ─────────────────────────────────── */
.vp-dialog{border:0;padding:0;border-radius:var(--vp-r-xl);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:0 30px 80px -20px rgba(10,26,58,.5);color:var(--vp-ink);background:#fff}
.vp-dialog::backdrop{background:rgba(10,26,58,.5);backdrop-filter:blur(3px)}
.vp-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.vp-dialog__head h2{font-size:1.2rem}
.vp-dialog__body{padding:16px 22px;display:grid;gap:14px;overflow-y:auto}
.vp-dialog__foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:6px 22px 20px}
.vp-dialog--wide{width:min(820px,calc(100vw - 24px))}

/* ── Avisos flotantes ─────────────────────────────────────────────────────── */
.vp-toasts{position:fixed;z-index:200;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;gap:8px;width:min(440px,calc(100vw - 24px));pointer-events:none}
.vp-toast{pointer-events:auto;background:var(--vp-ink);color:#fff;border-radius:14px;padding:13px 16px;font-size:.92rem;font-weight:600;box-shadow:0 14px 32px -10px rgba(10,26,58,.55);display:flex;align-items:center;gap:10px;animation:vp-up .22s ease-out}
.vp-toast--ok{background:color-mix(in srgb,var(--vp-ok) 82%,#000)}
.vp-toast--err{background:color-mix(in srgb,var(--vp-danger) 88%,#000)}
@keyframes vp-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Piezas sueltas ───────────────────────────────────────────────────────── */
.vp-avatar{width:40px;height:40px;border-radius:50%;background:var(--vp-p100);color:var(--vp-p700);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:none;overflow:hidden;object-fit:cover}
.vp-avatar--lg{width:64px;height:64px;font-size:1.3rem}
.vp-avatar--sm{width:32px;height:32px;font-size:.75rem}
.vp-progress{height:8px;border-radius:99px;background:var(--vp-line2);overflow:hidden}
.vp-progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vp-primary),var(--vp-accent));transition:width .4s}
.vp-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:40px 20px;color:var(--vp-muted)}
.vp-empty .vp-icobox{width:64px;height:64px;font-size:1.7rem;border-radius:20px}
.vp-empty h3{color:var(--vp-ink)}
.vp-kpi{display:grid;gap:4px}
.vp-kpi b{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.vp-kpi span{font-size:.82rem;color:var(--vp-muted);font-weight:600}
.vp-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--vp-p50);border:1px solid var(--vp-p100);padding:2px 8px;border-radius:7px;font-size:.88em}
.vp-skel{background:linear-gradient(90deg,var(--vp-line2),var(--vp-line),var(--vp-line2));background-size:200% 100%;animation:vp-sk 1.2s infinite;border-radius:8px;min-height:1em}
@keyframes vp-sk{to{background-position:-200% 0}}
.vp-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--vp-p200);border-top-color:var(--vp-primary);animation:vp-rot .7s linear infinite;display:inline-block}
@keyframes vp-rot{to{transform:rotate(360deg)}}

/* ── Panel oscuro del cobro (referencia RealPTT): UNO por pantalla, para lo que se paga o se confirma ── */
.vp-panel-negro{background:var(--vp-ink);color:#fff;border-radius:calc(var(--vp-r-xl) + 4px);padding:clamp(14px,2.4vw,22px);display:grid;gap:14px}
.vp-panel-negro .vp-card{background:#fff;color:var(--vp-ink);border-color:transparent;box-shadow:none}
.vp-panel-negro__fila{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 16px;border-radius:14px;background:color-mix(in srgb,var(--vp-ink) 82%,#fff);font-size:.95rem}
.vp-panel-negro__fila span{color:color-mix(in srgb,#fff 62%,var(--vp-ink))}
.vp-panel-negro__fila b{color:#fff;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.vp-panel-negro .vp-btn{min-height:56px;border-radius:16px;font-size:1.02rem}
.vp-panel-negro .vp-btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.22)}
.vp-panel-negro .vp-help,.vp-panel-negro .vp-muted{color:color-mix(in srgb,#fff 66%,var(--vp-ink))}