/* =====================================================================
   Cuadro de Mando ENS — hoja de estilos
   Sigue el sistema visual de `seguros`: mismos tokens, misma tipografía
   (Space Grotesk para texto, JetBrains Mono para datos), mismo degradado
   azul → violeta, mismos radios y mismo lateral de navegación. Si cambia
   la paleta allí, cámbiala aquí: es a propósito que se parezcan.

   Dos criterios que vienen de la especificación y no son decorativos:
   · el color de persona nunca va solo, siempre con su inicial (12.1);
   · los colores tienen que distinguirse también impresos, de ahí el
     bloque @media print del final.

   Los nombres de clase son los de ENS y no los de seguros; la
   equivalencia está en la tabla de CLAUDE.md.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------------------------------------------------------------------
   Tema oscuro (el de partida)
   --------------------------------------------------------------------- */
:root {
  --fondo: #0a0e1a;
  --fondo-2: #0f1524;
  --panel: rgba(22, 29, 48, 0.72);
  --panel-solido: #161d30;
  --borde: rgba(255, 255, 255, 0.08);
  --borde-fuerte: rgba(255, 255, 255, 0.16);
  --texto: #e8ecf5;
  --texto-suave: #94a0bd;
  --texto-tenue: #7b88ab;
  --azul: #4d8dff;
  --violeta: #9b6cff;
  --degradado: linear-gradient(135deg, #4d8dff 0%, #9b6cff 100%);

  --rojo: #ff5d6c;
  --rojo-fondo: rgba(255, 93, 108, 0.12);
  --ambar: #ffb340;
  --ambar-fondo: rgba(255, 179, 64, 0.12);
  --verde: #35d0a5;
  --verde-fondo: rgba(53, 208, 165, 0.12);
  --gris: #6b7794;
  --gris-fondo: rgba(107, 119, 148, 0.12);

  --velo-suave: rgba(255, 255, 255, 0.035);
  --velo-boton: rgba(255, 255, 255, 0.06);
  --velo-fuerte: rgba(255, 255, 255, 0.11);
  --linea-fila: rgba(255, 255, 255, 0.045);
  --cabecera-tabla: rgba(0, 0, 0, 0.22);
  --campo-fondo: rgba(0, 0, 0, 0.28);
  --activo-fondo: rgba(77, 141, 255, 0.16);
  --activo-texto: #fff;
  --lateral-fondo: rgba(12, 17, 30, 0.82);
  --velo-modal: rgba(4, 7, 14, 0.72);

  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 8px 32px rgba(0, 0, 0, 0.4);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Tema claro
   La preferencia se guarda en localStorage y se escribe en
   <html data-tema="...">. «sistema» delega en el navegador, y por eso la
   paleta se repite dentro de la consulta de medios.
   --------------------------------------------------------------------- */
html[data-tema="claro"] {
  --fondo: #f4f6fc;
  --fondo-2: #ffffff;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-solido: #ffffff;
  --borde: rgba(15, 23, 42, 0.10);
  --borde-fuerte: rgba(15, 23, 42, 0.20);
  --texto: #141b2d;
  --texto-suave: #4c5875;
  --texto-tenue: #616b85;
  --azul: #2f66cc;
  --violeta: #7443c8;
  --degradado: linear-gradient(135deg, #2f66cc 0%, #7443c8 100%);

  --rojo: #c62f40;
  --rojo-fondo: rgba(198, 47, 64, 0.10);
  --ambar: #9a6206;
  --ambar-fondo: rgba(154, 98, 6, 0.12);
  --verde: #0f7a5f;
  --verde-fondo: rgba(15, 122, 95, 0.11);
  --gris: #64708c;
  --gris-fondo: rgba(100, 112, 140, 0.11);

  --velo-suave: rgba(15, 23, 42, 0.035);
  --velo-boton: rgba(15, 23, 42, 0.04);
  --velo-fuerte: rgba(15, 23, 42, 0.08);
  --linea-fila: rgba(15, 23, 42, 0.07);
  --cabecera-tabla: rgba(15, 23, 42, 0.045);
  --campo-fondo: #ffffff;
  --activo-fondo: rgba(47, 102, 204, 0.12);
  --activo-texto: #2f66cc;
  --lateral-fondo: rgba(255, 255, 255, 0.88);
  --velo-modal: rgba(15, 23, 42, 0.42);

  --sombra: 0 8px 28px rgba(15, 23, 42, 0.10);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  html[data-tema="sistema"] {
    --fondo: #f4f6fc;
    --fondo-2: #ffffff;
    --panel: rgba(255, 255, 255, 0.86);
    --panel-solido: #ffffff;
    --borde: rgba(15, 23, 42, 0.10);
    --borde-fuerte: rgba(15, 23, 42, 0.20);
    --texto: #141b2d;
    --texto-suave: #4c5875;
    --texto-tenue: #616b85;
    --azul: #2f66cc;
    --violeta: #7443c8;
    --degradado: linear-gradient(135deg, #2f66cc 0%, #7443c8 100%);
    --rojo: #c62f40;
    --rojo-fondo: rgba(198, 47, 64, 0.10);
    --ambar: #9a6206;
    --ambar-fondo: rgba(154, 98, 6, 0.12);
    --verde: #0f7a5f;
    --verde-fondo: rgba(15, 122, 95, 0.11);
    --gris: #64708c;
    --gris-fondo: rgba(100, 112, 140, 0.11);
    --velo-suave: rgba(15, 23, 42, 0.035);
    --velo-boton: rgba(15, 23, 42, 0.04);
    --velo-fuerte: rgba(15, 23, 42, 0.08);
    --linea-fila: rgba(15, 23, 42, 0.07);
    --cabecera-tabla: rgba(15, 23, 42, 0.045);
    --campo-fondo: #ffffff;
    --activo-fondo: rgba(47, 102, 204, 0.12);
    --activo-texto: #2f66cc;
    --lateral-fondo: rgba(255, 255, 255, 0.88);
    --velo-modal: rgba(15, 23, 42, 0.42);
    --sombra: 0 8px 28px rgba(15, 23, 42, 0.10);
    color-scheme: light;
  }
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fondo);
  background-image:
    radial-gradient(1000px 600px at 12% -10%, rgba(77, 141, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(155, 108, 255, 0.10), transparent 55%);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--azul); }
.cargando, .vacio { padding: 42px; text-align: center; color: var(--texto-tenue); }
.mono, .cod, .numero { font-family: var(--mono); }
.tenue, .pista { color: var(--texto-tenue); }
.suave { color: var(--texto-suave); }
.centrado { text-align: center; }
.nowrap { white-space: nowrap; }
.numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cod { font-size: .86em; font-weight: 500; white-space: nowrap; }
.pista { font-size: 12.5px; }
.hueco { flex: 1; }
.error { color: var(--rojo); font-size: 13px; margin-top: 10px; }

/* ---------------------------------------------------------------------
   Acceso
   --------------------------------------------------------------------- */
.acceso {
  width: 100%; max-width: 380px; margin: 12vh auto;
  background: var(--panel); backdrop-filter: blur(20px);
  border: 1px solid var(--borde); border-radius: 20px;
  padding: 40px 34px; box-shadow: var(--sombra);
}
.acceso h1 {
  font-size: 26px; font-weight: 700; letter-spacing: 4px; text-align: center;
  background: var(--degradado); -webkit-background-clip: text;
  background-clip: text; color: transparent; margin-bottom: 6px;
}
.acceso .titulo {
  display: block; text-align: center; color: var(--texto-tenue);
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 26px;
}
.acceso label {
  display: block; font-size: 12px; color: var(--texto-tenue);
  margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .6px;
}
.acceso input { width: 100%; }
.acceso .boton { width: 100%; margin-top: 22px; padding: 11px; }

/* La cabecera de la entrada: flor, logotipo y el acróstico debajo. Las
   iniciales van con el color de su trozo del logotipo, así que el nombre se
   lee dos veces: arriba en grande y abajo letra a letra. */
.acceso-cabecera {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin-bottom: 26px;
}
.acceso-flor {
  width: 64px; height: 64px; margin-bottom: 14px;
  filter: drop-shadow(0 8px 22px rgba(123, 95, 224, .35));
}
.acceso .acceso-logo {
  display: flex; align-items: center; justify-content: center;
  margin: 0; font-size: 30px; font-weight: 800; letter-spacing: 1px;
  line-height: 1; background: none; color: var(--texto);
}
.acceso-logo .marca-sep { width: 3px; margin: 0 6px; }
.acceso-raya {
  display: block; width: 44px; height: 2px; border-radius: 1px;
  margin: 16px 0 12px;
  background: linear-gradient(90deg, #7b5fe0, #17a3ac);
}
.acceso-significado {
  margin: 0; max-width: 300px;
  font-size: 12.5px; line-height: 1.6; color: var(--texto-suave);
  text-wrap: balance;
}
.sig-palabra { white-space: nowrap; }
.acceso-significado b { font-weight: 700; font-size: 1.08em; }
.acceso-grupo {
  margin-top: 12px; font-size: 10.5px; color: var(--texto-tenue);
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Estructura: lateral + principal
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: 232px; flex-shrink: 0;
  background: var(--lateral-fondo); backdrop-filter: blur(20px);
  border-right: 1px solid var(--borde);
  padding: 22px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* --- La marca -------------------------------------------------------------
   HORTENSIA es «Herramienta de Organización, Revisión y Trazabilidad del
   Esquema Nacional de Seguridad con Inteligencia Artificial», y el logotipo
   hace visible el juego: **HORT · ENS · IA**, con el ENS de la norma en el
   medio, separado por dos barras finas. Por eso el nombre se compone en tres
   trozos con tres colores y no como una sola palabra: si se pinta de corrido,
   se pierde lo único que el nombre quiere decir. */
.marca {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px; font-weight: 800; font-size: 17px; letter-spacing: .5px;
}
.marca-flor { width: 26px; height: 26px; flex: 0 0 auto; }
.marca-hort { color: #7b5fe0; }
.marca-ens  { color: var(--texto); }
.marca-ia   { color: #17a3ac; }
.marca-sep {
  width: 2px; height: 1.05em; border-radius: 1px; margin: 0 3px;
  background: currentColor; opacity: .55;
}
.marca-sep.uno { color: #7b5fe0; }
.marca-sep.dos { color: #17a3ac; }
.marca-sub {
  padding: 0 12px 20px; font-size: 10.5px; color: var(--texto-tenue);
  letter-spacing: 1.1px; text-transform: uppercase;
}
/* De quién es la herramienta (2026-10-15): hecha en casa, no comprada. Con su
   ortografía —G, E y C mayúsculas—, así que sin las versalitas de .marca-sub. */
.marca-autor {
  padding: 2px 12px 2px 18px; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); letter-spacing: .1px;
}
.marca-autor-tarjeta {
  display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--borde);
  font-size: 11.5px; color: var(--texto-tenue);
}
.pie-portal {
  margin: 24px 0 0; padding: 0 18px; font-size: 11.5px; color: var(--texto-tenue);
}
/* La tarjeta del significado. Sustituye al `title` del navegador, que tarda
   casi un segundo en salir y no se puede vestir: esta aparece al instante al
   pasar el ratón o al llegar con el tabulador. Va por debajo del logotipo y con
   el ancho del lateral porque este tiene `overflow-y: auto`, y todo lo que se
   salga por el costado queda recortado. */
.marca { position: relative; border-radius: 10px; cursor: default; outline: none; }
.marca:focus-visible { box-shadow: 0 0 0 2px var(--azul); }
.marca-significado {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 30;
  padding: 12px 14px 13px; border-radius: 12px;
  background: var(--panel-solido); border: 1px solid var(--borde-fuerte);
  box-shadow: var(--sombra);
  font-size: 13px; font-weight: 400; letter-spacing: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .08s ease-out, transform .08s ease-out, visibility 0s .08s;
}
.marca:hover .marca-significado,
.marca:focus-visible .marca-significado {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .08s ease-out, transform .08s ease-out;
}
/* El pico apunta a la flor. */
.marca-significado::before {
  content: ''; position: absolute; top: -6px; left: 20px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--panel-solido);
  border-left: 1px solid var(--borde-fuerte); border-top: 1px solid var(--borde-fuerte);
}
.marca-significado-titulo {
  display: block; margin-bottom: 8px;
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--texto-tenue);
}
.acrostico { list-style: none; margin: 0; padding: 0; }
.acrostico li { line-height: 1.5; color: var(--texto-suave); }
.acrostico b { font-size: 15px; font-weight: 800; }
.acrostico li.fin-grupo {
  margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--borde);
}
@media (prefers-reduced-motion: reduce) {
  .marca-significado { transform: none; transition: none; }
}
.pestanas { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pestanas button {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radio-s);
  color: var(--texto-suave); background: none; border: none;
  font-size: 14.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .15s, color .15s;
}
.pestanas button:hover { background: var(--velo-suave); color: var(--texto); }
.pestanas button[aria-current="true"] {
  background: var(--activo-fondo); color: var(--activo-texto); font-weight: 600;
}
.pestanas button .icono { width: 18px; text-align: center; opacity: .85; flex: none; }
.pestanas button .cuenta {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  padding: 1px 7px; border-radius: 20px;
  background: var(--ambar-fondo); color: var(--ambar); font-weight: 600;
}
/* Grupo del lateral: las cinco de gobierno (fase 6). Se distingue de una entrada
   normal porque **no navega**, solo abre y cierra: si pareciera navegable la gente
   la pulsaría esperando una página. */
.pestanas button.grupo-lateral {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue); font-weight: 600; padding: 9px 12px;
  margin-top: 6px;
}
.pestanas button.grupo-lateral:hover { background: var(--velo-suave); }
.pestanas button.grupo-lateral[aria-current="true"] {
  background: none; color: var(--activo-texto);
}
.pestanas button.grupo-lateral .icono { font-size: 10px; }
/* Un punto cuando estás dentro del grupo y está plegado: sin él, cerrarlo hace
   desaparecer la única señal de dónde estás. */
.pestanas .punto {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--azul); flex: none;
}
.hijos-lateral {
  display: flex; flex-direction: column; gap: 3px;
  margin-left: 10px; padding-left: 9px;
  border-left: 1px solid var(--borde);
}
.hijos-lateral button { font-size: 13.8px; padding: 8px 10px; }

/* El encabezado permanente que pide 6.1, en el lateral */
.lateral .sistema {
  border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.sistema-fila { display: flex; align-items: center; gap: 8px; }
.sistema-dim {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  font-size: 10px; color: var(--texto-tenue); text-align: center;
}
.sistema-dim span {
  background: var(--velo-suave); border-radius: 4px; padding: 3px 1px;
  display: flex; flex-direction: column; line-height: 1.25;
}
.sistema-dim b { color: var(--texto-suave); font-size: 11px; font-family: var(--mono); }
.sistema-recuento { font-size: 11.5px; color: var(--texto-tenue); }
.sistema-recuento b { color: var(--texto-suave); font-family: var(--mono); }

.lateral .pie {
  border-top: 1px solid var(--borde); padding-top: 14px; margin-top: 14px;
  font-size: 13px; color: var(--texto-tenue);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.lateral .pie .boton { padding: 4px 9px; font-size: 12px; }
/* Botones de solo icono: en 232 px de lateral no caben tres con texto. */
.boton.icono {
  padding: 3px 0; width: 1.85rem; text-align: center; font-size: 13px; flex: none;
}
.lateral .pie { flex-wrap: nowrap; gap: 4px; }
.lateral .pie .persona {
  overflow: hidden; min-width: 0;
}
.lateral .pie .persona:last-of-type { text-overflow: ellipsis; white-space: nowrap; }

.principal { flex: 1; padding: 28px 34px 60px; min-width: 0; }

/* Cabecera de página: título grande, subtítulo tenue, acciones a la derecha */
.cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 24px; flex-wrap: wrap;
}
.cabecera h1 { font-size: 25px; font-weight: 600; letter-spacing: -0.4px; }
.cabecera .titulo { font-size: 25px; font-weight: 600; letter-spacing: -0.4px; }
.cabecera .recuento, .cabecera .dimensiones {
  color: var(--texto-tenue); font-size: 13.5px; margin-top: 3px;
}
.cabecera .dimensiones { display: flex; gap: 10px; flex-wrap: wrap; }
.cabecera .dimensiones b { color: var(--texto-suave); }
.cabecera .recuento b { color: var(--texto); font-family: var(--mono); }
.cabecera .navegacion, .navegacion { display: flex; gap: 7px; flex-wrap: wrap; }

/* La categoría del sistema: dato permanente y visible */
.categoria {
  display: inline-block; background: var(--rojo-fondo); color: var(--rojo);
  border: 1px solid rgba(198, 47, 64, .3);
  font-weight: 700; font-size: 11.5px; letter-spacing: .8px;
  padding: 2px 9px; border-radius: 20px;
}

/* ---------------------------------------------------------------------
   Persona: color + inicial, nunca el color solo (12.1)
   --------------------------------------------------------------------- */
.persona {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; white-space: nowrap;
}
.chapa {
  width: 21px; height: 21px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  color: #fff; font-size: 10.5px; font-weight: 700;
  font-family: var(--mono);
}

/* ---------------------------------------------------------------------
   Controles
   --------------------------------------------------------------------- */
input, select, textarea, button { font-family: inherit; font-size: 13.5px; }
input, select, textarea {
  background: var(--campo-fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  padding: 8px 11px;
}
input::placeholder, textarea::placeholder { color: var(--texto-tenue); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--activo-fondo);
}
textarea { width: 100%; resize: vertical; min-height: 4.5rem; line-height: 1.5; }
select { cursor: pointer; }

.boton {
  background: var(--azul); color: #fff; border: 1px solid transparent;
  padding: 8px 15px; border-radius: var(--radio-s); cursor: pointer;
  font-weight: 500; transition: filter .15s, background .15s;
}
.boton:hover:not(:disabled) { filter: brightness(1.1); }
.boton.tenue {
  background: var(--velo-boton); color: var(--texto-suave);
  border-color: var(--borde);
}
.boton.tenue:hover:not(:disabled) { background: var(--velo-fuerte); color: var(--texto); }
.boton:disabled { opacity: .45; cursor: default; }
.boton[aria-current="true"] {
  background: var(--activo-fondo); color: var(--activo-texto);
  border-color: transparent; font-weight: 600;
}

.acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* Barra de filtros */
.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.filtros input[type="search"] { flex: 1 1 260px; min-width: 200px; }

.conteo { font-size: 13px; color: var(--texto-tenue); margin-bottom: 12px; }
.conteo b { color: var(--texto); font-family: var(--mono); }

/* ---------------------------------------------------------------------
   Tarjetas: la ficha y sus bloques
   --------------------------------------------------------------------- */
.ficha {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden;
}
.ficha > header {
  padding: 20px; border-bottom: 1px solid var(--borde);
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
}
.ficha > header h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.3px; }
.ficha > header .cod { font-size: 12.5px; color: var(--texto-tenue); display: block; }
.ficha .navegacion { margin-left: auto; }

.bloque { padding: 20px; border-bottom: 1px solid var(--borde); }
.bloque:last-child { border-bottom: 0; }
.bloque > h3 {
  margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texto-tenue); font-weight: 700;
}
.bloque.destacado { background: var(--velo-suave); }

/* Bloques de una línea: la carpeta raíz y la foto del SOA son un dato y un
   clic, no merecen media página. */
.bloque.compacto { padding: 11px 20px; }
.linea-bloque {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 1.9rem;
}
.etiqueta-linea {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texto-tenue); font-weight: 700; flex: none;
}
.cabecera-plegable { cursor: pointer; user-select: none; }
.cabecera-plegable:hover .etiqueta-linea { color: var(--texto-suave); }
.cabecera-plegable .pliegue {
  color: var(--texto-suave); font-size: 12px; width: 13px; flex: none; line-height: 1;
}
.cuerpo-plegable { margin-top: 14px; }

