/* ==========================================================================
   Café 107 — Base y componentes compartidos
   Todo lo que aparece en más de una página vive acá. Los CSS de página
   (home.css, carta.css, club.css) solo añaden lo que es exclusivo suyo.
   ========================================================================== */

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

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* El [hidden] del navegador es display:none, pero CUALQUIER regla de autor con
   display (por ejemplo .login-view{display:flex}) lo anula, y el elemento sigue
   viéndose aunque el atributo esté puesto. Esta línea evita esa clase de fallo
   en todo el sitio: si algo tiene [hidden], no se muestra y punto. */
[hidden]{display:none !important;}

/* Aviso de <noscript>. Va como clase y no con style="" en el HTML: la política
   de contenido (_headers) no permite estilos en línea. */
.noscript-msg{padding:20px;text-align:center;}

a{color:var(--accent);text-decoration:none;}

/* Foco visible y consistente en todo el sitio (accesibilidad por teclado) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{
  max-width:var(--maxw-wide);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}

/* Solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Tipografía compartida ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--success);
  margin-bottom:8px;
}
.theme-dark .eyebrow{color:var(--accent);letter-spacing:var(--ls-wide);}

h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:-.01em;}
em.accent,h1 em,h2 em{font-style:italic;color:var(--accent);font-weight:var(--fw-display-em);}

/* ---------- Fondo de marca -----------------------------------------------
   La marca de agua y el resplandor de las tres apps. Van en position:fixed
   detrás de todo (z-index:-1) y NO envolviendo al contenido: envolverlo pedía
   overflow:hidden para recortar el logo, y eso convierte al contenedor en área
   de scroll, lo que rompe cualquier position:sticky de adentro.

   No suma peticiones de red: es el mismo logo que ya baja la cabecera. */
.ground{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.ground-glow{
  position:absolute;right:-140px;top:120px;width:640px;height:640px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(94,193,190,.16),rgba(94,193,190,0) 62%);
}
.ground-mark{
  position:absolute;left:-110px;bottom:-90px;width:440px;height:440px;
  border-radius:50%;object-fit:cover;
  opacity:.05;filter:grayscale(1);
}
/* A 440 px sobre una pantalla de 375 el logo tapa media página aunque esté al
   5%: en móvil se queda solo el resplandor. */
@media (max-width:480px){.ground-mark{display:none;}}

/* ---------- Portada de página -------------------------------------------
   El bloque de entrada de las apps: volanta, titular y bajada, centrados y
   fuera de la tarjeta. */
.intro{text-align:center;margin-bottom:28px;}
.intro .eyebrow{margin:0 0 12px;color:var(--teal-700);letter-spacing:var(--ls-wide);}
.intro h1{margin:0;font-size:clamp(32px,5.2vw,52px);line-height:1.06;text-wrap:balance;}
.intro-sub{
  margin:14px auto 0;max-width:56ch;
  font-size:16.5px;line-height:1.6;color:var(--text-muted);text-wrap:pretty;
}

/* ---------- Grupo de píldoras (.seg) ------------------------------------
   Un solo control para los tres selectores del sitio: las pestañas del Club,
   recojo/delivery en la carta y el periodo del panel. El estado activo se lee
   de la clase .active O del ARIA que cada página ya ponía (aria-selected en un
   tablist, aria-pressed en un grupo de botones), para no tener que sincronizar
   dos cosas ni tocar el JS que genera los botones. */
.seg{
  display:flex;gap:6px;width:max-content;max-width:100%;
  padding:5px;border-radius:14px;background:rgba(46,29,20,.06);
}
.seg > button,
.seg > a{
  padding:11px 24px;border:none;border-radius:var(--r-sm);background:none;
  font-family:var(--font-body);font-size:14.5px;font-weight:500;
  color:var(--text-muted);cursor:pointer;white-space:nowrap;text-align:center;
  transition:background var(--t-fast),color var(--t-fast);
}
.seg > button:hover,
.seg > a:hover{background:rgba(46,29,20,.06);color:var(--text);}
.seg > .active,
.seg > [aria-selected="true"],
.seg > [aria-pressed="true"]{background:var(--text);color:var(--surface);}
.seg > .active:hover,
.seg > [aria-selected="true"]:hover,
.seg > [aria-pressed="true"]:hover{background:var(--text);color:var(--surface);}

/* En móvil las píldoras se reparten el ancho de la página en vez de crecer con
   su texto. Sin esto, tres etiquetas largas —los canales de la carta— se salen
   de la pantalla, y dos etiquetas largas y centradas —las pestañas del Club—
   quedaban descolgadas del formulario.

   Se permite que la etiqueta parta en dos renglones (`white-space:normal`, que
   anula el `nowrap` de arriba): a tres columnas "Atención en mesa" ya no entra
   en una línea, y cortar el texto o encogerlo más sería peor que un renglón de
   más. Los botones igualan su alto solos, porque .seg es flex.

   Vive acá, junto a .seg, y no en el CSS de cada página: es el mismo problema y
   la misma solución para las dos. Se aplica con la clase, no a todo .seg: el
   selector de periodo del panel tiene etiquetas cortas y a ancho de contenido se
   ve mejor. */
