/* ============================================================================
   SEGURATIS · EL AGENTE CONVERSACIONAL
   Claude Design → «Agente IA v3 Hibrida.dc.html» (390 px), traída el 14-08-2026.

   Es la única pantalla del sitio que ocupa el alto entero del navegador: la
   cabecera y el pie van pegados y lo que rueda es la conversación. Por eso
   tiene cabecera propia (`header-agente.php`) y no la del sitio: dos barras
   fijas de 73 px seguidas dejan la conversación en un tercio de la pantalla.

   Valores literales del documento donde el token no coincide, misma regla que
   `formularios.css` y `carga.css`: manda el documento.

   `floaty`, `rise` y `pop` salen de tokens.css. La del documento que no existía
   en el sistema es `parpadeo`, los tres puntos de «está escribiendo».

   ESCRITORIO: el documento solo trae los 390 px. No hay maqueta de escritorio,
   así que arriba de 1024 se mantiene la misma composición centrada en una
   columna de lectura; lo único que crece es el aire. Inventarle un layout de
   dos columnas a una conversación sería maquetar sin diseño.

   Requiere: tokens.css -> componentes.css
   ============================================================================ */

/* La reserva de la barra fija de móvil (tokens.css) aquí sobra: esta página no
   la lleva, y ese hueco de 78 px se ve como una franja blanca bajo el pie. */
body.has-agente { padding-bottom: 0; }

.agente {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  background: var(--c-white);
}

/* ---- Cabecera ------------------------------------------------------------ */
.agente-cab {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-bottom: var(--bd) solid var(--c-divider);
}
.agente-cab__fila { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-x-m); }

/* La salida del agente. SOLO EL LOGO: llevaba una flecha pegada delante y se
   leía como un logo con un pico, no como una salida (Jorge, 3-sep-2026).

   El logo sigue siendo el enlace de vuelta —es lo que se espera de él— y la
   vuelta atrás de verdad la hace el botón «Atrás» del guion, que ahora sale
   también en la primera pregunta y desde ahí lleva a la página anterior. Sigue
   sin haber una segunda pastilla en la cabecera: en un móvil de 390 px partía
   el nombre del asistente en dos líneas. */
.agente-cab__salir {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  color: var(--c-ink-3);
  transition: var(--t-color);
  /* Sube el toque de los 26 px del logo a los 44 de mínimo sin mover nada de
     sitio: lo que se añade de relleno se descuenta de margen. */
  margin: -9px 0; padding: 9px 0;
}
.agente-cab__salir:hover,
.agente-cab__salir:focus-visible { color: var(--c-action); }

.agente-cab__logo { flex: 0 0 auto; height: 26px; width: auto; }

.agente-cab__txt    { flex: 1 1 auto; min-width: 0; display: block; line-height: 1.25; }
.agente-cab__nombre { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
/* El punto verde es un estado, no un adorno: dice que hay alguien al otro lado. */
.agente-cab__punto  { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-positive); }
.agente-cab__estado { display: block; margin-top: 2px; font-size: 12px; color: var(--c-ink-3); }

.agente-cab__tel {
  flex: 0 0 var(--h-tap);
  display: flex; align-items: center; justify-content: center;
  width: var(--h-tap); height: var(--h-tap);
  border-radius: var(--r); background: var(--c-surface-1); color: var(--c-ink);
  transition: var(--t-color);
}
.agente-cab__tel:hover { background: var(--c-cta-bg); color: var(--c-action-ink); }

.agente-cab__barra   { height: 3px; background: var(--c-divider); }
.agente-cab__relleno {
  height: 3px; width: 0; background: var(--c-action);
  transition: width .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease-out;
}
/* Al terminar, la barra se pone verde: es la misma señal que la espera del precio. */
.agente.is-fin .agente-cab__relleno { background: var(--c-positive); }

