/* ============================================================================
   W-Flows — Sistema de diseño (Grupo Wende)
   ============================================================================
   Un solo archivo, compartido por todas las pantallas. Referenciarlo desde
   cada página nueva con:

     <link rel="stylesheet" href="assets/css/design-system.css">

   y copiar en el <head>, ANTES del link de arriba, el snippet bloqueante de
   tema que evita el flash de color (ver login.html):

     <script>
       (function () {
         var stored = localStorage.getItem('wflows-theme');
         var theme = stored || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
         document.documentElement.setAttribute('data-theme', theme);
       })();
     </script>

   Componentes disponibles (clases listas para usar en cualquier pantalla):
     Layout    .page-center (pantallas standalone: login) / .shell (pantallas
                 con sidebar+topbar, ver assets/js/shell.js)
     Marca     .brand / .brand-mark / .brand-word / .brand-tagline
     Texto     .text-title / .text-subtitle / .text-muted / .text-eyebrow
     Tarjeta   .card (+ .card--wide)
     Formulario .field / label / input / select / textarea / .file-field
                 / .combo-catalogo (+ __input / __opciones / __opcion) —
                 combobox con búsqueda para el campo tipo "catalogo"
     Botones   .btn (+ .btn--primary / .btn--ghost / .btn--success / .btn--danger
                 / .btn--warning / .btn--block / .btn--sm)
     Alertas   .alert (+ .alert--danger / --success / --warning / --info)
     Badges    .badge (+ .badge--success / --warning / --danger / --neutral)
                 → success = aprobado, warning = pendiente, danger = rechazado
     Toggle    .theme-switch (+ __icon --sun/--moon, __thumb, --inline para
                 topbar; ver assets/js/theme.js) / .icon-btn (botón cuadrado
                 genérico de topbar, ej. campanita)
     Shell     .sidebar / .topbar / .nav-item / .nav-badge
                 / .breadcrumb-bar (+ __sep, .breadcrumb__current) — ver WFlows.initShell
     Notif.    .notif-wrap / .notif-badge / .notif-panel / .notif-item (+ --unread)
                 — ver assets/js/notifications.js
     Apps      .app-switcher (+ __panel/__item/--active/__icon
                 /__label/__tagline) — ver assets/js/shell.js, WFlows.APPS
     Usuario   .user-chip (+ __avatar/__name, disparador) / .user-menu
                 (+ __panel/__header/-name/-meta/__item/--danger/__sep)
                 — ver assets/js/shell.js
     Listas    .request-list / .request-row (+ .request-row__urgency--overdue
                 / --soon / --normal) / .empty-state
     Timeline  .timeline / .timeline-item (+ --future / --chat) / .timeline-dot
                 (+ --success / --danger / --warning) / .timeline-comment
                 / .timeline-chat-bubble / .mention-chip / .timeline-avatar--invite
     Detalle   .detail-header / .detail-grid / .detail-sidebar / .detail-field
                 (+ --amount) / .dp-adjunto (+ __row, __name, __download,
                 -preview-wrap, -preview --pdf) / .timeline--avatar / .timeline-avatar
                 (+ --success / --warning / --danger) — ver detalle-solicitud.html
     Tabs      .tabs / .tab (+ .is-active)
     Tabla     .data-table-wrap / .data-table / .toolbar
     Kanban    .kanban / .kanban-column (+ __header/__title/__dot/__count/__list)
                 / .kanban-card (+ __id/__title/__meta/__amount/__footer
                 /__timestamp/__overdue) / .kanban-empty — var(--font-mono)
     Dashboard .stat-grid / .stat-card (+ __label/__value/__sub/--danger)
                 / .chart-card / .segmented (+ .is-active) / .chart-legend
                 / .quick-access-grid / .quick-access-card / .activity-feed
                 / .activity-item / .activity-dot (+ --success/--danger/--warning)
                 / .dashboard-columns / .perf-grid / .perf-card (+ --self)
                 / .rank-list / .rank-row (+ --self, __pos --top, __info, __value)
                 / .dist-list / .dist-row (+ __top, __label, __dot, __count,
                 __track, __bar) — desglose en barras horizontales coloreadas
                 (ej. empleados por marca, puestos por área en W-Team), ver
                 wteam-inicio.html
     Selector  .option-grid / .option-list / .option-card (+ .is-selected) / .step-back
                 / .proceso-grid / .proceso-card (+ __icon, __cat, __title, __desc,
                 colores --compras/--rrhh/--operaciones/--marketing/--general/--sin-categoria)
                 / .proceso-grupo-header (+ __icon)
     Avatares  .avatar-circle (+ --iniciales) / .avatar-picker-grid / .avatar-picker-option
                 (+ .is-selected) / .tag-chip (+ --selectable/--empty, .is-selected)
                 / .tag-chip-group / .approval-card (+ __header/__fields/__actions)
                 / .user-row (+ __main/__name/__meta/__actions) — ver
                 WFlows.renderAvatar (cuenta real) vs. WFlows.renderPuestoAvatar
                 (puesto de W-Team: cuenta vinculada > foto propia > genérico)
                 en wflows-utils.js
     Inbox     .req-tile (+ --warning/--success/--danger/--primary, __avatar)
                 / .filter-bar / .search-pill / .filter-pill-select / .count-pill
     Entrada   .entry-layout / .entry-panel--suite / .orbit-hero
                 (+ __eyebrow/__headline/__accent) / .orbit-stage / .orbit-ring
                 (+ --r1/--r2/--r3/--r4) / .orbit-node (+ __slot/__avatar
                 /__logo) / .orbit-center — ver login.html, WFlows.APPS,
                 ORBIT_PEOPLE, ORBIT_LOGOS, avatares_publicos()
     Organigrama .org-toolbar / .org-canvas-wrap (+ --fullscreen)
                 / .org-fullscreen-close / .org-node (+ --clickable,
                 --highlight, __tag/__title/__sub/__count/__hint) — ver
                 wteam-organigrama.html, auto-layout + expandir/contraer
                 desde puestos.reporta_a
     Manual    .sec / .sec-title — separador genérico de secciones largas
                 de solo lectura, ver wteam-puesto-manual.html
     Tour      .wt-tour-overlay/-card/-close/-eyebrow/-title/-body/-demo
                 /-footer/-dots(-dot,.is-active)/-actions — ver
                 assets/js/tutorial.js, WFlows.openOrgTutorial()
     Modal     .modal-overlay / .modal-card / .modal-close — overlay
                 genérico de "ficha rápida" de solo lectura (mismo look
                 que .wt-tour-overlay/-card, sin las partes propias del
                 tour), ver detail-panel.js (ficha de contacto de un
                 proveedor desde el detalle de una solicitud)
     Utilidad  .visually-hidden
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS — light (default) y dark ([data-theme="dark"])
   ---------------------------------------------------------------------------- */
