/* Sistema de diseño Fidelix — tokens reales del brand (packages/fidelix_ui).
   Ver research/fidelix-brand-prompt.md. Base de todas las pantallas. */
:root {
  /* Paleta */
  --fx-violet: #3B2F7E;        /* primario: la tinta del sello */
  --fx-violet-dark: #2A2159;   /* bandas / gradiente */
  --fx-violet-tint: #D8D2EC;   /* seleccionado / relleno suave */
  --fx-ink: #17151F;           /* texto principal */
  --fx-cream: #F7F5F0;         /* fondo base cálido */
  --fx-warm: #E4E1D8;          /* bordes / divisores */
  --fx-muted: #55515F;         /* texto secundario */
  --fx-white: #FFFFFF;
  --fx-success: #2E7D5B;
  --fx-danger: #B3261E;

  /* Radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  /* Espaciado base-4 */
  --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px;

  /* Sombras suaves */
  --sh-sm: 0 2px 8px rgba(23,21,31,.06);
  --sh-md: 0 8px 24px rgba(23,21,31,.08);
  --sh-lg: 0 14px 34px rgba(23,21,31,.12);
}

* { box-sizing: border-box; }
/* Sin rebote elástico. Instalada como app (standalone), al llegar al final del
   scroll iOS estira TODO el documento —y arrastra con él lo que está fijo, así
   que la nav de abajo se despega y se mueve con el dedo. `overscroll-behavior`
   corta ese rebote y la nav se queda donde debe. */
