/* ============================================================
   NEXUS SELECCIÓN — hoja de estilo única, mobile-first.
   Design System: Workforce (Tokens y componentes aprobados).
   Objetivo: experiencia visual equivalente a Workforce Selection.
   ============================================================ */

/* --- Workforce Design Tokens --- */
:root {
  --wf-bg: #f7f7fb;
  --canvas: #f7f7fb;
  --surface: #ffffff;
  --surface-alt: #f8f9fb;
  --ink: #19172a;
  --ink-soft: #19172a;
  --slate: #64748b;
  --line: #e4e7ec;
  --line-strong: #c9d3d8;
  --primary: #1e3a5f;
  --primary-strong: #142840;
  --primary-dim: #eef2f8;
  --amber: #f5a623;
  --amber-dim: rgba(245, 166, 35, .12);
  --teal: #2d9c9c;
  --teal-dim: rgba(45, 156, 156, .12);
  --coral: #e8655a;
  --coral-dim: rgba(232, 101, 90, .12);
  --blue: #1d5fa8;
  --blue-dim: rgba(29, 95, 168, .12);
  --green: #1a7a45;
  --green-dim: rgba(26, 122, 69, .12);
  --red: #b3261e;
  --red-dim: rgba(179, 38, 30, .12);
  --muted: var(--slate);
  --brand: var(--primary);
  --brand-dark: var(--primary-strong);
  --brand-tint: var(--primary-dim);
  --amber-tint: var(--amber-dim);
  --green-tint: var(--teal-dim);
  --red-tint: var(--coral-dim);
  --blue-tint: var(--blue-dim);
  --surface-2: var(--surface-alt);
  --bg: var(--wf-bg);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(25, 23, 42, 0.06), 0 4px 14px rgba(25, 23, 42, 0.05);
  --font: 'Inter', 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --wf-purple: #1e3a5f;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --wf-bg: #101614;
    --canvas: #101614;
    --surface: #18211e;
    --surface-alt: #1e2825;
    --ink: #eef3f1;
    --ink-soft: #c2cec9;
    --slate: #94a49e;
    --line: #2a3532;
    --line-strong: #3a4643;
    --primary: #4fd1b5;
    --primary-strong: #6fe0c7;
    --primary-dim: #12332c;
    --amber: #e5b25d;
    --amber-dim: rgba(229, 178, 93, .15);
    --teal: #6fd394;
    --teal-dim: rgba(111, 211, 148, .15);
    --coral: #f19a94;
    --coral-dim: rgba(241, 154, 148, .15);
    --blue: #7fb4ea;
    --blue-dim: rgba(127, 180, 234, .15);
    --green: #6fd394;
    --green-dim: rgba(111, 211, 148, .15);
    --red: #f19a94;
    --red-dim: rgba(241, 154, 148, .15);
    --muted: #94a49e;
    --brand: #4fd1b5;
    --brand-dark: #6fe0c7;
    --brand-tint: #12332c;
    --amber-tint: #33280f;
    --green-tint: #13301f;
    --red-tint: #38181a;
    --blue-tint: #14263a;
    --surface-2: #1e2825;
    --bg: #101614;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --wf-purple: #4fd1b5;
  }
}

/* --- Reset --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   WORKFORCE SHELL — Sidebar + Appbar
   ============================================================ */

/* --- Sidebar Workforce --- */
.wf-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background: var(--primary);
  color: #fff;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 2px 0 16px rgba(25, 23, 42, .12);
}

.wf-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.wf-brand-copy {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-weight: 700;
  font-size: 15px;
}

.wf-brand-copy small {
  font-size: 11px;
  opacity: .8;
}

/* --- Sidebar Navigation --- */
.modulenav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.wf-nav-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .5);
  padding: 12px 16px 6px;
}

.modulenav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}

.modulenav button:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.modulenav button.active {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 600;
}

.wf-nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Shell Main --- */
.wf-shell-main {
  margin-left: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Appbar Workforce --- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--primary);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow);
}

.wf-page-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wf-page-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.wf-page-subtitle {
  font-size: 13px;
  opacity: .85;
}

