/* =====================================================================
   FRIAL ROSTICERIA - Cliente mobile-first
   Paleta: rojo vibrante (parrilla), crema cálido, negro carbón
   ===================================================================== */
:root {
  --c-primary: #c1272d;
  --c-primary-dark: #8e1418;
  --c-primary-light: #ff4d54;
  --c-accent: #f4a900;
  --c-bg: #fff8f2;
  --c-surface: #ffffff;
  --c-ink: #1a1a1a;
  --c-ink-soft: #555;
  --c-ink-muted: #8a8a8a;
  --c-border: #eee4d8;
  --c-success: #1f8a46;
  --c-danger: #c1272d;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.1);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.18);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bot: env(safe-area-inset-bottom, 0);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(100px + var(--safe-bot));
}

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.2; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ HEADER ============ */
.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(.9rem + var(--safe-top)) 1rem .9rem;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.15); display: grid; place-items: center;
  font-size: 1.4rem;
}
.brand-text h1 { font-size: 1.15rem; margin: 0; letter-spacing: .02em; }
.brand-sub { font-size: .72rem; opacity: .9; font-weight: 500; }

.btn-cart {
  position: relative; width: 44px; height: 44px;
  border-radius: 12px; color: #fff; background: rgba(255,255,255,.15);
  display: grid; place-items: center; transition: transform .15s;
}
.btn-cart:active { transform: scale(.95); }
.btn-cart svg { width: 22px; height: 22px; }
.cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--c-accent);
  color: var(--c-ink); font-size: .7rem; font-weight: 800;
  display: grid; place-items: center;
}
.cart-badge.empty { display: none; }

/* ============ BANNER ============ */
.banner-estado {
  padding: .75rem 1rem; background: #ffe7a6; color: #6b4a00;
  font-size: .85rem; text-align: center; font-weight: 500;
  border-bottom: 1px solid #e7cc7a;
}
.banner-estado.danger { background: #fde2e4; color: #8e1418; border-bottom-color: #f0b4b8; }

/* ============ TABS CATEGORÍAS ============ */
.cat-tabs {
  position: sticky; top: calc(66px + var(--safe-top)); z-index: 40;
  display: flex; gap: .5rem; overflow-x: auto; overflow-y: hidden;
  padding: .8rem 1rem; background: var(--c-bg);
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  flex: 0 0 auto; padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--c-surface); color: var(--c-ink-soft);
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  border: 1.5px solid var(--c-border); transition: all .2s;
}
.cat-tab.active {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(193,39,45,.3);
}

/* ============ MAIN / SECTIONS ============ */
.app-main { padding: 0 1rem 2rem; }
.cat-section { padding: .5rem 0 1.5rem; scroll-margin-top: 130px; }
.cat-section h2 {
  font-size: 1.25rem; margin: 1rem 0 .25rem;
  display: flex; align-items: center; gap: .5rem;
}
.cat-section h2 .ico { font-size: 1.4rem; }
.cat-section .sub { color: var(--c-ink-muted); font-size: .82rem; margin: 0 0 .8rem; }

.prod-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 560px) { .prod-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .prod-grid { grid-template-columns: 1fr 1fr 1fr; } }

