/* Panel del Agente eBillia — consola densa.
   Un solo juego de tokens; prefers-color-scheme decide claro u oscuro.
   El azul y el hueso vienen de los documentos de arquitectura del proyecto. */

:root {
  --bg: #f2f2ef;
  --panel: #ffffff;
  --nav: #eaeae4;
  --borde: #dcdcd5;
  --linea: #e8e8e2;
  --tx: #2c2c28;
  --tx1: #0f0f0d;
  --tx2: #5c5c55;
  --tx3: #6f6f68;
  --az: #1c5cab;
  --azs: #2a78d6;
  --vd: #1f7a3d;
  --am: #9a6d00;
  --rj: #a8331f;
  --barra: #e2e2db;
  --fill: #8fb6e2;
  --sel: #e7effa;
  --hover: #f6f6f2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1a1d23;
    --nav: #0e1013;
    --borde: #22262d;
    --linea: #1c2026;
    --tx: #d8dae0;
    --tx1: #ffffff;
    --tx2: #9aa1ab;
    --tx3: #6e7681;
    --az: #58a6ff;
    --azs: #2a78d6;
    --vd: #3fb950;
    --am: #e3a008;
    --rj: #f85149;
    --barra: #22262d;
    --fill: #2a5c8f;
    --sel: #1a1f26;
    --hover: #1e222a;
  }
}

* { box-sizing: border-box; }

/* El atributo `hidden` lo oculta la hoja del NAVEGADOR, con `display: none`.
   Cualquier regla nuestra que fije `display` le gana, porque las de autor pesan
   más que las del navegador. Pasó con el aviso de fallo del banco de pruebas:
   llevaba `hidden`, pero `.aviso` declara `display: flex` y el mensaje "La
   simulación no llegó a completarse" se quedaba fijo en pantalla desde que se
   abría la página, sin que nada hubiera fallado.

   Va con `!important` a propósito: `hidden` significa oculto, y no debe depender
   de qué clase le toque al elemento. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 13px/1.55 "IBM Plex Sans", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--az); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .m { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* --- Estructura --- */

.shell { display: flex; min-height: 100vh; }

.lateral {
  width: 176px; flex-shrink: 0;
  background: var(--nav); border-right: 1px solid var(--borde);
  display: flex; flex-direction: column; padding: 14px 0;
  position: sticky; top: 0; height: 100vh;
}

.marca { display: flex; align-items: center; gap: 8px; padding: 0 13px 16px; }
.marca strong { display: block; color: var(--tx1); font-size: 12px; font-weight: 600; }
.marca small { color: var(--tx3); font-size: 10px; font-family: "IBM Plex Mono", monospace; }
.punto {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--vd); box-shadow: 0 0 0 3px rgba(63,185,80,.16);
}

.lateral nav { display: flex; flex-direction: column; }
.lateral nav a {
  color: var(--tx2); padding: 6px 13px; font-size: 12px;
  font-family: "IBM Plex Mono", monospace;
  border-left: 2px solid transparent;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lateral nav a:hover { background: var(--hover); text-decoration: none; color: var(--tx); }
.lateral nav a.activo { background: var(--sel); border-left-color: var(--azs); color: var(--tx1); font-weight: 600; }
.icono { display: none; }

/* Grupos desplegables del menú (23-oct). */
.nav__grupo summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--tx3); padding: 10px 13px 4px; font-size: 10.5px;
  font-family: "IBM Plex Mono", monospace; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__grupo summary::-webkit-details-marker { display: none; }
.nav__grupo summary::after { content: "▸"; font-size: 9px; transition: transform .15s; }
.nav__grupo[open] summary::after { transform: rotate(90deg); }
.nav__grupo summary:hover { color: var(--tx); }
.lateral nav .nav__grupo a { padding-left: 21px; }
.nav__abajo { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borde); }

.pie-lateral { margin-top: auto; padding: 12px 13px 0; border-top: 1px solid var(--borde); }
.usuario strong { display: block; color: var(--tx1); font-size: 11.5px; }
.usuario small { color: var(--tx3); font-size: 10.5px; font-family: "IBM Plex Mono", monospace; }
.salir { display: inline-block; margin-top: 7px; font-size: 11px; color: var(--tx3); font-family: "IBM Plex Mono", monospace; }

.contenido { flex: 1; padding: 16px 20px 40px; min-width: 0; }

.encabezado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--borde);
}
.encabezado h1 { font-size: 16px; font-weight: 600; margin: 0; color: var(--tx1); }
.acciones { display: flex; align-items: center; gap: 10px; }

/* --- Tarjetas --- */

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 4px; margin-bottom: 16px;
}
.tarjeta > header {
  padding: 9px 13px; border-bottom: 1px solid var(--borde);
}
.tarjeta h2 {
  font-size: 11px; margin: 0; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
}
.tarjeta header small { display: block; color: var(--tx3); font-size: 11px; margin-top: 3px; text-transform: none; letter-spacing: 0; }
.tarjeta > *:not(header) { padding-left: 13px; padding-right: 13px; }
.tarjeta > *:not(header):first-child { padding-top: 13px; }
.tarjeta > *:last-child { padding-bottom: 13px; }
.tarjeta--destacada { border-color: var(--azs); }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .rejilla-2 { grid-template-columns: 1fr; } }

.intro { color: var(--tx2); font-size: 12.5px; max-width: 78ch; margin: 0 0 16px; }
.vacio { color: var(--tx3); font-size: 12.5px; padding: 30px 13px; text-align: center; }
.tenue { color: var(--tx3); }
.nota-pie { color: var(--tx3); font-size: 11px; }

/* --- Avisos --- */

.aviso {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 3px;
  margin-bottom: 14px; font-size: 12.5px; border: 1px solid;
}
.aviso p { margin: 3px 0 0; }
.aviso ul { margin: 5px 0 0; padding-left: 17px; }
.aviso-icono { font-size: 13px; line-height: 1.35; }
.aviso--sin_datos { background: var(--sel); border-color: transparent; color: var(--tx); }
.aviso--no_disponible { background: rgba(227,160,8,.10); border-color: rgba(227,160,8,.30); }
.aviso--error { background: rgba(248,81,73,.09); border-color: rgba(248,81,73,.28); }

/* --- Estado --- */

.tira-estado {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 13px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: 4px; margin-bottom: 16px;
  font-family: "IBM Plex Mono", monospace;
}
.modo { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; }
.modo-etiqueta { color: var(--tx3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.modo strong { padding: 2px 8px; border-radius: 3px; font-size: 11.5px; background: var(--sel); color: var(--az); }
.modo--copiloto strong { background: rgba(227,160,8,.14); color: var(--am); }
.modo--autonomo strong { background: rgba(248,81,73,.12); color: var(--rj); }

.dep { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tx2); padding-left: 10px; }
.dep-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--tx3); display: inline-block; }
.dep--ok .dep-punto, .dep-punto--ok { background: var(--vd); }
.dep--mal .dep-punto, .dep-punto--mal { background: var(--rj); }

