/* OJO (2026-11-11): el color, la letra y el lateral los decide marca/linex.css (marca Linex, la de
   las demás apps de Athena) y la estructura del shell, shell.css. Los valores de :root de aquí son
   solo el respaldo si esas hojas no cargan. */
/* Consola Mesa de Servicios N3 — el mismo sistema visual que la app de Nivel 2
   (mesa-servicio-n2/public/estilos.css): superficies y tinta por tokens, un
   solo acento (azul), un gris de desénfasis y cuatro colores de estado que se
   usan siempre con ícono o etiqueta, nunca como "serie". Claro y oscuro con
   los mismos nombres. El tema sigue al sistema salvo que el analista lo fije
   (data-theme="light" | "dark", lo pone app.js). */

:root {
  color-scheme: light;
  --plano: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --borde: #e2e5ea;
  --borde-suave: #eef0f3;
  --texto: #14171f;
  --texto-2: #545b68;
  --texto-3: #8a919d;
  --acento: #2a78d6;
  --acento-tinta: #1c5cab;
  --acento-suave: #cde2fb;
  --acento-fondo: #eaf2fd;
  --gris-serie: #cfd4db;
  --ok: #0ca30c;
  --ok-tinta: #006300;
  --ok-fondo: #e6f6e6;
  --aviso: #fab219;
  --aviso-tinta: #7a5200;
  --aviso-fondo: #fff4d6;
  --serio: #ec835a;
  --serio-tinta: #8a3c1a;
  --serio-fondo: #fdeae2;
  --critico: #d03b3b;
  --critico-tinta: #9f2626;
  --critico-fondo: #fbe7e7;
  --sombra: 0 1px 2px rgba(20, 23, 31, 0.06), 0 4px 16px rgba(20, 23, 31, 0.04);
  --radio: 12px;
  --lateral: 236px;
  --fuente: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* Nombres de la hoja anterior. Siguen resolviendo, por si algún estilo en
     línea o un script los usa: apuntan a los tokens nuevos. */
  --fondo: var(--plano);
  --fondo-2: var(--superficie-2);
  --panel: var(--superficie);
  --panel-2: var(--superficie-2);
  --suave: var(--texto-2);
  --tenue: var(--texto-3);
  --verde: var(--ok-tinta);
  --ambar: var(--aviso-tinta);
  --rojo: var(--critico-tinta);
  --r: var(--radio);
  --r-s: 9px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --plano: #0f1012; --superficie: #1a1b1e; --superficie-2: #202125; --borde: #2c2e33; --borde-suave: #26282c;
    --texto: #f3f3f1; --texto-2: #b9bcc4; --texto-3: #7f848e;
    --acento: #3987e5; --acento-tinta: #86b6ef; --acento-suave: #184f95; --acento-fondo: #15243a;
    --gris-serie: #3a3d44;
    --ok: #0ca30c; --ok-tinta: #5fd35f; --ok-fondo: #12301a;
    --aviso: #fab219; --aviso-tinta: #f6c861; --aviso-fondo: #3a2c0c;
    --serio: #ec835a; --serio-tinta: #f6a98b; --serio-fondo: #3a2114;
    --critico: #d03b3b; --critico-tinta: #f08080; --critico-fondo: #3b1717;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0f1012; --superficie: #1a1b1e; --superficie-2: #202125; --borde: #2c2e33; --borde-suave: #26282c;
  --texto: #f3f3f1; --texto-2: #b9bcc4; --texto-3: #7f848e;
  --acento: #3987e5; --acento-tinta: #86b6ef; --acento-suave: #184f95; --acento-fondo: #15243a;
  --gris-serie: #3a3d44;
  --ok: #0ca30c; --ok-tinta: #5fd35f; --ok-fondo: #12301a;
  --aviso: #fab219; --aviso-tinta: #f6c861; --aviso-fondo: #3a2c0c;
  --serio: #ec835a; --serio-tinta: #f6a98b; --serio-fondo: #3a2114;
  --critico: #d03b3b; --critico-tinta: #f08080; --critico-fondo: #3b1717;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fuente); font-size: 14.5px; line-height: 1.45;
  color: var(--texto); background: var(--plano); -webkit-font-smoothing: antialiased;
}
a { color: var(--acento-tinta); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.02rem; }
h3 { font-size: 0.92rem; color: var(--texto-2); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 6px 0 10px; padding-left: 22px; }
li { margin: 3px 0; }
button { font: inherit; }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
::selection { background: var(--acento-suave); }

/* ------------------------------------------------------------ estructura */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 18px 14px; background: var(--superficie); border-right: 1px solid var(--borde);
  overflow-y: auto;
}
.marca { display: flex; gap: 10px; align-items: center; padding: 4px 6px 18px; }
.logo {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  background: var(--acento); color: var(--sobre-acento); font-weight: 800; letter-spacing: 0.02em;
}
.marca-txt strong { display: block; font-size: 0.95rem; }
.marca-txt small { color: var(--texto-3); font-size: 0.78rem; }

#pestanas { display: flex; flex-direction: column; gap: 2px; }
#pestanas .grupo, nav .grupo {
  margin: 12px 8px 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-3); font-weight: 700;
}
#pestanas .grupo:first-child { margin-top: 2px; }
#pestanas button {
  display: flex; gap: 10px; align-items: center; justify-content: flex-start; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--texto-2);
  font-weight: 500; text-align: left; cursor: pointer; white-space: nowrap;
}
#pestanas button:hover { background: var(--superficie-2); color: var(--texto); }
#pestanas button.activa { background: var(--acento-fondo); color: var(--acento-tinta); font-weight: 650; }
#pestanas .ic { width: 20px; text-align: center; }
/* Vistas que dependen de un servidor que no está: se atenúan, no se ocultan.
   El analista debe ver que la función existe y leer por qué no está aquí. */
#pestanas button.no-disponible { opacity: 0.55; }
#pestanas button.no-disponible::after {
  content: "en espera"; margin-left: auto; font-size: 0.66rem; letter-spacing: 0.03em; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-3);
}

.pie-lateral {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--borde-suave);
}
.solo-lectura {
  font-size: 0.72rem; color: var(--texto-3); border: 1px solid var(--borde);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}

