:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-alt:#EAECF0; --surface-sunken:#EDEFF3;
  --ink:#141A22; --ink-2:#4B5563; --ink-muted:#828B98;
  --primary:#17324D; --primary-hover:#0F2438; --primary-ink:#FFFFFF;
  --accent:#B8761C; --accent-ink:#FFFFFF;
  --border:#DDE1E7; --border-strong:#C5CBD4;
  --focus:#2A6FDB;
  --good:#0c8a3e; --warning:#c08500; --serious:#c9552f; --critical:#cf3b3b;
  --good-bg:#E3F4E8; --warning-bg:#FBF0D9; --serious-bg:#FAE7DE; --critical-bg:#F9E2E2;
  --shadow: 0 1px 2px rgba(20,26,34,0.06), 0 4px 16px rgba(20,26,34,0.06);
  --font-display: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101418; --surface:#181D24; --surface-alt:#1F252D; --surface-sunken:#141920;
    --ink:#E8ECF1; --ink-2:#B4BDC8; --ink-muted:#7B8593;
    --primary:#5C9CD4; --primary-hover:#7AB2E2; --primary-ink:#0B1219;
    --accent:#DFA155; --accent-ink:#231404;
    --border:#293039; --border-strong:#39424E;
    --focus:#6FA0E8;
    --good:#3FBE55; --warning:#E0A82E; --serious:#E08258; --critical:#E5675C;
    --good-bg:#153021; --warning-bg:#332608; --serious-bg:#33210F; --critical-bg:#3A1E1B;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101418; --surface:#181D24; --surface-alt:#1F252D; --surface-sunken:#141920;
  --ink:#E8ECF1; --ink-2:#B4BDC8; --ink-muted:#7B8593;
  --primary:#5C9CD4; --primary-hover:#7AB2E2; --primary-ink:#0B1219;
  --accent:#DFA155; --accent-ink:#231404;
  --border:#293039; --border-strong:#39424E;
  --focus:#6FA0E8;
  --good:#3FBE55; --warning:#E0A82E; --serious:#E08258; --critical:#E5675C;
  --good-bg:#153021; --warning-bg:#332608; --serious-bg:#33210F; --critical-bg:#3A1E1B;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  color-scheme: dark;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; color:var(--ink); }
a{color:inherit;}
button{font-family:inherit;}
table{border-collapse:collapse;}
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:2px; border-radius:4px; }

.tabular{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); }
.hidden{ display:none !important; }
.nowrap{ white-space:nowrap; }
/* El atributo hidden lo aplica la hoja del navegador con [hidden]{display:none},
   que pierde contra cualquier regla de clase que fije display — .panel, .notice
   y .pill lo hacen. Sin este !important, ocultar un elemento desde el JS no
   surte efecto y quedan en pantalla tarjetas de «Cargando…» y avisos vacíos. */
[hidden]{ display:none !important; }

/* ---------- Armazón ---------- */
.shell{ display:grid; grid-template-columns:238px 1fr; min-height:100vh; }
.sidebar{
  background:var(--primary); color:var(--primary-ink); padding:18px 14px;
  display:flex; flex-direction:column; gap:22px;
}
.brand{ display:flex; align-items:center; gap:9px; padding:2px 6px 4px; }
.brand-mark{
  width:26px; height:26px; border-radius:7px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; flex:none;
}
.brand-name{ font-family:var(--font-display); font-size:16.5px; font-weight:600; letter-spacing:.01em; }

.tenant-switcher{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
}
.tenant-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.tenant-meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tenant-org{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tenant-role{ font-size:11px; opacity:.7; }

nav.navgroup{ display:flex; flex-direction:column; gap:2px; }
.nav-heading{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.55; padding:10px 10px 4px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--primary-ink); text-decoration:none; font-size:13.5px; border:1px solid transparent;
}
.nav-item svg{ flex:none; opacity:.85; }
.nav-item:hover{ background:rgba(255,255,255,0.08); }
.nav-item[aria-current="true"]{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.18); font-weight:600; }

