/* ==========================================================================
   Café 107 — Club 107 (estilos exclusivos de esta página)
   ========================================================================== */

/* ---------- Columna ------------------------------------------------------
   El Club se queda en los 900px por defecto de --maxw-content porque las dos
   caras de la tarjeta física solo caben lado a lado a ese ancho. El formulario,
   en cambio, se estrecha a 720: a 900 las líneas del texto de consentimiento se
   pasan de largo y los campos quedan desproporcionados. */
.app{max-width:var(--maxw-content);margin:0 auto;padding:34px var(--pad-x) 84px;}
.intro,
#view-form{max-width:720px;margin-left:auto;margin-right:auto;}

/* El selector de vistas va centrado bajo la portada. .seg es a ancho de
   contenido, así que no lo centra el text-align del contenedor: necesita
   márgenes automáticos. */
#tabs{margin:0 auto 26px;}

/* La regla móvil de .seg-full-sm (las pestañas se reparten el ancho) se mudó a
   base.css, junto a .seg: la carta la necesita igual para sus tres canales, y
   tenerla acá obligaba a que el CSS del Club estuviera cargado para que la otra
   página se viera bien. */

/* ---------- Vistas (formulario / tarjeta) ---------- */
.view{display:none;}
.view.active{display:block;animation:fade var(--t-med);}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* El formulario ES la tarjeta. El espaciado entre bloques lo pone el gap, no
   los márgenes de cada campo: así un campo nuevo entra en su sitio sin tener
   que acordarse de darle margen. */
form.card-shell{display:flex;flex-direction:column;gap:22px;}

/* ---------- Pasos --------------------------------------------------------
   Parten el formulario en dos tramos ("tus datos" / "tu gusto") para que no se
   lea como una lista larga de campos. La insignia del paso 2 va en fresa: es
   la parte opcional, y el color la separa de la obligatoria. */
.step{display:flex;align-items:baseline;gap:11px;}
.step i{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:12px;font-weight:700;font-style:normal;
  background:rgba(94,193,190,.24);color:var(--teal-700);
}
.step-b i{background:rgba(232,101,122,.2);color:var(--berry-600);}
.step h2{margin:0;font-size:22px;line-height:1.2;}
.step small{margin-left:auto;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}


.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;}
@media (max-width:560px){.row2{grid-template-columns:1fr;}}

/* Prefijo del país. Va absoluto DENTRO del campo, y no como una caja aparte
   con el input sin borde, para que .input-error siga marcando el borde que se
   ve sin necesidad de replicar el estado en el envoltorio. */
.phone-input{position:relative;}
.phone-cc{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  padding:2px 8px;border-radius:6px;background:rgba(46,29,20,.08);
  font-size:14px;color:var(--text-muted);pointer-events:none;
}
.phone-input .input-box{padding-left:62px;}

/* ---------- Preferencias (chips) ---------- */
.field-tags{border:0;padding:0;margin:0;min-width:0;}
.tags{position:relative;display:flex;flex-wrap:wrap;gap:9px;}
/* La casilla real sigue en el DOM (accesible y enviable); lo que se ve y se
   pulsa es su <label>. */
.tags input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
/* Caja baja: los chips heredaban de .field label las mayúsculas y el
   interletrado ancho, que a 14.5px hacían de cada opción un cartel. */
.tags label{
  padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:14.5px;text-transform:none;letter-spacing:normal;
  color:var(--text-muted);cursor:pointer;user-select:none;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.tags label:hover{border-color:var(--teal-500);background:rgba(94,193,190,.1);color:var(--text);}
.tags input:checked + label{background:var(--text);border-color:var(--text);color:var(--surface);}
.tags input:focus-visible + label{outline:2px solid var(--teal-700);outline-offset:2px;}

/* ---------- Consentimiento ---------- */
.consent{
  display:flex;gap:12px;align-items:flex-start;margin:0;
  background:rgba(94,193,190,.1);border:1px solid rgba(94,193,190,.28);
  border-radius:var(--r-md);padding:16px 18px;
}
.consent input[type=checkbox]{
  flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--teal-700);
}
.consent label{font-size:13.2px;line-height:1.55;color:var(--text-muted);cursor:pointer;}

/* ---------- Envío ---------- */
.submit .btn{width:100%;}

.success{display:none;text-align:center;padding:46px 30px;}
.success.show{display:block;}
.success .ico{font-size:44px;line-height:1;margin-bottom:12px;}
.success h2{font-size:27px;margin:0 0 10px;}
.success p{margin:0 auto;max-width:44ch;color:var(--text-muted);font-size:15px;line-height:1.55;}

