/* ══════════════════════════════════════════════════════════════════════
   YAMERO — sistema de diseño

   ⚠️ ESTE ARCHIVO SE PIDE COMO /css/yamero.css, con ruta ABSOLUTA. Vive en
      la raíz del sitio, no dentro de la carpeta de ninguna app. Es lo que
      permite que una pantalla servida por nginx y otra servida por el
      servidor se vean igual.

   ⚠️ AL CAMBIAR ESTE ARCHIVO, SUBE SU `?v=` EN TODAS LAS PANTALLAS QUE LO
      PIDEN. Si no, el navegador sirve el viejo hasta un año. Y si el
      teléfono pide `?v=3` mientras el servidor todavía tiene el archivo
      viejo, guarda el VIEJO bajo la URL nueva: subir el bueno ya no lo
      arregla, hay que estrenar `?v=4`.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Gandhi Sans';
  src: url('/fonts/GandhiSans-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gandhi Sans';
  src: url('/fonts/GandhiSans-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gandhi Sans';
  src: url('/fonts/GandhiSans-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* La gama de la marca, tal cual salió del logo. */
  --amarillo:  #FFCB05;
  --naranja:   #FF7129;
  --fuego:     #FF581C;   /* el acento principal */
  --rojo:      #ED2A32;
  --vino:      #A9002C;
  --coral:     #DB7356;   /* el del símbolo */

  --tinta:     #1B1A19;
  --gris:      #78716C;
  --gris-claro:#A8A29E;
  --linea:     #EAE7E4;
  --fondo:     #FFFFFF;
  --papel:     #F7F5F3;
  --suave:     #FFF3D6;

  --exito:     #1D9E75;
  --alerta-bg: #FFF3D6;
  --alerta-tx: #8A6A00;

  /* ── LA ESCALA ────────────────────────────────────────────────────
     Tres pasos de espacio y tres de letra. Nada más.

     Antes había 26, 20, 17, 15, 14, 13, 12 y 11 px de letra, y márgenes
     de 4, 6, 7, 10, 11, 12, 14, 18 y 20. Ocho tamaños no son ocho niveles
     de importancia: son ocho decisiones tomadas de una en una, y por eso
     la pantalla se veía apretada sin que se supiera dónde.

     ESPACIO — el 8 es la unidad y todo es múltiplo suyo:
       --e1  8px   dentro de una pieza (rótulo↔campo, icono↔texto)
       --e2 16px   entre piezas hermanas (campo↔campo, tarjeta↔tarjeta)
       --e3 32px   entre bloques que no tienen que ver uno con otro

     LETRA — tres niveles, con razón 2.5 entre el mayor y el menor:
       --t-grande 32px   lo que decide: el título de la pantalla, el total
       --t-media  16px   lo que se lee: texto, botones, campos
       --t-chica  13px   lo que acompaña: rótulos, notas, pies

     ⚠️ La chica es 13, no 8 (32 ÷ 2.5 = 12.8). A 8px no se lee nada en un
        teléfono: el 8 es la unidad de ESPACIO, no de letra.

     Los niveles intermedios se hacen con PESO y COLOR, no inventando
     tamaños: 16 en negrita ya se lee como un subtítulo. */
  --e1:  8px;
  --e2: 16px;
  --e3: 32px;

  --t-grande: 32px;
  --t-media:  16px;
  --t-chica:  13px;

  --r:   12px;
  --r-s: 8px;
  --r-l: 18px;

  /* ⚠️ Sin esto el contenido se mete debajo de la barra de estado y de los
     botones de Android. En la app nativa las variables valen 0 si falta el
     plugin @capacitor/status-bar con overlaysWebView: true. */
  --arriba: env(safe-area-inset-top, 0px);
  --abajo:  env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 🔴 EL `hidden` TIENE QUE GANAR SIEMPRE.
   El navegador trae `[hidden] { display: none }`, pero cualquier regla
   nuestra con `display` lo pisa por especificidad. `.btn` declara
   `display: inline-flex`, así que TODO botón oculto se seguía viendo: en
   la pantalla de cuenta salían "Entrar con mi correo" y "Crear cuenta con
   correo" pegados uno encima del otro, los dos a la vez.

   Había una regla suelta para `.pantalla[hidden]` — alguien ya se topó
   con esto y lo tapó en un sitio en vez de arreglarlo en todos. Son 38
   elementos con `hidden` en la app.

   El `!important` aquí es correcto: `hidden` es lo que el HTML dice sobre
   si algo existe en la página, y eso no lo decide una hoja de estilos. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Gandhi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  font-size: var(--t-media);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { padding-top: var(--arriba); padding-bottom: var(--abajo); }

