/* ============================================================
   Pedi2 — agregados sobre el sistema de diseño de la Base
   estilos.css sigue siendo la hoja principal y no se toca: acá va
   solamente lo que el producto actual no tenía (variantes, adicionales,
   avisos) y todo usa los mismos tokens, así un cambio de marca alcanza
   para las dos hojas.
   ============================================================ */

/* ---------- Salto a una categoría ----------
   Las dos barras de arriba (topbar y categorías) son pegajosas, así que un
   scrollIntoView normal deja el título de la sección escondido abajo de ellas.
   Con tres rubros casi no se nota; con ocho, sí. Los altos reales los mide
   carta.js, porque cambian con el logo, el ancho y la carga de las fuentes. */
.sec{scroll-margin-top:calc(var(--h-topbar, 63px) + var(--h-cats, 52px) + 10px)}

/* ---------- Precio "Desde" ---------- */
.price em{font-style:normal; font-weight:500; font-size:.82em; color:var(--tx-2); margin-right:2px}

/* Cuántas unidades de un producto con opciones hay ya en el pedido */
.en-pedido{font-size:11.5px; font-weight:600; color:var(--tx-2); margin-left:8px; white-space:nowrap}

/* ---------- Detalle de producto (variantes y adicionales) ---------- */
.prod-desc{margin:2px 0 4px; color:var(--tx-2); font-size:14px}

.opciones{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px}
.opciones.col{flex-direction:column; flex-wrap:nowrap}

.opcion{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line-2); background:var(--bg-0); color:var(--tx-1);
  border-radius:var(--r-md); padding:12px 14px; font-size:14.5px; font-weight:500;
  text-align:left; transition:border-color .16s ease, background .16s ease}
.opcion b{font-weight:600; font-size:14px; white-space:nowrap}
.opcion b.gratis{font-weight:500; color:var(--tx-3); font-size:13px}
.opciones:not(.col) .opcion{padding:10px 16px}

/* El estado activo lo define estilos.css: fondo acento y texto --accent-ink.
   No se pisa acá. Antes esta hoja le cambiaba el fondo a un tinte claro pero
   no el color del texto, y quedaba blanco sobre blanco.
   Lo único que falta agregar es que los precios de adentro sigan al texto:
   la Base no los tenía porque sus opciones eran solo una palabra. */
.opcion.on b,
.opcion.on b.gratis{color:inherit}
.opcion.on b.gratis{opacity:.8}

.opcion.off{opacity:.42; cursor:not-allowed}

/* ---------- Grupo que se repite (gustos de una docena) ----------
   Cada opción con − n +. No es un botón: se toca el + o el −. */
