/* La hoja de la app. Vivía dentro de un `<style>` de `index.html`, donde no se podía cachear
   aparte del HTML, ni leer sin abrir el documento entero, ni medir sin parsearlo (MMN-38, N5).
   El CSP no cambia: una hoja propia entra por `style-src 'self'`, y `'unsafe-inline'` sigue
   puesto por la tabla de vgplot, que inyecta su CSS en tiempo de ejecución (MMN-34). */
/* ════ Tres presets, máximamente diferenciados, 0 AI-slop ════
   editorial · papel/serif/teal+ámbar (claro, periodístico)
   neon      · casi-negro/lima+cian/Syne (oscuro, técnico)
   bricolage · duotono azul+tomate/Bricolage chunky (claro, pop) */
:root{
  --bg:#f1ece1; --ink:#16211e; --ink2:#3c4a44; --muted:#6a6355; --rule:#cabfad;
  --accent:#0F756D; --accent2:#B55308;
  --on-accent:#ffffff; --accent2-text:#a84a05; --error:#9c2f12;
  --fd:"Fraunces",Georgia,serif; --fu:"Archivo",system-ui,sans-serif; --fm:"Spline Sans Mono",monospace;
  --card-radius:0px; --card-border:1px solid var(--rule); --card-shadow:none;
}
[data-theme="neon"]{
  --bg:#0a0b10; --ink:#eef2f5; --ink2:#aab4c2; --muted:#7c8797; --rule:#1e2230;
  --accent:#b8ff3d; --accent2:#2ee6c9;
  --on-accent:#08110f; --accent2-text:#2ee6c9; --error:#ff8a6b;
  --fd:"Syne",sans-serif; --fu:"Sora",system-ui,sans-serif; --fm:"JetBrains Mono",monospace;
  --card-radius:14px; --card-border:1px solid #1e2230; --card-shadow:0 0 0 1px rgba(184,255,61,.04), 0 24px 50px -34px rgba(0,0,0,.9);
}
[data-theme="bricolage"]{
  --bg:#f6f3ec; --ink:#101010; --ink2:#33312c; --muted:#6f6a5e; --rule:#101010;
  --accent:#2440ff; --accent2:#ff4d2e;
  --on-accent:#ffffff; --accent2-text:#c93a1c; --error:#9c2f12;
  --fd:"Bricolage Grotesque",sans-serif; --fu:"Archivo",system-ui,sans-serif; --fm:"JetBrains Mono",monospace;
  --card-radius:0px; --card-border:2px solid var(--ink); --card-shadow:5px 5px 0 0 var(--ink);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--fu); -webkit-font-smoothing:antialiased;
  padding:38px clamp(18px,4.5vw,64px) 80px; min-height:100vh; position:relative; transition:background .3s ease,color .3s ease}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
[data-theme="neon"] body::before{mix-blend-mode:screen; opacity:.5}
.wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto}

/* cabecera */
header.top{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  border-bottom:2px solid var(--ink); padding-bottom:16px; flex-wrap:wrap}
.brandline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mark{height:20px; width:auto}
.mark rect{fill:var(--accent)}
.mark rect:nth-child(3){fill:var(--accent2)}
.wm{font-family:var(--fd); font-weight:600; font-size:21px; letter-spacing:-.012em; line-height:1; color:var(--ink)}
[data-theme="bricolage"] .wm{font-weight:800}
.wm .a{color:var(--accent)} .wm .b{color:var(--accent2)}
[data-theme="neon"] .wm .a{text-shadow:0 0 14px rgba(184,255,61,.5)}
.tag{font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-left:8px; border-left:1px solid var(--rule)}
/* El titular es el nombre del fichero, que puede ser largo y venir sin espacios: a 390 px eso
   sacaba la página de su ancho. */
h1{font-family:var(--fd); font-weight:600; font-size:clamp(30px,5vw,56px); line-height:.98; margin:.16em 0 .12em; letter-spacing:-.015em; overflow-wrap:anywhere}
[data-theme="bricolage"] h1{font-weight:800; letter-spacing:-.03em}
h1 em{font-style:italic; color:var(--accent2)}
[data-theme="bricolage"] h1 em{font-style:normal}
.sub{font-family:var(--fm); font-size:13px; color:var(--ink2)}
.sub b{color:var(--ink); font-weight:600}