.sidebar-foot{
  margin-top:auto; display:flex; align-items:center; gap:9px; padding:9px 10px;
  border-top:1px solid rgba(255,255,255,0.14); text-decoration:none; color:inherit; border-radius:8px;
}
a.sidebar-foot:hover{ background:rgba(255,255,255,0.08); }
.avatar{
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex:none;
}
.user-meta{ display:flex; flex-direction:column; min-width:0; }
.user-name{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-size:10.5px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Hereda el color del texto de la barra en vez de fijar un blanco translúcido:
   en modo oscuro esa barra se aclara y un blanco al 50 % quedaría ilegible. */
.sidebar-version{
  display:flex; align-items:center; gap:7px; padding:8px 10px 0;
  color:var(--primary-ink); opacity:.6; font-size:10.5px; font-variant-numeric:tabular-nums;
}
.env-chip{
  border:1px solid currentColor; border-radius:20px; padding:0 6px;
  font-size:9.5px; letter-spacing:.04em; text-transform:uppercase;
}

.main{ background:var(--bg); min-width:0; }
.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 26px; border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:10;
}
.crumb{ font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; }
.crumb-link{ color:inherit; text-decoration:none; }
.crumb-link:hover{ text-decoration:underline; }
.page-title{ font-size:20px; }
.topbar-spacer{ flex:1 1 auto; }
.content{ padding:22px 26px 60px; display:flex; flex-direction:column; gap:20px; }

.btn{
  display:inline-flex; align-items:center; gap:7px; border-radius:8px; border:1px solid transparent;
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn-ghost{ background:transparent; border-color:var(--border-strong); color:var(--ink); }
.btn-ghost:hover{ background:var(--surface-alt); }
.btn-danger{ background:var(--critical-bg); border-color:var(--critical); color:var(--critical); }
.btn-sm{ padding:5px 10px; font-size:12px; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); }
.panel{ padding:18px 20px; display:flex; flex-direction:column; gap:14px; }
.panel-head{ display:flex; align-items:center; gap:10px; }
.panel-title{ font-size:15px; font-weight:600; }
.panel-sub{ font-size:12px; color:var(--ink-muted); }

table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);
  border-bottom:1px solid var(--border); padding:9px 12px; font-weight:600;
}
.data-table tbody td{ padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr:hover{ background:var(--surface-alt); }
.data-table tbody td.table-actions{ text-align:right; white-space:nowrap; }
.acciones-fila{ display:inline-flex; gap:6px; align-items:center; }
.table-wrap{ overflow-x:auto; }
.cell-strong{ font-weight:600; }
.cell-muted{ color:var(--ink-muted); }
.celda-detalle{ font-size:11px; color:var(--ink-muted); margin-top:2px; }
.row-link{ color:inherit; text-decoration:none; font-weight:600; }
.row-link:hover{ text-decoration:underline; }
.empty-state{ padding:28px 12px; text-align:center; color:var(--ink-muted); font-size:13px; }

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-good{ background:var(--good-bg); color:var(--good); }
.pill-warning{ background:var(--warning-bg); color:var(--warning); }
.pill-serious{ background:var(--serious-bg); color:var(--serious); }
.pill-critical{ background:var(--critical-bg); color:var(--critical); }
.pill-neutral{ background:var(--surface-sunken); color:var(--ink-2); }
.data-table tbody td > .pill + .pill{ margin-left:5px; }

/* Los cuatro sombreros de una contraparte. Sin punto delante: no son estados,
   son etiquetas, y el punto los haría leer como si lo fueran. */
.tag-tipo{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px;
  background:var(--surface-sunken); color:var(--ink-2); border:1px solid var(--border);
}
.tag-tipo + .tag-tipo{ margin-left:4px; }
.tag-pep{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:1px 6px; border-radius:20px; background:var(--warning-bg); color:var(--warning);
}

.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--border-strong); font-size:12.5px; color:var(--ink-2); background:var(--surface); cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); font-weight:600; }
.input, select.input, textarea.input{
  border:1px solid var(--border-strong); background:var(--surface); border-radius:8px; padding:8px 11px;
  font-size:13px; color:var(--ink); width:100%; font-family:inherit;
}
textarea.input{ resize:vertical; min-height:70px; }
.input:focus{ border-color:var(--focus); }
/* El campo que la API señaló en un 400. Se marca con el atributo y no con una
   clase porque `aria-invalid` ya se lo dice al lector de pantalla: con una
   clase habría que poner las dos cosas y un día faltaría una. */
