/* Jarvis (encargo #141): botón flotante y hoja de voz con el orbe del mando. Claro y oscuro por el sistema (como el
   monitor de agentes); los únicos hex de Jarvis viven aquí, en los tokens --jv-*. Texto ≥ 14 px, toques ≥ 44 px. */
:root{
  --jv-fondo:#F4F1EA;--jv-fondo-2:#E7E1D4;--jv-tinta:#16151A;--jv-tinta-2:#5B5862;--jv-linea:#DCD5C7;
  --jv-burbuja:#FFFFFF;--jv-yo:#0B1A2E;--jv-yo-tinta:#F4F1EA;
  --jv-o1:#0B1A2E;--jv-o2:#1E3A66;--jv-o3:#7DD3FC;--jv-o4:#FFFFFF;--jv-halo:#7DD3FC;--jv-orbita:rgba(22,41,74,.26);--jv-piensa:#A78BFA;--jv-habla:#FCD9A8;
  --jv-ctl:#0B1A2E;--jv-ctl-tinta:#F4F1EA;--jv-escucha:#BE123C;--jv-escucha-t:#FFFFFF;--jv-prop:#FFFDF8;--jv-prop-b:#0B1A2E;--jv-prop-bt:#FFFFFF;
  /* Foco: el cielo daba ~1.5:1 sobre el papel; en claro va en marino (≥ 3:1), en oscuro sigue el cielo. */
  --jv-foco:#0B1A2E;
  /* Botón flotante (igual en los dos temas: es un orbe oscuro sobre cualquier página). */
  --jv-fab:#0B1A2E;--jv-fab-tinta:#FFFFFF;--jv-fab-luz:#7DD3FC;--jv-fab-medio:#1E3A66;--jv-fab-foco:#0B1A2E;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --jv-fondo:#010B1E;--jv-fondo-2:#0A2142;--jv-tinta:#EAF3FF;--jv-tinta-2:#A8D4FF;--jv-linea:rgba(168,212,255,.18);
  --jv-burbuja:rgba(234,243,255,.07);--jv-yo:#1F6AE0;--jv-yo-tinta:#FFFFFF;
  --jv-o1:#06183A;--jv-o2:#1F6AE0;--jv-o3:#70BCFF;--jv-o4:#EAF3FF;--jv-halo:#1F6AE0;--jv-orbita:rgba(112,188,255,.30);--jv-piensa:#B4A6FF;--jv-habla:#FFE3B8;
  --jv-ctl:#EAF3FF;--jv-ctl-tinta:#010B1E;--jv-escucha:#FB7185;--jv-escucha-t:#010B1E;--jv-prop:rgba(234,243,255,.06);--jv-prop-b:#70BCFF;--jv-prop-bt:#010B1E;--jv-foco:#70BCFF;--jv-fab-foco:#70BCFF}}
:root[data-theme="dark"]{
  --jv-fondo:#010B1E;--jv-fondo-2:#0A2142;--jv-tinta:#EAF3FF;--jv-tinta-2:#A8D4FF;--jv-linea:rgba(168,212,255,.18);
  --jv-burbuja:rgba(234,243,255,.07);--jv-yo:#1F6AE0;--jv-yo-tinta:#FFFFFF;
  --jv-o1:#06183A;--jv-o2:#1F6AE0;--jv-o3:#70BCFF;--jv-o4:#EAF3FF;--jv-halo:#1F6AE0;--jv-orbita:rgba(112,188,255,.30);--jv-piensa:#B4A6FF;--jv-habla:#FFE3B8;
  --jv-ctl:#EAF3FF;--jv-ctl-tinta:#010B1E;--jv-escucha:#FB7185;--jv-escucha-t:#010B1E;--jv-prop:rgba(234,243,255,.06);--jv-prop-b:#70BCFF;--jv-prop-bt:#010B1E;--jv-foco:#70BCFF;--jv-fab-foco:#70BCFF}

/* Botón flotante: un orbe quieto (sin animación: no cuesta nada en reposo) con el micrófono. Sobre el «Nuevo» de cada
   página cuando lo hay; nunca en la Presentación. */
.jv-fab{position:fixed;z-index:22;right:max(28px,calc(env(safe-area-inset-right) + 16px));bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));
  width:60px;height:60px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--jv-fab-tinta);overflow:hidden;
  background:var(--jv-fab);box-shadow:0 14px 30px -10px rgba(11,26,46,.6),0 2px 6px rgba(11,26,46,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.jv-fab-orbe{position:absolute;inset:0;border-radius:50%;background:radial-gradient(60% 60% at 34% 30%,rgba(255,255,255,.55) 0%,rgba(125,211,252,.0) 60%),radial-gradient(90% 90% at 40% 35%,var(--jv-fab-luz) 0%,var(--jv-fab-medio) 58%,var(--jv-fab) 100%)}
.jv-fab svg{position:relative;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.jv-fab:hover{transform:translateY(-2px)}
.jv-fab:active{transform:scale(.95)}
.jv-fab:focus-visible{outline:3px solid var(--jv-fab-foco);outline-offset:3px}
body:has(#home:not([hidden]) #newBtn) .jv-fab{bottom:calc(max(28px,calc(env(safe-area-inset-bottom) + 16px)) + 74px)}
.app.presenting .jv-fab,.app[hidden] .jv-fab{display:none}
@media (max-width:700px){
  .jv-fab{width:56px;height:56px;right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
  body:has(#home:not([hidden]) #newBtn) .jv-fab{bottom:calc(max(18px,calc(env(safe-area-inset-bottom) + 12px)) + 68px)}
  /* Con un cajón abierto (la barra del mando o el panel del proyecto, que llega a 300 px) el orbe tapaba su última
     columna, p. ej. «Documentos» de la fila rápida a 320 px: se esconde mientras el cajón está abierto. */
  .app.navopen .jv-fab,.app:has(.vit.drawer) .jv-fab,.app:has(.cer-host.panel) .jv-fab,.app:has(.c3-panel:not([hidden])) .jv-fab{display:none}
}

@media (max-height:500px){
  .jv-fab{width:56px;height:56px;right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
  html body:has(#home:not([hidden]) #newBtn) .jv-fab,html body:has(#agencia:not([hidden]) #agcNuevo:not([hidden])) .jv-fab{
    bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));right:calc(max(18px,calc(env(safe-area-inset-right) + 12px)) + 68px)}
}
/* La hoja: pantalla completa en celular (sube desde abajo), panel centrado en computadora. */
dialog.jv{position:fixed;inset:0;margin:0;width:100%;max-width:100%;height:100vh;height:var(--jv-h,100dvh);max-height:none;border:0;padding:0;
  background:radial-gradient(120% 70% at 50% 18%,var(--jv-fondo-2) 0%,var(--jv-fondo) 62%);color:var(--jv-tinta);font-family:var(--sans,'Figtree',system-ui,sans-serif);overscroll-behavior:contain}
dialog.jv::backdrop{background:rgba(3,6,10,.55)}
dialog.jv[open]{animation:jvSube .42s cubic-bezier(.34,1.3,.64,1)}
@keyframes jvSube{from{transform:translateY(32px);opacity:0}}
@media (min-width:760px){
  dialog.jv{inset:0;margin:auto;width:min(560px,92vw);height:min(820px,92dvh);border-radius:28px;box-shadow:0 40px 90px -30px rgba(3,6,10,.55)}
  dialog.jv::backdrop{backdrop-filter:blur(4px)}
}
.jv-in{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
/* Con conversación, el orbe se encoge y gana espacio lo que se dice. */
dialog.jv.con-conv .jv-in{grid-template-rows:auto minmax(96px,20dvh) minmax(0,1fr) auto auto}
@media (min-width:760px){dialog.jv.con-conv .jv-in{grid-template-rows:auto minmax(120px,200px) minmax(0,1fr) auto auto}}

/* Cabecera con el color de toda hoja del mando (ESTANDAR §4c, tokens --dlg-cab-* de mando.css): sale del relleno de
   .jv-in para cubrir de borde a borde, con la zona segura de arriba dentro de la banda. */
.jv-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
  margin:calc(-1 * max(8px,env(safe-area-inset-top))) calc(-1 * max(12px,env(safe-area-inset-right))) 0 calc(-1 * max(12px,env(safe-area-inset-left)));
  padding:calc(max(8px,env(safe-area-inset-top)) + 6px) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));
  background:var(--dlg-cab-bg);color:var(--dlg-cab-tinta);box-shadow:inset 0 -1px 0 var(--dlg-cab-filo)}
.jv-head .jv-ib{border-color:var(--dlg-cab-linea);background:var(--dlg-cab-boton);color:var(--dlg-cab-tinta);border-radius:50%}
.jv-head .jv-ib:hover{background:var(--dlg-cab-boton-hover)}
.jv-head .jv-ib:focus-visible{outline-color:var(--dlg-cab-foco)}
.jv-tit{text-align:center;min-width:0}
.jv-tit h2:focus{outline:none}
.jv-tit h2{font-family:var(--display,'Bricolage Grotesque',system-ui,sans-serif);font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;margin:0}
.jv-ib{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--jv-linea);background:transparent;color:var(--jv-tinta);transition:background .18s,opacity .18s}
.jv-ib:hover{background:var(--jv-burbuja)}
.jv-ib:disabled{visibility:hidden}
.jv-ib:focus-visible,.jv-mic:focus-visible,.jv-enviar:focus-visible,.jv-prop-b:focus-visible{outline:3px solid var(--jv-foco);outline-offset:2px}

.jv-escena{position:relative;min-height:0;display:grid;place-items:center}
.jv-escena canvas{width:min(100%,420px);height:100%;max-height:min(100%,420px);min-height:0;aspect-ratio:1/1;display:block}
.jv-estado{position:absolute;left:0;right:0;bottom:2px;margin:0;text-align:center;font-size:.9375rem;font-weight:600;color:var(--jv-tinta-2);padding:0 16px}
dialog.jv[data-estado="escuchando"] .jv-estado{color:var(--jv-escucha)}
dialog.jv.con-conv[data-estado="reposo"] .jv-estado{visibility:hidden}
dialog.jv[data-estado="escuchando"] .jv-estado::before{content:'';display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--jv-escucha);vertical-align:1px}