:root {
  /* Marca: violeta cálido, no el índigo genérico de plantilla SaaS */
  --color-primary-rgb: 91, 52, 224;
  --color-primary: #5b34e0;
  --color-primary-hover: #4c29c7;
  --color-primary-active: #3f20ac;
  --color-primary-tint: #efe9fc;
  /* Extremo del degradé del titular de la landing de entrada (orbit-hero) —
     en light va hacia un violeta más profundo, en dark hacia un lavanda
     casi blanco (mismo criterio que el "reimagined" celeste de Raycast). */
  --color-headline-glow: #3f20ac;
  --color-on-primary: #ffffff;

  /* Neutros con leve tinte violeta (evita el gris frío "Bootstrap") */
  --color-bg: #f8f6fc;
  --color-surface: #ffffff;
  --color-surface-alt: #f2eefa;
  --color-border: #e6e1f2;
  --color-border-strong: #d3cbea;
  --color-text: #201c31;
  --color-text-secondary: #6c6480;
  --color-text-tertiary: #9791ac;

  /* Semánticos de estado — clave en toda la plataforma de aprobaciones */
  --color-success: #15803d;
  --color-success-bg: #e7f7ee;
  --color-success-border: #beebd1;

  --color-warning: #b45309;
  --color-warning-bg: #fef3df;
  --color-warning-border: #fbdfa6;
  --color-on-warning: #ffffff;

  --color-danger: #b91c1c;
  --color-danger-bg: #fdecec;
  --color-danger-border: #f6c6c6;

  /* Sombras con tinte cálido, no negro puro */
  --shadow-sm: 0 1px 2px rgba(32, 20, 61, 0.06);
  --shadow-md: 0 4px 16px rgba(32, 20, 61, 0.08);
  --shadow-lg: 0 20px 48px rgba(32, 20, 61, 0.14);

  --decor-opacity: 0.14;

  /* Tipografía */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Solo para IDs/timestamps en el Kanban — pila del sistema, sin webfont
     nuevo, da la "sensación de sistema" (Linear/Vercel) sin pedir nada más. */
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Espaciado generoso */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radios y transiciones consistentes */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-full: 999px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-primary-rgb: 132, 104, 242;
  --color-primary: #8468f2;
  --color-primary-hover: #9683f5;
  --color-primary-active: #6f52de;
  --color-headline-glow: #ede7ff;
  --color-primary-tint: #2c2350;
  --color-on-primary: #ffffff;

  --color-bg: #16121f;
  --color-surface: #1e1930;
  --color-surface-alt: #241e3a;
  --color-border: #342c4c;
  --color-border-strong: #453a66;
  --color-text: #f3f1fa;
  --color-text-secondary: #b4abcb;
  --color-text-tertiary: #857ba0;

  --color-success: #4ade80;
  --color-success-bg: #143323;
  --color-success-border: #1f5a3b;

  --color-warning: #fbbf24;
  --color-warning-bg: #3a2a0c;
  --color-warning-border: #6b4a11;
  --color-on-warning: #2b1a02;

  --color-danger: #f87171;
  --color-danger-bg: #3a1616;
  --color-danger-border: #6b2323;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.5);

  --decor-opacity: 0.22;

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--color-primary); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background var(--transition-base), color var(--transition-base);
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}

/* Decoración de marca: manchas suaves en violeta, muy sutiles */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--decor-opacity);
  background: var(--color-primary);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--transition-slow);
}
body::before { width: 440px; height: 440px; top: -140px; left: -120px; }
body::after { width: 380px; height: 380px; bottom: -160px; right: -100px; }

@media (max-width: 480px) {
  body::before { width: 280px; height: 280px; top: -100px; left: -100px; }
  body::after { width: 240px; height: 240px; bottom: -120px; right: -90px; }
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------------------- */
.page-center {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

/* ----------------------------------------------------------------------------
   4. TIPOGRAFÍA
   ---------------------------------------------------------------------------- */
.text-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.text-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.text-subtitle {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.text-muted { color: var(--color-text-secondary); }

@media (max-width: 380px) {
  .text-title { font-size: 1.3125rem; }
}

/* ----------------------------------------------------------------------------
   5. MARCA
   ---------------------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.brand-mark {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mark svg { width: 22px; height: 22px; }

.brand-word {
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
}

.brand-tagline {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
}

/* ----------------------------------------------------------------------------
   6. CARD
   ---------------------------------------------------------------------------- */
.card {
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
  transition: background var(--transition-base), border-color var(--transition-base);
  animation: wf-fade-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.card--wide { max-width: 560px; }

@media (max-width: 420px) {
  .card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); }
}

@keyframes wf-fade-slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   7. FORMULARIO
   ---------------------------------------------------------------------------- */
form { display: flex; flex-direction: column; gap: var(--space-5); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

input, select, textarea {
  min-height: 48px;
  padding: 0 var(--space-4);
  font-size: 1rem; /* >=16px evita el auto-zoom de iOS al enfocar */
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base);
}

textarea { min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; }

input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }

input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.22);
  background: var(--color-surface);
}

input:disabled, select:disabled, textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   7C. COMBOBOX de catálogo dinámico (campo tipo "catalogo") — input de
   búsqueda + lista filtrable, para catálogos que pueden crecer a cientos de
   filas (proveedores, personas) donde un <select> nativo no alcanza.
   ---------------------------------------------------------------------------- */
.combo-catalogo { position: relative; }

.combo-catalogo__opciones {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 20;
}

.combo-catalogo__opcion {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.combo-catalogo__opcion:hover { background: var(--color-surface-alt); }

.combo-catalogo__vacio {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
}

/* ----------------------------------------------------------------------------
   7B. ARCHIVOS (input type=file estilizado como botón + nombre seleccionado)
   ---------------------------------------------------------------------------- */
.file-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.file-field__name {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   8. BOTONES
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    box-shadow var(--transition-fast), transform 100ms ease, opacity var(--transition-fast);
}

.btn:active { transform: translateY(1px); }

.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--fs-sm); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--primary:active:not(:disabled) {
  background: var(--color-primary-active);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

/* Acciones de aprobar/rechazar (Detalle de solicitud, acciones rápidas en listas) */
.btn--success {
  background: var(--color-success);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn--success:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--success:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); }

.btn--danger {
  background: var(--color-danger);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--danger:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); }

/* Acciones "devolver" (Detalle de solicitud) — ni aprobación ni rechazo,
   un tercer tono a propósito para que se note que es otra clase de acción. */
