/* =========================================================
   TDD/UI — sistema de interfaz para productos de datos
   ---------------------------------------------------------
   Vive aparte de la landing a propósito: /css/style.css no
   sabe que esto existe y esto no depende de aquello.

   Lenguaje propio, no el de la landing. La página es display geométrico
   (Outfit), lima sobre negro. El producto es grotesca de interfaz (Instrument
   Sans), índigo sobre lienzo lavanda claro, esquinas muy blandas y tarjetas
   blancas que flotan en el lienzo — sin borde: las separa la sombra. El mono
   se reserva para folios, horas y llamadas a herramienta.

   La consola es clara en las dos versiones de la página, a propósito: contra
   el negro del sitio, un bloque claro es lo que más dice "esto es el producto".

   Prefijo: todo es .ui-*. Nada aquí toca elementos globales.
   ---------------------------------------------------------
   0. tokens         5. tabla          10. controles y estados
   1. armazón        6. agentes         11. responsive
   2. panel          7. documento
   3. texto de dato  8. flujo
   4. gráficas       9. asistente (IA)
   ========================================================= */

/* ---------- 0 · tokens ---------- */
/*
  La consola es clara siempre, en las dos versiones de la página. No sigue al
  interruptor de tema a propósito: así se lee como la captura de una aplicación
  de verdad puesta sobre la landing — y contra el negro de la página, un bloque
  claro es lo que más dice "esto es el producto, no otra sección del sitio".

  El idioma es de aplicación 2026: lienzo gris lavanda, tarjetas blancas sin
  línea (las separa la sombra, no un borde), esquinas muy blandas, un índigo
  saturado para el dato y el resto del color guardado para lo que significa algo.

  Solo se toman prestadas las tipografías (con respaldo), para que ui.css
  siga funcionando suelto en cualquier página.
*/
.ui{
  /* superficies: el lienzo es el escalón de abajo y las tarjetas flotan en él.
     Al revés que antes, cuando el armazón era lo alto y los paneles pozos. */
  --ui-shell:#ECEEF8;           /* lienzo de la aplicación */
  --ui-bg:#FFFFFF;              /* tarjeta */
  --ui-sunk:#F3F4FA;            /* campo, pozo, riel dentro de una tarjeta */
  --ui-track:#E4E6F2;           /* pista de barras y medidores, sobre blanco */
  --ui-fg:#12142B;
  --ui-muted:#676C85;
  --ui-line:rgba(18,20,43,.07);
  --ui-line-2:rgba(18,20,43,.14);
  --ui-card:rgba(18,20,43,.035);

  /* el índigo del producto: dato, actividad, lo que el sistema está haciendo.
     6.15:1 sobre blanco, así que también sirve como texto, no solo como relleno. */
  --ui-accent:#5B3FF0;
  --ui-hot:91,63,240;           /* el mismo, en triplete, para degradados */
  --ui-accent-ink:#3F1FC4;      /* un paso más oscuro, para texto chico */
  --ui-on-accent:#FFFFFF;       /* lo que va encima del índigo sólido */

  /* categóricos: solo para repartos, y en este orden fijo. Validados sobre
     blanco (banda de luminosidad, piso de croma, separación CVD y visión
     normal en verde). Ámbar y menta quedan bajo 3:1 contra el blanco: van
     siempre con su etiqueta y su cifra al lado, que es el relevo que exige
     usarlos. Un cuarto reparto no se inventa un tono: se va a "otros". */
  --ui-c1:var(--ui-accent);
  --ui-c2:#EDA100;
  --ui-c3:#1BAF7A;

  /* semánticos: reservados para estado, nunca para "serie 4" */
  --ui-ok:#097355;
  --ui-warn:#A94B07;
  --ui-err:#C82440;

  /* medidas: la esquina manda. Radios de aplicación blanda, no de caja. */
  --ui-r-lg:28px;
  --ui-r:20px;
  --ui-r-sm:13px;
  --ui-gap:12px;
  --ui-pad:clamp(12px,1vw,16px);
  --ui-bar:56px;
  --ui-rail:62px;
  --ui-ease:cubic-bezier(.22,1,.36,1);
  /* con rebote corto: se reserva para lo que se mueve porque el sistema
     decidió algo (una barra que llega a su valor, un mensaje que entra),
     nunca para un hover. */
  --ui-spring:cubic-bezier(.22,1.16,.36,1);

  /* luz: en claro no hay cejas brillantes ni sombras negras. Una sombra de
     tinta muy abierta y muy suave es lo único que separa una tarjeta del
     lienzo — por eso casi nada aquí lleva borde. */
  --ui-hair:0 0 0 1px rgba(18,20,43,.035);
  --ui-elev:0 1px 2px rgba(18,20,43,.04), 0 10px 26px -14px rgba(18,20,43,.14);
  --ui-lift:0 2px 4px rgba(18,20,43,.05), 0 22px 44px -18px rgba(18,20,43,.22);
  --ui-ink:transparent;         /* el barniz del modo oscuro aquí no aplica */

  /* propias: si no cargan, el respaldo sigue sin ser el de la landing */
  --ui-dis:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --ui-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  color-scheme:light;
  font-family:var(--ui-dis);
  color:var(--ui-fg);
  /* los dígitos no bailan al actualizarse */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

.ui *,.ui *::before,.ui *::after{box-sizing:border-box}
.ui :focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px;border-radius:6px}
/* el sistema tiene que sostenerse solo en cualquier página: si el anfitrión no
   trae reseteo, los controles del sistema lo traen aquí. Va en :where() para
   que no le gane en especificidad a ningún .ui-* de más abajo. */
.ui :where(button,input,select,textarea){font:inherit;color:inherit;background:none;border:none}
.ui :where(button){cursor:pointer}

/* ---------- 1 · armazón ---------- */
/* el marco de la aplicación: riel flotante a la izquierda de punta a punta,
   barra arriba a su derecha, vista al centro. El riel entero es una tarjeta,
   no una columna con un borde: es lo que hace que se lea como aplicación. */