/* ---- La conversación ----------------------------------------------------- */
.agente-conv {
  position: relative; flex: 1 1 auto;
  overflow: hidden; isolation: isolate;
  padding: 20px var(--pad-x-m) 0;
}
.agente-conv__fondo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 62% at 100% -10%,
    var(--c-hero-1) 0%, var(--c-hero-2) 32%, var(--c-hero-3) 62%, var(--c-white) 100%);
}
.agente-conv__mota {
  position: absolute; top: -16px; right: 11%; z-index: 0; pointer-events: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-blob-warm); opacity: .48; filter: blur(9px);
  animation: floaty 8s ease-in-out infinite;
}

.agente-hilo { position: relative; z-index: 1; display: grid; gap: 11px; }

/* El ancla del scroll. 24 px de aire bajo el último mensaje. */
.agente-fin { display: block; height: 24px; }

/* ---- Mensaje del agente -------------------------------------------------- */
.agente-msg { display: flex; gap: 10px; animation: rise .4s ease-out both; }

.agente-msg__avatar {
  flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: 2px;
  border-radius: 50%; background: var(--c-primary);
}
.agente-msg__burbuja {
  flex: 1 1 auto; min-width: 0; display: block;
  padding: 12px 14px; border-radius: var(--r) var(--r) var(--r) 2px;
  background: var(--c-white); border: var(--bd) solid #EFE7E1;
  box-shadow: 0 2px 4px -2px rgba(16,24,32,.07), 0 14px 26px -22px rgba(16,24,32,.35);
}
.agente-msg__txt  { display: block; font-size: 15.5px; line-height: 1.45; color: var(--c-ink); text-wrap: pretty; }
.agente-msg__nota { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--c-ink-3); }
.agente-msg__nota:empty { display: none; }

/* ---- Respuesta de quien mira --------------------------------------------- */
.agente-yo { display: flex; justify-content: flex-end; animation: rise .4s ease-out both; }

.agente-yo__burbuja {
  display: flex; align-items: center; gap: 9px; max-width: 80%;
  padding: 10px 13px; border-radius: var(--r) var(--r) 2px var(--r);
  background: var(--c-primary);
}
.agente-yo__txt { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--c-white); }

/* El lápiz vuelve a esa pregunta y borra lo contestado después. Sin él, un
   error en la segunda respuesta obliga a empezar de cero. */
.agente-yo__editar {
  flex: 0 0 24px; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); cursor: pointer; transition: var(--t-color);
}
.agente-yo__editar:hover { background: rgba(255,255,255,.30); }

/* ---- El resumen del final ------------------------------------------------ */
.agente-resumen__avatar { background: var(--c-positive); animation: pop .5s ease-out both; }

.agente-resumen__burbuja {
  flex: 1 1 auto; min-width: 0; display: block;
  padding: 15px 16px; border-radius: var(--r) var(--r) var(--r) 2px;
  background: var(--c-tag-soft);
}
.agente-resumen__rotulo {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-positive);
}
.agente-resumen__txt {
  display: block; margin-top: 8px;
  font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--c-ink); text-wrap: pretty;
}
.agente-resumen__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.agente-resumen__chip {
  padding: 7px 12px; border-radius: var(--r-pill); background: var(--c-white);
  font-size: 13px; font-weight: 700; color: var(--c-positive-body);
}

/* ---- La espera del precio, dentro de la conversación ---------------------
   El panel es el del formulario largo y su hoja es `carga.css`, que va cargada
   en todas las páginas. Aquí solo se le pone la burbuja alrededor, para que se
   lea como un mensaje más del agente y no como un trozo de otra pantalla.
   ------------------------------------------------------------------------- */
.agente-carga { display: flex; gap: 10px; animation: rise .4s ease-out both; }

.agente-carga__caja {
  flex: 1 1 auto; min-width: 0; display: block;
  padding: 4px 16px 18px; border-radius: var(--r) var(--r) var(--r) 2px;
  background: var(--c-white); border: var(--bd) solid #EFE7E1;
  box-shadow: 0 2px 4px -2px rgba(16,24,32,.07), 0 14px 26px -22px rgba(16,24,32,.35);
}