.boton.diminuto { padding: 2px 9px; font-size: 11.5px; }

/* Los tres datos de contexto de la auditoría —foto del SOA, carpeta raíz y
   estructura de carpetas— en tres columnas y una línea cada uno, pegados a los
   datos. Son un dato y un clic: lo que tiene que ocupar la página son las
   medidas. Lo que se despliega va debajo, a todo el ancho. */
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--borde);
  border-radius: var(--radio-s); overflow: hidden;
}
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }
.trio-celda { background: var(--panel-solido); padding: 9px 13px; min-width: 0; }
.trio-celda.pliega { cursor: pointer; user-select: none; }
.trio-celda.pliega:hover { background: var(--velo-suave); }
.trio-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texto-tenue); font-weight: 700;
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
}
.trio-titulo .pliegue { font-size: 11px; color: var(--texto-suave); width: 11px; }
.trio-linea {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13px; min-height: 1.6rem;
}
.trio-linea .pista { font-size: 12px; }
.trio-desplegado {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde);
}

.datos-soa { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.datos-soa dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 600;
}
.datos-soa dd { margin: 3px 0 0; font-size: 14px; }
.datos-soa dd, .datos-soa .valor { font-variant-numeric: tabular-nums; }
.justificacion { line-height: 1.6; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
table.simple, table.medidas { width: 100%; border-collapse: collapse; font-size: 13.8px; }
table.simple, table.medidas { background: var(--panel); }
.ficha table.simple, .bloque table.simple { background: none; }
table.simple thead th, table.medidas thead th {
  text-align: left; padding: 11px 13px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texto-tenue); font-weight: 700;
  background: var(--cabecera-tabla); border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
table.simple tbody td, table.medidas tbody td {
  padding: 10px 13px; border-bottom: 1px solid var(--linea-fila);
  vertical-align: top;
}
table.simple tbody tr:last-child td, table.medidas tbody tr:last-child td { border-bottom: none; }
table.simple tbody tr.fila:hover, table.medidas tbody tr.fila:hover {
  background: var(--velo-suave); cursor: pointer;
}
table.medidas tbody tr.no-aplica { color: var(--texto-tenue); }
table.simple caption { text-align: left; padding: 11px 13px; color: var(--texto-tenue); font-size: 13px; }

/* El listado del catálogo: una sola tabla, con los marcos y los grupos como
   filas. Así las columnas quedan alineadas de arriba abajo y la cabecera se lee
   una vez, como en `seguros`. */
.tabla-envoltorio {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden;
}
.tabla-envoltorio table.medidas thead th { position: sticky; top: 0; z-index: 2; }

/* Un marco = una tarjeta. Son los tres bloques de primer nivel del SOA y
   conviene que se distingan; con quince grupos seguidos en una sola tabla se
   perdía la frontera. */
section.marco { margin-bottom: 26px; }
section.marco:last-child { margin-bottom: 0; }
section.marco > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--texto-suave); font-weight: 700;
  margin: 0 0 8px; padding: 0 2px;
  display: flex; align-items: baseline; gap: 6px;
}
section.marco > h2 .cod {
  text-transform: none; letter-spacing: 0; color: var(--texto-tenue);
  font-size: 12px;
}
section.marco > h2 .cuantas {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--texto-tenue); font-size: 11.5px;
}

