/* ==========================================================================
   Docket — console interno de Nexia Talents.

   Dirección visual: lenguaje Apple contemporáneo (Liquid Glass / HIG 2025-26),
   con la marca de Nexia intacta (navy / teal / paper).

   Reglas de Apple que se respetan literalmente:
   · Liquid Glass es SOLO para la capa funcional (sidebar, barra superior,
     hojas, avisos). La HIG es explícita: "Don't use Liquid Glass in the
     content layer." Todo lo que es contenido (paneles, tablas, tableros,
     tarjetas) usa materiales estándar.
   · Esquinas continuas (squircle), no circulares: `corner-shape` donde el
     navegador lo soporte, y radios generosos donde no.
   · Controles en cápsula; contenedores 16-22px; filas e inputs 10-12px.
   · Variante "regular" del material: blur 24px + saturación ~1.4, y los
     elementos grandes (sidebar) MÁS opacos que los chicos — así lo pide la HIG
     para no perder legibilidad.
   · Respeta reduce-transparency y increase-contrast, que la HIG exige.

   Dos concesiones deliberadas, por la máquina del usuario (iGPU AMD con driver
   viejo, donde el blur es poco confiable):
   1. Cada superficie con blur arranca de un fondo casi opaco, así que si el
      blur no compone, se ve igual de bien y no "rompe".
   2. El blur está detrás de @supports, no aplicado a lo bruto.
   Si igual stutterea, se saca el bloque @supports y queda el vidrio opaco.

   Tipografía: SOLO Inter (decisión del usuario, 2026-09-21).
   ========================================================================== */

/* ==========================================================================
   Reset mínimo — el console es root layout propio
   --------------------------------------------------------------------------
   Antes, /console heredaba globals.css y con él el preflight de Tailwind. Al
   desacoplarlo, esas reglas dejaron de llegar: sin esto el body recuperaría su
   margen de 8px, los <svg> volverían a ser inline (desalineando cada icono) y
   los controles nativos (button/select/input) reaparecerían con su aspecto de
   fábrica. Este bloque reproduce exactamente lo que el preflight aportaba.
   console.css solo se sirve en /console, así que puede usar selectores sin
   scope sin filtrarse al sitio de marketing.
   ========================================================================== */
html {
  /* Preflight resolvía acá theme(fontFamily.sans): var(--font-sans) + la lista
     del tailwind.config. Se expande literal para que el cómputo no cambie. */
  font-family: Inter, system-ui, sans-serif, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  /* No hereda el comportamiento de scroll del marketing: scroll-padding-top
     de 110px existe por el navbar sticky del landing, acá no significa nada. */
  scroll-behavior: auto;
  scroll-padding-top: 0;
}
body {
  margin: 0;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  /* globals.css ya no aplica acá: el .dk pinta su propio fondo encima, pero el
     body no debe quedar transparente (overscroll y primer paint). */
  background: var(--paper);
  color: var(--ink);
}
*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}
:where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, pre, hr) { margin: 0; }
:where(ol, ul, menu) { margin: 0; padding: 0; list-style: none; }
:where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle; }
:where(button, input, optgroup, select, textarea) {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
:where(button, [type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
  background-image: none;
}
:where(textarea) { resize: vertical; }
:where(hr) { height: 0; color: inherit; }

.dk {
  /* primitivos de marca — referencian app/tokens.css, única fuente de verdad */
  --dk-navy: var(--navy);
  --dk-navy-700: var(--navy-700);
  --dk-navy-900: var(--navy-900);
  --dk-teal: var(--teal);
  --dk-teal-600: var(--teal-600);
  --dk-paper: var(--paper);
  --dk-paperdeep: var(--paperdeep);

  /* semánticos */
  --dk-surface: var(--dk-paper);
  --dk-surface2: var(--dk-paperdeep);
  --dk-ink: var(--dk-navy);
  --dk-ink-muted: #4f6a7d;
  --dk-ink-faint: #546c81;
  --dk-line: rgba(0, 40, 64, 0.14);
  --dk-line-soft: rgba(0, 40, 64, 0.07);
  --dk-accent: var(--dk-teal);
  --dk-accent-strong: var(--dk-teal-600);

  /* estados — funcionales, nunca decorativos. El ok es verde propio
     (dirección visual 2026-10-22): el semáforo va separado de la marca teal. */
  --dk-risk: #a32b22;
  --dk-risk-soft: #f7ebe9;
  --dk-watch: #8a5a00;
  --dk-watch-soft: #f8f1e2;
  --dk-ok: var(--role-good);
  --dk-ok-soft: rgb(var(--role-good-rgb) / 0.12);
  --dk-ok-text: #256b45;

  /* Ojo: next/font renombra la familia de Inter con un hash y la expone en
     `--font-inter`. Escribir "Inter" a secas NO matchea esa @font-face. */
  --dk-sans: var(--font-inter, "Inter"), system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- geometría: esquinas continuas (dirección visual 2026-10-22) --- */
  --dk-r-xl: 22px;   /* chrome flotante: sidebar, barra, hojas */
  --dk-r-lg: 24px;   /* contenedores: paneles, tableros, franjas */
  --dk-r-md: 12px;   /* filas, inputs, tarjetas */
  --dk-r-sm: 10px;   /* elementos chicos */
  --dk-r-xs: 6px;    /* micro-elementos: puntos, kbd y similares */
  --dk-r-pill: 999px;

  /* --- elevación: sombras difusas, nunca duras --- */
  --dk-elev-1: 0 1px 2px rgba(0, 26, 44, 0.05), 0 4px 12px rgba(0, 26, 44, 0.05);
  --dk-elev-2: 0 2px 6px rgba(0, 26, 44, 0.07), 0 12px 28px rgba(0, 26, 44, 0.09);
  --dk-elev-3: 0 8px 24px rgba(0, 26, 44, 0.13), 0 28px 64px rgba(0, 26, 44, 0.17);

  /* --- material de vidrio: base casi opaca (fallback robusto) --- */
  --dk-glass: rgba(250, 249, 246, 0.90);
  --dk-glass-edge: rgba(255, 255, 255, 0.75);
  --dk-glass-dark: rgba(0, 40, 64, 0.90);

  /* La preferencia de velocidad (Configuración) multiplica las duraciones.
     Un factor > 1 alarga, < 1 acorta; el amortiguamiento no se toca. La
     variable la escribe `motion-pref.tsx` al montar. */
  --dk-motion: 1;
  --dk-dur-instant: calc(120ms * var(--dk-motion));
  --dk-dur-fast: calc(220ms * var(--dk-motion));
  --dk-dur-base: calc(320ms * var(--dk-motion));
  --dk-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dk-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);

  --dk-topbar-h: 60px;
  --dk-side-w: 244px;
  --dk-rail-w: 72px;
  --dk-gutter: 10px;

  /* Fondo de la capa de contenido: rol plano (dirección visual 2026-10-22).
     Sin gradientes ni blancos puros: la jerarquía sale del tono. */
  background: var(--role-bg);
  color: var(--dk-ink);
  font-family: var(--dk-sans);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.dk *, .dk *::before, .dk *::after { box-sizing: border-box; }

/* Esquinas continuas (las "squircle" de Apple). Chrome 139+; en el resto,
   los radios de arriba ya dan el aire. */
@supports (corner-shape: squircle) {
  .dk-side, .dk-top, .dk-panel, .dk-stats, .dk-col, .dk-modal, .dk-sheet,
  .dk-side-pane, .dk-toast, .dk-card, .dk-input, .dk-select, .dk-textarea, .dk-btn,
  .dk-seg, .dk-drop, .dk-palette, .dk-privacy {
    corner-shape: squircle;
  }
}

/* ---------- shell: chrome a sangre, contenido detrás ----------
   Sidebar y barra pegados a los márgenes, sin radios: el cromo es marco,
   no placa flotante. */
.dk-shell {
  display: grid; grid-template-columns: var(--dk-side-w) 1fr;
  gap: var(--dk-shell-gap); padding: var(--dk-shell-pad);
  min-height: 100vh; align-items: start;
  /* El ancho lo anima el resorte del grid: cambiar docked/floating mueve la
     columna en vez de saltar. */
  transition: padding var(--dk-dur-base) var(--dk-ease-out),
              gap var(--dk-dur-base) var(--dk-ease-out);
}
.dk-maincol { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dk-main { padding: 14px 18px 64px; max-width: 1320px; width: 100%; margin: 0 auto; }

/* ---------- capa funcional: Liquid Glass ---------- */

/* Sidebar: vidrio navy. La HIG pide que los elementos grandes sean MÁS opacos,
   así que acá el vidrio es denso de arranque.
   `border-radius` y `inset` vienen de la preferencia de docked/floating: docked
   va a sangre y sin radio (es marco), floating es una placa con margen. El
   ancho lo anima `--dk-side-w` con la duración de la zona, para que el cambio
   de preferencia sea un movimiento y no un salto de layout. */
.dk-side {
  background: var(--dk-glass-dark);
  color: var(--dk-paper);
  display: flex; flex-direction: column;
  position: sticky; top: var(--dk-side-inset);
  height: calc(100vh - var(--dk-side-inset) * 2);
  z-index: 30;
  border-radius: var(--dk-side-radius);
  box-shadow: var(--dk-elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  overflow: hidden;
  transition:
    margin var(--dk-dur-base) var(--dk-ease-out),
    height var(--dk-dur-base) var(--dk-ease-out),
    top var(--dk-dur-base) var(--dk-ease-out),
    border-radius var(--dk-dur-base) var(--dk-ease-out);
}
/* Docked: a sangre. Floating: placa con margen, como la que había antes.
   Los defaults van en `:root`-equivalente para que `.dk-side-w` exista antes de
   que el atributo `data-dock` llegue desde el proveedor. */
.dk { --dk-side-inset: 0px; --dk-side-radius: 0px; --dk-shell-pad: 0px; --dk-shell-gap: 0px; }
.dk[data-dock="floating"] { --dk-side-inset: 10px; --dk-side-radius: var(--dk-r-xl); --dk-shell-pad: 10px; --dk-shell-gap: 10px; }
.dk-brand { padding: 16px 16px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dk-brand-text { min-width: 0; }
.dk-brand-name { font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: -0.022em; }
.dk-brand-sub { font-size: 11.5px; color: rgba(250, 249, 246, 0.62); margin-top: 3px; }

.dk-nav { flex: 1; overflow-y: auto; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 1px; }
/* Scrollbar propia del nav: la del sistema sobre vidrio navy es un palo gris
   de 15px que parte el panel en dos. Una de 6px, del mismo verde del texto,
   y con la pista apenas visible: se lee el vidrio, no la barra. */
.dk-nav, .dk-panel-body, .dk-layer-body, .dk-table-wrap, .dk-side .dk-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 249, 246, 0.22) transparent;
}
.dk-nav::-webkit-scrollbar { width: 6px; }
.dk-nav::-webkit-scrollbar-track { background: transparent; }
.dk-nav::-webkit-scrollbar-thumb {
  background: rgba(250, 249, 246, 0.22);
  border-radius: 999px;
  border: 0;
}
.dk-nav::-webkit-scrollbar-thumb:hover { background: rgba(250, 249, 246, 0.34); }
.dk-nav-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(250, 249, 246, 0.48);
  padding: 12px 8px 5px;
}
.dk-navitem {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--dk-r-sm);
  color: rgba(250, 249, 246, 0.88); font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 10px; min-height: 36px; cursor: pointer;
  transition-property: background-color, color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-navitem:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
/* Hover sostenido: con la barra colapsada o en pantallas chicas el rótulo no
   está a la vista, así que el destino tiene que poder leerse sin depender de
   acertar el mouse. El elemento bajo el cursor se queda fijo con el fondo del
   activo y un punto de estado; el resto sigue con su hover normal. */
.dk-navitem[data-hover-sticky="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
}
.dk-navitem:active { transform: scale(0.98); }
.dk-navitem[aria-current="page"] {
  background: rgba(0, 147, 163, 0.34); color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.dk-navitem svg { flex: none; }
.dk-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--dk-teal-600); color: var(--dk-navy-900);
  padding: 1px 7px; border-radius: var(--dk-r-pill); line-height: 16px;
}
/* Pista de atajo en el sidebar: se lee, no se aprieta. */
.dk-nav-kbd {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: rgba(250, 249, 246, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--dk-r-xs);
  padding: 1px 6px; white-space: nowrap;
}

/* ---------- paleta de comandos ---------- */
.dk-cmd-item {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: var(--dk-r-sm);
  font: inherit; text-align: left; cursor: pointer;
  padding: 8px 10px; color: var(--dk-ink);
}
.dk-cmd-item[data-active] { background: rgba(0, 40, 64, 0.07); }
.dk-cmd-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-cmd-item .dk-sub { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-side-foot {
  padding: 12px 16px 14px; font-size: 11.5px;
  color: rgba(250, 249, 246, 0.62);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ---------- sidebar colapsable: riel manual ----------
   Mismas reglas que el riel automático de 1024px, pero mandadas por la
   preferencia (`data-side` en `.dk`): iconos solos, con tooltip. El ancho
   tiene transición porque cambiar de columna sin animación salta el layout. */
.dk-shell { transition: grid-template-columns var(--dk-dur-base) var(--dk-ease-out), padding var(--dk-dur-base) var(--dk-ease-out), gap var(--dk-dur-base) var(--dk-ease-out); }
.dk[data-side="collapsed"] .dk-shell { grid-template-columns: var(--dk-rail-w) 1fr; }
.dk[data-side="collapsed"] .dk-side { width: var(--dk-rail-w); }
.dk[data-side="collapsed"] .dk-brand { padding: 12px 8px 10px; justify-content: center; }
.dk[data-side="collapsed"] .dk-brand-text,
.dk[data-side="collapsed"] .dk-nav-label,
.dk[data-side="collapsed"] .dk-nav-group,
.dk[data-side="collapsed"] .dk-side-foot,
.dk[data-side="collapsed"] .dk-nav-kbd,
.dk[data-side="collapsed"] .dk-nav-badge { display: none; }
.dk[data-side="collapsed"] .dk-navitem { justify-content: center; padding: 9px 6px; }

/* Botón de colapsar: vive en la marca y queda a la vista también colapsado. */
.dk-collapse {
  flex: none; background: transparent; border: 0; border-radius: var(--dk-r-sm);
  color: rgba(250, 249, 246, 0.88); padding: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition-property: background-color, color, transform;
  transition-duration: var(--dk-dur-instant);
  transition-timing-function: var(--dk-ease-out);
}
.dk-collapse:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.dk-collapse:active { transform: scale(0.94); }
.dk-top {
  min-height: var(--dk-topbar-h);
  background: var(--dk-glass);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
  border-radius: 0;
  box-shadow: var(--dk-elev-1), inset 0 1px 0 var(--dk-glass-edge);
}
.dk-switcher { display: flex; align-items: center; gap: 8px; }
.dk-switcher-label { font-size: 11.5px; font-weight: 600; color: var(--dk-ink-muted); }
.dk-switcher select {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--dk-navy);
  background: rgba(0, 40, 64, 0.06); border: 1px solid transparent;
  border-radius: var(--dk-r-pill); padding: 8px 30px 8px 13px; max-width: 260px; cursor: pointer;
  transition-property: background-color, border-color;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-switcher select:hover { background: rgba(0, 40, 64, 0.10); }
.dk-top-search {
  font: inherit; font-size: 13px; background: rgba(0, 40, 64, 0.06);
  border: 1px solid transparent; border-radius: var(--dk-r-pill);
  padding: 8px 14px; width: auto; flex: 1 1 160px; max-width: 240px; min-width: 140px; color: var(--dk-navy);
  transition-property: background-color, box-shadow;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-top-search::placeholder { color: var(--dk-ink-faint); }
.dk-top-search:focus { background: var(--dk-surface); box-shadow: 0 0 0 3px rgba(0, 122, 135, 0.22); }
.dk-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dk-bell {
  position: relative; background: rgba(0, 40, 64, 0.06); border: 0;
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: var(--dk-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition-property: background-color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-bell:hover { background: rgba(0, 40, 64, 0.12); }
.dk-bell:active { transform: scale(0.94); }
.dk-bell-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--dk-risk);
  box-shadow: 0 0 0 2px var(--dk-glass);
}
.dk-user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
button.dk-user { background: transparent; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 6px 8px; border-radius: var(--dk-r-pill); }
button.dk-user:hover { background: rgba(0, 40, 64, 0.07); }
.dk-userwrap { position: relative; }
/* Cierra el menú al clickear afuera: capa invisible que come el clic. */
.dk-menu-scrim { position: fixed; inset: 0; z-index: 40; background: transparent; border: 0; padding: 0; cursor: default; }
.dk-usermenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 41;
  background: var(--dk-surface); border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-elev-3); padding: 6px; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px;
}
.dk-usermenu [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: var(--dk-r-sm);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--dk-ink);
  padding: 9px 10px; cursor: pointer; text-align: left;
}
.dk-usermenu [role="menuitem"]:hover { background: rgba(0, 40, 64, 0.07); }
/* Identidad del usuario logueado: nombre arriba, email abajo. */
.dk-usermenu-id { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; }
.dk-usermenu-id strong { font-size: 13px; font-weight: 600; color: var(--dk-ink); }
.dk-usermenu-id span { font-size: 12px; color: var(--dk-ink-soft, rgba(0, 40, 64, 0.65)); word-break: break-all; }
/* El contextual del click derecho se posiciona en el cursor, no en la barra.
   `width` explícito y no sólo `min-width`: en `position: fixed` la caja no
   tiene contenedor que la acote, así que los items con `width: 100%` se
   resuelven contra la ventana y el menú se estiraba a lo ancho de la pantalla
   según dónde se hiciera click. Un ancho fijo deja los items midiendo contra
   el menú, que es lo que se ve siempre igual. */
.dk-usermenu-fixed { position: fixed; right: auto; width: 236px; }
.dk-usermenu-sep { border-top: 1px solid var(--dk-line-soft); margin: 4px 6px; }
.dk-avatar { border-radius: 50%; }

/* ---------- tipografía: una sola familia, Inter ---------- */
.dk h1, .dk h2, .dk h3 { margin: 0; }
.dk-h1 { font-weight: 700; font-size: 27px; line-height: 1.18; letter-spacing: -0.024em; }
.dk-h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.011em; }
.dk-h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.008em; }
.dk-sub { color: var(--dk-ink-muted); font-size: 12.5px; margin: 4px 0 0; line-height: 1.5; }
.dk-viewhead { margin-bottom: 18px; }
.dk-viewhead-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dk-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.dk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--dk-ink-muted); margin-top: 5px; }
.dk-meta b { font-weight: 600; color: var(--dk-ink); }

