/* 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);

  /* === 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-6: 1.5rem;
  --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);
}

.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;
}

.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;
  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; }
.niza-content { flex: 1; padding: var(--space-8); background-color: var(--bg-app); }

.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;
}

.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);
}

/* 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);
}

.niza-sidebar-group {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-6) 0 var(--space-2) var(--space-4);
}

/* 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: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-4);
}

.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 */
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);
}
/* 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; }