/* Base de Romina para la web, sistema de diseño v2. El color, la tipografía, las fuentes y el
   espaciado vienen de tokens.css, que se genera de tokens.json; aquí solo van los componentes. */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Cuerpo de 18 px, como pide la accesibilidad del proyecto. */
  font-size: calc(18px * var(--escala-letra, 1));
  line-height: calc(28px * var(--escala-letra, 1));
  -webkit-font-smoothing: antialiased;
}

/* "Tamaño de letra" de Cuenta. Multiplica los tamaños de tokens.css y los de aquí; el
   atributo va en <html> para que valga desde el primer pintado, antes de que arranque
   Blazor. Grande es el tamaño de los tokens tal cual; Normal lo baja al 88 %, igual que
   en iOS. */
:root { --escala-letra: 0.88; }
:root[data-letra="grande"] { --escala-letra: 1; }

/* Cuerpo en negrita: el token no trae este estilo, pero el mockup lo usa en cada línea
   que hay que leer de un vistazo (estado del local, nombre del canal, un error). */
.cuerpo-fuerte {
  font-size: calc(18px * var(--escala-letra, 1));
  line-height: calc(28px * var(--escala-letra, 1));
  font-weight: 700;
}

/* Control segmentado (Mapa/Paseo, Recoger/Mesa, tema, tamaño de letra) y campos de texto.
   Vivían repetidos en cada página; a Paseo se le había olvidado y su "Mapa 2D" salía como
   un enlace azul sin estilo. Una sola definición aquí y todas las páginas coinciden. */
.seg {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: calc(60px * var(--escala-letra, 1));
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted);
  font-family: inherit; font-size: calc(16px * var(--escala-letra, 1)); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
/* v2: lo elegido es verde de marca con sombra de tarjeta. El bronce queda para el detalle (la regla
   bajo los títulos, el punto de la pestaña activa), porque si todo es bronce nada lo es. */
.seg.on { background: var(--bg-brand); color: var(--text-on-brand); box-shadow: var(--shadow-card); }

.campo {
  min-height: calc(60px * var(--escala-letra, 1));
  padding: 0 14px; font-family: inherit; font-size: calc(18px * var(--escala-letra, 1));
  color: var(--text); background: var(--bg-sunken);
  border: var(--border-control) solid var(--border-strong); border-radius: var(--radius-md);
}

/* La luz viene de abajo: el mismo resplandor que en iOS. */
.fondo-romina {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 34% at 50% 100%, var(--glow-a) 0%, transparent 70%),
    radial-gradient(45% 30% at 0% 18%, var(--glow-b) 0%, transparent 70%),
    radial-gradient(40% 26% at 100% 55%, var(--glow-c) 0%, transparent 70%);
}

.pagina {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Cristal como en el mockup v2. En v1 el tinte iba al 34 % porque sobre el fondo oscuro el cristal
   enterraba el desenfoque; en claro, que es el tema principal, eso dejaba las tarjetas marfil sobre
   marfil sin borde que se leyera. Ahora la tarjeta se separa del fondo por el cristal entero y la
   sombra suave, que es como lo pinta el mockup. */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: var(--border-hairline) solid var(--glass-border);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-hi);
  border-radius: var(--radius-md);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--bg-raised); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--bg-raised); backdrop-filter: none; }
}

/* Controles: 56 px de alto mínimo en todo lo táctil. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(var(--touch-target) * var(--escala-letra, 1));
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: var(--border-control) solid transparent;
  font-family: inherit;
  font-size: calc(18px * var(--escala-letra, 1));
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  color: var(--text);
  background: transparent;
}
.btn-primary { background: var(--action-fill); color: var(--action-text); }
.btn-primary:hover { background: var(--action-fill-hover); box-shadow: var(--shadow-raised); }
.btn-secondary { border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-sunken); }
.btn-ghost { color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--disabled-fill); color: var(--disabled-text); cursor: default; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--touch-target) * var(--escala-letra, 1));
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: var(--border-control) solid var(--border-strong);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: calc(18px * var(--escala-letra, 1));
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.chip.on { background: var(--bg-brand); color: var(--text-on-brand); border-color: var(--bg-brand); }

/* Foco visible en todo control, en ambos temas. */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Enlaces sueltos en el color de enlace del tema, no en el azul del navegador. El bronce al pasar
   el ratón se limita a los enlaces de texto: en un <a class="btn"> pintaría letras bronce sobre el
   verde del botón. */
a { color: var(--text-link); }
a:not(.btn):not(.seg):not(.chip):hover { color: var(--accent); }

.carril {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--space-4) var(--space-3);
  margin: 0 calc(-1 * var(--space-4));
}
.carril > * { scroll-snap-align: start; flex-shrink: 0; }

.tarjeta { padding: var(--space-2); width: 176px; display: flex; flex-direction: column; gap: var(--space-2); }
.tarjeta .foto, .foto {
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
  padding: var(--space-2);
  color: var(--text);
  font-size: calc(12px * var(--escala-letra, 1));
  font-weight: 600;
}
.filete { height: var(--border-accent); border-radius: var(--radius-md) var(--radius-md) 0 0; }

