/* ==========================================================================
   BUBBLE TWINS — DISEÑO DERIVADO DE LA MARCA
   Tapioca Drinks & Candy Bar

   Ficha de propósito (ver README.md § Diseño para la versión completa):
   - Promesa: "Cada compra suma un sello. El último, cortesía de la casa."
   - Metáfora: el vaso que se llena de perlas — ya dibujada en el logo real
     (public/icons/logo.jpg): dos vasos a tinta, uno verde, uno rojo, sobre
     papel, con perlas negras. Todo el sistema deriva de ahí.
   - Undertone: la leche del té (papel cálido, nunca #FFFFFF puro).
   - Tinta: el trazo del logo (negro cálido, nunca #000 puro).
   - Señal: el verde del vaso izquierdo, profundizado hasta pasar AA.
   - Voz tipográfica: redondeada, conversa con el wordmark grueso del logo.
   - Motivo gráfico: el trazo — la línea temblorosa de tinta del logo.

   Fuentes cargadas desde index.html (un solo <link>, ver CSP en server.js).
   Movimiento gobernado por frecuencia de uso: el punto de venta es rápido y
   seco, el vaso del cliente es alegre. Ver bloque "MOVIMIENTO" más abajo.

   Vocabulario: la metáfora del vaso vive en el dibujo de la tarjeta y en
   las perlas, no en los nombres de pantalla — ver README.md § Diseño →
   Vocabulario para el porqué.
   ========================================================================== */

/* --- Tokens: tema claro (canónico) --- */
:root {
  /* Superficies — papel de leche, planas, sin glass ni glow */
  --bg:          #FAF6EF;
  --surface-1:   #FFFCF7;
  --surface-2:   #F1EADD;
  --line:        #E0D6C4;

  /* Tinta — el trazo del logo, negro cálido, nunca #000 */
  --ink-1:       #1F1B16;
  --ink-2:       #4A4239;
  --ink-3:       #6E6459;

  /* Señal única — el verde del vaso izquierdo del logo, profundizado para AA */
  --signal:      #4C7A1E;
  --signal-ink:  #FFFFFF; /* texto sobre botones de señal */
  --signal-weak: rgba(76, 122, 30, 0.10);

  /* La marca — el lime y el rojo tal cual viven en el logo. Solo dentro
     del dibujo del vaso/perlas y del líquido de progreso. Nunca como
     color de texto ni de botón: no pasan AA sobre papel. */
  --brand-lime:  #8CC63F;
  --brand-berry: #EF4136;

  /* Estados — sabores de la propia carta, no semáforo */
  --state-sealed: #4C7A1E; /* matcha    → aro del sello puesto */
  --state-full:   #C8352E; /* berry     → vaso lleno / acción destructiva */
  --state-wait:   #9A6520; /* mascabado → código pendiente, por expirar */
  --state-live:   #6B5B95; /* taro      → sesión activa, verificado */

  /* Tipografía — tres voces, un contrato */
  --font-voice:   'Fredoka', system-ui, sans-serif;
  --font-human:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-machine: 'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.06em;

  /* Ritmo y radios — botones siempre al mismo radio */
  --space: 8px;
  --r-btn:  6px;
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(31, 27, 22, 0.04), 0 8px 20px -12px rgba(31, 27, 22, 0.12);
  --shadow-modal: 0 12px 32px -8px rgba(31, 27, 22, 0.24);

  /* Movimiento */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-pop:   180ms;
  --dur-modal: 260ms;

  --nav-height: 64px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Tokens: tema oscuro — la tienda de noche, no un inverso automático --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #17140F;
    --surface-1: #1F1B15;
    --surface-2: #292319;
    --line:      #3A3225;

    --ink-1: #F7F1E6;
    --ink-2: #BCB2A0;
    --ink-3: #948B7B;

    --signal:      #9ED04F;
    --signal-ink:  #17140F;
    --signal-weak: rgba(158, 208, 79, 0.14);

    --brand-lime:  #9ED04F;
    --brand-berry: #F0665C;

    --state-sealed: #9ED04F;
    --state-full:   #F0665C;
    --state-wait:   #D0A055;
    --state-live:   #A192CE;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 16px 40px -8px rgba(0, 0, 0, 0.55);
  }
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-human);
  background-color: var(--bg);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
}

img { max-width: 100%; display: block; }

/* --- Voz de encabezados --- */
h1, h2, h3 {
  font-family: var(--font-voice);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
}

