/* Portal de gobernanza de datos personales.

   Sin frameworks y sin paso de compilacion: el sitio pesa unos pocos kilobytes. Tampoco hay
   fuentes externas, porque la CSP es default-src 'self' y traerlas de un CDN implicaria
   abrirla.

   Dos temas, elegidos por el sistema operativo. Los contrastes de texto cumplen AA (4.5:1)
   en ambos, verificados sobre la superficie donde cada color se usa de verdad, no sobre
   blanco puro.

   Ninguna regla depende de atributos style en el markup: la CSP no permite estilos en linea.
   Lo unico que se asigna desde JS es el ancho de las barras, via CSSOM, que si esta
   permitido. */

/* ==================================================================== tokens */
:root {
  color-scheme: light;

  /* Espaciado en una escala de 4px, para que el ritmo vertical sea consistente. */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* Esquinas redondeadas, en la linea de la marca Xinerlink (botones en pildora). */
  --radio-sm: 10px;
  --radio: 16px;
  --radio-lg: 22px;
  --radio-full: 999px;

  --ancho-lateral: 15.5rem;
  --ancho-maximo: 1600px;

  --transicion: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------- tema claro */
:root {
  /* Blanco y verde Xinerlink, tomados del logo: verde azulado #009894 y lima #a2c230.
     Ninguno alcanza 4.5:1 como texto sobre blanco (3.6 y 2.0), asi que quedan para
     decoracion (franja, fondos suaves, acentos) y el acento de texto y botones es el mismo
     verde azulado, mas profundo: #00756f (5.6:1). */
  --fondo: #f4f8f3;
  --fondo-alt: #eaf2e8;
  --superficie: #ffffff;
  --superficie-alta: #f9fcf8;
  --superficie-hover: #f0f6ee;

  --borde: #d6e3d3;
  --borde-suave: #e6efe3;
  --borde-fuerte: #b9cdb4;

  --texto: #18241e;
  --texto-suave: #4d5d54;
  --texto-debil: #5f6f66;

  --acento: #00756f;
  --acento-hover: #005e59;
  --acento-suave: #e0f3f1;
  --acento-borde: #a8dcd7;

  --lima: #a2c230;
  --lima-suave: #f1f7dc;

  --ok: #2f6b1f;
  --ok-suave: #e8f4e1;
  --ok-borde: #c2dfb0;
  --error: #97121f;
  --error-suave: #fdeaec;
  --error-borde: #f2c0c6;
  --aviso: #85480a;
  --aviso-suave: #fdf3e3;
  --aviso-borde: #eedab0;
  --info-suave: #e6f2f0;
  --info-borde: #bedcd6;
  --info-texto: #1f4f49;

  --restringido: #8a1220;
  --confidencial: #85480a;
  --interno: #1c3faa;
  --publico: #0a5c40;

  /* Sombras amplias y suaves, con un tinte verde: separan los bloques sin marcar bordes. */
  --sombra-1: 0 1px 2px rgba(31, 58, 45, .04), 0 2px 8px rgba(31, 58, 45, .06);
  --sombra-2: 0 2px 6px rgba(31, 58, 45, .05), 0 12px 28px rgba(31, 58, 45, .10);
  --sombra-3: 0 16px 44px rgba(31, 58, 45, .20);

  /* Franja de marca de la cabecera y del logotipo. */
  --marca-a: #a2c230;
  --marca-b: #009894;

  /* Lo que cambia entre temas fuera de la paleta: el texto sobre el acento y sobre las
     etiquetas de color (claro sobre oscuro y al reves) y el fondo del logo. */
  --texto-sobre-acento: #ffffff;
  --texto-badge: #ffffff;
  --logo-fondo: transparent;
  --logo-relleno-acceso: 0;
}

/* ------------------------------------------------------------ tema oscuro */
/* El tema lo decide js/tema-inicial.js antes de pintar la pagina: la eleccion guardada
   de la persona o, si no eligio, la del sistema operativo. Asi la paleta oscura vive en
   un solo lugar y el boton de la cabecera puede forzar cualquiera de las dos. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0e1512;
  --fondo-alt: #121b17;
  --superficie: #16201c;
  --superficie-alta: #1b2722;
  --superficie-hover: #213029;

  --borde: #2b3b34;
  --borde-suave: #22302a;
  --borde-fuerte: #3c5047;

  --texto: #e7f0eb;
  --texto-suave: #a5b7ad;
  --texto-debil: #85988d;

  --acento: #5ccfc5;
  --acento-hover: #82ddd5;
  --acento-suave: #10302c;
  --acento-borde: #24564f;

  --lima: #b5d24f;
  --lima-suave: #1f2b12;

  --ok: #5fd0a4;
  --ok-suave: #10261f;
  --ok-borde: #1f4838;
  --error: #ff9098;
  --error-suave: #2a1418;
  --error-borde: #56222a;
  --aviso: #f0b866;
  --aviso-suave: #271b0d;
  --aviso-borde: #4d3718;
  --info-suave: #13261f;
  --info-borde: #26463c;
  --info-texto: #b6ddd3;

  /* En oscuro los badges llevan texto oscuro sobre color claro: al reves que en claro,
     porque un rojo oscuro sobre fondo oscuro no alcanza el contraste. */
  --restringido: #ff9098;
  --confidencial: #f0b866;
  --interno: #93b4ff;
  --publico: #5fd0a4;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
  --sombra-3: 0 16px 44px rgba(0, 0, 0, .6);

  --marca-a: #b5d24f;
  --marca-b: #2bb3ac;

  --texto-sobre-acento: #10131f;
  --texto-badge: #0f1319;
  --logo-fondo: #ffffff;
  --logo-relleno-acceso: 8px 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* El atributo hidden tiene que ganarle a cualquier display de una clase. Sin esto, un
   elemento con display:flex o grid y hidden se seguia viendo: le paso a la fila «es otro
   tipo de dato» de Por confirmar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.011em; }

a { color: var(--acento); text-underline-offset: 2px; }
a:hover { color: var(--acento-hover); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--superficie); color: var(--texto);
  padding: var(--e3) var(--e4); border-radius: 0 0 var(--radio) 0;
  box-shadow: var(--sombra-2);
}
.skip-link:focus { left: 0; }