/* --- KPIs: franja continua, no tarjetas sueltas --- */

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: 4px; overflow: hidden;
  margin-bottom: 16px;
}
.kpi { background: var(--panel); padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.kpi-etiqueta {
  color: var(--tx3); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-family: "IBM Plex Mono", monospace;
}
.kpi-valor {
  font-family: "IBM Plex Mono", monospace; font-size: 21px; font-weight: 500;
  color: var(--tx1); font-variant-numeric: tabular-nums;
}
.kpi-valor small { font-size: 13px; color: var(--tx3); }
.kpi-nota { color: var(--tx3); font-size: 10.5px; font-family: "IBM Plex Mono", monospace; }

/* --- Medidor del % de usables --- */

.medidor { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 13px; }
.medidor-riel {
  flex: 1; min-width: 220px; height: 6px; background: var(--barra);
  border-radius: 3px; position: relative;
}
.medidor-relleno { height: 100%; border-radius: 3px; background: var(--am); transition: width .3s; }
.medidor-relleno.medidor--meta { background: var(--vd); }
.medidor-meta { position: absolute; top: -3px; width: 1px; height: 12px; background: var(--tx); }
.medidor-cifra strong {
  font-family: "IBM Plex Mono", monospace; font-size: 30px; font-weight: 500; color: var(--am);
}
.medidor-cifra small { display: block; color: var(--tx3); font-size: 11px; font-family: "IBM Plex Mono", monospace; }

/* Muestras insuficientes: la cifra se sigue viendo, pero apagada y en gris,
   para que no se lea como un semáforo en verde. El color es la señal de que
   el número todavía no decide nada. */
.medidor--provisional .medidor-relleno { background: var(--barra); }
.medidor--provisional .medidor-cifra strong { color: var(--tx3); }
.medidor--provisional + .vacio { padding: 13px; text-align: left; }

/* Aclaración bajo los KPIs: explica una cifra rara sin robarle peso. */
.nota-descartes { font-size: 11.5px; padding: 0 2px 4px; }

/* --- Embudo: en qué terminan los tickets --- */

.embudo { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; padding-top: 13px; }
.embudo-cifra { min-width: 150px; }
.embudo-cifra strong {
  font-family: "IBM Plex Mono", monospace; font-size: 30px; font-weight: 500;
  color: var(--vd); display: block; line-height: 1.1;
}
/* Cero resoluciones no es un logro: no se pinta en verde. */
.embudo-cifra strong.embudo--cero { color: var(--rj); }
.embudo-cifra small { color: var(--tx3); font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.embudo-tramos { flex: 1; min-width: 280px; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px; }
.embudo-tramos li { display: grid; grid-template-columns: 190px 1fr 74px; gap: 10px; align-items: center; }
@media (max-width: 700px) { .embudo-tramos li { grid-template-columns: 120px 1fr 62px; } }
/* Solo el desenlace que sí es trabajo terminado se distingue del resto. */
.barra-relleno.barra--favorable { background: var(--vd); }

/* --- Barras --- */

.barras { list-style: none; margin: 0; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.barras li {
  display: grid; grid-template-columns: 120px 1fr 66px; align-items: center; gap: 9px;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
}
.barra-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); }
.barra-riel { height: 5px; background: var(--barra); }
.barra-relleno { display: block; height: 100%; background: var(--azs); }
.barra-valor { text-align: right; color: var(--tx); }
.barra-valor small { color: var(--tx3); }

/* --- Serie --- */

.serie { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 13px 13px 0; }
.serie-columna { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.serie-barra { width: 100%; background: var(--fill); min-height: 2px; }
.serie-columna:hover .serie-barra { background: var(--azs); }
.serie-pie {
  display: flex; justify-content: space-between; color: var(--tx3);
  font-size: 10px; font-family: "IBM Plex Mono", monospace; padding: 6px 13px 0;
}
/* La escala de la gráfica. Sin ella una barra llena no distingue un ticket de mil. */
.serie-pico { color: var(--tx2); }

/* --- Tablas --- */

.tabla-envoltura { overflow-x: auto; }
.tabla {
  width: 100%; border-collapse: collapse;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.tabla th {
  text-align: left; font-weight: 400; font-size: 10.5px; color: var(--tx3);
  padding: 7px 13px; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: 6px 13px; border-bottom: 1px solid var(--linea); color: var(--tx); }
.tabla tbody tr:hover { background: var(--hover); }

/* --- Etiquetas --- */

.metadatos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.etiqueta {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  border: 1px solid var(--borde); font-size: 10.5px; color: var(--tx2);
  font-family: "IBM Plex Mono", monospace;
}
.etiqueta--activa { border-color: var(--azs); background: var(--sel); color: var(--az); }
.etiqueta--resolver { border-color: transparent; background: rgba(63,185,80,.14); color: var(--vd); }
.etiqueta--pedir_info { border-color: transparent; background: rgba(88,166,255,.14); color: var(--az); }
.etiqueta--escalar { border-color: transparent; background: rgba(227,160,8,.16); color: var(--am); }
.etiqueta--rojo { border-color: transparent; background: rgba(168,51,31,.14); color: var(--rj); }
.etiqueta--enviado { border-color: var(--am); color: var(--am); }

/* Reporte del periodo: se lee en pantalla y se imprime. */
.reporte-cabecera {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.reporte-cabecera small { display: block; margin-top: 2px; }
.reporte-avisos ul { margin: 6px 0 0 16px; padding: 0; }
.reporte-avisos li { margin: 3px 0; }
.subtitulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tx2); margin: 14px 0 6px; font-weight: 600;
}
.kpi--provisional .kpi-valor { opacity: .45; }
.reporte-pie { font-size: 11.5px; margin-top: 18px; }

@media print {
  :root {
    --bg: #fff; --panel: #fff; --nav: #fff; --borde: #ccc; --linea: #ddd;
    --tx: #222; --tx1: #000; --tx2: #444; --tx3: #666; --hover: #fff;
  }
  .lateral, .acciones, .no-imprimir { display: none !important; }
  .shell { display: block; }
  .contenido { padding: 0; }
  .tarjeta { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* --- Formularios --- */

input[type=text], input[type=password], input[type=number], select, textarea {
  font: inherit; font-size: 12.5px; padding: 6px 10px;
  border: 1px solid var(--borde); border-radius: 3px;
  background: var(--panel); color: var(--tx); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--azs); outline-offset: -1px; }
textarea { resize: vertical; font-family: inherit; }

.boton {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  padding: 6px 13px; border-radius: 3px;
  border: 1px solid var(--borde); background: var(--panel);
  color: var(--tx2); cursor: pointer; white-space: nowrap;
}
.boton:hover { background: var(--hover); color: var(--tx1); text-decoration: none; }
.boton--primario { background: var(--azs); border-color: var(--azs); color: #fff; }
.boton--primario:hover { background: var(--azs); color: #fff; opacity: .9; }

.filtros { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; min-width: 118px; }
.fila-acciones { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.buscador { display: flex; gap: 7px; flex-wrap: wrap; padding: 13px 13px 0; }
.buscador input[name=consulta] { flex: 2; min-width: 240px; }
.buscador input[name=categoria] { flex: 1; min-width: 140px; }

/* --- Acceso -----------------------------------------------------------------
   Plano técnico: cuadrícula fina, marcas de registro en las esquinas, todo en
   monoespaciada. La mitad izquierda dice si el agente responde ANTES de entrar,
   porque saberlo es justo lo que traes en la cabeza cuando abres el panel. */

.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg);
}

/* Izquierda ------------------------------------------------------------- */

.acceso-marca {
  position: relative;
  padding: 56px 52px;
  display: flex; flex-direction: column; justify-content: center; gap: 30px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--linea) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--linea) 23px 24px),
    var(--nav);
  border-right: 1px solid var(--borde);
  overflow: hidden;
}

/* Marcas de registro, como en un plano de ingeniería */
.esquina { position: absolute; width: 13px; height: 13px; opacity: .5; }
.esquina::before, .esquina::after { content: ''; position: absolute; background: var(--tx3); }
.esquina::before { width: 100%; height: 1px; }
.esquina::after { width: 1px; height: 100%; }
.esquina--si { top: 22px; left: 22px; }
.esquina--sd { top: 22px; right: 22px; }
.esquina--sd::before { right: 0; } .esquina--sd::after { right: 0; }
.esquina--ii { bottom: 22px; left: 22px; }
.esquina--ii::before { bottom: 0; } .esquina--ii::after { bottom: 0; }
.esquina--id { bottom: 22px; right: 22px; }
.esquina--id::before { bottom: 0; right: 0; } .esquina--id::after { bottom: 0; right: 0; }

.acceso-sello {
  position: absolute; right: -46px; bottom: -30px;
  width: 340px; height: auto; color: var(--azs); opacity: .07;
  pointer-events: none;
}

.acceso-identidad h1 {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 31px; font-weight: 600; letter-spacing: -.02em; color: var(--tx1);
  display: flex; align-items: center;
}
.acceso-identidad .guion { color: var(--azs); }
.acceso-identidad p {
  margin: 9px 0 0; font-size: 13px; color: var(--tx2); max-width: 34ch; line-height: 1.6;
}

.cursor {
  display: inline-block; width: 11px; height: 25px; margin-left: 7px;
  background: var(--azs); animation: parpadeo 1.15s steps(2, start) infinite;
}
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.acceso-datos {
  margin: 0; display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--borde); max-width: 330px;
}
.acceso-datos > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.acceso-datos dt {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .09em;
}
.acceso-datos dd {
  margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--tx);
}

.estado { display: inline-flex; align-items: center; gap: 7px; }
.estado::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tx3);
}
.estado--ok { color: var(--vd); }
.estado--ok::before { background: var(--vd); box-shadow: 0 0 0 3px rgba(63,185,80,.18); }
.estado--mal { color: var(--rj); }
.estado--mal::before { background: var(--rj); box-shadow: 0 0 0 3px rgba(248,81,73,.16); }

/* Derecha --------------------------------------------------------------- */

.acceso-forma {
  display: flex; align-items: center; justify-content: center;
  padding: 56px 52px; background: var(--bg);
}
.acceso-forma form {
  width: 100%; max-width: 330px;
  display: flex; flex-direction: column; gap: 15px;
}

.acceso-titulo { position: relative; margin-bottom: 6px; }
.acceso-indice {
  position: absolute; left: -30px; top: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  letter-spacing: .09em;
}
.acceso-titulo h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--tx1); letter-spacing: -.01em; }
.acceso-titulo p { margin: 7px 0 0; font-size: 12.5px; color: var(--tx2); line-height: 1.6; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-etiqueta {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .09em;
}
.campo input {
  font-family: "IBM Plex Mono", monospace; font-size: 13.5px;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 3px;
  background: var(--panel); color: var(--tx1); width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.campo input:focus {
  outline: none; border-color: var(--azs);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azs) 16%, transparent);
}

.acceso-boton {
  margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 13px;
  padding: 11px 16px; border-radius: 3px; border: 1px solid var(--azs);
  background: var(--azs); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: gap .16s, filter .16s;
}
.acceso-boton:hover { gap: 14px; filter: brightness(1.08); }
.acceso-boton:active { transform: translateY(1px); }
.acceso-boton svg { flex-shrink: 0; }

.acceso-pie {
  margin: 4px 0 0; font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px; color: var(--tx3); line-height: 1.6;
}

.acceso .aviso { margin: 0; }

/* Entrada escalonada: una sola secuencia al cargar, no micro-animaciones sueltas */
.acceso-identidad, .acceso-datos, .acceso-titulo, .campo, .acceso-boton, .acceso-pie {
  animation: aparecer .5s cubic-bezier(.22, 1, .36, 1) backwards;
}
.acceso-identidad { animation-delay: .04s; }
.acceso-datos     { animation-delay: .10s; }
.acceso-titulo    { animation-delay: .14s; }
.campo:nth-of-type(1) { animation-delay: .19s; }
.campo:nth-of-type(2) { animation-delay: .24s; }
.acceso-boton     { animation-delay: .29s; }
.acceso-pie       { animation-delay: .34s; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso-identidad, .acceso-datos, .acceso-titulo, .campo, .acceso-boton, .acceso-pie {
    animation: none;
  }
  .cursor { animation: none; }
}

@media (max-width: 880px) {
  .acceso { grid-template-columns: 1fr; min-height: 100dvh; }
  .acceso-marca { padding: 40px 28px 32px; gap: 22px; border-right: none; border-bottom: 1px solid var(--borde); }
  .acceso-sello { width: 210px; right: -30px; bottom: -20px; }
  .acceso-identidad h1 { font-size: 25px; }
  .acceso-forma { padding: 32px 28px 48px; align-items: flex-start; }
  .acceso-indice { display: none; }
}

/* --- Borradores: el mensaje del proveedor AL LADO del borrador --- */

.borrador { margin-bottom: 16px; }
.borrador-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.borrador-cabecera h2 { font-size: 14px; margin: 0; color: var(--tx1); font-weight: 600; text-transform: none; letter-spacing: 0; font-family: inherit; }
.borrador-cabecera .m { font-size: 14px; color: var(--tx1); font-weight: 600; }

.cara-a-cara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1000px) { .cara-a-cara { grid-template-columns: 1fr; } }

.columna {
  border: 1px solid var(--borde); border-radius: 4px; background: var(--panel);
  display: flex; flex-direction: column;
}
.columna-titulo {
  padding: 8px 13px; border-bottom: 1px solid var(--borde);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .05em;
  display: flex; justify-content: space-between; gap: 10px;
}
.columna-titulo span:last-child { color: var(--tx3); text-transform: none; letter-spacing: 0; }
.columna-pie {
  padding: 8px 13px; border-top: 1px solid var(--linea);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

.respuesta {
  padding: 13px; margin: 0; flex-grow: 1;
  font-family: inherit; font-size: 12.5px; line-height: 1.65; color: var(--tx);
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 340px; overflow-y: auto;
}

/* Texto con las imágenes de la plantilla: los saltos ya vienen como <br>. */
.respuesta--texto { white-space: normal; }
.img-plantilla { display: block; max-width: 100%; margin: 8px 0; border-radius: 4px; }
.editor-imagenes {
  min-height: 9em; max-height: 480px; overflow-y: auto; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: 3px; background: var(--panel); color: var(--tx);
  font: inherit; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.editor-imagenes:focus { outline: 1px solid var(--azs); outline-offset: -1px; }
.editor-imagenes__aviso { margin: 4px 0 0; font-size: 12px; color: var(--rj); }

.chunks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chunks small { color: var(--tx3); }
.chunks code { color: var(--az); cursor: pointer; font-size: 10.5px; }

.calificar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 13px; border: 1px solid var(--borde); border-radius: 4px; background: var(--panel);
}
.calificar-titulo {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .05em;
}
.opciones { display: flex; gap: 6px; }
.opciones label {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--borde); border-radius: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--tx2);
}
.opciones label:hover { border-color: var(--azs); color: var(--tx1); }
.opciones input { margin: 0; }
.calificar input[type=text] { flex: 1; min-width: 200px; }
.calificar-nota { flex-basis: 100%; font-size: 10.5px; color: var(--tx3); font-family: "IBM Plex Mono", monospace; margin: 0; }

.borrador--listo { border: 1px solid var(--vd); border-radius: 4px; background: var(--panel); padding: 13px; }
.calificado { margin: 0; font-size: 12.5px; font-family: "IBM Plex Mono", monospace; }
.palomita { color: var(--vd); font-weight: 700; margin-right: 5px; }
.ok-guardrails { font-size: 12px; color: var(--vd); margin: 0 0 10px; font-family: "IBM Plex Mono", monospace; }

/* --- Chunks --- */

.chunks-lista { list-style: none; margin: 0; padding: 13px; display: flex; flex-direction: column; gap: 9px; }
.chunks-lista li { border: 1px solid var(--borde); border-radius: 3px; padding: 11px; }
.chunks-lista header {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 5px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
}
.chunks-lista p { margin: 0; font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.score { margin-left: auto; color: var(--azs); }

/* --- Traza --- */

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.linea-tiempo::before { content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--borde); }
.linea-tiempo li { position: relative; }
.hito-marca { position: absolute; left: -20px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--azs); border: 2px solid var(--bg); }

