/* ============================================================
   pulir.css · LA CARTA, MÁS PAREJA (11-11-2026)
   ------------------------------------------------------------
   Va al final de todo. Cada bloque es UN cambio y se puede sacar
   entero sin tocar los demás. No cambia el concepto, la foto ni
   el titular de la portada: empareja formas y despeja avisos.

   La regla de las formas:
     · lo que se toca y dice algo (botones, etiquetas, pestañas) → píldora
     · lo que contiene (tarjetas, campos, paneles)               → 14 px
     · lo que es solo un ícono (+, −, cerrar)                    → círculo
   ============================================================ */


/* ------------------------------------------------------------
   1 · PORTADA: ubicación y WhatsApp, píldoras gemelas; el estado
       es un dato, no un botón
   ------------------------------------------------------------ */
.manifiesto__fila { gap: 8px !important; }
.manifiesto__fila > .manifiesto__sello,
.manifiesto__fila > .manifiesto__wsp,
.manifiesto__fila > .manifiesto__estado {
  box-sizing: border-box;
  height: 40px;
  min-height: 0 !important;
  padding: 0 16px !important;
  border-width: 1.5px !important;
  border-radius: 999px !important;
  transform: none !important;
  white-space: nowrap;
  align-items: center;
}
/* El estado sube como una línea sin borde; abajo quedan los dos
   que se tocan. Así caben en una fila hasta en el teléfono. */
.manifiesto__fila > .manifiesto__estado {
  order: -1;
  flex: 0 0 100%;
  justify-content: center;
  height: auto;
  padding: 0 !important;
  border: 0 !important;
}
@media (min-width: 900px) {
  .manifiesto__fila > .manifiesto__estado { justify-content: flex-start; }
}
@media (max-width: 699px) {
  .manifiesto__fila > .manifiesto__estado { font-size: 11.5px !important; }
  .manifiesto__fila > .manifiesto__sello,
  .manifiesto__fila > .manifiesto__wsp {
    font-size: 12px !important;
    letter-spacing: .12em !important;
  }
  /* El alto que se ahorra se lo lleva la hamburguesa. */
  .hero-img-wrap { max-height: clamp(220px, 44svh, 380px) !important; }
}


/* ------------------------------------------------------------
   2 · EL AVISO NO TAPA LA BARRA "VER PEDIDO"
   ------------------------------------------------------------ */
@media (max-width: 699px) {
  body:has(.fab-cart.con-items) .smachil-aviso {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  /* La barra sube con el aviso del píxel (68) y con un pedido en
     curso (86): el aviso sube con ella. */
  body.con-aviso-pixel:has(.fab-cart.con-items) .smachil-aviso {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
  body.con-pedido-activo:has(.fab-cart.con-items) .smachil-aviso {
    bottom: calc(158px + env(safe-area-inset-bottom, 0px));
  }
}
.smachil-aviso { border-radius: 999px; }


/* ------------------------------------------------------------
   3 · PESTAÑAS: una sola señal para la activa
   ------------------------------------------------------------ */
.tab.active { box-shadow: none !important; }
.tab.active::after { content: none !important; }


/* ------------------------------------------------------------
   4 · ETIQUETAS: la misma píldora en la tarjeta y en la ficha
   ------------------------------------------------------------ */
.chip { border-radius: 999px !important; }
.modal-ingredients .ing {
  border-radius: 999px !important;
  padding: 7px 13px !important;
}


/* ------------------------------------------------------------
   5 · CARRITO: los mismos radios y dos frases menos
   ------------------------------------------------------------ */
.cart-qty-btn { border-radius: 50% !important; }
.cart-item-foto { border-radius: 14px !important; }
.cart-total-row,
.comentario-abrir { border-radius: 14px !important; }
.telefono-prefijo { border-radius: 14px 0 0 14px !important; }
/* Sin frase que mostrar, la nota no ocupa lugar. */
.checkout-note:empty { display: none; }


/* ------------------------------------------------------------
   6 · BEBIDAS: la lata sin caja y más grande
   ------------------------------------------------------------ */
.drink-img-wrap {
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.drink-card .drink-img { transform: scale(1.35) !important; }