/* ================================================================= cabecera */
.app-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e3) var(--e5);
  background: var(--superficie); color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
/* Hilo de color que separa la cabecera del contenido sin agregar un bloque mas. */
.app-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--marca-a), var(--marca-b));
  opacity: .9;
}

.brand { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.brand h1 {
  margin: 0; font-size: 1rem; font-weight: 650; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* El bloque del titulo puede achicarse: si no, con el logo al lado el titulo pasaba por
   debajo del usuario en pantallas medianas. */
.brand > div { min-width: 0; }
.app-header .header-actions { flex: 0 0 auto; }
.brand-sub {
  margin: 0; font-size: .76rem; color: var(--texto-suave);
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
}
/* Logo de Xinerlink. Su fondo es transparente y la bajada «UN BUEN TRABAJO» es gris: en
   modo oscuro va sobre una pildora blanca para que se lea igual que en el sitio. */
.brand-logo {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 4px 10px; margin-left: -10px; border-radius: var(--radio-full);
}
.brand-logo img { display: block; height: 32px; width: auto; }
.brand-logo:focus-visible { outline-offset: 0; }
.brand-separador { width: 1px; height: 28px; background: var(--borde); flex: 0 0 auto; }
.brand-logo, .login-logo { background: var(--logo-fondo); }
:root[data-tema="oscuro"] .brand-logo { margin-left: 0; }

.header-actions { display: flex; align-items: center; gap: var(--e2); }

/* Boton de tema: redondo, con el icono del tema al que lleva. */
.btn.btn-tema { width: 2.3rem; height: 2.3rem; padding: 0; flex: 0 0 auto; }
/* flex: 0 0 auto: sin esto el icono se encogia a 3 px dentro del boton. */
.btn.btn-tema svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-tema .icono-sol { display: none; }
:root[data-tema="oscuro"] .btn-tema .icono-luna { display: none; }
:root[data-tema="oscuro"] .btn-tema .icono-sol { display: block; }
/* El cambio de tema se acompana de una transicion breve de colores de fondo y texto. */
body, .app-header, .app-nav, .panel, .card { transition: background-color 200ms ease, color 200ms ease; }
.user-chip {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: .8rem; color: var(--texto-suave);
  background: var(--fondo-alt); border: 1px solid var(--borde-suave);
  padding: var(--e1) var(--e3); border-radius: var(--radio-full);
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Etiqueta del ambiente: en produccion tiene que saltar a la vista. */
.chip-ambiente {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px var(--e2); border-radius: var(--radio-full);
  background: var(--acento-suave); color: var(--acento); border: 1px solid var(--acento-borde);
}
.chip-ambiente[data-ambiente="prod"] {
  background: var(--error-suave); color: var(--error); border-color: var(--error-borde);
}

/* ============================================================= layout general */
.app-shell {
  display: grid;
  grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  align-items: start;
}
.app-col { min-width: 0; }

/* El contenido usa todo el ancho disponible hasta un maximo y queda centrado en su
   columna. Antes tenia un limite de 1420px pegado a la izquierda: en una pantalla de
   1920px dejaba una franja vacia a la derecha. */
main {
  padding: var(--e5) var(--e5) var(--e7);
  max-width: var(--ancho-maximo);
  margin-inline: auto;
}

.app-footer {
  padding: var(--e4) var(--e5) var(--e6);
  color: var(--texto-debil); font-size: .78rem;
  border-top: 1px solid var(--borde-suave);
}
.app-footer p { max-width: calc(var(--ancho-maximo) - 2 * var(--e5)); margin-inline: auto; }

/* ================================================================ navegacion */
.app-nav {
  position: sticky; top: 3.6rem;
  height: calc(100vh - 3.6rem);
  overflow-y: auto;
  padding: var(--e4) var(--e3) var(--e6);
  background: var(--superficie);
  border-right: 1px solid var(--borde-suave);
}
.app-nav ul { list-style: none; margin: 0; padding: 0; }

.nav-grupo { margin-bottom: var(--e4); }
.nav-grupo-titulo {
  display: flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e3) var(--e2);
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-debil);
}
.app-nav a {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3); margin-bottom: 2px;
  border-radius: var(--radio-full);
  text-decoration: none; color: var(--texto-suave);
  font-size: .89rem; font-weight: 550;
  transition: background var(--transicion), color var(--transicion);
}
.app-nav a:hover { background: var(--superficie-hover); color: var(--texto); }
.app-nav a[aria-current="page"] {
  background: var(--acento-suave); color: var(--acento); font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--acento-borde);
}
.app-nav a[aria-current="page"] .nav-icono { color: var(--acento); }

.nav-icono {
  width: 17px; height: 17px; flex: 0 0 auto; color: var(--texto-debil);
  transition: color var(--transicion);
}
.app-nav a:hover .nav-icono { color: var(--texto-suave); }

/* Contador de pendientes junto al enlace. */
.nav-cuenta {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  background: var(--aviso-suave); color: var(--aviso);
  border: 1px solid var(--aviso-borde);
  padding: 0 var(--e2); border-radius: var(--radio-full);
  font-variant-numeric: tabular-nums;
}

.nav-pie {
  margin-top: var(--e5); padding: var(--e3);
  border-top: 1px solid var(--borde-suave);
  font-size: .74rem; color: var(--texto-debil);
}

/* Boton de menu: solo aparece cuando la barra lateral se vuelve cajon. */
.sidebar-toggle { display: none; }
.sidebar-overlay { display: none; }

/* ==================================================================== avisos */
/* Pila de avisos arriba a la derecha, bajo la cabecera. No tapan el contenido mientras no
   haya ninguno: el contenedor vacio no ocupa espacio ni captura clics. */