.detalles {
  display: grid; grid-template-columns: 190px 1fr; gap: 7px 14px; margin: 0; padding: 13px;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
}
.detalles dt { color: var(--tx3); }
.detalles dd { margin: 0; color: var(--tx); }
.detalles--config { grid-template-columns: 230px 1fr; gap: 10px 14px; }
.detalles--config dd small { display: block; margin-top: 2px; }

.paginacion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; border-top: 1px solid var(--borde);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--tx3);
}

/* --- Configuración --- */

.opciones-modo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 13px 13px 0; }
.opcion-modo {
  font: inherit; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: 4px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--tx);
  display: flex; flex-direction: column; gap: 4px;
}
.opcion-modo:hover:not(:disabled) { border-color: var(--azs); }
.opcion-modo:disabled { cursor: not-allowed; opacity: .5; }
.opcion-modo strong { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--tx2); }
.opcion-modo small { color: var(--tx3); font-size: 11.5px; line-height: 1.45; }
.opcion-modo--activa { border-color: var(--azs); background: var(--sel); }
.opcion-modo--activa strong { color: var(--tx1); }

.riesgo {
  margin: 13px 13px 0; font-size: 11.5px; padding: 8px 11px; border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
}
.riesgo--ok { background: rgba(63,185,80,.10); color: var(--vd); }
.riesgo--medio { background: rgba(227,160,8,.12); color: var(--am); }
.riesgo--alto { background: rgba(248,81,73,.10); color: var(--rj); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 13px 13px 8px; }

/* HTMX */
.htmx-indicator { opacity: 0; transition: opacity .2s; font-size: 12px; color: var(--tx3); }

/* El banco de pruebas tarda entre 5 s y un minuto. Un texto gris de 12px se
   pierde y la pantalla se lee como muerta: aquí el indicador tiene que ganar
   la mirada. También se apaga el botón mientras corre, para que el segundo
   clic no cancele la petición en vuelo. */
.cargando-playground {
  font-size: 12.5px; color: var(--az); font-family: "IBM Plex Mono", monospace;
}
.cargando-playground::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px;
  border: 2px solid var(--barra); border-top-color: var(--az); border-radius: 50%;
  vertical-align: -1px; animation: girando .7s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cargando-playground::before { animation: none; }
}
.boton:disabled { opacity: .5; cursor: progress; }

/* --- Adjuntos del banco de pruebas --- */

.adjuntos-campo { margin-top: 12px; }
.adjuntos-campo label {
  display: block; font-size: 11px; color: var(--tx2); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .05em;
  font-family: "IBM Plex Mono", monospace;
}
.adjuntos-campo input[type="file"] {
  font-size: 12px; color: var(--tx2); width: 100%; max-width: 100%;
}
.adjuntos-campo input[type="file"]::file-selector-button {
  font: inherit; margin-right: 9px; padding: 4px 10px; cursor: pointer;
  background: var(--nav); color: var(--tx); border: 1px solid var(--borde);
  border-radius: 3px;
}
.adjuntos-campo input[type="file"]::file-selector-button:hover { background: var(--hover); }
.adjuntos-campo .nota-pie { margin: 6px 0 0; max-width: 78ch; }

/* Qué leyó el agente de los archivos. Va antes de la respuesta porque es la
   primera pregunta de quien sube un XML: ¿lo interpretó o lo ignoró? */
.adjuntos-leidos {
  background: var(--sel); border-radius: 3px; padding: 10px 12px; margin-bottom: 12px;
}
.adjuntos-leidos small {
  color: var(--tx3); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .05em; font-family: "IBM Plex Mono", monospace; margin-right: 7px;
}
.adjuntos-leidos code {
  font-size: 11.5px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 3px; padding: 1px 6px; margin-right: 5px;
}
.extraccion {
  margin: 8px 0 0; font-size: 12px; color: var(--tx2);
  font-family: "IBM Plex Mono", monospace; word-break: break-word;
}
.extraccion--vacia { color: var(--am); }
.tabla-cfdi { margin-top: 10px; width: auto; }
.tabla-cfdi caption {
  caption-side: top; text-align: left; color: var(--tx3);
  font-size: 11px; padding-bottom: 5px;
}
.tabla-cfdi th {
  text-align: left; color: var(--tx3); font-weight: 500; padding-right: 16px;
}

/* Lo que el agente da por sabido vs. lo que sigue preguntando. Lado a lado
   porque la pregunta útil es la comparación: si un dato está en la captura y
   aparece a la derecha, el fallo es de lectura; si aparece a la izquierda y
   aun así lo pidió, el fallo es del prompt. */
.estado-datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: 3px;
}
@media (max-width: 700px) { .estado-datos { grid-template-columns: 1fr; } }
.estado-datos small {
  display: block; color: var(--tx3); font-size: 10.5px; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .05em;
  font-family: "IBM Plex Mono", monospace;
}
.estado-datos p { margin: 0; font-size: 12px; }
.dato {
  font-size: 12px; padding: 2px 0; font-family: "IBM Plex Mono", monospace;
  word-break: break-word;
}
.dato code {
  color: var(--tx3); background: none; border: none; padding: 0; margin-right: 6px;
}
.dato--falta { color: var(--am); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; }
  .lateral nav { flex-direction: row; overflow-x: auto; }
  .lateral nav a { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .lateral nav a.activo { border-left-color: transparent; border-bottom-color: var(--azs); }
  /* En el celular el menú va en una fila: los grupos se aplanan (el script de
     base.html los abre todos). */
  .nav__grupo, .nav__abajo { display: contents; }
  .nav__grupo summary { display: none; }
  .lateral nav .nav__grupo a { padding-left: 13px; }
  .pie-lateral { display: flex; justify-content: space-between; align-items: center; }
  .contenido { padding: 14px; }
}

/* --- Pulso: ¿el agente está trabajando? ------------------------------------
   Va antes que las dependencias a propósito: un agente con todo en verde que
   lleva tres días sin recibir un webhook está roto igual. */

.pulso {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde); border-radius: 4px;
  overflow: hidden; margin-bottom: 16px;
}
@media (max-width: 820px) { .pulso { grid-template-columns: 1fr; } }

.pulso-principal {
  background: var(--panel); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 3px;
  border-left: 2px solid var(--vd);
}
.pulso-principal.pulso--alerta { border-left-color: var(--am); }
.pulso-etiqueta {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .06em;
}
.pulso-principal strong { font-size: 25px; font-weight: 500; color: var(--tx1); }
.pulso-nota { font-size: 12px; color: var(--tx2); }

.pulso-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--borde); }
.pulso-datos > div {
  background: var(--panel); padding: 15px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.pulso-datos span {
  font-size: 21px; font-weight: 500; color: var(--tx1); font-variant-numeric: tabular-nums;
}
.pulso-datos small {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .06em;
}
.pulso-mal span { color: var(--rj); }

/* --- Selector de modelo --- */

.modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 13px 13px 0; }
@media (max-width: 820px) { .modelos { grid-template-columns: 1fr; } }

.modelo {
  font: inherit; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 4px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--tx);
  display: flex; flex-direction: column; gap: 5px;
}
.modelo:hover:not(:disabled) { border-color: var(--azs); }
.modelo:disabled { cursor: not-allowed; }
.modelo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modelo strong { font-size: 13px; color: var(--tx1); }
.modelo code { font-size: 10.5px; color: var(--tx3); }
.modelo-precio {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--tx2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.modelo--activo { border-color: var(--azs); background: var(--sel); }
.modelo--sin-clave { opacity: .5; }
.modelo-falta {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--am);
  text-transform: uppercase; letter-spacing: .05em;
}
.modelo-nota { font-size: 11px; padding: 10px 13px 0; margin: 0; }

/* --- Recordatorios --- */

.recordatorios-limites { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 13px 13px 0; }
.recordatorios-limites label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--tx2); }
.recordatorios-limites input { width: 110px; font-family: "IBM Plex Mono", monospace; }
.recordatorios-esperas { padding: 13px 13px 0; }
.recordatorios-esperas h3 {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px;
}
.recordatorios-esperas .tabla td, .recordatorios-esperas .tabla th { padding-left: 8px; padding-right: 8px; }
#bloque-recordatorios .opciones-modo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones-modo--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#bloque-reparto .recordatorios-esperas { padding-top: 6px; }

/* --- Manuales --- */

.manual-forma { display: flex; flex-direction: column; gap: 12px; padding: 13px; }
.manual-campos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.manual-campos label, .manual-editar label, .manual-reemplazar label {
  display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--tx2);
}
.manual-campos select, .manual-campos input[type=number] { width: auto; min-width: 90px; }
.manual-titulo { flex: 1; min-width: 260px; }
.manual-temas { border: 1px solid var(--borde); border-radius: 4px; padding: 8px 10px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; }
.manual-temas legend { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .06em; padding: 0 4px; }
.manual-tema { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx); cursor: pointer; }
.manual-nota { padding: 13px; margin: 0; font-size: 12px; }
.manual-portal {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--tx1);
  text-transform: uppercase; letter-spacing: .06em; margin: 16px 13px 6px;
}
.manual-portal small { color: var(--tx3); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tabla-manuales td { vertical-align: top; }
.tabla-manuales td:nth-child(5) { white-space: nowrap; }
.manual-original { display: block; font-size: 10.5px; margin-top: 2px; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manual--inactivo td:not(.manual-acciones) { opacity: .55; }
.manual-acciones { white-space: nowrap; text-align: right; }
.manual-fila-editar > td { background: var(--hover); text-align: left; }
.manual-editar .manual-tema { flex-direction: row; font-family: inherit; }
.manual-fila-editar:hover { background: none; }
.manual-editar { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.manual-editar form { display: flex; flex-direction: column; gap: 10px; }
.manual-reemplazar { flex-direction: row !important; align-items: flex-end; flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--linea); padding-top: 12px; }

/* --- Credenciales --- */

.credenciales { display: flex; flex-direction: column; gap: 10px; padding: 13px 13px 0; }
.credencial { border: 1px solid var(--borde); border-radius: 4px; padding: 11px 12px; }
.credencial-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.credencial-cab strong { font-size: 13px; color: var(--tx1); }
.credencial-estado {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--tx3);
}
.credencial-estado--ok { color: var(--vd); }
.credencial-estado--falta { color: var(--am); text-transform: uppercase; letter-spacing: .05em; }
.credencial-forma { display: flex; gap: 7px; align-items: center; }
.credencial-forma input { flex: 1; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.boton--quitar { color: var(--rj); border-color: var(--borde); }
.boton--quitar:hover { border-color: var(--rj); color: var(--rj); }
.cred-ok { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--vd); margin: 0 0 12px; }
.modelo-actual {
  font-family: "IBM Plex Mono", monospace; font-size: 12px;
  padding: 13px 13px 0; margin: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.modelo-actual code { color: var(--tx1); }

/* Botón de cerrar de un mensaje descartable. Los iconos de estado son SVG y NO
   son botones: una ✕ tipográfica parecía cerrable y no hacía nada. */
.aviso { position: relative; align-items: flex-start; }
.aviso-icono { display: inline-flex; align-items: center; line-height: 1; padding-top: 1px; }
.aviso-icono svg { display: block; }
.aviso--error .aviso-icono { color: var(--rj); }
.aviso--no_disponible .aviso-icono { color: var(--am); }
.aviso--sin_datos .aviso-icono { color: var(--az); }
.aviso--ok { background: rgba(63,185,80,.10); border-color: rgba(63,185,80,.28); }
.aviso--ok .aviso-icono { color: var(--vd); }

.aviso-cerrar {
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--tx3); border-radius: 3px; line-height: 1;
  display: inline-flex; align-items: center;
}
.aviso-cerrar:hover { color: var(--tx1); background: rgba(127,127,127,.14); }
.aviso-cerrar:focus-visible { outline: 2px solid var(--azs); outline-offset: 1px; }

.palomita { display: inline-flex; align-items: center; color: var(--vd); margin-right: 5px; }
.ico-ok { display: block; }

/* Categorías: cada una se enciende o apaga */
.chip {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  padding: 5px 10px 5px 7px; border-radius: 3px;
  border: 1px solid var(--borde); background: var(--panel); color: var(--tx3);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.chip:hover:not(:disabled) { border-color: var(--azs); color: var(--tx1); }
.chip:disabled { cursor: not-allowed; opacity: .6; }
.chip--activa { border-color: var(--azs); background: var(--sel); color: var(--az); }
.chip-marca { width: 11px; display: inline-flex; align-items: center; justify-content: center; }

/* --- Ingesta de la KB --- */

.ingesta-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 13px 13px 0; }
.ingesta-nota { font-size: 11px; margin: 0; }
.ingesta-acciones .ingesta-nota { flex-basis: 100%; padding-top: 2px; }

.ingesta-curso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px; margin: 13px 13px 0;
  border: 1px solid var(--azs); border-radius: 4px; background: var(--sel);
  font-size: 12.5px;
}
.ingesta-curso strong { font-family: "IBM Plex Mono", monospace; color: var(--tx1); font-size: 12.5px; }
.ingesta-pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--azs);
  flex-shrink: 0; margin-top: 5px; animation: latir 1.1s ease-in-out infinite;
}
@keyframes latir { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .ingesta-pulso { animation: none; } }