/* ---- «Está escribiendo» -------------------------------------------------- */
.agente-escribe { display: flex; gap: 11px; }
.agente-escribe__avatar {
  flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary);
}
.agente-escribe__burbuja {
  display: flex; align-items: center; gap: 5px;
  padding: 16px 18px; border-radius: var(--r) var(--r) var(--r) 2px;
  background: var(--c-white); border: var(--bd) solid #EFE7E1;
}
.agente-escribe__punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-action-ink);
  animation: parpadeo 1.3s ease-in-out infinite;
}
.agente-escribe__punto:nth-child(2) { animation-delay: .18s; }
.agente-escribe__punto:nth-child(3) { animation-delay: .36s; }

@keyframes parpadeo {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---- El pie · donde se contesta ------------------------------------------ */
.agente-pie {
  position: sticky; bottom: 0; z-index: 30;
  padding: 13px var(--pad-x-m) calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: var(--bd) solid var(--c-border-soft);
}

.agente-pie__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agente-opciones .agente-pie__cab { margin-bottom: 9px; }
.agente-campo   .agente-pie__cab  { margin-bottom: 10px; }

.agente-pie__rotulo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-3);
}
.agente-campo .agente-pie__rotulo { font-size: 12px; }

.agente-atras {
  display: flex; align-items: center; gap: 6px; min-height: 24px;
  padding: 0; border: 0; background: transparent;
  font-size: 13.5px; font-weight: 700; color: var(--c-action-ink); cursor: pointer;
}
.agente-atras:hover { color: var(--c-action-strong); }

/* ---- Las respuestas en botones ------------------------------------------- */
.agente-opciones__grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Dos columnas solo cuando las respuestas son cortas: es lo que decide el
   documento (14 caracteres) y lo que evita que «Cuadro médico de la compañía»
   se parta en tres líneas dentro de un botón de 46 px. */
.agente-opciones__grid--dos { grid-template-columns: 1fr 1fr; }

.agente-opcion {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 13px;
  border-radius: var(--r); border: var(--bd-strong) solid var(--c-field-border);
  background: var(--c-white); text-align: left; cursor: pointer;
  transition: var(--t-color), var(--t-lift);
}
.agente-opcion:hover {
  border-color: var(--c-action); background: var(--c-cta-bg); transform: var(--lift);
}
/* El círculo solo lo llevan los seis ramos de la primera pantalla; las demás
   respuestas van sin icono, como en el documento. `currentColor` para que el
   trazo lo ponga esta regla y no el PHP. */
.agente-opcion__ico {
  flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-cta-bg); color: var(--c-action-ink);
}
.agente-opcion__txt {
  flex: 1 1 auto; min-width: 0;
  font-size: 14.5px; line-height: 1.3; font-weight: 700; color: var(--c-ink-article);
}

/* ---- El campo de texto --------------------------------------------------- */
.agente-campo__fila  { display: flex; gap: 8px; }
.agente-campo__input {
  flex: 1 1 auto; min-width: 0; height: var(--h-btn-sm); padding: 0 14px;
  border: var(--bd) solid var(--c-field-border); border-radius: var(--r);
  background: var(--c-field);
  /* 16 px no es capricho: por debajo, Safari de iOS hace zoom al enfocar y
     descoloca la pantalla entera. */
  font-size: 16px; font-weight: 600; color: var(--c-ink);
  box-shadow: var(--sh-inset);
}
.agente-campo__input::placeholder { font-weight: 500; color: var(--c-ink-4); }
.agente-campo--error .agente-campo__input { border-color: var(--c-negative); }