.input[aria-invalid="true"]{ border-color:var(--critical); }
/* Bloque, no flex: con flex el nodo de texto de la etiqueta y el <span> del
   asterisco son dos elementos flexibles distintos y se apilan, dejando el
   asterisco solo en un renglón bajo el nombre del campo. */
label.field{ display:block; font-size:12.5px; color:var(--ink-2); }
label.field > .input{ display:block; margin-top:5px; }
label.field .req{ color:var(--critical); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
/* Un campo que ocupa dos columnas de la rejilla en la que esté. Existe porque
   hay contenido que no se puede abreviar —una dirección de correo, sobre todo—
   y en un tercio se lee cortado. Va acá y no como estilo suelto en el atributo
   porque el comprobador de frontend cruza cada clase contra esta hoja, y un
   estilo escrito a mano en el HTML se despegaría sin que nadie lo note. */
.campo-doble{ grid-column: span 2; }
.form-error{ font-size:12.5px; color:var(--critical); min-height:16px; }
.form-ok{ font-size:12.5px; color:var(--good); min-height:16px; }
.helper-text{ font-size:11.5px; color:var(--ink-muted); }
.helper-text.helper-mal{ color:var(--critical); }
.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.check-row input{ width:16px; height:16px; }

/* La clave manda sobre el ancho y el valor se queda con lo que necesita, hasta
   un tope. Con `auto minmax(0,1fr)` —que es lo que había— una pregunta larga se
   llevaba la fila entera y el valor quedaba con un ancho de cero: «Salario como
   empleado» salía en columna, una letra por renglón. Pasa en las tarjetas
   angostas, que es donde viven la calificación de riesgo y el detalle de un
   formulario.

   `fit-content(45%)` es lo que impide que vuelva: un valor corto ocupa lo suyo
   y uno largo se detiene en el 45 %, pero nunca baja del ancho de su palabra
   más larga. */
.kv-list{ display:grid; grid-template-columns:minmax(0,1fr) fit-content(45%); gap:9px 18px; font-size:13px; align-items:baseline; }
.kv-key{ color:var(--ink-muted); }
/* `break-word` y no `anywhere`: `anywhere` deja partir entre dos letras
   cualesquiera, y eso hace que el ancho mínimo del valor sea una letra — que es
   justo el suelo que la rejilla necesita para no aplastarlo. Parte igual las
   palabras que no caben, sólo que sin mentir sobre cuánto espacio pide. */
.kv-val{ text-align:right; font-weight:500; overflow-wrap:break-word; }
.divider{ height:1px; background:var(--border); margin:2px 0; }

/* Las dos columnas del expediente se reparten por proporción y no con un ancho
   fijo a la derecha. Con `340px` fijos, la derecha no cedía nunca: en una
   ventana de 1200 px la izquierda bajaba a 338 y los tres campos de País /
   Departamento / Ciudad quedaban en 89 px cada uno, donde no cabe «Antioquia».
   Con la razón 1 : 0,65 el reparto se sostiene en cualquier ancho — y en un
   monitor de 1712 px da 850 / 552, que es la columna de consulta un 62 % más
   ancha y la de edición un 20 % más angosta. */
.detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.65fr); gap:20px; align-items:start; }
.detail-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.actions-stack{ display:flex; flex-direction:column; gap:8px; }
.actions-stack .btn{ justify-content:center; }

.notice{ display:flex; gap:10px; padding:11px 13px; border-radius:10px; font-size:12.5px; border:1px solid; color:var(--ink); }
.notice-title{ font-weight:600; margin-bottom:2px; }
.notice-info{ background:var(--surface-sunken); border-color:var(--border-strong); }
.notice-warning{ background:var(--warning-bg); border-color:var(--warning); }
.notice-critical{ background:var(--critical-bg); border-color:var(--critical); }