.btn--warning {
  background: var(--color-warning);
  color: var(--color-on-warning);
  box-shadow: var(--shadow-sm);
}
.btn--warning:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--warning:active:not(:disabled) { filter: brightness(0.94); box-shadow: var(--shadow-sm); transform: translateY(0); }

.btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  animation: wf-spin 0.6s linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading .btn__label { opacity: 0.9; }

@keyframes wf-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   9. ALERTAS (feedback de estado — reutiliza los colores semánticos)
   ---------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.alert__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

.alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.alert--info { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-secondary); }

.alert.is-visible { animation: wf-fade-slide-in 0.25s ease both; }
@keyframes wf-fade-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   10. BADGES DE ESTADO
   aprobado = success (verde) · pendiente = warning (ámbar) · rechazado = danger (rojo)
   ---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.badge--success { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.badge--danger { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--color-danger-border); }
.badge--neutral { color: var(--color-text-secondary); background: var(--color-surface-alt); border-color: var(--color-border); }

/* ----------------------------------------------------------------------------
   11. THEME TOGGLE — switch real (track + pulgar + sol/luna), no un botón
   cuadrado que cambia de ícono sin más indicación de estado. Doble variante:
   fijo en la esquina (pantallas standalone: login, signup) e --inline
   (dentro de la topbar del shell). Ver assets/js/theme.js.
   ---------------------------------------------------------------------------- */
.theme-switch {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 10;
  width: 50px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-base);
}
.theme-switch:hover { border-color: var(--color-primary); }
.theme-switch:active .theme-switch__thumb { transform: scale(0.9); }
[data-theme="dark"] .theme-switch:active .theme-switch__thumb { transform: translateX(22px) scale(0.9); }

/* Variante para usar el mismo switch DENTRO de la topbar del shell, en vez
   de fijo en la esquina de una pantalla standalone. */
.theme-switch--inline {
  position: static;
  box-shadow: none;
}

.theme-switch__icon {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: color var(--transition-base);
}
.theme-switch__icon svg { width: 14px; height: 14px; }

/* Claro (default): el sol está "activo" — color propio en vez de gris
   apagado, para que se note de un vistazo en qué estado está. */
.theme-switch__icon--sun { color: var(--color-warning); }

.theme-switch__thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-slow), background var(--transition-base);
}

/* Oscuro: el pulgar se desliza a la derecha, la luna pasa a ser el ícono
   "activo" (blanco, sobre el pulgar violeta) y el sol se apaga. */
[data-theme="dark"] .theme-switch__thumb {
  transform: translateX(22px);
  background: var(--color-primary);
}
[data-theme="dark"] .theme-switch__icon--sun { color: var(--color-text-tertiary); }
[data-theme="dark"] .theme-switch__icon--moon { color: #fff; }

/* Botón cuadrado genérico de ícono para la topbar (campanita de
   notificaciones) — antes pedía prestadas las clases del theme toggle
   cuadrado; se separa en su propia clase para no romperse cuando el theme
   toggle pasó a ser un switch con otra forma. */
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease;
}
.icon-btn:hover { border-color: var(--color-primary); background: var(--color-surface-alt); box-shadow: var(--shadow-sm); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; }


/* ----------------------------------------------------------------------------
   13. SHELL DE APP (sidebar + topbar) — ver assets/js/shell.js
   ---------------------------------------------------------------------------- */
.shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  width: 252px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-4);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover { background: var(--color-surface-alt); color: var(--color-text); }
.nav-item.is-active { background: var(--color-primary-tint); color: var(--color-primary); font-weight: var(--fw-semibold); }
.nav-item__icon { display: flex; flex-shrink: 0; }
.nav-item__icon svg { width: 18px; height: 18px; }
.nav-item__label { flex: 1; }

.nav-badge {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 11px;
  font-weight: var(--fw-bold);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 5;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.topbar__spacer { flex: 1; }

/* Debajo del topbar, arriba del contenido — "Dashboard / Flujos / Nombre".
   La arma WFlows.initShell (assets/js/shell.js); las páginas que necesitan
   un nivel extra pasan breadcrumbExtra o lo actualizan después con
   WFlows.setBreadcrumbExtra() una vez que cargan su propio dato (nombre de
   un proceso, de una solicitud, etc). */
.breadcrumb-bar {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6) 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  flex-wrap: wrap;
}
.breadcrumb-bar a { color: var(--color-text-tertiary); text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--color-text-secondary); text-decoration: underline; }
.breadcrumb__current { color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.breadcrumb__sep { color: var(--color-border-strong); }

.shell__content {
  flex: 1;
  padding: var(--space-6);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.sidebar-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast);
}
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar-toggle:hover { border-color: var(--color-primary); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, 0.45);
  z-index: 25;
}
.sidebar-overlay.is-visible { display: block; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    z-index: 30;
    width: 264px;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .shell__content { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
}

/* ----------------------------------------------------------------------------
   14. USER CHIP (topbar) — disparador del menú de usuario, ver 14C abajo
   ---------------------------------------------------------------------------- */
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: none;
  padding: 6px var(--space-2) 6px 6px;
  border-radius: var(--radius-full);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.user-chip:hover { background: var(--color-surface-alt); }
.user-chip__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}
.user-chip__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; }

/* ----------------------------------------------------------------------------
   14B. CAMPANITA DE NOTIFICACIONES (topbar) — ver assets/js/notifications.js
   ---------------------------------------------------------------------------- */
.notif-wrap { position: relative; }

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--color-surface);
}

.notif-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 360px;
  max-width: calc(100vw - var(--space-6));
  max-height: 70vh;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.notif-list { overflow-y: auto; }

.notif-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-alt); }

.notif-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-item__icon svg { width: 15px; height: 15px; }
.notif-item.is-unread .notif-item__icon { background: var(--color-primary-tint); color: var(--color-primary); }

.notif-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item__msg { font-size: var(--fs-sm); line-height: 1.4; }
.notif-item.is-unread .notif-item__msg { font-weight: var(--fw-semibold); }
.notif-item__time { font-size: var(--fs-xs); color: var(--color-text-tertiary); }

@media (max-width: 560px) {
  .notif-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; max-height: 80vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ----------------------------------------------------------------------------
   14C. SELECTOR DE APPS (topbar) — ver assets/js/shell.js, WFlows.APPS
   ---------------------------------------------------------------------------- */
.app-switcher { position: relative; }

.app-switcher__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 240px;
  max-width: calc(100vw - var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  padding: var(--space-2);
}

.app-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.app-switcher__item:hover { background: var(--color-surface-alt); }
.app-switcher__item.is-active { background: var(--color-primary-tint); }

.app-switcher__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-switcher__icon svg { width: 16px; height: 16px; }

.app-switcher__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; }
.app-switcher__tagline { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; }

