/* La pestaña Jarvis del panel lateral: la conversación arriba, el holograma al centro (siempre) y la actividad abajo.
   Solo tokens del tema; el color de Jarvis es identidad (--jarvis, --jarvis-rgb, igual en todos los temas). La
   conversación y la actividad se ocultan con [hidden] y la disposición (data-disposicion) deja crecer al holograma. En
   un panel angosto (< 600 px) la actividad va en una columna; ampliado, en dos. */
#plPanel-jarvis{gap:8px;padding:10px 14px 12px;box-sizing:border-box;overflow:hidden}
.jt-cab{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jt-cab h2{margin:0;font-size:13px;font-weight:800;color:var(--jarvis);letter-spacing:.18em;text-transform:uppercase}
.jt-cab .jt-botones{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
/* Con qué IA trabaja («Con Codex», «Con Claude · siempre»): se fija por voz o en Configuración → Jarvis */
.jt-ia{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--jarvis-rgb),.4);background:rgba(var(--jarvis-rgb),.12);color:var(--jarvis);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.jt-ia::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--jarvis);box-shadow:0 0 6px rgba(var(--jarvis-rgb),.7)}
.jt-cab button{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.jt-cab button svg{width:13px;height:13px}
.jt-cab button:hover{border-color:rgba(var(--jarvis-rgb),.45)}
.jt-cab button[aria-pressed="true"]{border-color:rgba(var(--jarvis-rgb),.55);background:rgba(var(--jarvis-rgb),.14);color:var(--text-strong)}
.jt-cab button:focus-visible{outline:2px solid var(--jarvis);outline-offset:2px}

/* Conversación */
#jtConversacion{flex:1 1 0;min-height:90px;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;padding:2px;border-radius:12px;scrollbar-width:thin}
#jtConversacion[hidden],#jtActividad[hidden]{display:none}
.jt-hilo{display:flex;flex-direction:column;gap:8px;width:100%}
.jt-turno{padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--panel-rgb),.7);font-size:13px;line-height:1.5;color:var(--text)}
.jt-turno.persona{align-self:flex-end;max-width:86%;border-radius:14px 14px 4px 14px;background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.3)}
.jt-turno.jarvis{align-self:flex-start;max-width:92%;border-radius:14px 14px 14px 4px;border-color:rgba(var(--jarvis-rgb),.3)}
.jt-turno header{display:flex;align-items:baseline;gap:8px;margin-bottom:3px;font-size:11px;color:var(--muted)}
.jt-turno header b{color:var(--text-strong)}
.jt-turno.jarvis header b{color:var(--jarvis)}
.jt-turno header time{margin-left:auto;font-variant-numeric:tabular-nums}
.jt-motor{padding:1px 7px;border-radius:999px;background:rgba(var(--jarvis-rgb),.12);color:var(--jarvis);font-weight:700}
.jt-turno p{margin:0}
.jt-turno details{margin-top:6px;font-size:12.5px}
.jt-turno summary{cursor:pointer;color:var(--muted)}
.jt-turno pre{margin:6px 0 0;white-space:pre-wrap;font:inherit;color:var(--text)}
.jt-preparadas{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.jt-leido{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0}
.jt-chip{padding:2px 9px;border:1px solid rgba(var(--jarvis-rgb),.4);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:11.5px;cursor:pointer}
.jt-chip:hover{background:rgba(var(--jarvis-rgb),.12)}
.jt-sistema{align-self:center;margin:0;padding:3px 10px;border-radius:999px;font-size:11.5px;color:var(--muted);background:rgba(var(--fg-rgb),.05)}
.jt-vacio{margin:10px 0;color:var(--muted);font-size:12.5px;text-align:center}
.jt-actual{margin:8px 0 0;width:100%}
.jt-actual:empty{display:none}
.jt-actual .jv-oido{margin:6px 0 4px;color:var(--muted);font-style:italic;text-align:right}
.jt-actual .jv-dice{margin:0;padding:8px 12px;border-radius:14px 14px 14px 4px;border:1px solid rgba(var(--jarvis-rgb),.3);background:rgba(var(--panel-rgb),.7);color:var(--text-strong);font-size:13.5px}
.jt-actual .jv-detalle{margin:6px 0 0;padding:0 12px;white-space:pre-wrap;color:var(--text);font-size:12.5px}
.jt-actual .jv-tarjetas{display:grid;gap:8px;margin-top:8px}

/* El sol: siempre a la vista; crece con lo que se oculta. El lienzo pinta su propio escenario oscuro. */
#jtHolograma{flex:0 0 clamp(250px,46vh,480px);display:grid;place-items:center;position:relative;min-height:0;margin:0 -14px;container-type:size}
/* un cuadrado que cabe siempre en su lugar (no crece con la resolución del lienzo) */
#jtHolograma canvas{width:min(100cqw,100cqh);height:min(100cqw,100cqh);display:block;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}
#jtHolograma canvas:focus-visible{outline:1px solid rgba(var(--jarvis-luz-rgb),.6);outline-offset:-8px;border-radius:50%}
.jt-hud{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);margin:0;padding:3px 12px;border-radius:999px;
  border:1px solid rgba(var(--jarvis-luz-rgb),.32);background:rgba(var(--jarvis-vacio-rgb),.72);color:rgb(var(--jarvis-luz-rgb));
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  text-shadow:0 0 8px rgba(var(--jarvis-luz-rgb),.55);transition:color .3s,border-color .3s}
.jt-hud:empty{display:none}
.jt-hud[data-estado="pensando"],.jt-hud[data-estado="hablando"],.jt-hud[data-estado="despierto"]{color:rgb(var(--jarvis-nucleo-rgb));border-color:rgba(var(--jarvis-luz-rgb),.6)}
.jt-hud[data-estado="error"]{color:rgb(var(--jarvis-brasa-rgb));border-color:rgba(var(--jarvis-brasa-rgb),.5);text-shadow:none}
#plPanel-jarvis[data-disposicion="sin-texto"] #jtHolograma,#plPanel-jarvis[data-disposicion="sin-actividad"] #jtHolograma{flex:1 1 0}
#plPanel-jarvis[data-disposicion="solo-holograma"] #jtHolograma{flex:1 1 0}

