/* ============================================================
   AMA — EL GLOBO, EN LAS DOS PÁGINAS
   ------------------------------------------------------------
   Lo usan la portada (index.html) y /cafes. Decisión de Igor del
   4-oct-2026: una sola AMA, que se vea IGUAL en las dos. Por eso
   este archivo trae sus propios colores en `.amo-zona` —los de la
   marca, los mismos de cafes.css— en vez de heredar los de cada
   página: la portada y /cafes tienen tokens distintos, y con los
   heredados el globo cambiaría de tono al cambiar de página.

   Se mudó tal cual desde cafes.css. Las reglas sin `.amo-zona`
   delante usan clases que solo existen dentro del globo.
   ============================================================ */
.amo-zona{
  --amo-negro:#0a0908; --amo-carbon:#131110; --amo-linea:#2a2422;
  --amo-texto:#f5f2ee; --amo-tenue:#9a918a; --amo-acento:#e05c24; --amo-brasa:#ff7a3d;
  --amo-mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --amo-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-family:var(--amo-sans);color:var(--amo-texto);line-height:1.6;text-align:left;
  -webkit-font-smoothing:antialiased}
.amo-zona *,.amo-zona *::before,.amo-zona *::after{box-sizing:border-box;margin:0}
.amo-zona button,.amo-zona input{font-family:inherit;line-height:normal}
.amo-saludo.oculto{display:none !important}
/* El foco se marca igual en las dos páginas: /cafes tiene un
   :focus-visible global y la portada no. */
.amo-zona :focus-visible{outline:2px solid var(--amo-brasa);outline-offset:3px}
.amo-zona .amo-pie input:focus-visible{outline:none;border-color:var(--amo-acento)}
.amo-zona{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;
          align-items:flex-end;gap:12px}
.amo-saludo{max-width:260px;background:var(--amo-carbon);border:1px solid var(--amo-linea);
  border-radius:12px 12px 4px 12px;padding:14px 16px;font-size:14px;line-height:1.5;
  box-shadow:0 18px 40px rgba(0,0,0,.6);position:relative;cursor:pointer}
.amo-saludo b{color:var(--amo-brasa)}
.equis{position:absolute;top:6px;right:9px;color:var(--amo-tenue);font-size:15px;background:none;
       border:0;cursor:pointer;line-height:1}
.amo-lanzador{display:flex;align-items:center;gap:11px;background:var(--amo-acento);border:0;
  border-radius:999px;padding:11px 20px 11px 12px;cursor:pointer;color:#fff;
  box-shadow:0 14px 34px rgba(224,92,36,.36)}
.amo-lanzador:hover{background:var(--amo-brasa)}
.amo-lanzador img{width:32px;height:32px;border-radius:50%;background:var(--amo-negro)}
.amo-lanzador span{font-family:var(--amo-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.amo-panel{width:380px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 120px);
  background:var(--amo-carbon);border:1px solid var(--amo-linea);border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.75);display:none;flex-direction:column;overflow:hidden}
.amo-panel.abierto{display:flex}
.amo-cab{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--amo-linea)}
.amo-cab img{width:34px;height:34px;border-radius:50%}
.amo-cab h4{font-size:15px;font-weight:600}
.amo-cab p{font-size:11.5px;color:var(--amo-tenue)}
.amo-cab .equis{position:static;font-size:19px}
/* El parlante de AMA. Apagado se ve tachado y tenue; prendido, en
   el acento. Empuja la equis a la derecha con margin-left:auto. */
.amo-voz{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid var(--amo-linea);color:var(--amo-tenue);cursor:pointer}
.amo-voz[hidden]{display:none}
.amo-voz:hover{border-color:var(--amo-acento);color:var(--amo-brasa)}
.amo-voz .ondas{display:none}
.amo-voz.activa{color:var(--amo-brasa);border-color:var(--amo-acento)}
.amo-voz.activa .ondas{display:inline}
.amo-voz.activa .mudo{display:none}
.amo-voz[hidden] + .equis{margin-left:auto}
/* El micrófono, al lado del campo de texto (pedido de Igor del
   2-oct-2026): es otra forma de escribir. Mismo tamaño que el botón
   de enviar, pero en contorno para no competir con él. */