/* ---------- capa de contenido: materiales estándar, sin vidrio ---------- */

/* Franja de stats: un contenedor agrupado, como el "inset grouped" de Apple. */
.dk-stats {
  display: grid; background: var(--dk-surface);
  border: 1px solid var(--dk-line); border-radius: var(--dk-r-lg);
  overflow: hidden; margin-bottom: 16px; box-shadow: var(--dk-elev-1);
}
.dk-stats.cols-5 { grid-template-columns: repeat(5, 1fr); }
.dk-stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dk-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dk-stat {
  padding: 15px 17px; text-align: left; background: transparent; border: 0;
  font: inherit; border-radius: 0; color: inherit;
  /* Un <button> centra su contenido verticalmente. Con una etiqueta de una línea
     el contenido mide 51px y con una de dos líneas 69px, así que la columna que
     envuelve sube su número 9px y la franja se ve en escalera. Alineando arriba,
     el número y la etiqueta arrancan siempre a la misma altura. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
.dk-stat + .dk-stat { border-left: 1px solid var(--dk-line-soft); }
.dk-stat[data-clickable] { cursor: pointer; transition-property: background-color; transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out); }
.dk-stat[data-clickable]:hover { background: rgba(0, 40, 64, 0.04); }
/* el anillo se dibuja hacia adentro porque la franja recorta las esquinas */
.dk-stat:focus-visible { outline: 2px solid var(--dk-navy); outline-offset: -3px; }
.dk-stat-num { font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.024em; font-variant-numeric: tabular-nums; }
.dk-stat-num.is-risk { color: var(--dk-risk); }
.dk-stat-num.is-watch { color: var(--dk-watch); }
.dk-stat-num.is-ok { color: var(--dk-ok); }
.dk-stat-label {
  font-size: 12px; color: var(--dk-ink-muted); margin-top: 6px;
  /* Reserva dos líneas en todas las columnas: la franja conserva la misma altura
     aunque una etiqueta no llegue a envolver, y las etiquetas quedan alineadas. */
  line-height: 1.5; min-height: 3em;
  /* Reparte el corte en partes iguales en vez de dejar una palabra huérfana. */
  text-wrap: balance;
}

/* Paneles: contenedor agrupado, radio grande, sombra apenas insinuada. */
.dk-panel {
  background: var(--dk-surface); border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-lg); margin-bottom: 14px;
  /* Sin sombra en reposo (dirección visual 2026-10-22): solo lo flotante eleva. */
  overflow: hidden;
}
.dk-panel-head {
  padding: 13px 17px; border-bottom: 1px solid var(--dk-line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.dk-panel-body { padding: 16px 17px; overflow-x: clip; }
/* El ancho lo pone `overflow-x` de la hoja, no el de cada celda. */
.dk-panel-body.flush { padding: 0; overflow-x: clip; }

/* ---------- el semáforo en el tablero ---------- */
/* La cuenta de la etapa va DENTRO del encabezado, en el hueco que ya había entre
   el nombre y el número. No agrega una fila: las cinco cabeceras quedan a la misma
   altura, que es lo que se rompió cuando esto era un bloque hermano. */
.dk-col-semaforo {
  display: flex; align-items: center; gap: 5px; flex: 1 1 auto;
  justify-content: flex-end; min-width: 0;
}
.dk-col-semaforo-txt { font-size: 10.5px; font-weight: 600; color: var(--dk-ink-muted); white-space: nowrap; }
.dk-col-semaforo[data-estado="due_soon"] .dk-col-semaforo-txt { color: var(--dk-watch); }
.dk-col-semaforo[data-estado="overdue"] .dk-col-semaforo-txt { color: var(--dk-risk); }
.dk-col-semaforo[data-estado="on_track"] .dk-col-semaforo-txt { color: var(--dk-ink-faint); }

/* El período de la etapa en curso. Va en su propia línea, chico y sin color: es el
   número que responde «¿cuánto lleva?», no un segundo semáforo compitiendo con el
   de arriba. Cuando la etapa está vencida, el atraso sí lleva el color del riesgo. */
.dk-card-periodo {
  margin-top: 3px; font-size: 11px; color: var(--dk-ink-faint);
  font-variant-numeric: tabular-nums;
  /* Una sola línea, siempre: si el período se parte en dos renglones, la tarjeta
     crece y la columna deja de alinearse. Es un dato corto y no admite dos
     renglones — si no entra, se recorta. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-card-periodo[data-estado="due_soon"] { color: var(--dk-watch); }
.dk-card-periodo[data-estado="overdue"] { color: var(--dk-risk); font-weight: 600; }

/* ---------- relevamiento del perfil del puesto ----------
   El aviso va debajo del campo mientras se escribe, y no en la ficha: ahí ya no se
   corrige. El color acompaña al texto, nunca lo reemplaza. */
.dk-relev { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; }
.dk-relev-txt { display: block; }
.dk-relev[data-nivel="completo"] { color: var(--dk-ink-muted); }
.dk-relev[data-nivel="incompleto"] { color: var(--dk-watch); font-weight: 600; }
.dk-relev[data-nivel="generico"] { color: var(--dk-watch); font-weight: 600; }
.dk-relev[data-nivel="vacio"] { color: var(--dk-ink-faint); }

/* ---------- iconos: Rune Icons ----------
   El color de los glifos lo decide `currentColor` (ver `recolor` en icons.tsx),
   NO una variable: el <use> abre un ámbito de sombra y no hereda las variables
   del lugar donde se usa. Con currentColor el icono toma el color del texto que
   lo rodea, así que acompaña solo a los estados de hover y a la barra activa.
   Acá no hace falta declarar nada para los iconos. */
.dk-icon { flex: none; display: block; overflow: visible; }
/* El estilo de vidrio ya trae su propio degradado: `color` no lo toca. La
   sombra sí, para despegarla de la superficie en vez de dejar un recorte. */
.dk-icon[data-style="glass"] { filter: drop-shadow(0 1px 2px rgba(0, 26, 44, 0.16)); }

/* ---------- elección de estilo ---------- */
/* No son cinco botones con un nombre: son cinco muestras del resultado. La
   persona elige viendo, no leyendo. */
.dk-stylepick {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.dk-styleopt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 13px 11px; text-align: left; cursor: pointer;
  background: var(--dk-surface); color: var(--dk-ink);
  border: 1px solid var(--dk-line); border-radius: var(--dk-r-md);
  transition-property: background-color, border-color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-styleopt:hover { border-color: var(--dk-navy); }
.dk-styleopt:active { transform: scale(0.98); }
.dk-styleopt[data-on] { border-color: var(--dk-teal); background: var(--dk-ok-soft); }
.dk-styleopt-ico {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  min-height: 24px; color: var(--dk-ink);
}
.dk-styleopt-label { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.dk-styleopt-hint { font-size: 11px; color: var(--dk-ink-faint); line-height: 1.4; }

/* ---------- notas del consultor ---------- */
/* Un bloque, tres lugares: cliente, tarea y candidato. La lista muestra la más nueva
   arriba —una nota se escribe para leerla enseguida— y el sello «Interna» está siempre
   junto a la fecha: es la diferencia entre lo que el cliente puede ver y lo que no. */
.dk-notas { margin-top: 12px; display: grid; gap: 7px; }
.dk-notas textarea { width: 100%; resize: vertical; min-height: 62px; }
.dk-notas-accion { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dk-ink-muted); cursor: pointer; }
.dk-notas-lista { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.dk-nota { padding: 8px 10px; border-radius: var(--dk-r-sm); background: rgba(0, 40, 64, 0.035); border-left: 2px solid var(--dk-line); }
.dk-nota[data-interna="si"] { border-left-color: var(--dk-watch); }
.dk-nota-cuerpo { margin: 0; font-size: 12.5px; }
.dk-nota-pie { margin: 4px 0 0; font-size: 11px; color: var(--dk-ink-faint); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dk-nota-sello {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--dk-watch); border: 1px solid currentColor; border-radius: var(--dk-r-xs); padding: 0 4px;
}

/* ---------- acciones rápidas de una tarea ---------- */
.dk-acciones-tarea { display: grid; gap: 6px; justify-items: end; }
.dk-desplegable {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end;
  padding: 6px 8px; border-radius: var(--dk-r-sm); background: rgba(0, 40, 64, 0.05);
  max-width: 340px;
}
.dk-chip-btn {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--dk-line); background: var(--dk-surface); color: var(--dk-navy);
  border-radius: var(--dk-r-sm); padding: 3px 9px;
}
.dk-chip-btn:hover { border-color: var(--dk-navy); }
.dk-chip-btn.on { background: var(--dk-navy); color: var(--dk-surface); border-color: var(--dk-navy); }
.dk-desplegable-nota { font-size: 10.5px; color: var(--dk-ink-faint); flex-basis: 100%; text-align: right; }
.dk-extender { display: flex; gap: 6px; align-items: center; }
.dk-extender .dk-select { flex: 1; }

/* ---------- semáforo de etapas del pipeline ---------- */
/* El color nunca va solo: cada luz trae su punto, su texto y el motivo en el title. La
   clase .dk-sr existe solo para lectores de pantalla y no se ve. */
.dk-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dk-semaforo { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dk-semaforo-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dk-semaforo-txt { font-size: 11px; font-weight: 600; }
.dk-semaforo[data-estado="on_track"] .dk-semaforo-punto { background: var(--dk-ok); }
.dk-semaforo[data-estado="on_track"] .dk-semaforo-txt { color: var(--dk-ink-muted); }
.dk-semaforo[data-estado="due_soon"] .dk-semaforo-punto { background: var(--dk-watch); }
.dk-semaforo[data-estado="due_soon"] .dk-semaforo-txt { color: var(--dk-watch); }
.dk-semaforo[data-estado="overdue"] .dk-semaforo-punto { background: var(--dk-risk); }
.dk-semaforo[data-estado="overdue"] .dk-semaforo-txt { color: var(--dk-risk); }

/* El recorrido, etapa por etapa, con su período. */
.dk-recorrido { display: grid; gap: 9px; }
.dk-recorrido-resumen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-recorrido-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dk-paso {
  display: grid; grid-template-columns: 78px 1fr; gap: 9px; align-items: baseline;
  font-size: 12px; color: var(--dk-ink-muted);
  padding-bottom: 4px; border-bottom: 1px solid var(--dk-line-soft);
}
.dk-paso:last-child { border-bottom: 0; }
.dk-paso-txt strong { color: var(--dk-ink); font-weight: 600; }
/* La etapa vencida se marca con una barra a la izquierda, no solo con el punto. */
.dk-paso[data-estado="overdue"] { box-shadow: inset 3px 0 0 var(--dk-risk); padding-left: 7px; }
.dk-paso[data-estado="due_soon"] { box-shadow: inset 3px 0 0 var(--dk-watch); padding-left: 7px; }

/* ---------- notas internas del consultor (entrevistadores) ---------- */
/* El sello «Solo consulta» va siempre visible arriba del bloque: alguien que tome un
   pantallazo tiene que ver que eso no va al cliente. Es el límite de la frontera, ya
   que el cliente no entra a la consola. */
.dk-interno {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--dk-ink-faint);
  border: 1px dashed var(--dk-line); border-radius: var(--dk-r-pill);
  padding: 2px 9px; white-space: nowrap;
}
.dk-iv { padding: 10px 0; border-bottom: 1px solid var(--dk-line-soft); }
.dk-iv:last-of-type { border-bottom: 0; }
.dk-iv-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dk-iv-rol { font-size: 12px; font-weight: 600; color: var(--dk-navy); }
.dk-iv-nombre { font-size: 13px; color: var(--dk-ink); }
.dk-iv-notas { display: grid; gap: 9px; margin-top: 9px; }
.dk-iv-nota { border-left: 2px solid var(--dk-line); padding-left: 10px; }
.dk-iv-nota-meta {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11px; color: var(--dk-ink-faint); margin-bottom: 2px;
}
.dk-iv-nota p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dk-ink); }

/* ---------- armador: una fila por sección de habilidades ---------- */
/* Cuatro columnas, pero SIN huecos: una rejilla normal reserva en cada fila el alto
   de la sección más alta (una fila quedaba en 433px por «Nivel de experiencia» y las
   otras dos la desperdiciaban). `grid-auto-flow: dense` no basta: el hueco es de alto,
   no de flujo. Columnas independientes con `columns`, que es masonry de verdad. */
.dk-palette-ancha .dk-secs {
  /* column-fill: balance es el default con altura automática y no cambia nada medido
     (las columnas quedan en 545/725/721/471). El desbalance es el precio de no dejar
     huecos, y es una concesión consciente. */
  columns: 4; column-gap: 8px; padding: 0 10px 12px;
}
.dk-palette-ancha .dk-sec {
  break-inside: avoid; page-break-inside: avoid; /* la sección nunca se parte entre columnas */
  margin-bottom: 8px; display: inline-block; width: 100%; /* required por columns */
}

/* El ranking se queda con el ancho flexible y el perfil con el tope: al revés, la
   `1fr` se la comía el bloque corto y la lista larga quedaba en 113px. */
.dk-resp-abajo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 330px); gap: 12px; align-items: start; }
/* min-width:0 es lo que deja que la 1fr encoja: sin él, el ancho mínimo del contenido
   (una fila de match) impide que la columna flexible crezca y ambas quedan chicas. */