.wf-header-context {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-preview {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 3px 10px;
}

.wf-status {
  font-size: 12px;
  opacity: .85;
}

@media (max-width: 520px) {
  .appbar { padding: 12px 16px; gap: 8px; align-items: flex-start; }
  .wf-page-heading { flex: 1 1 auto; min-width: 0; }
  .wf-page-title { font-size: 16px; }
  .wf-page-subtitle { font-size: 12px; line-height: 1.35; }
  .wf-header-context { flex: 0 0 auto; gap: 6px; }
  .wf-status { display: none; }
  .badge-preview { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
}

/* ============================================================
   WORKFORCE COMPONENTS
   ============================================================ */

/* --- Workforce Card --- */
.wf-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.wf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.wf-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.wf-sub {
  font-size: 13px;
  color: var(--slate);
  margin-top: 2px;
}

/* --- Workforce Button Mini --- */
.wf-btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
  min-height: 32px;
}

.wf-btn-mini:hover {
  background: var(--surface-alt);
}

.wf-btn-mini.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Botón sobre la barra superior oscura.
   Estaba escrito como estilo en línea que forzaba texto blanco, pero el fondo
   seguía siendo el claro del botón normal: la píldora aparecía vacía, con
   «Salir» en blanco sobre blanco. Aquí el fondo y el texto se definen juntos,
   y los estados de foco y teclado quedan visibles. */
.wf-btn-mini--onbar {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.wf-btn-mini--onbar:hover {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.wf-btn-mini--onbar:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wf-btn-mini:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* --- Workforce Tags --- */
.wf-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.wf-tag.open {
  background: var(--amber-dim);
  color: var(--amber);
}

.wf-tag.ok {
  background: var(--teal-dim);
  color: var(--teal);
}

.wf-tag.no {
  background: var(--coral-dim);
  color: var(--coral);
}

.wf-tag.swap {
  background: var(--blue-dim);
  color: var(--blue);
}

.wf-tag.revision {
  background: var(--primary-dim);
  color: var(--primary);
}

/* --- Workforce Tabs --- */
.wf-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-alt);
  padding: 4px;
  border-radius: 9px;
  width: max-content;
  margin-bottom: 14px;
}

.wf-tab {
  appearance: none;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}

.wf-tab:hover {
  background: rgba(255, 255, 255, .5);
}

.wf-tab.active {
  background: var(--primary);
  color: #fff;
}

/* --- Workforce Panel --- */
.wf-panel {
  display: none;
}

.wf-panel.active {
  display: block;
}

/* --- Workforce Segment --- */
.wf-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all .15s;
}

.wf-seg:hover {
  background: var(--surface-alt);
}

.wf-seg.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ============================================================
   KPIs Workforce
   ============================================================ */
.selection-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.selection-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.selection-kpi-value {
  font-family: var(--font);
  font-weight: 700;
  font-size: 24px;
  color: var(--primary);
}

.selection-kpi-label {
  font-size: 12px;
  color: var(--slate);
  margin-top: 4px;
}

.selection-kpi-value.warning { color: var(--amber); }
.selection-kpi-value.danger { color: var(--coral); }
.selection-kpi-value.success { color: var(--teal); }

/* ============================================================
   ATTENTION SECTION Workforce
   ============================================================ */
.selection-attention {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.selection-attention-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.selection-attention-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.selection-attention-scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.selection-attention-zone {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(30, 24, 57, .04);
}

.selection-attention-zone,
.selection-attention-center {
  border-top: 1px solid rgba(232, 101, 90, .2);
}

.selection-attention-zone {
  border-top: 1px solid rgba(232, 101, 90, .28);
}

.selection-attention-zone:first-child {
  border-top: 1px solid rgba(232, 101, 90, .28);
}

.selection-attention-disclosure {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 13px 'Inter';
  text-align: left;
  cursor: pointer;
}

.selection-attention-disclosure:hover {
  color: var(--coral);
}

.selection-attention-chevron {
  width: 14px;
  color: var(--coral);
  font-size: 14px;
}

.selection-attention-count {
  margin-left: auto;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(232, 101, 90, .12);
  color: var(--coral);
  font: 700 11px var(--font);
  text-align: center;
}

.selection-attention-children {
  padding: 0 0 5px 20px;
}

.selection-attention-center .selection-attention-disclosure {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 0;
}

.selection-attention-center .selection-attention-count {
  background: rgba(25, 23, 42, .08);
  color: var(--slate);
}

.selection-attention-items {
  padding: 0 0 4px 20px;
}

.selection-attention-items {
  max-height: 190px;
  overflow: auto;
}

.selection-attention-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(232, 101, 90, .2);
  font-size: 13px;
}

.selection-attention-item:last-child {
  border-bottom: none;
}

.selection-attention-item-text {
  color: var(--ink);
}

.selection-attention-item-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
}

.selection-attention-item-action:hover {
  text-decoration: underline;
}

