/* niza/static/tokens.css
 * Design tokens de Niza — estilo Stripe financiero: DM Sans (headings) + Inter (body),
 * navy + dorado + crema. Sin serif, sin monospace.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* === Primitivos (paleta premium) === */
  --color-deep: #0A1628;       /* navy profundo — autoridad */
  --color-ocre: #C9A84C;       /* dorado — premium financiero */
  --color-accent-soft: #F5EDD6; /* dorado suave — fondos/hover */
  --color-stone: #F8F7F4;      /* crema — fondo general (no gris frío) */
  --color-card: #FFFFFF;

  --color-success: #1A6B3C;
  --color-danger: #991B1B;
  --color-warning: #B45309;
  --color-info: #3D5A7A;

  --color-ink: #1A1A2E;
  --color-muted: #6B6B7B;
  --color-line: #E8E4DC;

  /* === Semánticos === */
  --bg-app: var(--color-stone);
  --bg-card: var(--color-card);
  --bg-header: var(--color-deep);
  --bg-sidebar: var(--color-deep);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-muted);
  --text-on-deep: var(--color-stone);
  --text-accent: var(--color-deep);
  --text-link: var(--color-info);

  --border-default: var(--color-line);
  --border-strong: var(--color-muted);
  --border-deep: var(--color-deep);

  --state-success-bg: #D1FAE5;
  --state-success-fg: var(--color-success);
  --state-danger-bg: #FEE2E2;
  --state-danger-fg: var(--color-danger);
  --state-warning-bg: #FEF3C7;
  --state-warning-fg: var(--color-warning);

  --accent-primary: var(--color-ocre);
  --accent-soft: var(--color-accent-soft);

  /* Alias de compatibilidad. Hojas y estilos en línea escritos en otro momento piden
     estos nombres; sin definirlos, `var()` no resuelve y la declaración COMPLETA se cae
     (no hay error visible: simplemente no hay borde, ni padding, ni color atenuado).
     Apuntan al token real para que no exista una segunda paleta por la puerta de atrás. */
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border-default);
  --color-accent: var(--accent-primary);
  --surface: var(--bg-card);
  --bg-surface: var(--bg-card);

  /* === Tipografía (Stripe: DM Sans headings + Inter body) === */
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;     /* body, UI, sidebar, tablas */
  --font-heading: 'DM Sans', 'Inter', sans-serif;                 /* títulos, KPI, montos */
  --font-num: 'DM Sans', 'Inter', sans-serif;                     /* números con tabular-nums */
  --font-mono: 'DM Sans', 'Inter', sans-serif;                    /* compat: ya no es mono */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* === Espaciado (base 4) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* === Elevación === */
  --shadow-sm: 0 1px 2px rgba(15, 44, 68, 0.04);
  --shadow-md: 0 2px 6px rgba(15, 44, 68, 0.06);
  --shadow-lg: 0 6px 16px rgba(15, 44, 68, 0.08);

  /* === Radios === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* Reset y defaults globales */