.silencioso { color: var(--text-muted); }
.marca-ejemplo {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-pill);
  font-size: calc(12px * var(--escala-letra, 1)); font-weight: 600; color: var(--text-muted);
}

/* Cabecera y barra inferior */
.cabecera {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 2px;
  padding: 8px var(--space-3) 12px var(--space-4);
  border-bottom: var(--border-hairline) solid var(--glass-border);
}
.icono-cabecera {
  display: flex; align-items: center; justify-content: center;
  width: var(--touch-target); height: var(--touch-target);
  background: none; border: 0; cursor: pointer; color: var(--text); position: relative;
}
.icono-cabecera > span {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: var(--border-control) solid var(--border-strong); color: var(--text-muted);
}
.icono-cabecera.activo > span { background: var(--accent); color: var(--text-on-accent); border-color: transparent; box-shadow: var(--shadow-glow); }
.icono-cabecera .contador {
  position: absolute; top: 2px; right: 2px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--flamboyan-fill); color: var(--text-on-flamboyan);
  font-size: calc(13px * var(--escala-letra, 1)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

.barra-inferior {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 4;
  width: min(696px, calc(100% - 24px));
  display: flex; gap: 4px; padding: 6px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-hi);
}
.barra-inferior a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; border-radius: var(--radius-pill);
  text-decoration: none; color: var(--text-muted);
  font-size: calc(12px * var(--escala-letra, 1)); line-height: calc(14px * var(--escala-letra, 1)); font-weight: 700;
}
/* v2: la pestaña activa no se rellena. Cambia a text-brand y debajo aparece el punto bronce; así el
   estado no depende solo del color, que es regla del proyecto. */
.barra-inferior a.on { color: var(--text-brand); }
.barra-inferior .punto-activo { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); opacity: 0; }
.barra-inferior a.on .punto-activo { opacity: 1; }

/* Escritorio: el contenido no se estira de lado a lado. */
@media (min-width: 900px) {
  .pagina { padding-bottom: var(--space-7); }
  /* Sticky vive en el flujo: el centrado de `fixed` (left + transform) aquí lo descolocaba. */
  .barra-inferior {
    position: sticky;
    left: auto;
    transform: none;
    margin: 0 auto;
    bottom: var(--space-4);
  }
}

/* Aviso de error de Blazor: oculto salvo cuando la propia plataforma lo muestra. */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--flamboyan-fill);
  color: var(--text-on-flamboyan);
  font-weight: 700;
  box-shadow: var(--shadow-card);
}
#blazor-error-ui .reload { color: var(--text-on-flamboyan); margin-left: var(--space-3); }

/* Eventos (ver docs/decisiones/0010-eventos.md). Sin mockup: sigue el sistema v2. */
.mes-eventos {
  /* El mes se queda arriba mientras se recorren sus eventos, debajo de la cabecera. */
  position: sticky; top: var(--alto-cabecera, 80px); z-index: 2;
  align-self: flex-start;
  margin: 0; padding: 6px var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text-brand);
  font-size: calc(16px * var(--escala-letra, 1)); line-height: calc(28px * var(--escala-letra, 1));
}
.fila-evento {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); text-decoration: none; color: var(--text);
}
.bloque-fecha {
  flex-shrink: 0; min-width: 64px; min-height: 84px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-brand); color: var(--text-on-brand);
}
.bloque-fecha .dia { font-size: calc(28px * var(--escala-letra, 1)); line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.etiqueta-cuando {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border: var(--border-hairline) solid var(--border-brand); border-radius: var(--radius-pill);
  color: var(--text-accent); font-weight: 700; white-space: nowrap;
  font-size: calc(14px * var(--escala-letra, 1)); line-height: calc(20px * var(--escala-letra, 1));
}
.dato-evento {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-target);
  border-bottom: var(--border-hairline) solid var(--border);
}
.dato-evento:last-child { border-bottom: 0; }
.dato-evento > svg { color: var(--text-brand); flex-shrink: 0; }
.codigo-reservacion {
  font-size: calc(34px * var(--escala-letra, 1)); line-height: 1.2; font-weight: 800;
  letter-spacing: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-brand);
}
.boton-cantidad {
  width: var(--touch-target); height: var(--touch-target);
  display: flex; align-items: center; justify-content: center;
  border: var(--border-control) solid var(--border-strong); border-radius: var(--radius-md);
  background: none; color: var(--text); cursor: pointer;
}
.boton-cantidad:disabled { color: var(--disabled-text); border-color: var(--border); cursor: default; }

/* Carrusel de promociones de Inicio: se desliza de lado, se detiene alineado al margen y deja
   asomar la siguiente tarjeta para que se note que hay más. */
.carrusel {
  display: flex; gap: var(--space-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-4);
  margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1);
  scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { flex: 0 0 min(84%, 420px); scroll-snap-align: start; }