.prod-card {
  display: flex; gap: .9rem; padding: .75rem;
  background: var(--c-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s;
  border: 1px solid transparent;
}
.prod-card:active { transform: scale(.98); }
.prod-card.unavailable { opacity: .55; pointer-events: none; }
.prod-img {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 12px;
  background: linear-gradient(135deg, #ffd3b5, #ffa07a);
  display: grid; place-items: center; font-size: 2rem;
  overflow: hidden; position: relative;
}
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prod-name { font-size: .98rem; font-weight: 700; margin: 0 0 .2rem; }
.prod-desc {
  font-size: .78rem; color: var(--c-ink-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: .4rem;
}
.prod-price { font-size: 1.05rem; font-weight: 800; color: var(--c-primary); }
.prod-add {
  width: 34px; height: 34px; border-radius: 10px; background: var(--c-primary);
  color: #fff; font-size: 1.3rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(193,39,45,.3);
}
.prod-badge {
  position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.7); color: #fff;
  font-size: .65rem; padding: 2px 6px; border-radius: 6px;
}
.prod-stock { font-size: .7rem; color: var(--c-ink-muted); }
.prod-stock.low { color: var(--c-accent); font-weight: 700; }

/* ============ SKELETON ============ */
.skeleton-wrap { padding-top: 1rem; }
.skeleton-card {
  height: 110px; border-radius: var(--radius); margin-bottom: .8rem;
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%; animation: shine 1.4s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ MODAL / DRAWER ============ */
.modal, .drawer {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal[hidden], .drawer[hidden] { display: none !important; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-sheet {
  position: relative; width: 100%; max-width: 560px;
  background: var(--c-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideUp .3s cubic-bezier(.16,1,.3,1);
  padding-bottom: var(--safe-bot);
}
.modal-sheet-lg { max-height: 95vh; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 640px) {
  .modal { align-items: center; padding: 1rem; }
  .modal-sheet { border-radius: var(--radius-lg); max-height: 88vh; }
}
.modal-close {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.08); font-size: 1rem; font-weight: 700;
  display: grid; place-items: center;
}
.modal-img {
  height: 180px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, #ffb07a, #ff7050); display: grid; place-items: center;
  font-size: 4rem; overflow: hidden;
}
.modal-img img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 1.25rem; overflow-y: auto; }
.modal-body h2 { font-size: 1.3rem; }
.modal-desc { color: var(--c-ink-muted); font-size: .88rem; margin: 0 0 1rem; }
.modal-precio { font-size: 1.5rem; font-weight: 800; color: var(--c-primary); margin-bottom: 1rem; }
.modal-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* campos */
.field { display: block; margin-bottom: .9rem; }
.field > span {
  display: block; font-size: .8rem; color: var(--c-ink-soft);
  margin-bottom: .35rem; font-weight: 600;
}
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; font-size: 1rem;
  border: 1.5px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg); color: var(--c-ink);
  font-family: inherit; transition: border-color .15s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary); background: #fff;
}
.field textarea { resize: vertical; min-height: 60px; }

.hint { font-size: .75rem; color: var(--c-ink-muted); font-weight: 500; }

/* guarniciones */
.guarniciones-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem;
  margin-bottom: 1rem;
}
.guarnicion-chip {
  display: flex; align-items: center; gap: .5rem; padding: .7rem .75rem;
  border: 1.5px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg); cursor: pointer; font-size: .85rem;
  transition: all .15s; font-weight: 500;
}
.guarnicion-chip.selected {
  background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}
.guarnicion-chip .check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; display: grid; place-items: center; font-size: .7rem;
}
.guarnicion-chip.selected .check::after { content: "✓"; }
.guarnicion-chip .extra { font-size: .7rem; opacity: .7; margin-left: auto; }

/* cantidad */
.qty-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 0; margin-top: .5rem;
}
.qty-row > span { font-weight: 600; }
.qty-control {
  display: flex; align-items: center; gap: 1rem; background: var(--c-bg);
  padding: .25rem; border-radius: 999px;
}
.qty-control button {
  width: 38px; height: 38px; border-radius: 50%; background: var(--c-surface);
  font-size: 1.3rem; font-weight: 700; color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}
.qty-control span { min-width: 28px; text-align: center; font-weight: 700; font-size: 1.1rem; }