/* Línea de tiempo del expediente: la pseudo-línea une los puntos sin dibujarse
   después del último, para que no quede un tramo colgando al final. */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; padding-bottom:15px; position:relative; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item:not(:last-child)::before{
  content:""; position:absolute; left:8px; top:15px; bottom:0; width:1.5px; background:var(--border);
}
.timeline-dot{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); margin:5px auto 0; z-index:1; }
.timeline-dot.is-good{ background:var(--good); }
.timeline-dot.is-warning{ background:var(--warning); }
.timeline-dot.is-critical{ background:var(--critical); }
.timeline-text{ font-size:12.5px; font-weight:500; }
.timeline-meta{ font-size:11px; color:var(--ink-muted); }
.timeline-motivo{
  font-size:12px; color:var(--ink-2); background:var(--surface-sunken);
  padding:6px 9px; border-radius:8px; margin-top:5px; white-space:pre-wrap;
}

/* Cadena de propiedad: la sangría es la que muestra de quién cuelga cada
   eslabón, así que se calcula con una variable y no con clases por nivel —los
   niveles no tienen tope conocido—. */
.arbol-nodo{ padding:9px 0; border-bottom:1px solid var(--border); }
.arbol-nodo:last-child{ border-bottom:none; }
.arbol-fila{ display:flex; align-items:flex-start; gap:10px; }
.arbol-sangria{ padding-left:calc(var(--nivel, 0) * 22px); }
.arbol-nombre{ font-size:13px; font-weight:600; }
.arbol-meta{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; }
.arbol-acciones{ margin-left:auto; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; }
.stat-card{ padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.stat-title{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); font-weight:600; }
.stat-value{ font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-detail{ font-size:11.5px; color:var(--ink-muted); }
.stat-alerta .stat-value{ color:var(--serious); }

/* Barras del reparto por estado. En CSS y no con una biblioteca de gráficos:
   son siete números y una biblioteca serían cientos de kilobytes más un paso de
   compilación que el proyecto no tiene. */
.barras{ display:flex; flex-direction:column; gap:9px; }
.barra-fila{ display:grid; grid-template-columns:150px minmax(0,1fr) 44px; gap:10px; align-items:center; font-size:12.5px; }
.barra-pista{ background:var(--surface-sunken); border-radius:20px; height:9px; overflow:hidden; }
.barra-valor{ height:100%; border-radius:20px; background:var(--primary); }
.barra-numero{ text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }

/* Un valor que hay que leer y copiar a mano: monoespaciado, con espacio entre
   caracteres y seleccionable de un clic. */
.secret-box{
  font-family:var(--font-mono); font-size:12.5px; word-break:break-all;
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:9px;
  padding:12px 14px; margin:10px 0; user-select:all;
}

/* ---------- Modal ---------- */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(10,14,18,0.5); z-index:200;
  align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto;
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--surface); border-radius:14px; width:min(680px,100%); box-shadow:var(--shadow);
  max-height:90vh; display:flex; flex-direction:column; border:1px solid var(--border);
}
.modal-head{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-title{ font-size:17px; }
.modal-close{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--ink-muted); padding:4px; border-radius:6px; font-size:18px; }
.modal-close:hover{ background:var(--surface-alt); }
.modal-body{ padding:20px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.modal-foot{ display:flex; align-items:center; gap:10px; padding:16px 22px; border-top:1px solid var(--border); }

/* ---------- Avisos emergentes ---------- */
/* Reemplazan a `alert()`. La pila la crea `js/avisos.js` y la cuelga del body:
   no está en ningún HTML a propósito, porque un aviso puede salir desde
   cualquier pantalla y repetir el mismo contenedor en veinte archivos garantiza
   que un día falte en uno.

   Por encima del modal (z-index 200): un error de una operación disparada desde
   un modal tiene que verse, y taparlo con el propio modal que lo provocó sería
   volver al problema que esto viene a resolver. */
.avisos{
  position:fixed; top:16px; right:16px; z-index:300;
  display:flex; flex-direction:column; gap:10px;
  width:min(360px, calc(100vw - 32px));
  /* La pila no intercepta pulsaciones; cada aviso sí. Sin esto, una franja
     invisible de 360 px en la esquina se traga los clics de lo que haya debajo
     cuando no hay ningún aviso. */
  pointer-events:none;
}
.aviso{
  pointer-events:auto;
  display:flex; gap:10px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border-strong);
  border-left:4px solid var(--ink-muted);
  border-radius:10px; padding:12px 13px;
  box-shadow:0 6px 14px rgba(20,26,34,0.10), 0 18px 40px rgba(20,26,34,0.14);
  font-size:12.5px; color:var(--ink-2);
  position:relative; overflow:hidden;
  animation:aviso-entra .18s ease-out;
}
.aviso-bueno{ border-left-color:var(--good); }
.aviso-malo{ border-left-color:var(--critical); }
.aviso-titulo{ font-weight:600; color:var(--ink); margin-bottom:2px; }
.aviso-cerrar{
  margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--ink-muted); font-size:16px; line-height:1; flex:none; padding:0 0 0 8px;
}
.aviso-cerrar:hover{ color:var(--ink); }
/* La barra que se agota dice cuánto queda sin obligar a mirar un reloj. Sólo la
   llevan los avisos que se van solos; el de error no la tiene porque no se va. */