.mono, code {
  font-family: var(--font-machine);
  letter-spacing: 0;
}

code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 0.85em;
}

.hidden { display: none !important; }
.text-muted { color: var(--ink-3); }
.text-center { text-align: center; }

/* --- El motivo gráfico: el trazo --- */
.trace-line {
  width: 100%;
  height: 2px;
  background: var(--line);
  border: none;
  border-radius: var(--r-pill);
}

/* --- Header --- */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 246, 239, 0.92);
  border-bottom: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  .nav-header { background: rgba(23, 20, 15, 0.92); }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Antes de iniciar sesión (cliente o personal), el nombre de la marca ya
   se repite dos veces más abajo en la puerta de entrada — quitarlo de
   aquí evita la redundancia. En celular, sin sesión, la nav superior no
   tiene ningún otro contenido visible (los pills y el badge de turno ya
   están ocultos), así que se colapsa entera; en escritorio se conservan
   los botones para poder ver La Carta sin haber iniciado sesión. */
.nav-header.pre-auth .nav-brand { display: none; }

@media (max-width: 767px) {
  .nav-header.pre-auth { display: none; }
}

.nav-logo {
  border-radius: var(--r-sm);
  object-fit: cover;
}

.nav-title {
  font-family: var(--font-voice);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--ink-1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}

.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-human);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-press) ease, color var(--dur-press) ease;
}

.nav-toggle-btn.active {
  background: var(--ink-1);
  color: var(--surface-1);
}

@media (hover: hover) and (pointer: fine) {
  .nav-toggle-btn:not(.active):hover { color: var(--ink-1); }
}

.user-badge { display: flex; align-items: center; gap: 8px; }
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
}

/* Bajo 768px la nav inferior (.mobile-nav) ya cambia de vista — repetir
   los pills arriba solo compite por espacio con el logo y el badge de
   turno, y en pantallas angostas con sesión de staff activa llegaban a
   encimarse. El badge de turno se queda arriba (la nav inferior no lo
   cubre). */
@media (max-width: 767px) {
  .nav-toggle-btn { display: none; }
  .nav-actions {
    background: none;
    border: none;
    padding: 0;
  }
}

/* --- Install banner (PWA) --- */
.install-banner {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px;
}

.install-banner-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.install-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.install-banner-text strong {
  font-family: var(--font-voice);
  font-size: 0.9rem;
  color: var(--ink-1);
}

.install-banner-text span {
  font-size: 0.78rem;
  color: var(--ink-3);
}

.install-banner-close {
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* --- Layout --- */
.app-container {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px calc(var(--nav-height) + 24px);
}

.view-client, .view-menu, .view-pos { display: block; }
.view-client.hidden, .view-menu.hidden, .view-pos.hidden { display: none !important; }

@media print {
  body * { visibility: hidden; }
  #store-qr-print-area, #store-qr-print-area * { visibility: visible; }
  #store-qr-print-area { position: fixed; top: 0; left: 0; width: 100%; }
}

/* --- Puerta de entrada: composición asimétrica, sin tarjeta centrada --- */
.auth-door {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 780px;
  margin: 0 auto;
  padding-top: 12px;
}

@media (min-width: 720px) {
  .auth-door {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding-top: 32px;
  }
}

.auth-door-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

@media (min-width: 720px) {
  .auth-door-brand {
    align-items: flex-start;
    text-align: left;
  }
}

.auth-door-mark {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  object-fit: cover;
  border: 1px solid var(--line);
}

.auth-door-status {
  font-family: var(--font-machine);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .auth-door-brand::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background: var(--line);
    margin-top: 4px;
  }
}

.auth-door-form {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
}

.auth-step .form-group { margin-bottom: 14px; text-align: left; }

.auth-step h2 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.auth-step > p {
  color: var(--ink-3);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.code-input {
  font-family: var(--font-machine);
  letter-spacing: 8px;
  font-size: 1.5rem;
  text-align: center;
}

/* --- El Vaso (tarjeta de fidelidad) --- */
.loyalty-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.tier-badge {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tier-badge.tier-vip {
  background: var(--signal-weak);
  border-color: color-mix(in srgb, var(--signal) 40%, transparent);
  color: var(--signal);
}

.tier-badge.tier-vip-gold {
  background: rgba(154, 101, 32, 0.1);
  border-color: color-mix(in srgb, var(--state-wait) 40%, transparent);
  color: var(--state-wait);
}

/* Fourth tier (VIP Diamante, services/wallet/tier.js) — reuses --state-live
   (taro), already in the palette for "sesión activa", as the accent for
   the top of the 4-level scale shared with the Wallet pass builders. */
.tier-badge.tier-diamante {
  background: color-mix(in srgb, var(--state-live) 10%, transparent);
  border-color: color-mix(in srgb, var(--state-live) 40%, transparent);
  color: var(--state-live);
}

.card-customer { margin-bottom: 20px; }

.customer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-1);
}