/* Actividad: una columna en el panel angosto, dos ampliado */
#jtActividad{flex:0 1 auto;max-height:34%;min-height:96px;display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(0,auto);gap:8px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.panel-lateral:not(.angosto) #jtActividad{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden}
.panel-lateral:not(.angosto) .jt-zona-act{overflow:auto}
.jt-zona-act{min-height:0;padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(var(--panel-rgb),.55)}
.jt-zona-act h4{display:flex;align-items:center;gap:8px;margin:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.jt-latido{width:7px;height:7px;border-radius:50%;background:var(--jarvis);box-shadow:0 0 8px var(--jarvis);animation:jt-latido 1.4s ease-in-out infinite}
@keyframes jt-latido{0%,100%{opacity:.35}50%{opacity:1}}
.jt-pasos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.jt-paso{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;padding:3px 7px;border-radius:8px;font-size:12px;color:var(--text)}
.jt-paso svg{width:13px;height:13px;color:var(--muted)}
.jt-paso.herramienta svg{color:var(--jarvis)}
.jt-paso.en.curso,.jt-paso.en-curso{background:rgba(var(--jarvis-rgb),.1)}
.jt-paso.error{color:var(--danger)}
.jt-paso span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jt-paso em{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.jt-detalle{color:var(--muted)}
.jt-agentes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.jt-ev{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;border-left:3px solid var(--c,var(--accent-2));background:rgba(var(--fg-rgb),.03);font-size:12px;color:var(--text);cursor:pointer}
.jt-ev:hover,.jt-ev:focus-visible{background:rgba(var(--fg-rgb),.06);outline:none}
.jt-ev svg{width:13px;height:13px;color:var(--c,var(--accent-2))}
.jt-ev span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jt-ev time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* El botón del riel: Jarvis vivo (color propio) */
.pr-btn[data-tab="jarvis"] svg{color:var(--jarvis)}
.pr-btn[data-tab="jarvis"] .pr-ind.punto{background:var(--jarvis);box-shadow:0 0 6px var(--jarvis)}
.pl-tab[data-tab="jarvis"][aria-selected="true"] svg{color:var(--jarvis)}
.pl-tab[data-tab="jarvis"] .pl-ins.punto{background:var(--jarvis);box-shadow:0 0 6px var(--jarvis)}

@media (max-width:760px){
  #plPanel-jarvis{padding:8px 12px 12px}
  #jtHolograma{flex-basis:clamp(200px,36vh,300px)}
}
@media (prefers-reduced-motion:reduce){.jt-latido{animation:none}}