.dk-resp-lista { min-width: 0; }
.dk-resp-lado { min-width: 0; position: sticky; top: 52px; }
.dk-resp-lista, .dk-resp-lista .dk-panel { min-width: 0; }
.dk-resp-lista .dk-panel { display: flex; flex-direction: column; min-height: 0; }
.dk-resp-lista .dk-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: calc(100vh - 190px); }

/* La fila de una sección, con su condición y su peso. */
.dk-sec {
  border: 1px solid var(--dk-line-soft); border-radius: var(--dk-r-md);
  background: var(--dk-surface); padding: 9px 11px 10px;
}
.dk-sec[data-bucket="none"] { background: transparent; border-style: dashed; }
.dk-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dk-sec-titulo { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.dk-sec-cat { font-size: 12.5px; font-weight: 600; color: var(--dk-navy); }
.dk-sec[data-bucket="none"] .dk-sec-cat { color: var(--dk-ink-muted); font-weight: 500; }
.dk-sec-n { font-size: 11.5px; color: var(--dk-ink-faint); }
.dk-sec-controles { display: inline-flex; align-items: center; gap: 8px; }
/* La bolsa de la sección: dos opciones, y la elegida se ve marcada. Sin esto el peso al
   lado parece el control y la bolsa el dato, cuando es al revés: la bolsa decide si la
   sección es condición o preferencia, y el peso cuánto mueve el puntaje. */
.dk-seg { display: inline-flex; border: 1px solid var(--dk-line-soft); border-radius: var(--dk-r-pill); overflow: hidden; }
.dk-seg-opt {
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: -0.002em;
  background: transparent; border: 0; color: var(--dk-ink-muted);
  padding: 3px 10px; cursor: pointer;
  transition: background-color var(--dk-dur-fast) var(--dk-ease), color var(--dk-dur-fast) var(--dk-ease);
}
.dk-seg-opt + .dk-seg-opt { border-left: 1px solid var(--dk-line-soft); }
.dk-seg-opt:hover { background: rgba(0, 40, 64, 0.06); }
.dk-seg-opt[data-on] { background: var(--dk-navy); color: var(--dk-paper); }
.dk-seg-opt[data-on]:hover { background: var(--dk-navy); }
.dk-sec[data-bucket="must"] .dk-sec-cat { color: var(--dk-navy); }
.dk-sec-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* ---------- contacto del cliente, en la cabecera de su pipeline ---------- */
/* Una línea de dato, no una barra: va a la derecha de la cabecera, junto al nombre del
   cliente. El nombre es la puerta a la ficha —que llega con el pipeline al lado—; el
   resto se lee o se copia. */
.dk-contacto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-size: 12.5px; color: var(--dk-ink-muted);
}
.dk-contacto-fila { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.dk-contacto-quien {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dk-navy);
  background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--dk-dur-fast) var(--dk-ease), border-color var(--dk-dur-fast) var(--dk-ease);
}
.dk-contacto-quien:hover { color: var(--dk-teal); border-bottom-color: var(--dk-teal); }
.dk-contacto-puesto { color: var(--dk-ink-faint); }
.dk-contacto-dato { font-variant-numeric: tabular-nums; }
.dk-contacto-horario { display: inline-flex; align-items: center; gap: 5px; color: var(--dk-ink-faint); }

/* ---------- panel del pipeline, al lado de la ficha del cliente ----------
   Vive en el mismo `.dk-side-pane` que el documento fuente del candidato: hereda
   superficie, ancho máximo, el corte en el breakpoint de 920px y la impresión. */
.dk-pipe-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--dk-line-soft);
}
.dk-pipe-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dk-ink-faint);
}
.dk-pipe-title { font-size: 13px; font-weight: 600; color: var(--dk-navy); margin-top: 2px; }
.dk-pipe-meta { font-size: 12px; color: var(--dk-ink-muted); white-space: nowrap; }
.dk-pipe-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 22px; }
.dk-pipe-req { padding: 11px 0; border-bottom: 1px solid var(--dk-line-soft); }
.dk-pipe-req:last-child { border-bottom: 0; padding-bottom: 0; }
.dk-pipe-req-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dk-pipe-req-title { font-size: 13px; font-weight: 600; color: var(--dk-navy); }
.dk-pipe-group { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.dk-pipe-stage {
  flex: 0 0 auto; width: 116px; font-size: 11px; color: var(--dk-ink-faint);
  text-transform: uppercase; letter-spacing: .04em;
}
.dk-pipe-nombres { display: inline-flex; flex-wrap: wrap; gap: 3px 12px; }
.dk-pipe-nombre {
  font: inherit; font-size: 13px; color: var(--dk-navy); background: none; border: 0;
  padding: 0; cursor: pointer; border-bottom: 1px solid transparent;
  transition: color var(--dk-dur-fast) var(--dk-ease), border-color var(--dk-dur-fast) var(--dk-ease);
}
.dk-pipe-nombre:hover { color: var(--dk-teal); border-bottom-color: var(--dk-teal); }
.dk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.dk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }

/* ---------- tablas: filas con esquinas, separadores cortos ---------- */
.dk-table-wrap { overflow-x: auto; padding: 0 8px; }
.dk-table {
  width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
.dk-table th {
  text-align: left; font-weight: 600; font-size: 12px; color: var(--dk-ink-muted);
  padding: 10px 9px; border-bottom: 1px solid var(--dk-line-soft);
  background: transparent; white-space: nowrap;
}
.dk-table td {
  padding: 12px 9px; border-bottom: 1px solid var(--dk-line-soft);
  vertical-align: top;
}
.dk-table tbody tr:last-child td { border-bottom: 0; }
.dk-table tbody tr { transition-property: background-color; transition-duration: var(--dk-dur-instant); }
.dk-table tbody tr td { transition-property: background-color; transition-duration: var(--dk-dur-instant); }
.dk-table tbody tr:hover td { background: rgba(0, 40, 64, 0.045); }
.dk-table tbody tr:hover td:first-child { border-top-left-radius: var(--dk-r-sm); border-bottom-left-radius: var(--dk-r-sm); }
.dk-table tbody tr:hover td:last-child { border-top-right-radius: var(--dk-r-sm); border-bottom-right-radius: var(--dk-r-sm); }
.dk-table tbody tr[data-clickable] { cursor: pointer; }
.dk-num { text-align: right; }

/* ---------- docket: la barra de severidad sigue siendo el ancla del riesgo ---------- */
.dk-risk {
  position: relative; padding: 13px 17px 13px 21px;
  border-bottom: 1px solid var(--dk-line-soft);
  transition-property: background-color; transition-duration: var(--dk-dur-instant);
}
.dk-risk:last-child { border-bottom: 0; }
.dk-risk::before {
  content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 4px;
  border-radius: var(--dk-r-pill); background: var(--dk-line);
}
.dk-risk.sev-risk::before { background: var(--dk-risk); }
.dk-risk.sev-watch::before { background: var(--dk-watch); }
.dk-risk.sev-ok::before { background: var(--dk-ok); }
.dk-risk[data-clickable] { cursor: pointer; }
.dk-risk[data-clickable]:hover { background: rgba(0, 40, 64, 0.045); }
.dk-risk-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dk-risk-title { font-weight: 600; }

/* ---------- badges: cápsula, con punto de estado ---------- */
.dk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--dk-line); padding: 1px 9px;
  border-radius: var(--dk-r-pill);
  background: rgba(0, 40, 64, 0.05); color: var(--dk-ink-muted); white-space: nowrap;
}
.dk-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dk-badge.is-risk { color: var(--dk-risk); border-color: rgba(163, 43, 34, 0.28); background: var(--dk-risk-soft); }
.dk-badge.is-watch { color: var(--dk-watch); border-color: rgba(138, 90, 0, 0.28); background: var(--dk-watch-soft); }
.dk-badge.is-ok { color: var(--dk-ok-text); border-color: rgba(0, 122, 135, 0.28); background: var(--dk-ok-soft); }

/* ---------- marcadores IA / humano ---------- */
.dk-ai {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--dk-navy);
  border: 1px dashed var(--dk-navy-700); padding: 1px 9px;
  border-radius: var(--dk-r-pill);
  background: rgba(1, 58, 94, 0.05); white-space: nowrap;
}
.dk-human {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--dk-ok-text);
  border: 1px solid rgba(0, 122, 135, 0.28); padding: 1px 9px;
  border-radius: var(--dk-r-pill);
  background: var(--dk-ok-soft); white-space: nowrap;
}
.dk-conf {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  color: var(--dk-navy); background: rgba(0, 40, 64, 0.06);
  border: 1px solid var(--dk-line); padding: 1px 9px; border-radius: var(--dk-r-pill);
}

/* ---------- botones: cápsula, como los controles del sistema ---------- */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; border-radius: var(--dk-r-pill);
  background: rgba(0, 40, 64, 0.06); color: var(--dk-navy);
  padding: 8px 15px; cursor: pointer; min-height: 36px;
  transition-property: background-color, color, transform, box-shadow;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-btn:hover { background: rgba(0, 40, 64, 0.11); }
