/* pedir/estilo.css — la página pública de pedidos.
   Móvil primero: quien llega aquí viene de un anuncio, en el teléfono, con
   hambre. Todo lo que se toca mide 44px o más. */

:root {
    --rojo: #af101a;
    --naranja: #964900;   /* el mismo del panel: 6.46:1 con blanco */
    --tinta: #1f2328;
    --gris: #6b7280;
    --linea: #e5e7eb;
    --fondo: #f8f9fa;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    font-size: 16px;          /* menos de 16 y iOS hace zoom al enfocar */
    line-height: 1.5;
}

.cabecera {
    background: var(--rojo);
    color: #fff;
    padding: 20px 16px;
    text-align: center;
}
.cabecera h1 { margin: 0; font-size: 26px; letter-spacing: .5px; }
.cabecera p { margin: 4px 0 0; opacity: .9; font-size: 15px; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }

h2 { font-size: 19px; margin: 24px 0 8px; }
h3 {
    font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--gris); margin: 20px 0 6px; font-weight: 600;
}

/* El aviso del envío. Va arriba de la foto y no entre las notas grises del
   final: es la única línea de la página que puede cambiar cuánto paga alguien,
   y abajo nadie la lee. */
.envio-promo {
    margin: 14px 0 0; padding: 10px 12px;
    background: #ecfdf3; border: 1px solid #a6e9c5; border-radius: 10px;
    color: #05603a; font-weight: 600; font-size: 15px; text-align: center;
}

/* La foto de portada y la de sección. `aspect-ratio` junto al width/height del
   HTML reserva el hueco antes de que la imagen baje, para que la lista no
   brinque bajo el dedo de alguien que ya iba a tocar un "+". */
.portada { margin: 16px 0 4px; }
.portada img {
    display: block; width: 100%; height: auto; aspect-ratio: 1000 / 424;
    object-fit: cover; border-radius: 12px;
}
.cat-foto {
    display: block; width: 100%; height: auto; aspect-ratio: 501 / 282;
    object-fit: cover; border-radius: 10px; margin: 2px 0 10px;
}

/* Las secciones del menú. El navegador ya trae el abrir y cerrar; lo único que
   falta es que un renglón de 44px se vea como algo que se toca -- que es la
   altura mínima con la que un dedo acierta sin pelearse. */
.categoria { border-bottom: 1px solid var(--linea); }
.categoria summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 48px; padding: 12px 4px; cursor: pointer;
    font-weight: 700; font-size: 16px; color: var(--tinta);
    /* El triángulo que pinta el navegador cambia de forma en cada uno; el que
       se dibuja abajo con ::after es el mismo en todos. */
    list-style: none;
}
.categoria summary::-webkit-details-marker { display: none; }
.categoria summary::after {
    content: "";
    width: 9px; height: 9px; flex: none; margin-right: 4px;
    border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
    transform: rotate(45deg); transform-origin: center;
    transition: transform .15s;
}
.categoria[open] summary::after { transform: rotate(-135deg); }
.cat-nombre { flex: 1; }
/* Cuántos artículos trae, para que cerrada siga diciendo si vale la pena abrirla. */
.cat-cuantos {
    color: var(--gris); font-weight: 600; font-size: 14px;
    background: var(--linea); border-radius: 9999px; padding: 2px 9px;
}
.categoria .linea:last-of-type { border-bottom: 0; }