.customer-phone {
  font-family: var(--font-machine);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.reward-target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 24px;
}

.brand-mark {
  display: inline-block;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.reward-target .brand-mark { width: 16px; height: 16px; }

/* --- Rejilla de perlas --- */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stamp-slot {
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
  position: relative;
  overflow: hidden;
}

.stamp-slot.filled {
  border: 2px solid var(--state-sealed);
  background: var(--surface-1);
  animation: pearlIn var(--dur-pop) var(--ease-out) backwards;
}

.stamp-grid.stagger .stamp-slot.filled:nth-child(1) { animation-delay: 0ms; }
.stamp-grid.stagger .stamp-slot.filled:nth-child(2) { animation-delay: 40ms; }
.stamp-grid.stagger .stamp-slot.filled:nth-child(3) { animation-delay: 80ms; }
.stamp-grid.stagger .stamp-slot.filled:nth-child(4) { animation-delay: 120ms; }
.stamp-grid.stagger .stamp-slot.filled:nth-child(5) { animation-delay: 160ms; }
.stamp-grid.stagger .stamp-slot.filled:nth-child(n+6) { animation-delay: 180ms; }

.stamp-mark {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Progreso: el líquido que sube --- */
.progress-section { margin-bottom: 24px; }

.progress-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-lime), var(--state-sealed));
  border-radius: var(--r-pill);
  transition: width 500ms var(--ease-out);
  width: 0%;
}

.progress-text {
  font-family: var(--font-machine);
  font-size: 0.75rem;
  color: var(--ink-3);
  text-align: right;
}

/* --- El vaso está lleno --- */
.reward-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(200, 53, 46, 0.08);
  border: 1px solid rgba(200, 53, 46, 0.3);
  border-radius: var(--r-md);
  margin-bottom: 24px;
}

.reward-banner-icon .brand-mark { width: 32px; height: 32px; }

.reward-banner-text strong {
  display: block;
  font-family: var(--font-voice);
  font-size: 0.95rem;
  color: var(--state-full);
}

.reward-banner-text span {
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* --- QR --- */
.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.qr-code {
  width: 232px;
  height: 232px;
  max-width: 100%;
  background: #FFFFFF;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code canvas { max-width: 100%; height: auto; display: block; }

.qr-label {
  font-size: 0.75rem;
  color: var(--ink-3);
  font-weight: 500;
}

/* --- Wallet --- */
.wallet-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
}

@media (min-width: 600px) {
  .wallet-buttons { grid-template-columns: 1fr 1fr; }
}

.wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  font-family: var(--font-human);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) ease;
}

.wallet-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .wallet-btn:hover { border-color: var(--ink-3); }
}

.wallet-btn-apple { background: var(--ink-1); color: var(--surface-1); }
.wallet-btn-google { background: var(--surface-2); color: var(--ink-1); }

.wallet-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}

.wallet-info { display: flex; flex-direction: column; gap: 8px; }

/* --- Historial --- */
.history-section {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.section-title {
  font-family: var(--font-human);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-1);
  margin-bottom: 16px;
}

.history-list { display: flex; flex-direction: column; gap: 4px; }

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}

.history-item:last-child { border-bottom: none; }

.history-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.stamp-icon-bg { background: var(--signal-weak); color: var(--state-sealed); }
.redeem-icon-bg { background: rgba(200, 53, 46, 0.1); color: var(--state-full); }
.register-icon-bg { background: var(--surface-2); color: var(--ink-3); }

.history-item-content { flex: 1; min-width: 0; }

.history-item-note {
  font-size: 0.85rem;
  color: var(--ink-1);
}

.history-item-date {
  font-family: var(--font-machine);
  font-size: 0.72rem;
  color: var(--ink-3);
}

/* --- La Carta --- */
.menu-page { max-width: 800px; margin: 0 auto; }