.privacy-note{
  text-align:center;font-size:11.5px;color:var(--text-muted);
  margin-top:18px;line-height:1.5;
}

/* ---------- Tarjeta física ---------- */
.print-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;flex-wrap:wrap;gap:10px;
}
.print-toolbar p{margin:0;font-size:13px;color:var(--text-muted);max-width:50ch;}
.card-stage{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
  background:var(--cream-300);padding:40px;border-radius:18px;
}
.biz-card{
  /* Tamaño real, en milímetros: es para recortar, y así la vista previa mide lo
     mismo que el papel. 85,6 × 54 mm, la tarjeta de billetera estándar: entra en
     las ranuras para tarjetas. Se probó 95,6 × 64 (sellos más grandes) y se
     volvió a esta medida el 11/10/2026: pesa más que el cliente la lleve consigo.
     El alto lo leen el anverso y el reverso para calcular el tamaño de los
     sellos y del QR: cambiarlo acá los reajusta solos. */
  --card-w:85.6mm;
  --card-h:54mm;
  --card-pad:4mm;
  width:var(--card-w);height:var(--card-h);
  border-radius:14px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-md),0 2px 6px rgba(46,29,20,.15);
  font-family:var(--font-body);
}
/* El anverso se mide en mm, como la tarjeta: lo que manda es el tamaño de los
   sellos, y el resto se acomoda a ellos.

   Los sellos llenan el alto: tres filas con 2 mm entre ellas y el margen de
   4 mm arriba y abajo. Con 54 mm de alto salen de 14 mm, que es justo lo que
   pide el uso real: un sello o tampón redondo chico mide 10-12 mm, un sticker
   1/2" 12,7 mm, y hace falta 1-2 mm de holgura para un sellado a mano. Así el
   margen es el mismo en los cuatro bordes y no queda una franja vacía arriba
   y abajo de la grilla.

   La columna de texto se queda con lo que sobra a la izquierda: 27,6 mm. */
.biz-card.front{
  --stamp-gap:2mm;
  --stamp-d:calc((var(--card-h) - 2 * var(--card-pad) - 2 * var(--stamp-gap)) / 3);
  --stamps-w:calc(3 * var(--stamp-d) + 2 * var(--stamp-gap));
  background:var(--ink-700);color:var(--cream-50);padding:var(--card-pad);
}
/* Columna de texto: el nombre arriba y la leyenda abajo, alineada con la
   última fila de sellos. Arriba y abajo los bordes de la columna coinciden con
   los de la grilla, en vez de dejar un hueco suelto bajo el texto. */
.biz-card.front{display:flex;flex-direction:column;}
.biz-card.front > :not(.stamps){max-width:calc(100% - var(--stamps-w) - 4mm);}
.biz-card.front .tag{margin-top:auto;}
/* "CHINCHA ALTA, ICA" tiene que entrar en una línea en los ~27 mm que deja la
   grilla: con la letra y el espaciado de las otras volantas se partía en dos.
   8,5 px son ~6,4 pt, todavía legible impreso. */
.biz-card.front .eyebrow2{font-size:8.5px;letter-spacing:.12em;white-space:nowrap;}
/* El reverso usa la misma lógica que el anverso: medidas en mm, margen de 4 mm
   a los cuatro bordes, y la columna de texto alineada con el elemento de la
   derecha — acá el QR, que es lo que manda.

   El cuadro mide 16/27 del alto de la tarjeta: 32 mm con 54 mm de alto. El QR
   tiene que poder escanearse con el celular a la distancia de una mano
   (20-30 cm): la regla práctica es un código de 2 cm como mínimo y 2,5 cm para
   que lea al primer intento. Dentro del cuadro el PNG ocupa ~28,5 mm y su
   margen blanco obligatorio (4 módulos por lado) se lleva cerca de un cuarto,
   así que el código en sí queda en ~22 mm. Hace tiempo el cuadro medía
   20,6 mm y el código ~14 mm: en el límite.

   Va centrado en vertical (11 mm arriba y abajo) en vez de pegado a la
   esquina: así no queda un hueco suelto debajo. */
.biz-card.back{
  --qr-box:calc(var(--card-h) * 16 / 27);
  background:var(--cream-50);color:var(--ink-700);padding:var(--card-pad);
  /* El filete va como sombra interior y no como border: un border de 1 px
     corría todo 0,26 mm hacia adentro y el margen salía de 4,3 mm, distinto
     del anverso. (Al imprimir, las dos caras llevan el mismo border fino.) */
  box-shadow:var(--shadow-md),0 2px 6px rgba(46,29,20,.15),inset 0 0 0 1px var(--line);
  display:flex;flex-direction:column;
}
.biz-card.back > :not(.qr-box){max-width:calc(100% - var(--qr-box) - 4mm);}