.jv-conv{min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:10px 4px 6px;-webkit-overflow-scrolling:touch}
.jv-conv:empty{display:none}
.jv-msg{max-width:88%;padding:11px 14px;border-radius:18px;font-size:1rem;line-height:1.5;animation:jvMsg .24s cubic-bezier(.34,1.56,.64,1)}
@keyframes jvMsg{from{opacity:0;transform:translateY(8px) scale(.98)}}
.jv-msg p{margin:0}
.jv-yo{align-self:flex-end;background:var(--jv-yo);color:var(--jv-yo-tinta);border-bottom-right-radius:6px}
.jv-el{align-self:flex-start;background:var(--jv-burbuja);border:1px solid var(--jv-linea);border-bottom-left-radius:6px}
.jv-fuentes{margin-top:8px!important;font-size:.875rem;color:var(--jv-tinta-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}


.jv-prop{scroll-margin-bottom:12px;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--jv-prop);border:1px solid var(--jv-linea)}
.jv-prop p{margin:0}
.jv-prop-k{font-size:.875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--jv-tinta-2)}
.jv-prop-t{font-weight:700;margin-top:2px!important}
.jv-prop-d{font-size:.9375rem;color:var(--jv-tinta-2);margin-top:4px!important}
.jv-prop-acc{margin-top:10px}
.jv-prop-b{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--jv-prop-b);color:var(--jv-prop-bt);font-weight:700;font-size:.9375rem}
.jv-prop-b:disabled{opacity:.45;cursor:default}
.jv-prop-n{font-size:.875rem;color:var(--jv-tinta-2);margin-top:6px!important}
.jv-prop-n:empty{display:none}