.area { min-width: 0; display: flex; flex-direction: column; }
.cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 28px 12px;
}
.cabecera .sub { color: var(--texto-2); font-size: 0.9rem; margin-top: 2px; }
.indicadores { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Los chips de la cabecera son indicadores: un punto de estado y el texto. */
.cabecera .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde); font-size: 0.78rem; font-weight: 500;
  color: var(--texto-2); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis;
}
.cabecera .chip::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gris-serie); }
.cabecera .chip.ok::before { background: var(--ok); }
.cabecera .chip.no::before { background: var(--critico); }
.cabecera .chip.aviso-chip::before { background: var(--aviso); }
.cabecera button.chip { cursor: pointer; }
.cabecera button.chip::before { display: none; }
.cabecera button.chip:hover { border-color: var(--critico); color: var(--critico-tinta); background: var(--superficie); }

main { padding: 6px 28px 60px; width: 100%; max-width: 1600px; }
.vista.oculta, .oculta { display: none !important; }

/* ---------------------------------------------------------------- botones */
/* Un botón sin clase es el secundario; `.primario` es el de acción. Las
   clases `.btn …` existen para el marcado que viene de la app de Nivel 2. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--acento-tinta); font-weight: 600;
  cursor: pointer; white-space: nowrap; line-height: 1.3; text-decoration: none;
}
button:hover, .btn:hover { background: var(--superficie-2); }
button.primario, .btn.primario { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
button.primario:hover, .btn.primario:hover { background: var(--acento); filter: brightness(1.06); }
button:disabled, .btn:disabled { opacity: 0.6; cursor: wait; filter: none; }
.btn.secundario, button.secundario { background: var(--superficie); color: var(--acento-tinta); border-color: var(--borde); }
.btn.fantasma, button.fantasma { background: transparent; color: var(--texto-2); border-color: transparent; padding: 6px 10px; font-weight: 500; }
.btn.fantasma:hover, button.fantasma:hover { background: var(--superficie-2); }
.btn.chico, button.chico { padding: 5px 10px; font-size: 0.82rem; border-radius: 7px; }
.btn.enlace, button.enlace { background: none; border: none; color: var(--acento-tinta); padding: 0; }

/* ------------------------------------------------------------ formularios */
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 9px; padding: 9px 12px; width: 100%; min-width: 0;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
input[type="checkbox"] { width: auto; accent-color: var(--acento); margin: 0; }
label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
label > input, label > select, label > textarea { margin-top: 6px; font-weight: 400; }
label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 6px; }
label > input[type="checkbox"] { margin-top: 0; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.fila-campos label { flex: 1 1 220px; margin: 0; }
.fila-campos label.ancho, label.ancho { flex: 1 1 100%; }
.acciones { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.crece { flex: 1; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; }
.filtros input { flex: 1 1 260px; width: auto; }
.filtros select { flex: 0 0 200px; width: auto; }
.filtros label { display: inline-flex; gap: 6px; align-items: center; font-size: 0.84rem; margin: 0; }

.barra-sync {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
  background: var(--superficie-2); border-radius: 10px; font-size: 0.86rem; color: var(--texto-2);
}
.barra-sync .conteo { font-size: 0.84rem; }
.barra-sync label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.barra-sync label > select { margin-top: 0; width: auto; }
.barra-sync button { padding: 6px 12px; font-size: 0.86rem; }

/* ----------------------------------------------------------------- chips */
.chip, .etiqueta, .pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; line-height: 1.5; background: var(--superficie-2);
  color: var(--texto-2); border: 1px solid var(--borde-suave); white-space: nowrap; vertical-align: middle;
}
.etiqueta { font-size: 0.72rem; margin-left: 2px; }
.etiqueta.oficial, .etiqueta.reporte, .pill.verde { background: var(--ok-fondo); color: var(--ok-tinta); border-color: transparent; }
.etiqueta.lectura, .etiqueta.wiki, .etiqueta.tipificacion, .chip.acento { background: var(--acento-fondo); color: var(--acento-tinta); border-color: transparent; }
.etiqueta.escritura, .pill.rojo, .chip.critico { background: var(--critico-fondo); color: var(--critico-tinta); border-color: transparent; }
.etiqueta.proceso, .pill.ambar, .chip.aviso { background: var(--aviso-fondo); color: var(--aviso-tinta); border-color: transparent; }
.etiqueta.escalamiento, .chip.serio { background: var(--serio-fondo); color: var(--serio-tinta); border-color: transparent; }
.etiqueta.procedimiento, .pill.gris { background: var(--superficie-2); color: var(--texto-2); border-color: var(--borde-suave); }

/* ---------------------------------------------------------------- paneles */
.panel {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 18px 20px; box-shadow: var(--sombra); margin-bottom: 14px;
}
.panel h2 { margin-bottom: 4px; }
.panel h3 { margin: 18px 0 8px; }
.panel > p { margin-bottom: 10px; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ayuda { color: var(--texto-3); font-size: 0.82rem; margin: 0 0 12px; }
.conteo { color: var(--texto-3); font-size: 0.8rem; }
.vacio { padding: 36px; text-align: center; color: var(--texto-3); }
.dos-columnas { display: grid; grid-template-columns: 330px 1fr; gap: 14px; align-items: start; }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ------------------------------------------------------------- buscador */
.hero {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px 22px 16px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.caja-buscar { display: flex; align-items: center; gap: 10px; }
.caja-buscar .lupa { font-size: 1.1rem; opacity: 0.7; }
.caja-buscar input { flex: 1; font-size: 1.05rem; padding: 12px 14px; border-radius: 10px; background: var(--superficie-2); }
.caja-buscar .conteo { white-space: nowrap; }
.ejemplos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ejemplos button {
  padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde-suave);
}
.ejemplos button:hover { background: var(--acento-fondo); color: var(--acento-tinta); }

#resultados:not(:empty) {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 6px; margin-bottom: 14px; box-shadow: var(--sombra);
}
#resultados .vacio { padding: 24px; }
.resultado {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 9px; background: transparent;
  padding: 11px 13px; color: inherit; font-weight: 400; cursor: pointer; white-space: normal;
}
.resultado + .resultado { border-top: 1px solid var(--borde-suave); border-radius: 0; }
.resultado:hover { background: var(--superficie-2); }
.resultado .fila1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resultado .titulo { font-weight: 600; font-size: 0.92rem; }
.resultado .ctx { color: var(--texto-3); font-size: 0.78rem; margin-top: 3px; }
.resultado .frag {
  color: var(--texto-2); font-size: 0.84rem; margin-top: 6px; line-height: 1.5;
  border-left: 2px solid var(--borde); padding-left: 10px;
}
mark { background: var(--aviso-fondo); color: var(--aviso-tinta); border-radius: 3px; padding: 0 2px; }

/* --------------------------------------------------------- fichas (KPI) */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tarjeta {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; box-shadow: var(--sombra); cursor: default; white-space: normal; line-height: 1.45;
}
button.tarjeta, .tarjeta[data-vista] { cursor: pointer; }
button.tarjeta:hover { border-color: var(--acento); background: var(--superficie); }
.tarjeta .cifra { font-size: 1.9rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.tarjeta .rot { font-size: 0.8rem; color: var(--texto-2); font-weight: 600; margin-top: 6px; }
.tarjeta .sub { font-size: 0.78rem; color: var(--texto-3); margin-top: 4px; }
.tarjeta.rojo { border-color: var(--critico); }
.tarjeta.ambar { border-color: var(--aviso); }
.tarjeta.verde { border-color: var(--ok); }
.tarjeta.rojo .cifra { color: var(--critico-tinta); }
.tarjeta.ambar .cifra { color: var(--aviso-tinta); }
.tarjeta.verde .cifra { color: var(--ok-tinta); }

/* ------------------------------------------------------------------ listas */
.lista { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; display: grid; gap: 7px; align-content: start; }
.lista li { margin: 0; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; background: var(--superficie-2); }
.lista li:hover { border-color: var(--acento); }
.lista li.sel { border-color: var(--acento); background: var(--acento-fondo); }
.lista li strong { display: block; font-size: 0.88rem; font-weight: 600; }
.lista li span { color: var(--texto-3); font-size: 0.78rem; }

/* ------------------------------------------------------------------ tablas */
.tabla-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
/* Sin tabla adentro (un "sin registros") no hay caja que dibujar. */
.tabla-scroll:not(:has(table)) { border: 0; background: transparent; }
.tabla-scroll > p { margin: 0; padding: 4px 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th {
  position: sticky; top: 0; z-index: 1; background: var(--superficie-2); text-align: left; font-weight: 650;
  color: var(--texto-2); padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap;
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
tbody tr:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Fichas clave/valor: el th es el rótulo de la fila, no una cabecera pegajosa. */
tbody th, table > tr > th { position: static; white-space: normal; width: 1%; min-width: 120px; }
.burbuja table, .burbuja th, .burbuja td { font-size: 0.82rem; }

/* ------------------------------------------------------------------ avisos */
.aviso { background: var(--aviso-fondo); color: var(--aviso-tinta); border-radius: 9px; padding: 10px 14px; margin: 12px 0; font-size: 0.86rem; }
.aviso.rojo { background: var(--critico-fondo); color: var(--critico-tinta); }
.aviso.verde { background: var(--ok-fondo); color: var(--ok-tinta); }
.aviso ul { margin: 7px 0 0; padding-left: 20px; }
.aviso a { color: inherit; font-weight: 600; }
.aviso code { background: rgba(0, 0, 0, 0.07); color: inherit; }
.panel.aviso-sin-servidor { border-left: 4px solid var(--aviso); }

/* ------------------------------------------------------------------ código */
pre {
  background: #0f172a; color: #d1d5db; padding: 14px 16px; border-radius: 10px; overflow: auto;
  font-size: 0.78rem; line-height: 1.6; max-height: 420px; margin: 8px 0 12px; font-family: var(--mono);
}
pre code { font-size: inherit; }
:not(pre) > code { background: var(--superficie-2); padding: 1px 5px; border-radius: 5px; color: var(--acento-tinta); }
.bloque-codigo { margin: 10px 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.bc-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 10px;
  background: var(--superficie-2); font-size: 0.7rem; color: var(--texto-3); letter-spacing: 0.04em; text-transform: uppercase;
}
.bc-copiar { padding: 3px 10px; font-size: 0.74rem; text-transform: none; letter-spacing: 0; border-radius: 6px; }
.bloque-codigo pre { margin: 0; border-radius: 0; max-height: 340px; }

details { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; background: var(--superficie-2); }
details[open] { background: var(--superficie); }
summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--texto); }

/* ------------------------------------------------------ hilos del agente */
.agente-cols { display: grid; grid-template-columns: 262px 1fr; gap: 14px; align-items: start; }
.panel-hilos { display: flex; flex-direction: column; gap: 10px; }
.hilos-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hilos-cab button { padding: 5px 10px; font-size: 0.82rem; border-radius: 7px; }
.hilos { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.hilos .vacio { padding: 10px 4px; text-align: left; margin: 0; }
.hilo { display: flex; align-items: stretch; gap: 2px; border-radius: 9px; }
.hilo:hover { background: var(--superficie-2); }
.hilo.activo { background: var(--acento-fondo); }
.hilo-abrir {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  text-align: left; background: none; border: 0; padding: 8px 9px; border-radius: 9px;
  color: inherit; font-weight: 400; white-space: normal;
}
.hilo-abrir:hover { background: transparent; }
.hilo-abrir strong {
  font-size: 0.86rem; font-weight: 600; line-height: 1.35;
  /* Dos líneas y corta: los títulos son la pregunta completa del analista. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hilo-abrir em { font-size: 0.76rem; color: var(--texto-3); font-style: normal; }
.hilo.activo .hilo-abrir strong { color: var(--acento-tinta); }
.hilo-borrar {
  background: none; border: 0; color: var(--texto-3); padding: 0 8px; border-radius: 9px;
  font-size: 0.8rem; font-weight: 500; opacity: 0; transition: opacity 0.12s;
}
.hilo:hover .hilo-borrar, .hilo-borrar.confirmando { opacity: 1; }
.hilo-borrar:hover, .hilo-borrar.confirmando { color: var(--critico-tinta); background: var(--critico-fondo); }
.hilo-borrar.confirmando { font-size: 0.74rem; font-weight: 600; }

/* -------------------------------------------------------------------- chat */
.panel-chat { display: flex; flex-direction: column; }
.cabecera-chat { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cabecera-chat .ayuda { margin-bottom: 0; }
.acc-chat { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.chat {
  overflow-y: auto; padding: 8px 2px 4px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 12px; min-height: 240px; max-height: 50vh;
}
.chat:empty { min-height: 130px; align-items: center; justify-content: center; border: 1px dashed var(--borde); border-radius: 10px; }
.chat:empty::after {
  content: 'Pídale lo que necesite. Busca en la wiki, ejecuta reportes y arma los scripts.';
  color: var(--texto-3); font-size: 0.86rem; text-align: center; max-width: 360px;
}
.burbuja { max-width: 84%; padding: 11px 15px; border-radius: 14px; white-space: pre-wrap; line-height: 1.55; font-size: 0.92rem; }
.burbuja.usuario { align-self: flex-end; border-bottom-right-radius: 4px; color: var(--sobre-acento); background: var(--acento); }
.burbuja.asistente { align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borde-suave); border-bottom-left-radius: 4px; }
.burbuja.error { align-self: center; color: var(--critico-tinta); background: var(--critico-fondo); font-size: 0.86rem; }
.herramienta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; align-self: stretch; max-width: 100%;
  font-size: 0.76rem; color: var(--texto-3); background: var(--superficie-2);
  border: 1px dashed var(--borde); border-radius: 8px; padding: 5px 11px; font-family: var(--mono);
}
.herramienta b { color: var(--acento-tinta); font-weight: 600; }
.hr-ic { font-size: 0.72rem; }
.hr-arg { color: var(--texto-3); font-style: italic; }
.hr-res { color: var(--texto-2); margin-left: auto; }
.herramienta.lista { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.herramienta.lista .hr-ic { color: var(--ok-tinta); }
.herramienta.falla { border-style: solid; border-color: color-mix(in srgb, var(--critico) 45%, transparent); }
.herramienta.falla .hr-ic, .herramienta.falla .hr-res { color: var(--critico-tinta); }

.entrada-chat { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.entrada-chat textarea { flex: 1; }
/* display:block a propósito: con flex, las rejillas de capacidades entraban
   como items y se encogían a su contenido. */
.sugerencias { display: block; margin-top: 10px; }
.escribiendo::after { content: '▍'; animation: parpadeo 1s steps(2) infinite; color: var(--acento); }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Respuestas con formato (Markdown del agente). */
.burbuja > *:first-child { margin-top: 0; }
.burbuja > *:last-child { margin-bottom: 0; }
.burbuja p { margin: 0 0 9px; }
.burbuja ul, .burbuja ol { margin: 0 0 9px; padding-left: 22px; }
.burbuja li { margin: 3px 0; }
.burbuja h3, .burbuja h4, .burbuja h5, .burbuja h6 { margin: 14px 0 6px; font-size: 0.92rem; color: inherit; }
.burbuja hr { border: 0; border-top: 1px solid var(--borde); margin: 12px 0; }
.burbuja .tabla-scroll { margin: 8px 0; max-height: none; }
.burbuja a { text-decoration: underline; text-underline-offset: 2px; }
.burbuja.usuario a, .burbuja.usuario code { color: #fff; }
.burbuja.usuario code { background: rgba(255, 255, 255, 0.18); }

/* Capacidades del agente: cuatro tarjetas que dicen QUÉ sabe hacer, colapsadas
   por defecto. Al abrir una, sus ejemplos aparecen debajo, en fila. */
.capacidades { display: grid; gap: 8px; margin-top: 12px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.capacidades .cap {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; padding: 10px 12px;
  border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde-suave);
  color: inherit; font-weight: 400; cursor: pointer; white-space: normal; transition: border-color 0.12s, background 0.12s;
}
.capacidades .cap:hover { border-color: var(--acento); background: var(--superficie-2); }
.capacidades .cap.abierta { border-color: var(--acento); background: var(--acento-fondo); }
.capacidades .cap-ic { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.capacidades .cap-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.capacidades .cap-txt strong { font-size: 0.84rem; font-weight: 600; }
.capacidades .cap-txt em { font-style: normal; font-size: 0.74rem; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-ejemplos { display: grid; gap: 8px; margin-top: 9px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cap-ejemplos .cap-ej {
  display: flex; align-items: center; justify-content: flex-start; text-align: left; font-size: 0.84rem; font-weight: 400; line-height: 1.4;
  padding: 9px 11px; border-radius: 9px; background: transparent; border: 1px dashed var(--borde);
  color: var(--texto-2); cursor: pointer; height: 100%; white-space: normal; hyphens: auto;
}
.cap-ejemplos .cap-ej:hover { color: var(--texto); border-style: solid; border-color: var(--acento); background: var(--superficie-2); }

/* ------------------------------------------------------------ auditoría */
/* Barra de magnitud dentro de la tabla: con dos o tres personas, una gráfica
   sería más adorno que información. Un solo tono, como en la app de N2. */
.barra-magnitud { display: block; height: 6px; border-radius: 3px; margin-top: 5px; background: var(--acento); min-width: 2px; }
td.con-barra { min-width: 120px; }

/* ------------------------------------------------------- triage embebido */
/* Es OTRO aplicativo en su propio contexto de navegación (así no chocan los
   dos app.js), pero dentro de la vista: la barra lateral se queda. Ocupa el
   alto disponible porque adentro tiene sus propias pestañas y su scroll. */
#vista-triage { display: flex; flex-direction: column; min-height: 0; }
#marco-triage, .marco { width: 100%; border: 0; display: block; height: calc(100vh - 98px); min-height: 460px; background: var(--plano); }

/* ------------------------------------------------------- inicio de sesión */
/* La capa la dibuja nube.js cuando no hay sesión. Sus estilos viven en marca/entrada.css:
   es la misma pantalla que la portada de Felix (2026-11-11). */

/* --------------------------------------------------------------- scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .dos-columnas, .agente-cols, .grilla-2, .grilla-3 { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; }
  .marca { padding: 0 6px 0 0; }
  #pestanas { flex-direction: row; gap: 4px; }
  #pestanas .grupo { display: none; }
  #pestanas button { width: auto; padding: 7px 9px; }
  .pie-lateral { margin: 0 0 0 auto; padding: 0; border: 0; }
  .cabecera, main { padding-left: 16px; padding-right: 16px; }
  #marco-triage, .marco { height: calc(100vh - 200px); }
}

/* --------------------------------------------------------- BINes BAC (bines.js) */
/* Selector de herramienta: tres botones pegados, uno activo. Mismo acento que la navegación. */
.segmento { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.segmento button { border: 0; border-radius: 0; background: transparent; color: var(--texto-2); font-weight: 600; padding: 8px 14px; }
.segmento button + button { border-left: 1px solid var(--borde); }
.segmento button.activa { background: var(--acento-fondo); color: var(--acento-tinta); }
#bines-estado { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bin-agencia + .bin-agencia { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.bin-agencia .tabla-scroll { margin: 8px 0; }
blockquote.respuesta { margin: 8px 0 0; padding: 12px 14px; border-left: 4px solid var(--acento); background: var(--superficie-2); border-radius: 0 9px 9px 0; white-space: pre-wrap; line-height: 1.5; }
#bin-dt .panel-cab, #bin-respuesta .panel-cab { flex-wrap: wrap; }
#listado-salida .sub-titulo { margin: 22px 0 10px; font-size: 14px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
/* BINes BAC · validar un BIN en una sola caja */
.bin-rapido { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin: 4px 0 6px; }
.bin-rapido input { flex: 1 1 280px; width: auto; min-width: 0; font-size: 16px; padding: 10px 12px; }
.bin-rapido select { flex: 0 0 170px; width: 170px; }
.bin-rapido button { flex: 0 0 auto; width: auto; }
.bin-mas { margin-top: 6px; }
.bin-mas summary, .bin-detalle summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.bin-mas[open] summary { margin-bottom: 8px; }
.bin-veredicto { border-left: 4px solid var(--borde-suave); }
.bin-veredicto.verde { border-left-color: var(--ok-tinta); }
.bin-veredicto.rojo { border-left-color: var(--critico-tinta); }
.bin-veredicto > h2 { margin: 4px 0 8px; font-size: 18px; }
.bin-veredicto .bin-linea, .bin-veredicto .bin-donde { margin: 6px 0; }
.bin-veredicto .aviso { margin: 8px 0; }
.bin-respuesta-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.bin-respuesta-cab button { margin-left: auto; }
.bin-detalle { margin-top: 12px; }
.bin-detalle[open] summary { margin-bottom: 8px; }
.bin-detalle pre { white-space: pre-wrap; font-size: 12px; }
/* Crear usuarios */
.usr-personas input, .usr-personas select { width: 100%; min-width: 90px; padding: 6px 8px; font-size: 13px; }
.usr-personas td:nth-child(2) input { min-width: 210px; }
.usr-personas td:nth-child(3) input, .usr-personas td:nth-child(4) input { min-width: 130px; }
.usr-personas td:nth-child(9) { min-width: 240px; }
.usr-personas input.falta, .usr-personas select.falta { border-color: var(--critico-tinta); }
.usr-personas td { vertical-align: top; }
.usr-corto { width: auto; min-width: 180px; display: inline-block; }
.usr-opciones { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin: 4px 0 10px; }
.usr-opciones label.check { display: inline-flex; gap: 6px; align-items: center; }
.usr-opciones input[type="checkbox"] { width: auto; }
.usr-pasos { margin: 6px 0 10px 18px; line-height: 1.6; }
.usr-script { white-space: pre; overflow: auto; max-height: 420px; font-size: 12px; }
#vista-usuarios .bin-veredicto ul { margin: 6px 0 0 18px; }
.usr-deducido { margin-top: 4px; display: flex; gap: 6px; align-items: center; font-size: 12px; }

/* Entradas del menú fuera del nivel de la sesión: `hidden` pierde contra el display
   del botón, así que se refuerza aquí. */
#pestanas [hidden], #pestanas .oculta { display: none !important; }

/* ------------------------------------------------------------ API keys (N3) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .rotulo { font-size: 0.8rem; color: var(--texto-2); font-weight: 600; }
.kpi .valor { font-size: 1.9rem; font-weight: 650; line-height: 1.1; margin-top: 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .detalle { font-size: 0.78rem; color: var(--texto-3); margin-top: 6px; }
.kpi.enfasis { border-color: var(--acento); background: var(--acento-fondo); }
.kpi.enfasis .valor { color: var(--acento-tinta); }
.apik-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-top: 14px; align-items: start; }
.apik-forma { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: middle; border-radius: 50%; background: var(--gris-serie); }
.apik-forma.ok { background: var(--ok); }
.apik-forma.pendiente { background: transparent; border: 2px solid var(--aviso); }
.apik-forma.bloqueado { background: transparent; border: 2px dashed var(--texto-3); }
.apik-forma.atencion { background: var(--critico); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; }
.apik-estado { white-space: nowrap; }
.apik-ficha { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0; font-size: 0.86rem; }
.apik-ficha dt { color: var(--texto-2); font-weight: 600; }
.apik-ficha dd { margin: 0; }
.apik-fuente { margin-right: 10px; white-space: nowrap; }
#apik-buscar { width: 220px; margin: 0; }
@media (max-width: 1100px) { .apik-cuerpo { grid-template-columns: 1fr; } }
.apik-tabla td.agencia { max-width: 260px; }
.apik-tabla td.agencia .conteo { word-break: break-all; }
.apik-tabla td.dominio { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apik-tabla td.fecha, .apik-tabla td.estado, .apik-tabla td.ticket { white-space: nowrap; }

/* --------------------------------------------------------- Documentos (documentos.js) */
/* La carpeta de OneDrive del nivel. Colores de tipo de archivo = los de Office, para reconocerlos de un vistazo. */
.doc-barra { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-barra h2 { margin: 0; }
.doc-barra .fila-botones { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
#documentos-buscar { width: 300px; flex: 1 1 300px; min-width: 0; }
/* Tipificación automática (solo administradores). */
#tip-niveles { margin-bottom: 14px; }
.tip-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tip-modos { display: grid; gap: 8px; margin: 6px 0 14px; }
.tip-modo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde-suave); border-radius: 8px; cursor: pointer; }
.tip-modo.activo { border-color: var(--acento-tinta); background: var(--acento-fondo); }
.tip-modo input[type=radio] { width: auto; flex: 0 0 auto; padding: 0; margin: 3px 0 0; accent-color: var(--acento); }
.tip-modo > span { display: grid; gap: 2px; }
.tip-modo strong { display: block; }
.tip-campos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 12px; }
.tip-campos label, .tip-fila label { display: inline-flex; gap: 6px; align-items: center; }
.tip-fila { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 8px 0; }
.tip-fila input[type=number] { width: 80px; }
.tip-fila input[type=time] { width: 110px; }
.tip-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.tip-form label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--texto-2); }
.tip-form input { width: 100%; min-width: 0; }
.tip-conf { display: inline-block; min-width: 38px; text-align: center; font-size: 0.72rem; font-weight: 700; border-radius: 5px; padding: 1px 5px; background: var(--superficie-2); }
.tip-conf.alta { background: var(--acento-fondo); color: var(--acento-tinta); }
.tip-sug { font-size: 0.84rem; line-height: 1.35; margin-bottom: 4px; overflow-wrap: anywhere; }
.tip-sug .conteo { font-size: 0.72rem; }
.tip-tabla td { vertical-align: top; }
.tip-tabla th, .tip-tabla td { min-width: 104px; }
.tip-tabla th:first-child, .tip-tabla td:first-child { min-width: 0; width: 28px; }
.tip-tabla td:nth-child(2) { min-width: 220px; }
.tip-tabla input[type=checkbox] { flex: 0 0 auto; }
.tip-tabla.tip-reglas th:first-child, .tip-tabla.tip-reglas td:first-child { width: auto; min-width: 200px; }
.tip-tabla.tip-reglas td:nth-child(2) { min-width: 180px; }
.tip-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
@media (max-width: 960px) { .tip-grid { grid-template-columns: 1fr; } }
/* Comisiones (N2): análisis de la comisión de una reserva. */
.com-buscar { display: grid; gap: 8px; margin-bottom: 16px; }
.com-buscar label { font-weight: 600; }
.com-buscar .fila-botones { display: flex; gap: 8px; flex-wrap: wrap; }
#comisiones-codigo { flex: 1 1 260px; min-width: 0; max-width: 360px; text-transform: uppercase; }
.com-buscar .conteo { margin: 0; }
.com-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin: 0; }
.com-resumen div { min-width: 0; }
.com-resumen dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); }
.com-resumen dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.com-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.com-aplicada .com-grande { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 4px 0 6px; }
.com-conclusiones { margin: 0; padding-left: 20px; }
.com-conclusiones li { margin: 0 0 9px; line-height: 1.5; }
.com-tabla td, .com-tabla th { vertical-align: top; }
.com-tabla tr.gana td { background: var(--acento-fondo); }
.com-cond { display: flex; flex-wrap: wrap; gap: 4px; }
.com-estado { font-weight: 600; white-space: nowrap; }
.com-estado.gana { color: var(--acento-tinta); }
.com-estado.muerta { color: var(--critico-tinta); }
.com-estado.no { color: var(--texto-2); }
.com-detalle { font-size: 0.8rem; color: var(--texto-2); margin-top: 3px; }
.com-reglas-sistema { margin: 0; padding-left: 20px; }
.com-reglas-sistema li { margin: 0 0 6px; line-height: 1.5; }
@media (max-width: 860px) { .com-dos { grid-template-columns: 1fr; } }
/* Cambios operacionales (N1): lista de aerolíneas a la izquierda, ficha de la elegida a la derecha. */
#politicas-buscar { width: 320px; flex: 1 1 320px; min-width: 0; }
.pol-layout { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pol-lista { margin: 0; padding: 6px; position: sticky; top: 72px; max-height: calc(100vh - 230px); overflow-y: auto; }
.pol-lista ul { list-style: none; margin: 0; padding: 0; }
.pol-item { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; }
.pol-item:hover { background: var(--superficie-2); }
.pol-item:focus-visible { outline: 2px solid var(--acento-tinta); outline-offset: -2px; }
.pol-item.activa { background: var(--acento-fondo); color: var(--acento-tinta); font-weight: 600; }
.pol-item.sin-reglas:not(.activa) .pol-item-nombre { color: var(--texto-2); }
.pol-item-cod { flex: 0 0 auto; font-size: 0.72rem; color: var(--texto-2); letter-spacing: 0.03em; }
.pol-item.activa .pol-item-cod { color: inherit; }
.pol-sin { padding: 10px; }
.pol-detalle { margin: 0; padding: 20px 24px 24px; min-width: 0; }
.pol-det-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borde-suave); }
.pol-det-cab h2 { margin: 0 0 6px; font-size: 1.35rem; }
.pol-codigos { display: flex; gap: 4px; flex-wrap: wrap; }
.pol-bloque { margin-top: 20px; }
.pol-bloque h3 { margin: 0 0 10px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-2); }
.pol-reglas { margin: 0; padding-left: 22px; }
.pol-reglas li { margin: 0 0 9px; line-height: 1.55; padding-left: 2px; }
.pol-endosos { display: flex; flex-direction: column; gap: 8px; }
.pol-endoso { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border: 1px solid var(--borde-suave);
  border-radius: 8px; background: var(--superficie-2); }
.pol-endoso code { font-size: 0.84rem; overflow-wrap: anywhere; background: none; padding: 0; }
.pol-nota-bloque { margin: 8px 0 0; font-size: 0.8rem; color: var(--texto-2); }
.pol-dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding-top: 18px; border-top: 1px solid var(--borde-suave); }
.pol-dos-col h3 { margin-top: 0; }
.pol-contactos, .pol-enlaces { list-style: none; margin: 0; padding: 0; }
.pol-contactos li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 5px 0; align-items: baseline; }
.pol-contactos a, .pol-enlaces a { overflow-wrap: anywhere; }
.pol-enlaces li { padding: 5px 0; }
.pol-etq { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); }
.pol-nota { display: block; font-size: 0.78rem; color: var(--texto-2); }
.pol-vacio { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: var(--superficie-2); color: var(--texto-2); }
.pol-fuente { margin: 14px 2px 0; font-size: 0.78rem; color: var(--texto-2); }
@media (max-width: 860px) {
  .pol-layout { grid-template-columns: 1fr; }
  .pol-lista { position: static; max-height: 260px; }
  .pol-detalle { padding: 16px; }
  #politicas-buscar { flex-basis: 100%; }
}
.doc-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 12px; font-size: 0.9rem; }
.doc-migas button { background: none; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--acento-tinta); font-weight: 600; cursor: pointer; }
.doc-migas button:hover { background: var(--acento-fondo); }
.doc-migas button:last-child { color: var(--texto); cursor: default; }
.doc-migas span { color: var(--texto-3); }
.doc-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.doc-carpeta { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); cursor: pointer; font: inherit; color: inherit; }
.doc-carpeta:hover, .doc-carpeta:focus-visible { border-color: var(--acento); background: var(--acento-fondo); }
.doc-carpeta-ico { grid-row: 1 / 3; width: 32px; height: 26px; border-radius: 4px; background: #f2c14e; position: relative; }
.doc-carpeta-ico::before { content: ""; position: absolute; left: 0; top: -4px; width: 14px; height: 6px; border-radius: 3px 3px 0 0; background: #e0a82e; }
.doc-carpeta-nombre { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tabla { max-height: none; }
.doc-tabla td { vertical-align: middle; }
.doc-nombre { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.doc-nombre .enlace { text-align: left; font-weight: 600; color: var(--texto); }
.doc-nombre .enlace:hover { color: var(--acento-tinta); text-decoration: underline; }
.doc-tipo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 22px; border-radius: 5px; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.02em; color: #fff; background: var(--gris-serie, #8a8f98); }
.doc-tipo.word { background: #2b579a; }
.doc-tipo.excel { background: #217346; }
.doc-tipo.ppt { background: #c43e1c; }
.doc-tipo.pdf { background: #b3261e; }
.doc-tipo.imagen { background: #6b4fbb; }
.doc-tipo.texto { background: #5f6b7a; }
.doc-acciones { white-space: nowrap; text-align: right; }
.doc-conectar { max-width: 620px; margin: 24px auto; text-align: center; padding: 28px; }
.doc-conectar h3 { margin: 10px 0 6px; }
.doc-conectar .fila-botones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.doc-conectar-ico { width: 48px; height: 48px; margin: 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--acento-fondo); color: var(--acento-tinta); }
.doc-conectar-ico .ic { width: 24px; height: 24px; }
.doc-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--critico-fondo); color: var(--critico-tinta); font-size: 0.88rem; text-align: left; }
.doc-aviso { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-aviso p { margin: 0; }
.doc-aviso.error { border-color: var(--critico); background: var(--critico-fondo); color: var(--critico-tinta); }
.doc-pie-admin { margin: 4px 2px 0; }
.doc-selector { margin-bottom: 14px; max-width: 100%; overflow-x: auto; }
.doc-selector button { white-space: nowrap; }
.doc-nota-indice { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--acento-fondo); color: var(--acento-tinta); font-size: 0.86rem; }
a.doc-carpeta { text-decoration: none; }
.doc-enlace { font-weight: 600; color: var(--texto); text-decoration: none; }
.doc-enlace:hover { color: var(--acento-tinta); text-decoration: underline; }
/* .btn fija display y le gana al atributo hidden: aquí manda hidden. */
#vista-documentos [hidden] { display: none !important; }
.doc-pie-admin .enlace { font-size: inherit; }
/* Nivel 3: la wiki como carpeta, su lector y la búsqueda cruzada. */
.doc-tipo.wiki { background: #0b6bcb; }
.doc-tambien:empty { display: none; }
.doc-tambien > .conteo { margin: 10px 2px; }
.doc-wiki-lista { list-style: none; margin: 0; padding: 0; }
.doc-wiki-res { padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.doc-wiki-res:last-child { border-bottom: 0; }
.doc-fragmento { margin: 4px 0 0; font-size: 0.82rem; color: var(--texto-2); overflow-wrap: anywhere; }
.doc-previa.wiki .doc-previa-cuerpo, .doc-previa.ficha .doc-previa-cuerpo { overflow: auto; display: block; }
.doc-ficha h3 { margin: 16px 0 6px; font-size: 0.95rem; }
.doc-ficha p { line-height: 1.55; }
.doc-ficha-resumen { font-size: 0.95rem; margin-top: 0; }
.doc-ficha-puntos { margin: 0; padding-left: 20px; }
.doc-ficha-puntos li { margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.doc-ficha-pie { margin-top: 16px; }
.doc-wiki { padding: 14px 16px 24px; }
.doc-wiki .aviso { margin-bottom: 12px; }
.doc-wiki-colecciones { margin: 0 0 12px; }
.doc-wiki-texto { white-space: pre-wrap; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.doc-wiki-script { margin-top: 16px; }
.doc-wiki-script-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.doc-wiki-script pre { max-height: 380px; overflow: auto; margin: 0; }
.doc-wiki-felix { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borde-suave); }
.doc-previa { position: fixed; top: 56px; right: 0; bottom: 0; width: min(760px, 94vw); z-index: 40; display: flex; flex-direction: column;
  background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18); }
.doc-previa[hidden] { display: none; }
.doc-previa-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); }
.doc-previa-cab strong { display: block; overflow-wrap: anywhere; }
.doc-previa-cab .fila-botones { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-previa-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.doc-previa-cuerpo > p { padding: 16px; }
.doc-previa-cuerpo iframe { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 720px) {
  .doc-nombre { min-width: 0; }
  .doc-tabla thead { display: none; }
  .doc-tabla tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
  .doc-tabla td { border: 0; padding: 0 8px; }
  .doc-tabla td.doc-col-nombre { grid-column: 1 / -1; }
  .doc-barra .fila-botones { flex-wrap: wrap; width: 100%; }
  #documentos-buscar { flex-basis: 100%; }
  .doc-tabla td.doc-acciones { grid-column: 1 / -1; text-align: left; }
  .doc-previa { top: 0; width: 100vw; }
}

/* Seguimiento PPM (módulo N1, solo administradores) */
.ppm-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ppm-acciones { display: inline-flex; gap: 8px; }
.ppm-tabla td { vertical-align: top; }
.ppm-tabla th, .ppm-tabla td { min-width: 90px; }
.ppm-tabla td.num, .ppm-tabla th.num { min-width: 52px; text-align: right; }
.ppm-tabla .ppm-obs { min-width: 240px; max-width: 360px; font-size: 0.82rem; line-height: 1.4; }
.ppm-tabla .ppm-asunto { min-width: 220px; max-width: 320px; font-size: 0.8rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppm-tabla .ppm-slas { white-space: nowrap; min-width: 64px; }
.ppm-sla { display: inline-block; width: 22px; text-align: center; font-size: 0.72rem; font-weight: 700; border-radius: 5px; padding: 1px 0; margin-right: 4px; background: var(--superficie-2); color: var(--texto-3); }
.ppm-sla.venc { background: var(--critico); color: #fff; }
.ppm-cerrado td { opacity: 0.55; }
#vista-ppm .filtros label input[type=checkbox] { flex: 0 0 auto; }
#vista-ppm .filtros label { white-space: nowrap; }
.ppm-aliados { margin-bottom: 12px; flex-wrap: wrap; }
.ppm-punto { color: var(--aviso-tinta); font-weight: 900; }
.ppm-config td { vertical-align: top; }
.ppm-config input:not([type=checkbox]), .ppm-config textarea { width: 100%; min-width: 160px; font-size: 0.84rem; }
.ppm-config input[type=checkbox] { width: auto; flex: 0 0 auto; }
.ppm-config td:nth-child(2) { min-width: 260px; max-width: 360px; }
.ppm-config .ppm-celda-nivel { min-width: 220px; }
.ppm-config .ppm-celda-nivel.apagado { opacity: 0.6; }
.ppm-config .ppm-celda-nivel input:not([type=checkbox]) { margin: 4px 0; }
.ppm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ppm-chips .chip { white-space: normal; }
.ppm-chip-x { border: 0; background: none; padding: 0 0 0 2px; margin: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; color: inherit; min-width: 0; box-shadow: none; }
.ppm-chip-x:hover { color: var(--critico); background: none; }
.ppm-aviso { color: var(--aviso-tinta); margin-top: 4px; white-space: normal; }
.ppm-config label { display: inline-flex; gap: 4px; align-items: center; margin: 0 6px 0 0; font-weight: 500; white-space: nowrap; }
.ppm-libres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ppm-libres .chip small { color: var(--texto-3); margin-left: 4px; }
.ppm-pestanas { display: grid; gap: 8px; margin-bottom: 12px; }
.ppm-pestanas .segmento { margin-bottom: 0; }

/* ---------------------------------------------------------------- Despliegues (2026-10-17) */
.desp-prueba { background: var(--aviso-fondo); color: var(--aviso-tinta); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.88rem; }
.desp-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, 420px); gap: 18px; align-items: start; }
@media (max-width: 900px) { .desp-grid { grid-template-columns: 1fr; } }
.desp-form { display: grid; gap: 12px; }
.desp-form label { display: grid; gap: 4px; font-weight: 600; font-size: 0.86rem; }
.desp-form fieldset { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 8px; }
.desp-form legend { font-weight: 600; font-size: 0.86rem; padding: 0 4px; }
.desp-fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.desp-fila > label { flex: 1 1 160px; }
.desp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
label.desp-chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 500; padding: 4px 10px; border: 1px solid var(--borde-suave); border-radius: 999px; background: var(--superficie-2); cursor: pointer; }
label.desp-chip input { width: auto; margin: 0; }
.desp-fila > label.desp-chip { flex: 0 0 auto; }
.desp-min { flex: 0 0 150px !important; }
.desp-previa canvas, .desp-mini { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); display: block; }
.desp-tarjeta { display: grid; grid-template-columns: 1fr 240px; gap: 16px; padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.desp-tarjeta:first-of-type { border-top: 0; }
@media (max-width: 800px) { .desp-tarjeta { grid-template-columns: 1fr; } }
.desp-tarjeta-datos { display: grid; gap: 8px; }
.desp-tarjeta fieldset { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 6px 10px 8px; margin: 0; }
.desp-tarjeta legend { font-weight: 600; font-size: 0.82rem; padding: 0 4px; }
.desp-dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 0; font-size: 0.88rem; }
.desp-dl dt { color: var(--texto-3); }
.desp-dl dd { margin: 0; }
.desp-enlaces { word-break: break-all; }
.desp-estado { display: inline-block; font-size: 0.74rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-left: 4px; }
.desp-estado.ambar { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.desp-estado.verde { background: var(--ok-fondo); color: var(--ok-tinta); }
.desp-estado.rojo { background: var(--critico-fondo); color: var(--critico-tinta); }
.desp-estado.gris { background: var(--superficie-2); color: var(--texto-3); }
.desp-tabla td { vertical-align: top; }
#desp-devs { width: 100%; font-family: var(--mono); font-size: 0.84rem; }
.desp-avisos span { white-space: nowrap; }
.desp-produccion { background: var(--ok-fondo); color: var(--ok-tinta); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.88rem; }
.desp-tabla .desp-detalle { min-width: 220px; max-width: 340px; font-size: 0.84rem; }

/* ---- Comisiones › Nota de cargo (ADM) ---- */
.com-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--borde); }
.com-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--texto-2); cursor: pointer; }
.com-tabs button:hover { color: var(--texto); }
.com-tabs button.activa { color: var(--acento-tinta); border-bottom-color: var(--acento); }
.adm-paso { margin-bottom: 16px; }
.adm-paso .fila-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.adm-textarea { width: 100%; font: inherit; font-size: 0.86rem; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 9px; background: var(--superficie); color: var(--texto); resize: vertical; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; margin-top: 10px; }
.adm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.adm-campo { display: grid; gap: 4px; min-width: 0; }
.adm-campo span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); }
.adm-campo input, .adm-campo textarea { width: 100%; font: inherit; font-size: 0.9rem; padding: 7px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }
.adm-ancho { grid-column: 1 / -1; }
.adm-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; margin: 10px 0 6px; }
.adm-lineas { margin-top: 10px; }
.adm-tabla-lineas th { text-align: left; font-weight: 600; }
.adm-tabla-lineas input { width: 100%; min-width: 110px; font: inherit; font-size: 0.86rem; padding: 5px 7px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.adm-acciones { margin: 6px 0 16px; align-items: center; }
.adm-concl { font-weight: 700; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; letter-spacing: 0.02em; white-space: nowrap; }
.adm-concl.procede { background: var(--serio-fondo); color: var(--serio-tinta); }
.adm-concl.no-procede { background: var(--ok-fondo); color: var(--ok-tinta); }
.adm-concl.parcial { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.adm-concl.nc { background: var(--superficie-2); color: var(--texto-2); }
.adm-dl { margin-bottom: 12px; }
.adm-motivo { font-weight: 600; line-height: 1.5; margin: 8px 0; }
.adm-refutacion h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); margin: 12px 0 4px; }
.adm-refutacion ul { margin: 0; padding-left: 20px; }
.adm-refutacion li { margin: 0 0 6px; line-height: 1.5; }
.adm-respuesta { white-space: pre-wrap; font: inherit; font-size: 0.92rem; line-height: 1.55; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 9px; padding: 14px 16px; margin: 0 0 8px; }
.adm-config > summary { cursor: pointer; font-size: 1rem; }
.adm-config > summary .conteo { margin-left: 6px; font-weight: 400; }
.adm-config-cuerpo { margin-top: 12px; }
.adm-config-cuerpo h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-2); margin: 18px 0 8px; }
.adm-config-cuerpo h3:first-child { margin-top: 4px; }
.adm-inline { min-width: 220px; }
.adm-paises { margin-bottom: 10px; }
.adm-tabla-paises td, .adm-tabla-paises th { vertical-align: middle; }
.adm-config-acciones { margin-top: 14px; }

/* Accesos por rol (public/accesos.js): roles y personas en dos tablas, permisos por nivel en una celda. */
.acc-niveles { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-tabla td.acc-permiso { white-space: nowrap; }
#vista-accesos h3 { margin: 18px 0 8px; font-size: 1rem; }

/* ---------- Apps de la mesa (public/apps.js) */
.app-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.app-ficha { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.app-ficha header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app-ficha h3 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--texto); text-transform: none; letter-spacing: 0; }
.app-ficha p { margin: 0; font-size: 0.86rem; }
.app-ficha .app-cuando { color: var(--texto-2); }
.app-ficha footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; padding-top: 6px; border-top: 1px solid var(--borde-suave); }
/* Seguimientos · «un solo Excel» (formato v2, 2026-10-29) */
.ppm-config .ppm-unico { display: block; margin-top: 6px; white-space: nowrap; }
.ppm-config td input[data-fam-url-unica] { margin: 4px 0; width: 100%; }