.selection-attention-summary {
  padding: 0 0 10px 22px;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.5;
}

.selection-attention-summary strong {
  color: var(--ink);
  font-size: 16px;
  margin-right: 4px;
}

.selection-attention-summary-types {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-attention-mini-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--surface-alt);
  color: var(--ink);
  font: 700 11px var(--font);
  text-align: center;
}

@media (max-width: 1100px) {
  .selection-attention-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .selection-attention-scroll {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TABLE Workforce
   ============================================================ */
.selection-table-wrap {
  overflow-x: auto;
}

.selection-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.selection-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--line);
  font-weight: 600;
  color: var(--slate);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.selection-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.selection-table tr:hover {
  background: var(--surface-alt);
}

.selection-table .center-name {
  font-weight: 600;
  color: var(--ink);
}

.selection-table .position {
  color: var(--primary);
  font-weight: 600;
}

.selection-table .vacancy-type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.selection-table .vacancy-type.base {
  background: var(--teal-dim);
  color: var(--teal);
}

.selection-table .vacancy-type.managerial {
  background: var(--primary-dim);
  color: var(--primary);
}

.selection-table .date-target {
  font-family: var(--font);
  font-weight: 600;
}

.selection-table .date-target.urgent {
  color: var(--coral);
}

.selection-table .date-target.soon {
  color: var(--amber);
}

.selection-table .status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
}

.selection-table .status-badge.pending-am {
  background: var(--amber-dim);
  color: var(--amber);
}

.selection-table .status-badge.approved {
  background: var(--teal-dim);
  color: var(--teal);
}

.selection-table .status-badge.in-selection {
  background: var(--primary-dim);
  color: var(--primary);
}

.selection-table .status-badge.offer-prep {
  background: #e8f0f8;
  color: var(--primary);
}

.selection-table .status-badge.published {
  background: var(--teal-dim);
  color: var(--teal);
}

.selection-table .status-badge.covered {
  background: var(--teal-dim);
  color: var(--teal);
}

.selection-table .status-badge.cancelled {
  background: var(--coral-dim);
  color: var(--coral);
}

.selection-table .days-old {
  font-family: var(--font);
  font-size: 12px;
  color: var(--slate);
}

.selection-table .days-old.urgent {
  color: var(--coral);
  font-weight: 600;
}

.selection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.selection-action-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .15s;
}

.selection-action-btn.primary {
  background: var(--primary);
  color: #fff;
}

.selection-action-btn.primary:hover {
  background: var(--primary-strong);
}

.selection-action-btn.secondary {
  background: var(--surface-alt);
  color: var(--ink);
  border: 1px solid var(--line);
}

.selection-action-btn.secondary:hover {
  background: var(--surface);
}

.selection-action-btn.danger {
  background: var(--coral-dim);
  color: var(--coral);
  border: 1px solid var(--coral);
}

.selection-action-btn:disabled,
.wf-btn-mini:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ============================================================
   DRAWER Workforce
   ============================================================ */
.selection-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 23, 42, .4);
  z-index: 200;
  display: none;
  opacity: 0;
  transition: opacity .2s;
}

.selection-drawer-overlay.open {
  display: block;
  opacity: 1;
}

.selection-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}

.selection-drawer.open {
  transform: translateX(0);
}

.selection-drawer-header {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.selection-drawer-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}

.selection-drawer-subtitle {
  font-size: 13px;
  color: var(--slate);
  margin-top: 4px;
}

.selection-drawer-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--slate);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selection-drawer-close:hover {
  background: var(--surface-alt);
  color: var(--ink);
}

.selection-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.selection-drawer-section {
  margin-bottom: 20px;
}

.selection-drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate);
  margin-bottom: 10px;
}

.selection-drawer-field {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.selection-drawer-field:last-child {
  border-bottom: none;
}

.selection-drawer-field-label {
  color: var(--slate);
  font-weight: 500;
}

.selection-drawer-field-value {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.selection-drawer-actions {
  padding: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   WORKFLOW Visualization Workforce
   ============================================================ */
.selection-workflow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 16px;
  background: var(--surface-alt);
  border-radius: 12px;
}

.selection-workflow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
}

.selection-workflow-step.active {
  color: var(--primary);
}

.selection-workflow-step.completed {
  color: var(--teal);
}

.selection-workflow-step.pending {
  color: var(--muted);
}

.selection-workflow-arrow {
  color: var(--muted);
  font-size: 14px;
}

/* ============================================================
   DEMO BANNER Workforce
   ============================================================ */
.wf-demo-banner {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--amber, #BA7517);
  background: rgba(186, 117, 23, .08);
  font-size: 12.5px;
  color: var(--slate);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.wf-demo-banner b {
  color: var(--amber, #BA7517);
}

.selection-review-bar {
  margin: -6px 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--slate);
}

.selection-review-bar strong {
  color: var(--ink);
  margin-right: 4px;
}

.selection-feedback {
  display: none;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  background: var(--primary-dim);
  color: var(--primary);
}

.selection-feedback.error {
  display: block;
  background: var(--coral-dim);
  color: var(--coral);
}

.selection-feedback.ok {
  display: block;
  background: var(--teal-dim);
  color: var(--teal);
}

.selection-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--slate);
  font-size: 13px;
}

