/* ============================================================================
   El agente — <dialog> HUD

   Archivo aparte de styles.css desde el 2026-09-06, y no por orden: son 8 KB
   crudos (2,5 KB brotli) que en cuatro de las cinco páginas no se usan hasta
   que alguien abre el agente, y que hasta hoy bloqueaban el primer pintado de
   todas. Es el recorte por cobertura que pide contracts/seo-rendimiento.md § 7.

   Quién lo carga:
     - contacto.html lo enlaza en el <head>: ahí el agente está en la página,
       visible al cargar, y si llegara tarde se vería armarse.
     - en el resto lo inyecta assets/js/chat.js al arrancar (módulo, diferido),
       porque el panel se construye recién en el primer abrir().

   Los tokens (--hud-*, --u, --ease) siguen viviendo en el :root de styles.css,
   que se carga siempre. El gate audita este archivo con las mismas reglas de
   color y tipografía que aquel: ver checkTokens y checkControles.
   ========================================================================= */

.agente {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(94vw, 440px);
  height: min(82vh, 640px);
  padding: 0;
  border: 1px solid var(--hud-borde-fuerte);
  border-radius: var(--radio);
  background: var(--hud-vidrio);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 60px var(--hud-glow);
  color: var(--tinta);
}

.agente::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.agente__panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Sin justify-content: space-between. Con dos hijos alcanzaba; ahora son cuatro
   (lámpara, marca, estado, cerrar) y space-between los repartiría a lo ancho
   separando la lámpara de la marca, que son una sola cosa. El estado se va
   solo a la derecha con su margin-left: auto. */
.agente__cabecera {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--u);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-bottom: 1px solid var(--hud-borde);
}

.agente__marca {
  font: 700 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* La lámpara late porque el agente contesta a cualquier hora y esa es la
   promesa entera de contacto.html. Late lento (2,4s) y sin cambiar de tamaño:
   es una lámpara que respira, no una notificación que pide algo. */
.agente__pulso {
  flex: none;
  width: calc(var(--u) * 0.875);
  height: calc(var(--u) * 0.875);
  border-radius: 50%;
  background: var(--saffron);
  box-shadow: 0 0 10px var(--hud-glow);
  animation: latido 2400ms var(--ease) infinite;
}

@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.agente__estado {
  margin-left: auto;
  font: 400 var(--t-placa)/1 var(--fuente-titulo);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--granito-claro);
}

/* Cuando el último pedido real al agente falló, chat.js pone data-agente="caido"
   en el <html> y reescribe el rótulo. La lámpara deja de latir y se apaga a
   granito: un punto saffron pulsando arriba de "Sin respuesta ahora" sería la
   misma decoración de antes, solo que contradiciéndose a sí misma. */
[data-agente="caido"] .agente__pulso {
  animation: none;
  background: var(--granito);
  box-shadow: none;
}

/* 44px y no los 28 de antes: el ícono sigue midiendo 18, lo que crece es el
   área que hay que acertar con el pulgar. El borde es transparente hasta el
   hover, así que la caja más grande no se ve hasta que se usa. */
.agente__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 5.5);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition:
    color var(--dur-rapida) var(--ease),
    border-color var(--dur-rapida) var(--ease);
}
.agente__cerrar:hover { color: var(--saffron); border-color: var(--hud-borde); }

.agente__mensajes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.25);
  padding: calc(var(--u) * 2);
}

.agente__fila {
  max-width: 92%;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.25);
  border-left: 2px solid var(--granito);
  background: color-mix(in srgb, var(--off-white) 4%, transparent);
  font-size: var(--t-menor);
  line-height: 1.5;
  white-space: pre-wrap;
}

.agente__fila--agente {
  align-self: flex-start;
  border-left-color: var(--saffron);
}

.agente__fila--visitante {
  align-self: flex-end;
  border-left: none;
  border-right: 2px solid var(--granito);
  background: color-mix(in srgb, var(--saffron) 6%, transparent);
}