.ingesta-reporte { padding: 13px 13px 0; }
.ingesta-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: 4px; overflow: hidden;
}
.ingesta-cifras > div { background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ingesta-cifras span { font-size: 19px; font-weight: 500; color: var(--tx1); font-variant-numeric: tabular-nums; }
.ingesta-cifras small { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
.ingesta-alerta span { color: var(--am); }

.bloqueados { margin-top: 14px; border: 1px solid rgba(227,160,8,.35); border-radius: 4px; overflow: hidden; }
.bloqueados-titulo {
  padding: 8px 12px; background: rgba(227,160,8,.10);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--am);
  text-transform: uppercase; letter-spacing: .05em;
}
.bloqueados .tabla td, .bloqueados .tabla th { padding-left: 12px; padding-right: 12px; }
.bloqueados .ingesta-nota { padding: 10px 12px; }

/* --- Artículos --- */

.subir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 13px; }
.subir input[type=file] { flex: 1; min-width: 220px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }

.editor { display: flex; flex-direction: column; gap: 12px; padding: 13px; }
.campo-editor { display: flex; flex-direction: column; gap: 5px; }
.campo-editor textarea {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; line-height: 1.6;
}
.editor .fila-acciones { margin-top: 2px; flex-wrap: wrap; }

.parecidos { margin: 8px 0 0; padding-left: 17px; font-size: 12.5px; }
.parecidos li { margin-bottom: 4px; }
.parecidos code { color: var(--az); }

/* --- Clientes -------------------------------------------------------------
   Una fila por cliente: nombre, si se atiende, y con qué modo. El modo lleva
   el color de riesgo de .riesgo (verde/ámbar/rojo) en vez de tres botones
   grises iguales: en una consola de operación, "autónomo" y "sombra" no
   deberían costar lo mismo de distinguir. */

.clientes-resumen {
  margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  color: var(--tx2);
}
.clientes-resumen strong { color: var(--tx1); }
.cuenta-modo { padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.cuenta-modo--ok    { background: rgba(63,185,80,.12);  color: var(--vd); }
.cuenta-modo--medio { background: rgba(227,160,8,.14);  color: var(--am); }
.cuenta-modo--alto  { background: rgba(248,81,73,.12);  color: var(--rj); }

.clientes-grupo {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tx3);
  margin: 16px 0 6px; padding: 0 0 5px; border-bottom: 1px solid var(--linea);
}
.clientes-grupo small {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tx3);
}
.clientes-grupo small::before { content: "· "; }

.clientes { list-style: none; margin: 0; padding: 0; }
/* Columnas FIJAS, iguales en todas las filas: con `auto` cada fila se medía
   sola y los interruptores caían en tres x distintas (754, 782, 806), que en
   una lista para comparar clientes es justo lo que estorba. */
.cliente {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(70px, 1fr) 130px 112px 206px 142px;
  padding: 7px 0; border-bottom: 1px solid var(--linea);
}
.cliente:last-child { border-bottom: 0; }
.cliente:hover { background: var(--hover); }
.cliente__nombre {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--tx1);
}
.cliente--fuera .cliente__nombre { color: var(--tx3); }
.cliente__modo, .cliente__origen { justify-self: end; }
.cliente__portal { display: flex; align-items: center; gap: 6px; }
.luz { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--tx3); }
.luz--ok { background: var(--vd); }
.luz--dudoso { background: var(--am); }
.luz--no { background: var(--tx3); opacity: .6; }
.cliente__origen { text-align: right; }

/* Interruptor: la bola dice el estado y el texto lo confirma, para no depender
   solo del color. El botón manda el valor CONTRARIO al que se ve. */
.interruptor {
  /* Ancho fijo: "atendido" y "sin atender" no miden lo mismo, y el botón
     cambiaba de tamaño al pulsarlo. */
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  width: 112px; justify-content: flex-start;
  padding: 4px 10px 4px 7px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--panel);
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
}
.interruptor:hover:not(:disabled) { border-color: var(--azs); }
.interruptor:disabled { cursor: not-allowed; opacity: .5; }
.interruptor__bola {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--tx3);
}
.interruptor--si { color: var(--vd); border-color: rgba(63,185,80,.40); }
.interruptor--si .interruptor__bola { background: var(--vd); }
.interruptor--no { color: var(--tx3); }

/* Control segmentado: los tres modos pegados, uno encendido. */
.segmentado { display: inline-flex; border: 1px solid var(--borde); border-radius: 4px; overflow: hidden; }
.seg {
  font: inherit; cursor: pointer; padding: 4px 9px; border: 0;
  border-right: 1px solid var(--borde); background: var(--panel);
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--tx3);
}
.seg:last-child { border-right: 0; }
.seg:hover:not(:disabled):not(.seg--activa) { background: var(--hover); color: var(--tx2); }
.seg:disabled { cursor: not-allowed; opacity: .55; }
/* Lo elegido en azul, como los chips de categoría; los modos con riesgo
   conservan su color (verde / ámbar / rojo) por las reglas de abajo. */
.seg--activa { background: var(--sel); color: var(--az); font-weight: 600;
               box-shadow: inset 0 0 0 1px var(--azs); }
.seg--activa.seg--ok    { background: rgba(63,185,80,.14);  color: var(--vd); }
.seg--activa.seg--medio { background: rgba(227,160,8,.16);  color: var(--am); }
.seg--activa.seg--alto  { background: rgba(248,81,73,.14);  color: var(--rj); }
.seg--activa.seg--ok, .seg--activa.seg--medio, .seg--activa.seg--alto { box-shadow: none; }

.enlace-boton {
  font: inherit; cursor: pointer; background: none; border: 0; padding: 0;
  color: var(--tx3); font-size: 11px; text-decoration: underline;
  font-family: "IBM Plex Mono", monospace;
}
.enlace-boton:hover:not(:disabled) { color: var(--tx1); }
.enlace-boton:disabled { cursor: not-allowed; opacity: .5; }

/* Angosto: el nombre arriba y los controles debajo, sin scroll horizontal. */
@media (max-width: 720px) {
  .cliente { grid-template-columns: 1fr auto; row-gap: 7px; }
  .cliente__portal { grid-column: 1 / -1; }
  .cliente__modo { grid-column: 1 / -1; justify-self: start; }
  .cliente__origen { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

/* --- Equipo de soporte -------------------------------------------------- */
/* Misma rejilla que `.cliente` pero con una columna de fechas en vez de la de
   modo: se reaprovecha la fila para que las dos listas se lean igual. */
.ejecutivo { grid-template-columns: minmax(120px, 1fr) 112px minmax(90px, 200px) 232px; }
.ejecutivo .cliente__nombre { font-family: inherit; font-size: 13px; }
.ejecutivo__ausencia {
  justify-self: end; text-align: right;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--am);
}
.cliente--fuera .ejecutivo__ausencia { color: var(--am); }
/* La cifra que decide (activos) va en fuerte y la de actividad en tenue, en
   su propia línea bajo el nombre: así se lee cuál manda sin añadir columna. */
.ejecutivo__cargas { display: block; margin-top: 2px; font-size: 11.5px; }
.ejecutivo__activos { color: var(--tx1); font-weight: 600; }
.ejecutivo__activos--sin { color: var(--tx3); font-weight: 400; }
.ejecutivo__fechas { display: flex; gap: 6px; align-items: center; justify-self: end; }
/* Los `date` nativos traen un ancho propio holgado y desalineaban la fila. */
.ejecutivo__fechas input[type="date"] {
  width: 130px; padding: 3px 6px; font-size: 11px;
  font-family: "IBM Plex Mono", monospace;
}
.ejecutivo__fechas .boton { padding: 3px 9px; font-size: 11px; }

@media (max-width: 760px) {
  .ejecutivo { grid-template-columns: 1fr; gap: 6px; }
  .ejecutivo__ausencia, .ejecutivo__fechas { justify-self: start; text-align: left; }
  /* A 375 px las dos fechas y el botón no caben en una línea y empujaban la
     página 4 px: que pasen a la siguiente. */
  .ejecutivo__fechas { flex-wrap: wrap; }
}

/* --- Cartera: qué clientes atiende cada quien ----------------------------- */
/* Se lee de un vistazo, así que las casillas van en línea y envuelven, no en
   columna. Las casillas caben en una o más filas según el ancho; el aviso del
   comodín ocupa su propia línea. El select del desplegable de alta comparte la
   misma clase y también encaja bien con estas reglas. */

/* Fila propia de ancho completo: `.cliente` es una cuadrícula de cuatro
   columnas, y con la cartera dentro de una de ellas se corría de sitio todo lo
   demás de la fila. `1 / -1` va de la primera columna a la última. */
/* La cartera ocupa su propia fila: `.cliente` es una cuadricula de cuatro
   columnas y meterla en una de ellas corria de sitio todo lo demas. */
.cartera {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 2px;
}
/* En la fila va solo texto. Antes habia doce casillas por persona y la
   pantalla no se leia de un vistazo, que es lo unico que se le pide a una
   lista de equipo. */
.cartera__resumen { margin: 0; font-size: 12px; color: var(--tx2); flex: 1; min-width: 140px; }
.cartera__todos { color: var(--tx3); font-style: italic; }
.cartera__acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.cartera__acciones .boton { font-size: 11px; padding: 4px 9px; }

/* Rojo propio: `.boton--quitar` lo usan otras pantallas y cambiarlo ahi seria
   un efecto colateral. */
.boton--rojo { color: var(--rj); border-color: var(--rj); }
.boton--rojo:hover { background: var(--rj); border-color: var(--rj); color: #fff; }

/* --- Modales -------------------------------------------------------------- */
.modal {
  border: 1px solid var(--borde); border-radius: 4px; padding: 0;
  background: var(--panel); color: var(--tx1);
  width: calc(100% - 32px); max-width: 380px;
}
.modal--ancho { max-width: 560px; }
.modal::backdrop { background: rgba(0, 0, 0, .45); }
/* El alto se limita en el <dialog>, no solo en la caja: puesto solo dentro,
   el dialogo crecia mas que la ventana y salian DOS barras de scroll, la suya
   y la de la lista. `[open]` es obligatorio — un `display` sin el anularia el
   `display:none` que el navegador le pone cuando esta cerrado, y el modal se
   veria siempre. */
.modal[open] { display: flex; max-height: 85vh; }
.modal__caja { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.modal__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--borde);
}
.modal__cabecera h3 { margin: 0; font-size: 13px; font-weight: 600; }
.modal__cerrar {
  background: none; border: 0; color: var(--tx3); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 2px;
}
.modal__cerrar:hover { color: var(--tx1); }
.modal__nota { margin: 12px 14px 0; font-size: 11px; }
.modal__cuerpo { padding: 12px 14px; overflow-y: auto; font-size: 12px; }
.modal__pie {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--borde);
}