.opcion.rep{padding:8px 8px 8px 14px; cursor:default}
.opcion.rep > span:first-child{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.opcion.rep.con{border-color:var(--accent)}
.opcion.rep .mini-step{flex:none; background:var(--bg-1)}
.opcion.rep .mini-step button{width:34px; height:34px}
.opcion.rep .mini-step .q{min-width:18px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.opcion.rep .mini-step button:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}
.opcion.rep.off{opacity:.42}

label small{font-weight:500; color:var(--tx-3); font-size:12px; margin-left:4px}

/* ---------- Aclaración por ítem en el resumen ---------- */
.line .mini.det{color:var(--tx-2)}

/* ---------- Error del checkout ---------- */
.ck-error{background:#fdeceb; border:1px solid #f3c2bd; color:#8f271d;
  border-radius:var(--r-md); padding:11px 13px; font-size:13.5px; margin:10px 0 2px}
.ck-error a{text-decoration:underline; font-weight:600}
.ck-error .copiar{text-decoration:underline; font-weight:600; font-size:inherit; padding:0}

/* ---------- Aviso de local cerrado ---------- */
.aviso-cerrado{display:flex; flex-direction:column; gap:2px; margin:16px 0 0;
  border:1px solid #f3c2bd; background:#fdeceb; color:#8f271d;
  border-radius:var(--r-md); padding:13px 15px}
.aviso-cerrado.suave{border-color:var(--line-2); background:var(--bg-1); color:var(--tx-1)}
.aviso-cerrado b{font-family:var(--f-display); font-size:15px}
.aviso-cerrado span{font-size:13.5px; color:var(--tx-2)}
.aviso-cerrado.suave span{color:var(--tx-2)}

/* ---------- Aviso flotante ---------- */
.aviso-flotante{position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  z-index:70; max-width:min(420px, calc(100vw - 32px));
  background:var(--tx-1); color:var(--bg-0); border-radius:var(--r-md);
  padding:12px 16px; font-size:13.5px; box-shadow:var(--sh-2);
  animation:avisoEntra .22s ease both}
.aviso-flotante.ir{opacity:0; transition:opacity .5s ease}
@keyframes avisoEntra{from{opacity:0; transform:translate(-50%, 10px)} to{opacity:1; transform:translate(-50%,0)}}

/* ---------- Selector de entrega cuando el local no hace envíos ---------- */
.seg.solo{background:none; padding:0}
.seg.solo span{font-size:12.5px; font-weight:600; color:var(--tx-2); white-space:nowrap}

/* ---------- Páginas de estado (404 / 500 / home provisoria) ---------- */
.pagina-simple{max-width:620px; margin:0 auto; padding:clamp(48px,12vh,120px) 24px; text-align:center}
.pagina-simple h1{font-size:clamp(26px,5vw,38px); margin-bottom:10px}
.pagina-simple p{color:var(--tx-2); font-size:16px; margin:0 0 8px}
.pagina-simple .marca{font-family:var(--f-display); font-weight:800; font-size:20px;
  color:var(--accent); letter-spacing:-.02em; margin-bottom:28px; display:block}

@media (max-width:420px){
  .opcion{padding:11px 12px; font-size:14px}
}

/* Qué pasa con los datos de quien pide. Va en el checkout, al lado de los
   campos, no escondido en una página de condiciones que nadie abre. */
.ck-datos{font-size:12px; color:var(--tx-3); line-height:1.45; margin:12px 0 0}

/* Cinta de vista previa: sólo la ve el dueño de una carta sin publicar. */
.vista-previa{background:#c98a10; color:#fff; text-align:center; font-size:13px;
  font-weight:600; padding:9px 16px; position:sticky; top:0; z-index:40}
.vista-previa a{text-decoration:underline}

/* Botón de la página simple (la raíz del dominio). */
.pagina-btn{display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:15.5px; padding:13px 26px; border-radius:var(--r-md)}
.pagina-btn:hover{background:var(--accent-2)}

/* ---------- Reserva de mesa ---------- */
/* Es otra función que la carta, así que se arma como una tarjeta propia:
   fondo apenas teñido con el color del local, ícono y botón a la derecha.
   Sin borde de color a un costado (regla de diseño de la casa). */
.reserva-cta{display:flex; width:100%; align-items:center; gap:14px;
  margin:18px 0 6px; padding:14px 14px 14px 14px; text-align:left;
  background:color-mix(in srgb, var(--accent) 6%, var(--bg-0));
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line-2));
  border-radius:var(--r-lg); cursor:pointer; transition:background .16s ease, border-color .16s ease}
.reserva-cta:hover{background:color-mix(in srgb, var(--accent) 10%, var(--bg-0));
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line-2))}
.reserva-ico{flex:none; width:46px; height:46px; border-radius:14px; display:flex;
  align-items:center; justify-content:center; background:var(--accent); color:var(--accent-ink)}
.reserva-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto}
.reserva-txt b{font-family:var(--f-display); font-size:16px; line-height:1.2; color:var(--tx-1)}
.reserva-txt small{color:var(--tx-2); font-size:13px; line-height:1.35}
.reserva-ir{flex:none; font-weight:600; font-size:14px; padding:9px 16px; border-radius:999px;
  background:var(--bg-0); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line-2));
  white-space:nowrap; transition:background .16s ease, color .16s ease}
.reserva-cta:hover .reserva-ir{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
@media (max-width:420px){
  .reserva-cta{gap:12px; padding:12px}
  .reserva-ico{width:40px; height:40px; border-radius:12px}
  .reserva-ir{padding:8px 12px; font-size:13px}
}

/* Día y hora van en la misma fila: son una sola decisión. */
.res-fila{display:flex; gap:10px}
.res-fila > div{flex:1 1 0; min-width:0}
.res-fila input{width:100%}

/* ---------- Cabecera con identidad: portada + ficha del local ----------
   La portada le da cara al local; la ficha (logo montado sobre el borde,
   nombre y accesos) dice quién es y cómo contactarlo. Las dos se van con el
   scroll: mientras se arma el pedido, arriba queda sólo la barra compacta.
   Sin portada cargada se muestra una franja con el color del local, más
   baja: mejor una franja limpia que un hueco o una foto de relleno. */
.portada{position:relative; overflow:hidden; height:clamp(120px, 32vw, 220px);
  background:linear-gradient(125deg, var(--accent), var(--accent-2))}
.portada.sin-foto{height:clamp(92px, 20vw, 150px)}
.portada-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.portada::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0) 48%)}
.portada.sin-foto::after{display:none}