.menu-header { text-align: center; margin-bottom: 24px; }

.menu-title { font-size: 1.5rem; }

.menu-subtitle { color: var(--ink-3); font-size: 0.85rem; }

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.menu-tab {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-human);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-press) ease, color var(--dur-press) ease;
}

.menu-tab.active { background: var(--ink-1); color: var(--surface-1); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.menu-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .menu-card:hover { border-color: var(--ink-3); transform: translateY(-2px); }
}

.menu-card-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; color: var(--ink-1); }
.menu-card-desc { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 12px; }
.menu-card-price { font-family: var(--font-machine); font-weight: 700; font-size: 0.9rem; color: var(--signal); }

.menu-card-category {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  margin-left: 8px;
}

/* --- Punto de Venta --- */
.pos-dashboard { display: flex; flex-direction: column; gap: 20px; }

.pos-subnav {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  scrollbar-width: none;
}

.pos-subnav::-webkit-scrollbar { display: none; }

.pos-subtab { flex-shrink: 0; }

.pos-subtab {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-human);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-press) ease, color var(--dur-press) ease, border-color var(--dur-press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .pos-subtab:not(.active):hover { border-color: var(--ink-3); color: var(--ink-1); }
}

.pos-subtab.active { background: var(--ink-1); color: var(--surface-1); border-color: var(--ink-1); }

.pos-search-container { position: relative; }

.pos-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 18px;
}

.pos-search input {
  background: transparent;
  border: none;
  color: var(--ink-1);
  font-family: var(--font-human);
  font-size: 0.9rem;
  width: 100%;
  outline: none;
}

.search-icon { color: var(--ink-3); flex-shrink: 0; }

#btn-scan-qr { flex-shrink: 0; }

@media (max-width: 560px) {
  #btn-scan-qr { padding-left: 10px; padding-right: 10px; }
  .qr-scan-label { display: none; }
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}

.search-result-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms ease;
}

.search-result-item:last-child { border-bottom: none; }

@media (hover: hover) and (pointer: fine) {
  .search-result-item:hover { background: var(--surface-2); }
}

.result-name { font-size: 0.88rem; color: var(--ink-1); font-weight: 600; }
.result-phone { font-family: var(--font-machine); font-size: 0.78rem; color: var(--ink-3); }

.pending-code-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}

.pending-code-item:last-child { margin-bottom: 0; }

.pending-code-value {
  font-family: var(--font-machine);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--ink-1);
}

.pos-selected-customer {
  background: var(--surface-1);
  border: 1px solid var(--signal);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 600px) {
  .pos-selected-customer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.pos-customer-info { display: flex; align-items: center; gap: 12px; }

.pos-customer-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--signal);
  color: var(--signal-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.pos-customer-stamps { font-family: var(--font-machine); font-size: 0.82rem; color: var(--ink-3); }

.pos-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Botones del punto de venta: acción de 100+/día — feedback de presión,
   sin transición de entrada, sin hover decorativo. */
.stamp-btn {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-human);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}

.stamp-btn:active { transform: scale(0.96); }

.stamp-btn-1 { background: var(--signal-weak); color: var(--state-sealed); border-color: var(--line); }
.stamp-btn-2 { background: var(--signal-weak); color: var(--state-sealed); border-color: var(--line); }
.stamp-btn-3 { background: var(--signal); color: var(--signal-ink); }

/* --- Estadísticas --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
}

.stat-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-2);
}

.stat-icon-customers { background: var(--signal-weak); color: var(--state-sealed); }
.stat-icon-stamps { background: rgba(154, 101, 32, 0.1); color: var(--state-wait); }
.stat-icon-stamps .brand-mark { width: 22px; height: 22px; }
.stat-icon-redeemed { background: rgba(200, 53, 46, 0.1); color: var(--state-full); }

.stat-value {
  font-family: var(--font-machine);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-1);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --- Tablas / paneles --- */
.customer-table-container, .settings-panel, .menu-management, .panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.customer-table-container { overflow-x: auto; }

.customer-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.85rem; }

.customer-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--ink-3);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.customer-table td {
  padding: 12px;
  color: var(--ink-1);
  border-bottom: 1px solid var(--line);
}

.customer-table tbody tr:last-child td { border-bottom: none; }