/* La lista de clientes: scrollea, porque son doce y pueden ser mas. */
.clientes-lista {
  list-style: none; margin: 10px 14px; padding: 0;
  display: grid; gap: 4px; align-content: start;
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
}

/* Cada cliente se enciende al marcarlo. El checkbox se oculta pero sigue
   existiendo: asi llega en el formulario y el teclado lo alcanza igual. */
.chip { display: block; cursor: pointer; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip span {
  display: block; padding: 6px 10px; font-size: 12px;
  border: 1px solid var(--borde); border-radius: 3px; color: var(--tx2);
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover span { border-color: var(--azs); color: var(--tx1); }
.chip input:checked + span { background: var(--azs); border-color: var(--azs); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--azs); outline-offset: 2px; }

/* --- Cola de aprobación (copiloto) -------------------------------------- */
.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pendiente {
  border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px;
  background: var(--panel);
}
.pendiente--resuelto { border-style: dashed; }
.pendiente__cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px;
}
.pendiente__ticket {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  color: var(--az); text-decoration: none;
}
.pendiente__ticket:hover { text-decoration: underline; }
.pendiente__etiqueta {
  display: block; font-size: 11px; color: var(--tx3); margin-bottom: 4px;
}
/* El texto es editable a propósito: la diferencia entre lo que escribió el
   agente y lo que envió una persona es la señal que se quiere medir. */
.pendiente__texto {
  width: 100%; resize: vertical; line-height: 1.5; font-size: 13px;
  font-family: inherit; padding: 9px 11px;
}
.pendiente__forma { margin-bottom: 8px; }
.pendiente__descarte { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.pendiente__descarte input[type="text"] { flex: 1; }

@media (max-width: 640px) {
  .pendiente__descarte { flex-direction: column; align-items: stretch; }
}

/* --- Salida del reparto --------------------------------------------------- */
/* La vista previa va en bloque, no en línea — se lee antes de confirmar algo
   que no se deshace. */
.salida { flex-basis: 100%; }
.salida__lista { list-style: none; margin: 6px 0; padding: 0; font-size: 12px; }
.salida__lista li { padding: 2px 0; }
.salida__abrir { flex-basis: 100%; margin-top: 6px; }

/* Un botón que borra a alguien del reparto no debe verse igual que "guardar":
   fondo lleno en vez de solo el borde, como `.boton--primario` pero en rojo. */
.boton--peligro { background: var(--rj); border-color: var(--rj); color: #fff; }
.boton--peligro:hover { background: var(--rj); color: #fff; opacity: .85; }

/* --- Plantillas de resolución ---------------------------------------------
   Lista por categoría. Un borrador se distingue de un vistazo: borde ámbar a la
   izquierda, fondo tenue y la etiqueta ámbar; una publicada lleva borde verde.
   Solo se usan los tokens de siempre, así claro y oscuro salen solos. */
.plantillas-grupo { padding: 4px 13px 8px; }
.plantillas-grupo h3 {
  margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--tx1);
  text-transform: none; letter-spacing: 0;
}
.plantillas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plantilla {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--borde); border-left-width: 3px;
  border-radius: 3px; background: var(--panel);
}
.plantilla--publicada { border-left-color: var(--vd); }
.plantilla--borrador {
  border-left-color: var(--am); border-style: dashed; border-left-style: solid;
  background: rgba(227,160,8,.07);
}
.plantilla--inactiva .plantilla__nombre a { color: var(--tx3); }
.plantilla__nombre { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.plantilla__nombre small { font-size: 11px; }
.plantilla__estado { display: flex; gap: 5px; flex-shrink: 0; }
.plantilla-barra {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.publicar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 320px; font-size: 11.5px; }
.publicar .tenue { flex: 1 1 220px; }

.editor__fila { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; }
.ayuda-lista { font-size: 11px; line-height: 1.5; }
.ayuda-lista code { color: var(--az); }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx); cursor: pointer; }
@media (max-width: 760px) { .editor__fila { grid-template-columns: 1fr; } }

/* Historial (modal). Las fijadas llevan borde azul: son los puntos de vuelta. */
.version__grupo {
  margin: 14px 0 6px; font-size: 11px; font-weight: 600; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .04em;
}
.version__grupo:first-child { margin-top: 0; }
.versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.version {
  padding: 8px 10px; border: 1px solid var(--borde); border-left-width: 3px;
  border-radius: 3px;
}
.version--fijada { border-left-color: var(--azs); background: var(--sel); }
.version__titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.version__detalle { margin: 3px 0 0; font-size: 11px; }
.version__acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.version__marca { display: flex; gap: 6px; flex: 1 1 220px; }
.version__marca input[type=text] { flex: 1; min-width: 0; }
.plantilla-barra { padding-top: 13px; padding-bottom: 4px; }

/* Clientes sin contacto directo: nombre | dominios (todo el ancho) | quitar.
   No usa la rejilla de `.cliente`: sus columnas fijas de la derecha dejaban
   el campo de dominios en un hueco de 70 px. */
.sin-contacto { list-style: none; margin: 0; padding: 0; }
.sin-contacto__fila {
  display: grid; align-items: center; gap: 6px 12px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  padding: 7px 0; border-bottom: 1px solid var(--linea);
}
.sin-contacto__fila:last-child { border-bottom: 0; }
.sin-contacto__dominios { display: flex; gap: 8px; align-items: center; min-width: 0; }
.sin-contacto__dominios input[type=text] { flex: 1; min-width: 0; width: 100%; }
.sin-contacto__aviso { grid-column: 2 / -1; color: var(--am); font-size: 12px; }
.sin-contacto__agregar {
  display: grid; gap: 8px 12px; align-items: center; margin-top: 12px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
}
@media (max-width: 640px) {
  .sin-contacto__fila, .sin-contacto__agregar { grid-template-columns: 1fr auto; }
  .sin-contacto__dominios, .sin-contacto__agregar input[type=text] { grid-column: 1 / -1; }
  .sin-contacto__aviso { grid-column: 1 / -1; }
}

/* Modo por tema: un desplegable por categoría, una fila por subcategoría. */
.tema { border-top: 1px solid var(--borde, rgba(127,127,127,.2)); padding: 6px 0; }
.tema__cabeza { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.tema__nombre { font-weight: 600; }
.tema--fuera .tema__nombre { opacity: .7; }
.tema__fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px 14px; }
.subtemas { list-style: none; margin: 4px 0 6px 14px; padding: 0; }
.subtema { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 5px 0;
           border-top: 1px dashed var(--borde, rgba(127,127,127,.15)); }
.subtema__nombre { flex: 1 1 220px; min-width: 0; }
.subtema--fuera .subtema__nombre { opacity: .6; }
.subtema__plantilla { flex: 0 0 auto; font-size: 12px; }

.subtema__crear { color: var(--az); }

/* --- Herramientas del MCP --- */
.subtema__herramientas { flex: 1 1 100%; list-style: none; margin: 2px 0 0 14px; padding: 0; }
.herr-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 2px 0;
            font-size: 12px; }
.herr-sub__nombre { flex: 0 1 240px; min-width: 0; }
.herr-sub select { font-size: 12px; background: var(--panel); color: inherit;
                   border: 1px solid var(--borde); border-radius: 4px; padding: 2px 6px; }
.herramientas { list-style: none; margin: 0; padding: 0; }
.herramienta { display: flex; gap: 12px; align-items: center; justify-content: space-between;
               flex-wrap: wrap; padding: 8px 0;
               border-top: 1px dashed var(--borde, rgba(127,127,127,.15)); }
.herramienta:first-child { border-top: 0; }
.herramienta__texto { display: grid; gap: 2px; flex: 1 1 280px; min-width: 0; }

/* --- Reporte a Slack --- */
.reportes { display: grid; gap: 10px; margin-bottom: 14px; }
.reportes__campo { display: grid; gap: 4px; max-width: 520px; }
.reportes__campo input { max-width: 220px; font-family: var(--mono, monospace); }
.reportes__envio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  border: 1px solid var(--borde, #ddd); border-radius: 6px; padding: 8px 12px; margin: 0; }
.reportes__envio legend { padding: 0 4px; font-weight: 600; }
.reportes__token, .reportes__ahora { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 12px; margin: 10px 0; }
.reportes__token small, .reportes__ahora small { flex-basis: 100%; }
.reportes__envios { margin-top: 10px; }

/* Gente del cliente con nombre: un bloque por portal, cada persona se abre para
   editarla. */
input[type=email] {
  font: inherit; font-size: 12.5px; padding: 6px 10px;
  border: 1px solid var(--borde); border-radius: 3px;
  background: var(--panel); color: var(--tx); width: 100%;
}
.gente-estado {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 14px;
  border: 1px solid var(--borde); border-radius: 4px; background: var(--hover);
}
.gente-estado__marca { width: 9px; height: 9px; border-radius: 50%; background: var(--tx3); }
.gente-estado--activa { border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.07); }
.gente-estado--activa .gente-estado__marca { background: var(--vd); box-shadow: 0 0 0 3px rgba(63,185,80,.18); }
.gente-estado__texto strong { display: block; color: var(--tx1); font-size: 12.5px; }
.gente-estado__texto small { color: var(--tx3); font-size: 11px; }
.gente-estado__conteo { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--tx2); white-space: nowrap; }

.gente-portales {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start;
}
.gente-portales--apagadas { opacity: .6; }
.gente-portal { border: 1px solid var(--borde); border-radius: 4px; background: var(--panel); }
.gente-portal__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; border-bottom: 1px solid var(--linea); background: var(--hover);
}
.gente-portal__nombre {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tx1);
}
.gente-portal__personas { list-style: none; margin: 0; padding: 0; }
.gente-portal__personas > li + li { border-top: 1px solid var(--linea); }

.gente-persona > summary {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 8px 11px; cursor: pointer; list-style: none;
}
.gente-persona > summary::-webkit-details-marker { display: none; }
.gente-persona > summary:hover { background: var(--hover); }
.gente-persona > summary:focus-visible { outline: 2px solid var(--azs); outline-offset: -2px; }
.gente-persona__inicial {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--sel); color: var(--az);
  font-size: 11px; font-weight: 600; font-family: "IBM Plex Mono", monospace;
}
.gente-persona__quien { min-width: 0; }
.gente-persona__quien strong { display: block; color: var(--tx1); font-size: 12.5px; }
.gente-persona__quien small {
  display: block; color: var(--tx3); font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.gente-persona__accion { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--tx3); }