body {
  margin: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Números financieros: DM Sans con cifras tabulares (alinean en columnas sin romper la
   coherencia visual). NO monospace. */
.numeric-cell,
.amount,
.rfc,
.folio,
.date-cell {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Componentes core de Niza */

.niza-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  /* Un correo o una CLABE son una sola palabra larguísima: sin esto fijan el ancho
     mínimo de la tarjeta y la sacan del margen en vez de partirse. */
  overflow-wrap: break-word;
}

.niza-button-primary {
  background-color: var(--color-deep);
  color: var(--text-on-deep);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.niza-button-primary:hover {
  background-color: #1A3D58; /* deep ligeramente más claro */
}

.niza-button-secondary {
  background-color: transparent;
  color: var(--color-deep);
  border: 1px solid var(--color-deep);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

/* Descarga a CSV: discreto a propósito. Es una salida de datos, no un paso del flujo —
   compite con el botón primario si se le da peso, y quien viene a operar acaba exportando. */
.niza-button-descarga {
  background: none;
  border: none;
  color: var(--color-muted, #6B7B8C);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

.niza-button-descarga:hover {
  color: var(--color-deep);
  text-decoration: underline;
}

/* Renglón de botones de descarga (Excel + CSV lado a lado). Ya se usaba sin definir. */
.niza-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.niza-badge-success {
  background-color: var(--state-success-bg);
  color: var(--state-success-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

.niza-badge-danger {
  background-color: var(--state-danger-bg);
  color: var(--state-danger-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* Sidebar */

.niza-sidebar {
  background: linear-gradient(180deg, #0A1628 0%, #0D1F3C 100%);
  color: var(--text-on-deep);
  font-family: var(--font-sans);
  padding: var(--space-6) var(--space-4);
  width: 240px;
  flex: 0 0 auto;
  min-height: 100vh;
}

/* Imagotipo (mismo asset que la web pública) como marca por defecto del sidebar cuando
   el tenant no sube su propio logo; ver niza/app/ui/layout.py. */
.niza-logo {
  display: block;
  height: 26px;
  width: auto;
  padding: 0 var(--space-4) var(--space-4) var(--space-4);
}

.niza-sidebar .nav-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}

.niza-sidebar .nav-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.95);
}

.niza-sidebar .nav-item.active {
  color: #FFFFFF;
  font-weight: 500;
  border-left: 3px solid var(--accent-primary);
  background-color: rgba(201, 168, 76, 0.15);
}

/* Métricas destacadas en dashboard (donde vive el ocre) */

.niza-metric-hero {
  font-family: var(--font-heading);
  font-size: 36px;                 /* KPI secundarios */
  font-weight: 700;
  color: var(--color-deep);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.niza-metric-hero--grande { font-size: 40px; }   /* Captación, Margen (más importantes) */
.niza-metric-hero--danger { color: var(--color-danger); }

.niza-metric-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.niza-metric-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* KPI card: línea dorada arriba (premium) en vez de la línea decorativa interna */
.niza-kpi {
  border-top: 3px solid var(--accent-primary);
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.06);
}
.niza-kpi--danger { border-top-color: var(--color-danger); }

/* === Utilitarias y layout (solo composición de tokens; sin hex nuevo) === */

.niza-layout { display: flex; min-height: 100vh; max-width: 100%; }
.niza-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-8);
  background-color: var(--bg-app);
}

/* Vistas que se dibujan como página suelta (avisos, tableros por rol) reusan la clase y
   acaban ANIDADAS dentro del shell: sin esto pagan el padding dos veces y quedan más
   metidas que el resto de los módulos. */
.niza-content .niza-content { padding: 0; min-height: 0; }

/* La barra superior es una franja, no un bloque más de la página: se saca del padding
   de `.niza-content` para que su línea inferior llegue de extremo a extremo y su
   contenido quede alineado con el título del módulo, no 2rem más adentro. */
.niza-topbar-wrap {
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
}

.niza-topbar {
  background-color: var(--color-card);
  color: var(--color-ink);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.niza-topbar-banner {
  background: var(--color-danger);
  color: var(--color-card);
  padding: var(--space-2) var(--space-8);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
}

.niza-page-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-accent);
  margin: 0 0 var(--space-4) 0;
}

.niza-section-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-accent);
  border-bottom: 1px solid var(--accent-primary);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Saludo del dashboard (Inter) */
.niza-greeting { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 500;
  color: var(--color-deep); margin-top: -0.25rem; }
.niza-greeting-date { color: var(--text-secondary); font-size: var(--text-sm);
  margin: 0 0 var(--space-6) 0; }

.niza-metric-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.niza-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* Un hijo de grid trae `min-width:auto`: NO se encoge por debajo del ancho de su
   contenido, así que una tabla ancha dentro de una tarjeta estiraba la columna (y con
   ella la página). `min-width:0` deja que el contenedor de scroll haga su trabajo. */
.niza-grid > *, .niza-grid-2 > *,
.niza-form-grid > *, .niza-check-grid > * { min-width: 0; }

/* Variante para bloques anchos (tablas de concentración): máx 2 por renglón. */
.niza-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-6);
}

/* El encabezado de área tiene que leerse como ETIQUETA, no como un ítem más: antes solo
   se distinguía por ser un poco más tenue y a simple vista competía con los enlaces de
   arriba. Más chico, más espaciado y con una línea que separa el bloque anterior. */
.niza-sidebar-group {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.34);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: var(--space-6) 0 var(--space-3) var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-right: var(--space-4);
}

