/* RefinApp — tokens de diseño portados desde tailwind.config.js del proyecto Next.js.
   Se escriben como CSS plano en vez de montar Tailwind en el proyecto .NET: son ~15 valores
   y una docena de componentes, y agregar el pipeline de Node a la compilación de .NET
   costaría más de lo que ahorra. Si la UI crece mucho, ahí sí vale reconsiderarlo. */

:root {
  --masa: #0B1120;
  --masa-card: #141D33;
  --masa-line: #28324A;
  --tinta: #F2F5FA;
  --tinta-muted: #9AA6C2;
  --chile: #E8683D;
  --radio-card: 18px;
  --radio-pill: 999px;
  --fuente-display: 'Poppins', system-ui, sans-serif;
  --fuente-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* La app es de tema oscuro fijo — no hay variante clara, igual que en Next.js. */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--masa);
  color: var(--tinta);
  font-family: var(--fuente-body);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

.pantalla {
  max-width: 28rem;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 4rem;
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 3.5rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  background: var(--masa);
  border-bottom: 1px solid var(--masa-line);
}
.encabezado .marca { font-family: var(--fuente-display); font-weight: 600; font-size: 1rem; }
.encabezado .sub { margin-left: .5rem; color: var(--tinta-muted); font-size: .875rem; }

.app-shell-header {
  align-items: center;
  background: var(--masa);
  border-bottom: 1px solid var(--masa-line);
  display: flex;
  height: 3.75rem;
  justify-content: space-between;
  padding: 0 .9rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.marca-refinapp { align-items: center; display: inline-flex; font-family: var(--fuente-display); font-size: 1rem; font-weight: 600; gap: .5rem; }
.marca-refinapp-icono { background: url("/images/vaquero.png?v=2") center / contain no-repeat; display: block; height: 2.25rem; width: 2.25rem; }
.app-shell-header select { background: var(--masa-card); border: 1px solid var(--masa-line); border-radius: var(--radio-pill); color: var(--tinta); font: inherit; font-size: .8125rem; padding: .375rem .625rem; }

.saludo {
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 1rem 1rem .75rem;
  margin: 0;
}

/* Categorías: SIN scroll horizontal, a propósito.

   Un contenedor con overflow-x se come el toque en pantallas táctiles — si el dedo se mueve
   dos o tres píxeles al tocar, el navegador lo interpreta como gesto de deslizar y el clic
   nunca se dispara. Con mouse no pasa, por eso el bug solo aparecía en celular y no se
   reproducía en el navegador de escritorio. Que las categorías bajen de línea lo elimina de
   raíz y además ninguna queda escondida fuera de la pantalla.

   Si alguien vuelve a poner overflow-x aquí, vuelve el bug. */
.categorias {
  position: sticky;
  top: 3.75rem;
  z-index: 30;
  background: var(--masa);
  padding: 0 1rem .5rem;
}
.categorias nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: .25rem;
}
.categorias button {
  /* 44px es el mínimo para acertarle con el dedo. Antes medían 29px. */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tinta-muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
}
.categorias button[aria-current="true"] {
  border-bottom-color: var(--chile);
  color: var(--tinta);
}

.platillos { list-style: none; margin: 0; padding: .5rem 1rem; display: flex; flex-direction: column; gap: .75rem; }

.platillo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--masa-line);
  border-radius: var(--radio-card);
  background: var(--masa-card);
  padding: 1rem;
}
.platillo.agotado { opacity: .6; }
.platillo .nombre { font-weight: 500; margin: 0; }
.platillo .desc { margin: .125rem 0 0; font-size: .875rem; color: var(--tinta-muted); }
.platillo .no-hay { margin: .125rem 0 0; font-size: .875rem; font-weight: 500; color: var(--chile); }
.platillo .precio { margin: .5rem 0 0; font-size: .875rem; font-weight: 500; }
.platillo .elegir {
  flex-shrink: 0;
  border: 1px solid rgba(242,245,250,.2);
  border-radius: var(--radio-pill);
  background: var(--masa);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}

.negocio {
  margin: 2rem 1rem 0;
  border: 1px solid var(--masa-line);
  border-radius: var(--radio-card);
  background: var(--masa-card);
  padding: 1rem;
}
.negocio .fila { display: flex; align-items: center; justify-content: space-between; }
.negocio .nombre { font-size: .875rem; font-weight: 500; margin: 0; }
.negocio .cerrado {
  border-radius: var(--radio-pill);
  background: rgba(242,245,250,.1);
  padding: .25rem .625rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tinta-muted);
}
.negocio dl { margin: .75rem 0 0; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; }
.negocio dt { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta-muted); }
.negocio dd { margin: 0; }
.negocio dd a { color: var(--chile); }

.vacio { padding: 0 1rem; font-size: .875rem; color: var(--tinta-muted); }

