/* =====================================================================
   PIEZAS DEL MENÚ compartidas (Migas, Yema y Aurora)
   La barra del pedido, la hoja del producto y las promos del día.
   Los colores y la forma los termina cada tema.
   ===================================================================== */

/* ---------- Barra del pedido ---------- */
.barra-pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--barra-fondo, var(--fondo-2)); color: var(--barra-texto, var(--texto));
  border-top: 1px solid var(--linea); box-shadow: 0 -14px 30px -24px rgba(0, 0, 0, .6);
  transform: translateY(120%); transition: transform .5s var(--ease);
}
.barra-pedido.visible { transform: none; }
.barra-pedido__adentro { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.barra-pedido__info { min-width: 0; display: grid; }
.barra-pedido__info b { font-size: 18px; font-weight: 800; color: var(--barra-titulo, var(--titulo)); }
.barra-pedido__info span { font-size: 13px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-pedido__ir {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px;
  border-radius: var(--radio-boton); background: var(--barra-boton, var(--acento)); color: var(--barra-boton-texto, var(--sobre-acento));
  font: var(--boton-peso, 800) 15px/1 var(--f-boton, var(--f-texto)); text-transform: var(--boton-mayus, none); letter-spacing: var(--boton-espaciado, 0); text-decoration: none;
  transition: transform .2s var(--ease-rebote);
}
.barra-pedido__ir:active { transform: scale(.95); }
.barra-pedido__ir .n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--barra-n, var(--sobre-acento)); color: var(--barra-n-texto, var(--acento)); font-size: 13px; }
.barra-pedido__ir .ico { width: 18px; height: 18px; }
.barra-pedido.pop .n { animation: pop .42s var(--ease-rebote); }
@keyframes pop { 40% { transform: scale(1.45); } }
body.con-barra { padding-bottom: 88px; }
body.con-barra .aviso { bottom: 100px; }

/* ---------- Hoja del producto ---------- */
.hoja-producto { width: min(520px, 100%); }
.hoja-producto__foto { aspect-ratio: 16 / 11; background: var(--fondo-3); flex: none; }
.hoja-producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.hoja-producto .hoja__cuerpo { gap: 12px; }
.hoja-producto__etq { display: flex; gap: 6px; flex-wrap: wrap; }
.hoja-producto__nombre { font-size: 34px; padding-right: 30px; }
.hoja-producto__desc { color: var(--texto-2); font-size: 16px; }
.hoja-producto__lleva h3 { font: 700 12px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 8px; }
.hoja-producto__lleva ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hoja-producto__lleva li { font-size: 14px; padding: 5px 11px; border-radius: 99px; background: var(--fondo-3); color: var(--titulo); }
.hoja-producto__tams { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.hoja-producto__tams button { text-align: left; padding: 11px 13px; border-radius: 12px; border: 1.5px solid var(--linea-2); display: grid; gap: 2px; transition: border-color .2s, background-color .2s; }
.hoja-producto__tams button b { font-size: 14.5px; color: var(--titulo); }
.hoja-producto__tams button span { font-size: 14px; color: var(--acento-texto, var(--acento)); font-weight: 700; }
.hoja-producto__tams button[aria-checked="true"] { border-color: var(--titulo); background: var(--titulo); }
.hoja-producto__tams button[aria-checked="true"] b, .hoja-producto__tams button[aria-checked="true"] span { color: var(--fondo); }
.hoja-producto__pie { align-items: center; }
.hoja-producto__pie .btn { flex: 1; }

/* ---------- Promos del día arriba del menú ---------- */
.promos-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.promo-menu { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radio); background: var(--promo-fondo, var(--acento)); color: var(--promo-texto, var(--sobre-acento)); }
.promo-menu__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.promo-menu__cuando { font: 800 11px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.promo-menu strong { font-size: 22px; color: inherit; }
.promo-menu__txt > span:last-child { font-size: 13.5px; opacity: .9; }
.promo-menu__sumar { flex: none; display: grid; justify-items: center; gap: 4px; padding: 10px 14px; border-radius: 14px; background: var(--promo-boton, rgba(255, 255, 255, .16)); color: inherit; transition: transform .2s var(--ease-rebote); }
.promo-menu__sumar b { font-size: 18px; }
.promo-menu__sumar span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.promo-menu__sumar .ico { width: 15px; height: 15px; }
.promo-menu__sumar:active { transform: scale(.93); }

/* Aviso de mesa (cuando se llega desde el QR) */
.aviso-mesa { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--fondo-3); color: var(--titulo); font-size: 14.5px; font-weight: 600; }
.aviso-mesa .ico { width: 20px; height: 20px; }