.eyebrow2{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:6px;
}
.biz-card.front .eyebrow2{color:var(--gold-500);}
.biz-card.back .eyebrow2{color:var(--leaf-500);}
.biz-card.front .name{font-family:var(--font-display);font-size:26px;font-weight:var(--fw-display);line-height:1.05;}
/* "107" en el turquesa de la marca (el del logo y de la portada), en su
   variante para fondo oscuro. Antes iba en cereza. */
.biz-card.front .name em{color:var(--teal-400);font-style:italic;font-weight:var(--fw-display-em);}
.biz-card.front .tag{font-size:11px;color:rgba(251,247,236,.65);}

.stamps{
  position:absolute;right:var(--card-pad);top:var(--card-pad);bottom:var(--card-pad);
  display:grid;align-content:center;
  grid-template-columns:repeat(3,var(--stamp-d));
  grid-auto-rows:var(--stamp-d);
  gap:var(--stamp-gap);
}
/* Círculo LLENO de crema, no un contorno sobre el café: la tinta de un tampón
   (azul, negra, roja) no se ve sobre el fondo oscuro de la tarjeta. Así el
   sello cae sobre papel claro, como en cualquier tarjeta de fidelidad. */
.stamp{
  border-radius:50%;display:block;position:relative;
  background:var(--cream-50);
  box-shadow:inset 0 0 0 .3mm rgba(46,29,20,.18);
}
/* El último es el premio: anillo dorado y una estrella tenue, que no compite
   con el sello que se le ponga encima. */
.stamp:last-child{box-shadow:inset 0 0 0 .6mm var(--gold-500);}
.stamp:last-child::after{
  content:"★";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:6mm;line-height:1;color:var(--gold-500);opacity:.45;
}

.biz-card.back h3{font-size:16.5px;margin:0 0 6px;}
.biz-card.back p{font-size:11px;line-height:1.5;color:var(--text-muted);margin:0;}
.qr-box{
  position:absolute;right:var(--card-pad);top:50%;transform:translateY(-50%);
  width:var(--qr-box);height:var(--qr-box);box-sizing:border-box;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-mono);font-size:7.5px;text-align:center;
  color:var(--text-subtle);word-break:break-all;padding:1.5mm;
}
/* pixelated: un QR son cuadrados duros. Al escalar el PNG, el suavizado por
   omisión difumina los bordes de los módulos, que es justo lo que lee la cámara. */
.qr-box img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.back-foot{margin-top:auto;font-size:9.5px;color:var(--text-subtle);}

@media print{
  @page{margin:12mm;}

  body{background:#fff;}
  .ground,.seg,.intro,.print-toolbar{display:none !important;}

  /* Se imprime la vista que está a la vista. Antes se exigía .print-active, que
     solo pone el botón "Imprimir tarjeta": con Ctrl+P se ocultaban las dos
     vistas y salía una hoja en blanco. */
  .view:not(.active):not(.print-active){display:none !important;}

  .card-stage{background:#fff;padding:0;gap:12mm;}

  .biz-card{
    box-shadow:none;border:.3px solid #ccc;
    break-inside:avoid;

    /* El color de la tarjeta NO es decoración: el anverso es texto crema sobre
       café oscuro. Si el navegador descarta los fondos al imprimir —que es lo
       que hace por omisión— el texto sale casi blanco sobre blanco y los sellos
       desaparecen. Esto obliga a imprimir fondo y color aunque el diálogo tenga
       desactivadas las "imágenes de fondo". Es heredable: cubre a los hijos. */
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .app{padding:0;max-width:none;}
}

/* El panel del negocio se mudó a /admin/ — sus estilos viven en admin.css */

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .app{padding:24px 14px 70px;}
  .card-shell{padding:26px 20px 28px;border-radius:18px;}
  .intro-sub{font-size:15px;}
  .step h2{font-size:20px;}
  .step small{display:none;}
  /* La tarjeta mide 85,6 mm (~324 px) en tamaño real: unos px más que el ancho
     útil de un celular de 375 px, descontados los rellenos. No se encoge —la vista previa tiene que medir lo mismo que el
     papel—: la mesa se desplaza de lado dentro de sí misma, y la página no. */
  .card-stage{padding:20px 14px;gap:18px;justify-content:flex-start;overflow-x:auto;}
  .biz-card{flex-shrink:0;}
  .print-toolbar{align-items:flex-start;}
}