:root{
  --verde:#2E7D32;
  --verde-oscuro:#1E5E23;
  --verde-suave:#E3F0E1;
  --naranja:#FF8A00;
  --naranja-oscuro:#B85F00;
  --amarillo:#FFC857;
  --amarillo-suave:#FFF1D2;
  --crema:#FFF7E8;
  --bg:#FFF7E8;
  --bg-card:#FFFFFF;
  --ink:#263238;
  --ink-soft:#6B7A72;
  --line:#EFE2C4;
  --cerrado:#9AA39C;
  --cerrado-suave:#EDEFE9;
  --peligro:#C24C3A;
  --peligro-suave:#EFCFC7;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  /* Única fuente de verdad para la altura del menú inferior flotante — si se
     rediseña el bottomnav, solo hay que ajustar este número una vez. */
  --nav-height:96px;
  --nav-gap:8px;
  --font-display:'Fredoka',-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Inter',-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow-card:0 1px 3px rgba(38,54,42,.07), 0 1px 2px rgba(38,54,42,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-height) + var(--safe-bottom));
}

.brand, .hero-greeting, .biz-title, .section-title,
.form-card h3, .stat-num, .progress-label,
.btn-primary, .btn-secondary{
  font-family:var(--font-display);
}

button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}
img{max-width:100%;display:block}
svg{display:block}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:10;
  background:var(--verde);
  color:#fff;
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
}
.brand{font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand em{font-style:normal;color:var(--amarillo)}
.btn-instalar{
  background:var(--naranja);
  border:none;
  color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;
}
.topbar-actions{display:flex;align-items:center;gap:8px}
.btn-acceso-rol,
.btn-cerrar-sesion{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  border:1px solid rgba(255,255,255,.32);color:#fff;
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease, background .15s ease;
}
.btn-acceso-rol::before, .btn-cerrar-sesion::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  background-size:220% 100%;
  animation:glassSheen 5.5s ease-in-out infinite;
}
.btn-acceso-rol:active, .btn-cerrar-sesion:active{transform:scale(.94);background:rgba(255,255,255,.22)}

/* App container */
#app{max-width:560px;margin:0 auto;padding:0 0 24px}

/* Hero (saludo + ubicación + búsqueda) */
.hero{
  background:var(--verde);color:#fff;
  padding:18px 16px 26px;
  border-radius:0 0 26px 26px;
  margin-bottom:18px;
}
.hero-greeting{font-size:20px;font-weight:800;margin:0 0 2px}
.hero-location{
  display:flex;align-items:center;gap:5px;
  font-size:13px;color:var(--amarillo);font-weight:600;margin:0 0 16px;
}
.hero-location svg{width:14px;height:14px;stroke:var(--amarillo);fill:none;flex:0 0 auto}
.search-wrap{position:relative}
.search-input{
  width:100%;padding:13px 40px 13px 14px;border:none;
  border-radius:var(--radius-md);background:#fff;color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.search-input:focus{outline:2px solid var(--amarillo);outline-offset:1px}
.search-input::placeholder{color:var(--ink-soft)}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;border:none;background:var(--cerrado-suave);
  color:var(--ink-soft);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
}

.hero-status{
  display:flex;align-items:center;gap:9px;
  margin-top:16px;padding:11px 14px;
  background:rgba(255,255,255,.13);border-radius:var(--radius-md);
}
.hero-status .dot{width:9px;height:9px;border-radius:50%;background:var(--amarillo);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(255,200,87,.25)}
.hero-status strong{font-weight:800}
.hero-status button{
  margin-left:auto;background:none;border:none;color:#fff;font-size:12.5px;
  font-weight:700;text-decoration:underline;text-underline-offset:2px;flex:0 0 auto;
}
.hero-status #btn-actualizar{
  margin-left:8px;text-decoration:none;width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
}
.hero-status #btn-actualizar svg{width:16px;height:16px;stroke:#fff;fill:none}

.offline-banner{
  margin-top:10px;padding:9px 14px;border-radius:var(--radius-md);
  background:rgba(255,255,255,.13);color:#fff;font-size:12.5px;font-weight:600;
}

.view-body{padding:0 16px 40px}