.dk-btn:active { transform: scale(0.96); }
.dk-btn.primary {
  background: var(--dk-navy); color: var(--dk-paper);
  box-shadow: var(--dk-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.dk-btn.primary:hover { background: var(--dk-navy-700); }
.dk-btn.accent {
  /* Dirección visual 2026-10-22: el acento nunca rellena botones — navy. */
  background: var(--dk-navy); color: var(--dk-paper);
  box-shadow: var(--dk-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.dk-btn.accent:hover { background: var(--dk-navy-700); }
.dk-btn.danger { background: rgba(163, 43, 34, 0.10); color: var(--dk-risk); }
.dk-btn.danger:hover { background: var(--dk-risk); color: #fff; }
.dk-btn.ghost { background: transparent; color: var(--dk-ink-muted); }
.dk-btn.ghost:hover { background: rgba(0, 40, 64, 0.07); color: var(--dk-navy); }
.dk-btn.small { padding: 5px 12px; font-size: 12px; min-height: 30px; }
.dk-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.dk-btn:disabled:hover { background: rgba(0, 40, 64, 0.06); }
.dk-btn.primary:disabled:hover { background: var(--dk-navy); }

.dk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; background: transparent;
  color: var(--dk-ink-muted); cursor: pointer; border-radius: 50%; flex: none;
  transition-property: background-color, color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-iconbtn:hover { background: rgba(0, 40, 64, 0.08); color: var(--dk-navy); }
.dk-iconbtn:active { transform: scale(0.94); }

/* ---------- formularios: campos rellenos, foco con anillo ---------- */
.dk-input, .dk-select, .dk-textarea {
  font: inherit; font-size: 13px; color: var(--dk-navy);
  background: rgba(0, 40, 64, 0.05); border: 1px solid transparent;
  border-radius: var(--dk-r-md); padding: 9px 12px; width: 100%; min-height: 36px;
  transition-property: background-color, box-shadow;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-input:hover, .dk-select:hover, .dk-textarea:hover { background: rgba(0, 40, 64, 0.08); }
.dk-input:focus, .dk-select:focus, .dk-textarea:focus {
  background: var(--dk-surface); box-shadow: 0 0 0 3px rgba(0, 122, 135, 0.24);
}
.dk-textarea { min-height: 88px; resize: vertical; line-height: 1.55; border-radius: var(--dk-r-md); }
.dk-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dk-field-label { font-size: 12px; font-weight: 600; color: var(--dk-ink-muted); letter-spacing: -0.004em; }
.dk-field-hint { font-size: 11.5px; color: var(--dk-ink-faint); line-height: 1.45; }
/* Error de un campo: dice qué falta, no que algo esté mal. */
.dk-field-error { font-size: 11.5px; line-height: 1.45; font-weight: 600; color: var(--dk-risk); }
.dk-input[aria-invalid="true"], .dk-select[aria-invalid="true"] {
  border-color: var(--dk-risk);
  box-shadow: inset 0 0 0 1px var(--dk-risk);
}
.dk-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.dk-filters > * { min-width: 152px; }
.dk-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.dk-check input { margin: 3px 0 0; accent-color: var(--dk-teal); width: 16px; height: 16px; }

/* ---------- control segmentado: pista en cápsula, pulgar elevado ---------- */
.dk-seg {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 16px; flex-wrap: wrap;
  background: rgba(0, 40, 64, 0.07); border: 0; border-radius: var(--dk-r-pill);
}
.dk-seg button {
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  background: transparent; color: var(--dk-ink-muted);
  border: 0; border-radius: var(--dk-r-pill);
  padding: 8px 15px; cursor: pointer; min-height: 32px;
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-seg button:hover { color: var(--dk-navy); }
.dk-seg button:active { transform: scale(0.97); }
.dk-seg button[aria-pressed="true"] {
  background: var(--dk-surface); color: var(--dk-navy);
  box-shadow: var(--dk-elev-1);
}

/* ---------- salud del cliente ---------- */
.dk-health {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 17px;
  border-bottom: 1px solid var(--dk-line-soft);
  transition-property: background-color; transition-duration: var(--dk-dur-instant);
}
.dk-health:last-child { border-bottom: 0; }
.dk-health[data-clickable] { cursor: pointer; }
.dk-health[data-clickable]:hover { background: rgba(0, 40, 64, 0.045); }
.dk-health .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.dk-health .dot.h-ok { background: var(--dk-ok); }
.dk-health .dot.h-watch { background: var(--dk-watch); }
.dk-health .dot.h-risk { background: var(--dk-risk); }
.dk-health-name { font-weight: 600; font-size: 13.5px; letter-spacing: -0.008em; }
.dk-health-note { font-size: 12px; color: var(--dk-ink-muted); line-height: 1.45; }

/* ---------- franja de privacidad: superficie de confianza ---------- */
.dk-privacy {
  background: var(--dk-navy); color: var(--dk-paper);
  padding: 15px 17px; margin-bottom: 14px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px;
}
.dk-privacy strong { font-weight: 600; }
.dk-privacy .dk-sub { color: rgba(250, 249, 246, 0.72); }
.dk-privacy svg { color: var(--dk-teal-600); flex: none; margin-top: 1px; }

/* ---------- barras ---------- */
.dk-bar-row { display: grid; grid-template-columns: 140px 1fr 62px; gap: 10px; align-items: center; padding: 7px 0; font-size: 12.5px; }
.dk-bar-track { height: 10px; background: rgba(0, 40, 64, 0.07); border: 0; border-radius: var(--dk-r-pill); overflow: hidden; }
.dk-bar-fill { height: 100%; background: var(--dk-navy); border-radius: var(--dk-r-pill); }
.dk-bar-fill.ok { background: var(--dk-ok); }
.dk-bar-fill.watch { background: var(--dk-watch); }
.dk-bar-fill.risk { background: var(--dk-risk); }
.dk-bar-val { text-align: right; color: var(--dk-ink-muted); display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
/* El denominador del corte, chico y al lado del número: sin él «48» no dice
   sobre cuántas empresas está calculado. */
.dk-bar-n { font-size: 10.5px; color: var(--dk-ink-faint); font-weight: 500; }

/* ---------- tablero ---------- */
.dk-kanban { display: grid; gap: 12px; }
.dk-kanban.cols-5 { grid-template-columns: repeat(5, minmax(170px, 1fr)); }
.dk-col {
  background: rgba(0, 40, 64, 0.045); border: 1px solid transparent;
  border-radius: var(--dk-r-lg); min-height: 110px;
  transition-property: background-color, box-shadow;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-col[data-over="true"] { background: var(--dk-ok-soft); box-shadow: 0 0 0 2px rgba(0, 122, 135, 0.35); }
.dk-col-head {
  padding: 10px 13px; font-weight: 600; font-size: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  color: var(--dk-ink-muted);
  /* Alto fijo: el encabezado de las cinco columnas tiene que alinearse aunque una
     tenga la cuenta y otra no. Sin esto, el título baila según el contenido. */
  min-height: 38px;
}
.dk-col-body { padding: 0 9px 9px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.dk-card {
  background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: var(--dk-r-md);
  padding: 10px 11px; font-size: 12.5px; text-align: left; width: 100%; font: inherit;
  box-shadow: var(--dk-elev-1);
  transition-property: box-shadow, transform, border-color;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-card:hover { box-shadow: var(--dk-elev-2); }
.dk-card:active { transform: scale(0.99); }
/* El asa de arrastre es sólo la parte de arriba: el cursor de "agarrar" tiene que
   estar donde el arrastre realmente arranca. Sobre el <select> el gesto es del
   control, así que ahí el cursor no promete nada. */
.dk-card-grip { cursor: grab; user-select: none; }
.dk-card-grip:active { cursor: grabbing; }
/* El control que abre la ficha del candidato. Antes era un `<button>` con
   estilos en línea; ahora es un `div` con `role="button"` porque el botón de la
   búsqueda va adentro y dos botones anidados son HTML inválido (ver
   PipelineCard.tsx). Los estilos que tenía en línea viven acá.

   El anillo de foco NO se declara: lo pone la regla global de `.dk
   [tabindex]:focus-visible`, que ya cubre todo control con tabindex. Declararlo
   otra vez acá sólo Ganaría o perdería según el orden, y una regla que hay que
   mantener en dos lados es una regla que algún día se contradice. */
.dk-card-open {
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  color: inherit; display: block; border-radius: var(--dk-r-sm);
}
.dk-card[data-dragging="true"] { opacity: 0.4; transform: scale(0.98); }
.dk-card-name { font-weight: 600; letter-spacing: -0.008em; }
.dk-card-sub {
  font-size: 11.5px; color: var(--dk-ink-muted); margin-top: 3px;
  /* Una sola línea, como el período. A 151px de ancho, el código de la búsqueda
     más el semáforo se partían en dos renglones según el nombre, y la tarjeta
     medía 166 o 148px: la columna perdía la alineación justo por esto. */
  white-space: nowrap; overflow: hidden;
  display: flex; align-items: center; gap: 6px;
}
/* El código de la búsqueda no cede NUNCA: es lo que se dicta por teléfono y lo que se
   pega en el mail, y «V9R…» no sirve para ninguna de las dos cosas. La línea a 151px es
   corta, así que lo que cede es la palabra del semáforo —la luz de color y el title
   siguen diciendo el estado— y el código conserva sus 7 caracteres. */
.dk-card-sub > .dk-ref { flex: none; }
.dk-card-semaforo { margin-left: auto; min-width: 0; overflow: hidden; }
.dk-card-semaforo .dk-semaforo-txt { overflow: hidden; text-overflow: ellipsis; }
.dk-card-move { margin-top: 8px; }
.dk-card-move select {
  font: inherit; font-size: 11.5px; width: 100%; border: 1px solid transparent;
  background: rgba(0, 40, 64, 0.06); padding: 5px 8px; border-radius: var(--dk-r-sm); color: var(--dk-navy);
}

/* ---------- criterios ---------- */
/* El builder es una sola columna: las secciones arriba a todo el ancho y los
   resultados abajo. Medido: con la paleta y los resultados lado a side, la columna
   del ranking se quedaba en 133px —no entra ni un nombre— porque el viewport no da
   para cuatro columnas verticales. Arriba-abajo sí: las secciones usan todo el ancho
   para leerse, y el ranking conserva el suyo. */
.dk-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.dk-palette {
  background: var(--dk-surface); border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-lg); box-shadow: var(--dk-elev-1);
}
.dk-palette-cat { padding: 12px 13px 5px; font-size: 12px; font-weight: 600; color: var(--dk-ink-muted); }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 13px 13px; }
.dk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  background: rgba(0, 40, 64, 0.06); border: 1px solid transparent;
  border-radius: var(--dk-r-pill);
  padding: 4px 5px 4px 10px; cursor: grab;
  transition-property: background-color, box-shadow, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-chip:hover { background: rgba(0, 40, 64, 0.11); }
.dk-chip:active { transform: scale(0.97); }
.dk-chip-add {
  border: 0; background: var(--dk-navy); color: var(--dk-paper); border-radius: 50%;
  width: 22px; height: 22px; line-height: 1; cursor: pointer; font-weight: 700; font-size: 13px;
  transition-property: background-color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-chip-add:hover { background: var(--dk-teal); }
.dk-chip-add:active { transform: scale(0.92); }
/* Chip fuera de alcance: la categoría ya está ocupada por otra opción, así que no se
   arrastra ni se agrega. Dice por qué —desaparecer, o fallar al soltarlo, sería peor. */
.dk-chip[data-blocked] {
  background: transparent; border-color: var(--dk-line-soft);
  color: var(--dk-ink-faint); cursor: not-allowed; gap: 5px;
}
.dk-chip[data-blocked]:hover { background: transparent; }
.dk-chip[data-blocked]:active { transform: none; }
/* Chip que ya está en el perfil: no es un error, es un dato. Se ve activo pero
   atenuado, y sin «+» ni manija porque no se agrega dos veces. */
.dk-chip[data-placed] {
  background: rgba(0, 122, 135, 0.09); border-color: rgba(0, 122, 135, 0.32);
  color: var(--dk-navy); cursor: default; gap: 5px;
}
.dk-chip[data-placed]:hover { background: rgba(0, 122, 135, 0.09); }
.dk-chip[data-placed]:active { transform: none; }
.dk-chip[data-placed] .dk-chip-why { color: var(--dk-ink-muted); }
.dk-chip-why { font-size: 11px; }
.dk-drop {
  border: 1.5px dashed var(--dk-line); border-radius: var(--dk-r-lg);
  padding: 13px; min-height: 94px; background: var(--dk-surface);
  transition-property: border-color, background-color, box-shadow;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-drop.over {
  border-color: var(--dk-teal); border-style: solid; background: var(--dk-ok-soft);
  box-shadow: 0 0 0 3px rgba(0, 122, 135, 0.18);
}
.dk-drop-title { font-weight: 600; font-size: 12.5px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dk-addrow { display: flex; gap: 7px; margin-top: 9px; align-items: center; }
.dk-addrow select {
  flex: 1; min-width: 0; font: inherit; font-size: 12px; color: var(--dk-navy);
  background: rgba(0, 40, 64, 0.06); border: 1px solid transparent;
  border-radius: var(--dk-r-pill); padding: 7px 11px; cursor: pointer;
}
.dk-crit {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 40, 64, 0.06); border: 1px solid transparent;
  border-radius: var(--dk-r-pill);
  padding: 3px 4px 3px 10px; font-size: 12px; font-weight: 500; margin: 0 6px 6px 0;
}
.dk-crit.is-exclude { border-color: rgba(163, 43, 34, 0.32); background: var(--dk-risk-soft); }
.dk-weight { display: inline-flex; align-items: center; gap: 2px; }
.dk-weight button {
  border: 0; background: rgba(0, 40, 64, 0.07); border-radius: 50%;
  width: 22px; height: 22px; cursor: pointer; font-size: 12px; line-height: 1; color: var(--dk-navy);
  transition-property: background-color, transform;
  transition-duration: var(--dk-dur-fast); transition-timing-function: var(--dk-ease-out);
}
.dk-weight button:hover { background: rgba(0, 40, 64, 0.14); }
.dk-weight button:active { transform: scale(0.92); }
.dk-crit-remove {
  border: 0; background: transparent; cursor: pointer; color: var(--dk-ink-muted);
  font-size: 13px; padding: 0 5px; line-height: 1; border-radius: 50%;
}
.dk-crit-remove:hover { color: var(--dk-risk); }
.dk-score { font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.024em; font-variant-numeric: tabular-nums; }
.dk-match {
  border-bottom: 1px solid var(--dk-line-soft); padding: 13px 17px;
  transition-property: background-color; transition-duration: var(--dk-dur-instant);
}
.dk-match:last-child { border-bottom: 0; }
.dk-match[data-clickable] { cursor: pointer; }
.dk-match[data-clickable]:hover { background: rgba(0, 40, 64, 0.045); }
.dk-match-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dk-trace { font-size: 12px; color: var(--dk-ink-muted); margin-top: 5px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.dk-trace code {
  font-family: var(--dk-sans); font-size: 11.5px; font-weight: 600;
  background: rgba(0, 40, 64, 0.06); border: 1px solid transparent;
  padding: 1px 7px; color: var(--dk-navy); border-radius: var(--dk-r-pill);
}
.dk-code {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.55;
  background: var(--dk-navy-900); color: rgba(250, 249, 246, 0.9);
  padding: 15px 17px; overflow-x: auto; white-space: pre; margin: 0;
  border-radius: var(--dk-r-md);
}

/* ---------- redline ---------- */
.dk-redline { display: grid; gap: 8px; font-size: 12.5px; }
.dk-redline del {
  background: var(--dk-risk-soft); color: var(--dk-risk);
  padding: 10px 13px; display: block; border-radius: var(--dk-r-md);
  box-shadow: inset 3px 0 0 var(--dk-risk);
}
.dk-redline ins {
  background: var(--dk-ok-soft); color: var(--dk-navy); text-decoration: none;
  padding: 10px 13px; display: block; border-radius: var(--dk-r-md);
  box-shadow: inset 3px 0 0 var(--dk-teal);
}

/* ---------- vacíos y varios ---------- */
.dk-empty { padding: 30px 20px; text-align: center; color: var(--dk-ink-muted); font-size: 13px; line-height: 1.55; }

/* Esqueleto de carga (ola F1b/F2): barras sobre el tono de línea existente,
   con el radio chico del sistema. Aditivo: no toca ningún estilo previo. */
.dk-skel {
  height: 14px;
  margin: 10px 0;
  border-radius: var(--dk-r-sm);
  background: rgba(0, 40, 64, 0.08);
  animation: dk-pulse 1.2s ease-in-out infinite;
}
@keyframes dk-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-skel { animation: none; }
}
.dk-kv { display: grid; grid-template-columns: 170px 1fr; gap: 7px 14px; font-size: 13px; margin: 0; }
.dk-kv dt { color: var(--dk-ink-muted); font-weight: 600; }
.dk-kv dd { margin: 0; }
.dk-cite { font-size: 11.5px; color: var(--dk-ink-muted); padding-left: 11px; margin-top: 9px; box-shadow: inset 3px 0 0 var(--dk-teal); border-radius: var(--dk-r-pill); }
.dk-note { font-size: 12.5px; color: var(--dk-ink-muted); margin: 10px 0 0; line-height: 1.5; }
.dk-hr { border: 0; border-top: 1px solid var(--dk-line-soft); margin: 15px 0; }
.dk-stack { display: grid; gap: 11px; }
.dk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dk-spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ---------- capas flotantes: superficie SÓLIDA + fondo difuminado ----------
   Regla (HIG, variante regular): "Use for components with significant text
   (alerts, sidebars, popovers)." La hoja NO es translúcida — si lo fuera, la
   tabla de atrás se lee a través del texto y no hay contraste posible. Lo que
   se difumina es el FONDO, no la superficie. */
.dk-scrim {
  position: fixed; inset: 0;
  /* Sin blur disponible, el velo tiene que hacer todo el trabajo solo. */
  background: rgba(0, 26, 44, 0.52);
  z-index: 60; display: flex; padding: 18px;
  /* `overflow-x: hidden` no es cosmético: la hoja entra con
     `translate3d(100%, 0, 0)`, o sea que sale del borde derecho. Con el eje X
     scrolleable, ese desplazamiento hacía aparecer una barra horizontal
     durante la apertura y el cierre. `clip` en vez de `hidden` porque no crea
     contexto de scroll: `hidden` dejaba el velo scrolleable en Y sólo por
     efecto colateral, que es justo lo que rompe el arrastre del cajón. */
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: dk-fade var(--dk-dur-fast) var(--dk-ease-out);
  /* Opacidad y transform los lleva el resorte de motion.ts, no una animación
     CSS: se pueden interrumpir. La animación sólo cubre el montaje inicial,
     momento en que el nodo todavía no existe para el hook. */
}
.dk-scrim.align-right { justify-content: flex-end; padding: var(--dk-gutter); align-items: stretch; }
@keyframes dk-fade { from { opacity: 0 } to { opacity: 1 } }

.dk-modal {
  background: var(--dk-surface);
  width: 100%; max-width: 560px; margin: auto;
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-elev-3);
  display: flex; flex-direction: column; max-height: calc(100vh - 36px);
}
.dk-modal.wide { max-width: 780px; }
/* Elrise de entrada (translateY + scale) lo maneja useModalMotion: sale del
   valor de presentación, se puede cortar a mitad de camino y no hace falta
   esperar 320ms para tocar el contenido. El ::after de abajo es el respaldo
   por si el JS no llega a correr (pre-hidratación, JS roto). */
.dk-modal:not([data-dk-motion="on"]) { animation: dk-rise var(--dk-dur-base) var(--dk-ease-spring); }
@keyframes dk-rise { from { opacity: 0; transform: translateY(10px) scale(0.98) } to { opacity: 1; transform: none } }

/* El diálogo es un contenedor de dos paneles: la ficha a la derecha y, cuando
   corresponde, el documento fuente a la izquierda. Sin documento el contenedor
   queda vacío a la izquierda y la ficha se apoya contra el borde, como antes. */
.dk-drawer {
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: flex-end; gap: var(--dk-gutter); align-items: stretch;
}
.dk-sheet {
  flex: 0 0 auto;
  background: var(--dk-surface);
  /* `width: 100%` y SIN `max-width`: el ancho lo elige la persona arrastrando el
     asa del borde, y el tope vive en `clampWidth` (380–960, contra la ventana).
     Si el tope se deja en CSS, el ancho en línea que escribe el gesto se ve
     recortado en 520 y el arrastre parece no hacer nada. */
  width: 100%; height: 100%;
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-elev-3);
  display: flex; flex-direction: column; overflow: hidden;
  /* `relative` para que el asa de redimensionado se ancle al borde de la hoja
     y no a la ventana. */
  position: relative;
  /* `translate3d` ya crea una capa propia, pero el navegador puede descartar
     la promoción si la lee como temporal: la hoja se vuelve a pintar dentro de
     la página en vez de moverse sola, y ahí aparecen los tirones. Declararla
     como capa es lo que garantiza que el compositor sólo la mueva. */
  will-change: transform;
  /* Una capa que nunca se descarta tiene coste de memoria, así que se le saca
     la propiedad en cuanto se asienta: mientras está quieta no tiene por qué
     reservar nada. `motion.ts` pone y saca este atributo. */
  contain: paint;
  /* El transform lo escribe useSheetMotion en cada frame del gesto: es la
     única forma de que la hoja siga al dedo 1:1 y de que se pueda agarrar a
     mitad de camino. Una transición CSS acá pelearía con el resorte. */
  touch-action: pan-y;
}
/* Ya asentada y quieta: la hoja sale de la capa del compositor. Sin esto la
   promoción de arriba queda viva toda la sesión y cada hoja abierta reserva
   memoria de más. Lo quita `motion.ts` al terminar la entrada. */
.dk-sheet[data-at-rest="1"] { will-change: auto; }
/* Respaldo por si el JS no corre: entra y sale por el mismo lado, que es el
   camino inverso del gesto. Sólo corre antes de que el resorte tome el nodo
   (`data-dk-motion`); después manda el resorte y esta animación se apaga, o
   los dos pelearían por el mismo `transform` frame a frame. */
.dk-sheet:not([data-dk-motion="on"]) { animation: dk-slide var(--dk-dur-base) var(--dk-ease-spring); }
@keyframes dk-slide { from { transform: translateX(calc(100% + 20px)) } to { transform: none } }

/* ---------- bandeja de feedback ----------
   Una lista, no una tabla: un reporte es un párrafo, y una celda de «cantidad
   de palabras» no dice nada. Cada entrada es una tarjeta con su tipo, su estado
   y su texto; las acciones viven abajo, no en una columna a la derecha. */
.dk-fb-lista { display: flex; flex-direction: column; }
.dk-fb {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dk-line);
  display: flex; flex-direction: column; gap: 7px;
}
.dk-fb:last-child { border-bottom: 0; }
/* Lo sin revisar se marca con una barra, no con color de fondo: el fondo
   tiñe y vuelve ilegible un texto largo, y la barra no. */
.dk-fb::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent;
}
.dk-fb { position: relative; }
.dk-fb[data-estado="nuevo"]::before { background: var(--dk-watch); }
.dk-fb[data-estado="en_revision"]::before { background: var(--dk-navy); opacity: 0.4; }
.dk-fb-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* El «de cuándo es» va a la derecha de la fila, no en un renglón propio: es
   metadata, y en un renglón proprio empuja el texto para abajo. */
.dk-fb-cuando { margin-left: auto; font-size: 11.5px; color: var(--dk-ink-faint); }
.dk-fb-texto { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dk-ink); }
/* Lo que se respondió se distingue por el fondo y una barra, no por estar en
   cursiva: un párrafo largo en cursiva no se lee. */
.dk-fb-respuesta {
  background: var(--dk-paperdeep); border-radius: var(--dk-r-sm);
  padding: 9px 11px; font-size: 12.5px;
}
.dk-fb-respuesta p { margin: 3px 0 0; }
.dk-fb-respuesta-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--dk-ink-muted); font-weight: 600;
}
.dk-fb-accion { display: flex; flex-direction: column; gap: 9px; }

/* ---------- el asa que redimensiona ----------
   La zona agarrable es una franja vertical sobre el borde de entrada, no la hoja
   entera: el contenido se scrollea con normalidad y los botones se clickean
   igual. Va pegada al borde y por FUERA del padding, para no comer nada. */
.dk-resize {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 10px;                 /* área de tocar cómoda sin tapar contenido */
  cursor: col-resize;
  touch-action: none;         /* sin esto el navegador scrollea en vez de redimensionar */
  z-index: 2;
  background: none;
  border: 0; padding: 0;
}
/* El asa real es la línea: 2px de teal que aparecen al acercarse y quedan
   mientras se arrastra. Antes era un realce permanente; ahora sólo cuando el
   gesto está a un paso, que es cuando informa algo. */
.dk-resize::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: var(--dk-r-pill);
  background: var(--dk-teal);
  opacity: 0;
  transition: opacity var(--dk-dur-fast) var(--dk-ease-out);
  pointer-events: none;
}
.dk-resize:hover::after,
.dk-resize:focus-visible::after { opacity: 0.55; }
.dk-sheet[data-dragging] .dk-resize::after { opacity: 1; }
/* El foco del asa se ve en el borde, no como un anillo en el medio. */
.dk-resize:focus-visible { outline: none; }

/* Con el dedo no hay hover: el realce aparece al tocar. */
@media (hover: none) {
  .dk-resize::after { opacity: 0.4; }
}

/* Contraste alto: el asa tiene que verse aunque no haya color. */
@media (prefers-contrast: more) {
  .dk-resize::after { background: var(--dk-navy); opacity: 0.8; }
  .dk-resize:hover::after, .dk-resize:focus-visible::after { opacity: 1; }
}

/* El cajón puede traer un panel a su izquierda: el documento fuente (el CV del
   candidato) al lado de la ficha, para comparar sin cambiar de vista. Cada uno
   scrollea por su cuenta. El panel es sólido: no depende del blur del velo. */
.dk-scrim.align-right { gap: var(--dk-gutter); }
.dk-side-pane {
  flex: 1 1 auto; min-width: 0; max-width: 760px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--dk-surface);
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-elev-3);
  animation: dk-fade var(--dk-dur-base) var(--dk-ease-out);
}

.dk-cv-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--dk-line-soft);
}
.dk-cv-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dk-ink-faint);
}
.dk-cv-file { font-size: 13px; font-weight: 600; color: var(--dk-navy); margin-top: 2px; }
.dk-cv-meta { font-size: 12px; color: var(--dk-ink-muted); white-space: nowrap; }