/* --- Formularios --- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group { margin-bottom: 14px; }

.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.form-input, .form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-1);
  font-family: var(--font-human);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--dur-press) ease;
}

.form-input:focus, .form-select:focus { border-color: var(--signal); }

.form-error {
  font-size: 0.78rem;
  color: var(--state-full);
  margin-top: 6px;
}

/* Consent checkboxes (alta / signup) — deliberately never pre-checked in
   markup (see public/index.html #view-alta). A row per consent, not a
   single "accept everything" toggle, so términos and marketing stay two
   separate, individually-revocable choices (see legal/aviso-privacidad.md
   §5 and routes/customerAuth.js POST /register). */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--signal);
  flex-shrink: 0;
}

.consent-row label {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.4;
}

.consent-row label a { color: var(--signal); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-family: var(--font-human);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) ease, border-color var(--dur-press) ease, color var(--dur-press) ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--signal); color: var(--signal-ink); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: color-mix(in srgb, var(--signal) 88%, black); }
}

.btn-secondary {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { border-color: var(--ink-3); color: var(--ink-1); }
}

/* Destructivo: apagado en reposo, se enciende solo al hover/foco */
.btn-danger {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
  .btn-danger:hover {
    color: var(--state-full);
    border-color: var(--state-full);
    background: color-mix(in srgb, var(--state-full) 8%, transparent);
  }
}

.btn-sm { padding: 6px 12px; font-size: 0.75rem; }

/* --- Modales --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 27, 22, 0.45);
  padding: 20px;
  transition: opacity var(--dur-modal) var(--ease-out);
}

.modal-content {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-modal);
  transform-origin: center;
  animation: modalIn var(--dur-modal) var(--ease-out);
}

.modal-title {
  font-family: var(--font-voice);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.modal-subtitle { color: var(--ink-3); font-size: 0.85rem; }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

/* --- Nav móvil --- */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(var(--nav-height) + var(--safe-area-bottom));
  padding-bottom: var(--safe-area-bottom);
  background: rgba(250, 246, 239, 0.96);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

@media (prefers-color-scheme: dark) {
  .mobile-nav { background: rgba(23, 20, 15, 0.96); }
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--ink-3);
  font-family: var(--font-human);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.mobile-nav-item.active { color: var(--signal); }

@media (min-width: 768px) {
  .mobile-nav { display: none; }
}

/* --- Insignias / estados --- */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.badge-warning {
  background: rgba(154, 101, 32, 0.12);
  color: var(--state-wait);
  border: 1px solid rgba(154, 101, 32, 0.3);
}

.badge-success {
  background: var(--signal-weak);
  color: var(--state-sealed);
  border: 1px solid rgba(76, 122, 30, 0.3);
}

/* Vaso lleno / premio listo — mismo color que el reward-banner, en
   cualquier lugar donde aparezca la misma condición. */
.badge-ready {
  background: rgba(200, 53, 46, 0.1);
  color: var(--state-full);
  border: 1px solid rgba(200, 53, 46, 0.3);
}

/* --- Celebración: servir el premio (rara, aquí sí hay deleite) --- */
.modal-celebration { text-align: center; }

.celebration-icon { margin-bottom: 8px; }
.celebration-icon .brand-mark { width: 56px; height: 56px; }

.celebration-title {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.celebration-text {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

/* --- Gestión del menú (dentro de Configuración) --- */
.menu-items-list { display: flex; flex-direction: column; gap: 8px; }

.menu-mgmt-item-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.menu-mgmt-item-name { font-weight: 600; color: var(--ink-1); font-size: 0.88rem; }
.menu-mgmt-item-price { font-family: var(--font-machine); color: var(--ink-3); font-size: 0.82rem; }

.menu-mgmt-item-actions { display: flex; gap: 8px; }

/* --- Empty states: voz + dato, nunca una disculpa gris --- */
.empty-state {
  padding: 24px 8px;
  text-align: center;
}

.empty-state-voice {
  font-family: var(--font-voice);
  font-size: 1rem;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.empty-state-data {
  font-family: var(--font-machine);
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* ==========================================================================
   MOVIMIENTO — decidido por frecuencia de uso, no por gusto.
   El punto de venta (cajero, 100+/día) no lleva animación de entrada. El
   vaso del cliente (1 vez por visita) sí. Ver caso-scott-station.md / plan de diseño.
   ========================================================================== */

@keyframes pearlIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes modalIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes celebrate {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-celebration { animation: celebrate 320ms var(--ease-out); }

/* --- Accesibilidad: no negociable --- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}