/* Category icon grid */
.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:20px;
}
.cat-emoji{font-size:24px;line-height:1}
.cat-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;padding:6px 2px;color:var(--ink);
}
.cat-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 4px 14px rgba(38,54,42,.1), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.cat-item.active .cat-icon{background:var(--verde);border-color:var(--verde);transform:scale(1.05)}
.cat-item.active .cat-icon svg{stroke:#fff}
.cat-icon svg{width:24px;height:24px;stroke:var(--verde);fill:none}
.cat-label{font-size:11px;font-weight:600;text-align:center;color:var(--ink-soft);line-height:1.2}
.cat-item.active .cat-label{color:var(--verde-oscuro)}

.toggle-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin-bottom:18px;scrollbar-width:none}
.toggle-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-card);color:var(--ink-soft);font-size:13px;font-weight:700;
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.chip.active{background:var(--verde);border-color:var(--verde);color:#fff}
.chip .chip-dot{width:7px;height:7px;border-radius:50%;background:var(--verde)}
.chip.active .chip-dot{background:var(--amarillo)}

/* Section headers */
.section-title{
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);font-weight:800;margin:22px 0 12px;
}
.section-title:first-child{margin-top:0}

/* Encabezado simple, sin caja de color (p. ej. Ayuda) */
.plain-header{display:flex;align-items:center;gap:14px;padding-top:22px;margin-bottom:20px}
.plain-header-emoji{
  width:52px;height:52px;border-radius:var(--radius-md);flex:0 0 auto;
  background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-card);
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.plain-header-title{font-family:var(--font-display);font-size:19px;font-weight:600;margin:0 0 2px;color:var(--ink)}
.plain-header-sub{font-size:12.5px;color:var(--ink-soft);margin:0}