.ui-shell{
  position:relative;display:grid;
  grid-template-columns:var(--ui-rail) minmax(0,1fr);
  grid-template-rows:var(--ui-bar) minmax(0,1fr);
  border-radius:var(--ui-r-lg);
  background:var(--ui-shell);overflow:hidden;isolation:isolate;
  padding:10px;
  box-shadow:
    0 0 0 1px rgba(18,20,43,.04),
    0 40px 90px -50px rgba(18,20,43,.5);
}
/* una floración de índigo en la esquina de arriba y otra abajo a la derecha:
   el lienzo tiene temperatura sin llenarse de textura */
.ui-shell::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 55% at 8% -8%, rgba(var(--ui-hot),.09), transparent 70%),
    radial-gradient(60% 50% at 104% 106%, rgba(var(--ui-hot),.07), transparent 72%);
}
/* el foco que sigue al puntero: en claro no es una luz, es un tinte.
   --mx/--my las pone console.js; sin JS simplemente no se enciende. */
.ui-shell::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ui-ease);
  background:radial-gradient(440px 440px at var(--mx,50%) var(--my,0%),
    rgba(var(--ui-hot),.07), transparent 70%);
}
.ui-shell.is-lit::after{opacity:1}
.ui-shell > *{position:relative;z-index:1}

.ui-bar{
  position:relative;grid-column:2;grid-row:1;
  display:flex;align-items:center;gap:12px;padding-inline:14px 6px;
}
.ui-bar__brand{display:flex;align-items:center;gap:10px;flex:none}
.ui-bar__brand .ui-mark{width:18px;height:16px;color:var(--ui-accent);flex:none}
.ui-bar__path{
  display:flex;align-items:center;gap:8px;
  font-family:var(--ui-mono);font-size:.68rem;letter-spacing:.02em;white-space:nowrap;
}
.ui-bar__path b{font-weight:600;color:var(--ui-fg)}
.ui-bar__path i{color:var(--ui-muted);font-style:normal}
.ui-bar__sep{display:none}
.ui-bar__end{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* las fichas de la barra viven en el lienzo, no en una tarjeta: ahí un pozo
   gris no se distingue del fondo, así que van en blanco */
.ui-bar .ui-search,.ui-bar .ui-model,.ui-bar .ui-pill{background:var(--ui-bg);box-shadow:var(--ui-hair)}
.ui-bar .ui-pill--live{background:rgba(var(--ui-hot),.1);box-shadow:none}

/* la marca vive en el tope del riel, no en la barra: con el riel de punta a
   punta, ahí es donde la busca cualquiera */
.ui-rail__marca{
  display:grid;place-items:center;width:42px;height:42px;flex:none;margin-bottom:6px;
  border-radius:14px;background:var(--ui-sunk);
}
.ui-rail__marca .ui-mark{width:17px;height:15px;color:var(--ui-accent)}

/* el riel: tarjeta blanca de punta a punta, con sus fichas dentro */
.ui-rail{
  grid-column:1;grid-row:1/-1;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 0;margin-right:10px;
  border-radius:var(--ui-r);background:var(--ui-bg);
  box-shadow:var(--ui-hair),var(--ui-elev);
}
.ui-rail__btn{
  position:relative;width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;color:var(--ui-muted);
  transition:color .25s,background-color .25s,box-shadow .25s,transform .3s var(--ui-ease);
}
.ui-rail__btn svg{width:18px;height:18px}
.ui-rail__btn:active{transform:scale(.94)}
.ui-rail__btn:hover{color:var(--ui-fg);background:var(--ui-sunk)}
/* activa: ficha índigo sólida. En un lienzo claro el relleno es más claro que
   cualquier anillo, y de paso ata el riel al color del dato. */
.ui-rail__btn[aria-selected="true"]{
  color:var(--ui-on-accent);background:var(--ui-accent);
  box-shadow:0 8px 18px -8px rgba(var(--ui-hot),.85);
  animation:ui-rail-in .4s var(--ui-ease);
}
@keyframes ui-rail-in{from{transform:scale(.82);opacity:0}}
.ui-rail__fill{flex:1}

.ui-view{
  grid-column:2;grid-row:2;
  padding:0 4px 4px;display:grid;gap:var(--ui-gap);align-content:start;
  grid-template-columns:minmax(0,1fr);min-height:0;min-width:0;
}
/* al cambiar de vista todo entra escalonado, no de golpe */
.ui-view[hidden]{display:none}
.ui-view.is-in > *{animation:ui-rise .62s var(--ui-spring) backwards;animation-delay:var(--d,0s)}
/* entra desenfocado y se enfoca al asentarse: se siente material, no un fade */
@keyframes ui-rise{from{opacity:0;transform:translateY(14px) scale(.986);filter:blur(7px)}}

.ui-row{display:grid;gap:var(--ui-gap);grid-template-columns:repeat(4,minmax(0,1fr))}
/* con alto fijo, la fila de en medio se estira y las de fuera miden lo suyo */
.ui-view--3{align-content:stretch;grid-template-rows:auto minmax(0,1fr) auto}
.ui-view--2{align-content:stretch;grid-template-rows:auto minmax(0,1fr)}
.ui-view--1{align-content:stretch;grid-template-rows:minmax(0,1fr)}
.ui-row--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui-row--2{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.ui-row--2b{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}

/* ---------- 2 · panel ---------- */
/* la tarjeta de todo. Sin borde: lo que la separa del lienzo es la sombra.
   Cabecera sin línea — la separa el aire, como en cualquier aplicación de
   ahora — salvo cuando debajo va una tabla, que sí necesita su regla. */
.ui-panel{
  position:relative;
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
  border-radius:var(--ui-r);background:var(--ui-bg);
  box-shadow:var(--ui-hair),var(--ui-elev);
}
.ui-panel--sunk{background:var(--ui-sunk);box-shadow:none}
.ui-panel__head{
  position:relative;
  display:flex;align-items:center;gap:10px;flex:none;
  padding:16px 18px 10px;
}
.ui-panel__head .ui-cap{margin:0}
.ui-panel__end{margin-left:auto;display:flex;align-items:center;gap:8px}
.ui-panel__body{padding:6px 18px 18px;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.ui-panel__body--flush{padding:0}

/* ---------- 3 · texto de dato ---------- */
/* etiqueta de interfaz: chica, mono, poco espaciada. La landing usa .22em de
   tracking; aquí .11em, porque esto se lee de reojo y muchas veces al día. */
.ui-cap{
  font-family:var(--ui-mono);font-size:.625rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ui-muted);white-space:nowrap;
}
.ui-cap--on{color:var(--ui-fg)}
/* la cifra grande va en la grotesca, no en mono: en un tablero claro y blando
   el número tiene que ser lo primero que se ve, y el mono lo pone a la altura
   del resto del texto. El mono se queda para folios, horas y llamadas, que es
   donde de verdad hace falta que las columnas se alineen solas. */
.ui-num{
  font-family:var(--ui-dis);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,2.7vw,2.35rem);
}
.ui-num small{
  font-size:.42em;font-weight:600;letter-spacing:0;
  color:var(--ui-muted);margin-left:7px;
}
.ui-mono{font-family:var(--ui-mono);font-size:.69rem;letter-spacing:0}
.ui-dim{color:var(--ui-muted)}

/* estado: punto + texto. El punto respira solo cuando está en vivo */
.ui-pill{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:5px 11px 5px 9px;border-radius:99px;
  font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ui-muted);background:var(--ui-sunk);white-space:nowrap;
}
.ui-dot{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none}
.ui-pill--live{color:var(--ui-accent-ink);background:rgba(var(--ui-hot),.1)}
.ui-pill--live .ui-dot{background:var(--ui-accent);animation:ui-beat 2.4s var(--ui-ease) infinite}
@keyframes ui-beat{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--ui-hot),.5)}
  70%    {box-shadow:0 0 0 7px rgba(var(--ui-hot),0)}
}
.ui-pill--warn{color:var(--ui-warn);background:color-mix(in srgb,var(--ui-warn) 12%,transparent)}
.ui-pill--err{color:var(--ui-err);background:color-mix(in srgb,var(--ui-err) 12%,transparent)}
.ui-pill--ok{color:var(--ui-ok);background:color-mix(in srgb,var(--ui-ok) 12%,transparent)}
.ui-pill--mute{color:var(--ui-muted);background:var(--ui-sunk)}

