/* ══════════════════════════════════════════════════════════════════════
   KACHAI · Paleta monocromática global

   Hoja compartida por TODAS las páginas (chat, cuenta, administración,
   nodo y los módulos). Va siempre la última del <head> y no dibuja
   componentes: sólo reasigna la paleta a una escala de grises neutra.

   Existe porque cada sección traía su propio color —el chat en azul de
   marca, cuenta y administración en azul noche, los módulos en su
   variante— y la aplicación se veía como tres productos distintos.
   Reasignando los tokens en un solo sitio, todo hereda la misma piel y
   cada hoja conserva su estructura intacta.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Escala de grises ───────────────────────────────────────────── */
:root {
  --w-papel: #ffffff;
  --w-barra: #fbfbfa;
  --w-panel: #ffffff;
  --w-hover: #f2f2f0;
  --w-tinta: #101010;
  --w-tinta-2: #434343;
  --w-tinta-3: #757573;
  --w-tinta-4: #9c9c99;
  --w-linea: #e7e7e4;
  --w-linea-2: #d5d5d1;
  /* El acento es la propia tinta: ningún matiz de color en la interfaz. */
  --w-acento: #101010;
  --w-acento-tinta: #ffffff;
  --w-sombra: 0 1px 2px rgba(16, 16, 16, .04), 0 8px 24px rgba(16, 16, 16, .05);
}

:root[data-theme="dark"] {
  --w-papel: #0f0f0f;
  --w-barra: #090909;
  --w-panel: #161616;
  --w-hover: #1f1f1f;
  --w-tinta: #f2f2f0;
  --w-tinta-2: #c2c2be;
  --w-tinta-3: #8d8d89;
  --w-tinta-4: #6b6b67;
  --w-linea: #272725;
  --w-linea-2: #363634;
  --w-acento: #f2f2f0;
  --w-acento-tinta: #0f0f0f;
  --w-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
}

/* Alias heredados. Se reasignan todos —incluidos los azules olvidados—
   para que ningún componente antiguo reintroduzca color. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --work-paper: var(--w-papel);
  --work-sidebar: var(--w-barra);
  --work-accent: var(--w-acento);
  --papel: var(--w-papel);
  --panel: var(--w-panel);
  --hover: var(--w-hover);
  --tinta: var(--w-tinta);
  --tinta-2: var(--w-tinta-2);
  --tinta-3: var(--w-tinta-3);
  --tinta-4: var(--w-tinta-4);
  --texto-suave: var(--w-tinta-2);
  --gris: var(--w-tinta-3);
  --linea: var(--w-linea);
  --linea-2: var(--w-linea-2);
  --acento: var(--w-acento);
  --acento-suave: var(--w-hover);
  --sombra-1: none;
  --sombra-2: var(--w-sombra);
  --sombra-3: var(--w-sombra);
}

/* La franja tricolor de marca no pertenece a esta estética: dentro del
   espacio de trabajo se reduce a un filete de tinta. */
.chat-shell .franja { height: 1px; background: var(--w-linea); }
.chat-shell .franja__azul,
.chat-shell .franja__blanco,
.chat-shell .franja__rojo { background: transparent; }