.avisos {
  position: fixed; z-index: 80; top: 4.6rem; right: var(--e4);
  width: min(26rem, calc(100vw - 2rem));
  display: grid; gap: var(--e2);
  pointer-events: none;
}
.aviso {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: start;
  padding: var(--e3) var(--e3) var(--e3) var(--e4);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde-suave); border-radius: var(--radio);
  box-shadow: var(--sombra-3);
  animation: aviso-entra 180ms ease-out;
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-6px); } }
.aviso-icono {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radio-full);
  background: var(--info-suave); color: var(--info-texto);
}
.aviso-icono svg { width: 1.05rem; height: 1.05rem; }
.aviso[data-tipo="ok"] .aviso-icono { background: var(--ok-suave); color: var(--ok); }
.aviso[data-tipo="aviso"] .aviso-icono { background: var(--aviso-suave); color: var(--aviso); }
.aviso[data-tipo="error"] { border-color: var(--error-borde); }
.aviso[data-tipo="error"] .aviso-icono { background: var(--error-suave); color: var(--error); }
.aviso-cuerpo { display: grid; gap: var(--e1); font-size: .87rem; }
.aviso-titulo { font-size: .92rem; }
.aviso-cuerpo p, .aviso-cuerpo ul { margin: 0; color: var(--texto-suave); }
.aviso-cuerpo ul { padding-left: 1.1rem; }
.aviso-cuerpo .acciones-fila { margin-top: var(--e1); }
.aviso-cerrar {
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
  width: 1.8rem; height: 1.8rem; border-radius: var(--radio-full);
  border: 0; background: transparent; color: var(--texto-debil);
}
.aviso-cerrar:hover { background: var(--superficie-hover); color: var(--texto); }

/* Detalle tecnico plegado: para soporte, sin ensuciar el mensaje. */
.aviso-detalle summary { cursor: pointer; font-size: .78rem; color: var(--texto-debil); }
.aviso-detalle code {
  display: block; margin-top: var(--e1); padding: var(--e2);
  font-size: .74rem; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--fondo-alt); border-radius: var(--radio-sm); color: var(--texto-suave);
}

/* Pantalla de error cuando una vista no carga. */
.error-vista {
  display: grid; justify-items: center; gap: var(--e3); text-align: center;
  max-width: 34rem; margin: var(--e6) auto; padding: var(--e6) var(--e5);
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-1);
}
.error-vista > svg {
  width: 3rem; height: 3rem; padding: .7rem; border-radius: var(--radio-full);
  background: var(--error-suave); color: var(--error); box-sizing: content-box;
}
.error-vista h2 { margin: 0; font-size: 1.2rem; }
.error-vista p, .error-vista ul { margin: 0; color: var(--texto-suave); max-width: 30rem; }
.error-vista ul { text-align: left; }
.error-vista .acciones-fila { justify-content: center; }
.error-vista .aviso-detalle { justify-self: stretch; text-align: left; }

/* Cajas de error con titulo y explicacion (formularios). */
.caja-explicada { display: grid; gap: var(--e1); }
.caja-explicada p, .caja-explicada ul { margin: 0; }
.caja-explicada ul { padding-left: 1.1rem; }

/* ===================================================================== acceso */
/* Pantalla aparte: ocupa toda la ventana, sin cabecera ni menu. El fondo lleva un degradado
   suave con los dos verdes del logo. */
.pantalla-acceso {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e4); padding: var(--e6) var(--e4);
  background:
    radial-gradient(60rem 30rem at 0% 0%, color-mix(in srgb, var(--marca-a) 16%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at 100% 100%, color-mix(in srgb, var(--marca-b) 16%, transparent), transparent 70%),
    var(--fondo);
}
.acceso-barra { position: fixed; top: var(--e3); right: var(--e3); }
.acceso-tarjeta {
  width: 100%; max-width: 27rem;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg); padding: var(--e6);
  box-shadow: var(--sombra-2);
}
.acceso-tarjeta h2 { margin: 0 0 var(--e2); font-size: 1.3rem; }
.acceso-tarjeta h2:focus { outline: none; }
.login-logo { display: block; margin: 0 auto var(--e2); height: 52px; width: auto; }
.login-logo { padding: var(--logo-relleno-acceso); border-radius: var(--radio-full); box-sizing: content-box; }
.acceso-marca {
  margin: 0 0 var(--e5); text-align: center;
  font-size: .82rem; font-weight: 650; letter-spacing: .02em; color: var(--texto-suave);
}
.acceso-ambiente { display: table; margin: calc(-1 * var(--e4)) auto var(--e4); }
.acceso-texto { margin: 0 0 var(--e4); color: var(--texto-suave); font-size: .9rem; }
.acceso-form { display: grid; gap: var(--e4); }
.acceso-form .campo input { min-height: 2.75rem; font-size: .95rem; }
.campo-clave { position: relative; display: flex; }
.campo-clave input { flex: 1 1 auto; min-width: 0; padding-right: 5.6rem; }
.btn-ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 0; padding: var(--e1) var(--e3); font-size: .78rem;
}
.input-codigo { font-size: 1.35rem !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.btn-ancho { width: 100%; min-height: 2.75rem; font-size: .95rem; }
.btn-enlace {
  background: none; border: 0; padding: var(--e1) 0; font: inherit; font-size: .85rem;
  color: var(--acento); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.btn-enlace:hover { color: var(--acento-hover); }
.acceso-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e5); margin-top: var(--e4); }
.acceso-info {
  display: grid; gap: var(--e1); margin-bottom: var(--e4);
  padding: var(--e3) var(--e4); border-radius: var(--radio);
  background: var(--info-suave); border: 1px solid var(--info-borde); color: var(--info-texto);
}
.acceso-info p { margin: 0; }
.acceso-legal { margin: 0; max-width: 27rem; text-align: center; font-size: .78rem; color: var(--texto-debil); }

.reglas-clave {
  list-style: none; margin: calc(-1 * var(--e2)) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2px var(--e3);
  font-size: .8rem; color: var(--texto-debil);
}
.reglas-clave li { display: flex; align-items: center; gap: var(--e2); }
.reglas-clave li::before {
  content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; border-radius: 50%;
  border: 1.5px solid var(--borde-fuerte);
}
.reglas-clave li[data-cumple="si"] { color: var(--ok); }
.reglas-clave li[data-cumple="si"]::before { background: var(--ok); border-color: var(--ok); }