/* ============================================================
   RESPONSIVE Workforce
   ============================================================ */
@media (max-width: 900px) {
  .wf-sidebar {
    transform: translateX(-104%);
    transition: transform .2s ease;
    box-shadow: 18px 0 55px rgba(30, 24, 57, .18);
  }

  body.wf-sidebar-open {
    overflow: hidden;
  }

  body.wf-sidebar-open .wf-sidebar {
    transform: translateX(0);
  }

  .wf-shell-main {
    margin-left: 0;
  }

  .selection-drawer {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================================
   LEGACY COMPATIBILITY (Nexus original classes mapped to WF tokens)
   ============================================================ */

/* --- Header (legacy) --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--primary);
  color: #fff;
  padding: 12px 16px;
  box-shadow: var(--shadow);
}

@media (prefers-color-scheme: dark) {
  .app-header { color: #06201b; }
}

.app-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
}

.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand__mark { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand__sub { font-size: 0.75rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-user__name { font-size: 0.82rem; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }

/* --- Structure (legacy) --- */
.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
/*
 * Formularios en escritorio.
 *
 * Estaba en 460px: en una pantalla de 1440px el formulario quedaba como una
 * columna estrecha centrada, con dos tercios del lienzo vacíos, y la rejilla de
 * dos columnas no llegaba a activarse nunca porque su umbral son 560px. El
 * resultado era un formulario de móvil ampliado dentro de un escritorio.
 *
 * 460px sigue siendo el ancho cómodo para el acceso —un formulario de dos
 * campos no debe ocupar la pantalla entera—, así que se separa del formulario
 * de trabajo, que sí aprovecha el lienzo.
 */
.wrap--narrow { max-width: 460px; }

/*
 * Formulario de trabajo en escritorio.
 *
 * Con 880px sobre un viewport de 1440 el formulario ocupaba el 57%: quedaban
 * 436px muertos a la izquierda y el formulario medía 999px de alto, con scroll.
 * Se leía como una tarjeta estrecha flotando en un lienzo enorme, que es
 * exactamente el finding humano (Source R6 §8).
 *
 * 1180px deja márgenes cómodos en 1440 y permite tres columnas reales, que es
 * lo que reduce el alto y elimina el scroll innecesario.
 */
.wrap--form { max-width: 1180px; }

/* Campos que ocupan la fila completa aunque vivan dentro de una rejilla. */
.field--full { grid-column: 1 / -1; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }

h1 { font-size: 1.4rem; margin: 0 0 4px; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; margin: 0; letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; margin: 0; }
p { margin: 0; }
.sub { color: var(--slate); font-size: 0.88rem; }

/* --- Cards (legacy) --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card--flat { box-shadow: none; }
.card--tap { cursor: pointer; transition: border-color .15s ease, transform .1s ease; }
.card--tap:hover { border-color: var(--line-strong); }
.card--tap:active { transform: scale(0.995); }

.card__head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.card__title { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; }
.card__meta { color: var(--slate); font-size: 0.85rem; margin-top: 2px; }

/* --- Chips (legacy) --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--PENDING_AM { background: var(--amber-dim); color: var(--amber); border-color: currentColor; }
.chip--RETURNED_BY_AM { background: var(--coral-dim); color: var(--coral); border-color: currentColor; }
.chip--PENDING_RRHH { background: var(--blue-dim); color: var(--blue); border-color: currentColor; }
.chip--IN_SELECTION { background: var(--teal-dim); color: var(--teal); border-color: currentColor; }
.chip--DRAFT_LOCAL { background: var(--surface-alt); color: var(--slate); border-color: var(--line-strong); }
.chip--origin { background: var(--primary-dim); color: var(--primary); border-color: currentColor; }

/* --- Buttons (legacy) --- */
.btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  transition: background .15s ease, opacity .15s ease;
  min-height: 46px;
}
@media (prefers-color-scheme: dark) {
  .btn { color: #06201b; }
}
.btn:hover { background: var(--primary-strong); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-alt); }
.btn--danger { background: var(--coral); }
@media (prefers-color-scheme: dark) { .btn--danger { color: #2a0f0e; } }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 12px; min-height: 38px; font-size: 0.86rem; }
.btn--link { background: none; border: none; color: inherit; text-decoration: underline; padding: 6px; min-height: 0; font-size: 0.85rem; }

/* --- Forms (legacy) --- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); }
.field__hint { font-size: 0.78rem; color: var(--slate); }
.field__error { font-size: 0.8rem; color: var(--coral); font-weight: 600; }

input, select, textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  width: 100%;
  min-height: 46px;
}

/*
 * Las casillas y los radios NO son campos de texto: la regla de arriba les
 * daba 100% de ancho y 46px de alto, asi que se dibujaban como un cuadro
 * enorme que expulsaba su propia etiqueta de la linea. Se les devuelve su
 * tamano nativo y un area de pulsacion comoda.
 */
input[type='checkbox'], input[type='radio'] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
input[readonly] { background: var(--surface-alt); color: var(--ink-soft); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/*
 * Rejilla del formulario de solicitud.
 *
 * Móvil: una columna. Tableta y escritorio: dos, agrupando los campos que se
 * leen juntos (puesto/motivo, vacantes/horas, fecha/urgencia). Los campos de
 * texto largo y los de contexto ocupan la fila entera: partirlos en media
 * columna los haría menos legibles, no más densos.
 */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px 22px; }

/* Tableta: dos columnas. El salto a dos no espera al escritorio. */
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/*
 * Escritorio: tres columnas. Los campos cortos —vacantes, horas, fecha,
 * urgencia— caben en una fila y dejan de ocupar cuatro filas ellos solos.
 * Los campos de texto largo siguen tomando la fila entera con .field--full:
 * partir un textarea en un tercio lo haría menos legible, no más denso.
 */
@media (min-width: 1100px) {
  .form-grid { grid-template-columns: repeat(3, 1fr); }
  /* Centro y puesto son la cabecera de la solicitud: media fila cada uno. */
  .form-grid .field--wide { grid-column: span 2; }

  /*
   * Los textos largos ocupaban una fila entera cada uno y estiraban el
   * formulario hasta obligar a hacer scroll. A dos columnas siguen siendo
   * cómodos de leer y el formulario cabe de una vez.
   */
  .form-grid .field--text { grid-column: span 2; }
  .form-grid .field--text textarea { min-height: 88px; }

  /*
   * La casilla de Oficina no tiene etiqueta encima como los demás campos, así
   * que sin esto quedaba flotando a media altura, descolgada de su fila.
   */
  .form-grid .field--check { align-self: end; }
  .form-grid .field--check > label { min-height: 44px; margin: 0; }

  /*
   * Las acciones no son un campo del formulario: ocupaban el ancho completo y
   * «Enviar solicitud» se convertía en una banda de mil píxeles. Se alinean a
   * la derecha, que es donde se buscan.
   */
  .form-grid .row.field--actions { grid-column: 1 / -1; justify-content: flex-end; }
  .form-grid .row.field--actions .btn,
  .form-grid .row.field--actions button { flex: 0 0 auto; width: auto; min-width: 180px; }
}

.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill {
  position: relative;
  flex: 1 1 auto;
  min-width: 130px;
}
.radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-pill span {
  display: block;
  text-align: center;
  padding: 11px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 46px;
  line-height: 1.6;
}
.radio-pill input:checked + span { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }
@media (prefers-color-scheme: dark) { .radio-pill input:checked + span { color: var(--primary); } }
.radio-pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }

/* --- Tabs (legacy) --- */
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 620;
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  min-height: 40px;
}
.tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (prefers-color-scheme: dark) { .tab[aria-selected="true"] { color: #06201b; } }
.tab__count { opacity: .75; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* --- Detail (legacy) --- */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .detail-grid { grid-template-columns: 1fr 1fr; gap: 0 20px; } }
.detail-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.detail-item dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); font-weight: 650; margin: 0 0 3px; }
.detail-item dd { margin: 0; font-size: 0.98rem; }

/* --- Timeline (legacy) --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 26px; }
.timeline li::before {
  content: "";
  position: absolute; left: 5px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--primary);
}
.timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 9px; top: 20px; bottom: 2px;
  width: 2px; background: var(--line-strong);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline__title { font-weight: 620; font-size: 0.94rem; }
.timeline__meta { color: var(--slate); font-size: 0.8rem; }
.timeline__note {
  margin-top: 6px; padding: 8px 10px; background: var(--surface-alt);
  border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.87rem; color: var(--ink-soft);
}

/* --- Alerts (legacy) --- */
.alert { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid; }
.alert--error { background: var(--coral-dim); color: var(--coral); border-color: currentColor; }
.alert--info { background: var(--blue-dim); color: var(--blue); border-color: currentColor; }
.alert--warn { background: var(--amber-dim); color: var(--amber); border-color: currentColor; }

.empty { text-align: center; padding: 36px 16px; color: var(--slate); }
.empty__title { font-weight: 620; color: var(--ink-soft); margin-bottom: 4px; }

.message { min-height: 20px; font-size: 0.88rem; }
.message--error { color: var(--coral); font-weight: 600; }
.message--ok { color: var(--teal); font-weight: 600; }

/* --- Login (legacy) --- */
.login-hero { text-align: center; padding: 26px 0 10px; }
.login-hero__mark { font-size: 1.7rem; font-weight: 750; letter-spacing: -0.03em; color: var(--primary); }
@media (prefers-color-scheme: dark) { .login-hero__mark { color: var(--primary); } }
.login-hero__sub { color: var(--slate); font-size: 0.9rem; margin-top: 2px; }

/* --- Utilities (legacy) --- */
.hidden { display: none !important; }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }
.footer-note { text-align: center; color: var(--slate); font-size: 0.76rem; padding: 24px 16px 32px; }
.badge-readonly {
  display: inline-block; font-size: 0.72rem; font-weight: 650; color: var(--slate);
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
}
@media print { .app-header, .btn, .tabs { display: none; } }

