/* =====================================================================
   EL ASISTENTE

   Vive sobre el botón flotante de WhatsApp, nunca encima: el de
   WhatsApp mide 56px y se queda donde está, porque sigue siendo la
   salida natural. El asistente se apila arriba.

   Usa las variables de sitio.css. Si alguna faltara, cada regla trae su
   valor de respaldo para que el widget no se caiga en una página que
   cargue el CSS a medias.
   ===================================================================== */

.as-w{
  /* Propias del widget, para no ensuciar el resto del sitio. */
  --as-borde:  color-mix(in srgb, var(--s-linea,#e5e7eb) 70%, transparent);
  --as-sombra: 0 1px 2px rgba(17,24,39,.05), 0 12px 32px -14px rgba(30,45,92,.28);
  --as-ok:     #0f7b4f;
  --as-ok-piso:#eaf6f0;
  --as-avi:    #9a6b12;
  --as-avi-piso:#fdf6e6;
  --as-mal:    #b91c1c;
  --as-act:    #1d5fa8;
  --as-act-piso:#eaf2fb;
}

/* ---------------------------------------------------------------------
   El globo
   --------------------------------------------------------------------- */
.as-lanza{
  position:fixed; right:1.15rem; bottom:calc(1.15rem + 56px + .7rem); z-index:61;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(150deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c) 62%);
  color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  box-shadow:0 6px 16px -4px rgba(30,45,92,.45), 0 14px 34px -12px rgba(30,45,92,.5);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, opacity .2s ease;
}
.as-lanza:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 10px 22px -4px rgba(30,45,92,.5), 0 20px 44px -14px rgba(30,45,92,.55);
}
.as-lanza:active{ transform:scale(.97); }
.as-lanza:focus-visible{ outline:3px solid var(--s-oro,#d8a21f); outline-offset:3px; }

/* Con el panel abierto el globo estorba, pero quitarlo del flujo haría
   saltar la página: se esconde sin dejar de ocupar su lugar. */
.as-lanza.oculto{ opacity:0; pointer-events:none; transform:scale(.85); }

.as-lanza .as-punto{
  position:absolute; top:2px; right:2px; width:13px; height:13px;
  border-radius:50%; background:var(--s-oro,#d8a21f); border:2px solid #fff;
  display:none;
}
.as-lanza.tiene .as-punto{ display:block; }

.as-lanza .as-cuenta{
  position:absolute; top:-3px; right:-3px; min-width:21px; height:21px;
  padding:0 5px; border-radius:11px;
  background:var(--s-oro,#d8a21f); color:#20160a; border:2px solid #fff;
  font-size:.68rem; font-weight:800; line-height:17px;
  font-variant-numeric:tabular-nums;
  display:none;
}
.as-lanza.lleva .as-cuenta{ display:block; }

/* ---------------------------------------------------------------------
   El gancho
   --------------------------------------------------------------------- */
/* Sin esto el gancho no se cierra nunca. El JS le pone hidden, pero
   [hidden] de la hoja del navegador pierde contra .as-gancho{display:flex}
   de aqui, asi que la burbuja seguia pegada en pantalla aunque le dieras
   a la cruz o pasaran los doce segundos. */
.as-gancho[hidden]{ display:none !important; }
/* Mientras la tira del armador este abajo, el gancho no sale. En el
   telefono la tira ocupa todo el ancho y los dos se encimaban. Va por
   clase en el <body> y no por temporizador: asi no importa cual de los
   dos llegue primero. */
body.con-aviso-armador .as-gancho{ display:none !important; }


.as-gancho{
  position:fixed; right:calc(1.15rem + 56px + .55rem);
  bottom:calc(1.15rem + 56px + .7rem + 8px); z-index:61;
  max-width:min(16rem, calc(100vw - 6rem));
  display:flex; align-items:stretch;
  background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde);
  border-radius:14px 14px 4px 14px;
  box-shadow:var(--as-sombra);
  overflow:hidden;
}
.as-gancho.entra{ animation:as-sube .34s ease both; }
@keyframes as-sube{ from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }

.as-gancho-txt{
  border:0; background:transparent; cursor:pointer; text-align:left;
  padding:.65rem .3rem .65rem .8rem;
  font:inherit; font-size:.82rem; line-height:1.35;
  color:var(--s-tinta,#111827);
}
.as-gancho-txt:hover{ color:var(--s-azul,#1e2d5c); }
.as-gancho-x{
  border:0; background:transparent; cursor:pointer;
  /* 44px es el minimo con el que un dedo acierta. Antes era una cruz de
     .8rem con padding lateral: se fallaba el toque y el aviso parecia
     que no se dejaba cerrar. */
  flex:none; width:44px; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  color:var(--s-gris-2,#9ca3af); font-size:.95rem;
}
.as-gancho-x:hover{ color:var(--s-tinta,#111827); }
.as-gancho button:focus-visible{ outline:2px solid var(--s-azul,#1e2d5c); outline-offset:-2px; }

@media (max-width:640px){
  .as-gancho{ right:1.15rem; max-width:calc(100vw - 2.3rem); }
}

/* ---------------------------------------------------------------------
   El panel
   --------------------------------------------------------------------- */
.as-panel{
  position:fixed; right:1.15rem; bottom:1.15rem; z-index:62;
  width:min(24.5rem, calc(100vw - 2.3rem));
  height:min(36rem, calc(100vh - 2.3rem));
  background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde);
  border-radius:18px;
  box-shadow:0 2px 6px rgba(17,24,39,.06), 0 28px 64px -20px rgba(17,24,39,.4);
  display:none; flex-direction:column; overflow:hidden;
}
.as-panel.abierto{ display:flex; animation:as-abre .26s cubic-bezier(.22,1,.36,1) both; }
@keyframes as-abre{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------
   Cabecera

   El degradado y el punto verde hacen la diferencia entre "un formulario
   azul" y "alguien del otro lado".
   --------------------------------------------------------------------- */
.as-cab{
  background:linear-gradient(135deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c) 68%);
  color:#fff; padding:.9rem 1rem;
  display:flex; align-items:center; gap:.75rem; flex:none;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.as-cab .as-ico{
  position:relative; width:38px; height:38px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.as-cab .as-vivo{
  position:absolute; right:-1px; bottom:-1px;
  width:11px; height:11px; border-radius:50%;
  background:#34d07f; border:2px solid var(--s-azul,#1e2d5c);
}
.as-cab .as-quien{ flex:1; min-width:0; line-height:1.3; }
.as-cab .as-quien strong{
  display:block; font-size:.94rem; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.as-cab .as-quien span{ font-size:.73rem; opacity:.8; }
.as-cab button{
  background:transparent; border:0; color:#fff; cursor:pointer;
  width:32px; height:32px; border-radius:9px; font-size:1rem; flex:none;
  transition:background .16s ease;
}
.as-cab button:hover{ background:rgba(255,255,255,.16); }
.as-cab button:focus-visible{ outline:2px solid #fff; outline-offset:1px; }

/* ---------------------------------------------------------------------
   El hilo
   --------------------------------------------------------------------- */
.as-hilo{
  flex:1; overflow-y:auto; padding:1rem .9rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(42,61,110,.05), transparent 42%),
    var(--s-fondo,#f8fafc);
  display:flex; flex-direction:column; gap:.6rem;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.as-hilo::-webkit-scrollbar{ width:7px; }
.as-hilo::-webkit-scrollbar-thumb{
  background:rgba(30,45,92,.16); border-radius:9px;
}
.as-hilo::-webkit-scrollbar-thumb:hover{ background:rgba(30,45,92,.3); }

/* El hilo es un contenedor flex en columna, y ahí todo hijo se encoge
   por defecto cuando el contenido pasa del alto. Eso aplastaba las
   tarjetas hasta dejarlas en una raya. Nada dentro del hilo se encoge:
   el hilo se desplaza, que para eso tiene overflow. */
.as-hilo > *{ flex:none; }
.as-hilo > *{ animation:as-entra .26s ease both; }
@keyframes as-entra{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.as-glob{
  max-width:87%; padding:.62rem .85rem; border-radius:15px;
  font-size:.895rem; line-height:1.52; white-space:pre-line;
  overflow-wrap:anywhere;
}
.as-glob.bot{
  align-self:flex-start; background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde); color:var(--s-tinta,#111827);
  border-bottom-left-radius:5px;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}
.as-glob.yo{
  align-self:flex-end; color:#fff; border-bottom-right-radius:5px;
  background:linear-gradient(135deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c));
  box-shadow:0 2px 8px -2px rgba(30,45,92,.4);
}
.as-glob.persona{
  align-self:flex-start; background:var(--as-avi-piso);
  border:1px solid rgba(216,162,31,.4); color:var(--s-tinta,#111827);
  border-bottom-left-radius:5px;
}
.as-glob .as-firma{
  display:block; margin-top:.35rem; font-size:.68rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--as-avi);
}

/* Los tres puntitos mientras contesta */
.as-espera{
  align-self:flex-start; display:flex; gap:4px; align-items:center;
  padding:.7rem .9rem; background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde); border-radius:15px 15px 15px 5px;
}
.as-espera i{
  width:6px; height:6px; border-radius:50%; background:var(--s-gris-2,#9ca3af);
  animation:as-late 1.15s infinite;
}
.as-espera i:nth-child(2){ animation-delay:.16s; }
.as-espera i:nth-child(3){ animation-delay:.32s; }
@keyframes as-late{ 0%,60%,100%{opacity:.28; transform:translateY(0)}
                    30%{opacity:1; transform:translateY(-3px)} }

/* ---------------------------------------------------------------------
   La cuenta del pedido

   Antes esto eran renglones pegados con saltos de línea dentro de un
   globo, y los importes no alineaban. Es lo que el cliente más mira
   antes de decidir: merece ser una cuenta, no un párrafo.
   --------------------------------------------------------------------- */
.as-cuenta{
  align-self:stretch;
  background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde);
  border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(17,24,39,.05);
}
.as-cuenta .cab{
  padding:.6rem .85rem;
  border-bottom:1px solid var(--as-borde);
  background:linear-gradient(var(--s-fondo,#f8fafc), var(--s-blanco,#fff));
}
.as-cuenta .cab b{
  display:block; font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--s-azul,#1e2d5c);
}
.as-cuenta .cab span{ font-size:.76rem; color:var(--s-gris,#6b7280); }

.as-cuenta .fila{
  display:grid; grid-template-columns:2.3rem 1fr auto auto;
  gap:.15rem .5rem; align-items:baseline;
  padding:.55rem .85rem;
  border-bottom:1px solid color-mix(in srgb, var(--as-borde) 55%, transparent);
}
.as-cuenta .fila:last-of-type{ border-bottom:0; }
.as-cuenta .cant{
  font-size:.8rem; font-weight:700; color:var(--s-azul,#1e2d5c);
  font-variant-numeric:tabular-nums;
}
.as-cuenta .nom{ font-size:.85rem; line-height:1.35; color:var(--s-tinta,#111827); }
.as-cuenta .unit{
  grid-column:2; font-size:.7rem; color:var(--s-gris-2,#9ca3af);
  font-variant-numeric:tabular-nums;
}
.as-cuenta .imp{
  grid-row:1; grid-column:3;
  font-size:.85rem; font-weight:700; color:var(--s-tinta,#111827);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.as-cuenta .quita{
  grid-row:1; grid-column:4;
  border:0; background:transparent; cursor:pointer; padding:0 0 0 .2rem;
  color:var(--s-gris-2,#9ca3af); font-size:.78rem; line-height:1;
}
.as-cuenta .quita:hover{ color:var(--as-mal); }
.as-cuenta .quita:focus-visible{ outline:2px solid var(--as-mal); outline-offset:2px; border-radius:4px; }

.as-cuenta .suma{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.65rem .85rem;
  border-top:2px solid var(--as-borde);
  background:var(--s-fondo,#f8fafc);
}
.as-cuenta .suma b{ font-size:.8rem; color:var(--s-gris,#6b7280); font-weight:600; }
.as-cuenta .suma strong{
  font-size:1.08rem; font-weight:800; color:var(--s-azul,#1e2d5c);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.as-cuenta .nota{
  padding:0 .85rem .6rem; background:var(--s-fondo,#f8fafc);
  font-size:.71rem; color:var(--s-gris-2,#9ca3af); line-height:1.4;
}

/* ---------------------------------------------------------------------
   La ficha de una cotización

   Datos con etiqueta: se leen en columnas, no en prosa.
   --------------------------------------------------------------------- */
.as-ficha{
  align-self:stretch;
  background:var(--s-blanco,#fff);
  border:1px solid var(--as-borde);
  border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(17,24,39,.05);
}
.as-ficha.nueva{
  border-color:rgba(15,123,79,.35);
  box-shadow:0 0 0 3px rgba(15,123,79,.08), 0 1px 2px rgba(17,24,39,.05);
}

.as-ficha .tapa{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.7rem .85rem;
  background:linear-gradient(135deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c) 70%);
  color:#fff;
}
.as-ficha .folio{
  font-size:1rem; font-weight:800; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.as-ficha .chip{
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.18); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
}
.as-ficha .chip.ok    { background:#34d07f; color:#08301f; box-shadow:none; }
.as-ficha .chip.aviso { background:var(--s-oro,#d8a21f); color:#20160a; box-shadow:none; }
.as-ficha .chip.activo{ background:#67b0f5; color:#0a2440; box-shadow:none; }
.as-ficha .chip.malo  { background:#f08a8a; color:#40100f; box-shadow:none; }

.as-ficha .dato{
  display:flex; justify-content:space-between; align-items:baseline; gap:.9rem;
  padding:.46rem .85rem;
  border-bottom:1px solid color-mix(in srgb, var(--as-borde) 55%, transparent);
  font-size:.85rem;
}
.as-ficha .dato:last-of-type{ border-bottom:0; }
.as-ficha .dato .et{ color:var(--s-gris,#6b7280); flex:none; }
.as-ficha .dato .va{ text-align:right; color:var(--s-tinta,#111827); font-weight:600; }
.as-ficha .dato .va.num{ font-variant-numeric:tabular-nums; }
.as-ficha .dato .va.ok    { color:var(--as-ok); }
.as-ficha .dato .va.aviso { color:var(--as-avi); }
.as-ficha .dato .va.fuerte{
  font-size:.98rem; font-weight:800; color:var(--s-azul,#1e2d5c);
}

/* En qué va la entrega */
.as-ficha .paso{
  padding:.6rem .85rem; background:var(--as-act-piso);
  border-top:1px solid var(--as-borde);
}
.as-ficha .paso .txt{
  font-size:.82rem; font-weight:700; color:var(--as-act);
  display:flex; align-items:center; gap:.45rem;
}
.as-ficha .paso .barra{
  display:flex; gap:3px; margin-top:.45rem;
}
.as-ficha .paso .barra i{
  height:4px; flex:1; border-radius:2px; background:rgba(29,95,168,.18);
}
.as-ficha .paso .barra i.hecho{ background:var(--as-act); }
.as-ficha .paso.problema{ background:#fdeeee; }
.as-ficha .paso.problema .txt{ color:var(--as-mal); }

.as-ficha .pie{
  padding:.55rem .85rem; background:var(--s-fondo,#f8fafc);
  border-top:1px solid var(--as-borde);
  font-size:.73rem; color:var(--s-gris,#6b7280); line-height:1.45;
}

/* ---------------------------------------------------------------------
   Tarjetas de producto

   Se desplazan de lado en su propio carril: seis productos apilados
   empujan los botones fuera de la vista y obligan a rodar todo el hilo.
   --------------------------------------------------------------------- */
.as-carril{
  display:flex; gap:.55rem; overflow-x:auto; padding:.15rem .15rem .45rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.as-carril::-webkit-scrollbar{ height:5px; }
.as-carril::-webkit-scrollbar-thumb{ background:rgba(30,45,92,.18); border-radius:9px; }

.as-tar{
  position:relative;
  flex:0 0 9.6rem; scroll-snap-align:start; cursor:pointer; text-align:left;
  background:var(--s-blanco,#fff); border:1px solid var(--as-borde);
  border-radius:13px; overflow:hidden; padding:0;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.as-tar:hover{
  border-color:var(--s-azul,#1e2d5c); transform:translateY(-3px);
  box-shadow:0 8px 20px -8px rgba(30,45,92,.35);
}
.as-tar:focus-visible{ outline:2px solid var(--s-azul,#1e2d5c); outline-offset:2px; }

.as-tar .as-foto{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  background:var(--s-fondo,#f8fafc);
}
.as-tar .as-sinfoto{
  width:100%; aspect-ratio:4/3; display:flex; align-items:center;
  justify-content:center; background:var(--s-fondo,#f8fafc);
  color:var(--s-gris-2,#9ca3af); font-size:1.35rem;
}
.as-tar .as-cuerpo{ padding:.5rem .6rem .6rem; }
.as-tar .as-nom{
  font-size:.775rem; font-weight:700; line-height:1.3; color:var(--s-tinta,#111827);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.as-tar .as-pre{
  font-size:.85rem; font-weight:800; color:var(--s-azul,#1e2d5c);
  margin-top:.22rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.as-tar .as-hay{
  display:inline-block; margin-top:.3rem;
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
  padding:.1rem .4rem; border-radius:5px;
  background:var(--as-ok-piso); color:var(--as-ok);
}
.as-tar .as-hay.poco{ background:#fdeeee; color:var(--as-mal); }
.as-tar .as-hay.plano{ background:var(--s-fondo,#f8fafc); color:var(--s-gris,#6b7280); }

/* Las fotos de montaje se ven mal en una tarjeta angosta: son una
   escena completa, no un producto recortado. */
.as-tar.ancha{ flex-basis:13.5rem; }
.as-tar.ancha .as-foto,
.as-tar.ancha .as-sinfoto{ aspect-ratio:16/10; }

/* Lo que ya lleva en el pedido, marcado sobre la foto. */
.as-tar .as-lleva{
  position:absolute; top:.4rem; right:.4rem;
  min-width:23px; height:23px; padding:0 6px; border-radius:12px;
  background:var(--s-azul,#1e2d5c); color:#fff;
  font-size:.7rem; font-weight:800; line-height:23px; text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(17,24,39,.35), 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------------
   Botones de respuesta
   --------------------------------------------------------------------- */
.as-ops{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.1rem .15rem; }
.as-op{
  border:1px solid color-mix(in srgb, var(--s-azul,#1e2d5c) 35%, transparent);
  background:var(--s-blanco,#fff);
  color:var(--s-azul,#1e2d5c); border-radius:999px;
  padding:.42rem .82rem; font-size:.795rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:.42rem; line-height:1.3;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.as-op i{ font-size:.78em; opacity:.85; }
.as-op:hover{
  background:var(--s-azul,#1e2d5c); border-color:var(--s-azul,#1e2d5c); color:#fff;
}
.as-op:hover i{ opacity:1; }
.as-op:active{ transform:scale(.97); }
.as-op:focus-visible{ outline:2px solid var(--s-oro,#d8a21f); outline-offset:2px; }

.as-op.wa{ border-color:rgba(37,211,102,.6); color:#0d7a41; }
.as-op.wa:hover{ background:#25D366; border-color:#25D366; color:#fff; }

/* El paso que cierra la venta va lleno, no delineado: entre ocho
   botones iguales, "Cotizar esto" tiene que ganar de un vistazo. */
.as-op.fuerte{
  background:linear-gradient(135deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c));
  border-color:transparent; color:#fff;
  box-shadow:0 2px 8px -2px rgba(30,45,92,.45);
}
.as-op.fuerte:hover{ filter:brightness(1.12); }

/* ---------------------------------------------------------------------
   Lo que escribe la persona
   --------------------------------------------------------------------- */
.as-pie{
  flex:none; border-top:1px solid var(--as-borde);
  background:var(--s-blanco,#fff); padding:.6rem;
  display:flex; gap:.45rem; align-items:center;
}
.as-pie input{
  flex:1; min-width:0; border:1px solid var(--as-borde);
  border-radius:999px; padding:.58rem .95rem; font-size:.875rem;
  font-family:inherit; color:var(--s-tinta,#111827); background:var(--s-fondo,#f8fafc);
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.as-pie input::placeholder{ color:var(--s-gris-2,#9ca3af); }
.as-pie input:focus{
  outline:0; border-color:var(--s-azul,#1e2d5c); background:var(--s-blanco,#fff);
  box-shadow:0 0 0 3px rgba(30,45,92,.1);
}
.as-pie button{
  flex:none; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--s-azul-claro,#2a3d6e), var(--s-azul,#1e2d5c));
  color:#fff; font-size:.88rem;
  box-shadow:0 2px 8px -2px rgba(30,45,92,.45);
  transition:transform .14s ease, opacity .16s ease;
}
.as-pie button:hover:not(:disabled){ transform:scale(1.06); }
.as-pie button:disabled{ opacity:.4; cursor:default; box-shadow:none; }
.as-pie button:focus-visible{ outline:2px solid var(--s-oro,#d8a21f); outline-offset:2px; }

.as-nota{
  flex:none; text-align:center; font-size:.67rem; color:var(--s-gris-2,#9ca3af);
  padding:0 .7rem .55rem; background:var(--s-blanco,#fff); line-height:1.4;
}

/* ---------------------------------------------------------------------
   En celular ocupa la pantalla: un panel de 24rem flotando en un
   teléfono deja el hilo en una rendija.
   --------------------------------------------------------------------- */
@media (max-width:640px){
  .as-panel{
    right:0; bottom:0; width:100vw; height:100dvh;
    border-radius:0; border:0;
  }
  .as-tar{ flex-basis:8.6rem; }
  .as-tar.ancha{ flex-basis:12rem; }

  /* En iPhone la barra de gestos se come el campo de escribir si no se
     respeta el área segura. */
  .as-pie{ padding-bottom:calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .as-nota{ padding-bottom:calc(.55rem + env(safe-area-inset-bottom, 0px)); }
  .as-cab{ padding-top:calc(.9rem + env(safe-area-inset-top, 0px)); }

  /* El teclado del celular tapa media pantalla: con un panel completo
     el hilo necesita poder encogerse. */
  .as-hilo{ min-height:0; }
}

@media print{ .as-lanza, .as-panel, .as-gancho{ display:none !important; } }

@media (prefers-reduced-motion: reduce){
  .as-lanza, .as-tar, .as-op, .as-pie button{ transition:none; }
  .as-panel.abierto, .as-hilo > *, .as-gancho.entra{ animation:none; }
  .as-espera i{ animation:none; opacity:.55; }
}