.pasos-mfa { margin: 0 0 var(--e3); padding-left: 1.2rem; font-size: .88rem; display: grid; gap: var(--e1); }
.qr-zona { display: flex; justify-content: center; margin: 0 0 var(--e3); }
/* El QR siempre es negro sobre blanco, tambien en tema oscuro: asi lo leen las camaras. */
.qr-mfa {
  width: 11.5rem; height: auto; image-rendering: pixelated;
  border-radius: var(--radio-sm); border: 1px solid var(--borde); background: #ffffff;
}
.clave-escrita { margin: 0 0 var(--e3); font-size: .85rem; }
.clave-escrita summary { cursor: pointer; color: var(--acento); }
.clave-escrita p { margin: var(--e2) 0; color: var(--texto-suave); }
.clave-mfa-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.clave-mfa {
  font-size: .9rem; letter-spacing: .06em; word-break: break-all; user-select: all;
  padding: var(--e2) var(--e3); border-radius: var(--radio-sm); background: var(--fondo-alt);
}

.login-error {
  display: grid; gap: var(--e1); text-align: left;
  padding: var(--e3) var(--e4); border-radius: var(--radio);
  background: var(--error-suave); border: 1px solid var(--error-borde); color: var(--texto);
}
.login-error strong { color: var(--error); }
.login-error p { margin: 0; max-width: none; }
#login-error { margin-bottom: var(--e4); }

@media (max-width: 480px) {
  .pantalla-acceso { justify-content: flex-start; padding-top: var(--e7); }
  .acceso-tarjeta { padding: var(--e5) var(--e4); }
}

/* =================================================================== botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font: inherit; font-size: .87rem; font-weight: 600;
  padding: var(--e2) var(--e4); border-radius: var(--radio-full); cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  transition: background var(--transicion), border-color var(--transicion),
              transform var(--transicion);
}
.btn:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--acento); border-color: transparent;
  /* En oscuro el acento es claro: el token pasa el texto a oscuro. */
  color: var(--texto-sobre-acento); box-shadow: 0 4px 12px rgba(0, 117, 111, .25);
}
.btn-primary:hover { background: var(--acento-hover); border-color: transparent; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--texto-suave); }
.btn-ghost:hover { background: var(--superficie-hover); color: var(--texto); border-color: transparent; }

.btn-danger { background: var(--error-suave); color: var(--error); border-color: var(--error-borde); }
.btn-danger:hover { background: var(--error-suave); border-color: var(--error); }

.btn-sm { padding: var(--e1) var(--e2); font-size: .79rem; }
/* Los enlaces con apariencia de boton navegan sin JS; solo hay que quitarles el subrayado. */
a.btn { text-decoration: none; color: var(--texto); }
a.btn:hover { color: var(--texto); }
a.btn-primary, a.btn-primary:hover { color: var(--texto-sobre-acento); }
.acciones-fila { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* ============================================== encabezado de seccion / vista */
.seccion-intro { margin: 0 0 var(--e5); }
.seccion-intro h2 {
  margin: 0 0 var(--e1); font-size: 1.35rem; font-weight: 700;
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}
.seccion-intro p {
  margin: 0; color: var(--texto-suave); font-size: .92rem; max-width: 62ch;
}
.seccion-intro .acciones-fila { margin-top: var(--e3); }

/* ============================================================== metricas KPI */
.cards {
  display: grid; gap: var(--e3); margin: 0 0 var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.card {
  position: relative; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio); padding: var(--e4) var(--e5);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.card:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.card .metric {
  display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.card .label {
  display: block; margin-top: var(--e1);
  font-size: .74rem; color: var(--texto-suave); font-weight: 600;
}
.card .card-nota { display: block; margin-top: var(--e1); font-size: .72rem; color: var(--texto-debil); }
/* Barra de acento a la izquierda: distingue de un golpe de vista la metrica que exige
   atencion de la que es solo informativa. */
/* Con esquinas redondeadas, una barra vertical en el borde queda cortada: el acento es una
   pestaña corta arriba, alineada con el contenido. */
.card[data-acento]::before {
  content: ""; position: absolute; left: var(--e5); top: 0; width: 2.5rem; height: 4px;
  border-radius: 0 0 var(--radio-full) var(--radio-full);
}
.card[data-acento="riesgo"]::before { background: var(--error); }
.card[data-acento="atencion"]::before { background: var(--aviso); }
.card[data-acento="ok"]::before { background: var(--ok); }
.card[data-acento="neutro"]::before { background: var(--acento); }


/* ==================================================================== paneles */
.panel {
  background: var(--superficie); border: 1px solid var(--borde-suave);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-1);
  margin-bottom: var(--e5); overflow: hidden;
}
.panel > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borde-suave);
  background: transparent;
  flex-wrap: wrap;
}
.panel > header h2 { margin: 0; font-size: .95rem; font-weight: 650; }
.panel > header > div:first-child { min-width: 0; }
.panel-desc {
  margin: 2px 0 0; font-size: .78rem; color: var(--texto-debil);
  font-weight: 400; max-width: 70ch;
}
.panel-cuerpo { padding: var(--e4); }

/* ================================================= bloques sueltos del inicio */
/* Secciones sin marco de panel: el semaforo y las tareas ya tienen su propio fondo, y
   envolverlos en otra caja dejaba tres bordes anidados. */
.bloque { margin: 0 0 var(--e5); }
.bloque-titulo { margin: 0 0 var(--e3); font-size: 1rem; font-weight: 650; }
.bloque .cards { margin-bottom: 0; }

/* ================================================================== semaforo */
/* Color, icono y palabras a la vez: el color solo no alcanza para quien no distingue rojo
   de verde, y la frase es lo que de verdad se lee. */