/* botones */
.btn-primary {
  background: var(--c-primary); color: #fff; font-weight: 700;
  padding: .95rem 1.2rem; border-radius: 12px; font-size: 1rem;
  transition: transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(193,39,45,.3);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-lg { padding: 1.1rem; font-size: 1.05rem; }
.btn-outline {
  background: var(--c-surface); color: var(--c-primary); font-weight: 600;
  padding: .85rem 1rem; border-radius: 12px; font-size: .92rem;
  border: 1.5px solid var(--c-primary); display: flex; align-items: center; justify-content: center; gap: .4rem;
}

/* ============ DRAWER CARRITO ============ */
.drawer-panel {
  position: relative; width: 100%; max-width: 560px;
  background: var(--c-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideUp .3s cubic-bezier(.16,1,.3,1);
  padding-bottom: var(--safe-bot);
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--c-border);
}
.drawer-header h2 { margin: 0; font-size: 1.2rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }

.cart-empty { text-align: center; padding: 3rem 1rem; color: var(--c-ink-muted); }
.cart-empty .big-ico { font-size: 3rem; opacity: .4; margin-bottom: .5rem; }

.cart-item {
  display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px dashed var(--c-border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item .thumb {
  width: 56px; height: 56px; border-radius: 10px; flex: 0 0 56px;
  background: linear-gradient(135deg, #ffd3b5, #ffa07a);
  display: grid; place-items: center; font-size: 1.4rem;
}
.cart-item .info { flex: 1; min-width: 0; }
.cart-item .info strong { font-size: .95rem; display: block; }
.cart-item .info small { color: var(--c-ink-muted); font-size: .75rem; display: block; }
.cart-item .ctrl { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.cart-item .ctrl button {
  width: 26px; height: 26px; border-radius: 6px; background: var(--c-bg);
  color: var(--c-primary); font-weight: 700;
}
.cart-item .ctrl span { font-weight: 700; min-width: 20px; text-align: center; font-size: .9rem; }
.cart-item .price { font-weight: 700; color: var(--c-primary); white-space: nowrap; font-size: .9rem; }
.cart-item .btn-remove {
  color: var(--c-ink-muted); font-size: 1.1rem; padding: 0 .3rem;
}

.drawer-footer {
  padding: 1rem 1.25rem; border-top: 1px solid var(--c-border); background: var(--c-surface);
}
.resumen-linea {
  display: flex; justify-content: space-between; padding: .3rem 0; font-size: .92rem;
}
.resumen-linea.total { font-size: 1.15rem; padding-top: .6rem; margin-top: .3rem; border-top: 1px solid var(--c-border); }
.resumen-linea.total strong { color: var(--c-primary); font-size: 1.25rem; }

/* ============ CHECKOUT TOGGLE ============ */
.tipo-entrega-wrap h3 { font-size: .95rem; margin-bottom: .5rem; }
.toggle-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem;
}
.toggle-btn {
  padding: .85rem; border-radius: 12px; border: 1.5px solid var(--c-border);
  background: var(--c-bg); font-weight: 600; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: all .15s;
}
.toggle-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.toggle-btn .ico { font-size: 1.2rem; }
.toggle-btn:disabled { opacity: .4; cursor: not-allowed; }

.fecha-reserva-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* ============ EXITO / COMANDA ============ */
.modal-success { align-items: flex-start; overflow-y: auto; padding: 0; }
.modal-success .modal-sheet {
  margin: 0; border-radius: 0; max-height: none; min-height: 100vh;
}
@media (min-width: 640px) {
  .modal-success { align-items: center; padding: 1rem; }
  .modal-success .modal-sheet { border-radius: var(--radius-lg); min-height: auto; }
}
.exito-header {
  background: linear-gradient(135deg, var(--c-success) 0%, #16a84f 100%);
  color: #fff; padding: 2rem 1.5rem 1.5rem; text-align: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.exito-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.25); display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 800; margin: 0 auto .75rem;
}
.exito-header h2 { font-size: 1.5rem; margin: 0 0 .3rem; }
.exito-header p { margin: 0; opacity: .9; font-size: .9rem; }

.comanda-wrap { padding: 1.25rem; }
.comanda {
  background: #fff; padding: 1rem; border: 2px dashed var(--c-border); border-radius: 12px;
  font-family: 'Courier New', monospace; font-size: .82rem;
}
.comanda-titulo { text-align: center; font-weight: 700; margin-bottom: .5rem; font-size: .95rem; }
.comanda hr { border: none; border-top: 1px dashed var(--c-ink-muted); margin: .5rem 0; }
.comanda table { width: 100%; font-size: .78rem; }
.comanda table th, .comanda table td { padding: 2px 0; text-align: left; }
.comanda table th:last-child, .comanda table td:last-child { text-align: right; }
.comanda .qr-box {
  display: flex; justify-content: center; padding: .75rem 0;
}
.comanda .total-line { font-weight: 700; font-size: .95rem; }

.exito-actions {
  padding: 0 1.25rem 1.5rem; display: grid; gap: .6rem;
}
.exito-actions .btn-outline { width: 100%; }

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: calc(1.5rem + var(--safe-bot)); left: 50%;
  transform: translateX(-50%);
  background: var(--c-ink); color: #fff;
  padding: .9rem 1.25rem; border-radius: 999px;
  font-size: .88rem; font-weight: 500;
  box-shadow: var(--shadow-md); z-index: 200;
  max-width: calc(100vw - 2rem);
  animation: toastIn .3s;
}
.toast.error { background: var(--c-danger); }
.toast.success { background: var(--c-success); }
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ============ FECHA BANNER ============ */
.fecha-banner{
  position:sticky;top:0;z-index:9;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  color:#fff;
  padding:10px 16px;
}
.fecha-banner-inner{
  display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;
}
.fecha-ico{font-size:22px;flex-shrink:0}
.fecha-texto{flex:1;min-width:0;line-height:1.2}
.fecha-texto strong{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fecha-val{font-size:12px;opacity:.95;text-transform:capitalize}
.fecha-cambiar-wrap{position:relative;flex-shrink:0}
.fecha-cambiar{
  background:rgba(255,255,255,.25);color:#fff;border:1px solid rgba(255,255,255,.5);
  padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;pointer-events:none;
}
.fecha-picker-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
  font-size:16px;
  border:none;background:transparent;color:transparent;
  -webkit-appearance:none;appearance:none;
}
.fecha-picker-overlay::-webkit-calendar-picker-indicator{
  position:absolute;inset:0;width:100%;height:100%;cursor:pointer;opacity:0;
}

/* ============ CTA FLOTANTE COMPLETAR PEDIDO ============ */
.cta-completar{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:80;
  display:flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;border:none;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
  color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  box-shadow:0 8px 28px rgba(193,39,45,.45);
  cursor:pointer;animation:ctaSlideUp .35s cubic-bezier(.16,1,.3,1);
}
.cta-completar:active{transform:translateX(-50%) scale(.97)}
.cta-mano{font-size:22px;animation:ctaWave 1.6s ease-in-out infinite;display:inline-block}
.cta-texto{font-weight:700}
.cta-total{
  background:rgba(255,255,255,.25);
  padding:4px 12px;border-radius:999px;font-size:14px;font-weight:800;
}
@keyframes ctaSlideUp{from{transform:translateX(-50%) translateY(80px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes ctaWave{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-18deg)}20%,40%{transform:rotate(18deg)}}
@media (max-width:500px){
  .cta-completar{padding:12px 18px;font-size:14px;width:calc(100% - 32px);justify-content:center}
  .cta-texto{flex:1;text-align:center}
}

/* Horario de recojo banner en checkout */
.horario-recojo-banner{
  margin:12px 0;
  background:linear-gradient(135deg,#fff8e7,#ffefc2);
  border:2px dashed #e09a00;
  border-radius:12px;padding:12px 14px;
}
.horario-inner{display:flex;align-items:center;gap:12px}
.horario-emoji{font-size:28px;flex-shrink:0}
.horario-inner strong{display:block;font-size:13px;color:#8a5a00;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.horario-inner span{display:block;font-size:13px;color:#5c3d00;line-height:1.35}
.horario-inner span strong{display:inline;text-transform:none;font-size:14px;color:#8a5a00;letter-spacing:0}