/* NUA — tokens del sistema de diseño (claro / oscuro) */
:root {
  --surface-100: #F6F4EE; --surface-200: #ECE9E0;
  --ink: #14201B; --ink-muted: #5A655F; --hairline: #DCD8CD;
  --brand: #4F6E5C; --on-brand: #FFFFFF; --brand-deep: #24392F;
  --accent: #C9845E; --mist: #D7E3D9; --danger: #A23B2A;
  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px;
  --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #101614; --surface-200: #18201D;
    --ink: #EEF2EC; --ink-muted: #A3ADA7; --hairline: #2A3430;
    --brand: #8FB39C; --on-brand: #101614; --brand-deep: #2E4A3D;
    --accent: #D9987A; --mist: #24302B; --danger: #F08A78;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --surface-100: #101614; --surface-200: #18201D;
    --ink: #EEF2EC; --ink-muted: #A3ADA7; --hairline: #2A3430;
    --brand: #8FB39C; --on-brand: #101614; --brand-deep: #2E4A3D;
    --accent: #D9987A; --mist: #24302B; --danger: #F08A78;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-100); color: var(--ink);
  font: 400 15px/22px var(--font); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 28px; line-height: 34px; font-weight: 700; }
h2 { font-size: 18px; line-height: 24px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--ink-muted); }
.label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.counter { font-size: 32px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* Layout */
.page { max-width: 440px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); }
.page.wide { max-width: 1080px; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.row.tight { gap: 6px; }
.card { background: var(--surface-200); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-4); }

/* ── Páginas públicas simples (privacidad, términos, soporte) ───────────────── */
/* Mismo encabezado/pie en las tres, para que Google (u otro revisor) encuentre
   Soporte/Privacidad/Términos desde cualquiera de ellas sin iniciar sesión. */
