/* ===== Pedidos Abasto · estilos compartidos =====
   Base verde muy oscuro, naranja para acciones, amarillo para promos y destacados. */
:root{
  --bg:#F5F6F2; --surface:#FFFFFF; --surface-2:#F1F2EE; --ink:#10261F; --muted:#5E6B65; --line:#E3E6E0; --line-2:#EEF0EB;
  --brand:#1E5B45; --brand-soft:#E2F3EA; --brand-ink:#1E6B48;
  --cta:#FF5A1F; --cta-ink:#FFFFFF;
  --accent:#FFD24C; --accent-ink:#10261F;
  --ok:#1E6B48; --ok-soft:#E2F3EA; --warn:#8A5A00; --warn-soft:#FDF1CF; --bad:#9A3B2C; --bad-soft:#F7E6E2;
  --info:#1F4E87; --info-soft:#E7F0FA; --whatsapp:#1F9D57;
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --sombra:0 1px 0 var(--line), 0 8px 24px rgba(16,38,31,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:0 48px;-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;width:100%}
.wrap.ancho{max-width:960px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* Encabezado */
header.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:18px;flex-wrap:wrap}
header.top .logo{margin-right:auto}
.pedir{display:inline-flex;align-items:center;gap:6px;background:var(--cta);color:#fff;text-decoration:none;font-weight:800;font-size:13px;border-radius:99px;padding:8px 13px;box-shadow:0 4px 12px rgba(255,90,31,.28);white-space:nowrap}
.pedir:hover{color:#fff;filter:brightness(1.05)}
.logo{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;display:flex;gap:6px;align-items:center;color:var(--ink);text-decoration:none}
.logo b{background:var(--cta);color:var(--cta-ink);padding:2px 8px;border-radius:9px}
.me{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.lnk{background:none;border:0;padding:0;color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* Tipografía */
h1{font-family:var(--display);font-weight:800;font-size:clamp(26px,7vw,34px);line-height:1.04;margin:0;letter-spacing:-.03em;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-size:20px;margin:0;letter-spacing:-.02em}
p{margin:0}
.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--muted)}

/* Tarjetas */
.card{background:var(--surface);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra)}

/* Botones */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;text-decoration:none;border-radius:16px;min-height:50px;padding:12px 18px;font-weight:800;border:0;font-size:15px}
.btn.main{background:var(--brand);color:#fff}
.btn.cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 8px 22px rgba(255,90,31,.3)}
.btn.alt{background:var(--ink);color:#fff}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700}
.btn.bad{background:var(--surface);border:1px solid var(--line);color:var(--bad);font-weight:700}
.btn.google{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700;width:100%}
.btn:disabled{opacity:.55;cursor:wait}

/* Formularios */
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.01em}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;color:var(--ink);font-size:15px;font-weight:500}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.row2{display:flex;gap:10px;flex-wrap:wrap}.row2>*{flex:1 1 160px}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.opt{border:2px solid var(--line);background:var(--surface);border-radius:18px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:2px}
.opt strong{font-size:16px}
.opt span{font-size:13px;color:var(--muted)}
.opt[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}

/* Segmentos (pestañas tipo píldora) */
.segm{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:#E9EBE5;border-radius:16px;padding:4px}
.segm button{border:0;background:transparent;border-radius:12px;padding:10px 4px;font-weight:700;font-size:14px;color:var(--muted)}
.segm button[aria-selected="true"],.segm button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:800;box-shadow:0 1px 3px rgba(16,38,31,.12)}

/* Mensajes y estados */
.msg{font-size:14px;font-weight:600}
.msg.bad{color:var(--bad)}.msg.ok{color:var(--ok)}
.estado{border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:6px}
.estado.pend{background:var(--warn-soft);color:var(--warn)}
.estado.ok{background:var(--ok-soft);color:var(--ok)}
.estado.bad{background:var(--bad-soft);color:var(--bad)}
.estado strong{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.pill{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;background:var(--surface-2);color:#3E4A44}
.pill.pend{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;padding:13px 20px;border-radius:16px;font-weight:700;z-index:20;max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 30px rgba(16,38,31,.3)}
.cargando{color:var(--muted);text-align:center;padding:40px 0}
.vacio{background:var(--surface);border:2px dashed var(--line);border-radius:var(--r);padding:28px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.vacio strong{color:var(--ink);font-size:16px}

/* Hojas que suben desde abajo */
.scrim{position:fixed;inset:0;background:rgba(16,38,31,.5);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.hoja{background:var(--bg);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:28px 28px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.hoja-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x{border:0;background:var(--surface);width:44px;height:44px;border-radius:50%;font-size:20px;flex:none;box-shadow:0 0 0 1px var(--line)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Banner para instalar la app */
.instalar{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:22px;padding:12px 12px 12px 14px;box-shadow:var(--sombra);position:relative}
.instalar img{border-radius:14px;flex:none}
.instalar .tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:13px;color:var(--muted)}
.instalar .tx b{color:var(--ink)}
.instalar .tx>b{font-size:15px}
.instalar .tx svg{vertical-align:-2px}
.instalar .btn{min-height:42px;padding:8px 16px;flex:none}
.instalar .no{border:0;background:transparent;color:var(--muted);font-size:20px;width:32px;height:32px;flex:none;padding:0}