.amo-pie .amo-mic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid var(--amo-linea);color:var(--amo-brasa);cursor:pointer}
.amo-pie .amo-mic[hidden]{display:none}
.amo-pie .amo-mic:hover{border-color:var(--amo-acento)}
.amo-pie .amo-mic.activa{color:#fff;background:var(--amo-acento);border-color:var(--amo-acento)}
.amo-pie .amo-mic[data-estado="escuchando"]{animation:amoEscucha 1.4s ease-in-out infinite}
.amo-pie .amo-mic[data-estado="pensando"]{opacity:.7}
.amo-pie .amo-mic[data-estado="pausa"]{background:transparent;color:var(--amo-brasa);border-color:var(--amo-acento)}
@keyframes amoEscucha{
  0%,100%{box-shadow:0 0 0 0 rgba(224,92,36,.55)}
  50%{box-shadow:0 0 0 7px rgba(224,92,36,0)}
}
@media (prefers-reduced-motion:reduce){.amo-pie .amo-mic[data-estado="escuchando"]{animation:none}}
.amo-cab{gap:8px}
.amo-cab > div{min-width:0}
.amo-cab p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amo-hilo{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.msj{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55}
.msj.amo{background:#1c1917;border:1px solid var(--amo-linea);border-bottom-left-radius:4px;align-self:flex-start}
.msj.yo{background:var(--amo-acento);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msj b{color:var(--amo-brasa)}
/* AMA trabajando (2-oct-2026): taza con vapor + el paso real en curso.
   El vapor sube y se desvanece en desfase; la frase entra con un fundido
   cada vez que cambia. Todo se detiene con "reducir movimiento". */
.trabajando{display:inline-flex;align-items:center;gap:9px;color:var(--amo-tenue);font-size:13.5px}
.trabajando .taza{width:22px;height:22px;flex:none;color:var(--amo-brasa);overflow:visible}
.trabajando .vapor{opacity:0;animation:amoVapor 1.8s ease-in-out infinite}
.trabajando .v1{animation-delay:0s}
.trabajando .v2{animation-delay:.3s}
.trabajando .v3{animation-delay:.6s}
.trabajando .trabajando-frase{background:linear-gradient(90deg,var(--amo-tenue) 0%,var(--amo-texto) 50%,var(--amo-tenue) 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:amoBrillo 1.8s linear infinite}
.trabajando .trabajando-frase.nuevo{animation:amoBrillo 1.8s linear infinite,amoEntra .35s ease-out}
.trabajando.aparte{display:flex;margin-top:10px;padding-top:9px;border-top:1px solid var(--amo-linea);font-size:12.5px}
.trabajando.aparte .taza{width:18px;height:18px}
@keyframes amoVapor{
  0%{opacity:0;transform:translateY(3px)}
  40%{opacity:.9}
  100%{opacity:0;transform:translateY(-4px)}
}
@keyframes amoBrillo{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes amoEntra{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .trabajando .vapor{animation:none;opacity:.8}
  .trabajando .trabajando-frase,.trabajando .trabajando-frase.nuevo{animation:none;color:var(--amo-tenue);background:none}
}
.msj.yo b{color:#fff}
/* Los botones para comprar el blend, dentro de la burbuja de AMA.

   Van PEGADOS a la recomendación y no en una barra aparte: lo que
   se compra es exactamente lo que AMA acaba de describir, y
   separarlos invitaría a pensar que son dos cosas distintas.
   Tokens del :root de este archivo — cafes.css no comparte nombres
   con admin.css. */
.blend-compra{margin-top:12px;padding-top:12px;border-top:1px solid var(--amo-linea);
  display:flex;flex-wrap:wrap;gap:8px}
.blend-rotulo{flex-basis:100%;font-family:var(--amo-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amo-tenue);margin:0}
.blend-compra button{font-family:var(--amo-mono);font-size:12.5px;letter-spacing:.06em;
  padding:9px 14px;border-radius:999px;background:var(--amo-acento);border:1px solid var(--amo-acento);
  color:#fff;cursor:pointer}
.blend-compra button:hover{background:var(--amo-brasa);border-color:var(--amo-brasa)}
.blend-compra button:disabled{background:transparent;color:var(--amo-brasa);cursor:default}
.blend-nota{flex-basis:100%;font-size:12px;color:var(--amo-tenue);margin:0}
/* Acompañamiento: mismo molde que la compra de grano, pero en
   contorno — es la segunda cosa que se ofrece, no la principal. */
.acompanar button{background:transparent;color:var(--amo-texto);border-color:var(--amo-linea)}
.acompanar button:hover{background:transparent;border-color:var(--amo-acento);color:var(--amo-brasa)}

.amo-sug{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.amo-sug button{font-size:12.5px;padding:7px 12px;border-radius:999px;background:transparent;
  border:1px solid var(--amo-linea);color:var(--amo-texto);cursor:pointer}
.amo-sug button:hover{border-color:var(--amo-acento);color:var(--amo-brasa)}
.amo-pie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--amo-linea)}
.amo-pie input{flex:1;background:var(--amo-negro);border:1px solid var(--amo-linea);border-radius:999px;
  padding:11px 15px;color:var(--amo-texto);font:inherit;font-size:14px}
.amo-pie input::placeholder{color:#5f5854}
.amo-pie button{background:var(--amo-acento);border:0;border-radius:50%;width:40px;height:40px;
  color:#fff;cursor:pointer;font-size:16px;flex:none}

/* Los productos de la carta que AMA nombró (4-oct-2026). En /cafes,
   un producto con extras se elige en la carta —ahí está el selector
   de leche y esencias—, y el botón lo dice con la flecha. */
.carta-ofrece button .ir{margin-left:6px;opacity:.85}

@media(max-width:520px){
  .amo-zona{right:14px;bottom:14px;left:14px;align-items:stretch}
  .amo-panel{width:100%;height:70vh}
  .amo-lanzador{align-self:flex-end}
}