/* ----------------------------------------------------------------------------
   14D. MENÚ DE USUARIO (topbar) — ver assets/js/shell.js
   ---------------------------------------------------------------------------- */
.user-menu { position: relative; }

.user-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 240px;
  max-width: calc(100vw - var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  overflow: hidden;
}

.user-menu__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.user-menu__header-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3; }
.user-menu__header-meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; }

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.user-menu__item:hover { background: var(--color-surface-alt); }
.user-menu__item svg { width: 16px; height: 16px; flex-shrink: 0; }

.user-menu__sep { height: 1px; background: var(--color-border); margin: var(--space-1) 0; }

.user-menu__item--danger { color: var(--color-danger); }
.user-menu__item--danger:hover { background: var(--color-danger-bg); }

@media (max-width: 560px) {
  .user-menu__panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ----------------------------------------------------------------------------
   15. LISTAS DE SOLICITUDES (Bandeja, Mis Solicitudes, Todas las Solicitudes)
   ---------------------------------------------------------------------------- */
.request-list { display: flex; flex-direction: column; gap: var(--space-3); }

.request-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast);
}
.request-row:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.request-row__avatar { flex-shrink: 0; }
.request-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.request-row__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.request-row__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.request-row__amount { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: nowrap; }
.request-row__urgency { font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; min-width: 100px; text-align: right; }
.request-row__urgency--overdue { color: var(--color-danger); }
.request-row__urgency--soon { color: var(--color-warning); }
.request-row__urgency--normal { color: var(--color-text-tertiary); font-weight: var(--fw-regular); }

@media (max-width: 640px) {
  .request-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .request-row__title { white-space: normal; }
  .request-row__amount { text-align: left; }
  .request-row__urgency { text-align: left; min-width: 0; }
}

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}


/* ----------------------------------------------------------------------------
   16. TIMELINE (historial/auditoría — Detalle de solicitud)
   ---------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }

.timeline-item {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: -4px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item:last-child::before { display: none; }

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border-strong);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.timeline-dot--success { background: var(--color-success); }
.timeline-dot--danger { background: var(--color-danger); }
.timeline-dot--warning { background: var(--color-warning); }

.timeline-content { flex: 1; min-width: 0; }
.timeline-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.timeline-meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 2px; }
.timeline-comment {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* Paso todavía no creado (condicional a futuro) — visualmente de fondo */
.timeline-item--future { opacity: 0.55; }
.timeline-item--future .timeline-dot { background: transparent; border: 2px dashed var(--color-border-strong); }

/* Comentario de conversación intercalado en la timeline — tratamiento más
   liviano que una decisión formal (aprobar/rechazar, .timeline-comment):
   título sin negrita y burbuja más discreta, para no confundir "charla de
   contexto" con "decisión oficial" al primer vistazo. */
.timeline-item--chat .timeline-title { font-weight: var(--fw-regular); color: var(--color-text-secondary); }
.timeline-chat-bubble {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
}
.mention-chip {
  display: inline;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

/* Evento del sistema: se otorgó acceso a alguien por haberlo mencionado —
   trazable, nunca silencioso (ver instancia_invitados). */
.timeline-avatar--invite { background: var(--color-primary-tint); color: var(--color-primary); }


/* ----------------------------------------------------------------------------
   17. TABS (segmentado por estado — Mis Solicitudes, Todas las Solicitudes)
   ---------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-5);
}
.tab {
  padding: 8px 16px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tab:hover { color: var(--color-text); }
.tab.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------------------------------
   18. TABLA DE DATOS (Todas las Solicitudes)
   ---------------------------------------------------------------------------- */
.data-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  white-space: nowrap;
}
.data-table td.data-table__wrap-cell { white-space: normal; }
.data-table tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--color-surface-alt); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .text-right { text-align: right; }

.toolbar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.toolbar input, .toolbar select { min-height: 40px; }
.toolbar input { flex: 1; min-width: 200px; }


/* ----------------------------------------------------------------------------
   19. SELECTOR DE OPCIONES (elegir marca / elegir proceso — Nueva Solicitud)
   ---------------------------------------------------------------------------- */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.option-card {
  display: block;
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast);
}
.option-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.option-card.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.option-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--color-text); }
.option-card__meta { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 4px; }

/* Variante apilada (una por fila) — queda para donde una lista angosta
   siga teniendo sentido; el selector de proceso/plantilla usa .proceso-grid
   (abajo) en vez de esto, para no obligar a scrollear una lista larga. */
.option-list { display: flex; flex-direction: column; gap: var(--space-3); }
.option-list .option-card__meta { margin-top: 6px; line-height: var(--lh-normal); }

/* Grilla de "carpetas" para elegir un proceso/plantilla (Nueva Solicitud,
   Crear Proceso paso 0) — reemplaza la lista vertical de antes, que se
   volvía un scroll interminable apenas había varios procesos. Cada card
   lleva el color de su categoría en el ícono y en la etiqueta, para poder
   escanear por categoría de un vistazo sin leer cada título. */
.proceso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
}

.proceso-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 148px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast);
}
.proceso-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.proceso-card.is-selected { border-color: var(--color-primary); background: var(--color-primary-tint); }

.proceso-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.proceso-card__icon svg { width: 19px; height: 19px; }

.proceso-card__cat {
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.proceso-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-snug); }