/* Tu área va primero y se marca discreta: es orientación, no jerarquía. Un acento
   demasiado fuerte convertiría el encabezado en un botón que nadie puede pulsar. */
.niza-sidebar-group--propia { color: rgba(255, 255, 255, 0.62); }

/* Franja «Inicio» (Dashboard, Mi día, Agentes): va SIN título porque no es un área del
   negocio. Solo reserva el espacio que ocuparía el encabezado, para que los tres accesos
   diarios no queden pegados al logo. La regla de abajo le pone una línea de separación
   al primer encabezado real que venga después. */
.niza-sidebar-inicio {
  height: var(--space-2);
}

.niza-sidebar-inicio ~ .niza-sidebar-group:first-of-type {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.niza-badge-warning {
  background-color: var(--state-warning-bg);
  color: var(--state-warning-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
}

/* Tablas de datos financieros */
/* El scroll horizontal de las tablas financieras vive AQUÍ, no en la tabla. Una <table>
   con width:100% no baja de su ancho mínimo de contenido: con 7-8 columnas (Cobranza,
   Constancias) ensanchaba la página completa. El wrapper la contiene; `max-width:100%`
   más `min-width:0` evitan que un hijo de grid/flex se estire con su contenido. */
.niza-tabla-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }

/* Mismo criterio para las tablas de Dash (`tabla_datos`): el `overflowX` va en el
   contenedor de la hoja, pero el envoltorio externo crecía con las columnas. */
.dash-table-container { max-width: 100%; min-width: 0; overflow-x: auto; }
.dash-table-container .dash-spreadsheet-container { max-width: 100%; }
table.financial-data { width: 100%; border-collapse: collapse; }

.financial-data th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.financial-data td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.financial-data td.numeric-cell { text-align: right; }

/* Inputs de formulario */
.niza-input {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: normal;            /* centrado vertical nativo del <input> (no recorta) */
  height: 2.6rem;
  box-sizing: border-box;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  width: 100%;
  max-width: 480px;
  margin: var(--space-2) 0 var(--space-4) 0;
}

.niza-input:focus { outline: none; border-color: var(--border-deep); }

/* Texto secundario y selector de tipo de pago (cotizador) */
.niza-subtle {
  color: var(--text-secondary);
  margin: var(--space-2) 0 var(--space-4) 0;
}

.niza-radio label {
  display: block;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* Pestañas del cotizador (módulos/herramientas diferenciados) */
.niza-tabs { margin-bottom: var(--space-4); border-bottom: 2px solid var(--border-default); }
.niza-tab {
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-sans);
  border-bottom: 2px solid transparent !important;
}
.niza-tab--sel {
  color: var(--color-deep) !important;
  border-bottom: 2px solid var(--accent-primary) !important;
  background: transparent !important;
  font-weight: 700;
}
/* Vista previa de tasa en vivo */
.niza-preview {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: baseline; padding: var(--space-3) var(--space-4);
  background: var(--color-stone); border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-primary); margin: var(--space-2) 0 var(--space-4) 0;
  font-variant-numeric: tabular-nums;
}
.niza-preview .pv-num { font-size: 1.15rem; font-weight: 700; color: var(--color-deep); }
.niza-preview .pv-lbl { font-size: var(--text-xs); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em; }
.niza-hint { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-3) 0; }

/* Grilla de formularios (wizards) — varias columnas como SYSCAP */
.niza-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-4);
}

/* Ritmo vertical del formulario. `dcc.Input` lo traía en `.niza-input` y `dcc.Dropdown`
   no, así que en una misma fila unos campos caían más abajo que otros y el pie del
   bloque quedaba dentado (se ve en Empleados, que mezcla los dos en la misma grilla).
   La etiqueta, además, es un <label> (inline) y su `margin-bottom` no aplicaba. */