/* Un solo salto de tamaño: el título de la pantalla. Los subtítulos se
   distinguen por PESO, no por un tamaño más — 16 en negrita ya se lee
   como encabezado, y así no hay que decidir si algo es "de 17 o de 20". */
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; }
h1 { font-size: var(--t-grande); letter-spacing: -.5px; }
h2 { font-size: var(--t-media); }
h3 { font-size: var(--t-media); }
p  { margin: 0 0 var(--e2); }

/* La nota: lo que acompaña sin competir. Antes cada pantalla la escribía
   a mano con su propio tamaño y su propio gris. */
.nota { font-size: var(--t-chica); color: var(--gris); line-height: 1.45; }

/* ── Estructura ─────────────────────────────────────────────────────── */
.app     { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla{ flex: 1; padding: var(--e2); padding-bottom: 96px; }

/* El aire entre bloques que no tienen que ver uno con otro. Es lo que
   faltaba en la pantalla de cuenta: todo estaba a la misma distancia de
   todo, así que nada parecía agrupado con nada.

   ⚠️ `margin-top` en el bloque, NO `.bloque + .bloque`. Con el selector
      de hermanos, un bloque que es el primero de su contenedor no recibe
      nada — y eso es justo lo que pasaba: el botón naranja quedaba pegado
      al último campo porque su bloque abría el grupo. */
.bloque { margin-top: var(--e3); }
.bloque:first-child { margin-top: 0; }

.encabezado {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo); border-bottom: 1px solid var(--linea);
  padding: var(--e1) var(--e2); display: flex; align-items: center; gap: var(--e1);
}
.encabezado .titulo { font-weight: 700; font-size: var(--t-media); }

/* El encabezado va a sangre dentro de una pantalla con relleno. Estaba
   escrito a mano —`style="margin:-16px -16px 16px"`— en las diez
   pantallas: diez sitios que había que cambiar a la vez el día que el
   relleno dejara de ser 16. */
.pantalla > .encabezado:first-child {
  margin: calc(-1 * var(--e2)) calc(-1 * var(--e2)) var(--e2);
}

.marca { display: flex; align-items: center; gap: var(--e1); }
.marca .nombre { font-weight: 700; font-size: var(--t-media); letter-spacing: .5px; color: var(--fuego); }

/* ── Botones ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  font-family: inherit; font-size: var(--t-media); font-weight: 700;
  border: none; border-radius: var(--r); padding: var(--e2); line-height: 1.2;
  cursor: pointer; width: 100%; transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.985); }
/* Un <a> con clase .btn es un botón, no un enlace: el subrayado lo delata
   y rompe la forma. */
a.btn { text-decoration: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primario  { background: var(--fuego); color: #fff; }
.btn-secundario{ background: var(--papel); color: var(--tinta); }
.btn-linea     { background: transparent; color: var(--tinta); border: 1px solid var(--linea); }
.btn-chico     { padding: var(--e1) var(--e2); font-size: var(--t-chica); width: auto; }

/* Dos botones seguidos son piezas hermanas: 8, no pegados ni a 20. */
.btn + .btn { margin-top: var(--e1); }

.barra-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--fondo); border-top: 1px solid var(--linea);
  padding: var(--e2) var(--e2) calc(var(--e2) + var(--abajo));
}
.barra-abajo > .interior { max-width: 520px; margin: 0 auto; }

/* ── Formulario ─────────────────────────────────────────────────────── */
label.campo { display: block; margin-bottom: var(--e2); }
label.campo > span { display: block; font-size: var(--t-chica); color: var(--gris); margin-bottom: var(--e1); }

