/* ══════════════════════════════════════════════════════════════════════════
   VISUAL MADRE — design system de jammweb (fuente única de verdad)
   Tokens extraídos de admin.html. Lo linkean las pantallas de portal/app
   (probar, login, activar, pago-*, set-password) para verse todas iguales:
   fondo casi-negro neutro, superficie plana (sin glow/aurora), acento
   violeta/azul. Las landings de marketing (index/comercios/gastro/petshop)
   NO usan esto: tienen su propia estética de funnel a propósito.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Superficies */
  --surf-bg:      #0a0b0f;   /* fondo de página */
  --surf-panel:   #16181f;   /* tarjetas / paneles */
  --surf-panel-2: #1c1f28;   /* superficie un pelo más clara (inputs, hover) */
  --surf-line:    #2a2e39;   /* bordes y divisores */
  --surf-line-2:  #3a3f4c;   /* borde/relieve más marcado */
  /* Texto */
  --ink-1: #f5f7fa;          /* primario */
  --ink-2: #aab3c0;          /* secundario */
  --ink-3: #8a94a3;          /* atenuado */
  --ink-4: #6b7480;          /* dim / placeholder */
  /* Acento de marca */
  --a-violet: #7c3aed;
  --a-blue:   #2563eb;
  --a-violet-light: #a78bfa;
  --grad:      linear-gradient(135deg, var(--a-blue), var(--a-violet));
  --grad-soft: linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,242,.16));
  --ring:      rgba(124,58,242,.28);
  /* Semánticos */
  --ok:    #34d399;
  --warn:  #fbbf24;
  --error: #f87171;
  /* Forma */
  --radius:    14px;
  --radius-lg: 18px;
  --shadow:    0 18px 50px rgba(0,0,0,.45);
}

*, *::before, *::after { box-sizing: border-box; }

body.vm {
  margin: 0; min-height: 100vh;
  background: var(--surf-bg);
  color: var(--ink-1);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Layout de pantallas de portal: una tarjeta centrada. */
body.vm-center {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}

/* Scrollbar coherente con admin */
.vm ::-webkit-scrollbar { width: 10px; height: 10px; }
.vm ::-webkit-scrollbar-track { background: rgba(15,23,42,.4); }
.vm ::-webkit-scrollbar-thumb { background: var(--surf-line); border-radius: 10px; border: 2px solid var(--surf-bg); }
.vm ::-webkit-scrollbar-thumb:hover { background: var(--surf-line-2); }

/* ── Componentes ────────────────────────────────────────────────────────── */
.vm-card {
  position: relative; width: 100%; max-width: 460px;
  background: var(--surf-panel);
  border: 1px solid var(--surf-line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.9rem;
  box-shadow: var(--shadow);
}
.vm-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.vm-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); flex-shrink: 0;
}
.vm-brand h1 { font-size: 1.2rem; margin: 0; letter-spacing: -.02em; font-weight: 800; color: var(--ink-1); }

.vm-chip {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 600;
  background: var(--grad-soft); border: 1px solid var(--surf-line-2); color: var(--a-violet-light);
}
.vm-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 600; padding: .24rem .7rem; border-radius: 999px;
  background: var(--grad-soft); border: 1px solid var(--surf-line-2); color: var(--a-violet-light);
}
.vm-sub { color: var(--ink-2); font-size: .9rem; line-height: 1.6; margin: 0 0 1.3rem; }
.vm-sub b { color: var(--ink-1); font-weight: 600; }

.vm label { display: block; font-size: .82rem; color: var(--ink-2); margin: .7rem 0 .3rem; }
.vm input, .vm select {
  width: 100%; padding: .72rem .8rem; border-radius: var(--radius);
  background: var(--surf-panel-2); border: 1px solid var(--surf-line); color: var(--ink-1);
  font-size: .95rem; font-family: inherit; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.vm select option { background: var(--surf-panel-2); }
.vm input:focus, .vm select:focus {
  border-color: var(--a-violet); box-shadow: 0 0 0 3px var(--ring); background: var(--surf-panel-2);
}
.vm input::placeholder { color: var(--ink-4); }

.vm-btn {
  width: 100%; margin-top: 1.3rem; padding: .85rem; border: none; border-radius: 100px;
  background: var(--grad); color: #fff; font-size: 1rem; font-weight: 700;
  font-family: inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .18s, box-shadow .18s, opacity .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none; box-sizing: border-box;
}
.vm-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.vm-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.vm-msg { margin-top: 1rem; font-size: .88rem; min-height: 1.1rem; }
.vm-msg.error, .vm-error { color: var(--error); }
.vm-msg.ok, .vm-ok { color: var(--ok); }
.vm-hint { font-size: .78rem; color: var(--ink-3); margin-top: .35rem; line-height: 1.35; }
.vm-hint.ok { color: var(--ok); } .vm-hint.error { color: var(--error); }
.vm-hint b { color: var(--ink-1); font-weight: 600; }

.vm-foot { margin-top: 1.2rem; text-align: center; font-size: .85rem; color: var(--ink-2); }
.vm-link, .vm-foot a, .vm-hint a { color: var(--a-violet-light); text-decoration: none; font-weight: 600; }
.vm-foot a:hover, .vm-link:hover { text-decoration: underline; }

.vm-code { font-size: 1.4rem; font-weight: 800; color: var(--a-violet-light); letter-spacing: 1px; }