.jv-form{display:flex;gap:8px;padding:8px 0 4px}
.jv-form input{flex:1;min-width:0;min-height:48px;border-radius:999px;padding:0 18px;border:1px solid var(--jv-linea);background:var(--jv-burbuja);color:var(--jv-tinta);font-size:16px}
.jv-form input:focus{outline:none;border-color:var(--jv-foco);box-shadow:0 0 0 1px var(--jv-foco)}
.jv-enviar{min-height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--jv-ctl);color:var(--jv-ctl-tinta);font-weight:700}
.jv-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.jv-ctl{display:flex;align-items:center;justify-content:center;gap:28px;padding:10px 0 4px}
.jv-mic{position:relative;width:78px;height:78px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--jv-ctl);color:var(--jv-ctl-tinta);
  box-shadow:0 14px 30px -12px rgba(3,6,10,.55);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s}
.jv-mic:active{transform:scale(.94)}
.jv-mic:disabled{opacity:.5}
.jv-mic svg{width:30px;height:30px}
.jv-mic-anillo{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--jv-escucha);opacity:0;transition:opacity .2s}
.jv-mic-alto{position:absolute;width:24px;height:24px;border-radius:6px;background:var(--jv-ctl-tinta);opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
dialog.jv[data-estado="escuchando"] .jv-mic{background:var(--jv-escucha);color:var(--jv-escucha-t)}
dialog.jv[data-estado="escuchando"] .jv-mic svg{opacity:0}
dialog.jv[data-estado="escuchando"] .jv-mic-alto{opacity:1;transform:none;background:var(--jv-escucha-t)}
dialog.jv[data-estado="escuchando"] .jv-mic-anillo{opacity:.9;animation:jvLate 1.4s steps(7) infinite}
@keyframes jvLate{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.28);opacity:0}}
/* Celular en horizontal: el orbe a la izquierda y la conversación a la derecha. */
@media (max-height:500px){
  dialog.jv{inset:0;margin:0;width:100%;max-width:100%;height:100vh;height:var(--jv-h,100dvh);border-radius:0;box-shadow:none}
  .jv-in,dialog.jv.con-conv .jv-in{grid-template-columns:minmax(140px,34%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto}
  .jv-head,.jv-form,.jv-ctl{grid-column:1/-1}
  .jv-escena{grid-row:2;grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
  .jv-escena canvas{flex:1;min-height:0;height:auto}
  .jv-estado{position:static;padding:0 4px}
  .jv-conv{grid-row:2;grid-column:2}
  .jv-ctl{padding-top:4px}
  .jv-mic{width:64px;height:64px}
  /* Con el teclado abierto (escribiendo) el orbe se va y la conversación toma todo el ancho. */
  dialog.jv:has(.jv-form input:focus) .jv-escena{display:none}
  dialog.jv:has(.jv-form input:focus) .jv-conv{grid-column:1/-1}
  dialog.jv:has(.jv-form input:focus) .jv-ctl{display:none}
}
@media (prefers-reduced-motion:reduce){
  dialog.jv[open],.jv-msg{animation:none}
  dialog.jv[data-estado="escuchando"] .jv-mic-anillo{animation:none;opacity:.9}
  .jv-fab,.jv-mic{transition:none}
}