input[type=text], input[type=tel], input[type=email], input[type=number],
input[type=password], input[type=date], select, textarea {
  /* 16px no es una elección de estilo: por debajo, iOS hace zoom al
     enfocar el campo y saca al usuario de la pantalla. */
  width: 100%; font-family: inherit; font-size: var(--t-media);
  color: var(--tinta); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: var(--e2); outline: none;
}
/* El foco se ve. Un borde naranja no basta para quien navega con teclado
   ni para quien distingue mal los colores. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--fuego); outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--fuego); }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
::placeholder { color: var(--gris-claro); }

/* ── Piezas ─────────────────────────────────────────────────────────── */
.tarjeta {
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: var(--e2); margin-bottom: var(--e2); background: var(--fondo);
}
.tarjeta-grande {
  border-radius: var(--r-l); padding: var(--e2); margin-bottom: var(--e2);
  cursor: pointer; border: 1px solid var(--linea);
}
.tarjeta-grande.acento { background: var(--fuego); color: #fff; border-color: var(--fuego); }
.tarjeta-grande .icono { font-size: var(--t-grande); line-height: 1; }
.tarjeta-grande .rotulo { font-weight: 700; font-size: var(--t-media); margin-top: var(--e1); }
.tarjeta-grande .pie { font-size: var(--t-chica); opacity: .82; margin-top: 2px; }

.renglon {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) 0; border-bottom: 1px solid var(--linea);
}
.renglon:last-child { border-bottom: none; }
.renglon .crecer { flex: 1; min-width: 0; }
.renglon .nombre { font-weight: 700; font-size: var(--t-media); }
.renglon .nota   { font-size: var(--t-chica); color: var(--gris); }

.miniatura { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; background: var(--papel); }

.pildora {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: var(--t-chica); padding: var(--e1) var(--e2); border-radius: 99px;
  background: var(--papel); color: var(--gris); white-space: nowrap;
  border: none; font-family: inherit; cursor: pointer;
  /* Las píldoras son botones aunque a veces sean <a>: el subrayado de
     enlace las hace ver rotas dentro de la forma redondeada. */
  text-decoration: none;
}
.pildora.activa { background: var(--suave); color: var(--alerta-tx); font-weight: 700; }

.fila-scroll { display: flex; gap: var(--e1); overflow-x: auto; padding-bottom: var(--e1); margin: 0 calc(-1 * var(--e2)) var(--e2); padding-inline: var(--e2); }
.fila-scroll::-webkit-scrollbar { display: none; }

.aviso { background: var(--alerta-bg); color: var(--alerta-tx); border-radius: var(--r-s); padding: var(--e2); font-size: var(--t-chica); line-height: 1.45; }
.aviso-error { background: #FCEBEB; color: #A32D2D; }

.cuenta { background: var(--papel); border-radius: var(--r); padding: var(--e2); }
.cuenta .linea { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--t-media); }
.cuenta .linea span:first-child { color: var(--gris); }
/* El total es de los pocos sitios donde el tamaño grande está ganado: es
   la cifra por la que el cliente decide. */
.cuenta .total { border-top: 1px solid var(--linea); margin-top: var(--e1); padding-top: var(--e2); font-weight: 700; font-size: var(--t-media); }
.cuenta .total span:first-child { color: var(--tinta); }
.cuenta .total .cifra { color: var(--fuego); font-size: var(--t-grande); line-height: 1; letter-spacing: -1px; }

.contador { display: flex; align-items: center; gap: 12px; }
.contador button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--fondo); font-size: var(--t-media); line-height: 1; cursor: pointer;
  color: var(--fuego); font-family: inherit;
}
.contador button:disabled { color: var(--gris-claro); }
.contador .n { min-width: 16px; text-align: center; font-weight: 700; }