.dk-cv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 22px; }
.dk-cv-legend { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--dk-ink-muted); }
.dk-cv-body code {
  font-family: var(--dk-sans); font-size: 11.5px; font-weight: 600;
  background: rgba(0, 40, 64, 0.06); padding: 1px 7px; color: var(--dk-navy);
  border-radius: var(--dk-r-pill);
}

/* La hoja del CV: se lee como un documento. Inter, sin adornos. */
.dk-cv-doc {
  background: #fff; border: 1px solid var(--dk-line-soft);
  border-radius: var(--dk-r-lg); padding: 22px 24px 26px;
}
.dk-cv-name { font-size: 19px; font-weight: 600; color: var(--dk-ink); }
.dk-cv-titulo { font-size: 13.5px; font-weight: 600; color: var(--dk-ok-text); margin-top: 2px; }
.dk-cv-contacto { font-size: 12px; color: var(--dk-ink-muted); margin-top: 6px; }

.dk-cv-sec { margin-top: 20px; }
.dk-cv-sec h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dk-ink-faint);
}
.dk-cv-sec p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dk-ink); }
.dk-cv-job + .dk-cv-job, .dk-cv-form + .dk-cv-form { margin-top: 18px; }
.dk-cv-rol { font-size: 13px; font-weight: 600; color: var(--dk-ink); }
.dk-cv-job-meta { font-size: 12px; color: var(--dk-ink-muted); margin-top: 1px; }
.dk-cv-bullets { margin: 6px 0 0; padding-left: 18px; }
.dk-cv-bullets li { font-size: 13px; line-height: 1.6; color: var(--dk-ink); }
.dk-cv-bullets li + li { margin-top: 3px; }