/* ── 11. Neutralización de los tokens heredados ────────────────────── */
/* chat.css, chat-premium.css y chat-light.css declaran 37 variables con
   color (azul de marca, violeta, grises azulados). Se reasignan todas a
   la escala de grises en vez de perseguir cada componente: cualquier
   pieza antigua que las use queda monocromática sola.

   Dos excepciones deliberadas, porque ahí el color es información y no
   decoración: el rojo de error y el ámbar de aviso. Van desaturados al
   mínimo legible para no romper la calma del conjunto. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --texto: var(--w-tinta);
  --gris-suave: var(--w-tinta-3);
  --gris-tenue: var(--w-tinta-4);
  --linea-fuerte: var(--w-linea-2);
  --chat-line-strong: var(--w-linea-2);

  --azul: var(--w-tinta);
  --chat-blue: var(--w-tinta);
  --chat-blue-bright: var(--w-tinta);
  --chat-violet: var(--w-tinta);
  --chat-rose: var(--w-tinta);
  --cl-azul: var(--w-tinta);
  --cl-azul-claro: var(--w-tinta);
  --cl-azul-brillante: var(--w-tinta);
  --cl-azul-bandera: var(--w-tinta);
  --cl-azul-tenue: var(--w-hover);
  --cl-rojo: var(--w-tinta);
  --cl-rojo-claro: var(--w-tinta);
  --cl-blanco: var(--w-papel);
  --chat-gradient: none;
  --grad-marca: none;

  --exito: var(--w-tinta);
  --peligro: #9a2f2f;
  --peligro-suave: rgba(154, 47, 47, .10);
  --aviso: #8a6a12;

  /* Resaltado de código en escala de grises: la jerarquía la da el valor
     y el grosor, no el matiz. */
  --code-fondo: var(--w-hover);
  --code-tinta: var(--w-tinta);
  --code-linea: var(--w-linea);
  --tok-kw: var(--w-tinta);
  --tok-key: var(--w-tinta);
  --tok-string: var(--w-tinta-2);
  --tok-number: var(--w-tinta-2);
  --tok-comment: var(--w-tinta-4);
  --tok-fn: var(--w-tinta);
  --tok-func: var(--w-tinta);
  --tok-tag: var(--w-tinta);
  --tok-attr: var(--w-tinta-2);
}
:root[data-theme="dark"] { --peligro: #d98d8d; --peligro-suave: rgba(217, 141, 141, .12); --aviso: #d4b25f; }

.tok-kw, .tok-key, .token.keyword { font-weight: 600; }
.tok-comment, .token.comment { font-style: italic; }


/* ── Profundidad heredada (cuenta, administración, nodo) ───────────── */
/* panel.css y kachai.css pintan sobre azul noche. Se reasignan sus
   superficies para que las mismas plantillas queden en papel. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --noche: var(--w-papel);
  --noche-profunda: var(--w-barra);
  --noche-hero: var(--w-papel);
  --papel-2: var(--w-barra);
  --papel-3: var(--w-hover);
  --superficie: var(--w-panel);
  --superficie-fuerte: var(--w-panel);
  --superficie-hover: var(--w-hover);
}

/* La franja tricolor de marca se reduce a un filete de tinta. */
.franja { height: 1px; background: var(--w-linea); }
.franja__azul, .franja__blanco, .franja__rojo { background: transparent; }

/* El foco deja de ser azul: se marca con la tinta. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--w-tinta);
  outline-offset: 2px;
}

/* ── Marca e identidad en cuenta y administración ──────────────────── */
/* El isotipo era un degradado azul→rojo; al neutralizar el degradado
   quedaba invisible sobre el papel. Vuelve como bloque de tinta, igual
   que la inicial del usuario en el chat. */
.p-brand__mark {
  background: var(--w-tinta) !important;
  background-image: none !important;
  color: var(--w-papel) !important;
  -webkit-text-fill-color: var(--w-papel);
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 600;
}
.p-brand__name { color: var(--w-tinta); letter-spacing: .12em; }
.p-brand__sub { color: var(--w-tinta-3); letter-spacing: .12em; }

/* Cerrar sesión no es un error: iba en rojo y competía con los avisos
   reales. Pasa a tinta y sólo se tiñe al apuntarlo. */
.p-btn--danger, #btnLogout {
  color: var(--w-tinta-2) !important;
  border-color: var(--w-linea-2) !important;
  background: transparent !important;
}
.p-btn--danger:hover, #btnLogout:hover {
  color: var(--peligro) !important;
  border-color: var(--peligro) !important;
  background: var(--peligro-suave) !important;
}
/* Las acciones destructivas de verdad (borrar cuenta, purgar datos)
   conservan el rojo, que ahí sí informa. */
.p-btn--destructive, .btn-destructivo { color: var(--peligro) !important; border-color: var(--peligro) !important; }

/* ── Módulos (visores, notas, PDF, OCR…) ───────────────────────────── */
/* modulo.css pinta sobre una nebulosa azul-violeta con acentos verdes y
   rosas. Se apaga el gas y se reasignan sus tokens propios: el módulo
   queda en la misma escala que el chat y la cuenta.

   El lienzo del visor no se toca: sigue siendo su propio <canvas> y
   conserva la escena oscura, que es lo correcto para mirar un modelo. */
.mod-fondo { display: none !important; }

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --fondo: var(--w-papel);
  --damero-base: var(--w-hover);
  --damero: var(--w-linea);
  --violeta: var(--w-tinta);
  --rojo: var(--w-tinta);
  --verde: var(--w-tinta);
  --aro-a: var(--w-linea-2);
  --aro-b: var(--w-linea);
  --grad-boton: none;
  --sombra: var(--w-sombra);
}

/* La mesa del visor conserva un fondo oscuro neutro: el contraste con el
   modelo es necesario, pero sin tinte de color. */
.mod-lienzo, .visor-stage, .visor__lienzo, .mod-taller__lienzo {
  background: #141414;
}
:root[data-theme="light"] .mod-lienzo,
:root[data-theme="light"] .visor-stage,
:root[data-theme="light"] .visor__lienzo,
:root[data-theme="light"] .mod-taller__lienzo { background: #16161a; }

.mod-cab { background: var(--w-barra); border-bottom: 1px solid var(--w-linea); backdrop-filter: none; }
.mod-insignia, .mod-privado { color: var(--w-tinta-2) !important; border-color: var(--w-linea-2) !important; background: var(--w-papel) !important; }
.mod-insignia .ms, .mod-privado .ms { color: var(--w-tinta-3) !important; }

/* ── Superficies translúcidas de chat-premium ──────────────────────── */
/* chat-premium.css define su propia familia de superficies en azul noche
   translúcido (rgba(8,20,40,…)). Al ser opacas a medias, el tinte se
   colaba por debajo de los paneles de la barra aunque el fondo ya fuese
   gris. Se reasignan a superficies sólidas de la escala. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --chat-bg: var(--w-papel);
  --chat-bg-soft: var(--w-barra);
  --chat-surface: var(--w-panel);
  --chat-surface-strong: var(--w-panel);
  --chat-surface-hover: var(--w-hover);
  --chat-gradient-soft: none;
  --chat-line: var(--w-linea);
  --linea-suave: var(--w-linea);
  --chat-shadow-sm: none;
  --chat-shadow-md: var(--w-sombra);
  --chat-shadow-lg: var(--w-sombra);
}

/* Los paneles del pie de la barra llevaban el azul escrito a mano. */
.side-foot, .ctx-panel, .ctx-quota, .user-card {
  background-image: none !important;
}
.side-foot { background: transparent !important; }