/* ── Cabecera del inicio ─────────────────────────────────────────────── */
.ubicacion { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.ubicacion .donde { flex: 1; min-width: 0; }
.ubicacion .rot { font-size: var(--t-chica); color: var(--gris-claro); line-height: 1.2; }
.ubicacion .dir {
  font-weight: 700; font-size: var(--t-media); display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Conmutador de dos modos ─────────────────────────────────────────
   Iniciar sesión / Crear cuenta. Las dos mitades iguales y del mismo
   ancho: si una se ve más grande, parece la "correcta" y la otra un
   apaño. */
.conmutador {
  display: flex; gap: var(--e1);
  background: var(--papel); border-radius: 99px; padding: 4px;
}
.conmutador .pildora {
  flex: 1; justify-content: center; background: transparent;
  padding: var(--e1) var(--e2); font-size: var(--t-media);
}
.conmutador .pildora.activa { background: var(--fondo); color: var(--tinta); }

.fila-pildoras { display: flex; gap: var(--e1); flex-wrap: wrap; }

/* Una línea que separa de verdad: el paso grande arriba Y la raya. Solo
   el paso deja dudando si dos cosas van juntas; solo la raya aprieta. */
.separador { border-top: 1px solid var(--linea); padding-top: var(--e3); }

/* ── Menú de las tres líneas ──────────────────────────────────────────
   Lo que antes eran cinco píldoras sueltas al final del inicio. Ahí abajo
   solo las veía quien llegaba hasta el fondo; aquí están donde la gente
   ya busca un menú.

   ⚠️ Se cierra tocando FUERA, con Escape y al elegir algo. Un desplegable
      que solo se cierra con su propio botón es de los que se quedan
      abiertos tapando la pantalla. */
.menu { position: relative; margin-left: auto; }
.menu > button {
  background: none; border: none; padding: var(--e1); cursor: pointer;
  color: var(--tinta); line-height: 0; border-radius: var(--r-s);
}
.menu > button:active { background: var(--papel); }
.menu .lista {
  position: absolute; right: 0; top: calc(100% + var(--e1)); z-index: 60;
  min-width: 232px; background: var(--fondo);
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: var(--e1); box-shadow: 0 10px 32px rgba(27,26,25,.13);
}
.menu .lista a, .menu .lista button {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: var(--e2); border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-media); color: var(--tinta);
  text-align: left; text-decoration: none; border-radius: var(--r-s);
}
.menu .lista a:active, .menu .lista button:active { background: var(--papel); }
.menu .lista .raya { height: 1px; background: var(--linea); margin: var(--e1) 0; }
.menu .lista .sub { font-size: var(--t-chica); color: var(--gris); display: block; }

/* ── Barra de abajo: tres destinos ───────────────────────────────────
   Tres, no cinco. Con más de cuatro nadie recuerda qué hay en cada uno y
   se toca el que suena mejor.

   ⚠️ Convive con `.barra-abajo` (el botón de confirmar). NUNCA se ven las
      dos a la vez: en una pantalla de pedido manda el botón, y la
      navegación se esconde. Dos barras apiladas dejan el pulgar sin sitio
      donde caer. */
.barra-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--fondo); border-top: 1px solid var(--linea);
  padding-bottom: var(--abajo);
  display: flex;
}
.barra-nav .interior { max-width: 520px; margin: 0 auto; display: flex; width: 100%; }
.barra-nav button {
  flex: 1; background: none; border: none; cursor: pointer; font-family: inherit;
  padding: var(--e1) 0 var(--e1); color: var(--gris);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.barra-nav .rot { font-size: var(--t-chica); line-height: 1.2; }
.barra-nav button.activa { color: var(--fuego); }
.barra-nav button.activa .rot { font-weight: 700; }

/* Con la barra de navegación puesta hace falta MÁS hueco abajo: sin esto
   el último renglón de la lista queda debajo de la barra y no se puede
   tocar. */
body.con-nav .pantalla { padding-bottom: 104px; }

#mapa-cobertura { height: 62vh; min-height: 320px; border-radius: var(--r); border: 1px solid var(--linea); }

/* ── Categorías ──────────────────────────────────────────────────────
   Fila con scroll, como las tres plataformas. La primera es el mandado
   libre: en Rappi, RappiFavor es una categoría de primer nivel, no un
   extra escondido — y es justo la que nos distingue. */
.categorias {
  display: flex; gap: 10px; overflow-x: auto;
  margin: 0 -16px 4px; padding: 4px 16px 10px;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria {
  flex: none; width: 68px; text-align: center;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.categoria .caja {
  width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--suave); transition: transform .08s ease;
}
.categoria:active .caja { transform: scale(.94); }
.categoria .caja svg { width: 27px; height: 27px; }
.categoria .rot { font-size: var(--t-chica); color: var(--gris); line-height: 1.2; display: block; }

/* El mandado libre va en el color de la marca: es la puerta que queremos
   que se use, y tiene que verse distinta a un rubro más del catálogo. */
.categoria.destacada .caja { background: var(--fuego); }
.categoria.destacada .rot { color: var(--fuego); font-weight: 700; }

/* Un rubro sin negocios se apaga en vez de desaparecer: si mañana abre una
   farmacia, la gente ya sabía que ese lugar existía. */
.categoria.vacia .caja { background: var(--papel); }
.categoria.vacia .rot { color: var(--gris-claro); }

.estrella-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--tinta); font-weight: 700; }