/* Lo que el sistema extrajo: una marca de texto, para que el ojo la lea como
   "esto ya está en la ficha" y no como un color decorativo. */
.dk-cv-hit {
  background: var(--dk-ok-soft); color: var(--dk-ok-text);
  padding: 0 2px; border-radius: var(--dk-r-xs); font-weight: 500;
}

/* Blur real, y solo sobre el fondo. Las superficies quedan sólidas siempre:
   por eso no aparecen en este bloque. El radio sale de variables
   (`--dk-blur-*`): las fija la preferencia de Configuración, con los valores
   de abajo como fábrica. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dk-scrim {
    background: rgba(0, 26, 44, 0.30);
    -webkit-backdrop-filter: blur(var(--dk-blur-scrim, 20px)) saturate(1.15);
    backdrop-filter: blur(var(--dk-blur-scrim, 20px)) saturate(1.15);
  }
  .dk-side {
    background: rgba(0, 40, 64, 0.84);
    -webkit-backdrop-filter: blur(var(--dk-blur-side, 28px)) saturate(1.35);
    backdrop-filter: blur(var(--dk-blur-side, 28px)) saturate(1.35);
  }
  .dk-top {
    background: rgba(250, 249, 246, 0.74);
    -webkit-backdrop-filter: blur(var(--dk-blur-top, 26px)) saturate(1.45);
    backdrop-filter: blur(var(--dk-blur-top, 26px)) saturate(1.45);
  }
}

/* ---------- deslizable de Configuración ---------- */
.dk-slider {
  width: 100%;
  margin: 14px 0 4px;
  accent-color: var(--dk-teal);
  cursor: pointer;
}
.dk-slider-stops { display: flex; justify-content: space-between; gap: 8px; }
.dk-slider-stop {
  background: none; border: 0; padding: 2px 4px; font: inherit;
  font-size: 12px; color: var(--dk-ink-faint); cursor: pointer;
}
.dk-slider-stop[data-on] { color: var(--dk-navy); font-weight: 600; }

/* ---------- vista previa del vidrio ----------
   Caja con fondo rayado y dos pastillas de vidrio encima: usan las mismas
   variables que el sidebar y la barra, así la muestra no miente. */
.dk-blur-demo {
  position: relative;
  border: 1px solid var(--dk-line-soft); border-radius: var(--dk-r-lg);
  min-height: 152px;
  /* Sin `overflow: hidden` acá a propósito: en Chromium, un ancestro con
     overflow recortado + radio hace que el `backdrop-filter` de los hijos no
     se aplique (se ve el vidrio, pero sin desenfoque). El recorte va en la
     capa de fondo, que es la única que puede salirse. */
}
/* El fondo rayado es su propia capa, con el recorte. Va detrás de las
   pastillas, que así tienen algo real que desenfocar. */
.dk-blur-demo-bg {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: calc(var(--dk-r-lg) - 1px);
  background:
    repeating-linear-gradient(135deg, var(--dk-paperdeep) 0 10px, var(--dk-surface) 10px 20px);
}
.dk-blur-demo-rows { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px; }
.dk-blur-demo-rows span {
  display: block; height: 12px; border-radius: 6px;
  background: var(--dk-navy); opacity: 0.55;
}
.dk-blur-demo-glass {
  position: absolute; padding: 7px 12px; font-size: 12px; font-weight: 600;
  border-radius: var(--dk-r-pill);
}
.dk-blur-demo-glass.dark {
  left: 12px; bottom: 12px; color: var(--dk-paper);
  background: rgba(0, 40, 64, 0.84);
  -webkit-backdrop-filter: blur(var(--dk-blur-side, 28px)) saturate(1.35);
  backdrop-filter: blur(var(--dk-blur-side, 28px)) saturate(1.35);
}
.dk-blur-demo-glass.light {
  right: 12px; top: 12px; color: var(--dk-navy);
  background: rgba(250, 249, 246, 0.74);
  -webkit-backdrop-filter: blur(var(--dk-blur-top, 26px)) saturate(1.45);
  backdrop-filter: blur(var(--dk-blur-top, 26px)) saturate(1.45);
}

.dk-layer-head {
  padding: 15px 18px; border-bottom: 1px solid var(--dk-line-soft);
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  background: var(--dk-surface);
  border-radius: var(--dk-r-xl) var(--dk-r-xl) 0 0;
}
.dk-layer-body { padding: 18px; overflow-y: auto; flex: 1; background: var(--dk-surface); }
.dk-layer-foot {
  padding: 14px 18px; border-top: 1px solid var(--dk-line-soft);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  background: var(--dk-paperdeep);
  border-radius: 0 0 var(--dk-r-xl) var(--dk-r-xl);
}