/* selector de tema */
.hright{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.themes,.lang{display:flex; gap:0; border:1.5px solid var(--ink); border-radius:var(--card-radius)}
.themes button,.lang button{font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  background:transparent; border:none; padding:8px 12px; cursor:pointer; border-right:1.5px solid var(--ink)}
.themes button:last-child,.lang button:last-child{border-right:none}
.themes button[aria-pressed="true"],.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}

/* toolbar */
.bar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px; margin:22px 0 24px; padding:14px 0; border-bottom:1px solid var(--rule)}
#filters{display:flex; flex-wrap:wrap; gap:20px}
/* Foco visible en TODO lo que se puede enfocar, en los tres temas. Antes los campos llevaban
   `outline:none` y solo cambiaban el color del borde inferior, que con teclado no se ve. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ctrl{display:flex; flex-direction:column; gap:5px}
.ctrl__l{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.bar select,.bar input[type=text]{font-family:var(--fu); font-size:14px; color:var(--ink); background:transparent;
  border:none; border-bottom:1.5px solid var(--ink); padding:5px 2px; min-width:140px}
.bar select:focus,.bar input:focus{border-color:var(--accent)}
.spacer{flex:1}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* El motivo de que Exportar y Limpiar filtros estén apagados, y el de que Preguntar no abra el panel
   todavía. Un botón `disabled` a secas no dice por qué. Se ocultan solos cuando no hay nada que
   contar: la línea se pinta escribiendo en ella y se quita vaciándola. Cuelgan de la barra y no
   de las acciones: dentro de ellas, su fila entera empujaba los botones al otro lado. */
.bar__nota{flex:1 1 100%; font-family:var(--fm); font-size:11px; line-height:1.5; color:var(--muted); margin:0}
.bar__nota:empty{display:none}
/* Fuera del espacio pero DENTRO del árbol de accesibilidad. `#ask-aviso` es una región viva
   (`role="status"`), y una región que nace `display:none` no se anuncia al llenarse: el lector no
   tenía nada que vigilar, porque la misma escritura que pone el texto es la que la destapa. Vacía
   se queda puesta y sin ocupar sitio, que es lo que arregla el anuncio. `#acciones-motivo` no es
   una región viva y se sigue ocultando vacío. */
/* `display` explícito: sin él, la regla de arriba sigue mandando en `#ask-aviso` vacío (declara
   `display:none`, que esto no pisaba) y la región seguía fuera del árbol. Medido en el navegador. */
.vh,#ask-aviso:empty{display:block; position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.btn{font-family:var(--fm); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  background:transparent; border:1.5px solid var(--ink); border-radius:var(--card-radius); padding:9px 14px; cursor:pointer;
  transition:background .14s ease,color .14s ease}
.btn:hover{background:var(--ink); color:var(--bg)}
.btn--solid{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
/* Un botón apagado se pinta con tokens medidos y no bajando la opacidad: atenuar el texto lo
   deja por debajo del 4,5:1 justo cuando lo que hay que leer es qué está apagado y por qué. */
.btn:disabled,.btn--solid:disabled{background:transparent; color:var(--muted); border-color:var(--rule); cursor:not-allowed}
.btn:disabled:hover,.btn--solid:disabled:hover{background:transparent; color:var(--muted)}
/* Lo mismo para el que está apagado con `aria-disabled` y no con `disabled`: Exportar y Limpiar
   filtros siguen enfocables a propósito, porque su motivo cuelga de ellos con `aria-describedby` y
   un botón que no recibe foco no lo deja alcanzar. Se pinta igual y con los mismos tokens. */
.btn[aria-disabled="true"],.btn--solid[aria-disabled="true"]{background:transparent; color:var(--muted); border-color:var(--rule); cursor:not-allowed}
.btn[aria-disabled="true"]:hover,.btn--solid[aria-disabled="true"]:hover{background:transparent; color:var(--muted)}
.bw{display:flex; align-items:center; gap:7px; font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); cursor:pointer}