.semaforo {
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  margin: 0 0 var(--e5); padding: var(--e4) var(--e5);
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  background: var(--superficie-alta);
}
.semaforo-luz {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 3.2rem; height: 3.2rem; border-radius: var(--radio-full);
  background: var(--texto-debil); color: var(--fondo);
}
.semaforo-luz svg { width: 1.6rem; height: 1.6rem; stroke-width: 2.2; }
.semaforo-texto { flex: 1 1 18rem; min-width: 0; }
.semaforo-texto h2 { margin: 0 0 var(--e1); font-size: 1.2rem; font-weight: 700; }
.semaforo-texto p { margin: 0; max-width: 70ch; color: var(--texto-suave); font-size: .92rem; }
.semaforo[data-nivel="alto"] { background: var(--error-suave); border-color: var(--error-borde); }
.semaforo[data-nivel="alto"] .semaforo-luz { background: var(--error); }
.semaforo[data-nivel="medio"] { background: var(--aviso-suave); border-color: var(--aviso-borde); }
.semaforo[data-nivel="medio"] .semaforo-luz { background: var(--aviso); }
.semaforo[data-nivel="bajo"] { background: var(--ok-suave); border-color: var(--ok-borde); }
.semaforo[data-nivel="bajo"] .semaforo-luz { background: var(--ok); }

/* ==================================================================== tareas */
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.tarea {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
}
.tarea-icono {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: var(--radio-sm);
  background: var(--fondo-alt); color: var(--texto-suave);
}
.tarea-icono svg { width: 1.2rem; height: 1.2rem; }
.tarea[data-nivel="alto"] .tarea-icono { background: var(--error-suave); color: var(--error); }
.tarea[data-nivel="medio"] .tarea-icono { background: var(--aviso-suave); color: var(--aviso); }
.tarea[data-nivel="ok"] .tarea-icono { background: var(--ok-suave); color: var(--ok); }
.tarea-texto { display: grid; gap: 2px; }
.tarea-texto strong { font-size: .95rem; font-weight: 650; }
.tarea-texto span { font-size: .84rem; color: var(--texto-suave); }

/* Nivel de riesgo en tablas: palabra con color, no un numero. */
.nivel-riesgo { font-weight: 650; }
.nivel-riesgo[data-nivel="alto"] { color: var(--error); }
.nivel-riesgo[data-nivel="medio"] { color: var(--aviso); }
.nivel-riesgo[data-nivel="bajo"] { color: var(--ok); }

/* ========================================================== por confirmar */
.zona-confirmar { display: grid; gap: var(--e4); }

.progreso { display: flex; align-items: center; gap: var(--e3); font-size: .85rem; color: var(--texto-suave); }
.progreso-pista { flex: 1; height: 6px; border-radius: var(--radio-full); background: var(--fondo-alt); overflow: hidden; }
.progreso-valor { height: 100%; background: var(--acento); border-radius: var(--radio-full); transition: width var(--transicion); }

.pregunta {
  display: grid; gap: var(--e4);
  padding: var(--e5);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-1);
}
.pregunta-donde { margin: 0; font-size: .85rem; color: var(--texto-suave); }
.pregunta-donde strong { color: var(--texto); font-weight: 600; }
.pregunta-titulo {
  margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.3; text-wrap: balance;
  overflow-wrap: anywhere;
}
.pregunta-titulo:focus { outline: none; }
.pregunta-titulo:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; }
/* Explicacion y ejemplos en dos columnas cuando la tarjeta es ancha (pantallas grandes),
   una sobre otra cuando no caben dos de 26rem. */
.pregunta-evidencia {
  display: grid; gap: var(--e4) var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}
.pregunta-porque h4 { margin: 0 0 var(--e1); font-size: .85rem; font-weight: 650; }
.pregunta-porque p { margin: 0 0 var(--e2); max-width: 70ch; }
.pregunta-porque ul { margin: 0 0 var(--e2); padding-left: 1.2rem; display: grid; gap: var(--e1); max-width: 70ch; }

.respuestas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.respuestas .btn { flex: 1 1 13rem; justify-content: center; padding: var(--e3) var(--e4); font-size: .92rem; }
.btn-si { background: var(--ok); border-color: var(--ok); color: var(--fondo); }
.btn-si:hover { background: var(--ok); border-color: var(--ok); filter: brightness(1.08); }

.pregunta-otro {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
  margin-top: var(--e3); padding: var(--e3);
  background: var(--fondo-alt); border-radius: var(--radio);
}
.pregunta-otro label { font-size: .88rem; font-weight: 600; }
.pregunta-otro select { flex: 1 1 14rem; min-width: 0; }

.pregunta-extra { border-top: 1px dashed var(--borde); padding-top: var(--e3); }
.pregunta-extra summary { cursor: pointer; color: var(--acento); font-weight: 600; font-size: .88rem; }
.pregunta-extra[open] summary { margin-bottom: var(--e3); }
.pregunta-extra textarea { width: 100%; }

.pregunta-nav { display: flex; justify-content: space-between; gap: var(--e2); }

.pill.pill-aviso { background: var(--aviso-suave); border-color: var(--aviso-borde); color: var(--aviso); font-weight: 600; }

/* Texto solo para lectores de pantalla. */
.sr-solo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .tarea { grid-template-columns: auto minmax(0, 1fr); }
  .tarea > .btn { grid-column: 1 / -1; justify-self: start; }
  .pregunta { padding: var(--e4); }
  .pregunta-titulo { font-size: 1.12rem; }
}

/* ============================================================ estado vacio */
.vacio {
  color: var(--texto-suave); font-style: italic;
  padding: var(--e4); font-size: .88rem;
}
.vacio-guiado {
  display: grid; justify-items: center; gap: var(--e3);
  padding: var(--e6) var(--e4); text-align: center;
}
.vacio-guiado svg { width: 34px; height: 34px; color: var(--texto-debil); }
.vacio-guiado h3 { margin: 0; font-size: 1rem; }
.vacio-guiado p { margin: 0; color: var(--texto-suave); font-size: .88rem; max-width: 44ch; }

/* ==================================================================== tablas */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
caption {
  text-align: left; padding: var(--e2) var(--e4);
  color: var(--texto-debil); font-size: .78rem;
}
th, td {
  text-align: left; padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--borde-suave); vertical-align: top;
}
thead th {
  background: var(--superficie-alta); font-weight: 650; font-size: .73rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--texto-debil);
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody tr { transition: background var(--transicion); }
tbody tr:hover { background: var(--superficie-hover); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .81rem;
}
.truncar { max-width: 26rem; }