.aviso-tiempo{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--good); opacity:.55; transform-origin:left;
  animation:aviso-agota linear forwards;
}
@keyframes aviso-entra{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes aviso-agota{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Quien pidió menos movimiento no pierde la información: el aviso aparece sin
   deslizarse y la barra se queda quieta, pero el aviso sigue yéndose a su hora. */
@media (prefers-reduced-motion: reduce){
  .aviso{ animation:none; }
  .aviso-tiempo{ animation:none; opacity:.3; }
}

/* ---------- Pantallas sin sesión ---------- */
.login-wrap{ min-height:100vh; display:flex; }
.login-side{
  flex:1.1; background:var(--primary); color:var(--primary-ink); display:flex; flex-direction:column;
  justify-content:space-between; padding:44px 46px;
}
.login-quote{ font-family:var(--font-display); font-size:23px; line-height:1.45; max-width:440px; text-wrap:balance; }
.login-quote span{ color:var(--accent); }
.login-form-side{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg); }
.login-card{ width:100%; max-width:370px; display:flex; flex-direction:column; gap:18px; }
.login-foot-meta{ font-size:11.5px; color:rgba(255,255,255,0.65); display:flex; align-items:center; gap:8px; }

@media (max-width:1100px){
  .detail-grid{ grid-template-columns:1fr; }
}
@media (max-width:920px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
  .form-grid, .form-grid-3{ grid-template-columns:1fr; }
  .login-side{ display:none; }
  .barra-fila{ grid-template-columns:110px minmax(0,1fr) 40px; }
}

/* ---------- Portal de la contraparte ----------
   No comparte el armazón de la aplicación: no hay barra lateral ni sesión, y la
   marca que se ve es la de la empresa que pide los datos, no la del sistema.
   Quien entra le está entregando información a esa empresa. */
.publico-wrap{ min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.publico-head{
  display:flex; align-items:center; gap:14px; padding:20px 24px;
  border-bottom:1px solid var(--border); background:var(--surface);
}
.publico-empresa{ font-family:var(--font-display); font-size:19px; font-weight:600; }
/* 1.200 px: un 40 % más que los 780 de antes, y un 10 % más sobre eso. Con el
   raíl de pasos y su separación, la columna de preguntas pasa de 550 a 970, que
   es lo que permite poner dos campos cortos por fila en vez de un teléfono de
   550 px de ancho. */
.publico-main{
  flex:1; width:100%; max-width:1200px; margin:0 auto; padding:24px 16px 60px;
  display:flex; flex-direction:column; gap:18px;
}
.publico-pie{ padding:18px 24px; text-align:center; color:var(--ink-muted); font-size:12.5px; }

/* Barra de guardado: dice que lo que se escribió no se va a perder, que es la
   duda que aparece en cualquier formulario largo. */
.guardado{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:0 0 10px 10px; font-size:12.5px;
  background:var(--surface); border:1px solid var(--border); border-top:none;
}
.guardado-punto{ width:8px; height:8px; border-radius:50%; background:var(--good); flex:none; }
.guardado.es-pendiente .guardado-punto{ background:var(--warning); }
.guardado.es-error .guardado-punto{ background:var(--critical); }

/* Sin filete entre preguntas: lo que separa es el aire. La línea marcaba el
   final de cada una en una lista larga y con una tarjeta por paso ya no hace
   falta — sólo agrega ruido a un formulario que ya es largo de leer.
   La separación es asimétrica a propósito: el enunciado va pegado a su campo y
   el aire queda debajo, que es lo que agrupa cada pregunta con lo suyo en vez de
   dejar tres bloques flotando a la misma distancia de todo. */
.pregunta{ padding:2px 0 12px; }
.pregunta-enunciado{ font-size:13.5px; font-weight:600; margin-bottom:6px; }
.pregunta-ayuda{ font-size:12px; color:var(--ink-muted); margin-bottom:8px; }
/* Marca la pregunta que quedó sin responder al intentar enviar: sin esto hay que
   recorrer cuarenta buscando cuál es. */
.pregunta.es-faltante{ box-shadow:inset 3px 0 0 var(--critical); padding-left:12px; }
.pregunta-error{ font-size:12px; color:var(--critical); margin-top:6px; }
/* Dos campos cortos por fila, para que el ancho nuevo sirva de algo: un campo de
   860 px para escribir un teléfono se lee peor que uno de 400. Lo largo —textos,
   tablas, enunciados que no caben en una línea— sigue ocupando la fila entera. */
.preguntas-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.preguntas-grid > .pregunta-ancha{ grid-column:1 / -1; }
@media (max-width: 760px){ .preguntas-grid{ grid-template-columns:1fr; } }

/* Selección múltiple desde un maestro: lo elegido se ve como fichas. */
.fichas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ficha{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-alt); color:var(--ink); border:1px solid var(--border-strong);
  border-radius:100px; padding:3px 6px 3px 12px; font-size:12.5px;
}
.ficha-quitar{
  background:none; border:none; cursor:pointer; color:var(--ink-muted);
  font-size:13px; line-height:1; padding:2px 4px; border-radius:100px;
}
.ficha-quitar:hover{ background:var(--critical-bg); color:var(--critical); }

/* La barra de pasos, al pie del cuerpo. */
.pasos-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 16px;
}
.pasos-donde{ font-size:12.5px; color:var(--ink-muted); text-align:center; }
.pasos-nav .btn:disabled{ opacity:.45; cursor:not-allowed; }