/* ==========================================================================
   Subnavegación de Selección (Bandeja | KPIs) y módulo de indicadores.

   La subnavegación vive DENTRO del contenido del módulo: Selección sigue
   siendo el único módulo raíz del sidebar y no aparece una segunda barra
   vertical permanente que consuma ancho útil.
   ========================================================================== */

.selection-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.selection-subnav-tab {
  appearance: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}

.selection-subnav-tab:hover {
  color: var(--ink);
}

.selection-subnav-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Centro de integraciones: lenguaje de producto, no consola técnica. */
.integration-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.integration-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.integration-eyebrow { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-bottom: 6px; }
.integration-status { display: inline-flex; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; background: var(--surface-alt); color: var(--ink-soft); white-space: nowrap; }
.integration-status--connected { background: var(--teal-dim); color: var(--teal); }
.integration-status--auth_error, .integration-status--temporary_error { background: var(--coral-dim); color: var(--coral); }
.integration-status--connecting, .integration-status--incomplete, .integration-status--reauthorization_required { background: var(--amber-dim); color: var(--amber); }
.integration-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.integration-facts > div { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.integration-facts span, .integration-facts strong { display: block; overflow-wrap: anywhere; }
.integration-facts span { color: var(--ink-soft); font-size: 12px; margin-bottom: 4px; }
.integration-facts strong { font-size: 14px; }
.integration-form { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.integration-form-intro { font-weight: 700; font-size: 16px; }
.integration-actions { border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 760px) {
  .integration-card { padding: 16px; }
  .integration-card__head { flex-direction: column; }
  .integration-facts { grid-template-columns: 1fr; }
  .integration-facts > div { border-right: 0; }
}

/* Rejilla de indicadores: se adapta sola al ancho, sin desbordar en móvil. */
.wf-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.wf-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 0;
}

.wf-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  /* Una cifra larga se ajusta en lugar de ensanchar la tarjeta. */
  overflow-wrap: anywhere;
}

