/* ══════════════════════════════════════════════════════════════
   KACHAI · Chat en claro

   Va la última, después de kachai-tokens.css, chat.css y chat-premium.css.

   Hay TRES capas de tokens encadenadas y las tres hay que cubrir:
     kachai-tokens.css  define  --papel, --tinta, --linea, --cl-azul…
     chat.css           aliasa  --texto, --gris, --azul… sobre las anteriores
     chat-premium.css   define  --chat-bg, --chat-surface… y REDEFINE los alias

   Cubrir sólo la primera dejaba media interfaz en oscuro, porque
   chat-premium.css usa `var(--chat-surface)` directamente en sus reglas. Y
   además escribe degradados con rgba literales que ningún token alcanza: esos
   se neutralizan uno a uno más abajo.

   Criterio de la paleta: superficie de trabajo blanca y silenciosa. El azul y
   el rojo de la bandera son acento puntual —estado, foco, marca— y nunca fondo
   de zonas grandes. El texto es casi negro sobre blanco.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Capa 3: tokens propios de chat-premium.css ────────── */
  --chat-bg: #FFFFFF;
  --chat-bg-soft: #FFFFFF;
  --chat-surface: #FFFFFF;
  --chat-surface-strong: #FFFFFF;
  --chat-surface-hover: #F1F5FB;
  --chat-line: #E4EAF3;
  --chat-line-strong: #CFDAE9;
  --chat-blue: #1B4FC4;
  --chat-blue-bright: #1B4FC4;
  --chat-violet: #6D3A96;
  --chat-rose: #BE0F2B;

  /* El degradado tricolor era para fondo oscuro: sobre blanco el tramo claro
     desaparece y quedan dos manchas sueltas. Un azul sólido pesa menos y no
     compite con el contenido. */
  --chat-gradient: linear-gradient(135deg, #2563EB 0%, #1B4FC4 100%);
  --chat-gradient-soft: linear-gradient(145deg, #FFFFFF, #F7F9FD);

  /* En oscuro la profundidad venía de la luminosidad; sobre blanco hace falta
     sombra real, pero mucho más contenida: 90 px de difuminado sobre papel es
     una mancha gris, no una elevación. */
  --chat-shadow-lg: 0 10px 32px rgba(16, 25, 43, .09), 0 2px 6px rgba(16, 25, 43, .05);
  --chat-shadow-md: 0 4px 14px rgba(16, 25, 43, .06), 0 1px 3px rgba(16, 25, 43, .04);
  --chat-shadow-sm: 0 1px 3px rgba(16, 25, 43, .05);

  /* ── Capas 1 y 2: superficies ──────────────────────────── */
  --noche: #FFFFFF;
  --noche-profunda: #FFFFFF;
  --noche-hero: #FFFFFF;
  --papel: #FFFFFF;
  --papel-2: #FAFBFD;
  --papel-3: #F1F4F9;
  --superficie: #FFFFFF;
  --superficie-fuerte: #FFFFFF;
  --superficie-hover: #F1F5FB;
  --panel: #FFFFFF;

  /* ── Tinta: casi negro con matiz azul ──────────────────── */
  --tinta: #10192B;
  --tinta-2: #33415C;
  --tinta-3: #5F6E88;
  --tinta-4: #8A99B0;
  --texto: #10192B;
  --texto-suave: #33415C;
  --gris: #5F6E88;
  --gris-suave: #8A99B0;
  --gris-tenue: #AEBACB;

  /* ── Líneas: sobre blanco basta muy poco contraste ─────── */
  --linea: #E4EAF3;
  --linea-2: #CFDAE9;
  --linea-suave: #EEF2F8;
  --linea-fuerte: #BDCADC;

  /* ── Bandera de Chile, en dosis pequeñas ───────────────── */
  --cl-azul: #1B4FC4;
  --cl-azul-claro: #2563EB;
  --cl-azul-brillante: #1B4FC4;
  --cl-azul-bandera: #0A2A6B;
  --cl-azul-tenue: rgba(27, 79, 196, .08);
  --cl-rojo: #BE0F2B;
  --cl-rojo-claro: #BE0F2B;
  --cl-rojo-tenue: rgba(190, 15, 43, .08);
  --azul: #1B4FC4;
  --rojo: #BE0F2B;
  --acento: #1B4FC4;
  --acento-suave: rgba(27, 79, 196, .08);
  --hover: #F1F5FB;

  --exito: #05754C;
  --verde: #05754C;
  --aviso: #A25E05;
  --peligro: #BE0F2B;
  --peligro-suave: rgba(190, 15, 43, .08);

  --sombra-sutil: 0 1px 2px rgba(16, 25, 43, .05);
  --sombra-media: 0 4px 14px rgba(16, 25, 43, .06), 0 1px 3px rgba(16, 25, 43, .04);
  --sombra-alta: 0 10px 32px rgba(16, 25, 43, .09), 0 2px 6px rgba(16, 25, 43, .05);
  --grad-marca: linear-gradient(135deg, #2563EB 0%, #1B4FC4 100%);
}

html, body { background: #FFFFFF; color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════
   Fondos escritos a mano en chat-premium.css

   Ningún token los alcanza: son rgba literales dentro de gradientes. Se
   neutralizan aquí, en un solo sitio, en vez de editar 1.073 líneas.
   ══════════════════════════════════════════════════════════════ */

/* El lienzo llevaba dos halos radiales de color sobre fondo negro. Sobre
   blanco quedan como dos manchas sucias. */
.chat-shell {
  background: #FFFFFF !important;
  padding: 0 !important;
  gap: 0 !important;
}
/* Textura de ruido: sobre papel se lee como suciedad de impresión. */
.chat-shell::before { display: none !important; }

/* Sin movimiento detrás del chat: el grafo de 228 nodos se redibujaba a 60 fps
   compitiendo por la atención justo donde se está leyendo. */
.brain-canvas { display: none !important; }

.chat-main, .workspace, .chat-col, .chat-body { background: #FFFFFF !important; }

/* ── Barra superior ───────────────────────────────────────
   Deja de ser una tarjeta flotante con degradado y pasa a ser lo que es: el
   borde superior del área de trabajo. */
.topbar {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   Sin desenfoque de fondo en ninguna superficie

   chat-premium.css aplica `backdrop-filter` a la barra superior, al campo de
   entrada, a la tarjeta de bienvenida y a los menús. Cada una de esas capas
   obliga al navegador a recomponer lo que tiene detrás en CADA fotograma del
   scroll, y el hilo de la conversación es precisamente lo que pasa por detrás:
   de ahí el parpadeo al desplazarse.

   Sobre fondo oscuro y semitransparente el efecto aportaba profundidad. Sobre
   superficies blancas y opacas no se ve absolutamente nada — sólo se paga el
   repintado. Se retira en todas.

   Va como regla universal a propósito: chat-premium.css lo declara en nueve
   elementos distintos y una lista de selectores siempre se queda corta cuando
   alguien añade el décimo. En este tema no debe haber desenfoque en ninguna
   parte, así que la regla lo dice tal cual.
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Píldoras de la barra: fondo blanco y borde fino, todas iguales. Antes cada
   grupo traía su propio rgba oscuro y se veían como cajas grises apagadas. */
.status-pill,
.mode-switch,
.btn-nodo,
.cap-select,
.btn-workshop,
.auto-approve {
  background: #FFFFFF !important;
  border: 1px solid var(--linea-2) !important;
  box-shadow: none !important;
  color: var(--texto-suave) !important;
}
.btn-nodo:hover, .cap-select:hover, .btn-workshop:hover, .auto-approve:hover {
  border-color: var(--azul) !important;
  color: var(--azul) !important;
}
.status-pill__text { color: var(--gris) !important; }
.status-pill__dot { background: var(--gris-tenue); }
.status-pill__dot.is-busy { background: var(--azul); }

/* El conmutador AGENTE/CHAT: sólo la opción activa lleva color. */
.mode-switch { padding: 2px !important; }
.mode-switch__btn { color: var(--gris) !important; background: transparent !important; }
.mode-switch__btn.is-on {
  background: var(--azul) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* ── Barra lateral ────────────────────────────────────────── */
.sidebar {
  background: var(--papel-2) !important;
  border: 0 !important;
  border-right: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.brand__logo {
  background: var(--azul) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #FFFFFF;
}
.brand__logo::after { display: none !important; }
.brand__name { color: var(--tinta) !important; }
.brand__sub { color: var(--gris) !important; }

/* La franja tricolor a todo el ancho del borde superior funcionaba sobre fondo
   oscuro, pero sobre blanco una barra dura de lado a lado se lee como el
   indicador de carga del navegador — justo lo que se acaba de retirar del chat.
   La identidad chilena se sostiene en la marca, el acento azul y el rojo de las
   acciones destructivas, que es la dosis que pedía el encargo. */
.franja { display: none !important; }

/* Botón principal: azul sólido. El degradado azul→rojo pesaba demasiado para
   un botón que está siempre a la vista. */
.btn-primary {
  background: var(--azul) !important;
  border: 1px solid var(--azul) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: #1743A8 !important; border-color: #1743A8 !important; }

.btn-square {
  background: #FFFFFF !important;
  border: 1px solid var(--linea-2) !important;
  color: var(--gris) !important;
  box-shadow: none !important;
}
.btn-square:hover { border-color: var(--azul) !important; color: var(--azul) !important; }

.side-label, .side-label span { color: var(--gris-suave) !important; }

.conv-item { color: var(--texto-suave) !important; }
.conv-item:hover { background: var(--hover) !important; border-color: var(--linea) !important; }
.conv-item.is-active {
  background: var(--acento-suave) !important;
  border-color: var(--azul) !important;
  color: var(--tinta) !important;
}

.side-foot, .ctx-quota { border-top: 1px solid var(--linea) !important; background: transparent !important; }
.ctx-track { background: var(--papel-3) !important; }
.ctx-fill { background: var(--azul) !important; }
.ctx-head, .ctx-note { color: var(--gris-suave) !important; }
.side-links a { color: var(--gris) !important; }
.side-links a:hover { color: var(--azul) !important; }

.user-card {
  background: #FFFFFF !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
}
.user-card:hover { border-color: var(--linea-2) !important; background: var(--papel-2) !important; }
.user-card__avatar { background: var(--azul) !important; color: #FFFFFF !important; border: 0 !important; }
.user-card__name { color: var(--tinta) !important; }
.user-card__plan { color: var(--gris-suave) !important; }

/* ── Tarjeta de bienvenida ────────────────────────────────
   Era el peor caso: fondo azul-noche con el texto ya en gris oscuro, así que
   «motor: Automático» resultaba ilegible. */
.welcome, .empty__card {
  background: var(--papel-2) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 14px !important;
}
.welcome__title, .empty__title { color: var(--tinta) !important; }
.welcome__meta, .welcome__hint, .empty__hint { color: var(--gris) !important; }
.welcome__meta b, .welcome__meta strong { color: var(--texto) !important; }

/* El bloque de bienvenida flotaba a la izquierda del área de trabajo. Se centra
   en horizontal y baja un poco, para que quede alineado con el ancho del campo
   de entrada en vez de flotar suelto en la esquina.

   NO se toca el `display` de .chat-body: es la columna flexible que sostiene el
   hilo con su propio scroll, y forzarle `align-items: center` colapsa toda la
   altura del chat. */
.empty {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 10vh 24px 24px !important;
}

/* ── Mensajes ─────────────────────────────────────────────
   Cada mensaje llevaba un raíl vertical de 2 px: azul el del usuario, rojo el
   del asistente (chat.css lo pinta como borde y chat-premium.css lo repite como
   sombra interior). Sobre fondo oscuro eran dos líneas tenues; sobre blanco son
   dos barras saturadas recorriendo toda la conversación de arriba abajo. Fuera
   los dos: quien habla se distingue por la forma, no por un color de bandera. */
/* La caja que envuelve cada turno. Se me pasó en la primera pasada porque
   busqué reglas de `.msg__body` y el fondo estaba en `.msg__row`: un
   rgba(6,17,35,.66) que sobre blanco deja un rectángulo gris pizarra con el
   texto oscuro encima, ilegible. Los turnos se separan con una línea, que es
   todo lo que hace falta cuando el fondo ya es blanco. */
.msg__row {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--linea-suave) !important;
  border-radius: 0 !important;
}
.msg:last-child .msg__row { border-bottom: 0 !important; }

.msg__body {
  border-left: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  background: transparent !important;
}

/* Columna izquierda: turno y hora. Es referencia, no contenido. */
.msg__meta { background: transparent !important; }
.msg__turn { color: var(--gris-suave) !important; }
.msg__time { color: var(--gris-tenue) !important; }

/* «TÚ» y «RESPUESTA» heredaban el azul y el rojo de la bandera. Sobre blanco
   dos etiquetas de color en cada turno son mucho ruido para lo poco que
   informan: quién habla ya se ve por la forma del mensaje. */
.msg__name { color: var(--gris-suave) !important; }
.msg--assistant .msg__name { color: var(--gris-suave) !important; }
.msg__badge { background: var(--acento-suave) !important; color: var(--azul) !important; }

.msg__actions {
  background: transparent !important;
  border: 1px solid var(--linea) !important;
}
.msg__action { background: #FFFFFF !important; border-right-color: var(--linea) !important; }

/* El punto de control del hilo es una marca de navegación, no una acción
   principal: no debe pesar más que el mensaje al que pertenece. */
.msg__checkpoint, .checkpoint {
  background: #FFFFFF !important;
  border: 1px solid var(--linea) !important;
  color: var(--gris) !important;
  box-shadow: none !important;
}

/* El turno del usuario se distingue por una superficie apenas gris; el del
   asistente va directo sobre blanco, como el texto de un documento.

   El selector es `.msg:not(.msg--assistant)` y no `.msg--user`: buildMsgEl sólo
   añade una clase de rol al asistente, así que `.msg--user` no existe en el
   documento y la regla que lo usaba no llegaba a aplicarse nunca.

   El fondo va en UN solo elemento: ponerlo también en .msg__body anidaba dos
   cajas una dentro de otra. */
.msg:not(.msg--assistant) .msg__text {
  background: var(--papel-3) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 12px !important;
  padding: 11px 15px !important;
  display: inline-block;
  max-width: 100%;
}
.msg__text { color: var(--texto) !important; }
.msg__badge, .msg__actions, .msg__action { color: var(--gris) !important; }
.msg__action:hover { color: var(--azul) !important; background: var(--hover) !important; }

/* ── Campo de entrada ─────────────────────────────────────
   El foco es el único sitio donde el acento ocupa un borde entero, y ahí sí
   debe verse. */
.composer { background: #FFFFFF !important; border-top: 1px solid var(--linea) !important; }
.composer__box {
  background: #FFFFFF !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 14px !important;
  box-shadow: var(--sombra-media) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.composer__box:focus-within {
  border-color: var(--azul) !important;
  box-shadow: 0 0 0 3px var(--acento-suave), var(--sombra-media) !important;
}
.composer__input, .composer__inner { background: transparent !important; color: var(--texto) !important; }
.composer__foot { border-top: 1px solid var(--linea-suave) !important; background: transparent !important; }
.composer__note { color: var(--gris-suave) !important; }

/* Especialidad y motor bajaron aquí desde la barra superior. Van más
   compactos que arriba: comparten fila con los botones de herramienta y no
   deben pesar más que ellos. */
.composer__tools .cap-select {
  padding: 3px 8px !important;
  border-radius: 8px !important;
  border-color: var(--linea) !important;
}
.composer__tools .cap-select:hover { border-color: var(--linea-2) !important; }
.composer__tools .cap-select .ms { color: var(--gris-suave) !important; }
.composer__tools .cap-select select {
  font-size: 12px !important;
  color: var(--texto-suave) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}
.composer__tools { flex-wrap: wrap; gap: 6px; }

/* El contador repetía el modo que ya indica el conmutador de la barra
   superior. Con los selectores en esta fila, sobra el espacio y la repetición. */
.composer__counter { display: none !important; }

/* En pantallas estrechas la fila se parte: la pista de atajos es lo primero
   que sobra, porque en móvil no hay teclado que los ejecute. */
@media (max-width: 720px) {
  .composer__hint { display: none !important; }
}
::placeholder { color: var(--gris-suave) !important; }

.btn-send {
  background: var(--azul) !important;
  border: 1px solid var(--azul) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-send:hover { background: #1743A8 !important; border-color: #1743A8 !important; }
.btn-send.is-stop { background: var(--rojo) !important; border-color: var(--rojo) !important; }

.icon-btn { color: var(--gris) !important; background: transparent !important; border: 1px solid transparent !important; }
.icon-btn:hover { color: var(--azul) !important; background: var(--hover) !important; border-color: var(--linea) !important; }

/* ── Código ───────────────────────────────────────────────
   Sobre blanco, un bloque de código oscuro es un agujero negro en mitad de la
   página. */
pre, .code-card, .code-card__body, .msg__text pre {
  background: var(--papel-3) !important;
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
}
.code-card__head { background: var(--papel-2) !important; border-bottom: 1px solid var(--linea) !important; color: var(--gris) !important; }
.code-card__btn { background: #FFFFFF !important; border: 1px solid var(--linea-2) !important; color: var(--gris) !important; }
.code-card__btn:hover { border-color: var(--azul) !important; color: var(--azul) !important; }
code, .msg__text code {
  background: var(--papel-3);
  border: 1px solid var(--linea);
  color: #6B21A8;
}
pre code { background: transparent; border: 0; color: inherit; }

:root {
  --tok-key: #1B4FC4;
  --tok-string: #05754C;
  --tok-number: #A25E05;
  --tok-comment: #8494A8;
  --tok-tag: #BE0F2B;
  --tok-func: #6B21A8;
}

/* ── Superficies flotantes ────────────────────────────────── */
.comp-menu, .palette__box, .auth-modal__box, .card, .menu, .dropdown, .modal__box, .img-card {
  background: #FFFFFF !important;
  border: 1px solid var(--linea-2) !important;
  box-shadow: var(--sombra-alta) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.comp-menu__item { color: var(--texto-suave) !important; }
.comp-menu__item:hover { background: var(--hover) !important; color: var(--azul) !important; }
.auth-modal { background: rgba(16, 25, 43, .38) !important; }

/* ── Barras de scroll ─────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(16, 25, 43, .16); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(16, 25, 43, .30); background-clip: content-box; }

/* Foco visible y consistente para teclado. */
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════
   Indicador de actividad (sustituye la barra de progreso)

   La barra barría de lado a lado en bucle: sugería un avance medible que no
   existe —nadie sabe cuánto va a escribir el modelo— y ocupaba el ancho
   completo. Queda un punto que late junto a la etapa real y el tiempo
   transcurrido, que sí es información verdadera.
   ══════════════════════════════════════════════════════════════ */

.stream-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 13px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  box-shadow: none;
}
.stream-bar__track, .stream-bar__fill { display: none !important; }

.activity { position: relative; flex: 0 0 auto; width: 9px; height: 9px; display: inline-flex; }
.activity__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--azul);
  animation: kachai-latido 1.4s ease-in-out infinite;
}
.activity::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--azul);
  opacity: 0;
  animation: kachai-halo 1.4s ease-out infinite;
}
@keyframes kachai-latido {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50%      { transform: scale(1);   opacity: 1; }
}
@keyframes kachai-halo {
  0%   { transform: scale(.7); opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

.stream-bar__label { font-family: var(--mono); font-size: 12px; color: var(--texto-suave); }
.stream-bar__timer {
  font-family: var(--mono); font-size: 11px; color: var(--gris-suave);
  font-variant-numeric: tabular-nums; min-width: 3.2ch;
}
.stream-bar__stop {
  margin-left: 4px; padding: 3px 10px; font-size: 11px;
  border-radius: 999px; border: 1px solid var(--linea-2);
  background: #FFFFFF; color: var(--gris);
}
.stream-bar__stop:hover { background: var(--rojo); border-color: var(--rojo); color: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════
   Plan de trabajo plegable

   Desplegado ocupaba más alto que la respuesta y era lo PRIMERO que aparecía:
   el usuario veía una lista de tareas antes que el texto que había pedido.
   Plegado es una línea que dice en qué va; quien quiera el detalle lo abre.
   ══════════════════════════════════════════════════════════════ */

.plan-card {
  border: 1px solid var(--linea) !important;
  border-radius: 10px !important;
  background: var(--papel-2) !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.plan-card__head {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: transparent !important;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.plan-card__head:hover { background: var(--hover) !important; }
.plan-card__head .ms { font-size: 15px; color: var(--azul); flex: 0 0 auto; }

/* Sólo cuando está abierta se separa la cabecera del contenido. Cerrada, una
   línea suelta bajo un botón se lee como un borde huérfano. */
.plan-card.is-abierta .plan-card__head { border-bottom-color: var(--linea) !important; }

.plan-card__title {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-card__progress {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gris-suave);
  font-variant-numeric: tabular-nums;
}
.plan-card__chevron { font-size: 17px !important; color: var(--gris-suave) !important; }

/* El detalle sólo existe cuando se pide. */
.plan-card:not(.is-abierta) .plan-card__steps { display: none !important; }

.plan-step { border-bottom: 1px solid var(--linea-suave) !important; }
.plan-step:last-child { border-bottom: 0 !important; }
.plan-step__btn { background: transparent !important; }
.plan-step__btn:hover { background: var(--hover) !important; }
.plan-step__title { color: var(--texto) !important; }
.plan-step__detail { color: var(--gris) !important; }
.plan-step__output {
  background: var(--papel-3) !important;
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
}

/* ══════════════════════════════════════════════════════════════
   Taller: el visor de artefactos

   Quedaba en azul-noche mientras el resto del chat ya era blanco: se abría al
   lado de la conversación y parecía otra aplicación. Su barra de herramientas
   usa rgba literales y el panel de código pintaba el texto sobre el color de
   acento, así que ni los tokens ni el tema lo alcanzaban.

   El lienzo del artefacto (.ws-frame) se deja intacto a propósito: ahí manda el
   HTML que generó el modelo, no el tema de KACHAI.
   ══════════════════════════════════════════════════════════════ */

.workshop {
  border: 1px solid var(--linea-2) !important;
  border-radius: 14px 0 0 14px !important;
  background: #FFFFFF !important;
  box-shadow: -8px 0 28px rgba(16, 25, 43, .10) !important;
}
.workshop.is-full { border-radius: 14px !important; }

.ws-handle { background: var(--linea) !important; }
.ws-handle:hover { background: var(--azul) !important; }

.ws-bar {
  background: var(--papel-2) !important;
  border-bottom: 1px solid var(--linea) !important;
}
.ws-title { color: var(--tinta) !important; }
.ws-flag { color: var(--gris) !important; }

.ws-tabs, .ws-devices, .ws-versions, .ws-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--linea-2) !important;
  color: var(--texto-suave) !important;
}
.ws-tab, .ws-dev { background: transparent !important; color: var(--gris) !important; }
.ws-tab.is-on, .ws-dev.is-on { background: var(--azul) !important; color: #FFFFFF !important; }
.ws-tab + .ws-tab, .ws-dev + .ws-dev { border-left-color: var(--linea) !important; }
.ws-btn:hover { background: var(--azul) !important; color: #FFFFFF !important; border-color: var(--azul) !important; }
.ws-btn--close:hover { background: var(--rojo) !important; border-color: var(--rojo) !important; }

.ws-body { background: var(--papel-2) !important; }

/* El escenario lleva un damero muy tenue: separa el artefacto del panel sin
   inventar un color de fondo que el HTML generado no espera. */
.ws-stage {
  background:
    linear-gradient(45deg, #F4F7FB 25%, transparent 25%, transparent 75%, #F4F7FB 75%),
    linear-gradient(45deg, #F4F7FB 25%, transparent 25%, transparent 75%, #F4F7FB 75%),
    #FFFFFF !important;
  background-size: 18px 18px !important;
  background-position: 0 0, 9px 9px !important;
}
.ws-frame--dev { box-shadow: 0 8px 26px rgba(16, 25, 43, .13) !important; }

/* El código del artefacto se leía en blanco sobre el azul de acento. Ahora usa
   la misma superficie que cualquier otro bloque de código del chat. */
.ws-code {
  background: var(--papel-3) !important;
  color: var(--tinta) !important;
}
.ws-note { color: var(--gris) !important; }
.ws-diff { background: #FFFFFF !important; }
.ws-diff__head { background: var(--papel-2) !important; color: var(--texto-suave) !important; }
.ws-alert { background: #FFFCF5 !important; border-color: var(--aviso) !important; color: var(--aviso) !important; }

/* ── Bloque de razonamiento ───────────────────────────────
   Aquí se ve lo que antes eran 27 segundos de pantalla en blanco. */
.reasoning { margin: 4px 0 12px; border-left: 2px solid var(--linea-2); padding-left: 14px; }
.reasoning__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; color: var(--gris);
}
.reasoning__toggle:hover { color: var(--azul); }
.reasoning__body {
  margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--gris);
  white-space: pre-wrap; max-height: 300px; overflow-y: auto;
}
.reasoning[data-abierto="false"] .reasoning__body { display: none; }

/* ── Diagramas y fórmulas ─────────────────────────────────── */
.kachai-diagrama {
  margin: 16px 0; padding: 18px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  border-radius: 12px;
  overflow-x: auto;
}
.kachai-diagrama svg { max-width: 100%; height: auto; }
.kachai-diagrama details { margin-top: 12px; }
.kachai-diagrama summary { cursor: pointer; font-size: 12px; color: var(--gris); font-family: var(--mono); }
.kachai-diagrama details pre { margin-top: 8px; }
.katex { font-size: 1.05em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
pre.diagrama-invalido { border-left: 3px solid var(--aviso) !important; }

@media (prefers-reduced-motion: reduce) {
  .activity__dot { animation: none; opacity: 1; transform: none; }
  .activity::after { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Proyectos compartidos
   ══════════════════════════════════════════════════════════════ */

.side-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-label__accion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--gris); cursor: pointer;
}
.side-label__accion:hover { background: var(--hover); border-color: var(--linea); color: var(--azul); }

.side-list--proyectos { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; }
.proyecto-vacio { margin: 6px 2px; font-size: 12px; line-height: 1.5; color: var(--gris-suave); }

.proyecto-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; margin-bottom: 2px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
}
.proyecto-item:hover { background: var(--hover); border-color: var(--linea); }
.proyecto-item.is-activa { background: var(--acento-suave); border-color: var(--azul); }
.proyecto-item__punto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: var(--azul); }
.proyecto-item__info { min-width: 0; flex: 1; }
.proyecto-item__nombre {
  font-size: 13px; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proyecto-item__meta { font-size: 11px; color: var(--gris-suave); margin-top: 1px; }
.proyecto-item__rol {
  flex: 0 0 auto; font-size: 10px; font-family: var(--mono);
  color: var(--gris-suave); border: 1px solid var(--linea);
  border-radius: 4px; padding: 1px 5px;
}

.proyecto-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(16, 25, 43, .38);
  backdrop-filter: blur(2px);
}
.proyecto-modal__caja {
  width: min(520px, 100%); max-height: 86vh; overflow-y: auto;
  background: #FFFFFF; border: 1px solid var(--linea-2);
  border-radius: 14px; box-shadow: var(--sombra-alta);
}
.proyecto-modal__cabecera {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; background: #FFFFFF; border-bottom: 1px solid var(--linea);
}
.proyecto-modal__titulo { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto); }
.proyecto-modal__cerrar {
  display: inline-flex; padding: 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--gris); cursor: pointer;
}
.proyecto-modal__cerrar:hover { background: var(--hover); color: var(--texto); }
.proyecto-modal__cuerpo { padding: 18px 20px 22px; }

.proyecto-desc { margin: 0 0 16px; font-size: 13px; color: var(--texto-suave); }
.proyecto-seccion {
  margin: 20px 0 10px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 500;
}
.proyecto-seccion:first-child { margin-top: 0; }

.proyecto-campo { display: block; margin-bottom: 14px; }
.proyecto-campo__etiqueta { display: block; margin-bottom: 5px; font-size: 12px; color: var(--texto-suave); }
.proyecto-campo__control {
  width: 100%; padding: 8px 11px; font-size: 13.5px; font-family: inherit;
  color: var(--texto); background: #FFFFFF;
  border: 1px solid var(--linea-2); border-radius: 8px; resize: vertical;
}
.proyecto-campo__control:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--acento-suave); }
.proyecto-campo__ayuda { display: block; margin-top: 4px; font-size: 11.5px; color: var(--gris-suave); }

.proyecto-miembros { list-style: none; margin: 0; padding: 0; }
.proyecto-miembro {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linea-suave);
}
.proyecto-miembro:last-child { border-bottom: 0; }
.proyecto-miembro__nombre { font-size: 13px; color: var(--texto); }
.proyecto-miembro__correo { font-size: 11.5px; color: var(--gris-suave); }
.proyecto-miembro__rol {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--gris);
  border: 1px solid var(--linea); border-radius: 5px; padding: 2px 7px;
}

.proyecto-instrucciones {
  margin: 0; padding: 12px 14px; font-family: var(--mono);
  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
  color: var(--texto-suave); background: var(--papel-3);
  border: 1px solid var(--linea); border-radius: 8px;
}

.proyecto-acciones { display: flex; gap: 10px; margin-top: 18px; }
.btn-secundario {
  padding: 8px 14px; font-size: 13px; color: var(--texto-suave);
  background: #FFFFFF; border: 1px solid var(--linea-2);
  border-radius: 8px; cursor: pointer;
}
.btn-secundario:hover { border-color: var(--azul); color: var(--azul); }

/* El color aquí es la información, no la decoración. */
.proyecto-aviso {
  margin: 12px 0 0; padding: 9px 12px; font-size: 12.5px; border-radius: 8px;
  border: 1px solid var(--rojo); background: var(--peligro-suave); color: var(--rojo);
}
.proyecto-aviso[data-tipo="ok"] {
  border-color: var(--verde); background: rgba(5, 117, 76, .08); color: var(--verde);
}

/* ══════════════════════════════════════════════════════════════
   Identidad de la portada, traída al chat

   La portada usa el isotipo real, el logotipo con nodos entre letras y un
   degradado azul→violeta en las acciones principales. El chat traía una «K»
   dentro de un cuadrado y un botón azul plano: dos productos distintos.

   Lo que cambia respecto de la portada es el TRATAMIENTO, no la identidad. Allí
   el fondo es negro y la marca se aclara con `mix-blend-mode: screen` y filtros
   de brillo; sobre blanco eso la borra. Aquí va limpia, y el degradado se
   oscurece lo justo para que el texto blanco encima siga cumpliendo AA.
   ══════════════════════════════════════════════════════════════ */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* El isotipo es el SVG, no el PNG de la portada. Ese PNG es una marca BLANCA
   sobre transparencia —funciona sobre el negro del inicio y desaparece sobre
   este papel—, mientras que el SVG lleva su propio degradado azul-cian-violeta
   y se lee sobre los dos fondos. El dibujo es el mismo, así que la marca se
   reconoce igual.
   Su lienzo es cuadrado: se declara para que no salte al cargar. */
.kachai-brand__mark {
  width: 34px;
  height: 34px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  flex: 0 0 auto;
  /* La portada lo aclara con mezcla de capas y un filtro de brillo para
     despegarlo del negro. Sobre blanco eso lo borra: aquí va tal cual. */
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* El subtítulo se cortaba: la barra lateral tiene ancho fijo y «ESTACIÓN DE
   TRABAJO» con espaciado entre letras no cabe en una línea. Se reduce el
   espaciado y se permite el corte, en vez de dejarlo truncado a media palabra. */
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }

.kachai-brand__word {
  font-family: 'Instrument Sans', 'Geist', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .17em;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta) !important;
  /* La sombra de texto de la portada existe para separar la marca del negro.
     Sobre blanco sólo ensucia el trazo. */
  text-shadow: none !important;
}

/* Los nodos entre letras son la firma del logotipo: puntos, no puntos
   tipográficos. Se mantienen, en el azul de marca. */
.kachai-brand__word .node {
  display: inline-block;
  width: .13em;
  height: .13em;
  margin: 0 .15em;
  overflow: hidden;
  border-radius: 50%;
  background: currentColor;
  color: var(--azul) !important;
  text-indent: -999em;
  vertical-align: .06em;
  text-shadow: none;
}
.kachai-brand__word .node--violet { color: #6D3A96 !important; }

/* «AI» va en el degradado de marca, como en la portada. */
.kachai-brand__word .ai {
  font-style: normal;
  background: linear-gradient(100deg, #1B4FC4 0%, #4B3AC4 55%, #6D3A96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  margin-left: .03em;
}

.brand__sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gris-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Acción principal con el degradado de la portada ─────────
   El azul plano no decía nada de la marca. El degradado sí, y es el mismo
   recorrido azul→violeta del isotipo. */
.btn-primary, .btn-send {
  background: linear-gradient(100deg, #1B4FC4 0%, #3B41C9 52%, #5B37AE 100%) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(16, 25, 43, .10) !important;
}
.btn-primary:hover, .btn-send:hover {
  filter: brightness(1.08) saturate(1.06);
  box-shadow: 0 4px 14px rgba(27, 79, 196, .26) !important;
}
.btn-primary:active, .btn-send:active { filter: brightness(.96); }
.btn-send.is-stop {
  background: var(--rojo) !important;
  filter: none;
}

/* ── Barra superior con el lenguaje de la portada ─────────────
   Las píldoras eran cajas blancas con borde gris: correctas pero mudas, sin
   nada que las relacionara con la marca. La portada resuelve esto con dos
   niveles —fantasma para lo secundario, degradado para lo principal— y ese
   mismo par se aplica aquí.

   Van después de la regla genérica de píldoras a propósito: la sobrescriben. */
.status-pill,
.mode-switch,
.btn-nodo,
.cap-select {
  border-radius: 999px !important;
  border-color: var(--linea-2) !important;
}

/* El estado no es un botón: no se pulsa, así que no lleva borde de botón. */
.status-pill {
  border-color: transparent !important;
  background: var(--papel-3) !important;
}
.status-pill__dot { box-shadow: 0 0 0 3px rgba(27, 79, 196, .10); }

/* Fantasma, como .btn-ghost de la portada: el borde se tiñe de marca al pasar
   por encima en vez de encenderse entero. */
.btn-nodo {
  color: var(--texto-suave) !important;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-nodo:hover {
  border-color: var(--azul) !important;
  color: var(--azul) !important;
  transform: translateY(-1px);
}
.btn-nodo .ms { color: var(--azul) !important; }

/* La opción activa del conmutador lleva el degradado de marca, igual que la
   acción principal. Es lo que ata la barra superior con el logotipo. */
.mode-switch__btn.is-on {
  background: linear-gradient(100deg, #1B4FC4 0%, #3B41C9 52%, #5B37AE 100%) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  letter-spacing: .04em;
}
.mode-switch__btn { border-radius: 999px !important; transition: color .18s ease; }
.mode-switch__btn:not(.is-on):hover { color: var(--azul) !important; }

/* El resto de botones se quedan en superficie blanca con borde: si todo
   llevara degradado, el degradado dejaría de señalar la acción principal. */