/* Tablas que tienen que caber en la pantalla sin desplazamiento horizontal: los nombres
   largos (rutas de DynamoDB, nombres de archivo) se parten en vez de empujar la tabla, y la
   columna de botones queda siempre a la vista. */
.tabla-hallazgos td, .tabla-compacta td { overflow-wrap: anywhere; }
.tabla-hallazgos .col-donde, .tabla-compacta .col-donde { min-width: 8.5rem; max-width: 22rem; }
.tabla-hallazgos .truncar { min-width: 9rem; }
.tabla-hallazgos .medidor { flex-wrap: wrap; }
.tabla-hallazgos .medidor-num { white-space: normal; }
.tabla-hallazgos td:last-child, .tabla-compacta td:last-child { white-space: nowrap; }

/* Menu de acciones por fila: se despliega en el lugar, en columna. */
.menu-acciones > summary { list-style: none; cursor: pointer; }
.menu-acciones > summary::-webkit-details-marker { display: none; }
.menu-acciones > summary::after { content: " ▾"; }
.menu-acciones[open] > summary::after { content: " ▴"; }
.menu-acciones-lista { display: grid; gap: var(--e1); margin-top: var(--e2); }
.menu-acciones-lista .btn { justify-content: flex-start; }
.celda-dato { display: grid; gap: var(--e1); }
.celda-dato .acciones-fila { gap: var(--e1); }

.paginador {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); border-top: 1px solid var(--borde-suave);
}
.paginador-texto { font-size: .82rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.paginador-pagina { font-size: .84rem; padding: 0 var(--e2); font-variant-numeric: tabular-nums; }

.lista-explicacion { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--e1); }

/* Ejemplo inventado con la forma de los valores. */
.ejemplos-valor h4 { margin: 0 0 var(--e1); font-size: .85rem; font-weight: 650; }
.ejemplos-valor ul { margin: 0 0 var(--e2); padding-left: 1.2rem; display: grid; gap: var(--e1); }
.ejemplo-valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem;
  padding: 1px var(--e2); border-radius: var(--radio-sm);
  background: var(--fondo-alt); border: 1px dashed var(--borde-fuerte);
  overflow-wrap: anywhere;
}

/* Sistemas desactivados: plegados bajo los activos. */
.desactivados > summary {
  cursor: pointer; padding: var(--e3) var(--e4); background: var(--superficie-alta);
  display: flex; flex-wrap: wrap; gap: var(--e2); align-items: baseline;
}
.desactivados[open] > summary { border-bottom: 1px solid var(--borde-suave); }

/* Detalle de una revision. */
.detalle-revision { padding: var(--e4) var(--e5) var(--e5); }
.detalle-revision:focus { outline: none; }
.detalle-revision:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.detalle-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.detalle-cabeza h2 { margin: 0 0 var(--e2); font-size: 1.15rem; }
.detalle-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--e2); margin: 0 0 var(--e4); }
.detalle-cifras div { padding: var(--e2) var(--e3); border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); background: var(--superficie-alta); }
.detalle-cifras dt { font-size: .76rem; color: var(--texto-suave); }
.detalle-cifras dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.detalle-seccion { padding-top: var(--e4); margin-top: var(--e4); border-top: 1px solid var(--borde-suave); }
.detalle-seccion > h3 { margin: 0 0 var(--e2); font-size: .98rem; }
.detalle-seccion > p { margin: 0 0 var(--e2); max-width: 75ch; }
.detalle-seccion .tabla-scroll { border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); }
.lista-expuestas { margin: 0; padding-left: 1.3rem; display: grid; gap: var(--e2); }
.aviso-grupo { padding: var(--e3); margin-bottom: var(--e2); border-left: 3px solid var(--aviso); background: var(--aviso-suave); border-radius: var(--radio-sm); }
.aviso-grupo p { margin: var(--e1) 0; max-width: 75ch; }
.aviso-grupo summary { cursor: pointer; font-size: .82rem; color: var(--acento); }
.mensaje-tecnico {
  margin: var(--e2) 0 0; padding: var(--e2); font-size: .76rem; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio-sm);
}

/* ==================================================================== badges */
.badge {
  display: inline-block; border-radius: var(--radio-full);
  padding: 1px var(--e2); font-size: .71rem; font-weight: 700; white-space: nowrap;
  letter-spacing: .01em;
  color: var(--texto-badge); background: var(--texto-suave);
}
.badge[data-nivel="RESTRINGIDO"] { background: var(--restringido); }
.badge[data-nivel="CONFIDENCIAL"] { background: var(--confidencial); }
.badge[data-nivel="INTERNO"] { background: var(--interno); }
.badge[data-nivel="PUBLICO"] { background: var(--publico); }
.badge-neutro { background: var(--texto-suave); }
.badge-ok { background: var(--ok); }
.badge-error { background: var(--error); }
.badge-aviso { background: var(--aviso); }

.pill {
  display: inline-block; border: 1px solid var(--borde); border-radius: var(--radio-full);
  padding: 0 var(--e2); font-size: .72rem; color: var(--texto-suave);
  background: var(--superficie-alta); white-space: nowrap;
}