.wf-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
}

.wf-kpi-hint {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: .75;
  margin-top: 4px;
}

.kpi-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  /* flex-start, no flex-end: con align-items:flex-end las celdas se estiran
     y dejan un hueco muerto bajo cada campo. */
  align-items: flex-start;
}

.kpi-filters .field {
  min-width: 150px;
  flex: 1 1 150px;
  gap: 6px;
}

/* El rótulo del filtro es un span, así que no hereda el estilo de .field > label. */
.kpi-filters .field__label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.kpi-reconciliation {
  font-size: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.kpi-reconciliation.ok::before {
  content: '✓ ';
  font-weight: 700;
}

.kpi-reconciliation.warn {
  color: var(--danger, #b42318);
  font-weight: 600;
}

/* Controles del cajón de detalle para el tramo final. */
.selection-action-select,
.selection-action-input {
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .selection-subnav-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
  .kpi-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Consola de administración (ADMIN_TECH).

   Su pantalla principal es esta, no una bandeja de solicitudes: ADMIN_TECH
   configura quién existe y sobre qué centros, pero no opera Selección.
   ========================================================================== */

.admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
  align-items: start;
}

.admin-form .field {
  min-width: 0;
}

.admin-center-picker {
  width: 100%;
  min-height: 38px;
  max-height: 240px;
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

.admin-center-picker optgroup {
  font-weight: 700;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .admin-form {
    grid-template-columns: 1fr;
  }
  .admin-center-picker {
    max-height: 180px;
  }
}

/* ==========================================================================
   Indicadores: rejilla que usa el viewport.

   La bandeja se limita a 960 px porque es una tabla y leerla más ancha cansa.
   Un panel de cifras es lo contrario: apilarlo en una columna estrecha deja
   dos tercios de pantalla vacíos y obliga a hacer scroll para comparar datos
   que caben juntos.
   ========================================================================== */

/* Doble clase para ganar a `.wrap { max-width: 960px }`, que se declara antes
   en la hoja y con la misma especificidad. Y `width: 100%` porque el shell es
   un contenedor flex en columna: sin ella el hijo se queda en su ancho
   intrínseco (~660px) en lugar de ocupar la fila. */
.wrap.wrap--wide {
  max-width: 1600px;
  width: 100%;
}

.kpi-grid {
  display: grid;
  /* Cada panel pide ~320px; el navegador decide cuántas columnas caben, así
     que la misma regla sirve para escritorio, tableta y móvil. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.kpi-grid > .wf-card {
  margin-bottom: 0;
  min-width: 0;
}

/* Los indicadores principales en una fila horizontal, más densa que la
   rejilla general de tarjetas. */
.wrap.wrap--wide .wf-kpis {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 900px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   Próxima incorporación.

   Lo que el responsable del local necesita para recibir a la persona: quién
   viene, cuándo y cómo contactarla. Es una ficha para leer de un vistazo, no
   un listado de campos técnicos.
   ========================================================================== */

.handoff-card {
  margin-bottom: 18px;
  border-left: 3px solid var(--primary);
}

.handoff-hero {
  padding: 16px 18px 6px;
}

.handoff-hero__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.handoff-hero__meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.handoff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px 18px 18px;
}

.handoff-field {
  min-width: 0;
}

.handoff-field__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.handoff-field__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .handoff-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Próximas incorporaciones: superficie propia, no una columna lateral.

   Quien prepara una incorporación necesita verla de frente. Antes vivía
   comprimida dentro del cajón de detalle de una solicitud.
   ========================================================================== */

.incorporations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.incorporations-grid > .handoff-card {
  margin-bottom: 0;
}

/* En la superficie ancha la ficha respira más que dentro del cajón. */
.wrap--wide .handoff-hero {
  padding: 20px 22px 8px;
}

.wrap--wide .handoff-hero__name {
  font-size: 22px;
}

.wrap--wide .handoff-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 14px 22px 20px;
}

@media (max-width: 640px) {
  .incorporations-grid {
    grid-template-columns: 1fr;
  }
}

/* Credencial temporal: se muestra una sola vez, así que debe poder copiarse
   sin equivocarse de carácter. */
.temp-credential {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}

.temp-credential__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.temp-credential__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   FICHA PRINCIPAL EN EL CONTENIDO CENTRAL

   Contraejemplo que corrige: la ficha de una solicitud se pintaba como cajón
   `position: fixed` anclado al borde derecho, 480 px sobre un velo gris, con
   el resto del escritorio vacío detrás. El objeto que la persona consulta es
   la solicitud, así que ocupa el lienzo principal y participa del flujo del
   documento — no está posicionada de forma absoluta ni fija.

   El cajón lateral sigue existiendo, pero solo para lo secundario: editar los
   centros de un usuario o entregar una credencial temporal.
   ========================================================================== */

.detail-head {
  margin-bottom: 16px;
}

.detail-back {
  margin-bottom: 10px;
}

.detail-head__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.detail-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

/* Las acciones van arriba, al alcance: eran lo último del cajón y obligaban a
   recorrer toda la ficha para encontrar el botón que se venía a pulsar. */
.detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Los paneles se reparten el ancho en lugar de apilarse en una columna: a
   1280 px caben dos o tres, y se comparan datos sin desplazarse. */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  /* `stretch` y no `start`: con `start` cada panel se quedaba en su altura
     natural y la fila terminaba en escalera, con un hueco a la derecha de los
     paneles cortos. Igualadas, la fila se lee como una banda. */
  align-items: stretch;
  margin-top: 16px;
}

.detail-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 0;
}

.detail-panel__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--slate);
  margin-bottom: 12px;
}