.opciones{ display:flex; flex-direction:column; gap:7px; }
.opcion{ display:flex; align-items:flex-start; gap:9px; font-size:13px; }
.opcion input{ margin-top:2px; }
/* El asterisco de obligatorio fuera de un label.field: lo usan el enunciado de
   una pregunta del portal y el encabezado de una columna de lista. */
.req{ color:var(--critical); }

/* ---------- Índice del portal ---------- */
/* Una sola página con cuarenta preguntas no dice nunca cuánto falta, y eso es lo
   que hace que se abandone a la mitad. En pantalla ancha va como raíl pegajoso;
   en angosta se convierte en una tira horizontal arriba, que es donde estorba
   menos. */
.portal-cols{ display:grid; grid-template-columns:210px minmax(0,1fr); gap:20px; align-items:start; }
.portal-cuerpo{ min-width:0; }
.portal-indice{
  position:sticky; top:16px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:12px 10px;
}
.indice-titulo{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); padding:0 8px 8px;
}
/* Cada paso es un botón y ya no un ancla: no lleva a una parte de la página,
   cambia cuál se muestra. */
.indice-item{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px;
  font-size:12.5px; color:var(--ink-2); text-decoration:none;
  background:none; border:none; width:100%; text-align:left;
  font-family:inherit; cursor:pointer;
}
.indice-item:hover{ background:var(--surface-alt); color:var(--ink); }
.indice-item.es-actual{ background:var(--surface-alt); color:var(--ink); font-weight:600; }
.indice-punto{
  width:19px; height:19px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:600;
  border:1.5px solid var(--border-strong); color:var(--ink-muted);
}
.indice-punto.es-completa{ background:var(--good); border-color:var(--good); color:#fff; }
/* Ámbar es lo que hace que «Siguiente» pueda no bloquear: se avanza igual, y el
   recorrido sigue diciendo dónde hay que volver. */
.indice-punto.es-pendiente{ border-color:var(--warning); color:var(--warning); }
.avance{ height:4px; border-radius:2px; background:var(--surface-sunken); margin:10px 8px 0; overflow:hidden; }
.avance-relleno{ height:100%; background:var(--primary); border-radius:2px; }
.avance-texto{ font-size:11px; color:var(--ink-muted); padding:6px 8px 0; }

@media (max-width: 820px){
  .portal-cols{ grid-template-columns:1fr; }
  .portal-indice{ position:static; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .indice-titulo{ padding:0 8px; }
  .avance{ flex:1 0 100%; margin:8px; }
}

/* ---------- Listas de filas ---------- */
/* Socios, cuentas, vínculos. La caja hace scroll lateral por su cuenta: una
   tabla de cinco columnas en un teléfono empujaría la página entera de lado. */
.tabla-lista-caja{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-width:100%; overflow-x:auto; }
.tabla-lista{ width:100%; min-width:520px; border-collapse:collapse; font-size:12.5px; }
.tabla-lista th{
  text-align:left; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-muted);
  padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.tabla-lista td{ padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.tabla-lista tr:last-child td{ border-bottom:none; }
.tabla-lista .input{ font-size:12.5px; padding:5px 7px; }

/* ---------- Revisar y decidir ---------- */
/* Tres columnas: el recorrido, lo declarado y la decisión. La del medio es la
   que crece; las otras dos acompañan mientras se lee. */
.revision-cols{ display:grid; grid-template-columns:190px minmax(0,1fr) 300px; gap:18px; align-items:start; }
.revision-cuerpo{ min-width:0; display:flex; flex-direction:column; gap:16px; }
.revision-pasos{
  position:sticky; top:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:12px 10px;
  display:flex; flex-direction:column; gap:2px;
}
.revision-lado{ position:sticky; top:16px; display:flex; flex-direction:column; gap:16px; }
@media (max-width: 1180px){
  .revision-cols{ grid-template-columns:1fr; }
  .revision-pasos, .revision-lado{ position:static; }
  .revision-pasos{ flex-direction:row; flex-wrap:wrap; align-items:center; }
}

/* El enunciado arriba y la respuesta debajo, no a los lados: con enunciados de
   tres renglones —los hay— la pregunta y su respuesta quedaban a distinta altura
   y separadas por un vacío. */
.respuestas-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-top:6px; }
.respuestas-grid > .respuesta-ancha{ grid-column:1 / -1; }
@media (max-width: 760px){ .respuestas-grid{ grid-template-columns:1fr; } }
.respuesta{ padding:9px 0; border-top:1px solid var(--border); }
.respuesta-pregunta{ font-size:11.5px; color:var(--ink-muted); margin-bottom:3px; line-height:1.4; }
.respuesta-valor{ font-size:13.5px; font-weight:500; overflow-wrap:break-word; }
/* Tres estados que no se parecen: respondió, no respondió, y nunca se le
   preguntó. Confundir los dos últimos hacía que un formulario completo se
   leyera como uno a medias. */
.respuesta-valor.es-vacia{ color:var(--ink-muted); font-weight:400; font-style:italic; }
.respuesta-valor.es-no-aplica{ color:var(--ink-muted); font-weight:400; }

.tabla-respuesta-caja{ overflow-x:auto; margin-top:4px; }
.tabla-respuesta{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:460px; }
.tabla-respuesta th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-muted); font-weight:600; padding:5px 8px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.tabla-respuesta td{ padding:5px 8px; border-bottom:1px solid var(--border); }
.tabla-respuesta tr:last-child td{ border-bottom:none; }

.chequeo{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--border); }
.chequeo:first-child{ border-top:none; }
.chequeo b{ color:var(--ink); font-weight:600; }
.chequeo-icono{ flex:none; width:15px; text-align:center; font-weight:700; font-size:12px; }
.chequeo-icono.es-ok{ color:var(--good); }
.chequeo-icono.es-pend{ color:var(--warning); }
.chequeo-icono.es-mal{ color:var(--critical); }