.niza-form-grid label { display: block; margin-bottom: var(--space-1); }
.niza-form-grid .dash-dropdown {
  margin: var(--space-2) 0 var(--space-4) 0;
  max-width: 480px;
}
/* Configuración: sub-navegación vertical con dcc.Tabs (cambio client-side, sin callback) */
.niza-cfg-tabs { display: flex !important; gap: var(--space-6); align-items: flex-start; }
.niza-cfg-tablist { width: 232px; flex: 0 0 232px; border: none !important; }
.niza-cfg-tab {
  text-align: left; background: transparent !important; border: none !important;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary) !important;
  padding: 10px 14px !important; border-radius: 8px; border-left: 3px solid transparent !important;
  transition: all .12s ease;
}
.niza-cfg-tab:hover { background: var(--accent-soft) !important; color: var(--text-primary) !important; }
.niza-cfg-tab--sel {
  background: var(--color-stone) !important; color: var(--color-deep) !important; font-weight: 500;
  border-left-color: var(--accent-primary) !important;
}
.niza-cfg-tabs .niza-cfg-panel { flex: 1; min-width: 0; }

/* Configuración: sub-navegación vertical (estilo Stripe/SYSCAP) — versión anterior (botones) */
.niza-cfg-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-6); align-items: start; }
.niza-cfg-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--space-4); }
.niza-cfg-navitem {
  text-align: left; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text-secondary);
  padding: 10px 14px; border-radius: 8px; border-left: 3px solid transparent; transition: all .12s ease;
}
.niza-cfg-navitem:hover { background: var(--accent-soft); color: var(--text-primary); }
.niza-cfg-navitem.active {
  background: var(--color-stone); color: var(--color-deep); font-weight: 500;
  border-left-color: var(--accent-primary);
}
.niza-cfg-panel { min-width: 0; }
/* Checklist de módulos en grilla */
.niza-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; }
.niza-check-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans);
  font-size: 13px; color: var(--text-primary); cursor: pointer; }
.niza-check-item input { accent-color: var(--accent-primary); }
@media (max-width: 760px) { .niza-cfg-layout { grid-template-columns: 1fr; }
  .niza-cfg-nav { flex-direction: row; flex-wrap: wrap; position: static; } }

.niza-card-sub { border: 1px solid var(--color-line); border-radius: 8px; padding: var(--space-3);
  background: var(--color-stone); }
.niza-btn-danger { color: var(--color-danger); border-color: var(--state-danger-bg); }
.niza-btn-danger:hover { background: var(--state-danger-bg); }

.niza-wizard-steps { display: flex; gap: var(--space-6); flex-wrap: wrap;
  border-bottom: 2px solid var(--border-default); margin-bottom: var(--space-6); }
.niza-step { color: var(--text-secondary); padding-bottom: var(--space-2);
  border-bottom: 2px solid transparent; font-weight: var(--font-weight-medium); }
.niza-step--done { color: var(--color-success); }
.niza-step--active { color: var(--color-deep); border-bottom-color: var(--accent-primary); font-weight: 700; }

/* Badge neutral + chips etiquetados (qué es cada cosa) */
.niza-badge-neutral {
  background-color: var(--color-stone); color: var(--color-muted);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--font-weight-medium);
}
.niza-chip { display: inline-flex; flex-direction: column; gap: 2px; }
.niza-chip-lbl {
  font-size: 0.65rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-medium);
}

/* Eco con formato de moneda bajo el input (se ve $ y comas al escribir) */
.niza-input-fmt {
  display: block; margin: -0.75rem 0 var(--space-4) 0;
  font-size: var(--text-sm); font-weight: 700; color: var(--color-deep);
  font-variant-numeric: tabular-nums; min-height: 1rem;
}

/* Topbar (fondo blanco): nombre de org en DM Sans 700, usuario secundario */
.niza-topbar-org { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--color-deep); }
.niza-topbar-user { color: var(--text-secondary); font-size: var(--text-sm); }
.niza-topbar-select { color: var(--color-ink); }

/* Hover dorado suave + cursor en filas de tablas accionables */
.financial-data tbody tr:hover { background-color: var(--accent-soft); cursor: pointer; }