.proceso-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: var(--lh-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Categorías administrables (categorias_proceso): el color de cada una se
   aplica inline (ver WFlows.procesoCardHtml/procesoGrupoHeaderHtml en
   wflows-utils.js, mismo patrón "color + '22'" que el resto del sitio).
   Esta clase es solo el fallback para procesos sin categoría asignada. */
.proceso-card__icon--sin-categoria, .proceso-card__cat--sin-categoria { color: var(--color-text-tertiary); }
.proceso-card__icon--sin-categoria { background: var(--color-surface-alt); }

/* Encabezado de cada grupo (categoría / "usados recientemente") arriba de
   su .proceso-grid — mismo patrón que .text-eyebrow pero con el color de
   la categoría en el ícono, para que el agrupador ya ancle el color. */
.proceso-grupo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.proceso-grupo-header__icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proceso-grupo-header__icon svg { width: 12px; height: 12px; }

.step-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.step-back:hover { color: var(--color-text); }


/* ----------------------------------------------------------------------------
   20. WIZARD DE PROCESOS (armar campos/pasos — Crear/editar proceso)
   ---------------------------------------------------------------------------- */
.builder-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.builder-row__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.builder-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.builder-row__remove { flex-shrink: 0; }
.builder-row__checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.builder-row__checkbox input { width: auto; min-height: 0; }

/* Arrastrar para reordenar (Nuevo proceso, paso 2 — campos del formulario) */
.builder-row__drag-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-tertiary);
  cursor: grab;
  padding-top: var(--space-1);
}
.builder-row__drag-handle:active { cursor: grabbing; }
.builder-row.is-dragging { opacity: 0.4; }
.builder-row.is-drop-target { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

@media (max-width: 560px) {
  .builder-row__grid { grid-template-columns: 1fr; }
  .builder-row { flex-direction: column; }
}

.wizard-preview {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.wizard-steps {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--fw-medium);
}
.wizard-step__num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.wizard-step.is-active { color: var(--color-primary); }
.wizard-step.is-active .wizard-step__num { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.wizard-step.is-done .wizard-step__num { background: var(--color-success); border-color: var(--color-success); color: #fff; }


/* ----------------------------------------------------------------------------
   21. DETALLE DE SOLICITUD (layout de 2 columnas + timeline con avatares)
   ---------------------------------------------------------------------------- */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 4px;
}
.detail-header__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.detail-header__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.detail-header__icon svg { width: 18px; height: 18px; }
.detail-header__meta { font-size: var(--fs-sm); margin-bottom: var(--space-6); }

.detail-grid {
  display: grid;
  /* minmax(0, ...) en vez de "fr" pelado -- una columna "fr" sola trae un
     mínimo implícito de "auto", que deja que contenido sin espacios (un
     nombre de archivo largo, ej.) empuje la columna entera más ancha que
     la tarjeta. minmax(0, ...) saca ese piso, así el contenido se parte/
     trunca DENTRO de la columna en vez de desbordarla. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* min-width:0 -- como ítem de .detail-grid, sin esto no se achica más
   allá de su propio contenido (mismo "auto" implícito que en .detail-field,
   un nivel más arriba) y deshace el minmax(0, ...) de la columna. */
.detail-sidebar { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; position: sticky; top: calc(var(--space-4) + 60px); }
@media (max-width: 860px) { .detail-sidebar { position: static; } }

.detail-card { max-width: none; }

.detail-field { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.detail-field:last-child { border-bottom: none; padding-bottom: 0; }
.detail-field__label { color: var(--color-text-secondary); flex-shrink: 0; }
/* min-width:0 -- sin esto, un flex item no se achica más allá del ancho
   de su contenido (default min-width:auto), así que un valor largo (un
   nombre de proveedor, el nombre de un archivo adjunto) empuja la fila
   entera más ancha que la tarjeta en vez de partirse en varias líneas o
   truncarse con el "…" que ya tenía .dp-adjunto__name. */
.detail-field__value { font-weight: var(--fw-semibold); text-align: right; min-width: 0; overflow-wrap: break-word; }
.detail-field__value--amount { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--color-primary); }

/* Adjunto real (Storage) en el panel de detalle — por default solo se ve el
   nombre; la previsualización de imagen/PDF (pesada, ocupa lugar) recién se
   arma y se muestra al hacer click en el nombre (ver toggleAdjuntoPreview en
   detail-panel.js). El ícono de descarga es un link aparte, directo. */
/* .dp-adjunto-slot envuelve esto en detalle-solicitud.html (span sin
   estilo propio) -- display:block + min-width:0 evita que, al ser un
   <span> inline conteniendo un flex (block-level), el ancho disponible
   no se herede bien de .detail-field__value y el nombre del archivo
   fuerce la fila más ancha que la tarjeta. */
.dp-adjunto-slot { display: block; min-width: 0; }
.dp-adjunto { margin-bottom: var(--space-3); }
.dp-adjunto:last-child { margin-bottom: 0; }

.dp-adjunto__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dp-adjunto__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.dp-adjunto__name:hover { border-color: var(--color-primary); }
.dp-adjunto__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dp-adjunto__download {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dp-adjunto__download:hover { border-color: var(--color-primary); color: var(--color-primary); }

.dp-adjunto-preview-wrap { margin-top: var(--space-2); }

.dp-adjunto-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.dp-adjunto-preview--pdf { width: 100%; height: 260px; }

/* Timeline con avatar por persona en vez de un punto genérico */
.timeline--avatar .timeline-item { gap: var(--space-4); }
.timeline--avatar .timeline-item::before { left: 17px; top: 40px; }
.timeline-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  z-index: 1;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
}
.timeline-avatar--success { background: var(--color-success-bg); color: var(--color-success); }
.timeline-avatar--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.timeline-avatar--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.timeline--avatar .timeline-content { padding-top: 2px; }
.timeline-role { color: var(--color-text-tertiary); font-weight: var(--fw-regular); }

/* Comprobante/voucher de impresión (Detalle de solicitud) — documento
   formal aparte de la UI interactiva: pensado para alguien que no conoce
   el sistema (respaldo entre las partes), así que nunca muestra la
   timeline con comentarios/menciones, solo los pasos formales resueltos y
   el resultado final. Oculto en pantalla, es lo único visible al imprimir
   — ver ICON-less renderPrintVoucher() en detail-panel.js. */
.dp-print-voucher { display: none; }
/* wteam-puesto-manual.html reusa las mismas clases .dp-voucher* (chrome de
   documento impreso genérico) — no hace falta un juego de clases aparte. */
.puesto-print-manual { display: none; }
.dp-voucher__header { text-align: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #000; }
.dp-voucher__brand { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
.dp-voucher__header h1 { font-size: 20px; margin: 4px 0; }
.dp-voucher__id { font-size: 11px; color: #555; font-family: var(--font-mono); }
.dp-voucher table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 12px; }
.dp-voucher table td, .dp-voucher table th { padding: 6px 8px; border: 1px solid #ccc; text-align: left; vertical-align: top; }
.dp-voucher table th { background: #f2f2f2; font-weight: 600; }
.dp-voucher__meta td:first-child { width: 180px; font-weight: 600; background: #f9f9f9; }
.dp-voucher h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 8px; }
.dp-voucher__resultado { font-size: 13px; font-weight: 700; padding: 8px 12px; border: 1px solid #000; display: inline-block; margin-bottom: 8px; }
.dp-voucher__footer { margin-top: 32px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 10px; color: #777; }

/* Impresión: solo el voucher, nada más de la app */
@media print {
  .sidebar, .topbar, .breadcrumb-bar, .theme-toggle, .step-back, .dp-imprimir, .sidebar-overlay,
  .detail-header, .detail-header__meta, .detail-grid, .manual-onscreen { display: none !important; }
  .shell, .shell__main, .shell__content { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .dp-print-voucher, .puesto-print-manual { display: block !important; color: #000; }
}


/* ----------------------------------------------------------------------------
   22. KANBAN (tablero de solicitudes — estética densa tipo Linear/Vercel,
   mismos tokens de marca, sin reinventar el lenguaje visual)
   ---------------------------------------------------------------------------- */
.kanban {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.kanban-column {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 380px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.kanban-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.kanban-column__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.kanban-column__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-column__dot--warning { background: var(--color-warning); }
.kanban-column__dot--success { background: var(--color-success); }
.kanban-column__dot--danger { background: var(--color-danger); }

.kanban-column__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}

.kanban-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding: 2px;
}

.kanban-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast);
}
.kanban-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.kanban-card__id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

.kanban-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin: 3px 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.kanban-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

.kanban-card__amount { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--color-text); }

.kanban-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.kanban-card__timestamp { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); }

.kanban-card__overdue {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  color: var(--color-danger);
}
.kanban-card__overdue svg { width: 10px; height: 10px; }

.kanban-empty {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .kanban { flex-direction: column; overflow-x: visible; }
  .kanban-column { max-width: none; width: 100%; }
  .kanban-column__list { max-height: none; }
}

/* ----------------------------------------------------------------------------
   23. DASHBOARD (stat cards, gráfico de tendencia, accesos directos,
       actividad reciente — Dashboard general y Dashboard de rendimiento)
   ---------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.stat-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-tint);
  color: var(--color-primary);
}
.stat-card__icon svg { width: 18px; height: 18px; }
.stat-card__icon--success { background: var(--color-success-bg); color: var(--color-success); }
.stat-card__icon--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.stat-card__icon--danger { background: var(--color-danger-bg); color: var(--color-danger); }

.stat-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}

.stat-card__value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.stat-card__sub {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
}
.stat-card__sub--danger {
  color: var(--color-danger);
  font-weight: var(--fw-semibold);
  background: var(--color-danger-bg);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.stat-card__link { display: block; text-decoration: none; color: inherit; }
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.segmented__option {
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.segmented__option.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.chart-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.quick-access-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-access-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-access-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.28);
}
.quick-access-card__icon svg { width: 20px; height: 20px; }

.quick-access-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.quick-access-card__sub { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 2px; }

.activity-feed {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-item:last-child { border-bottom: none; padding-bottom: 2px; }
.activity-item:first-child { padding-top: 2px; }

.activity-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text-tertiary);
}
.activity-icon svg { width: 15px; height: 15px; }
.activity-icon--success { background: var(--color-success-bg); color: var(--color-success); }
.activity-icon--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.activity-icon--warning { background: var(--color-warning-bg); color: var(--color-warning); }

.activity-item__text { font-size: var(--fs-sm); color: var(--color-text); line-height: var(--lh-snug); }
.activity-item__text strong { font-weight: var(--fw-semibold); }
.activity-time { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; margin-left: auto; padding-left: var(--space-2); }

.dashboard-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

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

.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.perf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.perf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.perf-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.perf-card__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}

.perf-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.perf-card__role { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; }

.perf-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-4);
}

.perf-stat__label { font-size: 10px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.perf-stat__value { font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-top: 3px; letter-spacing: -0.01em; }

.perf-card--self {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
  background: linear-gradient(180deg, var(--color-primary-tint) 0%, var(--color-surface) 140px);
}

.perf-card__sparkline { margin-top: var(--space-4); }

/* Ranking (Rendimiento) — lista compacta ordenada por una métrica, con
   posición, avatar y valor a la derecha. Mismo .segmented de arriba para
   togglear entre "tasa de aprobación" y "% en plazo". */
.rank-list { display: flex; flex-direction: column; }

.rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 6px;
  border-bottom: 1px solid var(--color-border);
}
.rank-row:last-child { border-bottom: none; }
.rank-row--self { background: var(--color-primary-tint); border-radius: var(--radius-md); }

.rank-row__pos {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  text-align: center;
}
.rank-row__pos--top { color: var(--color-primary); font-weight: var(--fw-bold); }

.rank-row__info { flex: 1; min-width: 0; }
.rank-row__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.rank-row__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; }

.rank-row__value {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  flex-shrink: 0;
}

/* Desglose en barras horizontales (Inicio de W-Team — empleados por marca,
   puestos por área): etiqueta + conteo arriba, barra de ancho proporcional
   al total debajo, coloreada con el color real de la marca/área (nunca un
   color hardcodeado, mismo criterio que el organigrama). */
.dist-list { display: flex; flex-direction: column; gap: var(--space-4); }

.dist-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.dist-row__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  min-width: 0;
}
.dist-row__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-row__dot { width: 9px; height: 9px; border-radius: var(--radius-full); flex-shrink: 0; }
.dist-row__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  padding-left: var(--space-3);
}
.dist-row__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  overflow: hidden;
}
.dist-row__bar { height: 100%; border-radius: var(--radius-full); min-width: 3px; }

/* ----------------------------------------------------------------------------
   24. AVATARES, ETIQUETAS Y ADMINISTRACIÓN DE CUENTAS (Mi Perfil, Usuarios,
       Etiquetas — foto/preset/iniciales, chips de etiqueta, cola de
       aprobación)
   ---------------------------------------------------------------------------- */
.avatar-circle {
  position: relative;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
}
.avatar-circle img,
.avatar-circle svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.avatar-circle--iniciales {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: var(--color-on-primary);
  font-weight: var(--fw-bold);
}

/* Selector de avatar (Mi Perfil): grilla de presets + opción "subir foto". */
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: var(--space-3);
  max-width: 420px;
}
.avatar-picker-option {
  padding: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  line-height: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.avatar-picker-option:hover { transform: translateY(-2px); }
.avatar-picker-option.is-selected {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-primary);
}

/* Chips de etiqueta: mostrar (solo lectura) y elegir (checklist toggle). */
.tag-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.tag-chip--selectable {
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.tag-chip--selectable:hover { border-color: var(--color-border-strong); }
.tag-chip--selectable.is-selected {
  background: var(--color-primary-tint);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--fw-semibold);
}
.tag-chip--empty {
  color: var(--color-text-tertiary);
  font-style: italic;
  border-style: dashed;
}

/* Cola de aprobación de cuentas (usuarios.html). */
.approval-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
}