/* Anchos fijos, o cada tarjeta se mediría por su contenido y las columnas no
   cuadrarían entre las tres. */
table.medidas { table-layout: fixed; }
table.medidas td, table.medidas th { overflow-wrap: anywhere; }

tr.fila-grupo td {
  background: var(--velo-suave); font-weight: 600; font-size: 13.5px;
  padding: 9px 13px !important; cursor: pointer;
}
tr.fila-grupo:hover td { background: var(--velo-boton); }
tr.fila-grupo .pliegue {
  color: var(--texto-suave); font-size: 13px; display: inline-block;
  width: 14px; margin-right: 3px; line-height: 1;
}
tr.fila-grupo .cod { color: var(--texto-tenue); font-weight: 500; }
tr.fila-grupo .cuantas {
  float: right; color: var(--texto-tenue); font-size: 12px; font-weight: 400;
}

/* ---------------------------------------------------------------------
   Distintivos
   --------------------------------------------------------------------- */
.etiqueta {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--borde);
  background: var(--gris-fondo); color: var(--texto-suave);
}
.etiqueta.alta     { background: var(--rojo-fondo);  color: var(--rojo);  border-color: rgba(198,47,64,.3); }
.etiqueta.media    { background: var(--ambar-fondo); color: var(--ambar); border-color: rgba(154,98,6,.3); }
.etiqueta.ok       { background: var(--verde-fondo); color: var(--verde); border-color: rgba(15,122,95,.3); }
.etiqueta.falta    { background: var(--ambar-fondo); color: var(--ambar); border-color: rgba(154,98,6,.3); }
.etiqueta.refuerzo { background: var(--activo-fondo); color: var(--activo-texto); border-color: rgba(47,102,204,.3); }
/* Refuerzo que la categoría NO exige y que aun así se implementa (SOA v02).
   Se distingue del exigido **sin color propio**: mismo azul, relleno hueco y
   borde discontinuo. Con un color distinto parecería otra cosa; lo que es, es
   el mismo refuerzo con otro origen, y hacer más de lo obligado no es un
   aviso. El borde discontinuo se ve también impreso y en blanco y negro. */
.etiqueta.refuerzo-opcional {
  background: transparent; color: var(--activo-texto);
  border: 1px dashed rgba(47,102,204,.45);
}

.aviso {
  background: var(--ambar-fondo); border: 1px solid rgba(154, 98, 6, .25);
  border-left-width: 3px; border-radius: var(--radio-s);
  padding: 5px 9px; font-size: 11.8px; color: var(--ambar); width: 100%;
  margin: 4px 0; line-height: 1.45;
}
ul.documentos .aviso { margin: 2px 0 0; }
.aviso.duro {
  background: var(--rojo-fondo); border-color: rgba(198, 47, 64, .3); color: var(--rojo);
}

/* ---------------------------------------------------------------------
   Listas: documentos, recursos, evidencias requeridas, historial
   --------------------------------------------------------------------- */
ul.documentos, ul.recursos, ul.requeridas, ul.historial, ul.lista-panel {
  list-style: none; margin: 0; padding: 0;
}
ul.documentos li, ul.recursos li {
  padding: 9px 0; border-top: 1px solid var(--linea-fila);
}
ul.documentos li:first-child, ul.recursos li:first-child { border-top: 0; }
ul.documentos .titulo, ul.recursos .titulo { font-weight: 500; }
.doc-linea {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap; min-width: 0;
}
.doc-enlaces { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Enlaces
   Antes eran «abrir» subrayado en azul, repetido dos veces por documento.
   Ahora son fichas con su etiqueta de verdad —la versión, la entidad, el
   formato— y la URL completa en el title.
   --------------------------------------------------------------------- */
a.enlace {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 20px;
  background: var(--velo-boton); border: 1px solid var(--borde);
  color: var(--texto-suave); text-decoration: none;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
a.enlace:hover {
  border-color: var(--azul); color: var(--azul); background: var(--activo-fondo);
}
a.enlace .enlace-icono { font-size: 11px; line-height: 1; opacity: .8; }
a.enlace.fuerte {
  background: var(--activo-fondo); border-color: transparent; color: var(--activo-texto);
}
a.enlace.fuerte:hover { border-color: var(--azul); }

/* ---------------------------------------------------------------------
   Desajustes del SOA (5.9)
   Un icono siempre visible con el detalle al pasar por encima. El color dice
   la gravedad: rojo cuando lo que enseñarías al auditor está mal —obsoleto o
   inexistente—, ámbar cuando el documento es el correcto y lo que falla es
   cómo lo nombra el SOA.
   --------------------------------------------------------------------- */
.desajuste { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.desajuste-marca { font-size: 12px; line-height: 1; cursor: help; }
.desajuste.leve  .desajuste-marca { color: var(--ambar); }
.desajuste.grave .desajuste-marca { color: var(--rojo); }
.desajuste-texto { font-size: 11.5px; color: var(--texto-tenue); }
.desajuste.grave .desajuste-texto { color: var(--rojo); }

/* Solo para lectores de pantalla: el globo es visual y no llega por voz. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Globo propio y no el `title` del navegador, que tarda un segundo en salir,
   no se puede maquetar y se corta. */
.globo {
  position: absolute; bottom: calc(100% + 8px); left: -8px; z-index: 80;
  width: 23rem; max-width: 70vw;
  background: var(--panel-solido); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s);
  box-shadow: var(--sombra); padding: 9px 11px;
  font-size: 12.2px; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: 0; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .12s, transform .12s, visibility .12s;
  pointer-events: none;
}
.globo b { color: var(--texto); }
.globo b:first-child { display: block; margin-bottom: 3px; }
.desajuste:hover .globo, .desajuste:focus-within .globo {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.desajuste.leve  .globo { border-left: 3px solid var(--ambar); }
.desajuste.grave .globo { border-left: 3px solid var(--rojo); }
/* En la mitad derecha se ancla a la derecha, o se sale de la pantalla. */
.doc-enlaces + .desajuste .globo, td:last-child .globo { left: auto; right: -8px; }

ul.requeridas li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid var(--linea-fila);
}
ul.requeridas li:first-child { border-top: 0; }
ul.requeridas .orden {
  color: var(--texto-tenue); font-family: var(--mono); font-size: 12.5px;
  min-width: 1.4rem; padding-top: 2px;
}

ul.historial li {
  padding: 8px 0; border-top: 1px solid var(--linea-fila);
  font-size: 12.8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
ul.historial li:first-child { border-top: 0; }
.cuando { color: var(--texto-tenue); margin-left: auto; font-family: var(--mono); font-size: 11.5px; }

/* La lista de actividad, como tarjeta */
.tarjeta-lista {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 8px 18px;
}
.etiqueta-campo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 600;
}

/* El volcado de nombres de carpeta, para copiarlo tal cual a Drive */
pre.carpetas {
  max-height: 24rem; overflow: auto; margin: 0;
  background: var(--campo-fondo); color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: var(--radio-s);
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}

.editor-requeridas .fila-el {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px;
}
.editor-requeridas .fila-el textarea { margin: 0; }

/* ---------------------------------------------------------------------
   Auditoría activa: visible en todo momento (8.3)
   --------------------------------------------------------------------- */
.chip-auditoria {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--activo-fondo); border: 1px solid transparent;
  border-left: 3px solid var(--azul); border-radius: var(--radio-s);
  padding: 6px 11px; cursor: pointer; font-family: inherit;
  text-align: left; max-width: 17rem;
}
.chip-auditoria b {
  font-size: 12.8px; color: var(--activo-texto); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15.5rem;
}
.chip-auditoria span { font-size: 11px; color: var(--texto-tenue); }
.chip-auditoria:hover { border-color: var(--borde-fuerte); }
/* Si la auditoría en la que trabajas ya está cerrada, la chapa no puede seguir
   pareciendo viva: pierde el azul y baja el tono. */
.chip-auditoria.cerrada {
  background: var(--gris-fondo); border-left-color: var(--gris);
}
.chip-auditoria.cerrada b { color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Trabajo simultáneo (sección 12)
   --------------------------------------------------------------------- */
.presencia {
  border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.presencia-estado {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.presencia-fila { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.presencia-fila .pista { font-size: 11px; }

/* El punto de «en vivo». Lleva animación suave y se detiene si la persona
   pidió reducir el movimiento. */
.punto-vivo {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
  flex: none; animation: latido 2s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

.presencia-aqui { display: inline-flex; gap: 3px; align-items: center; }

/* El conflicto de edición: los dos valores, y decide la persona */
.conflicto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0;
}
@media (max-width: 620px) { .conflicto { grid-template-columns: 1fr; } }
.conflicto-valor {
  margin-top: 5px; padding: 10px 12px; border-radius: var(--radio-s);
  background: var(--velo-suave); border: 1px solid var(--borde);
  font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 12rem; overflow: auto;
}
.conflicto-valor.mio { border-color: var(--azul); background: var(--activo-fondo); }

.aviso-flotante {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-solido); color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  padding: 10px 16px; border-radius: var(--radio-s);
  font-size: 13.5px; z-index: 100; box-shadow: var(--sombra);
}
.aviso-flotante.mal { border-color: var(--rojo); color: var(--rojo); }

/* =====================================================================
   Modo auditoría (fase 3)
   Pantalla completa y sin nada que distraiga: se usa con el auditor
   delante. Los tamaños son deliberadamente grandes —se lee de pie y de
   reojo— y el veredicto activo se distingue por color Y por borde, para
   que funcione también en blanco y negro.
   ===================================================================== */
.barrido {
  position: fixed; inset: 0; background: var(--fondo);
  display: flex; flex-direction: column; z-index: 50;
}
.barrido-cabecera {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--lateral-fondo);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--borde);
}
.progreso { font-size: 13px; color: var(--texto-tenue); }
.progreso b { color: var(--texto); font-family: var(--mono); }

.barrido-cuerpo {
  flex: 1; display: grid; grid-template-columns: 1fr 23rem;
  gap: 16px; padding: 18px; overflow: auto; align-items: start;
}
@media (max-width: 1040px) { .barrido-cuerpo { grid-template-columns: 1fr; } }

/* Cada bloque de la medida, su card (2026-10-15), como ya lo eran hallazgos,
   lo que falta y apuntes a la derecha. */
.barrido-principal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-barrido {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 22px;
}
.card-barrido .barrido-h2 { margin: 0; }
.cab-card { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.cifras-card { margin-left: auto; font-size: 12.5px; color: var(--texto-tenue); }
.cifras-card b { color: var(--texto); font-family: var(--mono); font-weight: 500; }
.pie-card { margin-top: 10px; }
.justificacion-cab { margin: 10px 0 0; font-size: 13px; }
.card-barrido .veredictos { margin: 14px 0 0; }
/* Lo que sale hacia el auditor, con la misma señal que en el portal. */
.card-barrido.card-obs { border-top: 3px solid var(--azul); }
.sale-portal {
  margin-left: 6px; padding: 1px 8px; border-radius: 20px; font-size: 10.5px;
  color: var(--azul); border: 1px solid var(--azul); white-space: nowrap;
}
.rotulo-interno { margin: 0 4px -4px; font-size: 11.5px; color: var(--texto-tenue); }
.barrido-titulo .cod { font-size: 13px; color: var(--texto-tenue); }
.barrido-titulo h1 { margin: 4px 0 10px; font-size: 28px; font-weight: 600; letter-spacing: -0.6px; }
.barrido-etiquetas { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.barrido-principal .vacio { padding: 18px 0; text-align: left; }
.barrido-h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texto-tenue); font-weight: 700; margin: 26px 0 10px;
}

.veredictos { display: flex; gap: 7px; flex-wrap: wrap; margin: 20px 0 8px; align-items: center; }
.veredicto {
  border: 2px solid var(--borde); background: var(--velo-boton); cursor: pointer;
  padding: 9px 14px; border-radius: var(--radio-s); font-family: inherit;
  font-size: 14px; color: var(--texto-suave); transition: border-color .12s, color .12s;
}
.veredicto b {
  display: inline-block; min-width: 1.2rem; text-align: center;
  background: var(--velo-fuerte); border-radius: 5px; margin-right: 7px;
  font-size: 12px; font-family: var(--mono); color: var(--texto-tenue);
}
.veredicto:hover:not(:disabled) { border-color: var(--azul); color: var(--texto); }
.veredicto:disabled { opacity: .4; cursor: default; }
.veredicto[aria-current="true"] { color: #fff; font-weight: 600; }
.veredicto[aria-current="true"] b { background: rgba(255,255,255,.22); color: #fff; }
.veredicto.v-conforme[aria-current="true"]    { background: var(--verde);   border-color: var(--verde); }
.veredicto.v-no_conforme[aria-current="true"] { background: var(--rojo);    border-color: var(--rojo); }
.veredicto.v-observacion[aria-current="true"] { background: var(--ambar);   border-color: var(--ambar); }
.veredicto.v-pendiente[aria-current="true"]   { background: var(--azul);    border-color: var(--azul); }
.veredicto.v-sin_revisar[aria-current="true"] { background: var(--gris);    border-color: var(--gris); }

ul.requeridas.grande li { padding: 11px 0; font-size: 15px; }
ul.requeridas.grande .orden { font-size: 13px; }

.barrido-lado { display: flex; flex-direction: column; gap: 12px; }
.panel {
  background: var(--panel); backdrop-filter: blur(14px);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px;
}
.panel > h3 {
  margin: 0 0 10px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texto-tenue); font-weight: 700;
  display: flex; align-items: center; gap: 7px;
}
.panel .cuenta {
  background: var(--velo-fuerte); border-radius: 20px; padding: 0 7px;
  font-size: 11px; font-family: var(--mono); color: var(--texto-suave);
}
.panel > h3 .boton { margin-left: auto; padding: 1px 8px; font-size: 12px; }
ul.lista-panel { font-size: 12.8px; }
ul.lista-panel li {
  padding: 9px 0; border-top: 1px solid var(--linea-fila); line-height: 1.45;
}
ul.lista-panel li:first-child { border-top: 0; }
/* Editar y borrar lo anotado en el barrido: discretos, pero siempre a mano. */
ul.lista-panel .pista a { color: var(--texto-tenue); }
ul.lista-panel .pista a:hover { color: var(--azul); }
ul.lista-panel .pista a.borrar:hover { color: var(--rojo); }
.capa-fila { display: flex; gap: 8px; margin-bottom: .5rem; }
.capa-fila input { flex: 1; }
/* El enlace al ticket junto al PDF de GLPI: pequeño, pero siempre a mano. */
.enlace-glpi {
  flex: 0 0 auto; margin-left: 6px; font-size: 11.5px; white-space: nowrap;
  color: var(--azul); text-decoration: none; border: 1px solid var(--borde);
  border-radius: 999px; padding: 1px 8px;
}
.enlace-glpi:hover { border-color: var(--azul); background: var(--activo-fondo); }
.en-catalogo { flex: 0 0 auto; color: var(--verde); font-size: 11.5px; white-space: nowrap; }
.capa-borrar { width: min(32rem, 100%); }
.capa-borrar blockquote {
  margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--rojo);
  background: var(--rojo-fondo); border-radius: var(--radio-s); white-space: pre-wrap;
}

.capa {
  position: fixed; inset: 0; background: var(--velo-modal);
  display: grid; place-items: center; z-index: 60; padding: 18px;
  backdrop-filter: blur(3px);
}
.capa-caja {
  background: var(--panel-solido); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 22px;
  width: min(42rem, 100%); box-shadow: var(--sombra);
  max-height: 90vh; overflow: auto;
}
.capa-caja.ancha { width: min(52rem, 100%); }
.capa-caja h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }

/* --- Documentación: la barra de la lista y la capa de edición ------------ */
.docs-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.docs-barra .conteo { flex: 1 1 18rem; margin: 0; }
.docs-barra input[type="search"] { flex: 0 1 18rem; min-width: 12rem; }
.boton.peligro { background: var(--rojo-fondo); color: var(--rojo); border-color: rgba(198, 47, 64, .3); }
.boton.peligro:hover:not(:disabled) { filter: none; background: var(--rojo); color: #fff; }
.capa-doc .acciones .peligro { margin-left: auto; }
.capa-doc label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-suave); }
.doc-identidad { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 10px; margin-bottom: 12px; }
.doc-cabecera { margin: 0 0 4px; font-size: 14px; }
.doc-cabecera .cod { margin-right: 6px; }
.doc-rotulo { margin: 14px 0 6px; font-size: 12px; color: var(--texto-suave); }
.doc-enlace-fila {
  display: grid; grid-template-columns: 10rem 1fr auto auto auto; gap: 6px; margin-bottom: 6px;
}
.doc-enlace-fila .boton { padding: 6px 10px; }
.chip {
  background: var(--velo-boton); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 999px; padding: 2px 10px; font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: var(--borde-fuerte); }