.detail-field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.detail-field:last-child {
  border-bottom: none;
}

.detail-field__label {
  color: var(--slate);
  font-weight: 500;
}

.detail-field__value {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.handoff-card__actions {
  padding: 0 18px 18px;
}

/* La incorporación de la ficha ocupa toda la fila: es el dato más accionable
   en cuanto existe. */
.detail-grid + .handoff-card,
#view > .handoff-card {
  margin-bottom: 0;
}

/* Tableta: el contenido principal manda; dos paneles si caben. */
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Móvil: página a pantalla completa en una columna. Nunca una columna lateral
   comprimida, que es justo el defecto que se corrige. */
@media (max-width: 640px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-title {
    font-size: 20px;
  }

  .detail-field {
    flex-direction: column;
    gap: 2px;
  }

  .detail-field__value {
    text-align: left;
  }
}

/* El histórico ocupa su propia fila a todo el ancho y reparte los eventos en
   columnas: en la rejilla de tres columnas quedaba en una franja estrecha con
   medio escritorio vacío al lado. */
.detail-panel--full {
  margin-top: 16px;
}

.detail-panel--full .timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 24px;
}

@media (max-width: 640px) {
  .detail-panel--full .timeline {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
 * Señal de urgencia de la solicitud (UAT Feedback R1 §2).
 *
 * Debe reconocerse de un vistazo sin dramatizar: es una ficha que RRHH abre
 * decenas de veces al día, y un bloque rojo a pantalla completa cada vez
 * acabaría ignorándose. Un punto y una palabra bastan.
 *
 * Usa los tokens existentes, así que hereda el tema claro y el oscuro sin
 * declarar colores propios.
 * ------------------------------------------------------------------ */
.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.2;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface-alt);
}