/* ---------- Documentos del expediente ---------- */
.documento-fila{
  display:flex; align-items:flex-start; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--border);
}
.documento-fila:last-of-type{ border-bottom:none; }
.documento-info{ min-width:0; flex:1; }
.documento-titulo{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.documento-detalle{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; overflow-wrap:anywhere; }

/* ---------- Calificación de riesgo ---------- */
.estado-hero{ display:flex; align-items:center; gap:10px; }
.score-value{
  font-family:var(--font-display); font-size:32px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1;
}
.score-scale{ font-size:11.5px; color:var(--ink-muted); }

/* El código de seguimiento del canal de denuncias.
   Se muestra una sola vez y alguien lo va a copiar a mano en un papel: grande,
   monoespaciado y con espacio entre caracteres, para que no se confunda un cero
   con una O. El alfabeto del código ya evita los pares ambiguos. */
.codigo-grande{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:26px; font-weight:600; letter-spacing:3px; text-align:center;
  padding:18px; margin:14px 0 6px;
  background:var(--surface-sunken); border:1px dashed var(--border-strong); border-radius:10px;
}

/* La dirección pública del canal de denuncias: hay que poder leerla de un
   vistazo para copiarla a una cartelera o a un manual. */
.codigo-enlace{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:8px;
}
.codigo-enlace code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13.5px; word-break:break-all;
}

