/* ===========================================================================
   ARI · asistente web · edición Apple
   ---------------------------------------------------------------------------
   Un botón cápsula abajo a la derecha y una hoja translúcida que se abre con
   resorte. Nada por debajo de 13 px, campo a 16 px, blancos táctiles de 44.
   Mismos materiales que la barra de la portada: fondo blanco al 82 % con
   desenfoque, hairlines, azul #0071E3 como único acento.
   =========================================================================== */
:root{
  --ari-ink:#1D1D1F; --ari-gris:#6E6E73; --ari-blue:#0071E3; --ari-blue-2:#0077ED;
  --ari-band:#F5F5F7; --ari-hair:rgba(0,0,0,.08);
  --ari-card:#FFFFFF; --ari-hoja:rgba(255,255,255,.86); --ari-form:rgba(255,255,255,.6);
  --ari-btn:#1D1D1F; --ari-btn-tx:#FFFFFF; --ari-error:#FFF2F2; --ari-error-tx:#B3261E;
  --ari-sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.ari-btn{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:0;border-radius:980px;
  background:var(--ari-btn);color:var(--ari-btn-tx);font:600 .9375rem/1 var(--ari-sys);letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform 160ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease}
.ari-btn:active{transform:scale(.96)}
.ari-btn svg{width:18px;height:18px;flex:0 0 auto}
.ari-btn.oculto{opacity:0;pointer-events:none;transform:scale(.9)}
/* En móvil la portada tiene un botón pegado abajo: el cápsula sube encima. */
.pegado.ver ~ .ari-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

.ari{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;width:min(400px,calc(100vw - 32px));
  height:min(620px,calc(100svh - 32px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--ari-hoja);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--ari-hair);border-radius:22px;box-shadow:0 24px 64px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.06);
  color:var(--ari-ink);font-family:var(--ari-sys);transform-origin:calc(100% - 40px) 100%;
  opacity:0;transform:translateY(16px) scale(.94);pointer-events:none;visibility:hidden;
  transition:opacity 220ms ease,transform 420ms cubic-bezier(.22,1,.36,1),visibility 0s linear 420ms}
.ari.abierto{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.ari-cab{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--ari-hair)}
.ari-avatar{width:36px;height:36px;border-radius:50%;background:var(--ari-blue);color:#fff;display:grid;place-items:center;font:600 .875rem var(--ari-sys);flex:0 0 auto}
.ari-cab b{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.ari-cab small{display:block;font-size:.8125rem;color:var(--ari-gris);margin-top:1px}
.ari-cab small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#1F7A35;margin:0 5px 1px 0}
.ari-cerrar{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ari-gris);
  display:grid;place-items:center;cursor:pointer;font:400 1.5rem/1 var(--ari-sys)}
.ari-cerrar:active{background:var(--ari-band)}

.ari-lista{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px;display:flex;flex-direction:column;gap:6px;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.ari-m{max-width:84%;padding:10px 14px;border-radius:18px;font-size:.9375rem;line-height:1.45;letter-spacing:-.005em;white-space:pre-wrap;word-wrap:break-word;
  animation:ari-pop 360ms cubic-bezier(.22,1,.36,1) both}
.ari-m.bot{align-self:flex-start;background:var(--ari-band);color:var(--ari-ink);border-bottom-left-radius:6px}
.ari-m.yo{align-self:flex-end;background:var(--ari-blue);color:#fff;border-bottom-right-radius:6px}
.ari-m.bot + .ari-m.bot{border-top-left-radius:6px;margin-top:-2px}
.ari-m a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ari-m.error{background:var(--ari-error);color:var(--ari-error-tx)}
@keyframes ari-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.ari-escribe{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 14px;background:var(--ari-band);border-radius:18px;border-bottom-left-radius:6px}
.ari-escribe i{width:7px;height:7px;border-radius:50%;background:var(--ari-gris);opacity:.5;animation:ari-punto 1.1s infinite ease-in-out}
.ari-escribe i:nth-child(2){animation-delay:.15s}.ari-escribe i:nth-child(3){animation-delay:.3s}
@keyframes ari-punto{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:.9}}

.ari-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 10px}
.ari-chip{min-height:44px;padding:0 16px;border:1px solid var(--ari-hair);border-radius:980px;background:var(--ari-card);color:var(--ari-blue);
  font:500 .875rem/1.2 var(--ari-sys);cursor:pointer;transition:background-color 120ms ease,transform 120ms ease}
.ari-enlace{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:8px 0 2px;border-radius:980px;background:var(--ari-card);
  border:1px solid var(--ari-hair);color:var(--ari-blue)!important;font-weight:600;text-decoration:none!important;white-space:nowrap}
.ari-chip:active{transform:scale(.97);background:var(--ari-band)}

.ari-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ari-hair);background:var(--ari-form)}
.ari-form textarea{flex:1 1 auto;min-height:44px;max-height:120px;resize:none;border:1px solid var(--ari-hair);border-radius:22px;padding:11px 16px;
  font:400 16px/1.35 var(--ari-sys);color:var(--ari-ink);background:var(--ari-card);outline:none;transition:border-color 120ms ease,box-shadow 120ms ease}