.gente-persona__accion::after { content: " ▾"; }
.gente-persona[open] .gente-persona__accion::after { content: " ▴"; }
.gente-persona[open] > summary { background: var(--sel); }
.gente-persona__editar { padding: 10px 11px 12px; border-top: 1px dashed var(--linea); }
.gente-persona__quitar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
.gente-persona__quitar small { font-size: 10.5px; flex: 1 1 160px; }
.enlace-boton--peligro { color: var(--rj); }
.enlace-boton--peligro:hover:not(:disabled) { color: var(--rj); opacity: .8; }

.gente-form { display: grid; gap: 8px 10px; align-items: end; }
.gente-form label {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  font-size: 10.5px; color: var(--tx2); font-family: "IBM Plex Mono", monospace;
}
.gente-form input, .gente-form select { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.gente-form--editar { grid-template-columns: minmax(0, 1fr) auto; }
.gente-form--editar label:first-of-type { grid-column: 1 / -1; }
.gente-form--agregar {
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr) auto;
  margin-top: 16px; padding: 12px; border: 1px dashed var(--borde); border-radius: 4px;
}
.gente-form__titulo {
  grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .05em; font-family: "IBM Plex Mono", monospace;
}
.gente-vacia { padding: 18px; text-align: center; border: 1px dashed var(--borde); border-radius: 4px; }
@media (max-width: 640px) {
  .gente-estado { grid-template-columns: auto minmax(0, 1fr); }
  .gente-estado__conteo, .gente-estado form { grid-column: 2; }
  .gente-form--editar, .gente-form--agregar { grid-template-columns: minmax(0, 1fr); }
  .gente-portales { grid-template-columns: minmax(0, 1fr); }
}

/* Subtítulo dentro de una tarjeta (dominios corporativos bajo «sin contacto directo»). */
.subtitulo-tarjeta {
  margin: 18px 0 2px; font-size: 11px; font-weight: 600; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .05em; font-family: "IBM Plex Mono", monospace;
  padding-top: 14px; border-top: 1px solid var(--linea);
}

/* Días del reporte diario: casillas en una línea. */
.reportes__dias { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.reportes__dias label { display: inline-flex; align-items: center; gap: 3px; }

/* Últimos cambios de configuración (21-oct): los valores JSON largos ensanchaban la tabla. */
.tabla-cambios { table-layout: fixed; width: 100%; }
.tabla-cambios th:nth-child(1) { width: 110px; }
.tabla-cambios th:nth-child(2) { width: 22%; }
.tabla-cambios th:nth-child(5) { width: 20%; }
.tabla-cambios td { overflow-wrap: anywhere; vertical-align: top; }
.cambio-detalle summary { cursor: pointer; }
.cambio-detalle pre { max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 12px; margin: 6px 0 0; }

/* --- Tablero 3D del home (21-oct) --- */
.tablero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; }
@media (max-width: 1000px) { .tablero { grid-template-columns: 1fr; } }
.tablero-escena { position: relative; height: calc(100vh - 150px); min-height: 460px;
  border: 1px solid var(--borde); border-radius: 6px; overflow: hidden; background: var(--bg); }
.tablero-etiquetas { position: absolute; inset: 0; cursor: grab; }
.tablero-leyenda { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap;
  gap: 4px 12px; max-width: 70%; font-size: 12px; padding: 6px 10px;
  /* Fondo y texto del tema: con fondo blanco fijo, en modo oscuro el texto
     (claro) no se leía. Lo mismo en los nombres y las cuentas de las pilas. */
  background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--tx);
  border: 1px solid var(--borde); border-radius: 4px; pointer-events: none; }
.tablero-vistas { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 20px); }
.tablero-vistas button { font: 600 11px "IBM Plex Sans", sans-serif; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--tx); cursor: pointer; }
.tablero-vistas button:hover { background: var(--panel); }
.tablero-vistas button:focus-visible { outline: 2px solid var(--azs); outline-offset: 1px; }
.tablero-vistas button[aria-pressed="true"] { background: var(--sel); border-color: var(--azs); }
.tablero-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.tablero-leyenda small { flex-basis: 100%; }
.tablero-nombre { font: 600 11px "IBM Plex Sans", sans-serif; background: var(--panel); color: var(--tx);
  padding: 0 6px; border-radius: 8px; border: 1px solid var(--borde); white-space: nowrap; }
.tablero-nombre.agente { background: var(--sel); border-color: var(--azs); }
.tablero-nombre.ausente { opacity: .55; font-style: italic; }
.tablero-nombre.enlinea::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%;
  background: #2f9e5c; box-shadow: 0 0 0 1px color-mix(in srgb, #2f9e5c 30%, transparent); }
.tablero-nombre.visitante { background: color-mix(in srgb, var(--panel) 85%, transparent); font-weight: 500; }
.tablero-nombre { position: relative; }
.tablero-modulo { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px;
  font: 500 9px "IBM Plex Sans", sans-serif; color: var(--tx); opacity: .75; white-space: nowrap;
  text-shadow: 0 0 3px var(--panel), 0 0 3px var(--panel); pointer-events: none; }
.tablero-cuenta { font: 600 11px "IBM Plex Mono", monospace; color: var(--tx); background: color-mix(in srgb, var(--panel) 90%, transparent);
  padding: 0 5px; border-radius: 3px; }
.tablero-detalle { border: 1px solid var(--borde); border-radius: 6px; background: var(--panel); padding: 12px 14px;
  max-height: calc(100vh - 150px); overflow: auto; }
.tablero-detalle h2 { margin: 0 0 6px; font-size: 16px; }
.tablero-detalle h3 { margin: 14px 0 4px; font-size: 13px; }
.tablero-lista { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tablero-lista li { padding: 3px 0; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.tablero-seccion { margin: 8px 0; }
.tablero-seccion > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.tablero-sub { margin: 2px 0 2px 10px; }
.tablero-sub > summary { font-weight: 500; }
.tablero-punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.tablero-lista code { margin-right: 6px; }
.tablero-respaldo .tarjeta { margin-bottom: 12px; }

/* --- Mi avatar (21-oct): vista previa a la izquierda, opciones a la derecha --- */
.avatar-editor { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; }
.avatar-vista { position: sticky; top: 12px; }
.avatar-escena { height: 420px; border: 1px solid var(--borde); border-radius: 6px;
  background: radial-gradient(circle at 50% 35%, var(--panel), var(--nav)); overflow: hidden; }
.avatar-vista p { margin: 6px 2px; font-size: 12px; }
.avatar-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avatar-grupo { margin: 0; padding: 0; min-width: 0; }
.avatar-campo { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.avatar-opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.avatar-opciones label { cursor: pointer; }
.avatar-opciones input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-opciones .chip { display: inline-block; padding: 5px 10px; border: 1px solid var(--borde);
  border-radius: 999px; font-size: 12px; color: var(--tx2); background: var(--panel); }
.avatar-opciones label:hover .chip { background: var(--hover); color: var(--tx1); }
.avatar-opciones input:checked + .chip { border-color: var(--azs); background: var(--sel); color: var(--tx1); font-weight: 600; }
.avatar-opciones .muestra { display: inline-block; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--borde); box-shadow: inset 0 0 0 2px var(--panel); }
.avatar-opciones input:checked + .muestra { border-color: var(--azs); box-shadow: inset 0 0 0 2px var(--panel), 0 0 0 2px var(--azs); }
.avatar-opciones input:focus-visible + .chip, .avatar-opciones input:focus-visible + .muestra { outline: 2px solid var(--azs); outline-offset: 2px; }
.avatar-opciones .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.avatar-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .avatar-editor { grid-template-columns: 1fr; }
  .avatar-vista { position: static; }
  .avatar-escena { height: 300px; }
}

/* Tarjetas de acción del MCP (Aprobar) */
.accion__datos { display: grid; gap: 8px; margin: 10px 0; }
.accion__dato { display: grid; gap: 2px; }
.accion__dato label, .accion__dato span.etq { font-size: 0.85em; color: var(--tx2); }
.accion__nuevo {
  margin: 8px 0; padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--am); color: var(--am);
}
.accion__mandar { display: flex; gap: 16px; align-items: center; margin: 10px 0; border: 0; padding: 0; }
.accion__mandar legend { padding: 0; margin-bottom: 4px; }

/* --- Herramientas del MCP a mano ---------------------------------------- */
.fila-herramienta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 13px 8px; }
.formulario-herramienta { display: grid; gap: 10px; padding: 0 13px 13px; max-width: 520px; }
.formulario-herramienta label { display: grid; gap: 4px; font-size: 12px; color: var(--tx2); }
.formulario-herramienta .casilla { display: flex; align-items: center; gap: 8px; color: var(--tx1); }
.resumen-ejecucion { margin: 0; padding: 8px 13px 8px 28px; font-size: 12.5px; color: var(--tx1); }
.resultado-datos { margin: 8px 13px; font-size: 12px; display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; }
.resultado-datos dt { color: var(--tx3); }
.resultado-json { margin: 8px 13px; font-size: 12px; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--hover); padding: 10px; border-radius: 6px; }
.resultado-datos dd { margin: 0; color: var(--tx1); overflow-wrap: anywhere; }

/* --- Editor de flujos (static/editor_flujo.js) ------------------------------
   Izquierda: paleta y lista de pasos (se arrastran). Derecha: el paso elegido. */