@media (max-width:480px){
  .seg-full-sm{width:100%;}
  .seg-full-sm > button,
  .seg-full-sm > a{flex:1;padding:10px 8px;font-size:13px;white-space:normal;}
}

/* ---------- Cabecera compartida de las apps (inyectada por core.js) ---------- */
.app-header{border-bottom:1px solid var(--line);background:var(--surface);}
.app-header .wrap{
  max-width:var(--maxw-content);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:12px;padding-bottom:12px;
}
.app-header .brand{display:flex;align-items:center;gap:11px;color:var(--text);}
.app-header .brand img{
  width:36px;height:36px;border-radius:10px;background:var(--teal-500);
  padding:3px;object-fit:contain;flex-shrink:0;
}
.app-header .brand-name{display:block;font-family:var(--font-display);font-size:17px;line-height:1.1;}
.app-header .brand-sub{
  display:block;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--success);
}
.app-header nav{display:flex;align-items:center;gap:8px;}
.app-header nav a{
  font-size:12.5px;font-weight:600;color:var(--text-muted);
  padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  white-space:nowrap;
}
.app-header nav a:hover{background:var(--text);border-color:var(--text);color:var(--surface);}
.app-header nav a[aria-current="page"]{
  background:var(--text);border-color:var(--text);color:var(--surface);
}
@media (max-width:480px){
  .app-header .brand-sub{display:none;}
  .app-header nav a{padding:7px 11px;font-size:12px;}
}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:15px;
  border:none;border-radius:var(--r-md);padding:15px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background var(--t-fast),transform .1s ease,opacity var(--t-fast);
}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn:not(:disabled):active{transform:scale(.99);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:not(:disabled):hover{background:var(--accent-hover);}
.btn-success{background:var(--success);color:var(--cream-50);}
.btn-solid{
  background:var(--text);color:var(--surface);
  border-radius:var(--r-sm);padding:11px 20px;font-size:13px;font-weight:600;
}
.btn-block{width:100%;}

/* ---------- Tarjeta de contenido ---------------------------------------
   La superficie de papel sobre la que se apoya el contenido de las apps: el
   formulario del Club, el resumen del pedido y las tarjetas del panel. */
.card-shell{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:32px 34px 34px;
  box-shadow:0 14px 36px rgba(46,29,20,.05);
}

/* Separador que se desvanece: divide sin cortar de lado a lado. */
.rule{height:1px;background:linear-gradient(90deg,var(--line-strong),transparent);}

/* ---------- Campos de formulario -----------------------------------------
   .field es la fila completa (etiqueta + control + ayuda + error); .input-box
   es solo el control. */
.field{display:flex;flex-direction:column;gap:7px;margin:0;}
.field label,
.field legend{
  padding:0;font-family:var(--font-body);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);
}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;}
.field-help{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.field-help.warm{color:var(--accent);}
.field-error-msg{margin-top:0;}

/* Error del envío (reemplaza al alert() que había antes) */
.form-error{
  display:none;margin:0 0 16px;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(168,64,47,.08);border:1px solid rgba(168,64,47,.3);
  color:var(--danger);font-size:13.5px;font-weight:600;line-height:1.5;
}
.form-error.show{display:block;}

.input-box{
  width:100%;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:16px; /* 16px evita el zoom automático de iOS al enfocar */
  color:var(--text);
  outline:none;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input-box::placeholder{color:var(--text-subtle);}
.input-box:hover{border-color:var(--teal-500);}
.input-box:focus{
  border-color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(94,193,190,.22);
}
/* El anillo de 3 px más el cambio de borde YA son un indicador de foco visible
   (WCAG 2.4.7); el contorno del sistema encima se duplicaba. Solo se quita
   donde hay reemplazo, nunca a secas. */
.input-box:focus-visible{outline:none;}

/* Estado de error — un solo estilo para las tres apps */
.input-error{
  border-color:var(--danger) !important;
  background:rgba(168,64,47,.06);
}
.field-error-msg{
  display:none;color:var(--danger);font-size:11.5px;
  margin-top:5px;font-weight:600;
}
.field-error-msg.show{display:block;}

/* Campo trampa anti-bots: fuera de la vista, pero no display:none
   (algunos bots ignoran los campos con display:none) */
.hp-field{
  position:absolute;left:-9999px;top:-9999px;
  opacity:0;height:0;overflow:hidden;
}

/* ---------- Estados vacíos / avisos ---------- */
.empty-state{
  text-align:center;padding:50px 20px;
  color:var(--text-subtle);font-size:13.5px;line-height:1.55;
}

/* ---------- Respeto por "reducir movimiento" ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .app-header,.no-print{display:none !important;}
}