/* sobre qué cuentan las cifras: filtros puestos y filas que entran */
.alcance{font-family:var(--fm); font-size:11px; line-height:1.55; color:var(--ink2); margin:0}
.alcance__filtros,.alcance__agente{font-family:var(--fm); font-size:11px; line-height:1.55; color:var(--muted); margin:0}
.alcance__filtros:empty,.alcance__agente:empty{display:none}
.alcance__filtros{word-break:break-word}

/* la tabla de datos que acompaña a cada gráfico: lo mismo que pinta, en cifras */
.datos{font-family:var(--fm); font-size:11px; color:var(--muted); margin:8px 0 0}
.datos summary{cursor:pointer; color:var(--accent2-text); letter-spacing:.04em}
.datos__box{overflow:auto; max-height:260px; margin-top:6px}
.datos table{font-size:11px; width:auto; min-width:100%}
/* La cabecera de esta tabla no ordena nada, así que no se pinta como si se pudiera pulsar. */
.datos thead th{cursor:default; text-align:left; padding:0 14px 4px 0!important; white-space:nowrap}
.datos tbody td{padding:3px 14px 3px 0; white-space:nowrap}
.datos__nota,.datos__vacio{margin:6px 0 0}
.datos__nota:empty{display:none}

/* rejilla de figuras */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:0; border-top:1px solid var(--rule); counter-reset:fig}
[data-theme="neon"] .grid,[data-theme="bricolage"] .grid{gap:16px; border-top:none; padding-top:4px}
.card{counter-increment:fig; padding:18px 20px 12px; position:relative;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  opacity:0; animation:fade .5s ease forwards; animation-delay:calc(var(--i,0)*55ms + 80ms)}
[data-theme="neon"] .card,[data-theme="bricolage"] .card{border:var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow)}
.card--hero{grid-column:1/-1}
[data-theme="editorial"] .card--hero{border-right:none}
.card__h{font-family:var(--fm); font-size:11px; letter-spacing:.05em; color:var(--ink2); margin:0 0 12px}
.card__h::before{content:"Fig. " counter(fig,decimal-leading-zero) ". "; color:var(--accent2-text); font-weight:600}
.card__plot{overflow:hidden}

.tablecard{margin-top:28px; border-top:2px solid var(--ink); padding-top:14px}
.tablecard .lead{font-family:var(--fm); font-size:11px; letter-spacing:.05em; color:var(--ink2); margin-bottom:12px}
table{font-family:var(--fm); font-size:12.5px; border-collapse:collapse; width:100%}
thead th{color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:10px;
  border-bottom:1.5px solid var(--ink)!important; cursor:pointer; padding-bottom:7px!important}
tbody td{border-bottom:1px solid var(--rule); color:var(--ink2); padding:3px 0}
tbody tr:hover td{color:var(--ink)}

/* loader: SOLO progreso. Lo que falla se cuenta en `.fallo`, que es un bloque de la página y no
   una capa opaca a pantalla completa. */
#loader{position:fixed; inset:0; z-index:9; display:grid; place-items:center; background:var(--bg)}
#loader.hidden{display:none}
/* La fase lleva dentro el nombre del fichero: sin envolver, uno largo se salía de la pantalla. */
#loader .l{font-family:var(--fm); font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  max-width:min(620px,84vw); text-align:center; line-height:1.9; overflow-wrap:anywhere}

/* primera pantalla: sin fuentes no hay panel, y lo que hay es qué hacer */
.vacio{max-width:560px; padding:10px 0 34px}
.vacio__t{font-family:var(--fd); font-weight:600; font-size:clamp(23px,3.6vw,34px); line-height:1.08; letter-spacing:-.012em; margin:0 0 10px}
[data-theme="bricolage"] .vacio__t{font-weight:800}
.vacio__lead{font-family:var(--fu); font-size:15px; line-height:1.55; color:var(--ink2); margin:0 0 18px}
.vacio__acciones{display:flex; gap:10px; flex-wrap:wrap}
.vacio__nota{font-family:var(--fm); font-size:11px; line-height:1.55; color:var(--muted); margin:18px 0 0}