.approval-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.approval-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.approval-card__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; }

.approval-card__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 520px) {
  .approval-card__fields { grid-template-columns: 1fr; }
}

.approval-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Fila de "Todos los usuarios" (usuarios.html, tab Todos). */
.user-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.user-row:last-child { border-bottom: none; }
.user-row__main { flex: 1 1 220px; min-width: 0; }
.user-row__name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.user-row__meta { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: 1px; }
.user-row__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ----------------------------------------------------------------------------
   25. INBOX (Bandeja / Todas las Solicitudes) — icon-tile con avatar
       superpuesto, pills de filtro, layout de lista + panel de detalle
   ---------------------------------------------------------------------------- */
.req-tile {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}
.req-tile svg { width: 22px; height: 22px; }
.req-tile--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.req-tile--success { background: var(--color-success-bg); color: var(--color-success); }
.req-tile--danger { background: var(--color-danger-bg); color: var(--color-danger); }
.req-tile--primary { background: var(--color-primary-tint); color: var(--color-primary); }

.req-tile__avatar {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  overflow: hidden;
  background: var(--color-surface);
}

/* Variante chica — filas de tabla y tarjetas de tablero densas (Todas las
   Solicitudes), donde el req-tile de 44px de siempre no entra. Mismo
   radio proporcional (~0.31 del lado), no un valor suelto. */
