/* El letrero «¡Listo!» al agregar al carrito (`aviso-agregado.js`, encargo de Pablo,
   16-OCT-2026). La tarjeta abajo, encima de la barra del teléfono: Pablo la eligió el
   16-OCT-2026 y la banda de arriba se borró. Ningún color vive aquí: todo sale de
   marca/tokens.css por las variables de `estilo.css`. */

.aviso-agregado {
  position: fixed;
  z-index: 45; /* sobre la barra inferior (40), bajo la hoja abierta (60). */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'foto cuerpo cerrar' 'foto ver ver';
  align-items: center;
  gap: .35rem .85rem;
  padding: .85rem;
  border-radius: 1.25rem;
  box-shadow: 0 .6rem 1.4rem -.6rem var(--ink);
  font-size: .92rem;
  line-height: 1.3;
  animation: aviso-entra-abajo .32s var(--ease-out) both;
}
.aviso-agregado-foto { grid-area: foto; width: 4rem; height: 4rem; border-radius: .85rem; object-fit: cover; }
.aviso-agregado-cuerpo { grid-area: cuerpo; display: grid; gap: .1rem; min-width: 0; }
.aviso-agregado-cuerpo p { margin: 0; }
.aviso-agregado-titulo { font-family: var(--fuente-encabezado), Impact, sans-serif; font-size: 1.5rem; letter-spacing: .02em; line-height: 1; }
.aviso-agregado-linea { font-weight: 600; }
.aviso-agregado-detalle, .aviso-agregado-carrito { font-size: .82rem; }
.aviso-agregado-carrito { font-variant-numeric: tabular-nums; }
.aviso-agregado-ver {
  grid-area: ver;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: var(--touch);
  padding: .55rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.aviso-agregado-cerrar {
  grid-area: cerrar;
  align-self: start;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.aviso-agregado-ver:focus-visible, .aviso-agregado-cerrar:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Verde hierba, sin borde (Pablo, 16-OCT-2026: «quita los bordes… del listo»), «¡Listo!» en mantequilla, botón mantequilla. */
.aviso-agregado { right: 1rem; left: 1rem; bottom: 1rem; width: min(32rem, calc(100% - 2rem)); margin-inline: auto; background: var(--ink); color: var(--paper); }
.aviso-agregado .aviso-agregado-titulo { color: var(--soft); }
.aviso-agregado .aviso-agregado-ver { background: var(--soft); color: var(--ink); }

@media (max-width: 1024px) {
  /* Encima de la barra inferior (`.mobile-nav`: .75rem del borde + 4.65rem de alto), con
     medio rem de aire; nunca la tapa, ni tapa el botón de pagar del carrito. */
  .aviso-agregado { bottom: calc(max(.75rem, env(safe-area-inset-bottom, 0px)) + 4.65rem + .5rem); }
}
@media (min-width: 1025px) {
  .aviso-agregado { right: 1.5rem; bottom: 1.5rem; left: auto; width: 24rem; }
}

/* Con la hoja de un platillo abierta, el letrero no compite con ella. */
body:has(#hoja-montaje .hoja-platillo) .aviso-agregado { display: none; }

@keyframes aviso-entra-abajo { from { opacity: 0; transform: translateY(1rem); } }
@keyframes aviso-funde { from { opacity: 0; } }
/* MDN: con movimiento reducido, un fundido en vez de un desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .aviso-agregado { animation-name: aviso-funde; }
}