/* ==================================================== barras de distribucion */
.barra-fila { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.barra-etiqueta { flex: 0 0 15rem; font-size: .82rem; }
.barra-pista {
  flex: 1; background: var(--fondo-alt); border-radius: var(--radio-full);
  height: .55rem; overflow: hidden;
}
.barra-valor {
  height: 100%; border-radius: var(--radio-full); background: var(--acento);
  transition: width var(--transicion);
}
.barra-valor[data-sensible="si"] { background: var(--restringido); }
.barra-num {
  flex: 0 0 3.5rem; text-align: right; font-size: .82rem;
  font-variant-numeric: tabular-nums; color: var(--texto-suave);
}

/* Medidor de confianza: el numero solo no dice si 0.47 es mucho o poco. */
.medidor { display: flex; align-items: center; gap: var(--e2); }
.medidor-pista {
  width: 3.2rem; height: .4rem; border-radius: var(--radio-full);
  background: var(--fondo-alt); overflow: hidden; flex: 0 0 auto;
}
.medidor-valor { height: 100%; border-radius: var(--radio-full); background: var(--acento); }
.medidor[data-nivel="alta"] .medidor-valor { background: var(--error); }
.medidor[data-nivel="media"] .medidor-valor { background: var(--aviso); }
.medidor[data-nivel="baja"] .medidor-valor { background: var(--texto-debil); }
.medidor-num { font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }

/* =============================================================== formularios */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e3) var(--e4);
}
.campo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.campo label { font-size: .79rem; font-weight: 650; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: .88rem; padding: var(--e2) var(--e3);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
  background: var(--superficie); color: var(--texto);
  min-height: 2.4rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo input[readonly] { background: var(--fondo-alt); color: var(--texto-suave); }
.campo .ayuda { font-size: .74rem; color: var(--texto-debil); }
.campo-ancho { grid-column: 1 / -1; }

fieldset {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e4); margin: 0 0 var(--e4);
  background: var(--superficie-alta);
}
legend {
  font-size: .78rem; font-weight: 700; padding: 0 var(--e2);
  color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em;
}
fieldset > .ayuda, fieldset > p.ayuda {
  margin: 0 0 var(--e3); font-size: .78rem; color: var(--texto-debil);
}
.filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: flex-end; }
.filtros .campo { min-width: 9rem; }

/* =================================================================== dialogo */
.dialogo {
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 0; max-width: 48rem; width: calc(100% - 2rem);
  background: var(--superficie); color: var(--texto);
  box-shadow: var(--sombra-3);
  max-height: calc(100vh - 3rem);
}
.dialogo::backdrop { background: rgba(14, 26, 21, .55); backdrop-filter: blur(3px); }
.dialogo form { padding: var(--e5); margin: 0; }
.dialogo h2 { margin: 0 0 var(--e4); font-size: 1.1rem; }
#dialogo-cuerpo { max-height: min(62vh, 40rem); overflow-y: auto; }
.dialogo-acciones {
  display: flex; justify-content: flex-end; gap: var(--e2);
  margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--borde-suave);
}

/* ================================================================== avisos */
.aviso-caja, .error-caja, .ok-caja {
  padding: var(--e3) var(--e4); border-radius: var(--radio-sm);
  font-size: .85rem; margin: var(--e2) 0; border: 1px solid transparent;
  border-left-width: 3px;
}
.aviso-caja { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso-borde); }
.error-caja { background: var(--error-suave); color: var(--error); border-color: var(--error-borde); }
.ok-caja { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-borde); }

/* Resultado de la prueba de conexion dentro del formulario. Se acota la altura para que el
   detalle no empuje los botones del dialogo fuera de la pantalla. */
.prueba-resultado { margin-top: var(--e3); max-height: 15rem; overflow-y: auto; }
.prueba-resultado:empty { margin-top: 0; }
.prueba-resultado dl {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e1) var(--e3);
  margin: var(--e2) 0 0; font-size: .84rem;
}
.prueba-resultado dt { font-weight: 650; color: var(--texto-suave); }
.prueba-resultado dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Perfil de la columna en el dialogo de revision: es lo que permite decidir, asi que se
   lee como una ficha de datos y no como un parrafo. */
.perfil-columna {
  display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: var(--e2) var(--e4); margin: 0; font-size: .85rem;
}
.perfil-columna dt { font-weight: 650; color: var(--texto-suave); }
.perfil-columna dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .perfil-columna { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .perfil-columna dd { margin-bottom: var(--e2); }
}

.cargando {
  color: var(--texto-suave); padding: var(--e5) 0; font-size: .9rem;
  display: flex; align-items: center; gap: var(--e3);
}
/* Punto que late: indica que algo esta en curso sin recurrir a una imagen. */
.cargando::before {
  content: ""; width: .55rem; height: .55rem; border-radius: var(--radio-full);
  background: var(--acento); animation: latir 1.1s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* ============================================================== responsivo */
@media (max-width: 900px) {
  /* La barra lateral pasa a cajon: se abre con el boton de la cabecera. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; padding: 0;
  }

  .app-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(18rem, 84vw); height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--transicion);
    box-shadow: var(--sombra-3);
    padding-top: var(--e5);
  }
  .app-nav[data-abierta="si"] { transform: translateX(0); }

  .sidebar-overlay[data-visible="si"] {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(9, 12, 18, .5);
  }

  main { padding: var(--e4) var(--e4) var(--e6); }
  .avisos { top: 4rem; right: var(--e2); }
  .app-header { padding: var(--e3) var(--e4); }
  .app-footer { padding: var(--e4); }
  .barra-etiqueta { flex-basis: 9rem; }
  .seccion-intro h2 { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .brand h1 { font-size: .85rem; white-space: normal; }
  .brand-logo img { height: 22px; }
  .brand-separador, .brand-sub { display: none; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .card .metric { font-size: 1.5rem; }
  .user-chip { display: none; }
  .dialogo form { padding: var(--e4); }
  /* El titulo partido en dos lineas chocaba con "Refrescar": a este ancho queda solo el
     icono, y el boton conserva su nombre en aria-label. */
  .header-actions .btn-texto { display: none; }
  .header-actions .btn { padding-inline: var(--e2); }
}

/* ================================================= donde estan los datos */
/* Selector de dos opciones (por sistema / por area). */
.segmentos {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio-full);
}
.segmento {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: var(--e1) var(--e3); border: 0; border-radius: var(--radio-full);
  background: transparent; color: var(--texto-suave);
}
.segmento[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }

.aviso-con-accion { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }

.sistemas-grilla {
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.sistema-tarjeta {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4);
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}
.sistema-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.sistema-cabeza h3 { margin: 0; font-size: 1.02rem; font-weight: 650; overflow-wrap: anywhere; }
.sistema-area { display: block; margin-top: 2px; font-size: .82rem; color: var(--texto-suave); }
.sistema-area-falta { color: var(--aviso); font-style: italic; }
.sistema-cuerpo { display: grid; gap: var(--e2); }
.sistema-nota { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.sistema-cifras { margin: 0; font-size: .86rem; color: var(--texto-suave); }
.texto-sensible { color: var(--error); font-weight: 650; }
.sistema-pendiente { font-size: .85rem; font-weight: 600; color: var(--aviso); }
.sistema-detalle summary { cursor: pointer; font-size: .84rem; color: var(--acento); font-weight: 600; }
.sistema-detalle ul { margin: var(--e2) 0 0; padding-left: 1.1rem; display: grid; gap: var(--e1); font-size: .84rem; }
.sistema-pie {
  margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--borde-suave);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e2);
  font-size: .8rem; color: var(--texto-debil);
}