/* ── Opciones lado a lado (prioridad, modo de entrega) ────────────────
   Como las de Uber: dos tarjetas con su hora y su precio, para comparar
   sin volver atrás. La elegida lleva borde grueso, no color de fondo — el
   color se reserva para el botón de confirmar. */
.opciones { display: flex; gap: var(--e1); }
.opcion {
  flex: 1; border: 1px solid var(--linea); border-radius: var(--r);
  padding: var(--e2); cursor: pointer; background: var(--fondo);
  font-family: inherit; text-align: left; color: inherit;
}
.opcion.elegida { border: 2px solid var(--tinta); padding: calc(var(--e2) - 1px); }
.opcion .tit { font-weight: 700; font-size: var(--t-media); }
.opcion .cuando { font-size: var(--t-chica); margin-top: 2px; }
.opcion .mas { font-size: var(--t-chica); color: var(--fuego); font-weight: 700; margin-top: 2px; }
.opcion .por { font-size: var(--t-chica); color: var(--gris); margin-top: var(--e1); line-height: 1.3; }

/* ── Recibo ───────────────────────────────────────────────────────── */
#recibo-mapa { height: 190px; border-radius: var(--r); border: 1px solid var(--linea); margin-bottom: var(--e2); }
.hilo { display: flex; gap: 10px; padding: 2px 0; }
.hilo .marca-punto { width: 18px; display: flex; flex-direction: column; align-items: center; }
.hilo .bolita { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); margin-top: 6px; }
.hilo .cuerda { flex: 1; width: 2px; background: var(--linea); margin: 3px 0; min-height: 16px; }
.metricas { display: flex; gap: var(--e3); margin: var(--e2) 0; }
.metrica .n { font-size: var(--t-grande); font-weight: 700; line-height: 1; letter-spacing: -1px; }
.metrica .r { font-size: var(--t-chica); color: var(--gris); margin-top: 2px; }
.acciones { display: flex; gap: var(--e1); justify-content: space-around; margin-top: var(--e3); }
.accion { text-align: center; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; text-decoration: none; color: inherit; }
.accion .circ {
  width: 54px; height: 54px; border-radius: 50%; background: var(--papel);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 6px;
}
.accion .rot { font-size: var(--t-chica); color: var(--tinta); line-height: 1.2; display: block; }

/* El selector de estrellas. Grandes a propósito: se tocan con el pulgar
   en la calle, no con un ratón. */
.estrellas { display: flex; gap: var(--e1); justify-content: center; margin: var(--e1) 0; }
.estrellas button {
  background: none; border: none; padding: var(--e1); cursor: pointer;
  /* 32 de letra + 8 de relleno = 48px de área tocable, que es el mínimo
     para que un pulgar acierte a la primera. El tamaño no es decoración. */
  font-size: var(--t-grande); line-height: 1; color: var(--linea); font-family: inherit;
}
.estrellas button.on { color: var(--amarillo); }

.vacio { text-align: center; padding: var(--e3) var(--e2); color: var(--gris); font-size: var(--t-chica); }

.cargando { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--linea); border-top-color: var(--fuego); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Respeta a quien pidió menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}