/* --- El agente pensando ---------------------------------------------------

   Tres lámparas de línea calentando en secuencia, no tres puntos rebotando.
   El sitio entero dice "acá hay actividad" con lámparas ámbar que se encienden
   y se apagan; el agente no tiene por qué hablar otro idioma justo en el
   momento que más importa.

   El movimiento es electromecánico como el resto: el filamento sube y baja con
   la misma curva, nunca parpadea de golpe. Con prefers-reduced-motion esta
   fila ni se construye — chat.js pinta el texto en su lugar. */

.agente__fila--pensando {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.75);
  padding-top: calc(var(--u) * 1.5);
  padding-bottom: calc(var(--u) * 1.5);
}

.agente__lampara {
  width: calc(var(--u) * 0.875);
  height: calc(var(--u) * 0.875);
  border-radius: 50%;
  /* Apagada es vidrio sobre bronce, igual que las del tablero. */
  background: var(--bronce-oscuro);
  animation: lampara-calienta 1.5s var(--ease) infinite;
}
.agente__lampara:nth-child(2) { animation-delay: 0.19s; }
.agente__lampara:nth-child(3) { animation-delay: 0.38s; }

@keyframes lampara-calienta {
  0%, 60%, 100% {
    background: var(--bronce-oscuro);
    box-shadow: none;
  }
  26% {
    background: var(--luz-calida);
    box-shadow: 0 0 calc(var(--u) * 0.75) calc(var(--u) * 0.125)
      color-mix(in srgb, var(--saffron) 70%, transparent);
  }
}

.agente__handoff {
  flex: none;
  display: grid;
  gap: calc(var(--u) * 0.75);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-top: 1px solid var(--hud-borde);
  background: var(--hud-superficie);
}

/* [hidden] es (0,1,0) igual que .agente__handoff — sin esto, un atributo del
   DOM pierde contra la clase y la caja vacía queda visible aunque nadie
   activó el handoff todavía. */
.agente__handoff[hidden] { display: none; }

.agente__handoff-razon {
  margin: 0;
  color: var(--tinta-suave);
  font-size: var(--t-menor);
}

.agente__handoff-boton {
  justify-self: start;
}

.agente__form {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--u);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2);
  border-top: 1px solid var(--hud-borde);
}

.agente__input {
  flex: 1;
  min-height: 2.5rem;
  max-height: 6rem;
  padding: calc(var(--u) * 0.85) calc(var(--u) * 1);
  border: 1px solid var(--hud-borde);
  border-radius: var(--radio);
  background: color-mix(in srgb, var(--negro) 70%, transparent);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/1.4 var(--fuente-cuerpo);
  resize: none;
}
.agente__input:focus-visible { border-color: var(--hud-borde-fuerte); }
.agente__input:disabled { opacity: 0.5; }

/* El placeholder era el único texto del sitio que no pasaba AA: nunca se
   estilizó, así que heredaba el gris medio que pone el navegador por defecto y
   daba 4,22:1 contra el fondo del campo, por debajo del piso de 4,5. Con
   --tinta-suave son 7,04:1. El opacity: 1 es para Firefox, que le aplica una
   opacidad propia al placeholder. */
.agente__input::placeholder {
  color: var(--tinta-suave);
  opacity: 1;
}

/* .tecla es el CTA grande de cierre de página — acá adentro, junto al campo
   de texto, necesita su propia escala compacta. */
.agente__enviar {
  min-height: calc(var(--u) * 5.5);   /* 44px: mínimo táctil */
  padding: calc(var(--u) * 0.85) calc(var(--u) * 1.5);
  font-size: var(--t-placa);
  letter-spacing: 0.09em;
  box-shadow: none;
}
.agente__enviar:hover { box-shadow: 0 0 22px var(--hud-glow); }

.agente__enviar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 620px) {
  .agente {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}