/* Días al vencimiento por urgencia */
.dias-urgente { color: var(--color-danger); font-weight: 600; }
.dias-medio { color: var(--color-warning); }
.dias-ok { color: var(--text-secondary); }

/* Subtítulo de sección (bajo el título de tarjeta) */
.niza-section-sub { font-family: var(--font-sans); font-size: 12px; font-weight: 400;
  color: var(--text-secondary); margin: -0.5rem 0 var(--space-4) 0; }

/* Badges con borde sutil (semántica de color consistente) */
.niza-badge-success, .niza-badge-warning, .niza-badge-danger, .niza-badge-neutral {
  border: 1px solid currentColor; font-weight: 600;
}

/* ── Stepper de localización (etapa actual de un pagaré) ── */
.niza-step-status {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.niza-step-status--muted { color: var(--text-secondary); }
.niza-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.niza-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.niza-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  color: var(--text-secondary);
  background: var(--surface);
  flex-shrink: 0;
}
.niza-step-label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; }
.niza-step-line {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 2px;
  background: var(--border-strong);
  opacity: 0.4;
}
.niza-step-line--hecho { background: var(--state-success-fg); opacity: 1; }
.niza-step--hecho .niza-step-dot {
  background: var(--state-success-bg);
  border-color: var(--state-success-fg);
  color: var(--state-success-fg);
}
.niza-step--hecho .niza-step-label { color: var(--text-primary); }
.niza-step--actual .niza-step-dot {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-deep);
}
.niza-step--actual .niza-step-label { color: var(--text-primary); font-weight: 600; }

/* ── Llenado automático DEMO (aid de pruebas; sólo con NIZA_DEMO_FILL=1) ── */
.niza-demo-fab {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1200;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-primary);
  color: var(--text-on-deep);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  cursor: pointer;
}
.niza-demo-fab:hover { filter: brightness(0.95); }

.niza-demo-toast {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-16);
  z-index: 1200;
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-header);
  color: var(--text-on-deep);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.niza-demo-toast.visible { opacity: 1; transform: translateY(0); }

/* ── Checklist de arranque (dashboard) ─────────────────────────────────────────
   Solo se pinta mientras la organización no termina de configurarse. El paso que
   toca AHORA se destaca; los ya listos se atenúan pero no se ocultan, para que se
   vea el avance y no solo lo que falta. */