.dk-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 9px; max-width: 400px; }
.dk-toast {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  /* Sólido: un aviso con texto encima de contenido no puede ser translúcido. */
  background: var(--dk-navy); color: var(--dk-paper);
  padding: 13px 15px; font-size: 12.5px;
  border-radius: 18px;
  box-shadow: var(--dk-elev-3);
  animation: dk-rise var(--dk-dur-base) var(--dk-ease-spring);
}
.dk-toast.leaving { animation: dk-fade var(--dk-dur-instant) var(--dk-ease) reverse forwards; }
.dk-toast-bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: var(--dk-r-pill); background: var(--dk-teal-600); }
.dk-toast.is-ok .dk-toast-bar { background: var(--dk-teal-600); }
.dk-toast.is-info .dk-toast-bar { background: rgba(250, 249, 246, 0.5); }
.dk-toast.is-risk .dk-toast-bar { background: #e0796c; }
.dk-toast-title { font-weight: 600; }
.dk-toast-hint { color: rgba(250, 249, 246, 0.74); margin-top: 3px; font-size: 12px; line-height: 1.45; }
.dk-toast-x {
  margin-left: auto; background: transparent; border: 0; color: rgba(250, 249, 246, 0.7);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 50%;
}
.dk-toast-x:hover { color: #fff; }

/* ---------- avatar: círculo, como el sistema ---------- */
.dk-ava {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; font-weight: 600; letter-spacing: 0.01em;
  background: rgba(0, 40, 64, 0.07); color: var(--dk-navy);
  border: 1px solid transparent; border-radius: 50%;
}
.dk-ava.av-navy { background: var(--dk-navy); color: var(--dk-paper); }
.dk-ava.av-navy700 { background: rgba(1, 58, 94, 0.12); color: var(--dk-navy-700); }
.dk-ava.av-deep { background: var(--dk-navy-900); color: var(--dk-paper); }
.dk-cell { display: flex; gap: 10px; align-items: center; }

/* ---------- ayuda contextual: explica lo que la etiqueta no puede ---------- */
/* El ancla lleva un signo de pregunta al lado: es la señal visible de que hay
   algo más para leer. El subrayado punteado aparece recién al pasar el mouse o
   al enfocar, como confirmación de que ese texto es el disparador. El foco
   visible lo aporta la regla global de [tabindex]. */
.dk-hint {
  display: inline-flex; align-items: center;
  cursor: help;
}
.dk-hint-q {
  display: inline-flex; flex: none; margin-left: 4px;
  color: rgba(0, 40, 64, 0.42);
  transition: color var(--dk-dur-fast) var(--dk-ease);
}
.dk-hint:hover {
  text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: var(--dk-teal);
}
.dk-hint:hover .dk-hint-q,
.dk-hint:focus-visible .dk-hint-q { color: var(--dk-teal); }
/* El globo va en `fixed` (ningún panel con scroll lo recorta) y es sólido: el
   texto se lee encima de cualquier contenido, con blur disponible o sin él.
   `pointer-events: none` para que nunca se interponga al puntero. */
.dk-tip {
  position: fixed; z-index: 90;
  pointer-events: none;
  background: var(--dk-navy); color: var(--dk-paper);
  padding: 9px 11px;
  border-radius: var(--dk-r-md);
  box-shadow: var(--dk-elev-3);
  font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-align: left; white-space: normal;
  text-decoration: none;
  animation: dk-fade var(--dk-dur-fast) var(--dk-ease);
}

/* ---------- código de referencia: se clickea y lleva a la ficha ----------
   El área pulsable es más alta que el texto: a 17px queda por debajo del
   mínimo cómodo y en un dedo grande no se apunta. El chip crece, la tipografía
   no (`.dk-ref` con `min-height`, no `font-size`). En móvil sube a 44px. */
.dk-ref {
  display: inline-flex; align-items: center;
  font: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 8px; min-height: 26px;
  border-radius: var(--dk-r-pill);
  border: 1px dashed var(--dk-line); background: rgba(0, 40, 64, 0.04);
  color: var(--dk-navy); cursor: pointer; white-space: nowrap;
  transition: color var(--dk-dur-fast) var(--dk-ease), border-color var(--dk-dur-fast) var(--dk-ease);
}
.dk-ref:hover { color: var(--dk-teal); border-color: var(--dk-teal); background: rgba(0, 122, 135, 0.08); }

/* ---------- código de participación: un chip, tres destinos ----------
   El chip entero es la participación; cada segmento adentro va a su entidad. Se ve
   como un solo código, que es lo que es: el borde del conjunto es el link, los
   segmentos cortan la propagación y abren lo suyo. */
.dk-ref-wrap {
  display: inline-flex; align-items: center; gap: 0;
  padding: 1px 7px; min-height: 26px;
  border-radius: var(--dk-r-pill);
  border: 1px dashed var(--dk-line); background: rgba(0, 40, 64, 0.04);
  cursor: pointer;
  transition: border-color var(--dk-dur-fast) var(--dk-ease), background var(--dk-dur-fast) var(--dk-ease);
}
.dk-ref-wrap:hover { border-color: var(--dk-teal); background: rgba(0, 122, 135, 0.06); }
.dk-ref-wrap .dk-ref { border: 0; background: transparent; padding: 0 1px; }
.dk-ref-wrap .dk-ref:hover { color: var(--dk-teal); text-decoration: underline; background: transparent; }
.dk-ref-dash { color: var(--dk-ink-muted); font-size: 11.5px; font-weight: 600; padding: 0 1px; }
.dk-ref-sufijo { font-size: 11.5px; font-weight: 600; color: var(--dk-ink-muted); padding: 0 2px; }

/* ---------- foco visible: anillo, nunca solo color de fondo ---------- */
.dk :focus-visible,
.dk button:focus-visible,
.dk select:focus-visible,
.dk input:focus-visible,
.dk textarea:focus-visible,
.dk a:focus-visible,
.dk [tabindex]:focus-visible {
  outline: 3px solid var(--dk-navy);
  outline-offset: 2px;
}
.dk-side :focus-visible { outline-color: var(--dk-teal-600); }
.dk-scrim :focus-visible { outline-color: var(--dk-navy); }

@media (max-width: 1280px) {
  /* Pantallas medianas: sidebar apenas más angosto y contenido a todo el ancho. */
  .dk { --dk-side-w: 216px; }
  .dk-top-search { width: 180px; }
  .dk-main { max-width: none; }
}
/* ---------- riel por debajo de 1024px, panel deslizante por debajo de 640 ----------
   Por debajo de 1024px un riel de 72px con 13 iconos sin texto no es
   navegación: es adivinar, y el usuario de toque no tiene hover que lo
   revele. Entre 640 y 1024 el sidebar vuelve a ancho completo con etiquetas;
   el botón de la marca sigue visible, así que el colapso manual sigue
   funcionando y ahora sí deja texto. En teléfono (640) se hace panel
   deslizante sobre el contenido. */
@media (max-width: 1024px) {
  .dk-shell { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .dk-side {
    width: 100%; height: auto; top: 0;
    position: sticky; z-index: 30;
  }
  .dk-side .dk-nav {
    display: flex; flex-direction: row; gap: 4px; overflow-x: auto;
    padding: 4px 10px 8px; scrollbar-width: thin;
  }
  .dk-side .dk-nav-group { display: none; }
  .dk-side .dk-navitem { flex: none; justify-content: flex-start; padding: 8px 12px; }
    /* En una tira horizontal el colapso no aplica (sería ocultar texto en una
       fila ya angosta): la etiqueta se muestra sí o sí. */
    .dk[data-side="collapsed"] .dk-side .dk-nav-label,
    .dk[data-side="collapsed"] .dk-side .dk-brand-text,
    .dk[data-side="collapsed"] .dk-side .dk-nav-badge { display: revert; }
    .dk[data-side="collapsed"] .dk-side .dk-navitem { justify-content: flex-start; padding: 8px 12px; }
  .dk-top { top: 0; padding: 9px 12px; }
  .dk-builder, .dk-grid2, .dk-grid3, .dk-resp, .dk-resp-abajo { grid-template-columns: minmax(0, 1fr); }
  /* Las secciones bajan a dos columnas: cuatro de 210px no se leen. */
  .dk-palette-ancha .dk-secs { columns: 2; }
  .dk-resp-lado { position: static; }
  .dk-resp-lista .dk-panel-body { max-height: none; }
  .dk-stats.cols-5, .dk-stats.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .dk-stat + .dk-stat { border-left: 0; }
  .dk-stat:nth-child(n+3) { border-top: 1px solid var(--dk-line-soft); }
  .dk-top-search { width: 100%; }
  .dk-main { padding: 10px 12px 56px; }
  .dk-h1 { font-size: 23px; }
  .dk-sheet { max-width: none; }
  /* Sin ancho para dos paneles: queda solo la ficha (el CV sigue a un clic). */
  .dk-side-pane { display: none; }
}

/* ---------- hoja de impresión del registro ----------
   Vive en `shell/PrintAudit.tsx`. En pantalla no se ve (`display: none`), y en
   papel es lo único que se ve: el `@media print` de abajo saca la app entera.
   Por eso el documento no compite con el layout, no tiene que compartir sus
   reglas. */
.dk-print-doc { display: none; }

/* ---------- teléfono (640px): todo apilado, nada afuera ---------- */
@media (max-width: 640px) {
  /* Panel deslizante sobre el contenido: en teléfono el sidebar no puede
     ocupar una columna fija. Arriba el switcher de cliente sigue visible —
     el alcance nunca desaparece — y el menú se abre sobre el contenido. */
  .dk-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px; height: 100vh;
    z-index: 70; transform: translateX(-100%);
    transition-property: transform; transition-duration: var(--dk-dur-base);
    transition-timing-function: var(--dk-ease-out);
    box-shadow: var(--dk-elev-3);
  }
  .dk-side .dk-nav { flex-direction: column; overflow-x: visible; padding: 6px 8px 8px; }
  .dk-side .dk-navitem { justify-content: flex-start; padding: 11px 12px; }
  /* Abierta: el panel está en pantalla. Cerrada: se sale. */
  .dk[data-side="expanded"] .dk-side { transform: none; }
  .dk-top { gap: 8px; padding: 10px 12px; }
  .dk-switcher select { max-width: 150px; }
  .dk-top-search { flex: 1 1 150px; width: auto; }
  /* En chico queda el avatar solo: el nombre ya está en el menú. */
  .dk-user > span { display: none; }
  .dk-main { padding: 10px 12px 56px; }
  .dk-h1 { font-size: 21px; }
  .dk-palette-ancha .dk-secs { columns: 1; }
  /* Clave/valor apilado: a 360px la columna de 170px no deja aire. */
  .dk-kv { grid-template-columns: 1fr; gap: 2px 0; }
    .dk-kv dd { margin-bottom: 8px; }
    .dk-usermenu { min-width: 180px; }
    /* Área táctil real: el chip no crece de texto, crece de área. */
    .dk-ref, .dk-ref-wrap { min-height: 44px; }
    /* La tabla deja de ser tabla: una tarjeta por fila conserva la
       información esencial y no obliga a scrollear horizontal. */
    .dk-table-wrap { overflow-x: visible; padding: 0 8px; }
    .dk-table { min-width: 0; display: block; }
    .dk-table thead { display: none; }
    .dk-table tbody, .dk-table tr, .dk-table td { display: block; width: 100%; }
    .dk-table tr {
      border: 1px solid var(--dk-line-soft); border-radius: var(--dk-r-md);
      padding: 8px 4px; margin: 10px 0; background: var(--dk-surface);
    }
    .dk-table td { border: 0; padding: 5px 8px; display: flex; gap: 10px; }
    .dk-table td::before {
      content: attr(data-label) " ";
      flex: none; width: 40%; color: var(--dk-ink-muted); font-weight: 600; font-size: 12px;
    }
    .dk-table td:empty { display: none; }
  }

@media print {
  /* Dos cosas salen en papel, y son separadas a propósito: la hoja del
     registro (`.dk-print-doc`) y, si el usuario imprime desde otra vista, la
     app entera sin cromo. Antes `window.print()` imprimía lo que hubiera en
     pantalla, así que desde Resumen salía un PDF con el tablero de la cartera
     y no con el registro: la vista de auditoría nunca fue "la que se imprime",
     sólo la que tenía un botón. Ahora es al revés. */
  @page { margin: 14mm; }

  /* Toda la consola fuera del papel cuando hay documento de impresión. La
     hoja del registro cuelga del shell, no de la app: vive en un nodo hermano,
     para que ocultar la app no se lleve el documento con ella. */
  .dk-shell, .dk-side, .dk-top, .dk-no-print, .dk-toasts, .dk-side-pane,
  .dk-scrim, .dk-menu-scrim, .dk-usermenu, .dk-viewhead, .dk-filters,
  .dk-panel { display: none !important; }

  /* Y con la app entera oculta, el `.dk` raíz también: si no, su
     `min-height: 100vh` con fondo fijo deja el documento sin caja. */
  .dk { display: none !important; }

  /* La hoja del registro, sí. */
  .dk-print-doc {
    display: block;
    color: #000; background: #fff;
    font-family: var(--dk-sans);
    font-size: 10pt; line-height: 1.35;
  }
  .dk-print-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16mm; padding-bottom: 3mm; margin-bottom: 4mm;
    border-bottom: 1.5pt solid #000;
  }
  .dk-print-head h1 { font-size: 15pt; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
  .dk-print-sub { font-size: 9pt; color: #333; margin: 1mm 0 0; }
  .dk-print-meta { font-size: 8.5pt; color: #333; text-align: right; flex: none; }

  .dk-print-table { width: 100%; border-collapse: collapse; }
  .dk-print-table th {
    text-align: left; font-size: 8pt; font-weight: 700; color: #000;
    padding: 2mm 1.5mm; border-bottom: 1pt solid #000;
    white-space: nowrap;
  }
  .dk-print-table td {
    padding: 1.6mm 1.5mm; border-bottom: 0.5pt solid #bbb;
    vertical-align: top; word-break: break-word;
  }
  .dk-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  .dk-print-table thead { display: table-header-group; }  /* se repite por página */
  .dk-print-table .nowrap { white-space: nowrap; }
  .dk-print-table .mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 8pt; }
  .dk-print-tipo { font-size: 7.5pt; color: #555; margin-top: 0.5mm; }

  .dk-print-pie {
    margin: 5mm 0 0; padding-top: 2.5mm;
    border-top: 0.5pt solid #bbb; font-size: 8pt; color: #444;
  }
}

/* ---------- preferencias del sistema que la HIG exige respetar ---------- */

/* Movimiento reducido NO es "sin movimiento": es el mismo resultado perceptual
   por otra vía. Un resorte que no se desplaza y un fundido corto dan el mismo
   resultado, y sin él desaparece la única señal que dice que la capa apareció.
   Por eso el resorte de motion.ts ya corre en modo fundido con la preferencia
   puesta: acá sólo se desactiva lo que queda de movimiento CSS. */
@media (prefers-reduced-motion: reduce) {
  .dk *, .dk *::before, .dk *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Ninguna capa se traslada: el transform lo pone el resorte, y en este modo
     no pone ninguno. El realce del asa también es movimiento. */
  .dk-sheet, .dk-modal, .dk-side-pane, .dk-scrim { transform: none !important; }
  .dk-resize::after { display: none !important; }
  /* El redimensionado NO se desactiva con movimiento reducido: no es una
     animación, es un control de tamaño. Lo único que se apaga es el realce,
     que sí es movimiento. Quitarlo sería dejar sin forma de agrandar la ficha
     a quien pidió menos movimiento. */
  .dk-resize { cursor: col-resize; }
}

/* Vidrio apagado: queda solo lo que de verdad es vidrio (chrome persistente
   y el velo del fondo). Las hojas ya son sólidas de por sí. */
@media (prefers-reduced-transparency: reduce) {
  .dk-side { background: var(--dk-navy) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .dk-top { background: var(--dk-paper) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .dk-scrim { background: rgba(0, 26, 44, 0.62) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* El icono de estilo `glass` es un degradado translúcido: se lo deja, pero
     sin la sombra de apoyo, que sólo servía para despegarla del fondo. */
  .dk-icon[data-style="glass"] { filter: none; }
}

/* Contraste alto: bordes visibles, translucidez fuera. */
@media (prefers-contrast: more) {
  .dk { --dk-line: rgba(0, 40, 64, 0.45); --dk-line-soft: rgba(0, 40, 64, 0.28); }
  .dk-icon[data-style="glass"] { filter: none; }
  .dk-panel, .dk-stats, .dk-col, .dk-card, .dk-palette, .dk-drop, .dk-input, .dk-select, .dk-textarea {
    border-color: var(--dk-navy);
  }
  .dk-side { background: var(--dk-navy-900) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .dk-top { background: var(--dk-surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .dk-scrim { background: rgba(0, 26, 44, 0.55) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ==========================================================================
   Dirección visual 2026-10-22 — sistema data-forward (tokens --role-*).

   Reglas: neutros teñidos, el ink es navy (no decoración), el acento cubre
   pocos píxeles (marcador de navegación, chispas, focos, una serie), el bien
   es tinta y solo lo malo lleva rojo. El semáforo (risk/watch/ok) es otro
   sistema, separado de la marca.
   ========================================================================== */

/* Foco visible siempre en acento, en los dos temas. */
.dk :focus-visible {
  outline: 2px solid var(--role-accent);
  outline-offset: 2px;
  border-radius: var(--dk-r-xs);
}

/* Navegación: el activo lleva marcador de acento (3px) + fondo tenue.
   La transición del box-shadow hace el "deslizamiento" entre ítems. */
.dk-navitem { position: relative; }
.dk-navitem[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--role-accent), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition-property: background-color, color, transform, box-shadow;
}

/* ---------- titular de resumen (display liviano) ---------- */
.dkx-display {
  margin: 0;
  max-width: 22ch;
  font-weight: 300;
  font-size: clamp(30px, 2.4vw + 18px, 44px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--role-ink);
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}
.dkx-display strong { font-weight: 600; }
.dkx-eyebrow {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--role-muted);
}
.dkx-lede { margin: 10px 0 0; font-size: 14px; color: var(--role-muted); max-width: 62ch; }

/* Titular de sección (vistas internas): display liviano en menor tamaño. */
.dkx-title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(26px, 1.6vw + 18px, 34px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--role-ink);
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}
.dkx-title strong { font-weight: 600; }

/* ---------- franja KPI: un contenedor, divisores hairline ---------- */
.dkx-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--role-surface);
  border-radius: 24px;
  padding: 6px 0;
  margin: 20px 0;
}
.dkx-kpis.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dkx-kpi {
  appearance: none; border: 0; background: transparent; font: inherit; text-align: left;
  padding: 18px 24px 16px; min-width: 0; color: var(--role-ink);
  display: flex; flex-direction: column; gap: 2px;
}
.dkx-kpi + .dkx-kpi { border-left: 1px solid rgb(var(--role-ink-rgb) / 0.12); }
button.dkx-kpi { cursor: pointer; border-radius: 18px; transition: background-color var(--dk-dur-fast) var(--dk-ease-out), transform var(--dk-dur-fast) var(--dk-ease-out); }
button.dkx-kpi:hover { background: var(--role-surface2); }
button.dkx-kpi:active { transform: scale(0.985); }
.dkx-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--role-muted); }
.dkx-kpi-num {
  font-weight: 300; font-size: clamp(34px, 3vw + 20px, 52px); line-height: 1.04;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--role-ink);
}
.dkx-kpi-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.dkx-spark { margin-left: auto; flex: none; display: block; max-width: 100%; height: auto; }
.dkx-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: var(--dk-r-pill);
  background: rgb(var(--role-ink-rgb) / 0.08); color: var(--role-ink);
  white-space: nowrap;
}
.dkx-chip.is-bad { background: rgb(var(--role-bad-rgb) / 0.12); color: var(--role-bad); }
.dkx-chip.is-warn { background: rgb(var(--role-warn-rgb) / 0.14); color: var(--role-warn); }
.dkx-spark .dkx-spark-bar { fill: rgb(var(--role-ink-rgb) / 0.22); }
.dkx-spark .dkx-spark-bar.hot { fill: var(--role-accent); }
.dkx-spark .dkx-spark-line { fill: none; stroke: var(--role-accent); stroke-width: 2; stroke-linecap: round; }
.dkx-spark .dkx-spark-area { fill: rgb(var(--role-accent-rgb) / 0.14); stroke: none; }

/* ---------- rejilla del tablero ---------- */
.dkx-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin: 16px 0; }
.dkx-card {
  background: var(--role-surface);
  border-radius: 24px;
  padding: 22px 24px;
  min-width: 0;
}
.dkx-card-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.dkx-card-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--role-ink); }
.dkx-card-count {
  margin-left: auto; flex: none;
  font-size: 12px; font-weight: 700; color: var(--role-ink);
  background: rgb(var(--role-ink-rgb) / 0.10);
  border-radius: var(--dk-r-pill); padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}