.linea {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.que { flex: 1; min-width: 0; }
.nombre { display: block; font-weight: 600; }
.precio { color: var(--naranja); font-weight: 700; }
.desc { display: block; color: var(--gris); font-size: 13px; }

.cuantos { display: flex; align-items: center; gap: 4px; flex: none; }
.cuantos button {
    width: 44px; height: 44px; font-size: 22px; line-height: 1;
    border: 1px solid var(--linea); background: #fff; border-radius: 10px;
    color: var(--tinta); cursor: pointer;
}
.cuantos button:active { background: var(--linea); }
.cuantos input {
    width: 52px; height: 44px; text-align: center; font-size: 17px;
    border: 1px solid var(--linea); border-radius: 10px; background: #fff;
}

/* Estos selectores decían `.tuyo`, cuando el nombre y el teléfono vivían en la
   misma sección que la dirección. Al partirse en dos pantallas la clase
   desapareció y con ella el `display:block` de cada renglón: los campos se
   fueron todos a la misma línea. Ahora cuelgan de `.paso`, que es lo que hay
   en las tres. */
.paso label { display: block; margin: 14px 0; font-weight: 600; }
.paso input[type=text], .paso input[type=tel] {
    display: block; width: 100%; margin-top: 6px; padding: 12px;
    font-size: 16px; border: 1px solid var(--linea); border-radius: 10px;
    font-weight: 400; background: #fff;
}
/* La lista de direcciones (SMA-96). Pegada a la caja y encima de lo que sigue,
   para que abrirla no empuje el formulario debajo del dedo. */
#campo-direccion label { position: relative; }
.sugerencias {
    position: absolute; left: 0; right: 0; z-index: 1000; margin: 4px 0 0; padding: 0;
    list-style: none; background: #fff; border: 1px solid var(--linea); border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 260px; overflow-y: auto;
}
.sugerencias li {
    padding: 12px; font-weight: 400; font-size: 15px; cursor: pointer;
    border-top: 1px solid var(--linea);
}
.sugerencias li:first-child { border-top: 0; }
.sugerencias li:hover { background: #f6f6f6; }
.paso small { display: block; margin-top: 6px; color: var(--gris); font-weight: 400; font-size: 13px; }
/* El menú tiene sus propias cajas de cantidad, que no son campos de texto de
   ancho completo -- sin esto heredarían el bloque de arriba y cada "+ 1 −"
   ocuparía un renglón entero. */
.paso .cuantos label { display: inline; margin: 0; }

.entrega { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; background: #fff; }
.entrega legend { font-weight: 600; padding: 0 6px; }
.radio { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; min-height: 44px; font-weight: 400; }

/* El menú imprime sus 39 artículos en una lista, así que en un teléfono la
   página mide siete pantallas y el botón de pedir quedaba en el pixel 5,204.
   El 6 de septiembre 256 personas llegaron del anuncio y ninguna mandó un
   pedido: no es que no quisieran, es que el botón estaba a siete scrolls.
   Pegado al borde inferior, el total y el botón viajan con quien lee el menú.

   `sticky` y no `fixed` porque al llegar al final del formulario tiene que
   soltarse y quedar en su sitio, sobre la nota de pago -- un `fixed` taparia
   esa nota para siempre. */
.cerrar {
    position: sticky; bottom: 0; z-index: 5;
    margin: 26px 0 0; padding: 12px 12px 10px; text-align: center;
    background: var(--fondo);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
}
.total { font-size: 18px; margin: 0 0 10px; }
.total small { display: block; color: var(--gris); font-size: 13px; font-weight: 400; }

.enviar {
    width: 100%; padding: 16px; font-size: 18px; font-weight: 700;
    color: #fff; background: var(--rojo); border: 0; border-radius: 12px; cursor: pointer;
}
.enviar:active { background: #8d0d15; }

.nota { color: var(--gris); font-size: 14px; margin: 10px 0 0; }
.cerrar .nota { font-size: 13px; margin: 8px 0 0; }

/* El envío que quedó por confirmar. Se sale del gris de .nota a propósito: es
   lo único de la confirmación que el cliente todavía no sabe, y perderlo entre
   las demás notas es que se entere cuando llegue el repartidor. */
.nota.aviso {
    background: #fffbeb; border: 1px solid #fde68a; color: #78350f;
    padding: 12px 14px; border-radius: 10px; margin-top: 14px;
}

.error {
    background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
    padding: 12px 14px; border-radius: 10px; margin: 16px 0;
}

.listo {
    background: #fff; border: 1px solid var(--linea); border-radius: 12px;
    padding: 20px; margin: 20px 0;
}
.listo h2 { margin-top: 0; color: var(--naranja); }
.confirmacion { font-size: 16px; }

/* El campo trampa: fuera de la pantalla, no oculto con display:none, porque
   algunos robots se saltan lo que está en display:none. */
.hp { position: absolute; left: -9999px; top: -9999px; }

:where(button, input):focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

/* La cuenta de la confirmación: lo que pidió, el envío y el total. */
.cuenta { width: 100%; border-collapse: collapse; margin: 14px 0; }
.cuenta td { padding: 7px 0; border-bottom: 1px solid var(--linea); }
.cuenta .pesos { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cuenta .granTotal td { font-size: 19px; font-weight: 700; border-bottom: 0; padding-top: 12px; }

/* The <fieldset> that switches the form off outside opening hours. It draws
   nothing: it exists so the browser can disable everything inside it at once. */
.form-body { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Switched off has to look switched off, or the customer taps "+" three times
   thinking the page froze. What there is to read -- names and prices -- stays
   untouched: the menu is still what they came to see. */
.form-body[disabled] .cuantos { opacity: .45; }
.form-body[disabled] .cuantos button { cursor: not-allowed; }

/* The same bar as always, carrying the notice where the subtotal goes. Same
   place, same pinned bottom: it is the one thing in view for the whole scroll. */
.cerrar.closed { background: #fffbeb; border-top: 1px solid #fde68a; }
.closed-title { margin: 0 0 4px; font-weight: 700; color: #78350f; }
.closed-note { margin: 0; font-size: 14px; color: #78350f; }

/* The dish the ad was selling. It goes to the top of its category and it is
   marked, because whoever tapped for it has to recognise it without reading
   fifteen rows. */
.linea.advertised {
    background: #fff7ed; border-radius: 10px;
    padding: 10px 12px; margin: 4px 0; border-bottom: 0;
}
.ad-tag {
    display: inline-block; margin-bottom: 3px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--naranja);
}

/* Un platillo que hoy ya no hay. La fila entera se apaga -- mismo lenguaje que
   .form-body[disabled] .cuantos, misma opacidad -- para que "se acabó" se vea
   y no sólo se lea, y el input deshabilitado no parezca un botón roto.
   pointer-events: none en los controles porque los botones +/- no llevan su
   propio `disabled` (sólo el input lo lleva): sin esto, tocar "+" seguía
   subiendo un número que ya no se iba a mandar. */
.linea.agotado { opacity: .55; }
.precio.agotado { color: var(--gris); font-weight: 600; font-style: italic; }
.linea.agotado .cuantos { pointer-events: none; }

/* ---- Las tres pantallas -------------------------------------------------
   El formulario sigue siendo uno y se manda una sola vez; esto nada más
   esconde dos de sus tres secciones. Sin JavaScript no hay `hidden` que
   valga y las tres se ven seguidas, que es la página de una sola hoja de
   antes -- por eso aquí no hay ningún `display:none` de base. */
.pasos {
    display: flex; gap: 6px; list-style: none;
    margin: 0 0 18px; padding: 0 12px; counter-reset: paso;
}
.pasos li {
    flex: 1; counter-increment: paso;
    font-size: 12px; font-weight: 600; color: var(--gris); text-align: center;
    padding-top: 22px; position: relative;
}
/* La bolita del número, dibujada con el contador del CSS: numerar a mano en el
   HTML es lo que se desincroniza cuando alguien reordena las pantallas. */
.pasos li::before {
    content: counter(paso);
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--linea); color: var(--tinta);
    font-size: 11px; line-height: 18px;
}
/* La línea que une las bolitas. En el primero no: no viene de ningún lado. */
.pasos li + li::after {
    content: ""; position: absolute; top: 8px; right: 50%;
    width: 100%; height: 2px; background: var(--linea); z-index: -1;
}
.pasos li.aqui { color: var(--tinta); }
.pasos li.aqui::before { background: var(--rojo); color: #fff; }
.pasos li.hecho::before { background: var(--naranja); color: #fff; }

/* Atrás no compite con Continuar: el que sigue el flujo es el otro. */
/* Atrás y Continuar en el mismo renglón. Apilados, la barra pegajosa crecía a
   casi un tercio de la pantalla del teléfono justo en el paso donde la persona
   está TECLEANDO su dirección, y le tapaba los campos de abajo. Atrás se lleva
   un tercio: no compite con el botón que sigue el flujo. */
.cerrar .botones { display: flex; gap: 8px; }
.atras {
    flex: 1; padding: 14px; font-size: 16px; font-weight: 600;
    color: var(--gris); background: transparent;
    border: 1px solid var(--linea); border-radius: 12px; cursor: pointer;
}
.cerrar .botones .enviar { flex: 2; }
.atras[hidden], .seguir[hidden], .enviar[hidden] { display: none; }

/* ---- El mapa ------------------------------------------------------------ */
/* La barra del subtotal es sticky al fondo, así que sin este colchón tapa el
   borde inferior del mapa -- justo donde está el control de zoom y justo
   cuando la persona está colocando su pin. */
.mapa-caja { margin-top: 14px; }
/* Colchón al pie de cada pantalla para que su último campo pueda subir por
   encima de la barra pegajosa. Sin esto, lo último de la pantalla 2 -- las
   referencias, y el mapa cuando está abierto -- no hay forma de verlo
   completo: la barra se queda encima por más que se desplace. */
.paso { padding-bottom: 150px; }
.mapa-caja > summary {
    padding: 12px 0; font-size: 15px; font-weight: 600;
    color: var(--naranja); cursor: pointer;
}
.mapa {
    height: 280px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--linea); position: relative;
    /* Leaflet mide el contenedor al arrancar; sin alto propio antes de que
       cargue, el mapa nace de 0px y queda en gris hasta que algo lo redibuja. */
    background: var(--linea);
}
/* El pin vive en el centro del contenedor y NO se mueve: lo que se mueve es el
   mapa debajo. Un marcador arrastrable queda tapado por el dedo justo en el
   momento de colocarlo. */
.mapa-pin {
    position: absolute; left: 50%; top: 50%; z-index: 500;
    width: 22px; height: 22px; margin: -22px 0 0 -11px;
    border: 3px solid #fff; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--rojo);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    pointer-events: none;
}
.mapa-yo {
    width: 100%; padding: 11px; margin-bottom: 8px;
    font-size: 15px; font-weight: 600;
    color: var(--tinta); background: #fff;
    border: 1px solid var(--linea); border-radius: 10px; cursor: pointer;
}
.mapa-estado { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: var(--gris); }