/* ===== caja.css · Yanapaq, asistente de la Caja de Herramientas STEAM =====
   Estilo del asistente. Cada página lo enlaza junto con caja.js.
   Colores y fuentes en variables --yana-*: cambiar la paleta (p. ej. marca UNICEF) es editar :root.
   Decisión de marca (P7, 30-09-2026): Yanapaq conserva su paleta violeta como identidad propia del asistente;
   es una excepción documentada a la paleta UNICEF del sitio. No usa azul UNICEF sobre blanco, y todos sus
   textos cumplen contraste AA (auditoría, fase 5). */
:root{
  --yana-texto-campo:#1F2937;  /* texto del campo */
  --yana-texto:#374151;  /* texto de las respuestas */
  --yana-punto:#5EEAD4;  /* punto de estado */
  --yana-texto-suave:#6B7280;  /* pie del panel */
  --yana-estado:#C4B5FD;  /* texto de estado en la cabecera */
  --yana-borde-campo:#E5E0D6;  /* borde del campo */
  --yana-borde:#ECE7DF;  /* borde del panel */
  --yana-borde-burbuja:#EDE7DC;  /* borde de la burbuja */
  --yana-separador:#F0EDE6;  /* líneas separadoras */
  --yana-blanco:#fff;
  --yana-primario:var(--c-violet, #7C3AED);
  --yana-primario-oscuro:var(--c-purple, #5B21B6);
  --yana-cabecera:var(--c-indigo, #1E1B4B);
  --yana-fondo:var(--c-sand, #FBF3E6);
  --yana-fuente:var(--font-body, system-ui, sans-serif);
  --yana-fuente-titulo:var(--font-display, var(--yana-fuente));
  --yana-fuente-mono:var(--font-mono, ui-monospace, monospace);
  --yana-ease:var(--ease, cubic-bezier(.2,.7,.2,1));
}
.yana-launcher{border:none; font:inherit; text-align:left; position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; background:linear-gradient(125deg,var(--yana-primario),var(--yana-primario-oscuro)); color:var(--yana-blanco); border-radius:50px; cursor:pointer; box-shadow:0 12px 30px -8px rgba(91,33,182,.6); transition:transform .25s var(--yana-ease),box-shadow .25s}
.yana-launcher:hover{transform:translateY(-3px); box-shadow:0 16px 38px -8px rgba(91,33,182,.72)}
.yana-launcher:focus-visible,.yana-chip:focus-visible,.yana-send:focus-visible{outline:3px solid var(--yana-cabecera); outline-offset:3px; box-shadow:0 0 0 3px var(--yana-blanco)}
.yana-close:focus-visible{outline:3px solid currentColor; outline-offset:2px}
.yana-input input:focus-visible{outline:2px solid var(--yana-primario); outline-offset:2px}
.yana-launcher .yl-av{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:none}
.yana-launcher .yl-av svg{width:30px; height:30px}
.yana-launch-label{font-family:var(--yana-fuente); font-weight:600; font-size:14px; white-space:nowrap}
.yana-panel{position:fixed; bottom:92px; right:22px; z-index:9999; width:372px; max-width:calc(100vw - 44px); height:524px; max-height:calc(100vh - 130px); background:var(--yana-blanco); border-radius:20px; overflow:hidden; display:none; flex-direction:column; box-shadow:0 30px 70px -24px rgba(30,27,75,.6); border:1.5px solid var(--yana-borde)}
.yana-panel.open{display:flex; animation:yanaPanelIn .3s var(--yana-ease)}
@keyframes yanaPanelIn{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}
.yana-head{display:flex; align-items:center; gap:12px; padding:15px 18px; background:linear-gradient(120deg,var(--yana-cabecera),var(--yana-primario-oscuro)); color:var(--yana-blanco)}
.yana-avatar{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex:none}
.yana-avatar svg{width:36px; height:36px}
.yana-id{flex:1}
.yana-name{font-family:var(--yana-fuente-titulo); font-weight:700; font-size:1.12rem; line-height:1}
.yana-status{font-family:var(--yana-fuente-mono); font-size:11px; color:var(--yana-estado); display:flex; align-items:center; gap:6px; margin-top:4px}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--yana-punto); animation:yanaPulse 2s infinite}
@keyframes yanaPulse{0%{box-shadow:0 0 0 0 rgba(94,234,212,.6)}70%{box-shadow:0 0 0 6px rgba(94,234,212,0)}100%{box-shadow:0 0 0 0 rgba(94,234,212,0)}}
.yana-close{background:rgba(255,255,255,.14); border:none; color:var(--yana-blanco); width:30px; height:30px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; font-size:18px; line-height:1}
.yana-close:hover{background:rgba(255,255,255,.28)}
.yana-body{flex:1; overflow-y:auto; padding:18px; background:var(--yana-fondo); display:flex; flex-direction:column; gap:11px}
.yana-msg{display:flex; gap:8px; max-width:92%; animation:yanaMsgIn .35s var(--yana-ease)}
.yana-msg.bot{align-self:flex-start}
.yana-msg.user{align-self:flex-end; flex-direction:row-reverse}
.yana-mini{width:26px; height:26px; border-radius:50%; background:rgba(124,58,237,.15); flex:none; display:flex; align-items:center; justify-content:center; margin-top:2px}
.yana-mini svg{width:17px; height:17px}
.yana-bubble{padding:11px 14px; border-radius:14px; font-size:.92rem; line-height:1.5}
.yana-msg.bot .yana-bubble{background:var(--yana-blanco); border:1.5px solid var(--yana-borde-burbuja); color:var(--yana-texto); border-top-left-radius:4px}
.yana-msg.user .yana-bubble{background:var(--yana-primario); color:var(--yana-blanco); border-top-right-radius:4px}
.yana-bubble a{font-weight:600; text-decoration:underline}
.yana-msg.bot .yana-bubble a{color:var(--yana-primario)}
@keyframes yanaMsgIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.yana-quick{display:flex; flex-wrap:wrap; flex:none; gap:7px; padding:10px 14px; max-height:94px; overflow-y:auto; background:var(--yana-blanco); border-top:1.5px solid var(--yana-separador)}
.yana-chip{font-family:var(--yana-fuente); font-weight:500; font-size:12.5px; white-space:nowrap; cursor:pointer; padding:7px 13px; border-radius:50px; border:1.6px solid var(--yana-primario); color:var(--yana-primario); background:transparent; transition:all .2s var(--yana-ease); flex:none}
.yana-chip:hover{background:var(--yana-primario); color:var(--yana-blanco)}
.yana-input{display:flex; gap:8px; padding:12px 14px; background:var(--yana-blanco); border-top:1.5px solid var(--yana-separador)}
.yana-input input{flex:1; font-family:var(--yana-fuente); font-size:14px; padding:11px 15px; border:1.5px solid var(--yana-borde-campo); border-radius:50px; outline:none; color:var(--yana-texto-campo); background:var(--yana-fondo)}
.yana-input input:focus{border-color:var(--yana-primario)}
.yana-send{width:42px; height:42px; border-radius:50%; border:none; background:var(--yana-primario); color:var(--yana-blanco); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .2s var(--yana-ease)}
.yana-send:hover{transform:scale(1.06)}
.yana-foot{padding:9px 14px 12px; font-family:var(--yana-fuente-mono); font-size:11px; color:var(--yana-texto-suave); text-align:center; background:var(--yana-blanco)}
@media (max-width:480px){.yana-panel{right:12px; left:12px; width:auto; bottom:82px; height:calc(100vh - 116px)}.yana-launcher{bottom:16px; right:16px}.yana-launch-label{display:none}}
.yana-launcher.compacto{padding:10px}
.yana-launcher.compacto .yana-launch-label{display:none}
footer::after{content:""; display:block; height:72px}
@media print{.yana-launcher,.yana-panel{display:none!important} footer::after{display:none}}
@media (prefers-reduced-motion:reduce){.yana-panel.open,.yana-msg,.dot-live{animation:none}.yana-launcher,.yana-chip,.yana-send{transition:none}.yana-launcher:hover,.yana-send:hover{transform:none}}