@media (max-width: 640px) {
  .doc-identidad { grid-template-columns: 1fr; }
  .doc-enlace-fila { grid-template-columns: 1fr auto auto auto; }
  .doc-enlace-fila .doc-etiqueta { grid-column: 1 / -1; }
}

/* Los atajos, en columnas. Si no se explican, nadie los usa. */
.atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 26px; }
@media (max-width: 640px) { .atajos { grid-template-columns: 1fr; } }
.atajos-grupo h4 {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 700;
  margin: 0 0 7px; padding-bottom: 5px; border-bottom: 1px solid var(--borde);
}
.atajo {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 13px;
}
.tecla {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  background: var(--velo-boton); border: 1px solid var(--borde);
  border-bottom-width: 2px; border-radius: 5px;
  padding: 2px 7px; min-width: 3.2rem; text-align: center;
  color: var(--texto); flex: none; white-space: nowrap;
}
.capa-caja h3 .pista { font-weight: 400; font-family: var(--mono); }

/* Lo que queda sin enviar se ve. Perder una anotación en silencio sería
   el peor fallo posible de esta herramienta. */
.cola-pendiente {
  position: fixed; bottom: 18px; right: 18px; z-index: 70;
  background: var(--ambar-fondo); border: 1px solid rgba(154, 98, 6, .35);
  border-left-width: 3px; border-radius: var(--radio-s);
  padding: 9px 13px; font-size: 12.8px; color: var(--ambar);
  display: flex; align-items: center; gap: 9px; box-shadow: var(--sombra);
}
.cola-pendiente b { font-family: var(--mono); }

/* ---------------------------------------------------------------------
   Impresión: los informes de auditoría se imprimen y se adjuntan
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Informes (fase 4)
   Se leen en pantalla y **se imprimen y se entregan**, así que la cabecera
   repite qué auditoría es y con qué versión del SOA: en papel no hay
   navegación de la que deducirlo.
   --------------------------------------------------------------------- */
.informe { max-width: 62rem; }
/* Un informe es estrecho para que se lea; un **registro de trabajo** quiere todo
   el ancho. El de riesgos tiene once columnas con desplegables dentro y dentro de
   62rem quedaba ahogado, con la mitad fuera de la vista. */
.informe.ancho { max-width: none; }
/* Solo tiene sentido impreso: una ficha suelta tiene que decir de qué auditoría
   y de qué versión del SOA sale. En pantalla lo dice ya la cabecera. */
.pie-impreso { display: none; }
.informe-cabecera {
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 2px solid var(--texto);
}
.informe-marca {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-tenue); margin: 0 0 10px;
}
.informe-marca:has(+ .informe-significado) { margin-bottom: 2px; }
.informe-significado {
  font-size: 10.5px; color: var(--texto-tenue); margin: 0 0 12px;
}
.informe-cabecera h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
.informe-sub { margin: 0 0 16px; color: var(--texto-suave); max-width: 60ch; }
.informe-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px 20px; margin: 0;
}
.informe-datos dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 2px;
}
.informe-datos dd { margin: 0; font-size: 14px; }
.informe-resultado { margin: 16px 0 0; font-size: 15px; }

.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; margin: 0; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--radio-s); overflow: hidden;
}
.cifra { background: var(--panel); padding: 10px 13px; }
.cifra dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 3px;
}
.cifra dd {
  margin: 0; font-family: var(--mono); font-size: 21px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra dd small { font-size: 12px; color: var(--texto-tenue); font-family: inherit; }

.informe-medida { padding: 12px 0; border-top: 1px solid var(--borde); }
.informe-medida:first-of-type { border-top: none; }
.informe-medida-cabeza {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.informe-medida-cabeza .cod { font-family: var(--mono); color: var(--texto-tenue); }

.informe-lista { list-style: none; margin: 4px 0; padding: 0; }
.informe-lista li { font-size: 13.5px; padding: 2px 0; }
.informe-lista .cubierta { color: var(--texto-suave); }
.informe-lista .sin-cubrir { color: var(--rojo); }
.informe-evidencias { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.informe-hallazgos, .informe-apuntes {
  list-style: none; margin: 6px 0 0; padding: 0;
}
.informe-hallazgos li, .informe-apuntes li {
  font-size: 13.5px; padding: 3px 0 3px 10px;
  border-left: 2px solid var(--borde);
}
.informe-hallazgos li { border-left-color: var(--rojo); }

/* ---------------------------------------------------------------------
   Contadores navegables (fase 4 y 5)
   Cada indicador es un botón: pulsarlo filtra el listado por ese criterio,
   que es lo que pide ENS-01 10. Los que señalan un problema se marcan solo
   cuando su cuenta no es cero: un cero en rojo alarma sin motivo.
   --------------------------------------------------------------------- */
/* Un código de medida navegable. Sale de la misma decisión que `.enlace`: nada
   de <a> subrayado en azul, que en una tabla ensucia y no se lee. */
.codigos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cod-enlace {
  padding: 1px 7px; cursor: pointer; font-family: inherit;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio-s); color: var(--texto-suave);
}
.cod-enlace:hover { border-color: var(--azul); color: var(--azul); }
.cod-enlace .cod { font-family: var(--mono); }

/* El aviso de que el listado está filtrado desde un indicador del panel. Tiene
   que ser imposible no verlo: si no, se lee un listado parcial como si fuera
   entero. */
.filtro-activo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--activo-fondo); border-left: 3px solid var(--azul);
  border-radius: var(--radio-s); font-size: 13.5px;
}
.filtro-activo span { color: var(--activo-texto); }