/* delta: ya no es texto con una flecha, es una ficha teñida. Verde sube,
   rojo baja, y el color va acompañado de signo y flecha, nunca solo. */
.ui-delta{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  padding:4px 9px;border-radius:99px;
  font-family:var(--ui-dis);font-weight:600;font-size:.7rem;letter-spacing:-.01em;
}
.ui-delta::before{font-size:.62em;line-height:1}
.ui-delta--up{color:var(--ui-ok);background:color-mix(in srgb,var(--ui-ok) 11%,transparent)}
.ui-delta--up::before{content:'▲'}
.ui-delta--down{color:var(--ui-err);background:color-mix(in srgb,var(--ui-err) 11%,transparent)}
.ui-delta--down::before{content:'▼'}
.ui-delta--good{color:var(--ui-ok);background:color-mix(in srgb,var(--ui-ok) 11%,transparent)}
.ui-delta--good::before{content:'▼'}
.ui-delta--flat{color:var(--ui-muted);background:var(--ui-sunk)}
.ui-delta--flat::before{content:'—'}

/* botón redondo de esquina: el "abrir esto" de cada tarjeta. Es la pieza que
   más dice aplicación-de-ahora y la única que se permite ser un círculo. */
.ui-iconbtn{
  width:34px;height:34px;border-radius:99px;flex:none;
  display:grid;place-items:center;
  color:var(--ui-on-accent);background:var(--ui-fg);
  transition:transform .35s var(--ui-spring),box-shadow .35s,background-color .3s;
}
.ui-iconbtn svg{width:15px;height:15px}
.ui-iconbtn:hover{transform:translateY(-2px) rotate(45deg);box-shadow:0 10px 20px -10px rgba(18,20,43,.6)}
.ui-iconbtn:active{transform:translateY(0) rotate(45deg) scale(.94)}
/* dentro de una tarjeta de acento se invierte: blanco translúcido sobre índigo */
.ui-kpi--acento .ui-iconbtn{color:var(--ui-on-accent);background:rgba(255,255,255,.18)}
.ui-kpi--acento .ui-iconbtn:hover{background:rgba(255,255,255,.28);box-shadow:none}

/* ---------- 4 · gráficas ---------- */

/* tarjeta de métrica: etiqueta, número grande, ficha de delta y chispa al pie */
.ui-kpi{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:16px 18px 15px;border-radius:var(--ui-r);
  background:var(--ui-bg);overflow:hidden;min-width:0;
  box-shadow:var(--ui-hair),var(--ui-elev);
  transition:transform .45s var(--ui-ease),box-shadow .45s;
}
/* la tarjeta se levanta un pelo al pasar por encima: confirma que es una
   superficie y no un dibujo */
.ui-kpi:hover{transform:translateY(-3px);box-shadow:var(--ui-hair),var(--ui-lift)}
/* la métrica que manda va en índigo sólido. Una sola por vista: si dos tarjetas
   gritan, ninguna se oye. */
