/* =====================================================================
   AVISO DEL ARMADOR — tira discreta
   =====================================================================
   Era un modal centrado con fondo difuminado encima de casi todo el
   sitio. Ahora es una tira abajo a la izquierda: avisa sin tapar el
   catálogo, que es lo que el cliente vino a ver.

   Va a la izquierda porque la esquina derecha ya es de WhatsApp y del
   asistente. Y en el teléfono se acomoda arriba de la barra de
   acciones, no encima de ella.
   ===================================================================== */

/* Igual que el gancho del asistente: el JS le pone hidden y [hidden] no
   gana contra display:flex. Cerrada se iba por el transform, pero seguia
   en pantalla y podia comerse toques. */
.av-tira[hidden]{ display:none !important; }

.av-tira{
  position:fixed; left:1.15rem; bottom:1.15rem; z-index:55;
  display:flex; align-items:center; gap:.85rem;
  width:min(420px, calc(100vw - 2.3rem));
  padding:.7rem .8rem .7rem .7rem;
  background:#fff; border:1px solid #e5e7eb;
  border-left:4px solid #d8a21f;          /* el oro de la marca, de canto */
  border-radius:16px;
  box-shadow:0 4px 12px -2px rgba(17,24,39,.08),
             0 20px 40px -16px rgba(30,45,92,.28);
  /* Entra deslizando desde abajo. No usa opacidad sola porque un
     elemento a medio aparecer sobre texto se lee como error de carga. */
  transform:translateY(140%); opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .32s ease;
}
.av-tira.abierto{ transform:none; opacity:1; }

@media(max-width:640px){
  .av-tira{ left:.7rem; right:.7rem; bottom:.7rem;
            width:auto; gap:.65rem; padding:.6rem .65rem; }
}
/* Si la ficha sacó su barra pegada abajo, la tira se sube para no
   encimarse con ella. */
body.con-barra-movil .av-tira{ bottom:calc(76px + .7rem); }

/* ---- El dibujo ---- */
.av-tira-dibujo{
  flex:none; width:62px; height:62px; border-radius:12px;
  background:linear-gradient(150deg,#233464,#16244d);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:.3rem;
}
.av-tira-dibujo svg{ width:100%; height:100%; display:block; }
@media(max-width:640px){ .av-tira-dibujo{ width:54px; height:54px; } }

/* Los colores de la mesa: es el anuncio entero. */
.av-linea{ fill:none; stroke:#0e1730; stroke-width:2.4; stroke-linejoin:round; opacity:.85; }
.av-mantel { fill:#fbfbf8; animation:av-mantel 8s steps(1,end) infinite; }
.av-camino { fill:#d8a21f; animation:av-camino 8s steps(1,end) infinite; }
.av-sillas rect{ fill:#f7f5ef; animation:av-sillas 8s steps(1,end) infinite; }
.av-monio{ fill:#d8a21f; stroke:#0e1730; stroke-width:2; stroke-linejoin:round;
           animation:av-camino 8s steps(1,end) infinite; }

@keyframes av-mantel{
  0%,24%   { fill:#fbfbf8; }
  25%,49%  { fill:#7b2233; }
  50%,74%  { fill:#1e2d5c; }
  75%,100% { fill:#6b7a4a; }
}
@keyframes av-camino{
  0%,24%   { fill:#d8a21f; }
  25%,49%  { fill:#d8a21f; }
  50%,74%  { fill:#e8bfc6; }
  75%,100% { fill:#fbfbf8; }
}
@keyframes av-sillas{
  0%,49%   { fill:#f7f5ef; }
  50%,74%  { fill:#fbfbf8; }
  75%,100% { fill:#2b2d33; }
}
/* Sin movimiento: se queda en la primera combinación, que igual se ve
   como una mesa montada. */
@media (prefers-reduced-motion: reduce){
  .av-mantel, .av-camino, .av-sillas rect, .av-monio{ animation:none; }
  .av-tira{ transition:none; }
}

/* ---- El texto ---- */
.av-tira-txt{ flex:1; min-width:0; line-height:1.3; }
.av-tira-txt strong{
  display:block; font-size:.88rem; font-weight:800;
  color:#16244d; letter-spacing:-.01em;
}
.av-tira-txt span{
  display:block; font-size:.78rem; color:#6b7280; margin-top:.12rem;
  /* Una sola línea: la tira no debe crecer y robarle pantalla al sitio. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:400px){ .av-tira-txt span{ display:none; } }

/* ---- Acciones ---- */
.av-tira-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:.5rem .95rem; border-radius:99px;
  background:#b91c1c; color:#fff; text-decoration:none;
  font-size:.83rem; font-weight:700; white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(185,28,28,.65);
  transition:background .18s, transform .18s;
}
.av-tira-btn:hover{ background:#991b1b; color:#fff; transform:translateY(-1px); }

.av-tira-x{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:none; background:transparent; color:#9ca3af;
  cursor:pointer; font-size:.85rem; line-height:1;
  transition:background .15s, color .15s;
}
.av-tira-x:hover{ background:#f3f4f6; color:#374151; }

/* En el celular la tira tapaba el carrito, el chat y WhatsApp, y los
   botones de abajo son lo que importa. En escritorio sigue igual. */
@media (max-width:640px){
  .av-tira{ display:none !important; }
}