/* una carga que falla: nombre, motivo y salida, sin tapar el panel que ya hubiera */
.fallo{display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  border:var(--card-border); border-color:var(--error); border-radius:var(--card-radius);
  padding:14px 16px; margin:0 0 26px}
.fallo[hidden]{display:none}
.fallo__ficha{font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0}
.fallo__ficha[hidden]{display:none}
.fallo__motivo{font-family:var(--fu); font-size:14px; line-height:1.5; color:var(--error); margin:0}

@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.card{animation:none; opacity:1}}

/* ════ Impresión: DIN A4, todo el panel, color o B/N ════ */
@page{size:A4 portrait; margin:12mm}
@media print{
  body{padding:0; background:#fff!important; color:#000!important}
  body::before{display:none}
  .bar,.themes,#loader,.btn--mini,.fuente__bar,.vacio,.fallo,.datos{display:none!important}
  header.top{border-color:#000}
  .grid{gap:10px; border-top:1px solid #bbb}
  .card{break-inside:avoid; border-color:#bbb!important; box-shadow:none!important; opacity:1!important; animation:none}
  thead th{color:#000!important; border-color:#000!important}
  tbody td{color:#222!important}
}
body.printing.bw .card__plot,body.printing.bw .tablecard{filter:grayscale(1)}

/* panel de conversación del agente */
.chat{position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); z-index:8;
  background:var(--bg); border-left:2px solid var(--ink); display:flex; flex-direction:column;
  box-shadow:-18px 0 40px -30px rgba(0,0,0,.6)}
.chat[hidden]{display:none}
/* Con sitio de sobra, el panel abierto no tapa el cuadro de mando: la página se recoloca a su
   lado. Medido a 1280 px (MMN-39): el panel tapaba el selector de idioma y el de tema, que solo
   se alcanzaban con teclado y con el foco escondido debajo. */
@media (min-width:1100px){ body:has(.chat:not([hidden])){padding-right:calc(460px + clamp(18px,2vw,32px))} }
.chat__h{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1.5px solid var(--ink)}
.chat__h{flex-wrap:wrap}
.chat__h h2{font-family:var(--fd); font-size:18px; margin:0; flex:1 1 100%; line-height:1.15}
[data-theme="bricolage"] .chat__h h2{font-weight:800}
.chat__cuota{font-family:var(--fm); font-size:11px; letter-spacing:.04em; color:var(--ink2)}
/* La alarma solo se ve cuando ha sonado: un contador a cero es ruido. */
.chat__alarma:not(:empty){color:var(--error)}
.chat__apagado{padding:18px; font-family:var(--fu); font-size:14px; color:var(--ink2); overflow:auto}
.chat__apagado ul{margin:10px 0 16px; padding-left:18px}
.chat__apagado li{margin-bottom:5px}
.chat__acciones{display:flex; gap:8px; flex-wrap:wrap}
.chat__hilo{flex:1; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.chat__hilo[hidden]{display:none}
.chat__msg{font-family:var(--fu); font-size:14px; line-height:1.5}
.chat__msg--yo{align-self:flex-end; max-width:86%; border:1.5px solid var(--ink); border-radius:var(--card-radius); padding:8px 12px}
.chat__msg--agente{color:var(--ink)}
.chat__msg--pensando,.chat__msg--error,.chat__msg--nopuedo{font-family:var(--fm); font-size:12px; color:var(--muted)}
.chat__msg--error .chat__texto{color:var(--error)}
.chat__texto{margin:0 0 8px; white-space:pre-wrap}
.chat__detalle{font-family:var(--fm); font-size:11px; color:var(--muted); margin:0}
button.cifra{background:transparent; color:var(--accent); font-weight:600; border:0; border-bottom:1.5px solid var(--accent);
  font-family:inherit; font-size:inherit; line-height:inherit; padding:0; cursor:pointer}
.chat__pista{font-family:var(--fm); font-size:11px; color:var(--muted); margin:0 0 6px}
.chat__consulta{font-family:var(--fm); font-size:11px; border-top:1px solid var(--rule); padding-top:6px; margin-top:6px}
.chat__consulta summary{cursor:pointer; color:var(--accent2-text); letter-spacing:.04em}
.chat__proposito{color:var(--ink2); margin:6px 0}
.chat__sql{white-space:pre-wrap; word-break:break-word; background:transparent; border:1px solid var(--rule); padding:8px; color:var(--ink2); overflow-x:auto}
.chat__tablabox{overflow-x:auto; margin-top:6px}
.chat__tabla{font-size:11px; width:auto; min-width:100%}
.chat__tabla th{padding:0 14px 4px 0!important; white-space:nowrap; text-align:left}
.chat__tabla td{padding:3px 14px 3px 0; white-space:nowrap}
.chat__aviso{color:var(--accent2-text); margin:6px 0 0}
.chat__form{display:flex; gap:8px; padding:14px 18px; border-top:1.5px solid var(--ink); flex-wrap:wrap}
.chat__form[hidden]{display:none}
/* La caja va en su propia fila a cualquier ancho, y los botones debajo: así la caja no pierde
   ancho por el botón de dictar, el marcador de posición se lee entero y nada se mueve al
   cambiar el botón de estado (medido: 390 y 1440 px, en reposo y escuchando). */
/* La caja de la pregunta lleva etiqueta A LA VISTA, en su propia fila: el marcador de posición
   es un ejemplo de pregunta y desaparece al escribir, así que no puede ser lo único que diga
   qué va ahí. */
.chat__etq{flex:1 1 100%; font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0}
.chat__form input{flex:1 1 100%; min-width:0; font-family:var(--fu); font-size:14px; color:var(--ink);
  background:transparent; border:none; border-bottom:1.5px solid var(--ink); padding:6px 2px}
.chat__form input:focus{border-color:var(--accent)}
#chat-parar[hidden]{display:none}
/* dictado (MMN-32): oculto donde el navegador no reconoce voz, nunca apagado a medias */
/* `btn--mini` empuja a la derecha con `margin-left:auto`, y este va pegado a la caja */
/* Ancho fijo que cubre el texto más largo de los dos idiomas («Escuchando», «Listening»): al
   cambiar de estado no se mueve nada alrededor, y la caja se queda con el resto de la fila. */
.chat__mic{margin-left:0; flex:0 0 auto; min-width:96px; text-align:center}
.chat__mic[hidden]{display:none}
.chat__mic--grabando{background:#c8401f; border-color:#c8401f; color:#fff}
.chat__mic--grabando:hover{background:#c8401f; color:#fff}
.chat__nota{font-family:var(--fm); font-size:11px; line-height:1.5; color:var(--muted); margin:0 0 14px}
.chat__nota[hidden]{display:none}
/* la pantalla de la puerta del sitio (MMN-27), en el mismo sitio donde se escribe la pregunta */
.chat__puerta{display:flex; flex-direction:column; gap:8px; padding:14px 18px; border-bottom:1.5px solid var(--ink)}
.chat__puerta-lead{font-family:var(--fu); font-size:13px; color:var(--ink2); margin:0}
.chat__puerta-etq{font-family:var(--fm); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.chat__puerta input{font-family:var(--fu); font-size:14px; color:var(--ink); background:transparent;
  border:none; border-bottom:1.5px solid var(--ink); padding:6px 2px}
.chat__puerta input:focus{border-color:var(--accent)}
.chat__puerta-msg{font-family:var(--fm); font-size:11px; color:var(--muted); margin:0}
.chat__puerta-msg:empty{display:none}
/* El aviso de la puerta hay que poder leerlo: es lo único que distingue una contraseña mala de
   un cerrojo cerrado. Medido sobre el fondo de cada tema (MMN-35), el #c8401f que usaba la app
   daba 4,24:1 en editorial, 3,94:1 en neón y 4,50:1 en bricolage, por debajo del 4,5:1 de WCAG
   AA en dos de los tres. `--error` da 6,30, 8,52 y 6,70, y desde MMN-37 lo usan todos los
   avisos rojos de la app, no solo este. */
.chat__puerta-msg--mal{color:var(--error)}
@media print{ .chat{display:none!important} }
/* relaciones entre fuentes */
.rels{margin:0 0 30px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
.rels[hidden]{display:none}
.rels__h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.rels__h h2{font-family:var(--fd); font-weight:600; font-size:19px; margin:0}
[data-theme="bricolage"] .rels__h h2{font-weight:800}
.rels__cuenta{font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2-text)}
.rels__lead{font-family:var(--fu); font-size:13px; color:var(--ink2); margin:6px 0 12px}
.rels__chips{display:flex; flex-wrap:wrap; gap:8px}
.rels__mas summary{font-family:var(--fm); font-size:11px; letter-spacing:.06em; color:var(--accent2-text); cursor:pointer; margin-bottom:10px}
.chip{display:flex; align-items:center; gap:8px; border:1.5px solid var(--rule); border-radius:var(--card-radius);
  padding:6px 10px; font-family:var(--fm); font-size:11px; color:var(--ink2); background:transparent}
.chip--ok{border-color:var(--accent); color:var(--ink)}
.chip__k{font-weight:600; color:var(--ink)}
.chip__d{color:var(--muted); font-size:10px}
.chip button{font-family:var(--fm); font-size:10px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  background:transparent; border:1px solid var(--rule); border-radius:var(--card-radius); padding:2px 7px; color:var(--ink2)}
.chip button:hover{border-color:var(--ink); color:var(--ink)}
.chip--ok button[data-accion="confirmar"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
@media print{ .rels{display:none!important} }

/* tarjetas que añade el agente */
.vistas{margin:0 0 30px}
.vistas[hidden]{display:none}
.vistas h2{font-family:var(--fd); font-weight:600; font-size:19px; margin:0 0 12px;
  border-bottom:1.5px solid var(--accent); padding-bottom:8px}
[data-theme="bricolage"] .vistas h2{font-weight:800}
.vistas .card__h{display:flex; align-items:center; gap:10px}
.vistas .card__h::before{content:none}

/* panel por fuente */
#paneles{display:flex; flex-direction:column; gap:34px}
.fuente{display:flex; flex-direction:column; gap:14px}
.fuente__h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-bottom:1.5px solid var(--ink); padding-bottom:8px}
.fuente__t{font-family:var(--fd); font-weight:600; font-size:22px; margin:0; letter-spacing:-.01em}
[data-theme="bricolage"] .fuente__t{font-weight:800}
.fuente__m{font-family:var(--fm); font-size:11.5px; color:var(--ink2)}
.fuente__bar{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end}
.btn--mini{margin-left:auto; font-size:10px; padding:4px 9px}

/* diálogo del sobre de contexto */
#env-dialog{max-width:min(820px,92vw); max-height:86vh; border:var(--card-border); border-radius:var(--card-radius);
  background:var(--bg); color:var(--ink); padding:24px 26px; overflow:auto}
#env-dialog::backdrop{background:rgba(0,0,0,.55)}
#env-dialog h2{font-family:var(--fd); font-size:24px; margin:0 0 10px}
#env-dialog p{font-family:var(--fu); font-size:14px; color:var(--ink2); margin:0 0 10px}
.env__size{font-family:var(--fm)!important; font-size:11.5px!important; letter-spacing:.06em; text-transform:uppercase; color:var(--accent2-text)!important}
#env-body{font-family:var(--fm); font-size:11.5px; line-height:1.55; color:var(--ink2); background:transparent;
  border:1px solid var(--rule); padding:12px 14px; overflow:auto; max-height:46vh; white-space:pre-wrap; word-break:break-word}

/* KPIs reactivos */
.kpis{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 22px}
.kpi{border:var(--card-border); border-radius:var(--card-radius); box-shadow:var(--card-shadow); padding:12px 18px; min-width:118px}
.kpi__v{font-family:var(--fd); font-size:26px; font-weight:600; line-height:1; color:var(--ink)}
[data-theme="bricolage"] .kpi__v{font-weight:800}
.kpi__l{font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px}