/* Riesgo como etiqueta con color y palabra. */
.nivel-chip {
  flex: 0 0 auto; white-space: nowrap;
  font-size: .74rem; font-weight: 700; padding: 2px var(--e2); border-radius: var(--radio-full);
  background: var(--fondo-alt); color: var(--texto-suave);
}
.nivel-chip[data-nivel="alto"] { background: var(--error-suave); color: var(--error); }
.nivel-chip[data-nivel="medio"] { background: var(--aviso-suave); color: var(--aviso); }
.nivel-chip[data-nivel="bajo"] { background: var(--ok-suave); color: var(--ok); }

/* Composicion de las columnas con datos personales: sensibles en rojo, el resto en acento. */
.composicion { display: flex; height: 8px; border-radius: var(--radio-full); overflow: hidden; background: var(--fondo-alt); }
.composicion span { display: block; height: 100%; }
.composicion-sensible { background: var(--error); }
.composicion-personal { background: var(--acento); }

.chips { display: flex; flex-wrap: wrap; gap: var(--e1); }
.chip {
  font-size: .76rem; padding: 1px var(--e2); border-radius: var(--radio-full);
  background: var(--superficie-alta); border: 1px solid var(--borde); color: var(--texto-suave);
}
.chip-sensible { background: var(--error-suave); border-color: var(--error-borde); color: var(--error); font-weight: 600; }
.chip-mas { border-style: dashed; }

.areas { display: grid; gap: var(--e5); }
.area-grupo { padding-top: var(--e4); border-top: 1px solid var(--borde); }
.area-grupo:first-child { padding-top: 0; border-top: 0; }
.area-cabeza { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.area-cabeza h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.area-cabeza p { margin: 0; font-size: .86rem; color: var(--texto-suave); flex: 1 1 16rem; }

/* ============================================================ informe */
/* El informe ocupa el ancho disponible, como el resto de las pantallas. Antes estaba fijo
   en 56rem y en una pantalla normal dejaba media ventana vacia. Los parrafos conservan su
   propio limite de lectura (72ch). */
.informe {
  margin-bottom: var(--e5);
  padding: var(--e6) var(--e6) var(--e5);
  background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}
.informe-cabeza { border-bottom: 2px solid var(--texto); padding-bottom: var(--e3); margin-bottom: var(--e4); }
.informe-sobre { margin: 0 0 var(--e1); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-debil); }
.informe-cabeza h2 { margin: 0 0 var(--e1); font-size: 1.5rem; text-wrap: balance; }
.informe-meta { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.informe-seccion { margin-bottom: var(--e5); break-inside: avoid; }
.informe-seccion h3 { margin: 0 0 var(--e2); font-size: 1.02rem; }
.informe-seccion > p { margin: 0 0 var(--e2); max-width: 72ch; }
.informe-estado {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--radio-sm);
  border: 1px solid var(--borde); border-left-width: 5px;
}
.informe-estado svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; margin-top: 2px; }
.informe-estado p { margin: var(--e1) 0 0; max-width: 72ch; }
.informe-estado[data-nivel="alto"] { border-left-color: var(--error); color: var(--texto); }
.informe-estado[data-nivel="alto"] svg { color: var(--error); }
.informe-estado[data-nivel="medio"] { border-left-color: var(--aviso); }
.informe-estado[data-nivel="medio"] svg { color: var(--aviso); }
.informe-estado[data-nivel="bajo"] { border-left-color: var(--ok); }
.informe-estado[data-nivel="bajo"] svg { color: var(--ok); }
.informe-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); margin: 0; }
.informe-cifras div { padding: var(--e3); border: 1px solid var(--borde-suave); border-radius: var(--radio-sm); }
.informe-cifras dt { font-size: .8rem; color: var(--texto-suave); }
.informe-cifras dd { margin: var(--e1) 0 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.informe-tabla { width: 100%; font-size: .85rem; }
.informe-seccion:has(.informe-tabla) { overflow-x: auto; }
.informe-lista { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--e1); max-width: 72ch; }
.informe-nota { margin: var(--e2) 0 0; font-size: .8rem; color: var(--texto-debil); }
.informe-pie { border-top: 1px solid var(--borde); padding-top: var(--e3); font-size: .8rem; color: var(--texto-suave); }
.informe-pie p { margin: 0; }

.archivos { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--e2); }

@media (max-width: 640px) {
  .informe { padding: var(--e4); }
}

/* Impresion: los reportes de gobernanza se imprimen o se pasan a PDF. */
@media print {
  .app-header, .app-nav, .avisos, .app-footer, .acciones-fila, .sidebar-overlay,
  .no-imprimir, .skip-link {
    display: none !important;
  }
  .app-shell { grid-template-columns: 1fr; }
  main { padding: 0; max-width: none; }
  .panel { break-inside: avoid; box-shadow: none; }
  body { background: #ffffff; color: #000000; }
  /* El informe se imprime en blanco y negro legible aunque la pantalla este en modo oscuro. */
  .informe {
    max-width: none; padding: 0; border: 0; box-shadow: none;
    background: #ffffff; color: #000000;
  }
  .informe * { color: #000000 !important; background: transparent !important; }
  .informe-cabeza { border-bottom-color: #000000; }
  .informe-tabla th, .informe-tabla td { border-color: #999999 !important; }
  .informe-cifras div, .informe-estado { border-color: #999999 !important; }
  .informe-estado[data-nivel="alto"] { border-left-color: #000000 !important; }
  .informe-seccion:has(.informe-tabla) { overflow: visible; }
  @page { margin: 18mm 16mm; }
}