/* «Qué preguntará el auditor» (CCN-STIC-808), dentro del bloque de evidencias
   requeridas. **Tiene que verse menos que ellas**: es una ampliación, no el
   contenido. De ahí el separador fino, el tamaño pequeño y que vaya plegado. */
.aspectos { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borde); }
.aspectos-cabecera {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--texto-tenue); text-align: left;
}
.aspectos-cabecera:hover { color: var(--texto-suave); }
.aspectos-cabecera .icono { font-size: 10px; }
.aspectos-cabecera .cuantos {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 1px 7px; border-radius: 20px;
  background: var(--velo-suave); color: var(--texto-tenue);
}
.aspectos-cabecera .pista { margin-left: auto; font-weight: 400; }
.aspectos-lista { margin: 10px 0 6px; padding-left: 22px; }
.aspectos-lista li {
  font-size: 13.5px; line-height: 1.5; color: var(--texto-suave);
  padding: 4px 0;
}
.aspectos-lista li .etiqueta { margin-right: 5px; }

/* Registro de riesgos (fase 6). La tabla lleva once columnas con desplegables
   dentro, así que scrollea en su propio contenedor: el cuerpo de la página no
   debe desplazarse en horizontal. */
.ancho-scroll { overflow-x: auto; }
.ancho-scroll table { min-width: 68rem; }

.rejilla-riesgo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 10px 14px;
}
.rejilla-riesgo label, label.ancho {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 600;
}
.rejilla-riesgo input, .rejilla-riesgo select, label.ancho textarea {
  font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0;
  color: var(--texto); font-weight: 400;
}
label.ancho { margin-top: 10px; }
.casilla {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono);
  font-size: 13px; color: var(--texto-suave);
}

.riesgos-medida { list-style: none; margin: 0; padding: 0; }
.riesgos-medida li { padding: 8px 0; border-top: 1px solid var(--borde); }
.riesgos-medida li:first-child { border-top: none; }
.riesgos-medida .cod { font-family: var(--mono); color: var(--texto-tenue); }

/* Plan de mejora de una medida (fase 6). Una acción por línea, con el texto
   arriba y sus campos debajo: en una tabla no cabrían los tres selectores. */
/* Los desplegables de nivel llevan texto largo («L2 — Reproducible pero
   intuitivo»), así que estas columnas necesitan más aire que las de un dato
   corto: con 170px el desplegable se comía la etiqueta de brecha. */
.madurez-datos { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.madurez-datos dd { display: flex; align-items: center; gap: 8px; }
.madurez-datos select { max-width: 100%; }
.nueva-mejora input[type="text"] { flex: 1 1 22rem; min-width: 0; }

/* `.vacio` lleva 42px de relleno y centrado, que está bien para una tabla vacía
   pero deja un agujero absurdo dentro de un bloque de la ficha. */
.mejoras + .vacio, .riesgos-medida + .vacio { padding: 0; }
.bloque > .vacio:not(:only-child), .bloque .vacio.compacto {
  padding: 6px 0; text-align: left;
}

.mejoras { list-style: none; margin: 0; padding: 0; }
.mejoras li { padding: 9px 0; border-top: 1px solid var(--borde); }
.mejoras li:first-child { border-top: none; }
.mejoras li.cerrada .mejora-texto { color: var(--texto-tenue); text-decoration: line-through; }
.mejora-texto { font-size: 14.5px; margin-bottom: 5px; }
.mejora-campos {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px;
}
h4.sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-tenue);
  margin: 1rem 0 .5rem; font-weight: 500;
}

.contadores { display: flex; flex-wrap: wrap; gap: 8px; }
.contador {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-width: 6.5rem; padding: 8px 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio-s); font-family: inherit; text-align: left;
  color: var(--texto);
}
.contador b {
  font-family: var(--mono); font-size: 19px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.contador span { font-size: 11.5px; color: var(--texto-tenue); }
.contador:hover:not(:disabled) { border-color: var(--borde-fuerte); }
.contador[aria-current="true"] {
  background: var(--activo-fondo); border-color: var(--azul);
}
.contador[aria-current="true"] b { color: var(--activo-texto); }
.contador:disabled { cursor: default; opacity: .5; }
/* Un indicador que es solo un dato: mismo aspecto, sin parecer pulsable ni
   apagado. Un botón gris se lee como algo averiado. */
.contador.dato { cursor: default; }
.contador.dato:hover { border-color: var(--borde); }
.contador.alerta { background: var(--rojo-fondo); border-color: var(--rojo); }
.contador.alerta b { color: var(--rojo); }

/* ---------------------------------------------------------------------
   Ficheros de evidencia (fase A)

   Arrastrar un fichero sobre la línea de un elemento requerido lo adjunta.
   El sombreado se pone y se quita manipulando la clase directamente sobre el
   nodo, sin pasar por `pintar()`: `dragover` salta decenas de veces por
   segundo y un repintado destruiría el arrastre en curso.

   Mientras se arrastra algo por encima de la aplicación, `body.arrastrando`
   dibuja en tenue TODAS las zonas válidas: así se ve dónde se puede soltar
   antes de soltar, en lugar de descubrirlo por ensayo y error.
   --------------------------------------------------------------------- */
.zona-soltar {
  position: relative; border-radius: var(--radio-s);
  transition: background .12s, box-shadow .12s;
}
body.arrastrando .zona-soltar {
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}
.zona-soltar.soltando {
  background: var(--activo-fondo);
  box-shadow: inset 0 0 0 2px var(--azul);
}
/* La línea marcada como destino del Ctrl+V y de la tecla D. El color no es la
   única señal: lleva además el texto «pega aquí». */
/* Desde el 2026-09-24 cada fila lleva debajo sus evidencias, así que la fila
   deja de ser un flex: la cabecera sí lo es, y las líneas van debajo. */
ul.requeridas > li.req-fila { display: block; padding: 8px 6px; }
/* La fila bajo el ratón es la que se marcará como destino al pulsar. */
ul.requeridas > li.req-fila, .nuevas-ev { cursor: pointer; }
ul.requeridas > li.req-fila:hover:not(.activa) { background: var(--linea-fila); }
.nuevas-ev:hover:not(.activa) { border-color: var(--azul); }
.req-cab { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.req-cab .req-texto { flex: 1; min-width: 12rem; }
ul.lineas-ev { list-style: none; margin: 6px 0 0 1.9rem; padding: 0; }
ul.requeridas ul.lineas-ev li, .nuevas-ev ul.lineas-ev li {
  display: block; border-top: 0; padding: 3px 6px; font-size: 13px;
  border-radius: var(--radio-s);
}
/* Qué línea es la que se va a pulsar: con muchas evidencias, sin esto no se sabe. */
ul.lineas-ev li.linea-ev:hover { background: var(--velo-suave); box-shadow: inset 2px 0 0 var(--azul); }
.linea-ev-cab { flex-wrap: nowrap; min-height: 26px; }
.linea-ev-cab > * { flex: none; }
/* «Qué demuestra» ocupa el hueco que quede y se corta: la línea no crece. */
.linea-ev-cab .que-ev { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; }
.linea-ev-cab .que-ev + .hueco { display: none; }
.linea-ev-cab .nombre-ev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 22rem; }
.entrega.en-sala { cursor: default; border-style: dotted; }
.entrega.en-sala:hover { border-color: var(--borde-fuerte); color: var(--texto-tenue); }
.nuevas-ev ul.lineas-ev { margin-left: 0; }
.linea-ev-cab { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.linea-ev-cab .hueco { flex: 1; }
.titulo-ev { font-weight: 600; }
.boton.mini { padding: .05rem .35rem; font-size: 12px; }
select.mini { font-size: 12px; max-width: 16rem; }

/* «Nuevas evidencias»: su propia zona para soltar, separada de la lista. En el
   barrido es ella misma la card, con el marco discontinuo de zona para soltar:
   un solo marco y no dos. */
.nuevas-ev {
  margin-top: 14px; padding: 10px 12px;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-s);
}
.nuevas-ev.card-barrido {
  margin-top: 0; padding: 14px 22px; border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
}
.nuevas-ev.activa { background: var(--velo-suave); border-color: var(--azul); }
.nuevas-ev .vacio { padding: 8px 0 2px; text-align: left; }

ul.requeridas li.activa { background: var(--velo-suave); }

/* Observaciones para el auditor, dentro de la aplicación: con borde azul para
   que se lea como «esto sale fuera», distinto de la nota interna. */
.nota-auditor {
  margin: 6px 0 2px 2.2rem; padding: 6px 10px; font-size: 13px; white-space: pre-wrap;
  background: var(--velo-suave); border-left: 3px solid var(--azul);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
}
.nota-auditor-bloque { margin-top: 0; }
.nota-auditor-bloque .nota-auditor { margin-left: 0; }
@media print { .nota-auditor { border-left-color: currentColor; } }
ul.requeridas li.activa .orden { color: var(--azul); }
.pista.aqui { color: var(--azul); }

/* La franja para las evidencias que no cubren un elemento concreto. */
.zona-soltar.suelta {
  border: 1px dashed var(--borde-fuerte); padding: 12px 14px; margin: 0 0 .8rem;
  color: var(--texto-suave); font-size: 12.5px;
}

.cuenta-ficheros {
  font-family: var(--mono); font-size: 12px; color: var(--texto-tenue);
  white-space: nowrap; padding-top: 2px;
}

/* El adjunto dentro de una línea.

   Es una **ficha compacta de una sola pieza**, no tres botones sueltos: en una
   medida con seis evidencias, cada adjunto ocupando una línea alta con su
   nombre repetido convertía la tabla en un muro. Nombre, peso y descarga van
   pegados y con la altura de una línea de texto. */
.fichero {
  display: inline-flex; align-items: stretch; margin: 1px 6px 1px 0; max-width: 100%;
}
.enlace-fichero {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; line-height: 1.5;
  padding: 2px 7px; cursor: pointer; min-width: 0;
  color: var(--texto-suave);
  background: var(--velo-boton); border: 1px solid var(--borde);
  border-radius: 20px 0 0 20px;
}
.enlace-fichero .nombre {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enlace-fichero .ico { font-size: 13px; }
.enlace-fichero .peso {
  font-family: var(--mono); font-size: 10.5px; color: var(--texto-tenue);
  padding-left: 2px;
}
.enlace-fichero.bajar {
  border-radius: 0 20px 20px 0; border-left: 0; padding: 2px 8px 2px 6px;
}
.enlace-fichero:hover { background: var(--velo-fuerte); color: var(--texto); }
.enlace-fichero:hover .peso { color: var(--texto-suave); }

/* Ámbar, y con su texto al lado: un fichero sin reconocer o en cuarentena no
   entra en el dossier, y eso hay que verlo antes de entregarlo. */
.fichero.dudoso .enlace-fichero { border-color: var(--ambar); color: var(--ambar); }
.aviso-copia { color: var(--ambar); }

/* Preparada o incluida (2026-09-24). Un conmutador pequeño junto a cada
   adjunto: el texto dice el estado y el símbolo lo repite (○ / ●), así que el
   color nunca es la única señal. Incluida va en verde porque es lo que ya ha
   salido de casa. */
.entrega {
  font: inherit; font-size: 11px; font-family: var(--mono); line-height: 1.5;
  padding: 0 7px; margin: 1px 6px 1px 0; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--borde-fuerte); background: none; color: var(--texto-tenue);
  white-space: nowrap; vertical-align: middle;
}
.entrega:hover { border-color: var(--azul); color: var(--texto); }
/* Solo un enlace: no hay nada que entregar, y no se puede pulsar. */
.entrega.sin-copia { cursor: default; border-color: var(--ambar); color: var(--ambar); }
.entrega.sin-copia:hover { border-color: var(--ambar); color: var(--ambar); }
.entrega.incluida {
  border-style: solid; border-color: var(--verde);
  background: var(--verde-fondo); color: var(--verde); font-weight: 600;
}
.con-entrega { display: inline-flex; align-items: center; flex-wrap: nowrap; }

/* La capa de «qué se le entrega» (tecla I). */
.lista-entrega { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-entrega li {
  display: flex; align-items: center; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--linea-fila); font-size: 13px;
}
.lista-entrega li .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-entrega li .tecla { min-width: 1.6rem; }
.lista-entrega li.grupo-entrega {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--texto-tenue); font-weight: 700; border-bottom: 0; padding-top: 12px;
}