.editor-flujo { border: 1px solid var(--borde); border-radius: 6px; padding: 12px; margin: 0; min-width: 0; }
.editor-flujo legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--tx1); }
.flujo__cuerpo { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.flujo__izq { flex: 1 1 320px; min-width: 280px; }
.flujo__der { flex: 1.3 1 400px; min-width: 300px; }
.flujo__paleta { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.flujo__chip {
  font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 12px; cursor: grab;
  border: 1px dashed var(--tx3); background: transparent; color: var(--tx);
}
.flujo__chip:hover, .flujo__chip:focus-visible { border-style: solid; background: var(--hover); }
.flujo__pasos { list-style: none; margin: 6px 0 0; padding: 0; }
.flujo__item { margin: 0; position: relative; }
.flujo__item--antes::before, .flujo__item--al-final::after {
  content: ""; display: block; height: 3px; border-radius: 2px; background: var(--azs); margin: 2px 0;
}
.flujo__vacio { padding: 14px; border: 1px dashed var(--borde); border-radius: 6px; color: var(--tx3); font-size: 12.5px; }
.flujo__bloque {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--borde);
  border-left: 5px solid var(--tx3); border-radius: 6px; background: var(--panel);
}
.flujo__bloque--sel { outline: 2px solid var(--azs); outline-offset: -1px; background: var(--sel); }
.flujo__bloque--arrastra { opacity: .45; }
.flujo__bloque--msg { border-left-color: #3b82f6; }
.flujo__bloque--ins { border-left-color: #a855f7; }
.flujo__bloque--her { border-left-color: #f59e0b; }
.flujo__bloque--con { border-left-color: #14b8a6; }
.flujo__bloque--esc { border-left-color: #ef4444; }
.flujo__bloque--fin { border-left-color: #22c55e; }
.flujo__bloque--swi { border-left-color: #ec4899; }
.flujo__bloque--sub { border-left-color: #6366f1; }
.flujo__chip--msg { border-color: #3b82f6; } .flujo__chip--ins { border-color: #a855f7; }
.flujo__chip--her { border-color: #f59e0b; } .flujo__chip--con { border-color: #14b8a6; }
.flujo__chip--esc { border-color: #ef4444; } .flujo__chip--fin { border-color: #22c55e; }
.flujo__chip--swi { border-color: #ec4899; } .flujo__chip--sub { border-color: #6366f1; }
.flujo__salida { border: 1px solid var(--borde); border-radius: 6px; padding: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; background: var(--hover); }
.flujo__asa { color: var(--tx3); cursor: grab; user-select: none; }
.flujo__elegir {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--tx); cursor: pointer;
}
.flujo__tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx3); }
.flujo__titulo { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.flujo__botones { display: flex; gap: 3px; }
.boton--mini { padding: 1px 7px; font-size: 12px; line-height: 1.5; }
.boton--mini:disabled { opacity: .35; cursor: default; }
.flujo__flecha { text-align: center; font-size: 11.5px; color: var(--tx3); margin: 2px 0 4px; min-height: 12px; }
.flujo__aviso { margin: 8px 0 0; font-size: 12.5px; color: var(--rj); }
.flujo__cabeza { font-weight: 600; margin: 6px 0 10px; color: var(--tx1); }
.flujo__form { display: flex; flex-direction: column; gap: 10px; }
.flujo__cond { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; font-size: 13px; }
.flujo__cond label { display: flex; flex-direction: column; gap: 3px; }
.flujo__param { min-width: 130px; padding-bottom: 6px; }
.flujo__prueba { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 6px; }
.flujo__fichas { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.flujo__nota { font-size: 12.5px; color: var(--tx2); margin: 2px 0; }
.flujo__error { color: var(--rj); font-size: 12.5px; }
.flujo__invalido { outline: 1px solid var(--rj); }
.flujo__arbol {
  font-family: "IBM Plex Mono", monospace; font-size: 12px; background: var(--hover);
  padding: 8px 10px; border-radius: 6px; overflow: auto; max-height: 260px;
}
.flujo__llave { color: var(--tx2); }
.flujo__campo {
  font: inherit; color: var(--tx1); background: rgba(245,158,11,.2); border: 0; border-radius: 3px;
  padding: 0 3px; cursor: pointer;
}
.flujo__campo:hover, .flujo__campo:focus-visible { background: rgba(245,158,11,.4); }
.flujo__cond select, .flujo__cond input[type=text] { flex: 1 1 160px; width: auto; min-width: 0; }

/* --- Chat --- */
.chat { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .chat { grid-template-columns: minmax(0, 1fr); } }
.chat-caja { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.chat-lateral .chat-caja { padding-bottom: 13px; }
.chat-lista { list-style: none; margin: 0; padding: 0 0 8px; }
.chat-lista a { display: block; padding: 6px 13px; overflow-wrap: anywhere; }
.chat-lista a[aria-current] { background: var(--sel); color: var(--tx1); }
.chat-titulo { font-size: 14px; margin: 0 0 12px; color: var(--tx1); overflow-wrap: anywhere; }
.chat-msg { border: 1px solid var(--borde); border-radius: 4px; padding: 10px 13px; margin-bottom: 10px; background: var(--panel); min-width: 0; }
.chat-msg--usuario { background: var(--sel); }
.chat-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-detalle { margin-top: 8px; font-size: 12px; }
.chat-detalle summary { cursor: pointer; color: var(--tx2); }
.chat-consulta pre { margin: 4px 0; padding: 8px; max-height: 260px; overflow: auto; background: var(--bg); border: 1px solid var(--linea); font-size: 11.5px; }
.chat-adjuntos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.chat-adjuntos img { display: block; max-width: 100%; max-height: 220px; }
.chat-adjuntos a { overflow-wrap: anywhere; }

/* Banco de pruebas en vivo (banco.html, _banco_hilo.html). Como en Zammad: el
   mensaje al proveedor es público y la nota interna se ve aparte (fondo ámbar y
   borde punteado). Solo tokens: el modo noche sale solo. */
.banco-campos { display: grid; gap: 8px; width: 100%; }
.banco-nueva { margin: 10px 13px; }
.banco-nueva summary { cursor: pointer; color: var(--az); }
.banco-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.banco-ficha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.banco-ficha br { flex-basis: 100%; content: ""; }
.chat-hilo > .riesgo { margin-bottom: 8px; }
.banco-art { border: 1px solid var(--borde); border-radius: 4px; padding: 10px 13px; margin-bottom: 10px; background: var(--panel); min-width: 0; }
.banco-art--proveedor, .banco-art--cliente { background: var(--sel); }
.banco-art--agente.banco-art--publico { border-left: 3px solid var(--vd); }
.banco-art--nota { border-style: dashed; border-color: var(--am); background: rgba(227,160,8,.08); }
.banco-art__cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.banco-art__asunto { margin: 0 0 4px; color: var(--tx2); font-size: 12px; }
.banco-turno { margin: -4px 0 12px; padding: 6px 13px; border-left: 2px solid var(--borde); font-size: 12px; }
.banco-turno summary { cursor: pointer; color: var(--tx2); }
.banco-turno--fallido { border-left-color: var(--rj); }
.banco-cambios, .banco-eventos { margin: 6px 0; padding-left: 18px; }
.banco-evento--simulado { color: var(--az); }
.banco-evento--real { color: var(--rj); border-color: var(--rj); }
.banco-evento--bloqueado { color: var(--rj); }
.banco-evento--aviso { color: var(--am); }
.banco-pendiente { border: 1px solid var(--am); border-radius: 4px; padding: 10px 13px; margin-bottom: 10px; background: var(--panel); }
.banco-pendiente h3 { font-size: 13px; margin: 0 0 8px; color: var(--tx1); }
.banco-caja { margin-top: 12px; }
.banco-caja textarea { width: 100%; }

.flujo__vistas { display: flex; gap: 4px; margin: 4px 0 10px; }
.flujo__vistas [aria-pressed="true"] { background: var(--azs); border-color: var(--azs); color: #fff; }
.legacy { margin: 10px 0; }
.legacy summary { cursor: pointer; color: var(--az); }

/* --- Vista de nodos (static/editor_nodos.js, maqueta v3) ----------------------
   En «Nodos» la columna izquierda se ensancha; el formulario del paso sigue al lado
   (o debajo si no cabe). Colores solo de los tokens del tema. */
.flujo__cuerpo:has(.flujo__lienzo:not([hidden])) > .flujo__izq { flex: 1 1 100%; }
.flujo__marco { position: relative; }
.flujo__marco > .flujo__der {
  position: absolute; z-index: 3; top: 7px; right: 1px; bottom: 1px; width: min(360px, 85%); min-width: 0;
  overflow: auto; padding: 4px 14px 14px; background: var(--panel); border-left: 1px solid var(--borde);
  border-radius: 0 10px 10px 0; box-shadow: -6px 0 16px color-mix(in srgb, var(--tx) 12%, transparent);
}
.flujo__cerrar { float: right; border: 0; background: none; color: var(--tx3); font: inherit; cursor: pointer; padding: 0 2px; }
.flujo__cerrar:hover, .flujo__cerrar:focus-visible { color: var(--tx1); }
.flujo__lienzo {
  position: relative; overflow: clip; height: 520px; margin-top: 6px; cursor: grab; touch-action: none; user-select: none;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--bg) radial-gradient(var(--borde) 1px, transparent 1px) 0 0 / 18px 18px;
}
.nodos { position: relative; transform-origin: 0 0; }
.flujo--arrastra, .flujo--arrastra * { user-select: none; }
.nodos__zoom {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; gap: 2px; padding: 2px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 7px; cursor: default;
}
.nodos__zoom button {
  min-width: 26px; height: 24px; padding: 0 6px; border: 0; border-radius: 5px; background: none;
  color: var(--tx2); font: inherit; font-size: 12px; cursor: pointer;
}
.nodos__zoom button:hover, .nodos__zoom button:focus-visible { background: color-mix(in srgb, var(--azs) 14%, var(--panel)); color: var(--tx1); outline: none; }
.nodos svg { position: absolute; inset: 0; pointer-events: none; }
.nodos__linea { fill: none; stroke: var(--tx3); stroke-width: 1.6; }
.nodos__linea--punteada { stroke-dasharray: 5 3; }
.nodos__linea--ciclo { stroke: var(--am); stroke-width: 1.8; }
.nodos__etq {
  position: absolute; font-size: 10.5px; line-height: 16px; color: var(--tx2); background: var(--bg);
  padding: 0 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
}
.nodos__txt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.nodos__etq--ciclo { color: var(--am); font-weight: 600; }
.nodos__pastilla { border: 1px solid var(--borde); border-radius: 9px; padding: 0 7px; background: var(--panel); }
.nodos__pastilla--terminar { border-color: var(--vd); color: var(--vd); }
.nodos__pastilla--escalar { border-color: var(--rj); color: var(--rj); }
.nodos__pastilla--roto { border: 1.5px solid var(--rj); color: var(--rj); font-weight: 600; }
.nodos__nodo {
  position: absolute; width: 64px; padding: 0; border: 0; background: none; color: var(--tx);
  font: inherit; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  touch-action: none;
}
.nodos__caja {
  position: relative; width: 64px; height: 64px; border-radius: 14px; background: var(--panel);
  border: 1.5px solid var(--borde); display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.nodos__nodo:hover .nodos__caja { border-color: var(--tx3); }
.nodos__nodo:focus-visible { outline: none; }
.nodos__nodo:focus-visible .nodos__caja { outline: 2px solid var(--azs); outline-offset: 2px; }
.nodos__nodo--switch .nodos__caja { background: color-mix(in srgb, var(--am) 12%, var(--panel)); }
.nodos__nodo--subflujo .nodos__caja { border-style: dashed; border-color: var(--vd); background: color-mix(in srgb, var(--vd) 8%, var(--panel)); }
.nodos__nodo--terminar .nodos__caja { background: color-mix(in srgb, var(--vd) 14%, var(--panel)); }
.nodos__nodo--escalar .nodos__caja { background: color-mix(in srgb, var(--rj) 12%, var(--panel)); }
.nodos__nodo--sel .nodos__caja { border-color: var(--azs); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azs) 30%, transparent); }
.nodos__nodo--roto .nodos__caja { border: 2px solid var(--rj); }
.nodos__nodo--roto .nodos__nom { color: var(--rj); }
.nodos__h {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--panel);
  border: 1.5px solid var(--tx3); right: -6px; top: 27px;
}
.nodos__h--entrada { right: auto; left: -6px; }
.nodos__nom { margin-top: 6px; width: 150px; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.nodos__sub { width: 150px; font-size: 10.5px; color: var(--tx3); }
.nodos__fichas { width: 150px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 2px; }
.nodos__ficha {
  font-size: 10px; padding: 0 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--az) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--az) 45%, var(--panel));
}
/* Construir desde los nodos: el puntito de cada salida con destino, el «+» y su menú. */
.nodos__h--salida { position: static; flex: none; cursor: crosshair; }
.nodos__h--salida:hover { border-color: var(--azs); }
.nodos__mas {
  flex: none; width: 16px; height: 16px; padding: 0; border: 1px dashed var(--tx3); border-radius: 4px;
  background: var(--panel); color: var(--tx3); font: inherit; font-size: 12px; line-height: 13px; cursor: pointer;
}
.nodos__mas:hover, .nodos__mas:focus-visible { border-color: var(--azs); color: var(--azs); }
.nodos__linea--nueva { stroke: var(--azs); stroke-dasharray: 4 3; }
.nodos__menu {
  position: absolute; z-index: 2; display: flex; flex-direction: column; min-width: 190px; padding: 4px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tx) 18%, transparent);
}
.nodos__menu button {
  border: 0; border-radius: 5px; padding: 5px 8px; background: none; color: var(--tx);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.nodos__menu button:hover, .nodos__menu button:focus-visible { background: color-mix(in srgb, var(--azs) 14%, var(--panel)); outline: none; }
/* El camino de una prueba sobre los nodos (static/editor_nodos.js, pintarCamino). */
.nodos__linea--camino { stroke: var(--az); stroke-width: 3; }
.nodos__nodo--camino .nodos__caja { border: 2px solid var(--az); }
.nodos__orden {
  position: absolute; top: -9px; left: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--az); color: var(--panel); font-size: 11px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.nodos__parada {
  position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 8px; align-items: center; max-width: 60%;
  padding: 3px 8px; background: var(--panel); border: 1px solid var(--az); border-radius: 7px;
  font-size: 12px; color: var(--tx); cursor: default;
}
.nodos__parada button { border: 0; padding: 0; background: none; color: var(--az); font: inherit; cursor: pointer; }
.camino__otro { position: absolute; inset: 0; z-index: 4; background: var(--bg); }
.camino__es { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.camino__entrada { margin: 8px 0; }
.camino__que { font-size: 12px; font-weight: 600; color: var(--az); }
.camino__rot { margin-top: 4px; font-size: 10.5px; color: var(--tx3); text-transform: uppercase; letter-spacing: .04em; }
.camino__pares { display: grid; grid-template-columns: max-content 1fr; gap: 2px 8px; margin: 2px 0; font-size: 12px; }
.camino__pares dt { color: var(--tx2); }
.camino__pares dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
pre.camino__pares, .camino__pares pre {
  display: block; margin: 0; padding: 4px 6px; max-height: 220px; overflow: auto; white-space: pre-wrap;
  font-size: 11px; background: var(--bg); border-radius: 5px;
}
/* Banco: el camino de cada turno en nodos, junto al hilo (debajo si no cabe). */
.banco-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.banco-dos__hilo { min-width: 0; }
.banco-camino { position: sticky; top: 12px; min-width: 0; }
.banco-camino__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.banco-camino__cab h3 { margin: 0; font-size: 13px; color: var(--tx1); }
.banco-camino .flujo__lienzo { height: 480px; }
.banco-camino .flujo__marco > .flujo__der { width: min(320px, 80%); }
@media (max-width: 1200px) {
  .banco-dos { grid-template-columns: minmax(0, 1fr); }
  .banco-camino { position: static; }
}
/* «Probar» en la vista de nodos (static/editor_probar.js): una columna a la izquierda del lienzo. */
.nodos__zoom .nodos__probar { color: var(--az); font-weight: 600; border-left: 1px solid var(--borde); border-radius: 0 5px 5px 0; }
.probar {
  position: absolute; z-index: 3; top: 7px; left: 1px; bottom: 1px; width: min(300px, 45%); overflow: auto;
  padding: 4px 12px 12px; background: var(--panel); border-right: 1px solid var(--borde); border-radius: 10px 0 0 10px;
  box-shadow: 6px 0 16px color-mix(in srgb, var(--tx) 12%, transparent);
}
.flujo__marco--probando .nodos__zoom, .flujo__marco--probando .nodos__parada { left: calc(min(300px, 45%) + 10px); }
.probar__form { display: grid; gap: 8px; }
.probar__form textarea { width: 100%; }
.probar__log { display: grid; gap: 6px; }
.probar__msg { font-size: 12px; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 7px; overflow-wrap: anywhere; }
.probar__msg p { margin: 2px 0; }
.probar__msg--yo { background: color-mix(in srgb, var(--az) 8%, var(--panel)); }
.probar__nota { color: var(--tx2); }
.probar__estado:empty { display: none; }
.nodos__tema { display: inline-flex; gap: 4px; align-items: center; color: var(--tx2); }
.nodos__tema select { font: inherit; font-size: 12px; padding: 0 4px; background: var(--panel); color: var(--tx); border: 1px solid var(--borde); border-radius: 5px; }
/* Fichas de datos y vista previa del texto del paso (editor_flujo.js, pieza 4). */
.flujo__datos { margin: 0 0 12px; padding: 6px 8px 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--bg); }
.flujo__datos-grupo summary { cursor: pointer; font-size: 12px; color: var(--tx2); margin: 4px 0; }
.flujo__fichas-datos { display: flex; flex-wrap: wrap; gap: 4px; }
.flujo__dato {
  display: inline-flex; gap: 5px; align-items: baseline; padding: 1px 8px; border-radius: 9px; font-size: 12px; cursor: grab;
  color: var(--tx); background: color-mix(in srgb, var(--az) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--az) 45%, var(--panel));
}
.flujo__dato small { color: var(--tx3); font-size: 10.5px; }
.flujo__dato:hover, .flujo__dato:focus-visible { border-color: var(--azs); outline: none; }
.flujo__previa { margin-top: 6px; padding: 6px 8px; border: 1px dashed var(--borde); border-radius: 7px; white-space: pre-wrap; font-size: 12.5px; line-height: 1.7; color: var(--tx); }
.flujo__previa-ref, .flujo__previa-img {
  display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11.5px; line-height: 1.5; white-space: nowrap;
  background: color-mix(in srgb, var(--az) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--az) 45%, var(--panel));
}
.flujo__previa-img { background: var(--panel); border-color: var(--borde); color: var(--tx2); }
.flujo__previa-ref--falta { color: var(--rj); border-color: var(--rj); background: color-mix(in srgb, var(--rj) 10%, var(--panel)); font-weight: 600; }
.flujo__previa-ref--sin { color: var(--tx2); border-style: dashed; background: var(--panel); }
/* «Escríbela en palabras» + «Entender» (editor_flujo.js, pieza 4). */
.flujo__palabras { margin: 4px 0 8px; padding: 6px 8px; border: 1px dashed var(--borde); border-radius: 8px; }
.flujo__palabras-res:empty { display: none; }
.flujo__propuesta { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--az); border-radius: 7px; background: color-mix(in srgb, var(--az) 6%, var(--panel)); }
.flujo__propuesta p { margin: 2px 0; }
.flujo__dato--ruta { border-style: dashed; }
/* Asistente del editor (static/editor_asistente.js): un bot abajo a la derecha que abre el chat.
   El brillo es cian fijo (se ve de día y de noche); el metal, el borde y el fondo, del tema. */
.asistente-avatar {
  position: fixed; right: 16px; bottom: 14px; z-index: 51; width: 68px; height: 68px; padding: 2px;
  border: 1px solid var(--borde); border-radius: 50%; background: var(--panel); cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tx) 20%, transparent);
}
.asistente-avatar:hover, .asistente-avatar:focus-visible { border-color: var(--azs); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--azs) 35%, transparent); }
.asistente-avatar[aria-expanded="true"] { border-color: var(--azs); }
.asistente-avatar svg { display: block; overflow: visible; }
.av__metal { fill: color-mix(in srgb, var(--tx3) 22%, var(--panel)); stroke: color-mix(in srgb, var(--tx3) 60%, var(--panel)); stroke-width: 1.2; }
.av__metal-osc { fill: color-mix(in srgb, var(--tx3) 55%, var(--panel)); stroke: color-mix(in srgb, var(--tx3) 55%, var(--panel)); }
.av__visor { fill: #0b1624; }
.av__brillo { fill: #34d3ff; filter: drop-shadow(0 0 1.6px #34d3ff); }
.av__luz { fill: #34d3ff; filter: drop-shadow(0 0 2.5px #34d3ff); animation: av-late 1.8s ease-in-out infinite; }
.av__halo { fill: #34d3ff; opacity: .3; animation: av-halo 3.2s ease-in-out infinite; }
.av__puntos { fill: var(--azs); opacity: 0; }
.av__todo { animation: av-flota 3.2s ease-in-out infinite; }
.av__ojos { animation: av-mira 7s ease-in-out infinite, av-parpadea 4.2s infinite; }
.asistente-avatar[aria-expanded="true"] .av__brillo { filter: drop-shadow(0 0 3px #34d3ff); }
.asistente-avatar--saluda .av__todo { animation: av-salto .6s ease-out; }
.asistente-avatar--saluda .av__brillo { filter: drop-shadow(0 0 5px #34d3ff) brightness(1.25); }
.asistente-avatar--pensando .av__ojos { animation: av-escanea .9s ease-in-out infinite alternate, av-parpadea 4.2s infinite; }
.asistente-avatar--pensando .av__luz { animation-duration: .45s; }
.asistente-avatar--pensando .av__puntos { opacity: 1; }
.asistente-avatar--pensando .av__puntos circle { animation: av-punto 1.2s infinite; }
.asistente-avatar--pensando .av__puntos circle:nth-child(2) { animation-delay: .2s; }
.asistente-avatar--pensando .av__puntos circle:nth-child(3) { animation-delay: .4s; }
@keyframes av-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes av-mira { 0%, 70%, 100% { transform: translateX(0); } 76%, 86% { transform: translateX(4px); } 90%, 94% { transform: translateX(-3px); } }
@keyframes av-escanea { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
@keyframes av-salto { 0% { transform: translateY(0); } 35% { transform: translateY(-10px); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes av-parpadea { 0%, 93%, 100% { opacity: 1; } 96% { opacity: .1; } }
@keyframes av-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes av-halo { 0%, 100% { opacity: .18; } 50% { opacity: .5; } }
@keyframes av-punto { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* Quien apaga las animaciones del sistema no quiere cosas que se desplacen; el brillo (opacidad) sí se queda, así el bot se ve vivo sin moverse. */
  .av__todo, .asistente-avatar--saluda .av__todo { animation: none; }
  .av__ojos, .asistente-avatar--pensando .av__ojos { animation: av-parpadea 4.2s infinite; }
}
.asistente {
  position: fixed; right: 16px; bottom: 92px; z-index: 50; width: min(380px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 110px));
  display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; background: var(--panel); color: var(--tx);
  border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 8px 28px color-mix(in srgb, var(--tx) 22%, transparent);
}
/* Pegado al avatar: su borde derecho alineado con el del bot y 10 px encima, con una colita que
   apunta al centro del bot (right 16 + 68/2). */
.asistente::after {
  content: ""; position: absolute; right: 43px; bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--panel); border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.asistente[hidden] { display: none; }
.asistente__nota { margin: 0; font-size: 11.5px; }
.asistente__log { flex: 1; min-height: 80px; overflow: auto; display: grid; gap: 6px; align-content: start; }
.asistente__msg { font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--borde); overflow-wrap: anywhere; }
.asistente__msg p { margin: 2px 0; white-space: pre-wrap; }
.asistente__msg ol, .asistente__msg ul { margin: 2px 0; padding-left: 20px; }
.asistente__msg--usuario { background: color-mix(in srgb, var(--az) 8%, var(--panel)); }
.asistente__msg--error { border-color: var(--rj); color: var(--rj); }
.asistente textarea { width: 100%; resize: vertical; }

/* --- Por calificar (calificación al cierre) --- */
.contador {
  display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; text-align: center;
  background: var(--azs); color: var(--tx1); font-size: 10.5px; line-height: 17px; font-weight: 600;
}
.cal-resp { white-space: pre-wrap; margin: 8px 0; font-size: 12.5px; color: var(--tx2); }
.cal-form { display: grid; gap: 10px; margin-top: 8px; }
.cal-no { display: none; gap: 10px; }
.cal-form:has(input[value=no]:checked) .cal-no { display: grid; }
.cal-no label { display: grid; gap: 4px; font-size: 12px; color: var(--tx2); }
.cal-no select, .cal-no textarea { width: 100%; font: inherit; }
.cal-ajena { margin: 8px 0 0; font-size: 12px; color: var(--tx3); font-family: "IBM Plex Mono", monospace; }