.ui-kpi--acento{
  background:
    radial-gradient(120% 120% at 88% -20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(160deg,#6B4DF6,var(--ui-accent) 55%,#4A28D6);
  color:var(--ui-on-accent);
  box-shadow:0 2px 4px rgba(var(--ui-hot),.2), 0 20px 40px -20px rgba(var(--ui-hot),.85);
}
.ui-kpi--acento .ui-cap,.ui-kpi--acento .ui-dim{color:rgba(255,255,255,.72)}
.ui-kpi--acento .ui-delta{color:var(--ui-on-accent);background:rgba(255,255,255,.2)}
.ui-kpi--acento .ui-spark__line{stroke:rgba(255,255,255,.9)}
.ui-kpi--acento .ui-spark__fill{fill:rgba(255,255,255,.18)}
.ui-kpi__top{display:flex;align-items:center;gap:8px}
.ui-kpi__top .ui-iconbtn{margin-left:auto}
.ui-kpi__val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ui-kpi__spark{width:min(64px,26%);height:26px;margin-left:auto;flex:none;pointer-events:none}
.ui-kpi__foot{
  margin-top:auto;display:flex;align-items:center;gap:10px;min-height:30px;
}
/* con la chispa al lado, el que se recorta es el texto, nunca el dato */
.ui-kpi__foot .ui-cap{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* separa el delta del texto que lo acompaña sin meter un nodo extra */
.ui-kpi__foot .ui-delta + .ui-cap::before{content:'';margin:0}

/* la chispa: traza fina con relleno degradado, sin ejes ni ruido */
.ui-spark{display:block;width:100%;height:100%;overflow:visible}
.ui-spark__line{fill:none;stroke:var(--ui-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-spark__fill{fill:url(#uiSparkFill);opacity:1}

/* gráfica grande */
.ui-chart{position:relative;flex:1;min-height:110px;min-width:0}
.ui-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ui-chart__grid line{stroke:var(--ui-line);stroke-width:1}
.ui-chart__axis{
  font-family:var(--ui-mono);font-size:8.5px;letter-spacing:.08em;
  fill:var(--ui-muted);text-transform:uppercase;
}
.ui-chart__area{fill:url(#uiAreaFill)}
.ui-chart__line{
  fill:none;stroke:var(--ui-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ui-chart__line--ghost{stroke:var(--ui-line-2);stroke-width:1.5;stroke-dasharray:3 4}
.ui-chart__head{fill:var(--ui-accent)}
/* el aro que late en el último dato: dice "esto sigue llegando" */
.ui-chart__beat{fill:none;stroke:var(--ui-accent);stroke-width:1.4;transform-origin:center}
.ui-chart__cross{stroke:var(--ui-line-2);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .2s}
.ui-chart.is-hover .ui-chart__cross{opacity:1}
.ui-chart__tip{
  position:absolute;z-index:4;pointer-events:none;opacity:0;translate:-50% -124%;
  padding:8px 12px;border-radius:13px;
  background:var(--ui-fg);color:#fff;white-space:nowrap;
  box-shadow:0 14px 30px -14px rgba(18,20,43,.5);transition:opacity .2s;
}
.ui-chart.is-hover .ui-chart__tip{opacity:1}
.ui-chart__tip b{font-size:.84rem;font-weight:700;letter-spacing:-.02em}
.ui-chart__tip .ui-cap{color:rgba(255,255,255,.7)}

/* barras horizontales con etiqueta: para repartos y rankings. Cada fila lleva
   su color categórico en orden fijo (índigo, ámbar, menta) y su cifra al lado,
   que es el relevo obligatorio de los dos tonos que no llegan a 3:1. */
.ui-bars{display:flex;flex-direction:column;gap:18px;width:100%}
.ui-bars__row{display:grid;grid-template-columns:1fr auto;gap:9px 10px;align-items:center}
.ui-bars__row > .ui-cap{color:var(--ui-fg);letter-spacing:.06em}
/* el porcentaje deja de ser texto suelto y se vuelve una ficha */
.ui-bars__row > .ui-mono{
  padding:3px 9px;border-radius:99px;background:var(--ui-sunk);
  color:var(--ui-fg);font-size:.66rem;font-weight:500;
}
.ui-bars__track{
  grid-column:1/-1;height:10px;border-radius:99px;overflow:hidden;
  background:var(--ui-track);
}
.ui-bars__fill{
  position:relative;display:block;height:100%;border-radius:inherit;width:0;
  background:var(--ui-c1);
  transition:width 1.25s var(--ui-spring);
}
/* brillo que recorre la barra al llegar a su valor: pasa dos veces y se calla.
   En bucle sería un adorno; así es el acuse de que el dato acaba de llegar.
   Lo enciende quien pone el ancho (`is-on`), no el CSS por su cuenta. */
.ui-bars__fill::after{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%);
}
.ui-bars__fill.is-on::after{opacity:1;animation:ui-sheen 2.4s var(--ui-ease) 2}
@keyframes ui-sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(110%)}}
.ui-bars__row--c2 .ui-bars__fill{background:var(--ui-c2)}
.ui-bars__row--c3 .ui-bars__fill{background:var(--ui-c3)}
.ui-bars__row--warn .ui-bars__fill{background:var(--ui-warn)}
.ui-bars__row--err .ui-bars__fill{background:var(--ui-err)}

/* anillo de porcentaje */
.ui-ring{position:relative;display:grid;place-items:center;flex:none}
.ui-ring svg{transform:rotate(-90deg);overflow:visible}
/* el grosor no se fija aquí: la geometría del aro se calcula con él en ui.js */
.ui-ring__bg{fill:none;stroke:var(--ui-track)}
.ui-ring__val{
  fill:none;stroke:var(--ui-accent);stroke-linecap:round;
  transition:stroke-dashoffset 1.3s var(--ui-ease);
}
.ui-ring__mid{position:absolute;display:grid;justify-items:center;gap:2px;text-align:center;line-height:1.05}
.ui-ring__mid b{font-family:var(--ui-dis);font-size:1.02rem;font-weight:700;letter-spacing:-.03em}
.ui-ring__mid .ui-cap{font-size:.52rem;letter-spacing:.14em}

/* medidor delgado: umbral y valor, para latencia, cola, presupuesto */
.ui-meter{display:flex;flex-direction:column;gap:7px}
.ui-meter__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui-meter__top .ui-cap{color:var(--ui-fg)}
.ui-meter__track{height:7px;border-radius:99px;background:var(--ui-track);position:relative;overflow:hidden}
.ui-meter__fill{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--ui-accent);
  transition:width 1s var(--ui-ease),background-color .4s;
}
.ui-meter--warn .ui-meter__fill{background:var(--ui-warn)}
.ui-meter--err .ui-meter__fill{background:var(--ui-err)}

/* ---------- 5 · tabla ---------- */
.ui-table{width:100%;border-collapse:collapse;font-size:.78rem}
.ui-table th{
  text-align:left;padding:10px 14px;font-weight:500;
  font-family:var(--ui-mono);font-size:.57rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ui-muted);border-bottom:1px solid var(--ui-line);white-space:nowrap;
}
/* con la tabla a ras del panel, la cabecera necesita el mismo sangrado
   que el cuerpo del panel para no quedar pegada al canto */
.ui-panel__body--flush .ui-table th:first-child,
.ui-panel__body--flush .ui-table td:first-child{padding-left:18px}
.ui-panel__body--flush .ui-table th:last-child,
.ui-panel__body--flush .ui-table td:last-child{padding-right:18px}
/* las divisiones internas bajan a media tinta: la única línea con fuerza es
   la de los encabezados */
.ui-table td{
  padding:10px 14px;vertical-align:middle;
  border-bottom:1px solid color-mix(in srgb,var(--ui-line) 55%,transparent);
}
.ui-table tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background-color .25s}
.ui-table tbody tr:hover{background:var(--ui-card)}
/* la fila recién llegada se marca sola y el realce se desvanece */
.ui-table tbody tr.is-new{animation:ui-flash 2.4s var(--ui-ease)}
@keyframes ui-flash{
  from{background:rgba(var(--ui-hot),.13)}
  to{background:transparent}
}
.ui-table__t{font-weight:600;letter-spacing:-.005em;font-size:.79rem}
.ui-table__s{display:block;font-family:var(--ui-mono);font-size:.62rem;color:var(--ui-muted);margin-top:2px}
.ui-table__num{font-family:var(--ui-mono);font-size:.7rem;white-space:nowrap}
/* barra micro dentro de la celda: compara duraciones de un vistazo */
.ui-cellbar{display:flex;align-items:center;gap:8px}
.ui-cellbar__t{width:52px;height:4px;border-radius:99px;background:var(--ui-track);overflow:hidden;flex:none}
.ui-cellbar__f{display:block;height:100%;background:rgba(var(--ui-hot),.45);border-radius:inherit}

/* ---------- 6 · agentes y bitácora ---------- */
.ui-agents{display:flex;flex-direction:column;gap:6px;padding:6px 10px 10px}
.ui-agent{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  width:100%;text-align:left;padding:11px 12px;border-radius:var(--ui-r-sm);
  transition:background-color .3s,box-shadow .3s;
}
.ui-agent:hover{background:var(--ui-sunk)}
/* el agente abierto se levanta como una tarjeta dentro de la lista */
.ui-agent[aria-selected="true"]{background:var(--ui-bg);box-shadow:var(--ui-hair),var(--ui-elev)}
.ui-agent__ava{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--ui-sunk);color:var(--ui-muted);
  grid-row:span 2;transition:color .3s,background-color .3s;
}
.ui-agent__ava svg{width:14px;height:13px}
.ui-agent[aria-selected="true"] .ui-agent__ava{color:var(--ui-on-accent);background:var(--ui-accent)}
.ui-agent__n{font-size:.82rem;font-weight:600;letter-spacing:-.005em}
.ui-agent__task{
  font-family:var(--ui-mono);font-size:.63rem;color:var(--ui-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui-agent__st{grid-row:span 2;justify-self:end}

/* bitácora: monoespaciada, la línea nueva entra desde abajo */
.ui-log{
  flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  gap:5px;padding:12px 14px;font-family:var(--ui-mono);font-size:.655rem;line-height:1.5;
}
.ui-log__line{display:flex;gap:9px;animation:ui-line-in .45s var(--ui-ease) backwards}
@keyframes ui-line-in{from{opacity:0;transform:translateY(7px)}}
.ui-log__t{color:var(--ui-muted);flex:none;opacity:.7}
.ui-log__lv{flex:none;width:52px;letter-spacing:.09em;text-transform:uppercase;font-size:.9em}
.ui-log__m{color:var(--ui-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-log__m b{color:var(--ui-fg);font-weight:500}
.ui-log__line--ok   .ui-log__lv{color:var(--ui-ok)}
.ui-log__line--warn .ui-log__lv{color:var(--ui-warn)}
.ui-log__line--err  .ui-log__lv{color:var(--ui-err)}
.ui-log__line--run  .ui-log__lv{color:var(--ui-muted)}
/* cursor que parpadea al final: la bitácora sigue escribiendo */
.ui-log__caret{width:6px;height:11px;border-radius:2px;background:var(--ui-accent);animation:ui-caret 1.1s steps(2) infinite}
@keyframes ui-caret{50%{opacity:0}}

/* herramienta que el agente llama */
.ui-tools{display:flex;flex-wrap:wrap;gap:6px}
.ui-tool{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  background:var(--ui-sunk);
  font-family:var(--ui-mono);font-size:.6rem;color:var(--ui-muted);
  transition:color .3s,background-color .3s;
}
.ui-tool svg{width:11px;height:11px;opacity:.75}
.ui-tool.is-on{color:var(--ui-accent-ink);background:rgba(var(--ui-hot),.11)}

/* el paso donde entra una persona: sin esto no es un sistema serio */
.ui-ask{
  display:flex;flex-direction:column;gap:10px;padding:13px 15px;
  border-radius:var(--ui-r-sm);background:color-mix(in srgb,var(--ui-warn) 9%,transparent);
}
.ui-ask__q{font-size:.79rem;line-height:1.45}
.ui-ask__q b{font-weight:600}
.ui-ask__row{display:flex;gap:8px;align-items:center}
.ui-ask.is-done{background:color-mix(in srgb,var(--ui-ok) 10%,transparent)}

/* ---------- 7 · documento ---------- */
/* la hoja es blanca y el panel que la sostiene se vuelve un pozo gris: así se
   ve una hoja sobre una mesa, no un rectángulo dentro de otro del mismo color */
.ui-panel__body:has(> .ui-doc){background:#EFF0F8}
.ui-doc{
  position:relative;flex:1;min-height:0;border-radius:var(--ui-r-sm);
  background:var(--ui-bg);overflow:hidden;padding:16px 18px;
  box-shadow:var(--ui-hair),var(--ui-lift);
}
.ui-doc__sheet{display:flex;flex-direction:column;gap:9px;height:100%}
.ui-doc__hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ui-doc__ttl{font-size:.8rem;font-weight:700;letter-spacing:-.015em}
.ui-doc__meta{font-family:var(--ui-mono);font-size:.58rem;color:var(--ui-muted);line-height:1.7}
.ui-doc__rule{height:1px;background:var(--ui-line);flex:none}
.ui-doc__lines{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.ui-doc__ln{height:5px;border-radius:99px;background:var(--ui-track);width:100%}
.ui-doc__grid{display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-family:var(--ui-mono);font-size:.62rem}
.ui-doc__grid span{color:var(--ui-muted)}
.ui-doc__grid b{font-weight:500}
/* el recuadro que marca de dónde salió cada campo */
.ui-doc__hl{
  position:absolute;border:1.5px solid var(--ui-accent);border-radius:7px;
  background:rgba(var(--ui-hot),.09);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ui-ease);
}
.ui-doc__hl.is-on{opacity:1;animation:ui-hl .5s var(--ui-ease)}
@keyframes ui-hl{from{transform:scale(.9);opacity:0}}
/* barrido de lectura: baja una vez por el documento mientras extrae */
.ui-doc__scan{
  position:absolute;left:0;right:0;height:64px;pointer-events:none;opacity:0;z-index:2;
  background:linear-gradient(rgba(var(--ui-hot),0),rgba(var(--ui-hot),.14),rgba(var(--ui-hot),0));
  border-bottom:1.5px solid var(--ui-accent);
}
.ui-doc.is-reading .ui-doc__scan{animation:ui-scan 2.2s var(--ui-ease) 2}
@keyframes ui-scan{
  0%{opacity:0;transform:translateY(-70px)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(var(--ui-scan-h,260px))}
}

/* campo extraído: nombre, valor y qué tan seguro está el modelo */
/* los campos se reparten el alto disponible: seis caben igual que cuatro */
.ui-fields{
  display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow:hidden;
  justify-content:space-evenly;
}
.ui-field{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;
  padding:8px 12px;border-radius:var(--ui-r-sm);
  transition:background-color .3s,box-shadow .3s;
}
.ui-field__k,.ui-field__v{grid-column:1}
.ui-field.is-on{background:var(--ui-sunk)}
.ui-field.is-hit{animation:ui-flash 1.8s var(--ui-ease)}
.ui-field__k{font-family:var(--ui-mono);font-size:.59rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ui-muted)}
.ui-field__v{
  font-size:.8rem;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui-field__v:empty::after{content:'—';color:var(--ui-muted);font-weight:400}
.ui-field__c{
  grid-column:2;grid-row:1/3;justify-self:end;align-self:center;
  font-family:var(--ui-mono);font-size:.6rem;color:var(--ui-muted);
  display:flex;align-items:center;gap:7px;
}
.ui-field__cbar{width:34px;height:4px;border-radius:99px;background:var(--ui-track);overflow:hidden}
.ui-field__cfill{display:block;height:100%;width:0;background:var(--ui-accent);transition:width .8s var(--ui-ease)}
.ui-field--low .ui-field__cfill{background:var(--ui-warn)}

/* ---------- 8 · flujo ---------- */
.ui-flow{display:flex;align-items:center;gap:0;width:100%;min-width:0;overflow:hidden}
.ui-node{
  display:flex;flex-direction:column;gap:4px;align-items:center;flex:none;
  padding:11px 14px;border-radius:var(--ui-r-sm);
  background:var(--ui-sunk);min-width:0;transition:background-color .4s,box-shadow .4s,color .4s;
}
.ui-node__ico{width:15px;height:15px;color:var(--ui-muted);transition:color .4s}
.ui-node__n{font-family:var(--ui-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted);white-space:nowrap}
.ui-node.is-on{background:rgba(var(--ui-hot),.11)}
.ui-node.is-on .ui-node__ico,.ui-node.is-on .ui-node__n{color:var(--ui-accent)}
.ui-node.is-done{background:var(--ui-bg);box-shadow:var(--ui-hair),var(--ui-elev)}
.ui-node.is-done .ui-node__ico{color:var(--ui-fg)}
.ui-wire{flex:1;height:2px;border-radius:99px;background:var(--ui-line);position:relative;min-width:14px;overflow:hidden}
.ui-wire::after{
  content:'';position:absolute;inset:0;transform:translateX(-101%);
  background:linear-gradient(90deg,transparent,var(--ui-accent),transparent);
}
.ui-wire.is-on::after{animation:ui-wire 1s var(--ui-ease)}
@keyframes ui-wire{to{transform:translateX(101%)}}

/* ---------- 9 · asistente (IA) ---------- */
/*
  Lo que hace que esto se lea como IA y no como un cron: el modelo piensa a la
  vista (puntos + fuentes que va abriendo) y responde en streaming por palabra,
  con el cursor pegado al final. Por carácter se ve a máquina de escribir;
  por palabra se ve a modelo.

  La forma es de copiloto: lo que escribe la persona va a la derecha en una
  burbuja de índigo sólido; lo que contesta el modelo va a todo lo ancho, en
  tinta sobre blanco, con su ficha de chispa al lado. Así la respuesta se lee
  como un documento y la pregunta como un mensaje.
*/
.ui-chat{
  display:flex;flex-direction:column;justify-content:flex-end;gap:18px;
  flex:1;min-height:0;padding:20px 18px 6px;overflow:hidden;
  /* el hilo se desvanece hacia arriba en vez de cortarse a filo: da a
     entender que hay conversación antes sin dibujar una barra de scroll */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62px);
  mask-image:linear-gradient(180deg,transparent 0,#000 62px);
}
.ui-msg{
  display:flex;gap:12px;align-items:flex-start;
  animation:ui-msg-in .6s var(--ui-spring) backwards;animation-delay:var(--d,0s);
}
/* entra desde abajo y desenfocado. Es el mismo gesto que la vista completa,
   una octava más abajo: todo el sistema se asienta igual */
@keyframes ui-msg-in{from{opacity:0;transform:translateY(12px);filter:blur(6px)}}

/* la ficha de la IA: cuadrado blando lavanda con la chispa en índigo */
.ui-msg__av{
  width:32px;height:32px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--ui-sunk);color:var(--ui-muted);
}
.ui-msg__av svg{width:15px;height:15px}
.ui-msg--ia .ui-msg__av{color:var(--ui-accent);background:rgba(var(--ui-hot),.1)}

/* la respuesta: ancho completo, sin caja, con aire de lectura */
.ui-msg__b{min-width:0;font-size:.93rem;line-height:1.7;letter-spacing:-.005em}

/* la pregunta: a la derecha, índigo sólido, con la esquina de abajo mordida
   hacia quien la escribió. El avatar sobra: la posición ya dice de quién es */
.ui-msg--tu{flex-direction:row-reverse}
.ui-msg--tu .ui-msg__av{display:none}
.ui-msg--tu .ui-msg__b{
  max-width:min(76%,430px);padding:11px 16px;font-size:.865rem;line-height:1.5;
  border-radius:20px 20px 6px 20px;
  background:var(--ui-accent);color:var(--ui-on-accent);
  box-shadow:0 10px 22px -14px rgba(var(--ui-hot),.9);
}

/* la cifra que el modelo cita va en el índigo del dato y sobre su propia ficha
   teñida: se encuentra de reojo y no se confunde con un enlace */
.ui-hi{
  color:var(--ui-accent-ink);font-weight:600;
  padding:.12em .3em;margin:0 -.14em;border-radius:7px;
  background:rgba(var(--ui-hot),.1);
  /* que la ficha no parta la línea por la mitad al envolver */
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.ui-caret{
  display:inline-block;width:8px;height:1.02em;vertical-align:-2px;margin-left:3px;
  border-radius:3px;background:var(--ui-accent);
  animation:ui-caret-soft 1.15s var(--ui-ease) infinite;
}
@keyframes ui-caret-soft{0%,100%{opacity:1}50%{opacity:.15}}

/* pensando: una tarjeta hundida con los puntos, lo que está leyendo y las
   fuentes que va abriendo */
.ui-think{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;border-radius:16px;background:var(--ui-sunk);
  font-family:var(--ui-mono);font-size:.63rem;color:var(--ui-muted);
}
/* el texto de estado tiene un brillo que lo recorre: es la señal universal
   de "esto está ocurriendo ahora" sin poner un spinner */
.ui-think > span{
  background:linear-gradient(90deg,var(--ui-muted) 18%,var(--ui-fg) 38%,var(--ui-muted) 58%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ui-shimmer 2.4s linear infinite;
}
@keyframes ui-shimmer{to{background-position:-160% 0}}
.ui-think__dots{display:flex;gap:4px;flex:none}
.ui-think__dots i{
  width:6px;height:6px;border-radius:99px;background:var(--ui-accent);
  animation:ui-think 1.15s var(--ui-ease) infinite;
}
.ui-think__dots i:nth-child(2){animation-delay:.14s}
.ui-think__dots i:nth-child(3){animation-delay:.28s}
@keyframes ui-think{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* las fuentes que abrió para responder: se encienden una por una. El icono
   vive en su propia losa, como el favicon de una pestaña */
.ui-cites{display:flex;gap:7px;flex-wrap:wrap}
.ui-cite{
  display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;
  border-radius:99px;background:var(--ui-bg);
  box-shadow:var(--ui-hair);
  font-family:var(--ui-mono);font-size:.6rem;color:var(--ui-muted);
  opacity:.5;transition:opacity .4s,color .4s,box-shadow .4s;
}
.ui-cite svg{
  width:22px;height:22px;padding:5px;border-radius:99px;flex:none;
  background:var(--ui-sunk);
}
.ui-cite.is-on{opacity:1;color:var(--ui-fg);box-shadow:var(--ui-hair),var(--ui-elev)}
.ui-cite.is-on svg{color:var(--ui-accent);background:rgba(var(--ui-hot),.11)}

/* llamada a herramienta, tal como el agente la manda. El punteado es
   deliberado: lo que se ve aquí lo escribió una máquina, no una persona */
.ui-call{
  position:relative;
  font-family:var(--ui-mono);font-size:.615rem;line-height:1.5;
  padding:12px 14px;border-radius:15px;
  border:1px dashed var(--ui-line-2);background:var(--ui-sunk);color:var(--ui-muted);
  overflow:hidden;text-overflow:ellipsis;
}
.ui-call b{color:var(--ui-accent-ink);font-weight:500}
.ui-call em{color:var(--ui-fg);font-style:normal}

/* el detalle que sostiene la respuesta: separador que se apaga, no una línea
   que parte el panel en dos */
.ui-ev__detail{margin-top:20px;padding-top:2px;position:relative}
.ui-ev__detail::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--ui-line-2),transparent 85%);
}

/* sugerencias de seguimiento */
.ui-chips{display:flex;gap:8px;flex-wrap:wrap}
.ui-chip{
  padding:9px 15px;border-radius:14px;background:var(--ui-bg);
  font-size:.775rem;font-weight:500;letter-spacing:-.01em;color:var(--ui-muted);
  box-shadow:var(--ui-hair),var(--ui-elev);
  transition:color .3s,transform .35s var(--ui-ease),box-shadow .35s;
}
.ui-chip:hover{color:var(--ui-fg);transform:translateY(-2px);box-shadow:var(--ui-hair),var(--ui-lift)}

/* el compositor: flota dentro del panel en vez de estar clavado al borde.
   Ese único cambio es lo que separa una barra de formulario de un copiloto */
.ui-prompt{
  display:flex;align-items:center;gap:11px;flex:none;
  margin:12px 18px 18px;padding:9px 9px 9px 16px;
  border-radius:20px;background:var(--ui-sunk);
  box-shadow:inset 0 0 0 1px var(--ui-line);
  transition:box-shadow .35s,background-color .35s;
}
.ui-prompt:hover,.ui-prompt:focus-within{
  background:var(--ui-bg);box-shadow:inset 0 0 0 1px var(--ui-line-2),var(--ui-elev);
}
/* mientras se teclea la pregunta, el compositor se enciende: el aro de foco
   es parte del guion, no un estado muerto del CSS */
.ui-prompt.is-typing{
  background:var(--ui-bg);
  box-shadow:inset 0 0 0 1.5px var(--ui-accent),0 0 0 4px rgba(var(--ui-hot),.12);
}
.ui-prompt__in{
  flex:1;min-width:0;font-size:.875rem;white-space:nowrap;overflow:hidden;
}
.ui-prompt__in:empty::before{content:attr(data-ph);color:var(--ui-muted)}
.ui-prompt .ui-btn{border-radius:99px}

/* el modelo y a qué ritmo va: dice "hay un LLM aquí" sin explicarlo */
.ui-model{
  display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 10px;
  border-radius:99px;background:var(--ui-sunk);
  font-family:var(--ui-mono);font-size:.58rem;letter-spacing:.06em;color:var(--ui-muted);
  white-space:nowrap;
}
.ui-model b{color:var(--ui-fg);font-weight:500}
.ui-model__ico{width:13px;height:13px;color:var(--ui-accent);flex:none}
.ui-model__bar{width:30px;height:4px;border-radius:99px;background:var(--ui-track);overflow:hidden;flex:none}
/* la misma barra en la cabecera de un panel mide para leerse, no para adornar:
   ahí dice cuánta ventana de contexto queda libre */
.ui-panel__end .ui-model__bar{width:56px;height:5px;background:var(--ui-track)}
.ui-model__fill{
  display:block;height:100%;border-radius:99px;background:var(--ui-accent);
  transition:width .5s linear;
}

/* ---------- 10 · controles y estados ---------- */
.ui-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:13px;
  font-size:.77rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ui-fg);background:var(--ui-sunk);white-space:nowrap;
  transition:background-color .3s,color .3s,transform .3s var(--ui-ease),box-shadow .3s;
}
.ui-btn:hover{background:var(--ui-bg);box-shadow:var(--ui-hair),var(--ui-elev)}
.ui-btn:active{transform:translateY(1px) scale(.985)}
.ui-btn svg{width:14px;height:14px}
/* el botón sólido lleva su propia luz: el índigo no solo pinta, ilumina */
.ui-btn--pri{
  background:var(--ui-accent);color:var(--ui-on-accent);
  box-shadow:0 10px 22px -12px rgba(var(--ui-hot),.9);
}
.ui-btn--pri:hover{background:#6B4DF6;box-shadow:0 14px 26px -12px rgba(var(--ui-hot),.95)}
.ui-btn--sm{padding:7px 13px;font-size:.72rem;border-radius:11px}
.ui-btn[disabled]{opacity:.45;pointer-events:none}

.ui-tabs{display:flex;gap:3px;padding:4px;border-radius:99px;background:var(--ui-sunk)}
.ui-tab{
  padding:7px 15px;border-radius:99px;font-size:.74rem;font-weight:600;letter-spacing:-.01em;
  color:var(--ui-muted);white-space:nowrap;transition:color .3s,background-color .3s,box-shadow .3s;
}
.ui-tab:hover{color:var(--ui-fg)}
.ui-tab[aria-selected="true"]{
  color:var(--ui-fg);background:var(--ui-bg);
  box-shadow:0 1px 2px rgba(18,20,43,.06),0 6px 12px -8px rgba(18,20,43,.3);
}

.ui-search{
  display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;border-radius:99px;
  background:var(--ui-sunk);color:var(--ui-muted);
  font-family:var(--ui-mono);font-size:.63rem;transition:background-color .3s,color .3s}
.ui-search:hover{color:var(--ui-fg);background:var(--ui-bg);box-shadow:var(--ui-hair),var(--ui-elev)}
.ui-search svg{width:13px;height:13px}
.ui-kbd{
  font-family:var(--ui-mono);font-size:.58rem;padding:3px 7px;border-radius:8px;
  color:var(--ui-muted);background:var(--ui-bg);box-shadow:var(--ui-hair);
}

/* esqueleto: ocupa el sitio exacto del dato mientras llega */
.ui-skel{
  border-radius:8px;background:var(--ui-sunk);position:relative;overflow:hidden;
}
.ui-skel::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:ui-skel 1.4s infinite;
}
@keyframes ui-skel{to{transform:translateX(100%)}}

/* aviso flotante dentro del armazón */
.ui-toast{
  position:absolute;right:20px;bottom:20px;z-index:6;display:flex;align-items:center;gap:10px;
  padding:13px 17px;border-radius:16px;
  background:var(--ui-bg);box-shadow:var(--ui-hair),0 24px 46px -18px rgba(18,20,43,.3);
  font-size:.78rem;font-weight:500;animation:ui-toast-in .5s var(--ui-spring);
}
.ui-toast.is-out{animation:ui-toast-out .4s var(--ui-ease) forwards}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(14px) scale(.96);filter:blur(5px)}}
@keyframes ui-toast-out{to{opacity:0;transform:translateY(8px)}}
.ui-toast__ico{width:17px;height:17px;color:var(--ui-ok);flex:none}

/* ---------- 11 · responsive ---------- */
@media (max-width:1080px){
  .ui-bar .ui-pill{display:none}
  .ui-row,.ui-row--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-row--2,.ui-row--2b{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ui{--ui-rail:100%;--ui-bar:50px;--ui-gap:10px;--ui-r-lg:22px;--ui-r:16px}
  /* en vertical se deshace el riel de punta a punta: barra arriba, riel como
     tira horizontal debajo y la vista abajo, todo en una sola columna */
  .ui-shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--ui-bar) auto minmax(0,1fr);
    padding:8px;
  }
  .ui-bar{grid-column:1;grid-row:1;padding-inline:8px}
  .ui-view{grid-column:1;grid-row:3;padding:0}
  .ui-rail{
    grid-column:1;grid-row:2;
    flex-direction:row;justify-content:flex-start;gap:3px;padding:6px 8px;
    margin:0 0 10px;overflow-x:auto;scrollbar-width:none;
  }
  .ui-rail::-webkit-scrollbar{display:none}
  .ui-rail__fill{display:none}
  .ui-bar__path,.ui-search{display:none}
  .ui-table__hide{display:none}
  /* en vertical el alto lo pone el contenido: hay que ponerle techo a lo
     que crece solo, o la sección se vuelve interminable */
  .ui-log{max-height:196px}
  .ui-chart{min-height:180px}
  .ui-doc{min-height:240px}
  /* y piso a lo que se encoge solo: el hilo del copiloto vive de `flex:1`,
     y sin alto fijo del armazón se quedaría en nada */
  .ui-chat{min-height:320px;padding:16px 14px 4px}
  .ui-prompt{margin:10px 14px 14px}
  .ui-flow{overflow-x:auto;scrollbar-width:none}
  .ui-flow::-webkit-scrollbar{display:none}
}
@media (max-width:560px){
  .ui-row,.ui-row--3{grid-template-columns:minmax(0,1fr)}
  /* en pantalla chica el que sobra es el medidor, no la cifra: una barra sola
     en la cabecera no dice nada */
  .ui-panel__end .ui-model__bar{display:none}
  .ui-msg--tu .ui-msg__b{max-width:88%}
}

/* sin movimiento: se ve el estado final, nada corre */
@media (prefers-reduced-motion:reduce){
  .ui *,.ui *::before,.ui *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}