/* Business cards */
.biz-list{display:flex;flex-direction:column;gap:12px}
.biz-card{
  display:flex;gap:14px;align-items:center;
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 40px 12px 12px;text-align:left;width:100%;
  position:relative;cursor:pointer;
  box-shadow:var(--shadow-card);
}
.biz-card:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.fav-btn{
  background:none;border:none;color:var(--cerrado);padding:4px;line-height:0;
}
.fav-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;transition:fill .12s ease, stroke .12s ease}
.fav-btn.activo{color:var(--naranja)}
.fav-btn.activo svg{fill:var(--naranja)}
.biz-card > .fav-btn{position:absolute;top:10px;right:8px}
.avatar{
  width:56px;height:56px;border-radius:var(--radius-md);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;color:#fff;overflow:hidden;background:var(--verde);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.biz-info{min-width:0;flex:1}
.biz-name-row{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.biz-name{font-weight:800;font-size:15.5px;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biz-meta{font-size:13px;color:var(--ink-soft);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.status-pill{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  font-size:11px;font-weight:800;padding:3px 9px 3px 7px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.02em;
}
.status-pill .dot{width:6px;height:6px;border-radius:50%}
.status-pill.abierto{background:var(--verde-suave);color:var(--verde-oscuro)}
.status-pill.abierto .dot{background:var(--verde)}
.status-pill.cerrado{background:var(--cerrado-suave);color:var(--ink-soft)}
.status-pill.cerrado .dot{background:var(--cerrado)}

.empty-state{
  text-align:center;color:var(--ink-soft);padding:40px 20px;font-size:14px;
}

/* Business detail */
.biz-header{
  background:linear-gradient(135deg,var(--verde),var(--verde-oscuro));color:#fff;border-radius:var(--radius-lg);
  padding:20px 18px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(30,94,35,.25);
}
.biz-header-top{display:flex;align-items:center;justify-content:space-between}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;color:#fff;opacity:.95;font-size:14px;
  padding:0 0 14px;font-weight:700;font-family:var(--font-display);
}
.back-btn-icon{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.back-btn-icon svg{width:15px;height:15px;stroke:#fff}
.biz-header-actions{display:flex;gap:8px;padding-bottom:14px}
.icon-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.icon-btn.fav-btn.activo{background:var(--amarillo);color:var(--verde-oscuro)}
.icon-btn.fav-btn.activo svg{fill:var(--verde-oscuro)}
.biz-header-row{display:flex;gap:14px;align-items:center}
.biz-header .avatar{width:64px;height:64px;font-size:24px;background:rgba(255,255,255,.18)}
.biz-foto-cambiar{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#fff;opacity:.95;
  background:rgba(255,255,255,.16);padding:7px 12px;border-radius:999px;
}
.biz-foto-cambiar svg{width:14px;height:14px;stroke:#fff;fill:none}
.biz-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.biz-title{font-size:20px;font-weight:800;margin:0 0 4px}
.biz-cat{font-size:13px;opacity:.85;margin:0}
.biz-desc{font-size:14px;line-height:1.55;margin:14px 0 0;opacity:.95}
.biz-contact{font-size:13px;margin-top:10px;opacity:.9}
.biz-schedule{font-size:13px;margin-top:6px;opacity:.9}

.biz-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.biz-action-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
  padding:9px 13px;border-radius:999px;font-size:13px;font-weight:700;
}
.biz-action-btn svg{width:15px;height:15px;stroke:currentColor;fill:none}

.promo-list{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.promo-item{
  background:var(--amarillo-suave);color:#8A4B00;border-radius:var(--radius-sm);
  padding:10px 13px;font-size:13px;font-weight:600;
}

.btn-recomendar{color:var(--verde-oscuro);border-color:var(--verde-suave);
  display:flex;align-items:center;justify-content:center;gap:7px}
.btn-recomendar svg{width:16px;height:16px;stroke:currentColor;fill:none}
.btn-recomendar.activo{background:var(--verde-suave);border-color:var(--verde)}

.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.product-photo{
  aspect-ratio:1/1;background:var(--verde-suave);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;color:var(--verde-oscuro);
}
.product-photo img{width:100%;height:100%;object-fit:cover}
.product-info{padding:10px 12px 12px}
.product-name{font-size:13.5px;font-weight:700;margin:0 0 4px;line-height:1.3}
.product-price{font-size:14px;font-weight:800;color:var(--naranja-oscuro);margin:0}
.product-unavailable{opacity:.5}
.product-unavailable .product-price::after{content:" · agotado";font-weight:500;color:var(--ink-soft)}
.product-preguntar{
  display:block;text-align:center;padding:7px;margin:0 10px 10px;
  border-top:1px solid var(--line);color:var(--verde-oscuro);
  font-size:12px;font-weight:700;text-decoration:none;
}

/* Formulario de registro */
.demo-intro{font-size:14px;color:var(--ink-soft);margin:0 0 20px;max-width:46ch}

/* Bienvenida (onboarding antes de registrarse) */
.onboarding-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 8px}
.onboarding-step{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px;box-shadow:var(--shadow-card);
}
.onboarding-step .n{
  width:22px;height:22px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-bottom:8px;
}
.onboarding-step p{margin:0;font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.onboarding-negocio{background:var(--verde-suave);border-radius:var(--radius-lg);padding:16px}
.onboarding-negocio p{margin:0 0 12px;font-size:13.5px;color:var(--ink);line-height:1.45}
.onboarding-negocio .btn-secondary{margin-top:0}
.form-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px;margin-bottom:18px;
  box-shadow:var(--shadow-card);
}
.form-card h3{margin:0 0 4px;font-size:15px}
.form-card .form-hint{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.field input[type="text"],
.field input[type="tel"],
.field input[type="time"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field textarea,
.field select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-suave);
}
.field textarea{resize:vertical;min-height:64px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.input-icon-wrap{position:relative}
.input-icon-wrap input{padding-left:38px !important}
.input-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--ink-soft);fill:none;pointer-events:none;
}
.login-card{margin-top:4px}
.login-card .btn-primary{margin-top:6px}
.photo-field{display:flex;align-items:center;gap:12px}
.photo-preview{
  width:56px;height:56px;border-radius:var(--radius-sm);background:var(--bg);
  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--ink-soft);font-size:11px;text-align:center;flex:0 0 auto;
}
.photo-preview img{width:100%;height:100%;object-fit:cover}
.file-btn{
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  padding:9px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
}

.dias-grid{display:flex;gap:6px;flex-wrap:wrap}
.dia-toggle{
  flex:1;min-width:38px;padding:9px 0;text-align:center;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
  font-size:12px;font-weight:700;
}
.dia-toggle.activo{background:var(--verde);border-color:var(--verde);color:#fff}

.hoy-options{display:flex;flex-direction:column;gap:8px}
.hoy-option{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--bg);font-size:13.5px;font-weight:600;
}
.hoy-option input{accent-color:var(--verde)}
.hoy-option.activo{border-color:var(--verde);background:var(--verde-suave)}

.product-row{
  border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;margin-bottom:12px;
  position:relative;background:var(--bg);
}
.product-row .remove-product{
  position:absolute;top:10px;right:10px;background:none;border:none;
  color:var(--naranja-oscuro);font-size:13px;font-weight:700;
}
.add-product-btn{
  width:100%;padding:12px;border:1.5px dashed var(--verde);border-radius:var(--radius-md);
  background:var(--verde-suave);color:var(--verde-oscuro);font-weight:700;font-size:14px;
}

.btn-primary{
  width:100%;padding:14px;border:none;border-radius:var(--radius-md);
  background:var(--naranja);color:#fff;font-weight:800;font-size:15px;margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary svg{width:17px;height:17px;stroke:#fff}
.btn-primary:active{background:var(--naranja-oscuro)}
.btn-secondary{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg-card);color:var(--naranja-oscuro);font-weight:700;font-size:14px;margin-top:10px;
}
.btn-secondary.btn-eliminar{color:var(--peligro);border-color:var(--peligro-suave)}
.btn-secondary.btn-reportar{color:var(--ink-soft)}

.toast{
  position:fixed;left:50%;bottom:calc(90px + var(--safe-bottom));transform:translateX(-50%) translateY(10px);
  overflow:hidden;
  background:rgba(38,54,42,.55);
  -webkit-backdrop-filter:blur(26px) saturate(200%) brightness(1.1);
  backdrop-filter:blur(26px) saturate(200%) brightness(1.1);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;
  font-weight:600;opacity:0;transition:opacity .2s ease, transform .2s ease;pointer-events:none;
  z-index:50;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Bottom nav — 3 círculos flotantes independientes, cada uno su propia pastilla de vidrio */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;justify-content:space-evenly;align-items:flex-start;
  padding:10px 10px calc(10px + var(--safe-bottom));
  background:none;border:none;box-shadow:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.bottomnav.nav-oculto{transform:translateY(140%);opacity:0;pointer-events:none}
.bottomnav[hidden]{display:none}
@keyframes glassSheen{
  0%, 100%{background-position:160% 0}
  50%{background-position:-60% 0}
}
.navbtn{
  flex:0 1 84px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0;background:none;border:none;color:var(--ink-soft);font-size:11px;font-weight:700;
}
.navbtn-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(38,54,42,.12), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.navbtn svg{width:20px;height:20px;stroke:var(--ink-soft);fill:none;transition:stroke .2s ease}
.navbtn[aria-current="page"]{color:var(--verde-oscuro);font-weight:800}
.navbtn[aria-current="page"] .navbtn-icon{background:var(--amarillo-suave);transform:scale(1.04)}
.navbtn[aria-current="page"] svg{stroke:var(--naranja-oscuro)}

@media (min-width:640px){
  .product-grid{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- PuebloFood: negocios, pedidos, roles ---------- */

.biz-meta-row{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.dot-sep{color:var(--line)}
.txt-abierto{color:var(--verde-oscuro);font-weight:700}
.txt-cerrado{color:var(--peligro);font-weight:700}
.stars{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--naranja-oscuro)}
.stars svg{width:13px;height:13px;fill:var(--amarillo);stroke:var(--amarillo)}
.stars-count{font-weight:600;color:var(--ink-soft)}

/* Barra compacta que aparece al bajar en la ficha de negocio */
.mini-header{
  position:fixed;top:0;left:0;right:0;z-index:9;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background:rgba(46,125,50,.92);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  transform:translateY(-100%);opacity:0;
  transition:transform .25s ease, opacity .25s ease;
  pointer-events:none;
}
.mini-header.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.mini-header .back-btn{padding-bottom:0}

/* Buscador y filtro dentro de la ficha de negocio */
.ficha-buscador{display:flex;gap:8px;align-items:center;margin:18px 0}
.ficha-buscador .input-icon-wrap{flex:1}
.ficha-buscador input{
  width:100%;padding:10px 12px 10px 38px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg-card);color:var(--ink);font-size:13.5px;
}
.ficha-buscador input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px var(--verde-suave)}
.product-section-title{
  font-size:13px;font-weight:800;color:var(--verde-oscuro);margin:20px 0 10px;
  font-family:var(--font-display);
}
.product-section-title:first-of-type{margin-top:16px}

.icon-btn.activo{background:var(--peligro-suave);color:var(--peligro)}

/* Lista de productos con selector de cantidad (ficha de negocio, cliente) */
.product-grid-list{display:flex;flex-direction:column;gap:10px}
.product-grid-list .product-card{
  display:flex;align-items:center;gap:12px;padding:10px;
}
.product-grid-list .product-photo{
  width:52px;height:52px;border-radius:var(--radius-sm);flex:0 0 auto;aspect-ratio:auto;
}
.product-grid-list .product-info{flex:1;padding:0;min-width:0}
.qty-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.qty-btn{
  width:28px;height:28px;border-radius:50%;border:none;background:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--ink)
}
.qty-btn svg{width:14px;height:14px}
.qty-btn.qty-add{background:var(--naranja);color:#fff}
.qty-num{font-weight:700;min-width:16px;text-align:center}
.qty-solo{width:32px;height:32px}

/* Barra de carrito flotante */
.cart-bar{
  position:fixed;left:0;right:0;bottom:calc(var(--nav-height) + var(--nav-gap) + var(--safe-bottom));z-index:11;
  padding:0 16px;
  transition:bottom .3s cubic-bezier(.4,0,.2,1);
}
body:has(.bottomnav.nav-oculto) .cart-bar{
  bottom:calc(20px + var(--safe-bottom));
}
.cart-bar button{
  width:100%;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--verde),var(--verde-oscuro));color:#fff;border:none;border-radius:999px;
  padding:14px 20px;font-weight:800;font-size:14px;
  box-shadow:0 6px 20px rgba(30,94,35,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.cart-bar button span{display:flex;align-items:center;gap:8px}
.cart-bar svg{width:17px;height:17px}

/* Resumen de pedido / checkout */
.order-line{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0}
.order-line.muted{color:var(--ink-soft)}
.order-line.total{font-weight:800;padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}
.cash-note{
  display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:var(--radius-sm);
  padding:11px;font-size:13.5px;font-weight:600;
}

/* Barra de progreso de seguimiento */
.progress-track{position:relative;height:36px;margin-bottom:6px}
.progress-track::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:4px;border-radius:99px;
  background:var(--cerrado-suave);transform:translateY(-50%);
}
.progress-fill{
  position:absolute;top:50%;left:0;height:4px;border-radius:99px;background:var(--naranja);
  transform:translateY(-50%);transition:width .5s ease;
}
.progress-emoji{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;transition:left .5s ease}
.progress-label{text-align:center;font-weight:800;color:var(--verde-oscuro);margin:4px 0 2px;font-size:14px}
.progress-status{text-align:center;color:var(--ink-soft);font-size:12.5px;margin:0}

/* Calificación */
.rating-picker{display:flex;justify-content:center;gap:10px}
.rating-star{background:none;border:none;color:var(--cerrado);padding:4px}
.rating-star svg{width:28px;height:28px;fill:none;stroke:currentColor}
.rating-star:hover, .rating-star:hover ~ .rating-star{color:var(--cerrado)}
.rating-picker:hover .rating-star{color:var(--amarillo);fill:var(--amarillo)}

/* Panel de negocio / repartidor / admin: pedidos */
.order-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.order-id{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.order-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn-inline{
  border:none;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
}
.btn-inline svg{width:13px;height:13px}
.btn-inline-ok{background:var(--verde-suave);color:var(--verde-oscuro)}
.btn-inline-bad{background:var(--peligro-suave);color:var(--peligro)}
.btn-inline-primary{background:var(--naranja);color:#fff}

.estado-pill{
  flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.02em;background:var(--cerrado-suave);color:var(--ink-soft);
}
.estado-pill.pill-recibido{background:var(--amarillo-suave);color:#946200}
.estado-pill.pill-confirmado{background:var(--amarillo-suave);color:#8A4B00}
.estado-pill.pill-preparando{background:#FFE0B8;color:var(--naranja-oscuro)}
.estado-pill.pill-en_camino{background:var(--verde-suave);color:var(--verde-oscuro)}
.estado-pill.pill-entregado{background:var(--verde-suave);color:var(--verde-oscuro)}
.estado-pill.pill-rechazado{background:var(--peligro-suave);color:var(--peligro)}

.stock-toggle{
  border:none;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;
  background:var(--verde-suave);color:var(--verde-oscuro);flex:0 0 auto;
}
.stock-toggle.agotado{background:var(--peligro-suave);color:var(--peligro)}

/* Admin: estadísticas */
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.stat-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;text-align:center;box-shadow:var(--shadow-card)}
.stat-num{font-size:20px;font-weight:800;margin:0;color:var(--ink)}
.stat-label{font-size:10.5px;color:var(--ink-soft);margin:2px 0 0}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.section-title-row .section-title{margin:0}

/* ---------- Banner promocional (Descubre) ---------- */
.promo-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--naranja),var(--naranja-oscuro));
  color:#fff;border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:20px;
  box-shadow:0 4px 14px rgba(184,95,0,.28);
  transition:opacity .25s ease;
}
.promo-banner.fade{opacity:0}
.promo-emoji{font-size:28px;line-height:1;flex:0 0 auto}
.promo-titulo{font-family:var(--font-display);font-size:14.5px;font-weight:600;margin:0 0 2px}
.promo-texto{font-size:12.5px;margin:0;opacity:.92}

/* ---------- Esqueletos de carga ---------- */
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton{
  background:linear-gradient(90deg,var(--line) 25%,var(--cerrado-suave) 50%,var(--line) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
.skeleton-card{pointer-events:none;cursor:default}
.skeleton-avatar{width:56px;height:56px;border-radius:var(--radius-md);flex:0 0 auto}
.skeleton-line{height:12px;margin:4px 0}

/* ---------- Animación de entrada de tarjetas ---------- */
@keyframes cardIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.biz-list > .biz-card,
.product-grid-list > .product-card,
.cat-grid > .cat-item,
.stats-grid > .stat-card,
.form-card{
  animation:cardIn .3s ease both;
}
.biz-list > .biz-card:nth-child(2), .product-grid-list > .product-card:nth-child(2), .cat-grid > .cat-item:nth-child(2){animation-delay:35ms}
.biz-list > .biz-card:nth-child(3), .product-grid-list > .product-card:nth-child(3), .cat-grid > .cat-item:nth-child(3){animation-delay:70ms}
.biz-list > .biz-card:nth-child(4), .product-grid-list > .product-card:nth-child(4), .cat-grid > .cat-item:nth-child(4){animation-delay:105ms}
.biz-list > .biz-card:nth-child(5), .product-grid-list > .product-card:nth-child(5), .cat-grid > .cat-item:nth-child(5){animation-delay:140ms}
.biz-list > .biz-card:nth-child(n+6), .product-grid-list > .product-card:nth-child(n+6), .cat-grid > .cat-item:nth-child(n+6){animation-delay:175ms}

/* ---------- Feedback táctil ---------- */
.btn-primary, .btn-secondary, .biz-card, .cat-item, .qty-btn, .btn-inline,
.stock-toggle, .icon-btn, .chip, .cart-bar button, .navbtn, .stat-card,
.product-card, .fav-btn, .back-btn{
  transition:transform .12s ease;
}
.btn-primary:active, .cart-bar button:active, .biz-card:active, .product-card:active{transform:scale(.97)}
.cat-item:active{transform:scale(.94)}
.qty-btn:active, .icon-btn:active, .stock-toggle:active, .btn-inline:active, .chip:active{transform:scale(.9)}

/* Un poco más de vida en la moto del seguimiento de pedido */
@keyframes motoBounce{
  0%,100%{transform:translateY(-50%) rotate(-3deg)}
  50%{transform:translateY(-58%) rotate(3deg)}
}
.progress-emoji{animation:motoBounce 1s ease-in-out infinite}

/* Confirmación del centro de ayuda */
.ayuda-confirmacion{text-align:center;padding:32px 20px}
.ayuda-check{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  background:var(--verde-suave);color:var(--verde-oscuro);
  display:flex;align-items:center;justify-content:center;
  animation:cardIn .35s ease both;
}
.ayuda-check svg{width:28px;height:28px;stroke:var(--verde-oscuro);stroke-width:2.5}
.ayuda-confirmacion-titulo{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0}
.ayuda-confirmacion .btn-secondary{margin-top:18px}

/* Preguntas frecuentes */
.faq-card{padding:6px 18px}
.faq-item{border-bottom:1px solid var(--line);padding:14px 0}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;list-style:none;font-weight:700;font-size:13.5px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{display:flex;flex:0 0 auto}
.faq-chevron-icon{width:13px;height:13px;stroke:var(--ink-soft);transform:rotate(-90deg);transition:transform .2s ease}
.faq-item[open] .faq-chevron-icon{transform:rotate(90deg)}
.faq-item p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:10px 0 0}