/* El lanzador de medidas (/). Filas de una línea y bien juntas: las 73
   tienen que recorrerse de un vistazo, como un explorador. */
.capa-caja.lanzador { width: min(46rem, 100%); }
.lanzador-lista {
  list-style: none; margin: 10px 0; padding: 0;
  max-height: min(60vh, 30rem); overflow: auto;
  border: 1px solid var(--borde); border-radius: var(--radio-s);
}
.lanzador-lista li {
  display: flex; align-items: center; gap: 10px; padding: 5px 10px;
  border-bottom: 1px solid var(--linea-fila); font-size: 13px; cursor: pointer;
}
.lanzador-lista li:last-child { border-bottom: 0; }
.lanzador-lista li .cod { font-family: var(--mono); font-size: 12px; min-width: 5.2rem; color: var(--texto-tenue); }
.lanzador-lista li .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lanzador-lista li .nombre .pista { margin-left: 6px; }
.lanzador-lista li:hover { background: var(--velo-suave); }
.lanzador-lista li.activa { background: var(--activo-fondo); color: var(--activo-texto); }
.lanzador-lista li.activa .cod { color: inherit; }
.lanzador-lista li.actual .cod::after { content: ' · aquí'; }
.lanzador-lista li.vacio { cursor: default; color: var(--texto-tenue); }
.barrido-cabecera .tecla { min-width: 0; padding: 0 5px; font-size: 10.5px; margin-left: 4px; }

/* El campo del título del adjunto, discreto hasta que se usa: es opcional, y
   como caja de texto a todo trapo competía con el nombre del fichero. */
.titulo-evidencia {
  width: 100%; margin-top: 3px; font-size: 12px; padding: 2px 6px;
  background: transparent; border: 1px solid transparent;
}
.titulo-evidencia:hover { border-color: var(--borde); }
.titulo-evidencia:focus {
  background: var(--campo-fondo); border-color: var(--azul);
}

/* Asomarse al fichero pasando el ratón. Va suelta en el body y colocada con
   coordenadas: dentro del flujo se la comerían los `overflow` de las tablas. */
.asomo {
  position: fixed; z-index: 60; width: 280px;
  background: var(--panel-solido); border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s); box-shadow: var(--sombra);
  padding: 6px; pointer-events: none;
}
.asomo img, .asomo iframe {
  display: block; width: 100%; height: 200px; border: 0;
  border-radius: var(--radio-s); background: #fff; object-fit: contain;
}
.asomo .pie {
  display: block; margin-top: 5px; font-size: 11px; color: var(--texto-tenue);
  line-height: 1.35;
}