.carrusel > *:only-child { flex-basis: 100%; }
.tarjeta-promo-carrusel {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 190px; padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-brand); color: var(--text-on-brand); text-decoration: none;
}

/* Reel de Novedades: una publicación por pantalla que se desliza hacia arriba y se detiene en cada una.
   Alto de la ventana menos la cabecera, el botón de canales y la barra inferior. */
.reel {
  height: calc(100dvh - var(--alto-cabecera, 80px) - 190px);
  min-height: 420px;
  overflow-y: auto; scroll-snap-type: y mandatory;
  display: flex; flex-direction: column; gap: var(--space-3);
  border-radius: var(--radius-md);
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.tarjeta-reel {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: flex-end;
  border-radius: var(--radius-md); overflow: hidden;
  color: var(--text-on-brand);
}
.tarjeta-reel-texto { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); width: 100%; }

/* Aviso de un canal, a la manera de una publicación de Facebook: encabezado con fecha, texto,
   imagen a todo lo ancho y, abajo, separado por una línea, el "Me gusta". */
.post { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 0 var(--space-1); overflow: hidden; }
.post-cabeza { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
.bloque-fecha-chico { min-width: 52px; min-height: 64px; }
.bloque-fecha-chico .dia { font-size: calc(22px * var(--escala-letra, 1)); }
.post-imagen { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.post-pie {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin: 0 var(--space-4); padding-top: var(--space-2);
  border-top: var(--border-hairline) solid var(--border);
}
.post-accion {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-target); width: 100%;
  background: none; border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: calc(16px * var(--escala-letra, 1));
}
.post-accion:hover { background: var(--bg-sunken); }

/* Tarjetas parejas: el texto se corta a dos renglones y, donde hace falta, los reserva aunque use uno. */
.dos-renglones { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.reserva-dos { min-height: 2.6em; min-height: 2lh; }
.una-linea { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Locales hacia abajo: dos columnas en un teléfono, las que quepan en pantallas anchas. */
.rejilla-locales { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rejilla-locales > .tarjeta { width: auto; }

/* "Finaliza tu pedido" (decisión 0018). La cuenta: renglones de igual letra, tamaño y color; solo el total
   pesa más. */
.cuenta { display: flex; flex-direction: column; gap: 6px; }
.cuenta .renglon {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: calc(18px * var(--escala-letra, 1)); line-height: calc(28px * var(--escala-letra, 1));
}
.cuenta .renglon .monto { margin-left: auto; font-variant-numeric: tabular-nums; }
.cuenta .renglon.total { padding-top: 6px; border-top: var(--border-hairline) solid var(--border-strong); font-weight: 800; }
.cuenta .renglon.total.grande { font-size: calc(24px * var(--escala-letra, 1)); line-height: calc(32px * var(--escala-letra, 1)); }

/* La invitación a la propina: un panel verde muy suave, hecho con el verde de la marca. */
.propina {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); text-align: center;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--success) 10%, var(--bg-raised));
}
/* Las tres cantidades y "Otro monto" caben en un renglón del teléfono. */
.opciones-propina { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.opcion-propina {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: calc(var(--touch-target) * var(--escala-letra, 1) + 8px); min-width: 0; padding: 4px 6px;
  border-radius: var(--radius-md); border: var(--border-hairline) solid var(--border);
  background: var(--bg-raised); color: var(--text); font-family: inherit; cursor: pointer;
}
.opcion-propina .monto { font-size: calc(18px * var(--escala-letra, 1)); font-weight: 800; }
.opcion-propina .nota { font-size: calc(12px * var(--escala-letra, 1)); font-weight: 600; }
.opcion-propina .nota-fuerte { font-size: calc(15px * var(--escala-letra, 1)); line-height: 1.2; font-weight: 800; }
.opcion-propina.ancha { min-height: calc(var(--touch-target) * var(--escala-letra, 1)); font-size: calc(16px * var(--escala-letra, 1)); font-weight: 600; border-color: var(--border-strong); }
/* Sugerida: solo un contorno más firme. Elegida: rellena. No deben confundirse. */
.opcion-propina.sugerida { border: var(--border-control) solid var(--bg-brand); }
.opcion-propina.on { background: var(--bg-brand); color: var(--text-on-brand); border-color: var(--bg-brand); }
.opcion-propina:disabled { opacity: .7; cursor: progress; }

/* La promoción en curso de un platillo, en su tarjeta. Píldora, como los chips; bronce suave: es detalle. */
.marca-promo {
  align-self: flex-start; max-width: 100%;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--text-brand);
  font-size: calc(12px * var(--escala-letra, 1)); font-weight: 700;
}

/* Hoja que sube desde abajo y su velo. Las usa más de un componente (opciones del platillo, datos de la tarjeta). */
.velo { position: fixed; inset: 0; background: var(--overlay); z-index: 20; }
.hoja {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 21;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  /* La barra inferior flota por encima del contenido: el fondo de la hoja la libra, para que sus
     últimos botones no queden debajo. */
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 92px); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-raised);
}