.req-tile--sm { width: 36px; height: 36px; border-radius: 11px; }
.req-tile--sm svg { width: 18px; height: 18px; }
.req-tile--sm .req-tile__avatar { width: 16px; height: 16px; }

/* Barra de filtros/búsqueda tipo pastilla. */
.filter-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-5);
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  min-height: 40px;
  flex: 1 1 220px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.search-pill:focus-within { border-color: var(--color-primary); background: var(--color-surface); }
.search-pill svg { width: 16px; height: 16px; color: var(--color-text-tertiary); flex-shrink: 0; }
.search-pill input {
  border: none;
  background: none;
  padding: 0;
  min-height: auto;
  flex: 1;
  font-size: var(--fs-sm);
}
.search-pill input:focus { outline: none; box-shadow: none; background: none; }

.filter-pill-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 32px 9px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239791ac' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  min-height: 40px;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-pill-select:hover { border-color: var(--color-border-strong); }

.count-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------------------
   26. UTILIDADES
   ---------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ----------------------------------------------------------------------------
   27. LANDING DE ENTRADA (login.html) — login + vidriera de WFlows.APPS
   ---------------------------------------------------------------------------- */
/* Dos columnas: login (reusa .page-center + .card sin cambios) a la
   izquierda, vidriera de la suite a la derecha. .page-center NO se toca acá
   — lo sigue usando signup.html y el error bloqueante de shell.js tal cual. */
.entry-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
}

.entry-layout .page-center { padding: var(--space-6); }
.entry-layout .card { animation: suite-card-in var(--transition-slow) both; }

/* Fondo propio con profundidad — un panel opaco al lado de las manchas de
   body::before/after (position:fixed, z-index:-1) las taparía del todo acá,
   así que el panel suma las suyas: mismo criterio (círculo violeta
   desenfocado, muy sutil) pero un poco más presente, es la puerta de
   entrada. */
.entry-panel--suite {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-surface-alt);
  border-left: 1px solid var(--color-border);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.entry-panel--suite::before,
.entry-panel--suite::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}
.entry-panel--suite::before {
  width: 420px;
  height: 420px;
  top: -120px;
  right: -60px;
  background: var(--color-primary);
  opacity: calc(var(--decor-opacity) * 1.6);
}
.entry-panel--suite::after {
  width: 320px;
  height: 320px;
  bottom: -110px;
  left: 8%;
  background: var(--color-primary-active);
  opacity: calc(var(--decor-opacity) * 1.3);
}

@media (max-width: 860px) {
  .entry-layout { grid-template-columns: 1fr; }
  .entry-panel--suite { border-left: none; border-top: 1px solid var(--color-border); padding: var(--space-6) var(--space-4); }
}

/* Diagrama orbital, referencia directa al hero de raycast.com/es: 4
   anillos concéntricos con ~10 avatares (hoy placeholders con iniciales —
   WFlows no tiene todavía una base de usuarios real para mostrar fotos;
   cuando la tenga, ORBIT_PEOPLE en login.html se reemplaza por un query a
   profiles.avatar_url con el mismo fallback de iniciales que ya usa
   WFlows.renderAvatar en el shell). El centro es la única pieza real y
   funcional: el ícono de la primera app de WFlows.APPS, linkeado. */
.orbit-hero { position: relative; text-align: center; max-width: 680px; margin: 0 auto; }

/* Fuente de luz detrás del titular — mucho más grande y difusa que las
   manchas de esquina de .entry-panel--suite (esas siguen ahí, esta es la
   dominante, centrada en el contenido). */
.orbit-hero::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: var(--color-primary);
  opacity: 0.18;
  filter: blur(130px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.orbit-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4) 6px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.orbit-hero__eyebrow svg { width: 16px; height: 16px; }

/* fw-extrabold (800) es a propósito el techo, no fw:900 — la hoja de
   Google Fonts de login.html solo carga pesos hasta 800; pedir 900 sin
   ese archivo cargado el navegador lo sintetiza (negrita falsa, se ve
   peor que el 800 real). */
.orbit-hero__headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: var(--space-5) 0 0;
}
/* Degradé real (no solo un color plano) para que el remate del titular
   tenga el mismo peso que el "reimagined." celeste de la referencia. */