/* Selector en la barra superior: acompaña a los botones sin ocupar el ancho de
   un campo de formulario. */
.input-inline{ width:auto; min-width:150px; }

/* ---------- Impresión ----------
   El informe a la junta se imprime desde el navegador: no se genera un PDF en el
   servidor porque haría falta una dependencia grande para producir algo peor que
   lo que el navegador ya sabe hacer, y porque cada empresa lo presenta con su
   plantilla. Lo que hace falta es quitar de la hoja lo que es navegación. */
@media print {
  .sidebar, .no-imprimir, .btn { display:none !important; }
  .shell{ display:block; }
  .main{ margin:0; }
  .content{ padding:0; gap:12px; }
  .card{ border:1px solid #ccc; box-shadow:none; break-inside:avoid; }
  body{ background:#fff; }
}

/* ---------- Sello blanco ----------
   El portal se ve como la empresa que pide los datos. El color entra por una
   variable que sólo se aplica cuando la empresa configuró uno: sin esto habría
   que duplicar la hoja de estilos o inyectarla, y las dos cosas envejecen mal.

   El canal de denuncias queda deliberadamente fuera: una imagen alojada en un
   servidor de la empresa sería una petición del navegador de quien denuncia a
   una máquina que la empresa controla. */
.publico-logo{ max-height:38px; max-width:220px; object-fit:contain; display:block; }
body.con-marca .btn-primary{ background:var(--marca); border-color:var(--marca); }
body.con-marca .publico-empresa{ color:var(--marca); }

/* ---------- Consulta en listas restrictivas, en la revisión ---------- */
/* Contra qué se consultó: va una vez arriba de la tabla y no en cada fila,
   que es igual para todas y repetirlo la llenaría de ruido. */
.fuente-consulta{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; font-size:12px; color:var(--ink-2);
}
.fuente-consulta span{ white-space:nowrap; }

.aviso-consulta{
  display:flex; gap:9px; align-items:flex-start;
  background:var(--warning-bg); border-radius:8px; padding:10px 12px;
  font-size:12.5px; color:var(--ink-2);
}
.aviso-marca{ color:var(--warning); font-weight:700; flex:none; }

.tabla-consultas td{ vertical-align:top; }
.consulta-quien{ font-weight:600; color:var(--ink); }
.consulta-papel{ font-size:11px; color:var(--ink-muted); margin-top:1px; }
.consulta-comparado{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); }
.consulta-nota{ font-size:11px; color:var(--ink-muted); margin-top:2px; }
/* Quien dejó de declararse sigue en la tabla —su constancia tiene que quedar—
   pero atenuado: ya no se lo consulta y no espera nada de nadie. */
.fila-apagada td{ opacity:.6; }