/* ═══════════════════════════════════════════════════════════════════════════
   FedatarIA · el asistente de fedatarium.com · v590
   ═══════════════════════════════════════════════════════════════════════════
   Hereda las variables de estilo.css (--hondo, --laton, --brillo, --curva…) y
   su «IA» viva (.ia-viva, la de «Inteligencia NotarIA»). Todo va con el prefijo
   .fa- para no tocar nada de la página. Lo construye asistente.js, y SOLO si el
   servidor dice que hoy está disponible: sin eso, no hay círculo.
   ═══════════════════════════════════════════════════════════════════════════ */
.fa {
  --fa-fondo: #FDFCF9;                  /* un punto más claro que --crema (pedido de Esteban) */
  --fa-texto: var(--texto, #242621);
  --fa-suave: var(--gris, #63615A);
  --fa-linea: var(--linea, #DCD6C2);
  --fa-tarjeta: #FFFFFF;
  --fa-usuario: var(--tinta, #1B2A4A);
  --fa-enlace: var(--laton-texto, #8A6A24);
  --fa-lado: 24px;
  position: fixed; right: 0; bottom: 0; z-index: 900;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.fa *, .fa *::before, .fa *::after { box-sizing: border-box; }
/* ESPECIFICIDAD CERO a propósito (:where): con «.fa button» (0,1,1) el color heredado pisaba el de
   cada botón (.fa-boton, 0,1,0) y el texto de «Enviar mis datos» salía oscuro sobre azul · v591 */
:where(.fa) button { font: inherit; color: inherit; }
:where(.fa) :focus-visible { outline: 2px solid var(--laton, #A9812E); outline-offset: 2px; }
/* el cuadro de escribir ya se ilumina entero (su borde redondeado): sin el marco cuadrado encima */
.fa .fa-caja textarea:focus-visible { outline: none; }
.fa .fa-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── El sello ────────────────────────────────────────────────────────────── */
.fa-lanzador { position: fixed; right: var(--fa-lado); bottom: calc(var(--fa-lado) + env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 32% 26%, #263a63 0%, var(--hondo, #0E192E) 64%);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(217,184,113,.6), inset 0 0 0 5px var(--hondo, #0E192E), inset 0 0 0 6px rgba(217,184,113,.28);
  transition: transform .35s var(--curva, cubic-bezier(.22,1,.36,1)), box-shadow .35s var(--curva, ease), opacity .3s ease;
  animation: fa-entra .6s var(--curva, ease) both; }
@keyframes fa-entra { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
.fa-lanzador:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 40px -10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(217,184,113,.85), inset 0 0 0 5px var(--hondo, #0E192E), inset 0 0 0 6px rgba(217,184,113,.45); }
.fa-lanzador:active { transform: scale(.96); }
.fa-lanzador .fa-icono { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brillo, #D9B871);
  transition: opacity .25s var(--curva, ease), transform .45s var(--curva, ease); }
.fa-lanzador .fa-icono svg { width: 27px; height: 27px; }
.fa-lanzador .fa-cerrar-i { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fa[data-abierto="si"] .fa-lanzador .fa-logo-i { opacity: 0; transform: rotate(90deg) scale(.6); }
.fa[data-abierto="si"] .fa-lanzador .fa-cerrar-i { opacity: 1; transform: none; }
.fa-lanzador::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(217,184,113,.55); opacity: 0; pointer-events: none; }
.fa[data-latido="si"] .fa-lanzador::after { animation: fa-latido 1.6s var(--curva, ease) 2; }
@keyframes fa-latido { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }

/* ── El aviso (una vez por visita, solo en pantallas grandes) ───────────── */
.fa-aviso { position: fixed; right: calc(var(--fa-lado) + 74px); bottom: calc(var(--fa-lado) + 10px + env(safe-area-inset-bottom, 0px));
  max-width: 250px; background: var(--fa-tarjeta); color: var(--fa-texto); border: 1px solid var(--fa-linea); border-radius: 16px 16px 6px 16px;
  padding: 12px 34px 12px 14px; font-size: 14px; line-height: 1.4; box-shadow: 0 14px 36px -14px rgba(0,0,0,.35);
  opacity: 0; transform: translateX(10px) scale(.97); transform-origin: right bottom; pointer-events: none;
  transition: opacity .4s var(--curva, ease), transform .5s var(--curva, ease); }
.fa-aviso[data-visible="si"] { opacity: 1; transform: none; pointer-events: auto; }
.fa-aviso strong { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 15px; display: block; margin-bottom: 2px; }
.fa-aviso .fa-aviso-abrir { all: unset; cursor: pointer; display: block; }
.fa-aviso .fa-aviso-cerrar { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--fa-suave); display: grid; place-items: center; }
.fa-aviso .fa-aviso-cerrar:hover { background: rgba(0,0,0,.05); }

/* ── El panel ────────────────────────────────────────────────────────────── */
.fa-panel { position: fixed; right: var(--fa-lado); bottom: calc(var(--fa-lado) + 76px + env(safe-area-inset-bottom, 0px));
  width: 404px; height: min(680px, calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)));
  display: grid; grid-template-rows: auto 1fr auto; background: var(--fa-fondo); color: var(--fa-texto);
  border-radius: 22px; overflow: hidden; isolation: isolate;
  /* SOMBRA NEGRA para que el panel se despegue del fondo (pedido de Esteban) */
  box-shadow: 0 40px 90px -10px rgba(0,0,0,.72), 0 18px 40px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(217,184,113,.18) inset;
  visibility: hidden; opacity: 0; transform: translateY(10px) scale(.94);
  transform-origin: calc(100% - 31px) calc(100% + 45px);
  clip-path: circle(34px at calc(100% - 31px) calc(100% + 45px));
  transition: opacity .22s ease, transform .3s var(--curva, ease), clip-path .3s var(--curva, ease), visibility 0s linear .3s; }
.fa[data-abierto="si"] .fa-panel { visibility: visible; opacity: 1; transform: none;
  clip-path: circle(160% at calc(100% - 31px) calc(100% + 45px));
  transition: opacity .2s ease, transform .55s var(--curva, ease), clip-path .62s var(--curva, ease), visibility 0s; }
.fa-panel::before { content: ""; position: absolute; inset: 0; background-image: var(--grano, none); opacity: .02; pointer-events: none; z-index: -1; }

.fa-cabecera { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 12px 15px 16px; background: var(--hondo, #0E192E); color: #F7F3E6; }
.fa-cabecera::before { content: ""; position: absolute; inset: 0; background-image: var(--grano, none); opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
.fa-cabecera::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,184,113,.7) 30%, rgba(217,184,113,.7) 70%, transparent); }
.fa-sello { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--brillo, #D9B871);
  background: radial-gradient(circle at 32% 26%, #263a63, var(--hondo, #0E192E) 70%);
  box-shadow: inset 0 0 0 1px rgba(217,184,113,.65), inset 0 0 0 4px var(--hondo, #0E192E), inset 0 0 0 5px rgba(217,184,113,.25); }
.fa-sello svg { width: 18px; height: 18px; }
.fa-titulos { min-width: 0; }
.fa-nombre { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 17px; line-height: 1.2; margin: 0; letter-spacing: .005em; color: #F7F3E6; }
.fa-estado { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; color: var(--sobre-hondo-tenue, #93A0BA); }
.fa-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--brillo, #D9B871); animation: fa-vivo 2.4s ease-out infinite; }
@keyframes fa-vivo { 0% { box-shadow: 0 0 0 0 rgba(217,184,113,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(217,184,113,0); } }
.fa-acciones { margin-left: auto; display: flex; gap: 2px; }
.fa-accion { width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--sobre-hondo, #C6D0E4); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.fa-accion:hover { background: rgba(255,255,255,.08); color: #fff; }
.fa-accion svg { width: 19px; height: 19px; }

/* ── El hilo ─────────────────────────────────────────────────────────────── */
.fa-hilo { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px 12px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--fa-linea) transparent; }
.fa-bienvenida { animation: fa-sube .6s var(--curva, ease) .18s both; }
.fa-bienvenida h3 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 23px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.005em; color: var(--fa-texto); }
.fa-bienvenida p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fa-suave); }
.fa-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fa-chip { border: 1px solid var(--fa-linea); background: var(--fa-tarjeta); color: var(--fa-texto); border-radius: 999px; padding: 9px 14px; font-size: 13.5px; line-height: 1.25; font-weight: 500; cursor: pointer; text-align: left;
  transition: border-color .2s, color .2s, transform .25s var(--curva, ease); }
.fa-chip:hover { border-color: var(--laton, #A9812E); color: var(--fa-enlace); transform: translateY(-1px); }
.fa-chip:active { transform: scale(.98); }
.fa-sugerencias .fa-chip { animation: fa-sube .5s var(--curva, ease) both; }
.fa-sugerencias .fa-chip:nth-child(1) { animation-delay: .28s; } .fa-sugerencias .fa-chip:nth-child(2) { animation-delay: .34s; }
.fa-sugerencias .fa-chip:nth-child(3) { animation-delay: .40s; } .fa-sugerencias .fa-chip:nth-child(4) { animation-delay: .46s; }
@keyframes fa-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fa-msg { animation: fa-sube .32s var(--curva, ease) both; }
/* ── LAS BURBUJAS · v592 (Esteban: «que parezca mensaje»; las del visitante en latón, las de
   FedatarIA en ese azul). Latón con tinta azul noche encima: el blanco sobre #A9812E no llega al
   contraste mínimo para leer (3,5:1); el azul noche sí (5:1). ────────────────────────────── */
.fa-msg.fa-usuario { align-self: flex-end; max-width: 84%; background: linear-gradient(180deg, #B48C37, var(--laton, #A9812E)); color: var(--hondo, #0E192E);
  padding: 10px 15px; border-radius: 18px 18px 6px 18px; font-size: 15px; line-height: 1.5; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.45); }
.fa-msg.fa-asistente { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.fa-mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--brillo, #D9B871); background: var(--hondo, #0E192E); box-shadow: inset 0 0 0 1px rgba(217,184,113,.55); margin-top: 1px; }
.fa-mini svg { width: 12px; height: 12px; }
.fa-cuerpo { font-size: 15px; line-height: 1.62; min-width: 0; overflow-wrap: anywhere; color: var(--fa-texto); }
.fa-burbuja { width: fit-content; max-width: 100%; background: var(--tinta, #1B2A4A); color: #F7F3E6; padding: 11px 15px;
  border-radius: 18px 18px 18px 6px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.fa-burbuja strong { color: #FFFFFF; }
.fa-cuerpo p { margin: 0 0 .7em; } .fa-cuerpo p:last-child { margin-bottom: 0; }
.fa-cuerpo ul, .fa-cuerpo ol { margin: 0 0 .7em; padding-left: 1.15em; } .fa-cuerpo li { margin: .2em 0; }
.fa-cuerpo li::marker { color: var(--laton, #A9812E); }
.fa-burbuja li::marker { color: var(--brillo, #D9B871); }
.fa-cuerpo strong { font-weight: 600; }
.fa-cuerpo a { color: var(--fa-enlace); text-underline-offset: 3px; }
.fa-burbuja a { color: var(--brillo, #D9B871); }
.fa-cuerpo .fa-t { opacity: 0; filter: blur(3px); transition: opacity .38s var(--curva, ease), filter .38s var(--curva, ease); }
.fa-cuerpo .fa-t.fa-v { opacity: 1; filter: none; }
.fa-cursor { display: inline-block; width: 7px; height: 1.05em; vertical-align: -.16em; margin-left: 2px; border-radius: 2px; background: var(--brillo, #D9B871); animation: fa-cursor 1s ease-in-out infinite; }
@keyframes fa-cursor { 50% { opacity: .25; } }
.fa-pensando { display: flex; gap: 5px; padding: 6px 2px; }
.fa-pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--brillo, #D9B871); animation: fa-punto 1.1s var(--curva, ease) infinite; }
.fa-pensando span:nth-child(2) { animation-delay: .15s; } .fa-pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes fa-punto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fa-pie-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; animation: fa-sube .4s var(--curva, ease) both; }
.fa-copiar { height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--fa-suave); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fa-copiar:hover { border-color: var(--fa-linea); color: var(--fa-texto); }
.fa-copiar svg { width: 14px; height: 14px; }
.fa-nota { font-size: 12.5px; color: var(--fa-suave); font-style: italic; }

/* ── Tarjetas: contacto y error ──────────────────────────────────────────── */
.fa-tarjeta { margin-top: 12px; background: var(--fa-tarjeta); border: 1px solid var(--fa-linea); border-radius: 16px; padding: 16px; animation: fa-sube .45s var(--curva, ease) both; }
.fa-tarjeta h4 { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 16.5px; margin: 0 0 4px; color: var(--fa-texto); }
.fa-tarjeta p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--fa-suave); }
.fa-campo { display: block; margin-bottom: 10px; }
.fa-campo span { display: block; font-size: 12.5px; font-weight: 500; color: var(--fa-suave); margin-bottom: 5px; }
.fa-campo input { width: 100%; height: 42px; border: 1px solid var(--fa-linea); border-radius: 11px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--fa-fondo); color: var(--fa-texto); transition: border-color .2s, box-shadow .2s; }
.fa-campo input:focus { outline: none; border-color: var(--laton, #A9812E); box-shadow: 0 0 0 3px rgba(169,129,46,.18); }
.fa-campo input[aria-invalid="true"] { border-color: #B4452F; }
.fa-boton { width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--hondo, #0E192E); color: #F7F3E6; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: transform .25s var(--curva, ease), background .2s; }
.fa-boton:hover { background: var(--tinta, #1B2A4A); transform: translateY(-1px); }
.fa-boton:disabled { opacity: .6; cursor: default; transform: none; }
.fa-legal { margin: 10px 0 0 !important; font-size: 12px !important; }
.fa-legal a { color: var(--fa-enlace); }
.fa-hecho { display: flex; gap: 12px; align-items: flex-start; }
.fa-hecho .fa-ok { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--hondo, #0E192E); color: var(--brillo, #D9B871); display: grid; place-items: center; }
.fa-hecho .fa-ok path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: fa-traza .6s var(--curva, ease) .1s forwards; }
@keyframes fa-traza { to { stroke-dashoffset: 0; } }
.fa-error { border-left: 3px solid var(--laton, #A9812E); }
.fa-error .fa-boton { width: auto; padding: 0 18px; }

.fa-bajar { position: absolute; left: 50%; bottom: 92px; z-index: 2; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--hondo, #0E192E); color: #F7F3E6; font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .25s var(--curva, ease), transform .35s var(--curva, ease); }
.fa-bajar[data-visible="si"] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fa-bajar svg { width: 15px; height: 15px; }

/* ── El redactor ─────────────────────────────────────────────────────────── */
.fa-redactor { position: relative; padding: 10px 14px 12px; background: linear-gradient(to top, var(--fa-fondo) 70%, transparent); }
.fa-caja { position: relative; border: 1px solid var(--fa-linea); border-radius: 18px; background: var(--fa-tarjeta); transition: border-color .2s, box-shadow .2s; }
.fa-caja:focus-within { border-color: var(--laton, #A9812E); box-shadow: 0 0 0 3px rgba(169,129,46,.16); }
.fa-caja textarea { display: block; width: 100%; min-height: 48px; max-height: 132px; resize: none; border: 0; outline: none; background: transparent; color: var(--fa-texto);
  padding: 13px 54px 13px 15px; font: inherit; font-size: 15px; line-height: 1.45; }
.fa-caja textarea::placeholder { color: var(--fa-suave); opacity: .85; }
.fa-enviar { position: absolute; right: 7px; bottom: 7px; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--laton, #A9812E); color: #fff; transition: transform .3s var(--curva, ease), background .2s; }
.fa-enviar:hover { transform: translateY(-1px); background: #b98f36; }
.fa-enviar:disabled { background: var(--fa-linea); color: var(--fa-suave); cursor: default; transform: none; }
.fa-enviar svg { width: 18px; height: 18px; }
.fa-enviar[data-modo="parar"] { background: var(--hondo, #0E192E); color: var(--brillo, #D9B871); }
.fa-enviar .fa-parar-i { display: none; } .fa-enviar[data-modo="parar"] .fa-flecha-i { display: none; } .fa-enviar[data-modo="parar"] .fa-parar-i { display: block; }
.fa-contador { position: absolute; right: 52px; bottom: 14px; font-size: 11.5px; color: var(--fa-suave); opacity: 0; transition: opacity .2s; }
.fa-contador[data-visible="si"] { opacity: 1; }
.fa-aviso-pie { margin: 8px 4px 0; font-size: 11.5px; line-height: 1.4; color: var(--fa-suave); text-align: center; }
.fa-aviso-pie a { color: var(--fa-suave); }

/* ── Teléfono: pantalla completa, el teclado no tapa el cuadro ──────────── */
@media (max-width: 560px) {
  .fa { --fa-lado: 18px; }
  .fa-aviso { display: none; }
  .fa-panel { inset: 0; right: 0; bottom: 0; width: 100%; height: var(--fa-alto-visible, 100%); border-radius: 0;
    transform: translateY(100%); clip-path: none; transform-origin: center bottom; }
  .fa[data-abierto="si"] .fa-panel { transform: none; clip-path: none; transition: opacity .2s ease, transform .5s var(--curva, ease), visibility 0s; }
  .fa-cabecera { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .fa-redactor { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .fa[data-abierto="si"] .fa-lanzador { opacity: 0; pointer-events: none; }
  .fa-caja textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-panel, .fa[data-abierto="si"] .fa-panel { transform: none !important; clip-path: none !important; transition: opacity .15s ease, visibility 0s !important; }
  .fa-msg, .fa-tarjeta, .fa-bienvenida, .fa-sugerencias .fa-chip, .fa-pie-msg, .fa-lanzador { animation: none !important; }
  .fa-cuerpo .fa-t { transition: none; filter: none; }
  .fa-estado i, .fa-cursor, .fa[data-latido="si"] .fa-lanzador::after { animation: none !important; }
}
@media print { .fa { display: none !important; } }