/* ---------- lista "necesita atención" ---------- */
.dkx-attn { list-style: none; margin: 10px 0 0; padding: 0; }
.dkx-attn-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; min-width: 0;
  border-top: 1px solid rgb(var(--role-ink-rgb) / 0.12);
}
.dkx-attn-item:first-child { border-top: 0; }
.dkx-attn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--role-accent); }
.dkx-attn-dot.is-bad { background: var(--role-bad); }
.dkx-attn-dot.is-warn { background: var(--role-warn); }
.dkx-attn-body { flex: 1; min-width: 0; }
.dkx-attn-title { font-weight: 600; font-size: 13.5px; color: var(--role-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkx-attn-ctx { font-size: 12px; color: var(--role-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkx-pill {
  flex: none; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--role-surface); background: var(--role-ink);
  border: 0; border-radius: var(--dk-r-pill); padding: 7px 16px;
  text-decoration: none;
  transition: transform var(--dk-dur-fast) var(--dk-ease-out), opacity var(--dk-dur-fast) var(--dk-ease);
}
[data-theme="dark"] .dkx-pill { color: var(--role-bg); }
.dkx-pill:hover { opacity: 0.88; }
.dkx-pill:active { transform: scale(0.95); }
.dkx-dismiss {
  flex: none; border: 0; background: transparent; color: var(--role-muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 8px; border-radius: 50%;
}
.dkx-dismiss:hover { background: var(--role-surface2); color: var(--role-ink); }
.dkx-attn-empty { margin: 12px 0 2px; font-size: 13.5px; color: var(--role-muted); }

/* ---------- listas rankeadas con barras ---------- */
.dkx-rank { list-style: none; margin: 10px 0 0; padding: 0; }
.dkx-rank-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center; gap: 12px; width: 100%;
  appearance: none; border: 0; background: transparent; font: inherit; text-align: left;
  padding: 10px 8px; border-radius: 14px; cursor: pointer; color: var(--role-ink);
  transition: background-color var(--dk-dur-fast) var(--dk-ease-out);
}
.dkx-rank-row:hover, .dkx-rank-row:focus-visible { background: var(--role-surface2); }
.dkx-rank-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkx-rank-ctx { font-size: 12px; color: var(--role-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dkx-rank-track { height: 8px; border-radius: var(--dk-r-pill); background: rgb(var(--role-ink-rgb) / 0.10); overflow: hidden; }
.dkx-rank-fill {
  height: 100%; border-radius: inherit;
  background: rgb(var(--role-ink-rgb) / 0.55);
  transition: width 0.6s var(--dk-ease-out), background-color var(--dk-dur-fast) var(--dk-ease);
}
.dkx-rank-row:hover .dkx-rank-fill, .dkx-rank-row:focus-visible .dkx-rank-fill { background: var(--role-accent); }
.dkx-rank-val { font-weight: 300; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* ---------- embudo por etapa (hover compara) ---------- */
.dkx-funnel { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.dkx-funnel-col {
  flex: 1; min-width: 0; appearance: none; border: 0; background: transparent; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: default;
  padding: 0 2px;
}
.dkx-funnel-val { font-weight: 300; font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--role-ink); }
.dkx-funnel-bar {
  width: 100%; border-radius: 7px 7px 3px 3px;
  background: rgb(var(--role-ink-rgb) / 0.55);
  min-height: 6px;
  transition: opacity var(--dk-dur-fast) var(--dk-ease), background-color var(--dk-dur-fast) var(--dk-ease), transform var(--dk-dur-fast) var(--dk-ease-out);
  transform-origin: bottom;
}
.dkx-funnel:hover .dkx-funnel-col:not(:hover) { opacity: 0.38; }
.dkx-funnel-col:hover .dkx-funnel-bar { background: var(--role-accent); }
.dkx-funnel-lab { font-size: 11px; color: var(--role-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Etapa en cero: número chico y mudo, la barra queda en riel tenue. */
.dkx-funnel-col.is-zero .dkx-funnel-val { font-size: 13px; color: var(--role-muted); }
.dkx-funnel-col.is-zero .dkx-funnel-bar { min-height: 5px; background: rgb(var(--role-ink-rgb) / 0.18); }

/* ---------- carga de vencimientos (barras por día) ---------- */
.dkx-load { display: flex; align-items: flex-end; gap: 5px; margin-top: 14px; }
.dkx-load-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dkx-load-bar {
  width: 100%; border-radius: 4px;
  background: rgb(var(--role-ink-rgb) / 0.20);
  min-height: 4px;
  transition: background-color var(--dk-dur-fast) var(--dk-ease), height 0.5s var(--dk-ease-out);
}
.dkx-load-bar.hot { background: var(--role-bad); }
.dkx-load-bar.warm { background: var(--role-warn); }
.dkx-load-lab { font-size: 10.5px; color: var(--role-muted); font-variant-numeric: tabular-nums; }

/* ---------- segmentado con píldora deslizante ---------- */
.dkx-seg {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--role-surface2); border: 1px solid rgb(var(--role-ink-rgb) / 0.14); border-radius: var(--dk-r-pill); padding: 3px;
}
.dkx-seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--seg-n, 2));
  transform: translateX(calc(var(--seg-i, 0) * 100%));
  background: var(--role-ink); border-radius: var(--dk-r-pill);
  transition: transform 0.32s var(--dk-ease-out);
}
.dkx-seg-opt {
  position: relative; z-index: 1; appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--role-muted);
  padding: 6px 16px; border-radius: var(--dk-r-pill); cursor: pointer; white-space: nowrap;
  transition: color var(--dk-dur-fast) var(--dk-ease);
}
.dkx-seg-opt[data-on="true"] { color: var(--role-surface); }
[data-theme="dark"] .dkx-seg-opt[data-on="true"] { color: var(--role-bg); }

/* ---------- avisos: acción + cuenta regresiva ---------- */
.dk-toast-action {
  flex: none; align-self: center;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--dk-navy-900); background: var(--dk-paper);
  border: 0; border-radius: var(--dk-r-pill); padding: 6px 14px;
}
.dk-toast-action:active { transform: scale(0.95); }
.dk-toast-count {
  position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px;
  border-radius: 2px; background: rgba(250, 249, 246, 0.22); overflow: hidden;
}
.dk-toast-count > span {
  display: block; height: 100%; background: var(--role-accent-hi, #4FC3CC);
  transform-origin: left;
  animation: dk-toast-tick 3.6s linear forwards;
}
.dk-toast { padding-bottom: 14px; }
@keyframes dk-toast-tick { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- entrada escalonada del tablero ---------- */
@keyframes dkx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.dkx-enter { animation: dkx-rise 0.55s var(--dk-ease-out) backwards; animation-delay: calc(var(--dkx-i, 0) * 70ms); }
@keyframes dkx-draw { to { stroke-dashoffset: 0; } }
.dkx-spark .dkx-spark-line.draw {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: dkx-draw 0.9s var(--dk-ease-out) 0.15s forwards;
}

/* Movimiento reducido: duraciones a casi cero, sin traslación. */
@media (prefers-reduced-motion: reduce) {
  .dkx-enter { animation: none; }
  .dkx-spark .dkx-spark-line.draw { animation: none; stroke-dashoffset: 0; }
  .dkx-rank-fill, .dkx-load-bar, .dkx-seg-pill { transition: none; }
  .dk-toast-count > span { animation: none; transform: scaleX(0); }
}

/* ---------- tablero en angosto ---------- */
@media (max-width: 1080px) {
  .dkx-kpis { grid-template-columns: repeat(2, 1fr); }
  .dkx-kpi:nth-child(3) { border-left: 0; }
  .dkx-kpi:nth-child(n+3) { border-top: 1px solid rgb(var(--role-ink-rgb) / 0.12); }
  .dkx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dkx-kpis { grid-template-columns: 1fr; }
  .dkx-kpi + .dkx-kpi { border-left: 0; border-top: 1px solid rgb(var(--role-ink-rgb) / 0.12); }
  .dkx-card { padding: 18px; border-radius: 20px; }
  /* En angosto el titular y el contexto bajan a 2 líneas en vez de truncar. */
  .dkx-attn-title, .dkx-attn-ctx {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* ==========================================================================
   Tema oscuro para el cromo heredado: se remapean los semánticos `--dk-*`
   a los roles. `--dk-navy` NO se toca a propósito: el sidebar y los botones
   primarios quedan navy profundo en los dos temas (momento navy deliberado).
   ========================================================================== */
[data-theme="dark"] .dk {
  --dk-surface: var(--role-surface);
  --dk-surface2: var(--role-surface2);
  --dk-ink: var(--role-ink);
  --dk-ink-muted: var(--role-muted);
  --dk-ink-faint: var(--role-muted);
  --dk-line: rgb(var(--role-ink-rgb) / 0.16);
  --dk-line-soft: rgb(var(--role-ink-rgb) / 0.09);
  --dk-accent: var(--role-accent);
  --dk-accent-strong: var(--role-accent-hi);
  --dk-risk: var(--role-bad);
  --dk-risk-soft: rgb(var(--role-bad-rgb) / 0.18);
  --dk-watch: var(--role-warn);
  --dk-watch-soft: rgb(var(--role-warn-rgb) / 0.18);
  --dk-ok: var(--role-good);
  --dk-ok-soft: rgb(var(--role-good-rgb) / 0.16);
  --dk-ok-text: var(--role-good);
  --dk-glass: rgba(13, 36, 51, 0.88);
  --dk-glass-edge: rgba(220, 231, 236, 0.14);
  --dk-glass-dark: rgba(0, 20, 32, 0.92);
  --dk-elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
  --dk-elev-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  --dk-elev-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 28px 64px rgba(0, 0, 0, 0.45);
}
/* Inputs con tinta hardcodeada: en oscuro usan el rol. */
[data-theme="dark"] .dk .dk-input,
[data-theme="dark"] .dk .dk-select,
[data-theme="dark"] .dk .dk-textarea {
  color: var(--role-ink);
  background: rgb(var(--role-ink-rgb) / 0.08);
}
[data-theme="dark"] .dk .dk-input::placeholder,
[data-theme="dark"] .dk .dk-select::placeholder,
[data-theme="dark"] .dk .dk-textarea::placeholder {
  color: var(--role-muted);
}
/* El bloque `@supports (backdrop-filter)` fija vidrios con valores directos:
   en oscuro se re-fijan (el sidebar ya es navy, queda igual). */
[data-theme="dark"] .dk .dk-top { background: rgba(13, 36, 51, 0.78); }
/* Botones secundarios, campana y controles de la barra: tinta navy hardcodeada. */
[data-theme="dark"] .dk .dk-btn:not(.primary):not(.accent) { color: var(--role-ink); background: rgb(var(--role-ink-rgb) / 0.10); }
[data-theme="dark"] .dk .dk-btn:not(.primary):not(.accent):hover { background: rgb(var(--role-ink-rgb) / 0.16); }
[data-theme="dark"] .dk .dk-bell { color: var(--role-ink); background: rgb(var(--role-ink-rgb) / 0.10); }
[data-theme="dark"] .dk .dk-switcher select,
[data-theme="dark"] .dk .dk-top-search { color: var(--role-ink); background: rgb(var(--role-ink-rgb) / 0.08); }
[data-theme="dark"] .dk .dk-iconbtn { color: var(--role-muted); }
[data-theme="dark"] .dk .dk-iconbtn:hover { background: rgb(var(--role-ink-rgb) / 0.10); color: var(--role-ink); }
/* Avatares en oscuro: la escala navy se aclara, sin verdes. */
[data-theme="dark"] .dk-ava.av-navy { background: var(--role-accent); color: #062b31; }
[data-theme="dark"] .dk-ava.av-navy700 { background: rgb(var(--role-ink-rgb) / 0.16); color: var(--role-ink); }
[data-theme="dark"] .dk-ava.av-deep { background: rgb(var(--role-ink-rgb) / 0.30); color: var(--role-bg); }
/* Rieles de cero en oscuro: un poco más presentes. */
[data-theme="dark"] .dkx-funnel-col.is-zero .dkx-funnel-bar { background: rgb(var(--role-ink-rgb) / 0.22); }

/* ---------- barra de acciones contextual (NEX-187) ----------
   Fila de operaciones de la vista activa dentro de `.dk-top`, y tira junto
   al título de la ficha abierta. Hereda botones y controles del sistema:
   vale en modo oscuro sin casos especiales y no trae animaciones propias. */
.dk-actionbar { display: flex; align-items: center; min-width: 0; position: relative; }
.dk-actionbar-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-action { display: inline-flex; }
.dk-action-mover { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--dk-ink-muted); }
.dk-action-mover-label { white-space: nowrap; }
/* Atajo existente que la acción sugiere (sólo atajos que ya funcionan). */
.dk-action-kbd {
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--dk-ink-muted);
  border: 1px solid var(--dk-line); border-radius: var(--dk-r-xs);
  padding: 1px 6px; margin-left: 2px;
}
/* En móvil (quiebre de teléfono de la consola) la fila colapsa a un menú
   nativo "Más acciones": las mismas acciones, sin duplicar ni perder. */
.dk-actionbar-menu { display: none; }
.dk-actionbar-menu > summary { list-style: none; cursor: pointer; }
.dk-actionbar-menu > summary::-webkit-details-marker { display: none; }
.dk-actionbar-menu-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 41;
  background: var(--dk-surface); border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-elev-3); padding: 8px; min-width: 230px;
  display: flex; flex-direction: column; gap: 4px;
}
.dk-ficha-acciones .dk-actionbar-menu-lista { right: auto; left: 0; }
/* Tira junto al título de la ficha: respira del cuerpo que sigue. */
.dk-ficha-acciones { margin: 0 0 12px; }
.dk-ficha-acciones .dk-actionbar-fila { gap: 6px; }
/* Sin movimiento propio: con `reduce` del sistema no hay nada que desactivar,
   pero se declara para que un resorte futuro no se cuele en la barra. */
@media (prefers-reduced-motion: reduce) {
  .dk-actionbar *, .dk-actionbar-menu-lista { transition: none !important; animation: none !important; }
}
@media (max-width: 640px) {
  .dk-top .dk-actionbar-fila { display: none; }
  .dk-top .dk-actionbar-menu { display: block; }
}