/* ── Asistente de preguntas ───────────────────────────────────────────────
   Esquina inferior IZQUIERDA a propósito: la derecha la ocupan el botón de
   Canarias del mapa y los avisos del navegador.

   Sustituye a assets/asistente.css, que no se borra: vercel.json sirve
   /assets/ con immutable a un año y las 215 fichas publicadas lo enlazan.

   Aquí el color SÍ sale de las variables de cada página, que es lo que el
   fichero viejo decía en su cabecera y no hacía: tenía cero var() y los
   nueve colores en hex a mano. Cada var() lleva respaldo literal porque un
   var() sin resolver invalida la declaración entera y el elemento hereda en
   silencio, sin un solo error en consola. Los dos consumidores —index.html
   y assets/puerto-v2.css— definen el mismo juego de tokens; el respaldo es
   para el tercero que venga sin definirlos.

   Las sombras van en rgba literal: son el navy con transparencia, y no hay
   token con esa alfa. Sin color-mix(), que es lo único que permitiría
   derivarlas de la variable.                                                */

.as-lanzador{position:fixed;left:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:.92rem;line-height:1;
  font-family:var(--texto,Satoshi,'Avenir Next','Segoe UI',system-ui,sans-serif);
  background:var(--navy,#0d163f);color:var(--marfil,#f5efe3);
  box-shadow:0 12px 30px -12px rgba(13,22,63,.7)}
.as-lanzador:hover{background:var(--tinta,#161b38)}
.as-lanzador:focus-visible{outline:2px solid var(--laton,#b8955e);outline-offset:3px}
.as-lanzador svg{flex:none}

.as-panel{position:fixed;left:20px;bottom:20px;z-index:81;width:min(380px,calc(100vw - 40px));
  max-height:min(560px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--papel,#fbf8f1);border:1px solid var(--linea-clara,rgba(184,149,94,.35));
  border-radius:14px;box-shadow:0 24px 60px -20px rgba(13,22,63,.55);overflow:hidden;
  font-weight:400;font-size:.92rem;line-height:1.55;
  font-family:var(--texto,Satoshi,'Avenir Next','Segoe UI',system-ui,sans-serif);
  color:var(--tinta,#161b38)}
.as-panel[hidden]{display:none}
.as-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:var(--navy,#0d163f);color:var(--marfil,#f5efe3);font-size:.95rem}
.as-cerrar{border:0;background:transparent;color:inherit;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 4px;min-width:32px;min-height:32px}
.as-cerrar:focus-visible{outline:2px solid var(--laton,#b8955e);outline-offset:2px}

.as-hilo{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.as-msg p{margin:0}
/* El filete es lo que distingue la burbuja del bot del panel. Antes eran
   #f4f0e6 sobre #fefdf9 —dos tintes que no están en ninguna paleta— y se
   separaban por 10/13/19. En tokens son marfil sobre papel, que se separan
   por 6/9/14: menos que antes. Con el borde se lee sin depender del tono. */
.as-bot{align-self:flex-start;max-width:94%;background:var(--marfil,#f5efe3);
  border:1px solid var(--linea-clara,rgba(184,149,94,.35));
  border-radius:12px 12px 12px 4px;padding:11px 13px}
.as-yo{align-self:flex-end;max-width:88%;background:var(--navy,#0d163f);color:var(--marfil,#f5efe3);
  border-radius:12px 12px 4px 12px;padding:10px 13px}
.as-pie{margin-top:10px!important;font-size:.82rem;color:var(--gris,#5b6283)}
.as-pie a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.as-sugerencias{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Navy y no latón: el chip es un botón, así que su borde entra en el 3:1 de
   WCAG 1.4.11, y el latón no llega contra la burbuja marfil en que vive —ni al
   60 % (1,66) ni sólido (2,45) ni como relleno (2,45)—. El techo está por
   debajo del mínimo, así que no era cuestión de alfa sino de tono. El tono
   elegido es el de su propia etiqueta: píldora con contorno que el :hover
   rellena, que es el idioma de un botón secundario y se lee más pulsable que
   el filete de antes. 15,24 contra la burbuja. El latón se queda donde sí
   cumple: el anillo de foco.                                              */
.as-chip{border:1px solid var(--navy,#0d163f);background:transparent;border-radius:999px;
  padding:7px 12px;font-weight:600;font-size:.78rem;line-height:1.3;font-family:inherit;
  color:var(--navy,#0d163f);cursor:pointer;text-align:left}
.as-chip:hover{background:var(--navy,#0d163f);color:var(--marfil,#f5efe3);border-color:var(--navy,#0d163f)}
.as-chip:focus-visible{outline:2px solid var(--laton,#b8955e);outline-offset:2px}

.as-form{display:flex;gap:8px;padding:12px 16px 0}
/* --linea-campo y no --linea-oscura (.14): el campo es blanco dentro de un panel
   papel, y esos dos fondos están a 1,04 entre sí, así que el borde es la única
   pista de dónde empieza el campo. A .14 daba 1,33 contra el interior y 1,25
   contra el panel, cuando 1.4.11 pide 3. Con el token va a 3,83 y 3,61.
   El tono es tinta, no latón: el latón sobre blanco no llega a 3 ni sólido
   (2,80), así que subirle el alfa a --linea-clara no habría servido.          */
.as-campo{flex:1;min-height:44px;padding:0 12px;border:1px solid var(--linea-campo,rgba(22,27,56,.55));
  border-radius:8px;font:inherit;color:inherit;background:#fff}
.as-campo:focus-visible{outline:2px solid var(--navy,#0d163f);outline-offset:1px}
.as-enviar{min-height:44px;padding:0 16px;border:0;border-radius:8px;
  background:var(--granate,#9e3434);color:#fff;
  font-weight:600;font-size:.88rem;line-height:1;font-family:inherit;cursor:pointer}
.as-enviar:hover{background:var(--granate-osc,#822a2a)}
.as-enviar:focus-visible{outline:2px solid var(--laton,#b8955e);outline-offset:2px}
.as-aviso{margin:10px 16px 14px;font-size:.73rem;color:var(--gris,#5b6283)}

@media(max-width:600px){
  .as-lanzador{left:12px;bottom:12px;padding:0 16px}
  .as-panel{left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100vh - 24px)}
}
@media(prefers-reduced-motion:no-preference){
  .as-panel{animation:as-entra .22s ease-out}
  @keyframes as-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}