.orbit-hero__accent {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-headline-glow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Radio de cada uno de los 4 anillos en custom properties — responsive de
   verdad: login.html lee el valor YA RESUELTO por el navegador con
   getComputedStyle en el momento de armar los nodos, así el JS nunca
   puede desincronizarse del tamaño real que terminó aplicando el CSS en
   ese viewport (y se re-lee solo si la ventana cambia de breakpoint). */
.orbit-stage {
  --orbit-r1: 100px;
  --orbit-r2: 190px;
  --orbit-r3: 280px;
  --orbit-r4: 370px;
  position: relative;
  width: calc(var(--orbit-r4) * 2);
  height: calc(var(--orbit-r4) * 2);
  margin: var(--space-7) auto 0;
}

@media (max-width: 860px) {
  .orbit-stage { --orbit-r1: 60px; --orbit-r2: 115px; --orbit-r3: 170px; --orbit-r4: 225px; }
}
@media (max-width: 460px) {
  .orbit-stage { --orbit-r1: 40px; --orbit-r2: 75px; --orbit-r3: 110px; --orbit-r4: 145px; }
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed var(--color-border-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
}
.orbit-ring--r1 { width: calc(var(--orbit-r1) * 2); height: calc(var(--orbit-r1) * 2); }
.orbit-ring--r2 { width: calc(var(--orbit-r2) * 2); height: calc(var(--orbit-r2) * 2); }
.orbit-ring--r3 { width: calc(var(--orbit-r3) * 2); height: calc(var(--orbit-r3) * 2); }
.orbit-ring--r4 {
  width: calc(var(--orbit-r4) * 2);
  height: calc(var(--orbit-r4) * 2);
  box-shadow: 0 0 80px 10px rgba(var(--color-primary-rgb), 0.06);
}

/* .orbit-spin es lo que gira (contiene los nodos de ese anillo); .orbit-ring
   es el trazo punteado quieto de fondo — por eso son elementos separados.
   Cada anillo gira a velocidad y sentido propios (60-90s, alternando
   horario/antihorario) para que se sienta "vivo" y no como un carrusel
   sincronizado. */
.orbit-spin { position: absolute; inset: 0; }
.orbit-spin--r1 { animation: orbit-cw 65s linear infinite; }
.orbit-spin--r2 { animation: orbit-ccw 75s linear infinite; }
.orbit-spin--r3 { animation: orbit-cw 85s linear infinite; }
.orbit-spin--r4 { animation: orbit-ccw 90s linear infinite; }

@keyframes orbit-cw { to { transform: rotate(360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }

/* Cada nodo se ubica con rotate(ángulo) + translate(radio) sobre el centro
   del stage — así queda en el punto exacto del anillo sin cálculos de
   x/y. .orbit-node__slot es SOLO posición/tamaño/contrarrotación (mismo
   par de keyframes que su anillo, sentido opuesto, para no girar sobre sí
   mismo — solo cambia de posición en la órbita); el tratamiento visual de
   adentro varía según qué haya en ese nodo:
     .orbit-node__avatar   — placeholder con iniciales (fondo de color)
     .orbit-node__logo     — logo de marca (fondo neutro + <img> contain)
     .avatar-circle        — persona real, generado por WFlows.renderAvatar
                              (assets/js/avatar-presets.js), ya se trae su
                              propio estilo, el slot no le agrega nada.
   El tamaño (32-56px) se setea inline por nodo desde login.html — varía
   dentro de un mismo anillo, no es un valor por-anillo. */
.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
.orbit-node__slot { position: absolute; }
.orbit-spin--r1 .orbit-node__slot { animation: orbit-ccw 65s linear infinite; }
.orbit-spin--r2 .orbit-node__slot { animation: orbit-cw 75s linear infinite; }
.orbit-spin--r3 .orbit-node__slot { animation: orbit-ccw 85s linear infinite; }
.orbit-spin--r4 .orbit-node__slot { animation: orbit-cw 90s linear infinite; }

.orbit-node__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-md);
}

.orbit-node__logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15%;
}
.orbit-node__logo img { width: 100%; height: 100%; object-fit: contain; }

/* Centro del stage: la única pieza clickeable — el ícono real de
   WFlows.APPS[0] (ver login.html), ancla quieta en medio de las órbitas. */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg), 0 0 90px 12px rgba(var(--color-primary-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--transition-base);
}
.orbit-center:hover { transform: translate(-50%, -50%) scale(1.06); }
.orbit-center svg { width: 36px; height: 36px; color: var(--color-primary); }

/* ============================================================================
   ORGANIGRAMA (W-Team) — ver wteam-organigrama.html. Auto-layout en el
   cliente a partir de puestos.reporta_a (nunca coordenadas guardadas);
   estas clases solo dan estilo a cada nodo/breadcrumb, no a la posición.
   ============================================================================ */
.org-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.org-canvas-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 420px;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: grab;
  touch-action: none;
}
.org-canvas-wrap:active { cursor: grabbing; }
#org-svg { width: 100%; height: 100%; user-select: none; }
#org-g { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

.org-node {
  position: relative;
  width: 100%; height: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-border-strong);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans, sans-serif);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.org-node--clickable { cursor: pointer; }
.org-node--clickable:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); background: var(--color-surface-alt); }
/* Fila avatar + texto -- reemplazó al bloque de texto suelto que era el
   único hijo flex de .org-node cuando se sumó la fotito del puesto. */
.org-node__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.org-node__avatar { flex-shrink: 0; }
.org-node__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.org-node__tag { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-node__title { font-size: 14px; font-weight: var(--fw-bold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-node__sub { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 34px; }
.org-node__hint {
  position: absolute; top: 8px; right: 10px;
  font-size: 14px; color: var(--color-primary);
  opacity: 0; transform: translateX(-2px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}
.org-node--clickable:hover .org-node__hint { opacity: 1; transform: translateX(0); }
.org-node--highlight { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-tint), var(--shadow-md) !important; }

.org-node__count {
  position: absolute; bottom: 8px; right: 10px;
  display: flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border: 1.5px solid var(--color-primary);
  border-radius: 20px;
  padding: 3px 9px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans, sans-serif);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.org-node__count:hover { transform: scale(1.08); }
.org-node__count svg { width: 11px; height: 11px; transition: transform var(--transition-fast); }
.org-node__count.is-expanded { background: var(--color-primary); color: #fff; }
.org-node__count.is-expanded svg { transform: rotate(180deg); }

/* Separador genérico de secciones en una pantalla larga de solo lectura
   (ver wteam-puesto-manual.html) — deliberadamente mínimo, cada sección
   arma su propio contenido interno con estilos puntuales. */
.sec { margin-bottom: 36px; }
.sec-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: var(--space-4); }

/* Tour guiado del organigrama (ver assets/js/tutorial.js,
   WFlows.openOrgTutorial) — overlay con datos de ejemplo inventados,
   nunca datos reales del grupo. */
.wt-tour-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 16, 32, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.wt-tour-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%;
  padding: var(--space-6);
  position: relative;
}
.wt-tour-close { position: absolute; top: var(--space-4); right: var(--space-4); }
.wt-tour-eyebrow { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.wt-tour-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); margin-bottom: var(--space-2); padding-right: var(--space-6); }
.wt-tour-body { font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-normal); margin-bottom: var(--space-5); }
.wt-tour-demo { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); min-height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); overflow: hidden; }
.wt-tour-footer { display: flex; align-items: center; justify-content: space-between; }
.wt-tour-dots { display: flex; gap: 6px; align-items: center; }
.wt-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); transition: all var(--transition-fast); }
.wt-tour-dot.is-active { background: var(--color-primary); width: 18px; border-radius: 4px; }
.wt-tour-actions { display: flex; gap: var(--space-2); }

/* Modal genérico de "ficha rápida" de solo lectura -- mismo patrón visual
   que .wt-tour-overlay/-card, sin las partes propias del tour (dots,
   demo, footer). Reusable para cualquier vista corta que no amerita una
   página aparte, ej. datos de contacto de un proveedor. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20, 16, 32, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 420px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: var(--space-6);
  position: relative;
}
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); }

.org-canvas-wrap--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100vh;
  border-radius: 0;
  border: none;
}
body.org-fullscreen-active { overflow: hidden; }
.org-fullscreen-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1001;
}