.niza-arranque-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-2);
}
.niza-arranque-titulo { font-weight: 600; font-size: 1.05rem; }
.niza-arranque-conteo {
  font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.niza-arranque-sig {
  font-size: 13px; color: var(--color-text-muted);
  border-left: 3px solid var(--color-accent, #B8860B);
  padding: 2px 0 2px var(--space-3); margin-bottom: var(--space-4);
}
.niza-pasos { display: flex; flex-direction: column; gap: 2px; }
.niza-paso {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3); border-radius: 8px;
}
.niza-paso--ahora { background: var(--state-warning-bg, #FCF3E2); }
.niza-paso--listo { opacity: .55; }
.niza-paso-marca { font-size: 15px; line-height: 1.4; flex: 0 0 auto; width: 16px; }
.niza-check-ok { color: var(--state-success-fg, #1B7F4F); font-weight: 700; }
.niza-check-pend { color: var(--color-text-muted); }
.niza-paso-cuerpo { flex: 1 1 auto; min-width: 0; }
.niza-paso-titulo { font-weight: 600; font-size: 13.5px; }
.niza-paso-detalle { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
.niza-paso-porque {
  font-size: 12px; color: var(--color-text-muted); font-style: italic; margin-top: 2px;
}
.niza-paso-ir {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none; color: var(--color-accent, #B8860B); align-self: center;
}

/* ── «Tu rol en 5 minutos» ─────────────────────────────────────────────────────
   La ficha del puesto dentro del portal. Se lee una vez el primer día y rara vez
   después, así que prioriza claridad sobre densidad. */
.niza-rol-nombre { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.niza-rol-lema {
  font-size: 1rem; color: var(--color-text-muted); margin-top: .15rem;
}
.niza-rol-cadena {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--color-border, #E2DED4);
}
.niza-rol-cadena-item { font-size: 13px; }
.niza-rol-eti { color: var(--color-text-muted); }
.niza-rol-pasos { margin: 0; padding-left: 1.2rem; }
.niza-rol-pasos li { margin-bottom: .55rem; line-height: 1.55; }
.niza-rol-auto { line-height: 1.6; margin: 0 0 .4rem; }
.niza-rol-atajos { display: flex; flex-wrap: wrap; gap: .5rem; }
.niza-rol-atajo {
  display: inline-block; padding: .45rem .85rem; border-radius: 8px;
  border: 1px solid var(--color-border, #E2DED4); text-decoration: none;
  font-size: 13px; font-weight: 600; color: inherit; background: #fff;
}
.niza-rol-atajo:hover { background: #F4F1EA; }

/* ── Centro de ayuda (manual dentro del portal) ────────────────────────────── */
.niza-ayuda-lista { display: flex; flex-direction: column; }
.niza-ayuda-item {
  padding: .7rem 0; border-bottom: 1px solid var(--color-border, #E2DED4);
}
.niza-ayuda-item:last-child { border-bottom: none; }
.niza-ayuda-titulo {
  font-weight: 600; font-size: 14px; text-decoration: none; color: inherit;
}
.niza-ayuda-titulo:hover { text-decoration: underline; }
.niza-ayuda-resumen {
  font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; margin-top: .15rem;
}
.niza-md { line-height: 1.65; }
.niza-md h1 { font-size: 1.5rem; margin: 0 0 .8rem; }
.niza-md h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.niza-md h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.niza-md table { border-collapse: collapse; width: 100%; font-size: 13px; margin: .8rem 0; }
.niza-md th, .niza-md td {
  border: 1px solid var(--color-border, #E2DED4); padding: .45rem .6rem; text-align: left;
}
.niza-md blockquote {
  margin: .8rem 0; padding: .5rem .9rem; border-left: 3px solid var(--color-accent, #B8860B);
  background: rgba(184,134,11,.06);
}
.niza-md code { background: #EDE9DF; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }

/* ── Termómetro de utilización de línea (components.barra_uso) ────────────────
   El color codifica holgura, no decora: verde con margen, ámbar al 75% (la señal
   para hablar de un aumento ANTES de chocar con el techo) y rojo pasando el 90%,
   donde la siguiente disposición probablemente se rechace. */
.niza-barra-uso { margin: .25rem 0 .5rem; }
.niza-barra-encabezado {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: .45rem;
}
.niza-barra-monto {
  font-family: var(--font-num); font-size: 1.35rem; font-weight: 600;
  color: var(--color-deep); line-height: 1.2;
}
.niza-barra-riel {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-line);
}
.niza-barra-relleno {
  height: 100%; border-radius: 999px;
  /* La transición hace legible el CAMBIO cuando el usuario dispone y la barra crece. */
  transition: width .45s ease-out, background-color .3s ease;
  background: var(--color-deep);
}
.niza-barra--medio .niza-barra-relleno { background: var(--color-warning); }
.niza-barra--alto  .niza-barra-relleno { background: var(--color-danger); }
.niza-barra-pie {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem;
  font-size: .82rem;
}
.niza-barra-pct { font-family: var(--font-num); font-weight: 600; color: var(--color-deep); }
.niza-barra-pct--medio { color: var(--color-warning); }
.niza-barra-pct--alto  { color: var(--color-danger); }
.niza-barra-resto { color: var(--color-muted); font-family: var(--font-num); }
.niza-barra-cifras {
  font-family: var(--font-num); font-size: 1.2rem; font-weight: 600; color: var(--color-deep);
}

/* Aviso de lo que el PRODUCTO impone en este flujo (plazo, banda, comisión): la
   configuración tiene que verse donde se opera, no solo donde se captura. */
.niza-regla-producto {
  background: var(--color-accent-soft); border-left: 3px solid var(--color-ocre);
  padding: .55rem .75rem; border-radius: 4px; margin-bottom: .75rem;
  font-size: .85rem; color: var(--color-ink);
}
.niza-regla-producto strong { color: var(--color-deep); }