/* ==========================================================================
   Picañas Burger · Portal de pedidos
   Una sola hoja. Para re-marcar todo el portal cambia las variables de :root.
   Dirección: "plancha y mostaza" — superficie de carbón para la estructura,
   mostaza caliente para todo lo accionable, papel blanco para el menú.
   ========================================================================== */

:root{
  --pb-carbon:      #17150F;   /* tinta y superficies oscuras */
  --pb-carbon-2:    #262218;   /* elevación sobre carbón */
  --pb-mostaza:     #F2B705;   /* acento: todo lo que se toca */
  --pb-mostaza-osc: #C99500;
  --pb-papel:       #FFFFFF;
  --pb-papel-2:     #F6F3ED;   /* fondo de sección */
  --pb-gris:        #736E62;
  --pb-linea:       #E6E1D7;
  --pb-ok:          #12784A;
  --pb-alerta:      #C0392B;

  --pb-r:           14px;      /* radio base */
  --pb-r-sm:        10px;
  --pb-sombra:      0 1px 2px rgba(23,21,15,.05), 0 10px 28px rgba(23,21,15,.07);
  --pb-barra:       80px;      /* alto de la comanda inferior */
  --pb-nav:         58px;      /* alto del menú inferior */
}

*,*::before,*::after{ box-sizing:border-box; }