.barra-subida:empty { display: none; }
.barra-subida {
  flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.progreso-barra {
  flex: 1; height: 4px; border-radius: 2px; background: var(--velo-boton);
  overflow: hidden;
}
.progreso-barra i { display: block; height: 100%; background: var(--degradado); }

/* El visor. Con el auditor delante, «déjame ver esa captura» no puede
   significar descargar el fichero y abrir el visor del sistema encima. */
.visor-marco { width: 100%; height: min(70vh, 44rem); border: 0; border-radius: var(--radio-s); background: #fff; }
.visor-imagen { max-width: 100%; max-height: min(70vh, 44rem); display: block; margin: 0 auto; border-radius: var(--radio-s); }

/* La ficha de auditoría pasa de tres celdas a cuatro con la fase B. El nombre
   `.trio` se conserva porque está en toda la hoja; lo que cambia es el reparto. */
.trio.cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .trio.cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .trio.cuatro { grid-template-columns: 1fr; } }

/* El código que se dicta en la sala: grande, en monoespaciada y espaciado, para
   poder leerlo en voz alta sin equivocarse. */
.codigo-grande {
  font-family: var(--mono); font-size: 34px; letter-spacing: .16em;
  text-align: center; margin: 14px 0; color: var(--azul);
  background: var(--activo-fondo); border-radius: var(--radio);
  padding: 16px 10px; user-select: all;
}

/* ---------------------------------------------------------------------
   Portal del auditor (fase B)

   Un explorador de ficheros: árbol a la izquierda, migas de pan y lista a la
   derecha. Con **el sistema visual de la casa**, no con el de un explorador de
   sistema operativo: los mismos tokens, la misma tabla de cabecera fija en
   versalitas y las mismas fichas. Lo que se parece a Windows o a Mac es la
   *interacción* —doble panel, migas, Backspace para subir—, no la pintura.

   Lo sirve `web/auditor.html`, que comparte esta hoja: son 50 KB que el
   navegador ya suele tener en caché y no hay motivo para duplicarla.
   --------------------------------------------------------------------- */
.portal { display: flex; min-height: 100vh; align-items: stretch; }

.arbol-portal {
  width: 288px; flex: 0 0 288px; padding: 18px 0 24px;
  background: var(--lateral-fondo); border-right: 1px solid var(--borde);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.arbol-portal .pie-portal { margin-top: auto; padding-top: 24px; }
.arbol-portal .marca { padding: 0 12px 0 16px; }
.arbol-portal .marca-sub { padding-left: 18px; }
.arbol-portal .marca + .marca-autor { margin-top: 2px; }
.arbol-cuerpo { margin-top: 18px; padding: 0 8px; }

.rama { padding-left: calc(var(--nivel, 0) * 11px); }
.nodo-arbol {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; border: 0; border-radius: var(--radio-s);
  background: none; color: var(--texto-suave); font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer; line-height: 1.35;
}
.nodo-arbol:hover { background: var(--velo-suave); color: var(--texto); }
.nodo-arbol[class*="activo"] {
  background: var(--activo-fondo); color: var(--activo-texto); font-weight: 500;
}
.nodo-arbol.raiz { font-weight: 500; margin-bottom: 4px; }
/* Una carpeta sin ficheros se dice, y no se esconde: que el auditor sepa que
   está vacía es más honesto que no enseñarla. */
.nodo-arbol.vacio .nombre { opacity: .55; }
.nodo-arbol .pico {
  width: 12px; flex: 0 0 12px; text-align: center; color: var(--texto-tenue);
  font-size: 10px;
}
.nodo-arbol .carpeta-icono { font-size: 13px; flex: 0 0 auto; display: inline-flex; }
.nodo-arbol .nombre {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nodo-arbol .cuenta {
  font-family: var(--mono); font-size: 10.5px; color: var(--texto-tenue);
  background: var(--velo-boton); border-radius: 10px; padding: 0 6px;
}

.panel-portal { flex: 1; min-width: 0; padding: 20px 26px 48px; }

.cabecera-portal {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.cabecera-portal h1 { margin: 0 0 3px; font-size: 20px; }
.chapa-portal {
  font-size: 12px; color: var(--texto-suave); background: var(--velo-boton);
  border: 1px solid var(--borde); border-radius: 20px; padding: 3px 11px;
  max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Iconos de tipo de fichero -------------------------------------------

   SVG **dentro de esta hoja**, como máscara CSS. Ni emoji —que cada sistema
   pinta a su manera, y en un Mac salen en tres dimensiones y desentonan— ni un
   juego de iconos de un CDN: este proyecto no tiene build ni dependencias
   externas, y el portal tiene que funcionar en una red que no deje salir.

   Cuatro formas y el color hace el resto, que es como se lee de verdad un
   listado a 16 px: rojo es un PDF, azul un Word, verde un Excel. Las comparten
   `app.js` y `auditor.js` emitiendo `<span class="ico ico-pdf"></span>`, así
   que **el juego de iconos está en un solo sitio**.
   --------------------------------------------------------------------- */
.ico {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.16em;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  flex: 0 0 auto;
}

.ico-carpeta { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.5%204.25A1.25%201.25%200%200%201%202.75%203h2.94c.33%200%20.64.13.88.36L7.8%204.6h5.45A1.25%201.25%200%200%201%2014.5%205.85v6.4A1.25%201.25%200%200%201%2013.25%2013.5H2.75A1.25%201.25%200%200%201%201.5%2012.25v-8Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M1.5%204.25A1.25%201.25%200%200%201%202.75%203h2.94c.33%200%20.64.13.88.36L7.8%204.6h5.45A1.25%201.25%200%200%201%2014.5%205.85v6.4A1.25%201.25%200%200%201%2013.25%2013.5H2.75A1.25%201.25%200%200%201%201.5%2012.25v-8Z%27%2F%3E%3C%2Fsvg%3E"); color: #e8bd6b; }
.ico-pdf { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); color: #ef6a63; }
.ico-word { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); color: #6f9ede; }
.ico-excel { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); color: #4fbf85; }
.ico-ppt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); color: #ef8258; }
.ico-imagen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M2%203.5A1.5%201.5%200%200%201%203.5%202h9A1.5%201.5%200%200%201%2014%203.5v9a1.5%201.5%200%200%201-1.5%201.5h-9A1.5%201.5%200%200%201%202%2012.5v-9ZM5.4%204.9a1.15%201.15%200%201%200%200%202.3%201.15%201.15%200%200%200%200-2.3ZM3.5%2012.4l3.2-3.8%202.1%202.4%201.8-2%202.4%203.4H3.5Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M2%203.5A1.5%201.5%200%200%201%203.5%202h9A1.5%201.5%200%200%201%2014%203.5v9a1.5%201.5%200%200%201-1.5%201.5h-9A1.5%201.5%200%200%201%202%2012.5v-9ZM5.4%204.9a1.15%201.15%200%201%200%200%202.3%201.15%201.15%200%200%200%200-2.3ZM3.5%2012.4l3.2-3.8%202.1%202.4%201.8-2%202.4%203.4H3.5Z%27%2F%3E%3C%2Fsvg%3E"); color: #4fc0a3; }
.ico-comprimido { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M2%203.6A1.4%201.4%200%200%201%203.4%202.2h9.2A1.4%201.4%200%200%201%2014%203.6v8.8a1.4%201.4%200%200%201-1.4%201.4H3.4A1.4%201.4%200%200%201%202%2012.4V3.6ZM7.1%204.4h1.8v1.7H7.1ZM7.1%206.8h1.8v1.7H7.1ZM7.1%209.2h1.8v2.6H7.1Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M2%203.6A1.4%201.4%200%200%201%203.4%202.2h9.2A1.4%201.4%200%200%201%2014%203.6v8.8a1.4%201.4%200%200%201-1.4%201.4H3.4A1.4%201.4%200%200%201%202%2012.4V3.6ZM7.1%204.4h1.8v1.7H7.1ZM7.1%206.8h1.8v1.7H7.1ZM7.1%209.2h1.8v2.6H7.1Z%27%2F%3E%3C%2Fsvg%3E"); color: #d8ae5c; }
.ico-texto { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2ZM4.6%208.4h6.8v1.2H4.6ZM4.6%2010.7h6.8v1.2H4.6ZM4.6%2013h4.5v1.2H4.6Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2ZM4.6%208.4h6.8v1.2H4.6ZM4.6%2010.7h6.8v1.2H4.6ZM4.6%2013h4.5v1.2H4.6Z%27%2F%3E%3C%2Fsvg%3E"); color: #a3acc0; }
.ico-generico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M3.75%201h4.85L13.5%205.9v7.85A1.25%201.25%200%200%201%2012.25%2015h-8.5A1.25%201.25%200%200%201%202.5%2013.75V2.25A1.25%201.25%200%200%201%203.75%201ZM8.6%201.2v3.45c0%20.69.56%201.25%201.25%201.25h3.45L8.6%201.2Z%27%2F%3E%3C%2Fsvg%3E"); color: #a3acc0; }


html[data-tema="claro"] .ico-carpeta { color: #d9a441; }
html[data-tema="claro"] .ico-pdf { color: #c8342f; }
html[data-tema="claro"] .ico-word { color: #2b579a; }
html[data-tema="claro"] .ico-excel { color: #1d6f43; }
html[data-tema="claro"] .ico-ppt { color: #c0451c; }
html[data-tema="claro"] .ico-imagen { color: #2f7d6a; }
html[data-tema="claro"] .ico-comprimido { color: #9a7434; }
html[data-tema="claro"] .ico-texto { color: #5a6272; }
html[data-tema="claro"] .ico-generico { color: #5a6272; }
@media (prefers-color-scheme: light) {
  html[data-tema="sistema"] .ico-carpeta { color: #d9a441; }
  html[data-tema="sistema"] .ico-pdf { color: #c8342f; }
  html[data-tema="sistema"] .ico-word { color: #2b579a; }
  html[data-tema="sistema"] .ico-excel { color: #1d6f43; }
  html[data-tema="sistema"] .ico-ppt { color: #c0451c; }
  html[data-tema="sistema"] .ico-imagen { color: #2f7d6a; }
  html[data-tema="sistema"] .ico-comprimido { color: #9a7434; }
  html[data-tema="sistema"] .ico-texto { color: #5a6272; }
  html[data-tema="sistema"] .ico-generico { color: #5a6272; }
}

/* --- Aspecto de explorador de ficheros -----------------------------------

   ⚠️ **Aquí sí se imita al explorador de Windows, y es a propósito.** Es la
   única pantalla de todo el proyecto que rompe el sistema visual de la casa:
   decisión de Carlos (2026-09-11). El motivo es que el auditor no conoce esta
   aplicación y sí conoce su explorador, así que cuanto menos tenga que aprender,
   mejor. **No copies este criterio a las pantallas internas.**

   Los tokens propios se declaran en los dos temas para que el portal siga
   respetando el claro y el oscuro. No hay ni un color a pelo fuera de aquí.
   --------------------------------------------------------------------- */
:root {
  --exp-fondo: #191919;
  --exp-cabecera: #202020;
  --exp-linea: rgba(255, 255, 255, 0.07);
  --exp-hover: rgba(255, 255, 255, 0.055);
  --exp-sel: rgba(77, 141, 255, 0.22);
  --exp-sel-borde: rgba(77, 141, 255, 0.5);
  --exp-texto: #e6e6e6;
  --exp-tenue: #9a9a9a;
  --exp-cabecera-texto: #b5b5b5;
  --exp-barra: #232323;
  --exp-campo: #2b2b2b;
}
html[data-tema="claro"] {
  --exp-fondo: #ffffff;
  --exp-cabecera: #fafafa;
  --exp-linea: #e9e9e9;
  --exp-hover: #f2f7fd;
  --exp-sel: #cfe8fc;
  --exp-sel-borde: #9ecff2;
  --exp-texto: #1a1a1a;
  --exp-tenue: #6b6b6b;
  --exp-cabecera-texto: #5b5b5b;
  --exp-barra: #f7f7f7;
  --exp-campo: #ffffff;
}
@media (prefers-color-scheme: light) {
  html[data-tema="sistema"] {
    --exp-fondo: #ffffff;
    --exp-cabecera: #fafafa;
    --exp-linea: #e9e9e9;
    --exp-hover: #f2f7fd;
    --exp-sel: #cfe8fc;
    --exp-sel-borde: #9ecff2;
    --exp-texto: #1a1a1a;
    --exp-tenue: #6b6b6b;
    --exp-cabecera-texto: #5b5b5b;
    --exp-barra: #f7f7f7;
    --exp-campo: #ffffff;
  }
}

/* La barra de herramientas: atrás, adelante, arriba, direcciones, buscador. */
.barra-explorador {
  display: flex; gap: 6px; align-items: center; margin-bottom: 10px;
  flex-wrap: wrap;
}
.navegar { display: flex; gap: 1px; }
.boton-icono {
  width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid transparent;
  background: none; color: var(--exp-tenue);
  border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1;
}
.boton-icono:hover:not(:disabled) { background: var(--exp-hover); color: var(--exp-texto); }
.boton-icono:disabled { opacity: .3; cursor: default; }
.boton-icono[aria-current="true"] {
  background: var(--exp-sel); border-color: var(--exp-sel-borde); color: var(--exp-texto);
}

/* La barra de direcciones. Cada tramo es pulsable, como la de Windows. */
.barra-direcciones {
  flex: 1 1 20rem; min-width: 0; display: flex; align-items: center; gap: 1px;
  overflow-x: auto; white-space: nowrap;
  height: 28px; padding: 0 8px;
  background: var(--exp-campo); border: 1px solid var(--exp-linea);
  border-radius: 4px;
}
.barra-direcciones button {
  border: 0; background: none; padding: 2px 5px; border-radius: 3px;
  color: var(--exp-texto); font: inherit; font-size: 12px; cursor: pointer;
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-direcciones button:hover { background: var(--exp-hover); }
.barra-direcciones button.actual { font-weight: 600; }
.barra-direcciones .chevron { color: var(--exp-tenue); font-size: 10px; padding: 0 1px; }
.barra-direcciones .icono-ruta { font-size: 13px; margin-right: 4px; display: inline-flex; }
.buscar-explorador {
  flex: 0 1 14rem; height: 28px; font-size: 12px; padding: 0 8px;
  background: var(--exp-campo); border: 1px solid var(--exp-linea); border-radius: 4px;
  color: var(--exp-texto);
}

/* --- La lista -------------------------------------------------------------
   Filas de una línea y bien juntas: un explorador enseña treinta ficheros de un
   vistazo, no seis. Y las columnas van **pegadas a la izquierda** con el hueco
   sobrante a la derecha, como allí; estiradas a todo el ancho quedaban perdidas
   en medio de la pantalla. */
.explorador {
  outline: none; border: 1px solid var(--exp-linea); border-radius: 5px;
  background: var(--exp-fondo); overflow: hidden;
}
.explorador:focus-visible { border-color: var(--exp-sel-borde); }

table.tabla-explorador {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 12.5px; color: var(--exp-texto);
}
table.tabla-explorador thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--exp-cabecera); color: var(--exp-cabecera-texto);
  font-weight: 500; font-size: 11.5px; text-align: left;
  padding: 5px 8px; border-bottom: 1px solid var(--exp-linea);
  white-space: nowrap; user-select: none;
}
/* Separadores verticales entre cabeceras, como las de Windows. */
table.tabla-explorador thead th + th { border-left: 1px solid var(--exp-linea); }
table.tabla-explorador th.ordenable { cursor: pointer; }
table.tabla-explorador th.ordenable:hover { background: var(--exp-hover); }
.orden-flecha { font-size: 8px; margin-left: 4px; }

table.tabla-explorador td {
  padding: 3px 8px; border: 0; line-height: 1.55;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
table.tabla-explorador td.numero { text-align: right; font-family: var(--mono); font-size: 11px; }
table.tabla-explorador td.icono { text-align: center; padding: 3px 0; font-size: 16px; }
table.tabla-explorador td.pista { color: var(--exp-tenue); font-size: 11.5px; }

tr.fila-explorador { cursor: pointer; }
tr.fila-explorador:hover > td { background: var(--exp-hover); }
tr.fila-explorador.elegida > td {
  background: var(--exp-sel);
  border-top: 1px solid var(--exp-sel-borde);
  border-bottom: 1px solid var(--exp-sel-borde);
  padding-top: 2px; padding-bottom: 2px;
}
tr.fila-explorador.elegida > td:first-child { border-left: 1px solid var(--exp-sel-borde); }
tr.fila-explorador.elegida > td:last-child { border-right: 1px solid var(--exp-sel-borde); }
.nombre-elemento { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Descripción y Observaciones (2026-09-24): una línea, y el texto entero en el
   globo al pasar el ratón. Como en un explorador, la fila no crece. */
.texto-explorador { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Que no se confunda con entrar como el auditor: es alguien de dentro mirando. */
.chapa-portal.vista-previa { border-color: var(--ambar); color: var(--ambar); }
.acciones-fila { text-align: center; }
.acciones-fila .boton {
  padding: 0 4px; font-size: 11px; border: 0; background: none; color: var(--exp-tenue);
}
.acciones-fila .boton:hover { color: var(--exp-texto); background: var(--exp-hover); }

/* --- Vista de iconos ----------------------------------------------------- */
.rejilla-iconos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 2px; padding: 8px;
}
.baldosa {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1px solid transparent; border-radius: 4px;
  background: none; font: inherit; font-size: 12px; cursor: pointer;
  text-align: center; color: var(--exp-texto);
}
.baldosa:hover { background: var(--exp-hover); }
.baldosa.elegida { background: var(--exp-sel); border-color: var(--exp-sel-borde); }
.baldosa-icono { font-size: 28px; line-height: 1.1; }
.baldosa-nombre {
  line-height: 1.3; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.baldosa .pista { color: var(--exp-tenue); font-size: 11px; }

/* --- La barra de estado --------------------------------------------------
   Cuántos elementos hay, y qué pesa lo seleccionado. Es la línea que uno mira
   sin darse cuenta, y su ausencia se nota. */
.barra-estado {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 5px 9px;
  background: var(--exp-barra); border: 1px solid var(--exp-linea); border-radius: 4px;
  font-size: 11.5px; color: var(--exp-tenue);
}
.barra-estado .elegido-info { color: var(--exp-texto); }
.barra-estado .pista { font-family: var(--mono); font-size: 10.5px; color: var(--exp-tenue); }

/* La capa de «no hay vista previa»: se dice y se ofrece la descarga, en lugar
   de bajar el fichero al disco de alguien sin que lo haya pedido. */
.sin-vista { text-align: center; padding: 22px 10px 6px; }
.sin-vista-icono { font-size: 44px; line-height: 1; display: block; margin: 0 auto 14px; }
.sin-vista p { margin: 0 0 6px; }

.externas-portal { margin-top: 16px; }

/* Una carpeta con observaciones (2026-10-15): el explorador en 2/3 y la card
   en el tercio de la derecha. Sin observaciones no hay rejilla y el explorador
   ocupa el ancho entero, como siempre. Con los tokens del explorador, para que
   respete los dos temas. */
.carpeta-portal.con-nota {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px; align-items: stretch;        /* la card, tan alta como el explorador */
}
.card-observaciones {
  padding: 14px 16px;
  background: var(--exp-fondo); color: var(--exp-texto);
  border: 1px solid var(--exp-linea); border-top: 3px solid var(--exp-sel-borde);
  border-radius: 5px; font-size: 13.5px; line-height: 1.55;
}
.card-observaciones h3 {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--exp-cabecera-texto);
}
.card-observaciones p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-observaciones p.pista {
  margin-top: 12px; font-size: 11.5px; color: var(--exp-tenue); white-space: normal;
}
.card-observaciones p.sin-observaciones { margin-top: 0; font-size: 13px; }
.pedido-portal { margin: 0 0 8px; font-size: 12.5px; color: var(--exp-tenue); }
@media (max-width: 1000px) {
  .carpeta-portal.con-nota { grid-template-columns: 1fr; }
  .card-observaciones { order: -1; }
}

/* La pantalla de entrada: centrada, sin lateral y sin nada más. */
.acceso h1 { margin: 0 0 4px; font-size: 20px; }
.acceso-error {
  color: var(--rojo); background: var(--rojo-fondo); border-radius: var(--radio-s);
  padding: 8px 11px; font-size: 13px; margin: 0;
}
.acceso-pie { font-size: 12px; color: var(--texto-tenue); margin: 4px 0 0; }
.acceso input[name="codigo"] {
  font-family: var(--mono); font-size: 20px; letter-spacing: .12em;
  text-align: center; text-transform: uppercase;
}

@media (max-width: 860px) {
  .portal { display: block; }
  .arbol-portal { width: auto; height: auto; position: static; border-right: 0;
                  border-bottom: 1px solid var(--borde); }
}

/* --- El portal en el móvil (2026-10-15) -----------------------------------
   El auditor lo abre desde el teléfono. Tres cambios, y en escritorio ninguno:
   el árbol se esconde tras «Carpetas» (encima se comía la pantalla), la tabla
   del explorador pasa a una lista de tarjetas (sus columnas fijas suman unos
   81rem) y la barra de herramientas queda en dos líneas. */
.solo-movil { display: none; }
@media (max-width: 760px) {
  .solo-movil { display: inline-flex; }
  .solo-escritorio { display: none; }

  .arbol-portal { display: none; }
  .portal.arbol-abierto .arbol-portal {
    display: block; position: fixed; inset: 0; z-index: 50;
    width: auto; height: 100vh; overflow-y: auto; border: 0;
    padding-top: 14px;
    background: var(--exp-fondo);   /* opaco: el del lateral es translúcido */
  }
  .cerrar-arbol { position: absolute; top: 12px; right: 12px; }
  .arbol-portal .nodo-arbol { padding: 8px; font-size: 14px; }

  .panel-portal { padding: 12px 12px 32px; }
  .cabecera-portal { gap: 10px; margin-bottom: 12px; align-items: center; }
  .cabecera-portal .titulo-portal { flex: 1 1 0; min-width: 0; }
  .cabecera-portal h1 { font-size: 17px; }
  .cabecera-portal .acciones { width: 100%; justify-content: space-between; }
  .chapa-portal { max-width: 62vw; }

  /* Arriba flechas y ruta; abajo buscador, vista y .zip. */
  .barra-explorador { gap: 6px; }
  .barra-direcciones { flex: 1 1 calc(100% - 100px); }
  .barra-direcciones button { max-width: 11rem; }
  .buscar-explorador { flex: 1 1 0; min-width: 0; height: 34px; font-size: 14px; }

  /* La tabla, en tarjetas: icono, nombre entero, lo que es, las
     observaciones y, al pie, fecha y tamaño; la descarga a la derecha. */
  .tabla-explorador colgroup, .tabla-explorador thead { display: none; }
  table.tabla-explorador, table.tabla-explorador tbody { display: block; width: 100%; }
  tr.fila-explorador {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
    grid-template-areas: "ico nom nom acc" "ico desc desc acc"
                         "ico obs obs acc" "ico fecha tam acc";
    column-gap: 8px; row-gap: 2px; padding: 9px 10px;
    border-bottom: 1px solid var(--exp-linea);
  }
  table.tabla-explorador tr.fila-explorador > td {
    display: block; padding: 0; white-space: normal; overflow: visible;
    background: none; border: 0;
  }
  table.tabla-explorador td.icono { grid-area: ico; padding-top: 1px; }
  table.tabla-explorador td.nombre-elemento {
    grid-area: nom; font-size: 14px; font-weight: 500; overflow-wrap: anywhere;
  }
  table.tabla-explorador tr.fila-explorador > td.c-desc,
  table.tabla-explorador tr.fila-explorador > td.c-obs {
    font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  table.tabla-explorador td.c-desc { grid-area: desc; color: var(--exp-texto); }
  table.tabla-explorador td.c-obs { grid-area: obs; }
  table.tabla-explorador td.c-fecha { grid-area: fecha; font-size: 11.5px; }
  table.tabla-explorador td.c-tam { grid-area: tam; text-align: left; font-size: 11px; }
  table.tabla-explorador td.acciones-fila { grid-area: acc; align-self: center; }
  table.tabla-explorador td.acciones-fila .boton { font-size: 16px; padding: 6px 8px; }
  /* Con la misma especificidad que la regla que las muestra, o pierden. */
  table.tabla-explorador tr.fila-explorador > td.c-tipo,
  table.tabla-explorador tr.fila-explorador > td:empty { display: none; }
  tr.fila-explorador.elegida { background: var(--exp-sel); }
  tr.fila-explorador:hover { background: var(--exp-hover); }

  .barra-estado .pista { display: none; }
}

@media print {
  .lateral, .filtros, .navegacion, .acciones, .boton, .capa,
  .cola-pendiente, .aviso-flotante, .barrido-cabecera { display: none !important; }
  .arbol-portal, .barra-explorador, .acciones-fila { display: none !important; }
  .portal { display: block; }
  /* Impreso, un adjunto es su nombre: los botones de ver y descargar no
     significan nada en papel, pero el nombre del fichero sí. */
  .zona-soltar, .zona-soltar.suelta { border: 0; box-shadow: none; background: none; }
  .barra-subida, .cuenta-ficheros { display: none !important; }
  /* La ficha impresa es lo que se entrega: sin lo preparado y no incluido, y
     sin el conmutador, que en papel no significa nada. */
  /* La medida impresa desde el barrido es lo que se entrega: sin apuntes ni
     hallazgos, que son internos, y con el veredicto solo si hay uno puesto. */
  .barrido-lado, .veredicto:not([aria-current="true"]), .veredictos .pista,
  select.mini, .aviso-copia, .glpi-copia { display: none !important; }
  .barrido-cuerpo { display: block !important; }
  tr.preparada, .con-entrega.preparada, .linea-ev.preparada, .entrega,
  .boton.mini, select.mini { display: none !important; }
  .nuevas-ev { border: 0; padding: 0; }
  .enlace-fichero {
    display: inline !important; border: 0; padding: 0; color: #000;
    background: none; font-size: 11px;
  }
  .enlace-fichero.bajar, .asomo { display: none !important; }
  .titulo-evidencia { border: 0; padding: 0; }
  body { background: #fff; color: #000; background-image: none; }
  .app { display: block; }
  .principal { padding: 0; }
  .chapa { border: 1px solid #000; }   /* el color no basta impreso (12.1) */
  /* El plan de acción se edita con select e input; impreso tienen que leerse
     como texto, no como controles de formulario vacíos de contexto. */
  select, input[type="date"], input[type="text"] {
    border: none; background: transparent; padding: 0;
    color: #000; -webkit-appearance: none; appearance: none;
  }
  /* Un campo vacío tiene que salir vacío. El texto de ayuda y el «dd/mm/aaaa»
     del selector de fecha, impresos, se leen como si fueran el contenido — y
     esto es un documento que se entrega. */
  /* Con la misma especificidad que la regla de arriba (`input::placeholder`),
     o esta perdería la cascada y el texto de ayuda seguiría imprimiéndose. */
  input::placeholder, textarea::placeholder { color: transparent; }
  input[type="date"][value=""] { color: transparent; }
  ::-webkit-calendar-picker-indicator { display: none; }
  select { -moz-appearance: none; text-indent: 0; }
  .contador {
    border: 1px solid #999; background: #fff; color: #000;
    display: inline-flex; break-inside: avoid;
  }
  .contador.alerta { border-color: #000; border-width: 2px; }
  .contador.alerta b, .contador[aria-current="true"] b { color: #000; }
  .contador:disabled { opacity: 1; }
  table.simple tr { break-inside: avoid; }
  /* Un informe de 73 medidas se imprime: que no parta una medida por la mitad
     y que cada marco empiece en su página. */
  .informe-medida, .cifra, .informe-cabecera { break-inside: avoid; }
  .informe section.bloque { break-inside: auto; }
  .informe section.bloque + section.bloque { break-before: page; }
  .informe-cabecera { border-bottom-color: #000; }
  .cifras, .cifra { background: #fff; border-color: #999; }
  .informe-lista .sin-cubrir { color: #000; font-weight: 600; }
  .pie-impreso {
    display: block; font-size: 10px; color: #444; margin: 0 0 14px;
    padding-bottom: 6px; border-bottom: 1px solid #999;
  }
  .ficha, .grupo, .panel, .barrido-principal, .card-barrido {
    border-color: #999; box-shadow: none; background: #fff; backdrop-filter: none;
  }
  .barrido { position: static; }
  .barrido-cuerpo { display: block; overflow: visible; padding: 0; }
}

/* En pantallas estrechas la línea de una evidencia sí se parte: mejor dos
   alturas que una línea que se sale por la derecha. */
@media (max-width: 900px) { .linea-ev-cab { flex-wrap: wrap; } }