/* Portal raíz: los menús viven en subdominios; refinapp.sonorapp.com.mx es la entrada. */
.portal { min-height: calc(100vh - 3.75rem); }
.portal-hero { max-width: 42rem; margin: 0 auto; padding: clamp(5rem, 16vh, 10rem) 1.5rem 3rem; }
.portal-mascota { display: block; height: clamp(6rem, 17vw, 9.5rem); margin: 0 0 1.5rem; object-fit: contain; width: auto; }
.portal-eyebrow { color: var(--chile); font-size: .75rem; font-weight: 600; letter-spacing: .08em; margin: 0 0 1rem; text-transform: uppercase; }
.portal-hero h1 { font-family: var(--fuente-display); font-size: clamp(2.5rem, 9vw, 4.75rem); line-height: 1.04; margin: 0; max-width: 11ch; }
.portal-hero > p:not(.portal-eyebrow) { color: var(--tinta-muted); font-size: 1.0625rem; line-height: 1.6; margin: 1.5rem 0 2rem; max-width: 38rem; }
.portal-cta { background: var(--chile); border-radius: var(--radio-pill); display: inline-flex; font-weight: 600; min-height: 2.75rem; align-items: center; padding: 0 1.25rem; }

.directorio { margin: 0 auto; max-width: 48rem; padding: 2rem 1rem 4rem; }
.directorio-hero { padding: 1.5rem .5rem 2.5rem; }
.directorio-hero h1 { font-family: var(--fuente-display); font-size: clamp(2.35rem, 9vw, 4rem); letter-spacing: -.045em; line-height: 1.05; margin: 0; max-width: 11ch; }
.directorio-hero > p:not(.portal-eyebrow) { color: var(--tinta-muted); line-height: 1.6; margin: 1rem 0 0; max-width: 34rem; }
.directorio-hero .portal-mascota { height: 6rem; margin-bottom: 1rem; }
.seccion-titulo { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.seccion-titulo h2 { font-family: var(--fuente-display); font-size: 1.35rem; margin: 0; }
.seccion-titulo span { color: var(--tinta-muted); font-size: .8125rem; }
.tarjetas-restaurante { display: grid; gap: .75rem; }
.tarjeta-restaurante { align-items: center; background: var(--masa-card); border: 1px solid var(--masa-line); border-radius: var(--radio-card); display: grid; gap: .875rem; grid-template-columns: 3rem 1fr auto; padding: 1rem; transition: border-color .15s ease, transform .15s ease; }
.tarjeta-restaurante:hover { border-color: var(--chile); transform: translateY(-2px); }
.tarjeta-restaurante-inicial { align-items: center; background: rgba(232,104,61,.15); border: 1px solid rgba(232,104,61,.4); border-radius: 50%; color: var(--chile); display: flex; font-family: var(--fuente-display); font-size: 1.25rem; font-weight: 600; height: 3rem; justify-content: center; width: 3rem; }
.tarjeta-restaurante h3 { font-size: 1rem; margin: 0; }.tarjeta-restaurante p,.tarjeta-restaurante small { color: var(--tinta-muted); display: block; font-size: .8125rem; margin: .2rem 0 0; }.tarjeta-restaurante small { margin-top: .35rem; }
.estado-restaurante { border-radius: var(--radio-pill); color: var(--tinta-muted); font-size: .6875rem; font-weight: 600; padding: .3rem .5rem; white-space: nowrap; }.estado-restaurante.abierto { background: rgba(98,181,125,.14); color: #8ed5a4; }

/* Acceso: una sola marca global en el encabezado; la tarjeta concentra la acción. */
.login-pagina { align-items: center; display: flex; justify-content: center; min-height: calc(100vh - 3.75rem); padding: 1.5rem; }
.login-tarjeta { background: linear-gradient(145deg, rgba(20,29,51,.94), var(--masa-card)); border: 1px solid var(--masa-line); border-radius: var(--radio-card); box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.22); max-width: 27rem; padding: clamp(1.75rem, 6vw, 2.5rem); width: 100%; }
.login-eyebrow { color: var(--chile); font-size: .75rem; font-weight: 600; letter-spacing: .1em; margin: 0 0 .75rem; text-transform: uppercase; }
.login-tarjeta h1 { font-family: var(--fuente-display); font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: -.04em; line-height: 1.05; margin: 0; }
.login-descripcion { color: var(--tinta-muted); line-height: 1.55; margin: 1rem 0 2rem; max-width: 31ch; }
.login-error { background: rgba(232,104,61,.12); border: 1px solid rgba(232,104,61,.45); border-radius: .75rem; color: var(--tinta); font-size: .875rem; line-height: 1.45; margin: 0 0 1rem; padding: .75rem 1rem; }
.boton-google { align-items: center; background: var(--tinta); border: 1px solid transparent; border-radius: var(--radio-pill); color: var(--masa); display: flex; font-weight: 650; gap: .75rem; justify-content: center; min-height: 3rem; padding: 0 1rem; transition: background .15s ease, transform .15s ease; }
.boton-google span { align-items: center; background: white; border-radius: 50%; color: #4285f4; display: inline-flex; font-family: Arial, sans-serif; font-size: .9rem; font-weight: 700; height: 1.4rem; justify-content: center; width: 1.4rem; }
.boton-google:hover { background: white; transform: translateY(-1px); }
.boton-google:focus-visible { outline: 3px solid var(--chile); outline-offset: 3px; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: black;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Detalle de platillo y carrito ---- */

.volver { display:inline-block; font-size:.875rem; color:var(--tinta-muted); min-height:2.75rem; line-height:2.75rem; }

.titulo-platillo { font-family:var(--fuente-display); font-size:1.25rem; font-weight:500; margin:.25rem 0 0; }
.desc-platillo { margin:.25rem 0 0; font-size:.875rem; color:var(--tinta-muted); }

.grupo { border:none; margin:1.5rem 0 0; padding:0; }
.grupo legend { font-size:.875rem; font-weight:500; padding:0; }
.conteo { margin:.25rem 0 0; font-size:.875rem; color:var(--chile); }

.porciones { display:flex; gap:.5rem; margin-top:.75rem; }
.porcion {
  flex:1; min-height:2.75rem; border:1px solid var(--masa-line); border-radius:var(--radio-card);
  background:none; color:var(--tinta-muted); font:inherit; font-size:.875rem;
  padding:.625rem .75rem; cursor:pointer; touch-action:manipulation;
}
.porcion.activa { border-color:var(--chile); background:rgba(232,104,61,.1); color:var(--tinta); font-weight:500; }
.porcion span { display:block; font-size:.75rem; }

.guarniciones { display:flex; flex-direction:column; gap:.5rem; margin-top:.75rem; }
.guarnicion {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  border:1px solid var(--masa-line); border-radius:var(--radio-card);
  padding:.75rem 1rem; font-size:.875rem;
}
.guarnicion.agotada { opacity:.5; }
.guarnicion.elegida { border-color:var(--chile); background:rgba(232,104,61,.1); }

.contador { display:flex; align-items:center; gap:.75rem; }
/* 44px: mismo mínimo táctil que las categorías del menú. Los círculos se ven de 36px por el
   borde, pero el área que responde al dedo es de 44. */
.contador button {
  width:2.75rem; height:2.75rem; border-radius:999px;
  border:1px solid rgba(242,245,250,.3); background:none; color:var(--tinta);
  font:inherit; font-size:1.125rem; line-height:1; cursor:pointer; touch-action:manipulation;
}
.contador .num { width:1rem; text-align:center; font-weight:500; }

.agregar {
  width:100%; margin-top:2rem; min-height:3rem; border:none;
  border-radius:var(--radio-card); background:var(--chile); color:var(--masa);
  font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; touch-action:manipulation;
}
.agregar:disabled { opacity:.4; cursor:default; }

.lineas { list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
.lineas li {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  border:1px solid var(--masa-line); border-radius:var(--radio-card);
  background:var(--masa-card); padding:1rem;
}
.lineas .derecha { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex-shrink:0; }
.quitar {
  min-height:2.75rem; background:none; border:none; color:var(--tinta-muted);
  font:inherit; font-size:.75rem; cursor:pointer; touch-action:manipulation; padding:0;
}

.totales { margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; }
.totales > div { display:flex; justify-content:space-between; }
.totales dt, .totales dd { margin:0; }
.totales dt { color:var(--tinta-muted); }
.totales .total { border-top:1px solid var(--masa-line); padding-top:.5rem; font-weight:600; }
.totales .total dt { color:var(--tinta); }

/* El nombre y el detalle de cada línea del carrito: las reglas del menú están anidadas bajo
   .platillo y no alcanzan aquí. Sin esto los <p> quedan con el margen por omisión del
   navegador y la tarjeta se ve rota junto a las del menú. */
.lineas .nombre { margin:0; font-size:.875rem; font-weight:500; }
.lineas .desc   { margin:.125rem 0 0; font-size:.75rem; color:var(--tinta-muted); }

/* Barra flotante del carrito. Se queda pegada abajo, respetando el área segura del iPhone
   (la franja del gesto de inicio se come el borde inferior si no). */
.barra-carrito {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom));
  width:calc(100% - 2rem); max-width:26rem; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:3rem; padding:.75rem 1.25rem;
  border-radius:var(--radio-pill); background:var(--chile); color:var(--masa);
  font-size:.875rem; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.35);
  touch-action:manipulation;
}
.barra-carrito .ver { white-space:nowrap; }