.simple-header { border-bottom: 1px solid var(--hairline); padding-bottom: var(--space-4); }
.simple-main h2 { margin-top: var(--space-2); }
.simple-main .card :is(h2, p, ul) + * { margin-top: 0; } /* el gap ya lo da .stack */
.site-footer {
  border-top: 1px solid var(--hairline); padding-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.site-footer nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer nav a { color: var(--ink-muted); font-size: 14px; text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }

/* Marca NUA */
.nua-mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.nua-mark svg { width: 28px; height: 28px; }
.nua-mark span { font-weight: 300; letter-spacing: 0.32em; font-size: 15px; }
.powered { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.2em; }
.powered svg { width: 16px; height: 16px; }

/* Formularios */
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface-100);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 12px 14px; min-height: 44px; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
input[type="color"] { padding: 4px; width: 56px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 400; }
.check input { width: 20px; height: 20px; min-height: 0; margin-top: 1px; flex-shrink: 0; accent-color: var(--brand); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid transparent; font: 600 15px/1 var(--font); cursor: pointer; text-decoration: none;
  background: var(--brand); color: var(--on-brand);
}
.btn:disabled { opacity: .5; cursor: progress; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.accent { background: var(--accent); color: #1E140E; }
.btn.small { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.btn.block { width: 100%; }
.btn-wallet { background: #000; color: #fff; }
.btn-wallet svg { width: 22px; height: 22px; }

/* Badge oficial de "Guardar en Google Wallet" (public/assets/google-wallet-es419.svg).
   Google prohíbe tocar color, radio o espaciado del badge: el único CSS permitido es
   escalarlo sin deformarlo. El espacio libre que exige su guía de marca ya lo da el
   gap de .stack entre hermanos, así que no hace falta padding aquí. */
.wallet-badge-google { display: block; }
.wallet-badge-google img { display: block; width: 100%; height: auto; }

.alert { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; border: 1px solid var(--hairline); }
.alert.error { border-color: var(--danger); color: var(--danger); }
.alert.ok { border-color: var(--brand); color: var(--brand); }

/* Vista previa de la tarjeta (colores del negocio vía variables) */
.pass {
  --pass-bg: #F6F4EE; --pass-fg: #14201B; --pass-label: #4F6E5C;
  background: var(--pass-bg); color: var(--pass-fg);
  border-radius: 14px; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 32px rgba(20,32,27,.12);
}
.pass .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 28px; }
.pass .headgroup { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Caja del logo de Apple: 160×50 pt. El logo se escala y alinea dentro, nunca se sale. */
.logo-box { width: 160px; height: 50px; display: flex; flex-shrink: 0; }
.logo-box.square { width: 50px; }   /* un isotipo con el nombre al lado no ocupa los 160 */
.logo-box.bounds { outline: 1px dashed color-mix(in srgb, var(--pass-fg) 35%, transparent); outline-offset: 2px; }
.pass .logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.pass .biz { font-weight: 800; font-size: 20px; }
.pass .plabel { color: var(--pass-label); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pass .pvalue { font-size: 26px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; }
.pass .pname { font-size: 22px; line-height: 1.2; }
.pass .fields { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pass .aux { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; opacity: .85; }
.pass .aux .plabel { font-size: 10px; }
.pass .aux .pname { font-size: 15px; }
.pass .right { text-align: right; }

/*
 * Cuadrícula de sellos — compartida por admin/join/card/caja (ver common.js:buildStampDots).
 * Capas por slot: `i` = aro (--border-color) + doble aro (--ring2, box-shadow);
 * `::before` = relleno del slot, inset por --border-inset; `::after` = ícono/punto.
 */
.strip { border-radius: 10px; margin: 0 -18px; padding: 14px 18px; position: relative; }
/* El logo sobre la tira. 'top' y 'left' le quitan espacio a los sellos; 'watermark' va detrás. */
.strip-logo { height: var(--strip-logo-scale, 25%); width: auto; object-fit: contain; }
.strip.logo-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strip.logo-top .strip-logo { max-height: 48px; }
/* width:100% explícito: con align-items:center el grid no se estira y las columnas
   minmax(0,1fr) colapsarían a cero. */
.strip.logo-top .stamps { width: 100%; }
.strip.logo-left { display: flex; align-items: center; gap: 12px; }
.strip.logo-left .strip-logo { max-height: 56px; max-width: 30%; flex-shrink: 0; }
.strip.logo-left .stamps { flex: 1; min-width: 0; }
.strip-logo.watermark {
  position: absolute; inset: 0; margin: auto; height: var(--strip-logo-scale, 25%);
  max-height: 80%; max-width: 70%; pointer-events: none;
}
.stamps { display: grid; gap: 12px; justify-items: center; padding: 4px 8px; }
.stamps i {
  display: block; width: 100%; max-width: 46px; aspect-ratio: 1; position: relative;
  border-radius: 50%; background: var(--border-color, transparent); box-shadow: var(--ring2, none);
}
.stamps i.square { border-radius: 22%; }
.stamps i.hex { border-radius: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.stamps i.has-shadow { filter: drop-shadow(0 2px 3px rgba(20,32,27,.32)); }
.stamps i::before {
  content: ''; position: absolute; inset: var(--border-inset, 0); border-radius: inherit;
  clip-path: inherit; background: var(--slot-bg, transparent);
}
.stamps i::after {
  content: ''; position: absolute; inset: var(--icon-inset, 11%);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.stamps i.dot::after { inset: 22%; border-radius: 50%; background-color: var(--dot-color); }
.stamps i.icon-tint::after {
  background-color: var(--dot-color);
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.stamps i.icon-original::after { background-image: var(--icon-url); }
/* Mockups estáticos del landing (sin ícono propio, markup de ejemplo): un punto plano del color de marca. */
.stamps i:not(.dot):not(.icon-tint):not(.icon-original) { background: var(--pass-stamp, var(--slot-bg, transparent)); opacity: .3; }
.stamps i:not(.dot):not(.icon-tint):not(.icon-original).on { opacity: 1; }

/* Vista aproximada de Google Wallet (chrome distinto, misma cuadrícula de sellos). */
.gpass {
  --pass-bg: #F6F4EE; --pass-fg: #14201B; --pass-label: #4F6E5C;
  background: #fff; color: var(--pass-fg); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 32px rgba(20,32,27,.1);
}
.gtop { display: flex; align-items: center; gap: 12px; }
.gbadge { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--pass-bg); flex-shrink: 0; }
.gbadge.biz { display: grid; place-items: center; font-weight: 800; color: var(--pass-fg); }
.gnames { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gissuer { font-size: 12px; color: var(--ink-muted); }
.gprogram { font-weight: 700; font-size: 17px; }
.gpoints-row { display: flex; gap: 10px; }
.gpoints { flex: 1; background: var(--pass-bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpoints-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pass-label); }
.gpoints-value { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gpass .stamps { padding: 0 4px; }

/* Escáner */
.scanner { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #000; aspect-ratio: 1; }
.scanner video { width: 100% !important; height: 100% !important; object-fit: cover; }
.big-number { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* Tablas admin */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.table-wrap { overflow-x: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 600; }
.colors { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.colors label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.qr { width: 160px; border-radius: var(--radius-sm); background: #fff; padding: 8px; }
.logo-lg { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-lg); background: var(--surface-200); }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; }
details[open] summary { margin-bottom: var(--space-4); }
.grow { flex: 1 1 200px; }
.right { text-align: right; }
#manual { align-items: flex-end; }
.hero { font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: 0.32em; }

/* Primeros pasos (panel del dueño). Clases, no estilos inline: la CSP los bloquea. */
.setup-list { list-style: none; padding: 0; margin: 0; }
.setup-item { display: flex; align-items: flex-start; gap: 10px; }
.setup-item .mark { font-size: 18px; line-height: 1.3; }
.setup-item .body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.setup-item.done .body strong { opacity: 0.55; }
.setup-head { align-items: baseline; }

/* ── Asistente de primera configuración (/panel/bienvenida) ─────────────────── */
/* Barra de progreso. El ancho se pone con --progress desde JS (setProperty), nunca
   con un atributo style= inline: la CSP lo descartaría en silencio. */
.progress { height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.progress-fill {
  height: 100%; width: var(--progress, 0%); border-radius: 999px;
  background: var(--brand); transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.progress-label { font-size: 13px; color: var(--ink-muted); }

/* Puntitos de paso */
.stepper { display: flex; gap: 6px; align-items: center; }
.stepper .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); flex-shrink: 0; }
.stepper .dot.done { background: var(--brand); }
.stepper .dot.current { background: var(--accent); transform: scale(1.4); }

.wizard-head { gap: 6px; }
.wizard-head h1 { font-size: 22px; line-height: 1.25; }
.wizard-head .muted { font-size: 14px; }
/* Empuja las acciones al fondo en pantallas altas, sin romper en las cortas. */
.wizard-actions { margin-top: auto; padding-top: var(--space-4); gap: 10px; }
.wizard-skip { background: none; border: none; color: var(--ink-muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Opciones de giro: objetivos táctiles grandes, una sola columna en móvil. */
.giros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.giro-btn {
  min-height: 48px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface-100);
  color: var(--ink); font: 600 14px/1.2 var(--font); cursor: pointer; text-align: left;
}
.giro-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--mist); }

/* Listas de lo ya dado de alta en un paso (equipo de caja, sucursales). */
.lista-equipo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--surface-100); font-weight: 600;
}
.lista-item .pastilla {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--mist); color: var(--ink-muted); font-size: 12px; font-weight: 500;
}

/* Recorte del logo: las dos versiones lado a lado, para escoger viéndolas.
   El cuadro tiene fondo a cuadros para que se note dónde acaba un PNG transparente. */
.trim-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trim-opt {
  display: grid; gap: 6px; justify-items: center; padding: 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--surface-100); cursor: pointer; font: inherit; color: var(--ink);
}
.trim-opt[aria-pressed="true"] { border-color: var(--brand); background: var(--mist); }
.trim-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 72px; border-radius: 6px; overflow: hidden;
  background-color: var(--surface-100);
  background-image:
    linear-gradient(45deg, var(--hairline) 25%, transparent 25% 75%, var(--hairline) 75%),
    linear-gradient(45deg, var(--hairline) 25%, transparent 25% 75%, var(--hairline) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.trim-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.trim-label { font-size: 13px; font-weight: 600; }