html, body { margin: 0; overscroll-behavior-y: none; }
/* Foco de teclado visible en toda la app (antes solo los inputs lo tenían). */
:focus-visible { outline: 2px solid var(--fx-violet); outline-offset: 2px; border-radius: 4px; }
body {
  /* Plus Jakarta Sans en todas las pantallas: la marca se ve igual en el
     celular del cajero que en el computador del dueño. Si no carga, cae a la
     fuente del sistema sin romper nada. */
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--fx-cream);
  color: var(--fx-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Tipografía */
.fx-display  { font-size: 34px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; margin: 0; }
.fx-headline { font-size: 24px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; margin: 0; }
.fx-title    { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
.fx-body     { font-size: 16px; font-weight: 400; line-height: 1.5; margin: 0; }
.fx-muted    { color: var(--fx-muted); }
.fx-label    { font-size: 14px; font-weight: 600; letter-spacing: .1px; }
.fx-caption  { font-size: 12px; font-weight: 500; letter-spacing: .2px; color: var(--fx-muted); }

/* Marca */
.fx-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; color: var(--fx-ink); }
.fx-brand img { width: 26px; height: 26px; display: block; }
.fx-brand.on-dark { color: #fff; }

/* Layout de app móvil */
/* `dvh` y no `vh`: en el móvil, 100vh mide el viewport SIN la barra del
   navegador, así que la página queda más alta de lo que se ve. Al hacer scroll
   el navegador contrae su barra, el alto cambia de golpe y la nav de abajo
   parece despegarse y bailar con el dedo. `dvh` sigue el viewport de verdad.
   El `vh` queda de reserva para navegadores viejos que no entienden `dvh`. */
.fx-app { max-width: 440px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fx-cream); position: relative; }
.fx-screen { padding: var(--s-lg); padding-bottom: 96px; }

/* Botones */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 18px; border: none; border-radius: var(--r-md);
  font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .05s ease, filter .15s ease;
}
.fx-btn:active { transform: scale(.99); }
.fx-btn--primary { background: var(--fx-violet); color: #fff; }
.fx-btn--primary:hover { filter: brightness(1.06); }
.fx-btn--ghost { background: transparent; color: var(--fx-violet); border: 1px solid var(--fx-warm); }
.fx-btn--dark { background: var(--fx-ink); color: #fff; }
.fx-btn--wallet { background: #fff; color: var(--fx-ink); border: 1px solid var(--fx-warm); justify-content: flex-start; gap: 12px; padding: 14px 16px; box-shadow: var(--sh-sm); }
.fx-btn:disabled { opacity: .5; cursor: default; }

/* Superficies */
.fx-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: var(--s-lg); }
.fx-surface { background: #fff; border: 1px solid var(--fx-warm); border-radius: var(--r-md); }

/* Campos */
.fx-field { margin-bottom: var(--s-md); }
.fx-field > label { display: block; font-size: 13px; color: var(--fx-muted); margin-bottom: 6px; }
.fx-input, .fx-select {
  width: 100%; padding: 14px; border: 1px solid var(--fx-warm); border-radius: var(--r-md);
  font-size: 16px; background: #fff; color: var(--fx-ink);
}
.fx-input:focus, .fx-select:focus { outline: none; border-color: var(--fx-violet); box-shadow: 0 0 0 3px var(--fx-violet-tint); }

/* Tarjeta de fidelización (la card visual) */
.loyalty {
  position: relative; border-radius: var(--r-lg); padding: 20px;
  background: linear-gradient(135deg, var(--fx-violet), var(--fx-violet-dark));
  color: #fff; box-shadow: var(--sh-lg); overflow: hidden; aspect-ratio: 1.586;
  display: flex; flex-direction: column; justify-content: space-between;
}
.loyalty::after { /* sello de agua */
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 180px; height: 180px;
  background: url("/logo.svg") center/contain no-repeat; opacity: .10; filter: brightness(3);
  transform: rotate(-8px);
}
.loyalty .l-top { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.loyalty .l-num { letter-spacing: 3px; opacity: .9; font-size: 14px; }

/* Tarjeta estilo "boarding pass": parte violeta arriba + talón blanco con QR */
.pass { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); background: #fff; }
.pass-top { background: linear-gradient(135deg, var(--fx-violet), var(--fx-violet-dark)); color: #fff; padding: 20px; }
.pass-top .l-top { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 16px; }
.pass-top .l-top img { height: 22px; width: auto; filter: brightness(0) invert(1); }
.pass-top .l-top img.branded { filter: none; max-height: 28px; max-width: 110px; }
.pass-banner { margin: 10px 0; padding: 10px; border-radius: 10px; background-size: cover; background-position: center; }
.pass-banner.has-banner { background-image: linear-gradient(rgba(23,21,31,.32), rgba(23,21,31,.32)), var(--banner); }
.impronta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pass-top .impronta.on svg { stroke: var(--fx-violet); }
.pass-top .p-reward { margin-top: 16px; font-size: 13px; opacity: .85; }
.pass-top .p-reward b { display: block; font-size: 15px; opacity: 1; }
.pass-tear { position: relative; height: 0; border-top: 2px dashed var(--fx-warm); }
.pass-tear::before, .pass-tear::after { content: ""; position: absolute; top: -12px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--fx-cream); }
.pass-tear::before { left: -12px; }
.pass-tear::after { right: -12px; }
.pass-stub { padding: 20px; text-align: center; }
.pass-qr { width: 168px; height: 168px; margin: 0 auto; display: block; }
.pass-hint { font-size: 12px; color: var(--fx-muted); margin-top: 10px; }
.pass-num { letter-spacing: 3px; font-size: 12px; color: var(--fx-muted); margin-top: 2px; }
.pass-top .impronta { border-color: rgba(255,255,255,.45); color: var(--fx-violet); }
.pass-top .impronta.on { background: #fff; border-color: #fff; }

/* Filas de sellos balanceadas y centradas (misma cantidad arriba y abajo) */
.imp-rows { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.imp-row { display: flex; gap: 9px; justify-content: center; }

/* Improntas (grilla de sellos) */
.improntas { display: flex; flex-wrap: wrap; gap: 10px; }
.impronta { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--fx-warm);
  display: flex; align-items: center; justify-content: center; color: #fff; }
.impronta.on { background: var(--fx-violet); border-color: var(--fx-violet); }
/* Formas de impronta (según la plantilla del comercio) */
.impronta.forma-hexagono { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.impronta.forma-clasico { border-radius: 6px; }
/* Improntas sobre la tarjeta violeta: invertidas para contraste */
.loyalty .impronta { border-color: rgba(255,255,255,.45); color: var(--fx-violet); }
.loyalty .impronta.on { background: #fff; border-color: #fff; }

/* Stats */
.fx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); }
.fx-stat { text-align: center; }
.fx-stat .num { font-size: 22px; font-weight: 800; color: var(--fx-ink); }
.fx-stat .lbl { font-size: 12px; color: var(--fx-muted); }

/* Nav inferior */
.fx-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 440px; background: #fff; border-top: 1px solid var(--fx-warm);
  display: flex; justify-content: space-around; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
.fx-nav a { flex: 1; text-align: center; text-decoration: none; color: var(--fx-muted); font-size: 11px; font-weight: 600; }
.fx-nav a .navic { display: block; width: 22px; height: 22px; margin: 0 auto 3px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-nav a.active { color: var(--fx-violet); }
/* Botón central de escanear: círculo violeta elevado (como el mockup) */
.fx-nav a.nav-scan { display: flex; align-items: center; justify-content: center; }
.fx-nav .scanbtn { width: 56px; height: 56px; border-radius: 50%; background: var(--fx-violet); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: -24px; box-shadow: 0 8px 20px rgba(59,47,126,.4);
  border: 4px solid var(--fx-cream); }
.fx-nav .scanbtn svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Icono de línea genérico (hereda color) */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle; width: 22px; height: 22px; }

/* Badges / chips */
.fx-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.fx-badge.ok { background: rgba(46,125,91,.14); color: var(--fx-success); }
.fx-badge.off { background: var(--fx-warm); color: var(--fx-muted); }
.fx-badge.reward { background: var(--fx-violet-tint); color: var(--fx-violet); }

/* Utilidades */
.hidden { display: none !important; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-md); }
.row { display: flex; align-items: center; gap: var(--s-sm); }
.spread { display: flex; align-items: center; justify-content: space-between; }
.err { color: var(--fx-danger); font-size: 13px; }

/* ============================================================
   Escritorio (>= 1024px)
   La app es mobile-first: `.fx-app` es una columna de 440px, que en un monitor
   deja el resto de la pantalla vacío. Aquí esa columna pasa a verse como una
   tarjeta centrada sobre un fondo con textura, sin tocar el HTML. El panel del
   comercio, que sí necesita ancho real, se reordena en su propia hoja.
   Probado a 1024, 1280 y 1440.
   ============================================================ */
@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(1100px 620px at 12% -10%, rgba(59,47,126,.10), transparent 60%),
      radial-gradient(900px 520px at 105% 8%, rgba(59,47,126,.07), transparent 55%),
      var(--fx-cream);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .fx-headline, .fx-title, h1, h2 { letter-spacing: -.015em; }

  /* Columna de la app como tarjeta centrada (alta, tarjeta, escáner). */
  .fx-app:not(.fx-app--full) {
    max-width: 460px;
    min-height: auto;
    margin: 48px auto 64px;
    background: var(--fx-cream);
    border: 1px solid var(--fx-warm);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
  }

  /* Fila de estadísticas (Resumen de hoy) como tarjetas individuales en vez de
     números sueltos flotando en una fila — más lectura de "dashboard". */
  .fx-stats { gap: var(--s-sm); }
  .fx-stat {
    padding: var(--s-md) var(--s-sm);
    border: 1px solid var(--fx-warm);
    border-radius: var(--r-md);
    background: var(--fx-cream);
    transition: border-color .2s, transform .2s;
  }
  .fx-stat:hover { border-color: var(--fx-violet-tint); transform: translateY(-1px); }

  /* Transiciones consistentes para hover/active en controles interactivos. */
  .fx-btn, .fx-card, a { transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s; }
}