.ari-form textarea:focus{border-color:var(--ari-blue);box-shadow:0 0 0 3px rgba(0,113,227,.18)}
.ari-enviar{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--ari-blue);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color 120ms ease,transform 120ms ease,opacity 160ms ease}
.ari-enviar:disabled{opacity:.35;cursor:default}
.ari-enviar:active:not(:disabled){transform:scale(.94)}
.ari-enviar svg{width:18px;height:18px}
.ari-pie{font-size:.75rem;color:var(--ari-gris);text-align:center;padding:0 16px 8px;line-height:1.4}

@media (hover:hover) and (pointer:fine){
  .ari-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
  .ari-chip:hover{background:var(--ari-band)}
  .ari-enviar:hover:not(:disabled){background:var(--ari-blue-2)}
  .ari-cerrar:hover{background:var(--ari-band);color:var(--ari-ink)}
}
@media (max-width:480px){
  .ari{right:0;bottom:0;width:100vw;height:min(88svh,720px);border-radius:22px 22px 0 0;border-bottom:0;transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){
  .ari,.ari-btn,.ari-m,.ari-chip,.ari-enviar{transition:none;animation:none}
  .ari-lista{scroll-behavior:auto}
  .ari-escribe i{animation:none;opacity:.7}
}
@media (prefers-reduced-transparency:reduce){
  .ari{background:var(--ari-card);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .ari{border-color:rgba(0,0,0,.4)}
  .ari-m.bot{border:1px solid rgba(0,0,0,.25)}
  .ari-chip{border-color:rgba(0,0,0,.4)}
}

/* ---------- modo oscuro: los mismos tokens, el otro juego ---------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
  --ari-ink:#F5F5F7; --ari-gris:#A1A1A6; --ari-blue:#0A84FF; --ari-blue-2:#3395FF;
  --ari-band:#2C2C2E; --ari-hair:rgba(255,255,255,.12);
  --ari-card:#1D1D1F; --ari-hoja:rgba(28,28,30,.88); --ari-form:rgba(0,0,0,.3);
  --ari-btn:#F5F5F7; --ari-btn-tx:#1D1D1F; --ari-error:#3A1A1A; --ari-error-tx:#FF9E9E;
  }
}
:root[data-tema="oscuro"]{
  --ari-ink:#F5F5F7; --ari-gris:#A1A1A6; --ari-blue:#0A84FF; --ari-blue-2:#3395FF;
  --ari-band:#2C2C2E; --ari-hair:rgba(255,255,255,.12);
  --ari-card:#1D1D1F; --ari-hoja:rgba(28,28,30,.88); --ari-form:rgba(0,0,0,.3);
  --ari-btn:#F5F5F7; --ari-btn-tx:#1D1D1F; --ari-error:#3A1A1A; --ari-error-tx:#FF9E9E;
}