body.pb{
  margin:0;
  background:var(--pb-papel-2);
  color:var(--pb-carbon);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

.pb a{ color:inherit; text-decoration:none; }
.pb img{ max-width:100%; display:block; }
.pb button{ font:inherit; }

/* Foco visible siempre — se usa mucho con teclado en tablets de mostrador */
.pb :focus-visible{ outline:3px solid var(--pb-mostaza); outline-offset:2px; border-radius:4px; }

.pb-wrap{ max-width:960px; margin:0 auto; padding:0 16px; }
.pb-hueco{ height:calc(var(--pb-barra) + var(--pb-nav) + 12px); }

/* --------------------------------------------------------------- Encabezado */
.pb-head{
  position:sticky; top:0; z-index:60;
  background:var(--pb-carbon);
  border-bottom:3px solid var(--pb-mostaza);
}
.pb-head__in{
  max-width:960px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.pb-head__logo img{ height:38px; width:auto; }
.pb-head__tel{
  margin-left:auto; text-align:right; color:#fff;
  font-size:11px; line-height:1.25; letter-spacing:.02em;
}
.pb-head__tel strong{ display:block; font-size:14px; color:var(--pb-mostaza); }

/* --------------------------------------------------------------- Tira de contexto */
.pb-suc{
  background:var(--pb-carbon-2); color:#fff;
  padding:10px 0;
}
.pb-suc__in{
  max-width:960px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:10px; font-size:13px;
}
.pb-suc__nom{ font-weight:700; letter-spacing:-.01em; }
.pb-suc__dir{ color:#B8B1A2; font-size:12px; }
.pb-suc__link{
  margin-left:auto; color:var(--pb-mostaza); font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  border-bottom:1px solid rgba(242,183,5,.4);
}

/* --------------------------------------------------------------- Tipografía */
.pb-h1{
  font-size:clamp(26px,7vw,38px); font-weight:800; letter-spacing:-.03em;
  line-height:1.05; margin:22px 0 4px;
}
.pb-sub{ color:var(--pb-gris); font-size:14px; margin:0 0 18px; }
.pb-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pb-gris);
}

/* --------------------------------------------------------------- Chips de categoría */
.pb-chips{
  position:sticky; top:64px; z-index:50;
  background:var(--pb-papel-2);
  margin:0 -16px; padding:10px 16px;
  display:flex; gap:8px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-bottom:1px solid var(--pb-linea);
}
.pb-chips::-webkit-scrollbar{ display:none; }
.pb-chip{
  flex:0 0 auto; padding:8px 14px; border-radius:999px;
  background:var(--pb-papel); border:1px solid var(--pb-linea);
  font-size:13px; font-weight:600; white-space:nowrap; color:var(--pb-carbon);
}
.pb-chip.is-on{ background:var(--pb-carbon); border-color:var(--pb-carbon); color:#fff; }

/* --------------------------------------------------------------- Secciones */
.pb-sec{ padding-top:26px; scroll-margin-top:120px; }
.pb-sec__tit{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 14px;
  font-size:20px; font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
}
.pb-sec__tit::after{
  content:""; flex:1; height:3px; background:var(--pb-mostaza); border-radius:2px;
}

/* --------------------------------------------------------------- Rejilla de productos */
.pb-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:640px){ .pb-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:900px){ .pb-grid{ grid-template-columns:repeat(4,1fr); } }

.pb-card{
  background:var(--pb-papel); border-radius:var(--pb-r);
  border:1px solid var(--pb-linea); overflow:hidden;
  display:flex; flex-direction:column;
}
.pb-card__img{
  aspect-ratio:1/1; background:var(--pb-papel-2);
  width:100%; object-fit:cover;
}
.pb-card__body{ padding:10px 12px 12px; display:flex; flex-direction:column; flex:1; gap:4px; }
.pb-card__nom{ font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.pb-card__desc{
  font-size:12px; color:var(--pb-gris); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pb-card__pie{ margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:8px; }
.pb-card__precio{ font-size:16px; font-weight:800; letter-spacing:-.02em; }
.pb-card__precio span{ font-size:10px; color:var(--pb-gris); font-weight:600; }

/* --------------------------------------------------------------- Botones */
.pb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--pb-r-sm); cursor:pointer;
  font-weight:700; letter-spacing:-.01em;
  padding:12px 18px; font-size:15px;
  transition:transform .08s ease, background .15s ease;
}
.pb-btn:active{ transform:scale(.98); }
.pb-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.pb-btn--mostaza{ background:var(--pb-mostaza); color:var(--pb-carbon); }
.pb-btn--mostaza:hover{ background:var(--pb-mostaza-osc); }
.pb-btn--carbon{ background:var(--pb-carbon); color:#fff; }
.pb-btn--linea{ background:transparent; color:var(--pb-carbon); border:1.5px solid var(--pb-linea); }
.pb-btn--peligro{ background:transparent; color:var(--pb-alerta); border:1.5px solid var(--pb-alerta); }
.pb-btn--bloque{ width:100%; }
.pb-btn--xl{ padding:16px 20px; font-size:17px; }

/* Botón "+" compacto de la tarjeta */
.pb-add{
  margin-left:auto; width:40px; height:40px; flex:0 0 auto;
  border-radius:12px; border:0; cursor:pointer;
  background:var(--pb-mostaza); color:var(--pb-carbon);
  font-size:22px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.pb-add:active{ transform:scale(.94); }

/* --------------------------------------------------------------- Stepper de cantidad */
.pb-step{
  margin-left:auto; display:inline-flex; align-items:center;
  background:var(--pb-papel-2); border:1px solid var(--pb-linea);
  border-radius:12px; overflow:hidden;
}
.pb-step button{
  width:36px; height:38px; border:0; background:transparent; cursor:pointer;
  font-size:19px; font-weight:700; color:var(--pb-carbon); line-height:1;
}
.pb-step button:disabled{ color:#C7C1B5; cursor:not-allowed; }
.pb-step__n{ min-width:26px; text-align:center; font-weight:800; font-size:15px; }

/* --------------------------------------------------------------- Comanda inferior (elemento firma) */
.pb-comanda{
  position:fixed; left:0; right:0; bottom:var(--pb-nav); z-index:70;
  background:var(--pb-mostaza);
  border-top:2px solid var(--pb-carbon);
  transform:translateY(120%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  /* dientes de ticket en el borde superior */
  box-shadow:0 -6px 20px rgba(23,21,15,.14);
}
.pb-comanda.is-on{ transform:translateY(0); }
.pb-comanda__in{
  max-width:960px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:14px;
}
.pb-comanda__meta{ line-height:1.15; }
.pb-comanda__n{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(23,21,15,.65);
}
.pb-comanda__t{ font-size:22px; font-weight:800; letter-spacing:-.03em; }
.pb-comanda__cta{
  margin-left:auto; background:var(--pb-carbon); color:#fff;
  padding:13px 20px; border-radius:12px; border:0; cursor:pointer;
  font-weight:700; font-size:15px;
}

/* --------------------------------------------------------------- Menú inferior */
.pb-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:var(--pb-nav);
  background:var(--pb-carbon); border-top:1px solid #322C20;
  display:flex; padding-bottom:env(safe-area-inset-bottom);
}
.pb-nav__i{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:#8E877A; font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; position:relative;
}
.pb-nav__i.is-on{ color:var(--pb-mostaza); }
.pb-nav__ic{ font-size:19px; line-height:1; }
.pb-nav__badge{
  position:absolute; top:5px; left:50%; margin-left:4px;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--pb-mostaza); color:var(--pb-carbon);
  font-size:10px; font-weight:800; line-height:17px; text-align:center;
}

/* --------------------------------------------------------------- Carrito */
.pb-panel{
  background:var(--pb-papel); border:1px solid var(--pb-linea);
  border-radius:var(--pb-r); padding:16px; margin-bottom:14px;
}
.pb-panel__tit{
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 12px; color:var(--pb-gris);
}

.pb-linea{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px dashed var(--pb-linea);
}
.pb-linea:last-of-type{ border-bottom:0; }
.pb-linea__nom{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.pb-linea__quitar{
  display:inline-block; margin-top:2px;
  font-size:12px; color:var(--pb-alerta); font-weight:600;
}
.pb-linea__sub{ min-width:76px; text-align:right; font-weight:800; font-size:15px; }

.pb-total{
  display:flex; align-items:baseline; gap:12px;
  padding-top:14px; margin-top:6px; border-top:2px solid var(--pb-carbon);
}
.pb-total__lbl{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pb-total__n{ margin-left:auto; font-size:26px; font-weight:800; letter-spacing:-.03em; }

/* --------------------------------------------------------------- Formulario */
.pb-campo{ margin-bottom:14px; }
.pb-lbl{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; margin-bottom:6px;
}
.pb-req{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pb-alerta);
}
.pb-opc{ font-size:11px; font-weight:500; color:var(--pb-gris); text-transform:none; letter-spacing:0; }
.pb-input, .pb-select, .pb-area{
  width:100%; padding:13px 14px;
  border:1.5px solid var(--pb-linea); border-radius:var(--pb-r-sm);
  background:var(--pb-papel); color:var(--pb-carbon);
  font-family:inherit; font-size:16px; /* 16px evita el zoom de iOS */
}
.pb-input:focus, .pb-select:focus, .pb-area:focus{ border-color:var(--pb-carbon); outline:none; }
.pb-area{ resize:vertical; min-height:74px; }
.pb-ayuda{ font-size:12px; color:var(--pb-gris); margin-top:5px; }

/* Selector de tipo de entrega en tarjetas de radio */
.pb-tipos{ display:grid; gap:8px; grid-template-columns:1fr; }
@media (min-width:520px){ .pb-tipos{ grid-template-columns:repeat(3,1fr); } }
.pb-tipo{
  display:block; cursor:pointer; text-align:center;
  padding:14px 10px; border:1.5px solid var(--pb-linea); border-radius:var(--pb-r-sm);
  background:var(--pb-papel);
}
.pb-tipo input{ position:absolute; opacity:0; pointer-events:none; }
.pb-tipo__ic{ font-size:20px; display:block; margin-bottom:4px; }
.pb-tipo__t{ font-size:14px; font-weight:700; }
.pb-tipo__d{ font-size:11px; color:var(--pb-gris); }
.pb-tipo.is-on{ border-color:var(--pb-carbon); background:var(--pb-carbon); color:#fff; }
.pb-tipo.is-on .pb-tipo__d{ color:#B8B1A2; }

/* --------------------------------------------------------------- Avisos */
.pb-aviso{
  padding:12px 14px; border-radius:var(--pb-r-sm);
  font-size:14px; margin-bottom:14px; border-left:4px solid;
}
.pb-aviso--info{ background:#FFF7DF; border-color:var(--pb-mostaza); }
.pb-aviso--ok{ background:#E7F5EE; border-color:var(--pb-ok); }
.pb-aviso--mal{ background:#FBEAE8; border-color:var(--pb-alerta); }

/* --------------------------------------------------------------- Estado de la orden */
.pb-pill{
  display:inline-block; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.pb-pill--prep{ background:var(--pb-mostaza); color:var(--pb-carbon); }
.pb-pill--camino{ background:#DDE9FB; color:#1B4F91; }
.pb-pill--listo{ background:#E7F5EE; color:var(--pb-ok); }
.pb-pill--ok{ background:var(--pb-ok); color:#fff; }
.pb-pill--off{ background:var(--pb-linea); color:var(--pb-gris); }

.pb-orden{
  background:var(--pb-papel); border:1px solid var(--pb-linea);
  border-radius:var(--pb-r); overflow:hidden; margin-bottom:16px;
}
.pb-orden__head{
  background:var(--pb-carbon); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.pb-orden__folio{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.pb-orden__fch{ font-size:11px; color:#B8B1A2; }
.pb-orden__body{ padding:16px; }
.pb-datos{ display:grid; gap:10px; grid-template-columns:repeat(2,1fr); margin-bottom:16px; }
.pb-dato__l{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pb-gris); }
.pb-dato__v{ font-size:14px; font-weight:600; }

/* --------------------------------------------------------------- Vacío */
.pb-vacio{ text-align:center; padding:56px 20px; }
.pb-vacio__ic{ font-size:44px; margin-bottom:10px; }
.pb-vacio__t{ font-size:19px; font-weight:800; margin-bottom:4px; }
.pb-vacio__d{ color:var(--pb-gris); font-size:14px; margin-bottom:20px; }

/* --------------------------------------------------------------- Toast */
.pb-toast{
  position:fixed; left:50%; bottom:calc(var(--pb-barra) + var(--pb-nav) + 14px);
  transform:translate(-50%,14px); z-index:90;
  background:var(--pb-carbon); color:#fff;
  padding:11px 18px; border-radius:999px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  max-width:88vw; text-align:center;
}
.pb-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* --------------------------------------------------------------- Pie */
.pb-foot{
  padding:26px 16px calc(var(--pb-nav) + 20px);
  text-align:center; color:var(--pb-gris); font-size:11px; line-height:1.6;
}

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

/* Refuerzo: el atributo hidden debe ganarle al display:flex de las tarjetas */
.pb-card [hidden], .pb-linea [hidden], [hidden]{ display:none !important; }

/* ==========================================================================
   Correcciones v3
   ========================================================================== */

/* .pb a{color:inherit} le ganaba por especificidad a los botones-enlace y
   dejaba el texto negro sobre fondo negro. Ahora solo aplica a enlaces
   sin clase; cualquier elemento con clase manda su propio color. */
.pb a{ color:inherit; }
.pb a[class]{ color:revert; }

.pb a.pb-comanda__cta,
.pb a.pb-comanda__cta:hover,
.pb a.pb-btn--carbon,
.pb a.pb-btn--carbon:hover{ color:#fff; }

.pb a.pb-btn--mostaza,
.pb a.pb-btn--linea{ color:var(--pb-carbon); }

.pb a.pb-suc__link{ color:var(--pb-mostaza); }
.pb a.pb-linea__quitar{ color:var(--pb-alerta); }
.pb a.pb-head__tel{ color:#fff; }
.pb a.pb-chip{ color:var(--pb-carbon); }
.pb a.pb-chip.is-on{ color:#fff; }
.pb a.pb-nav__i{ color:#8E877A; }
.pb a.pb-nav__i.is-on{ color:var(--pb-mostaza); }

/* El logo tiene fondo blanco embebido. Mientras no haya un PNG transparente,
   lo presentamos como placa blanca deliberada en vez de recuadro accidental. */
.pb-head__logo{
  background:#fff; border-radius:8px; padding:5px 9px;
  display:inline-flex; align-items:center; line-height:0;
}
.pb-head__logo img{ height:30px; width:auto; }

/* Iconos SVG de la barra inferior */
.pb-nav__ic{ display:block; line-height:0; }
.pb-nav__ic svg{ width:22px; height:22px; display:block; }

/* ==========================================================================
   Respaldo para páginas que aún traen marcado viejo (verificar/, perfil/…)
   Da forma decente a inputs y botones sin clase, mientras se rediseñan.
   ========================================================================== */
.pb-wrap h1, .pb-wrap h2{ letter-spacing:-.02em; }

.pb-wrap input[type=text]:not([class]),
.pb-wrap input[type=tel]:not([class]),
.pb-wrap input[type=number]:not([class]),
.pb-wrap input[type=email]:not([class]),
.pb-wrap select:not([class]),
.pb-wrap textarea:not([class]){
  width:100%; padding:13px 14px;
  border:1.5px solid var(--pb-linea); border-radius:var(--pb-r-sm);
  background:var(--pb-papel); color:var(--pb-carbon);
  font-family:inherit; font-size:16px; margin-bottom:10px;
}
.pb-wrap form input[type=submit]:not([class]),
.pb-wrap form button[type=submit]:not([class]),
.pb-wrap form button:not([class]):not([data-mas]):not([data-menos]){
  width:100%; padding:15px 20px; border:0; cursor:pointer;
  border-radius:var(--pb-r-sm); background:var(--pb-mostaza);
  color:var(--pb-carbon); font-weight:700; font-size:16px; font-family:inherit;
}

/* --------------------------------------------------------------------------
   Campo de código de verificación
   Se selecciona por name/id/placeholder para que aplique aunque el marcado
   de /menu/verificar/index.php aún no tenga clases.
   -------------------------------------------------------------------------- */
.pb-wrap input[name="codigo"],
.pb-wrap input[id="codigo"],
.pb-wrap input[placeholder="codigo" i],
.pb-wrap input.pb-codigo{
  display:block;
  width:100%;
  max-width:340px;
  margin:18px auto 14px;
  padding:20px 12px;
  height:auto;

  font-size:38px;
  font-weight:800;
  line-height:1.1;
  text-align:center;
  letter-spacing:.28em;
  text-indent:.28em;          /* compensa el espaciado del último dígito */
  font-variant-numeric:tabular-nums;

  border:2px solid var(--pb-linea);
  border-radius:var(--pb-r);
  background:var(--pb-papel);
  color:var(--pb-carbon);
}

.pb-wrap input[name="codigo"]::placeholder,
.pb-wrap input[id="codigo"]::placeholder,
.pb-wrap input[placeholder="codigo" i]::placeholder{
  font-size:20px; font-weight:600; letter-spacing:.12em;
  color:#BDB6A8; text-transform:uppercase;
}

.pb-wrap input[name="codigo"]:focus,
.pb-wrap input[id="codigo"]:focus,
.pb-wrap input[placeholder="codigo" i]:focus{
  border-color:var(--pb-mostaza);
  box-shadow:0 0 0 4px rgba(242,183,5,.22);
  outline:none;
}

/* Quita las flechitas si el input es type=number */
.pb-wrap input[name="codigo"]::-webkit-outer-spin-button,
.pb-wrap input[name="codigo"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* El botón que sigue al código, centrado y del mismo ancho */
.pb-wrap input[name="codigo"] ~ input[type=submit],
.pb-wrap input[name="codigo"] ~ button,
.pb-wrap input[id="codigo"] ~ input[type=submit],
.pb-wrap input[id="codigo"] ~ button{
  display:block; max-width:340px; margin:0 auto;
}

/* --------------------------------------------------------------------------
   Botones de envío en páginas con marcado viejo (verificar/, perfil/…)
   Se excluye .pb-btn para no pisar los botones que ya tienen estilo propio.
   -------------------------------------------------------------------------- */
.pb-wrap form input[type=submit]:not(.pb-btn),
.pb-wrap form input[type=button]:not(.pb-btn),
.pb-wrap form button[type=submit]:not(.pb-btn):not([data-mas]):not([data-menos]),
.pb-enviar{
  display:block;
  width:100%;
  max-width:340px;
  margin:0 auto 8px;
  padding:17px 22px;

  border:0;
  border-radius:var(--pb-r-sm);
  background:var(--pb-mostaza);
  color:var(--pb-carbon);

  font-family:inherit;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  text-align:center;

  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:transform .08s ease, background .15s ease;
}

.pb-wrap input[type=submit]:not(.pb-btn):active,
.pb-wrap button[type=submit]:not(.pb-btn):active,
.pb-enviar:active{ transform:scale(.98); }

.pb-wrap input[type=submit]:not(.pb-btn):hover,
.pb-wrap button[type=submit]:not(.pb-btn):hover,
.pb-enviar:hover{ background:var(--pb-mostaza-osc); }

.pb-wrap input[type=submit]:not(.pb-btn)[disabled],
.pb-wrap button[type=submit]:not(.pb-btn)[disabled],
.pb-enviar[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

/* Enlaces sueltos tipo "Cerrar Sesión" debajo del formulario */
.pb-wrap form + div a,
.pb-wrap form ~ a{ font-weight:600; }

/* --------------------------------------------------------------------------
   Blindaje: los steppers y el botón "+" de las tarjetas nunca deben heredar
   los estilos de respaldo de las páginas viejas. Especificidad suficiente
   para ganarle a .pb-wrap form button:not([class]).
   -------------------------------------------------------------------------- */
.pb-wrap .pb-step button,
.pb-wrap .pb-card .pb-step button,
.pb-wrap .pb-linea .pb-step button{
  width:36px; height:38px; min-width:0; max-width:none;
  margin:0; padding:0;
  border:0; border-radius:0;
  background:transparent; color:var(--pb-carbon);
  font-family:inherit; font-size:19px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  -webkit-appearance:none; appearance:none;
}
.pb-wrap .pb-step button:disabled{ color:#C7C1B5; background:transparent; }
.pb-wrap .pb-step button:hover{ background:transparent; }

.pb-wrap .pb-card .pb-add{
  width:40px; height:40px; min-width:0; max-width:none; flex:0 0 auto;
  margin:0 0 0 auto; padding:0;
  border:0; border-radius:12px;
  background:var(--pb-mostaza); color:var(--pb-carbon);
  font-family:inherit; font-size:22px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

/* El stepper no debe desbordar la tarjeta en pantallas angostas */
.pb-card__pie{ flex-wrap:wrap; row-gap:8px; }
.pb-card__pie .pb-step{ flex:0 0 auto; }
@media (max-width:400px){
  .pb-card__precio{ font-size:15px; }
  .pb-wrap .pb-step button{ width:32px; }
}

/* --------------------------------------------------------------------------
   Táctil: en navegadores integrados (WhatsApp, Instagram) el estado :hover
   se queda pegado tras tocar y el botón se ve apagado. Solo con mouse real.
   -------------------------------------------------------------------------- */
@media (hover:none){
  .pb-btn--mostaza:hover{ background:var(--pb-mostaza); }
  .pb-btn--carbon:hover{ background:var(--pb-carbon); }
  .pb-add:hover{ background:var(--pb-mostaza); }
  .pb-enviar:hover,
  .pb-wrap form input[type=submit]:not(.pb-btn):hover,
  .pb-wrap form button[type=submit]:not(.pb-btn):hover{ background:var(--pb-mostaza); }
}

/* ==========================================================================
   v4 — Encabezado claro y área segura en iPhone
   ========================================================================== */

/* --- Altura real de las barras fijas ---------------------------------------
   .pb-nav suma env(safe-area-inset-bottom) a su padding, así que en iPhone
   mide ~92px y no los 58px de --pb-nav. El espaciador y la comanda tienen
   que contemplarlo o el final del contenido queda tapado. */
.pb-nav{ height:auto; min-height:var(--pb-nav); }

.pb-hueco{
  height:calc(var(--pb-barra) + var(--pb-nav) + env(safe-area-inset-bottom) + 16px);
}

.pb-comanda{ bottom:calc(var(--pb-nav) + env(safe-area-inset-bottom)); }

.pb-toast{
  bottom:calc(var(--pb-barra) + var(--pb-nav) + env(safe-area-inset-bottom) + 14px);
}

.pb-foot{ padding-bottom:calc(var(--pb-nav) + env(safe-area-inset-bottom) + 20px); }

/* Cuando la comanda está oculta, el espaciador no necesita reservarle sitio */
body.pb:not(.pb-con-comanda) .pb-hueco{
  height:calc(var(--pb-nav) + env(safe-area-inset-bottom) + 24px);
}


/* --- Encabezado blanco -----------------------------------------------------
   El logo trae fondo blanco embebido, así que en vez de recortarlo con una
   placa, el encabezado entero pasa a blanco y el logo se integra solo. */
.pb-head{
  background:var(--pb-papel);
  border-bottom:3px solid var(--pb-mostaza);
}
.pb-head__in{ padding:12px 16px; }

.pb-head__logo{
  background:transparent; border-radius:0; padding:0;
  display:inline-flex; align-items:center; line-height:0;
}
.pb-head__logo img{ height:34px; width:auto; }

.pb-head__tel{ color:var(--pb-gris); }
.pb-head__tel strong{ color:var(--pb-carbon); font-size:15px; letter-spacing:-.01em; }
.pb a.pb-head__tel{ color:var(--pb-gris); }

/* Los chips pegajosos arrancan debajo del encabezado nuevo */
.pb-chips{ top:62px; }

/* ==========================================================================
   Portal de entrada (/index.php) — selección de sucursal y datos
   ========================================================================== */

.pb-entrada{ max-width:520px; margin:0 auto; padding:0 16px 40px; }

.pb-hero{ padding:34px 0 22px; }
.pb-hero__eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pb-mostaza-osc); margin-bottom:8px;
}
.pb-hero__t{
  font-size:clamp(30px,9vw,42px); font-weight:800; letter-spacing:-.035em;
  line-height:1.02; margin:0 0 8px;
}
.pb-hero__d{ color:var(--pb-gris); font-size:15px; margin:0; }

/* Pasos: el orden importa de verdad aquí (ciudad → sucursal → tus datos),
   así que la numeración informa en vez de decorar. */
.pb-paso{
  background:var(--pb-papel); border:1px solid var(--pb-linea);
  border-radius:var(--pb-r); padding:16px; margin-bottom:12px;
  transition:opacity .2s ease;
}
.pb-paso[hidden]{ display:none; }
.pb-paso__h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pb-paso__n{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  background:var(--pb-carbon); color:var(--pb-mostaza);
  font-size:13px; font-weight:800; line-height:26px; text-align:center;
}
.pb-paso__t{ font-size:14px; font-weight:800; letter-spacing:-.01em; }
.pb-paso.is-listo .pb-paso__n{ background:var(--pb-ok); color:#fff; }

.pb-campo + .pb-campo{ margin-top:14px; }

.pb-promo{ display:block; margin:14px 0 0; border-radius:var(--pb-r); overflow:hidden; }
.pb-promo img{ width:100%; height:auto; }

.pb-nota{
  color:var(--pb-gris); font-size:12px; line-height:1.5;
  text-align:center; margin:16px 0 0;
}
.pb-nota a{ color:var(--pb-carbon); font-weight:600; }

.pb-err{
  background:#FBEAE8; border-left:4px solid var(--pb-alerta);
  padding:12px 14px; border-radius:var(--pb-r-sm);
  font-size:14px; margin-bottom:16px;
}

/* Estado "pendiente de pago" */
.pb-pill--pago{ background:#FFE9C7; color:#8A5A00; }

/* Pantalla de pago */
.pb-pago__monto{
  text-align:center; padding:22px 0 8px;
}
.pb-pago__monto small{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pb-gris); margin-bottom:4px;
}
.pb-pago__monto strong{ font-size:42px; font-weight:800; letter-spacing:-.04em; }

.pb-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.pb-tab{
  flex:1; padding:12px 8px; text-align:center; cursor:pointer;
  border:1.5px solid var(--pb-linea); border-radius:var(--pb-r-sm);
  background:var(--pb-papel); font-size:14px; font-weight:700;
}
.pb-tab.is-on{ background:var(--pb-carbon); border-color:var(--pb-carbon); color:#fff; }

.pb-clabe{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px; font-weight:700; letter-spacing:.06em;
  background:var(--pb-papel-2); border:1px dashed var(--pb-linea);
  border-radius:var(--pb-r-sm); padding:14px; text-align:center; margin:10px 0;
  word-break:break-all;
}
.pb-espera{ text-align:center; padding:20px 0; color:var(--pb-gris); font-size:14px; }