.urgency-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Urgente: ámbar, no rojo. El rojo en este producto significa rechazo o
 * error, y una solicitud urgente no es ninguna de las dos cosas. */
.urgency-badge--urge {
  color: var(--amber);
  background: var(--amber-dim);
  border-color: var(--amber);
}

/* ------------------------------------------------------------------
 * Preferencias de aviso por email (UAT Feedback R1 §3).
 * ------------------------------------------------------------------ */
.email-pref {
  font-size: .82rem;
  color: var(--muted);
}

.email-pref--on {
  color: var(--green);
  font-weight: 600;
}

/* «Sin correo» no es un fallo, es lo que hay que resolver antes de poder
 * activar los avisos: se señala, no se alarma. */
.email-pref--missing {
  color: var(--amber);
}

.email-pref-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 500;
  cursor: pointer;
}

.email-pref-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

/* Un interruptor deshabilitado sin explicación se lee como una avería: el
 * motivo va siempre al lado. */
.email-pref-toggle input[type='checkbox']:disabled {
  cursor: not-allowed;
}

.email-pref-toggle input[type='checkbox']:disabled + span {
  color: var(--muted);
}

/* ------------------------------------------------------------------
 * Consola de usuarios: la tabla creció (UAT Feedback R1 §1 y §3).
 *
 * Al añadir Administración, Dirección RRHH y Avisos email, la columna de
 * acciones estiraba la tabla hasta sacarla del ancho de la pantalla y dejaba
 * los botones cortados por la derecha.
 *
 * Se acota el ancho de esa columna para que los botones se repartan en varias
 * líneas dentro de su celda en vez de ensanchar la fila entera. El contenedor
 * conserva su `overflow-x: auto` como último recurso en pantallas estrechas.
 * ------------------------------------------------------------------ */
.selection-table td .selection-actions {
  max-width: 260px;
}

/* Las columnas de sí/no no necesitan más ancho que su etiqueta: sin esto se
 * reparten el sobrante y estrechan las que sí llevan texto. */
.selection-table th:nth-child(6),
.selection-table th:nth-child(7),
.selection-table th:nth-child(8),
.selection-table th:nth-child(9),
.selection-table th:nth-child(10) {
  white-space: nowrap;
}

/* Distintivos de capacidad apilados dentro de su celda. */
.capability-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}