.agente-campo__enviar {
  flex: 0 0 var(--h-btn-sm);
  display: flex; align-items: center; justify-content: center;
  width: var(--h-btn-sm); height: var(--h-btn-sm);
  border: 0; border-radius: var(--r-pill); background: var(--c-action);
  cursor: pointer; box-shadow: var(--sh-cta-sm);
  transition: var(--t-color), var(--t-lift);
}
.agente-campo__enviar:hover { background: var(--c-action-strong); transform: var(--lift); }
.agente-campo__enviar[disabled] { opacity: .55; cursor: default; transform: none; }

/* ---- Las fechas de nacimiento de los asegurados --------------------------
   El bloque es el del formulario largo (`parts/formularios/personas.php`) y su
   estilo vive en `formularios.css`, que se carga en todas las páginas. Aquí
   solo va lo que cambia por estar dentro de un pie pegado abajo.
   ------------------------------------------------------------------------- */
.agente-personas .agente-pie__cab { margin-bottom: 10px; }
.agente-personas .agente-pie__rotulo { font-size: 12px; }

/* Seis personas son seis filas de 46 px y el pie se comería la conversación
   entera. Se le pone tope y rueda por dentro: el botón de continuar tiene que
   verse siempre, o parece que no hay forma de seguir. */
.agente-personas .personas__lista {
  max-height: 38vh; overflow-y: auto;
  /* Sitio para que el foco del selector no quede pegado al borde al rodar. */
  padding-right: 2px;
}

.agente-personas__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: var(--h-btn-sm); margin-top: 12px;
}

/* ---- El cierre ----------------------------------------------------------- */
.agente-cierre { display: grid; gap: 8px; }

.agente-cierre__cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h-btn-hero-m); border-radius: var(--r-pill);
  background: var(--c-action); color: var(--c-white);
  font-size: 19px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--sh-cta); transition: var(--t-color), var(--t-lift);
}
.agente-cierre__cta:hover { background: var(--c-action-strong); color: var(--c-white); transform: var(--lift); }

.agente-cierre__reinicio {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h-btn-xs); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-ink-3);
  font-size: 14.5px; font-weight: 700; cursor: pointer; transition: var(--t-color);
}
.agente-cierre__reinicio:hover { color: var(--c-ink); }

/* ---- El aviso de error --------------------------------------------------- */
.agente-aviso {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r);
  background: var(--c-note-bg); border: var(--bd) solid var(--c-note-border);
  font-size: 13.5px; line-height: 1.45; color: var(--c-negative);
}

/* ---- El pie legal -------------------------------------------------------- */
.agente-legal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; }
.agente-legal__txt { font-size: 12px; line-height: 1.4; color: var(--c-ink-3); }
.agente-legal__txt a { color: var(--c-ink-3); text-decoration: underline; }
.agente-legal__txt a:hover { color: var(--c-action-ink); }

/* ---- Sin JavaScript ------------------------------------------------------
   El agente ES JavaScript: no hay forma de conversar por POST. Lo que sí se
   puede es no dejar a nadie en una pantalla muerta, así que sale el formulario
   mínimo del catálogo, que sí funciona sin JS. Regla del proyecto: la salida
   segura nunca es una página en blanco.
   ------------------------------------------------------------------------- */
.agente-nojs { padding: 24px var(--pad-x-m) 40px; }

/* ---- ESCRITORIO ---------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Una conversación se lee en columna estrecha; a 1280 px de ancho las
     burbujas serían renglones de 150 caracteres. 620 px deja el mensaje del
     agente en unos 60 caracteres, que es la medida de lectura del sistema. */
  .agente-cab__fila,
  .agente-conv__inner,
  .agente-pie__inner { max-width: 620px; margin: 0 auto; }

  .agente-cab__fila { padding: 16px var(--pad-x-d); }
  .agente-conv      { padding: 28px var(--pad-x-d) 0; }
  .agente-pie       { padding: 16px var(--pad-x-d) 20px; }

  .agente-msg__txt,
  .agente-resumen__txt { font-size: 16.5px; }
  .agente-nojs { max-width: 620px; margin: 0 auto; }
}