/* Etiquetas abajo a la derecha: a la izquierda va el logo, que se monta encima. */
.portada-etq{position:absolute; z-index:1; right:clamp(12px,4vw,44px); bottom:12px;
  max-width:calc(100% - 140px); display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.portada-etq span{display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius:999px; background:rgba(255,255,255,.94); color:var(--tx-1);
  font-size:12px; font-weight:600; line-height:1.2; white-space:nowrap; box-shadow:var(--sh-1)}
.portada-etq .estado i{width:7px; height:7px; border-radius:50%; background:var(--tx-3)}
.portada-etq .estado.on i{background:#28a745}

.ficha{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:end;
  padding:0 clamp(16px,4vw,44px) 16px; border-bottom:1px solid var(--line); background:var(--bg-0)}
.ficha-logo.logo{width:88px; height:88px; border-radius:50%; margin-top:-44px; position:relative; z-index:2;
  border:4px solid var(--bg-0); box-shadow:var(--sh-1); font-size:34px}
/* La foto de perfil llena el círculo entero, como en Instagram o WhatsApp:
   la gente ya sube la imagen pensando en ese recorte. */
.ficha-logo.logo{overflow:hidden}
.ficha-logo.logo img{padding:0; object-fit:cover}
/* Un logo con transparencia se lee mejor sobre blanco que sobre el color del local. */
.ficha-logo.logo:has(img), .topbar .logo:has(img){background:#fff}
.ficha-txt{min-width:0; padding-top:10px}
.ficha-nombre{font-weight:800; font-size:clamp(21px, 5.4vw, 28px); line-height:1.08}
.ficha-dir{margin:4px 0 0; font-size:13px; color:var(--tx-2)}
.ficha-acc{grid-column:1 / -1; display:flex; gap:8px; margin-top:14px; max-width:520px}
.ficha-acc a, .ficha-acc button{flex:1; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:10px 8px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--bg-0); color:var(--tx-1); font-size:13.5px; font-weight:600; white-space:nowrap;
  transition:border-color .16s ease}
.ficha-acc a:hover, .ficha-acc button:hover{border-color:var(--accent)}
.ficha-acc svg{color:var(--accent); flex:none}

/* Barra compacta: el logo y el nombre chicos aparecen recién cuando la ficha
   se fue de la pantalla (lo maneja carta.js). */
.topbar .brand{transition:opacity .2s ease, visibility .2s ease}
.topbar.con-ficha .brand{opacity:0; visibility:hidden}

/* Frase corta debajo del nombre */
.ficha-bajada{margin:4px 0 0; font-size:14px; font-weight:500; color:var(--tx-2); line-height:1.3}
.ficha-bajada + .ficha-dir{margin-top:2px}

/* Compartir va como botón cuadrado de ícono solo: con WhatsApp, Instagram y
   Cómo llegar ya son cuatro, y en un celular de 360 px no entran con texto. */
.ficha-acc .solo-icono{flex:0 0 44px; padding:10px 0}
@media (max-width:420px){
  .ficha-acc a{font-size:13px; gap:5px}
  .ficha-acc a svg{display:none}
}

/* "Solo retiro en el local" en la barra de arriba: estilos.css lo pinta
   blanco, pensado para una barra oscura; sobre la barra blanca no se veía. */
.topbar .seg.solo span{color:var(--tx-2)}

/* Logo de la barra compacta: más grande que el de la Base (40 px), que al
   bajar quedaba chiquito al lado del logo grande de la ficha. */
.topbar .logo{width:52px; height:52px; border-radius:14px; font-size:23px}
.topbar .logo{overflow:hidden}
.topbar .logo img{padding:0; object-fit:cover}


/* Horarios del local, debajo de la dirección. Cerrado muestra sólo el de hoy. */
.ficha-hor{margin:6px 0 0; font-size:13px; color:var(--tx-2)}
.ficha-hor summary{cursor:pointer; list-style:none; display:inline-block}
.ficha-hor summary::-webkit-details-marker{display:none}
.ficha-hor summary span{text-decoration:underline; text-underline-offset:2px}
.ficha-hor[open] summary span{display:none}
.ficha-hor ul{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px}
.ficha-hor li{display:flex; gap:10px}
.ficha-hor li b{font-weight:500; min-width:78px}
.ficha-hor li.hoy{color:var(--tx-1); font-weight:600}
.ficha-hor li.hoy b{font-weight:600}

/* El logo va montado sobre la portada, y ahí se queda: con `align-items:end`
   de la ficha, cada línea nueva de texto (frase, dirección, horarios) lo
   empujaba para abajo y lo despegaba de la foto. */
.ficha-logo.logo{align-self:start}

/* ---------- Panel de abajo (producto, pedido, reserva) ----------
   En el celular no toca los bordes: deja 8px a cada lado, así se lee como
   algo que está encima de la carta. Y una X arriba para cerrar, igual que
   "Volver a la carta". */
.sheet{width:min(520px, calc(100% - 16px))}
.sheet-x{position:absolute; top:32px; left:12px; z-index:2; width:40px; height:40px;
  border:none; background:transparent; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--tx-2, #555)}
.sheet-x:hover{background:var(--bg-1, #f2f2f2)}
.sheet-in > h3:first-child{padding-left:40px; min-height:40px; display:flex; align-items:center}

/* ---------- "Del día" ----------
   Primera sección de la carta, en un recuadro con el color del local para
   que se note que es lo de hoy. Sale del mismo --accent de cada marca. */
.sec-dia{margin-top:14px; padding:14px 14px 16px; border-radius:18px;
  background:var(--bg-0);
  background:color-mix(in srgb, var(--accent) 7%, var(--bg-0));
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent)}
.sec-dia .dia-cab{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.sec-dia .dia-cab h2{margin:0}
.dia-hoy{flex:none; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px}

/* Descuento o recargo por forma de pago (29/09/2026) */
.opcion b.aj{font-size:13px}
.sum .row.aj{color:var(--tx-1); font-weight:600}

/* ---------- Zona de envío y alias para transferir (09/10/2026) ---------- */
.ck-entrega-tit{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ck-zona{font-size:13.5px; font-weight:600; color:var(--accent); text-decoration:underline; white-space:nowrap}
/* Barra de arriba: Retira/Envío con el link a la zona debajo */
.modo-caja{display:flex; flex-direction:column; align-items:center; gap:3px; flex:none}
.modo-zona{font-size:11.5px; font-weight:600; color:var(--accent); text-decoration:underline; white-space:nowrap; line-height:1.2}
.ck-alias{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 2px;
  padding:10px 12px; border:1px solid var(--line, rgba(0,0,0,.12)); border-radius:12px}
.ck-alias div{min-width:0}
.ck-alias span{display:block; font-size:12px; opacity:.7}
.ck-alias b{display:block; font-size:16px; word-break:break-all}
.ck-alias small{display:block; font-size:13px; opacity:.8}
.ck-alias button{flex:none; font:inherit; font-weight:600; padding:8px 12px; border-radius:10px;
  border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer}

/* Visor de la zona de envío: encima de todo, también del pedido abierto */
.visor{position:fixed; inset:0; z-index:200; background:rgba(15,15,15,.72); display:flex;
  align-items:center; justify-content:center; padding:16px; animation:visorEntra .15s ease-out}
.visor-caja{background:var(--bg-0, #fff); border-radius:16px; overflow:hidden; width:100%; max-width:720px;
  max-height:100%; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.35)}
.visor-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 16px}
.visor-cab b{font-size:16px}
.visor-x{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0;
  border-radius:999px; background:var(--bg-2, #eee); color:inherit; cursor:pointer}
.visor-caja img{display:block; width:100%; height:auto; min-height:0; object-fit:contain; background:#f2efe9}
html.visor-abierto, html.visor-abierto body{overflow:hidden}
@keyframes visorEntra{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){.visor{animation:none}}

/* Entrega a coordinar (21/10/2026): el texto del local puede ser largo,
   así que corta en dos líneas en vez de empujar la barra. */
.seg.solo.libre{flex:0 1 auto; min-width:0; max-width:min(60%, 340px)}
.seg.solo.libre span{display:block; white-space:normal; text-align:right; line-height:1.35}
/* Aviso con texto libre de Mi local: mismo cartel que "Ahora está cerrado". */
.aviso-libre span{white-space:normal}