/* =============================================================
   NONFOI INTRANET — Design System v2
   Dirección: Despacho profesional refinado
   Tipografía: Fraunces (display) + Inter Tight (cuerpo) + JetBrains Mono (datos)
   ============================================================= */

/* Google Fonts se carga desde partials/head.ejs via <link> no bloqueante */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Paleta v1 ELIMINADA COMPLETAMENTE en Fase 2B.2 (2026-05-23).
     Cero rastro de --gris-*, --ambar-*, --verde-*, --amarillo-*, --rojo-*,
     --naranja-*, --blanco, --fondo*, --azul-* en el proyecto.
     Doctrina V5 al 100% (paleta semántica V5 vía aliases capa 3). */

  /* Tipografía familias: ver --nf-display/sans/mono en tokens.css (sistema V5 canon — 2026-05-23 Fase 1). */

  /* Escala tipográfica: ver --fs-* en tokens.css (sistema V5 canon — 2026-05-22 migración transversal). */

  /* Espaciado: ver --sp-* en tokens.css (sistema V5 canon — Fase 3, 2026-05-23). */

  /* Radios: ver --r-1/2/3/4 + --r-pill en tokens.css (sistema V5 canon — Fase 3, 2026-05-23). */

  /* Sombras: ver --nf-shadow-* en tokens.css (sistema V5 canon — 2026-05-23 Fase 1). */

  /* Transitions: ver --duration-* + --ease-* en tokens.css (sistema V5 canon — Fase 3, 2026-05-23). */

  /* ─── Estado semántico V5 — aliases capa 3 a acentos (Fase 2B.1, 2026-05-23) ─── */
  --nf-error-bg:    var(--nf-coral-soft);
  --nf-error-borde: var(--nf-coral);
  --nf-error-txt:   var(--nf-coral-deep);

  --nf-warn-bg:     var(--nf-amber-soft);
  --nf-warn-borde:  var(--nf-amber);
  --nf-warn-txt:    var(--nf-amber-deep);

  --nf-info-bg:     var(--nf-cobalt-soft);
  --nf-info-borde:  var(--nf-cobalt);
  --nf-info-txt:    var(--nf-cobalt-deep);

  /* H.1 — comunicación con cliente: informacional, neutro, distinto de
   * warn (notas equipo). Apunta a cobalt para diferenciar visualmente. */
  --nf-comunicacion-bg:    var(--nf-cobalt-soft);
  --nf-comunicacion-borde: var(--nf-cobalt);
  --nf-comunicacion-txt:   var(--nf-cobalt-deep);

  --nf-ok-bg:       var(--nf-brand-soft);
  --nf-ok-borde:    var(--nf-brand);
  --nf-ok-txt:      var(--nf-brand-strong);

  /* ─── Vencimiento (Eje 2 — escala temporal Firmas) ─── */
  --nf-vence-pronto-bg:    #FFF0E6;
  --nf-vence-pronto-borde: #FF6D00;
  --nf-vence-pronto-txt:   #8A3500;
  --nf-vencido-bg:         #3C0A00;
  --nf-vencido-borde:      #B71C1C;
  --nf-vencido-txt:        #FFCDD2;

  /* Content widths: ver --nf-content-* en tokens.css (sistema V5 canon — 2026-05-23 Fase 1). */

  /* ─── Sidebar widths (estructurales) ─── */
  --nf-sidebar-w:           248px;
  --nf-sidebar-w-collapsed: 60px;
  --nf-topbar-h:            56px;    /* la topbar es fija: su alto lo consumen
                                        el shell y el scroll-margin de las anclas */

  /* ─── Tipografía — ver --fs-* en tokens.css (sistema V5 canon — 2026-05-22 migración transversal). ─── */
}

/* ================================================================
   SISTEMA DE THEMING V5 — paletas semánticas por data-theme
   ================================================================
   Cómo añadir una paleta nueva:
     1) Definir bloque [data-theme="<id>"] con TODOS los tokens semánticos
        listados abajo en :root:not([data-theme]) (la paleta verde por
        defecto sirve de plantilla).
     2) Registrar el id en el array THEMES de views/partials/topbar.ejs
        (sección "Theme system").
     3) Re-ejecutar capturas y validar contraste WCAG.

   Documentación completa: docs/design-system/THEMING-V5.md
   Doctrina: VISUAL-SYSTEM-V5.md §2.3 + §11 (tabla migración v2→v5).
   ================================================================ */

/* ── Paleta VERDE (default) — V5 paper crema ────────────────────── */
:root:not([data-theme]),
[data-theme="verde"] {
  /* Brand (verde Nonfoi) */
  --nf-brand:          #10b44a;
  --nf-brand-deep:     #0a7a31;
  --nf-brand-soft:     #d8f5e2;
  --nf-brand-glow:     #6ce39a;
  --nf-brand-500:      #10b44a;
  --nf-brand-600:      #0f9a40;
  --nf-brand-700:      #0d7e35;
  --nf-brand-100:      #e9f8ee;
  --nf-brand-050:      #f4fcf7;
  --nf-brand-500-a06:  rgba(16, 180, 74, 0.06);
  --nf-brand-500-a20:  rgba(16, 180, 74, 0.20);

  /* ═════ Superficies — escala canónica 3 niveles (B1 D-CRO-1) ═════
     Documentado en docs/sesiones/firmas-correctivo-2026-05-16/
     DIAGNOSTICO.md §4.2. Auditoría WCAG en §4.4. */
  --nf-surface-base:     #dee6f2;   /* L1 — page/shell exterior (F0 2026-08-19) */
  --nf-surface-content:  #f2f6fb;   /* L2 — content frame/canvas/agrupadores (F0 2026-08-19) */
  --nf-surface-elevated: #ffffff;   /* L3 — cards, modales, elevación */

  /* Aliases existentes — mapean a la escala nueva. Preservan ~200 usos
     pre-existentes en el proyecto sin renombrar. */
  --nf-paper:          var(--nf-surface-base);    /* shell / app background */
  --nf-paper-2:        #dee6f2;                    /* dividers en shell (F0 2026-08-19) */
  --nf-canvas:         var(--nf-surface-content);  /* área de contenido / topbar */
  --nf-surface:        var(--nf-surface-elevated); /* cards, modales */
  --nf-surface-soft:   var(--nf-surface-content);  /* convergencia con content */

  /* Tinta (canónico, refuerzo WCAG B1 D-CRO-2) */
  --nf-ink:            #14201c;
  --nf-ink-2:          #3a4744;
  --nf-ink-3:          #556560;   /* F0 2026-08-19: era #5b6b66, que con el L1 nuevo
                                     caía a 4.47:1. Este mantiene AA (4.89:1) y
                                     conserva el refuerzo D-CRO-2.
                                     Restricción L1: ver R-INK3-L1-VERDE
                                     en VISUAL-SYSTEM.md §5 punto 11 */
  --nf-ink-4:          #788580;   /* refuerzo: era #9aa49f → AA-L decorativo */

  /* Líneas — 3 niveles de fuerza (B1 D-CRO-3) */
  --nf-line-soft:      #c9d5e6;   /* divisor sutil — separador interno (F0 2026-08-19) */
  --nf-line:           #b0c1d8;   /* borde de card — separa L3 de L2 (F0 2026-08-19) */
  --nf-line-strong:    #97adc9;   /* divisor funcional fuerte — header de sección (F0 2026-08-19) */
  --nf-line-2:         var(--nf-line);   /* pareja legacy de capa 1 — en el tema apunta a la escala */

  /* Banda operativa (F0) — superficie tematizada un nivel más honda que
     el canvas. Es OPCIONAL: solo cuando hay urgencias reales que contar. */
  --nf-band-from:      #dbe8e2;
  --nf-band-to:        #d5e2f2;
  --nf-band-kicker:    #09722e;   /* verde de acción oscurecido un escalón: 4.60:1 sobre --nf-band-to */

  /* Hero bandeja Firmas — tokenizado (B1 D-CRO-4 / BUG-V2) */
  --nf-hero-bg-from:   #14201c;
  --nf-hero-bg-via1:   #0d2a24;
  --nf-hero-bg-via2:   #0a3a31;
  --nf-hero-bg-to:     #0a4a3a;

  /* Hero chips — chips funcionales sobre fondo hero oscuro (B3.1.4).
     Paleta desaturada/oscura para legibilidad sobre --nf-hero-bg-*. */
  --nf-hero-chip-err-bg:  rgba(255, 93, 73, 0.18);
  --nf-hero-chip-err-fg:  #ffb8ad;
  --nf-hero-chip-warn-bg: rgba(245, 165, 36, 0.18);
  --nf-hero-chip-warn-fg: #f9d28a;
  --nf-hero-chip-info-bg: rgba(108, 188, 255, 0.18);
  --nf-hero-chip-info-fg: #b3d9ff;
  --nf-hero-chip-ok-bg:   rgba(108, 227, 154, 0.18);
  --nf-hero-chip-ok-fg:   #b9ecc9;

  /* Stepper paso activo (B3.1.3). WCAG AA verificado:
     - active white/brand-700 #0d7e35 → 5.18 AA
     - pending ink-4/L1 → 3.05 AA-L decorativo (correcto para "sin pisar")
     - completed ink-2/L3 → 9.70 AAA */
  --nf-step-pending-bg:     var(--nf-surface-base);
  --nf-step-pending-fg:     var(--nf-ink-4);
  --nf-step-active-bg:      var(--nf-brand-700);
  --nf-step-active-fg:      #ffffff;
  --nf-step-completed-bg:   var(--nf-surface-elevated);
  --nf-step-completed-fg:   var(--nf-ink-2);
  --nf-step-completed-mark: var(--nf-brand-700);

  /* Aliases semánticos del proyecto (mantienen API existente, mapean a paleta) */
  --nf-bg-app:         var(--nf-paper);      /* alias canónico — preserva 56+ usos pre-existentes */
  --nf-bg-page:        var(--nf-canvas);     /* alias — área de contenido principal */
  --nf-border-soft:    var(--nf-line-soft);  /* B1: antes apuntaba a --nf-line */
  --nf-border-mid:     var(--nf-line);
  --nf-text-strong:    var(--nf-ink);
  --nf-text-main:      var(--nf-ink-2);
  --nf-text-soft:      var(--nf-ink-3);
  --nf-text-faint:     var(--nf-ink-4);
  --nf-text-on-dark:   #ffffff;              /* texto sobre fondo oscuro (tooltips, avatares, badges) */
  --nf-brand-strong:   var(--nf-brand-deep); /* alias L3 — paralelo a --nf-text-strong (Fase B.2, 2026-05-24) */

  /* Topbar (claro v5 — canvas + alpha) */
  --nf-topbar-bg:            rgba(249, 251, 253, 0.92);

  /* Barra lateral — «niebla» (F0 2026-08-19). Sustituye a la tinta
     profunda #141b2b. La alternativa «bruma» vive en [data-depth="oscuro"]. */
  --nf-nav-bg:           #dbe2ee;
  --nf-nav-bg-active:    rgba(255,255,255,0.74);
  --nf-nav-border:       rgba(20,32,28,0.10);
  --nf-nav-text:         rgba(20,32,28,0.66);
  --nf-nav-text-strong:  #14201c;
  --nf-nav-faint:        rgba(20,32,28,0.55);   /* alfa subida de .38: a .38 daba 2.25:1 */
  --nf-nav-accent:       #2c5cff;
  --nf-nav-accent-ink:   #ffffff;
  --nf-topbar-border:        var(--nf-paper-2);
  --nf-topbar-action-bg:     rgba(16, 180, 74, 0.08);
  --nf-topbar-action-border: rgba(16, 180, 74, 0.14);
  --nf-topbar-btn-hover:     rgba(16, 180, 74, 0.10);
}

/* ── Paleta GRAFITO — V5 paper grafito-claro + acento terracota ─ */
[data-theme="grafito"] {
  /* Brand — RETIRADA la familia terracota (2026-08-18, ver DEPRECATED §9.ter).
     El verde de acción es compartido y vive en tokens.css (capa 1): este
     tema ya no redeclara marca. Un botón primario se ve igual en los dos
     temas; la diferenciación va por superficie, tinta y acento de lateral. */

  /* ═════ Superficies — ciruela ahumada (rev. 2026-08-18) ═════
     Escala canónica 3 niveles (B1 D-CRO-1). Malva muy bajo: el hueco de
     matiz con el azul niebla de verde es lo que separa los dos temas. */
  --nf-surface-base:     #e6d7ea;   /* L1 — page/shell exterior (F0 2026-08-19) */
  --nf-surface-content:  #f4edf6;   /* L2 — content frame/canvas/agrupadores (F0 2026-08-19) */
  --nf-surface-elevated: #ffffff;   /* L3 — cards, modales, elevación */

  /* Aliases existentes — mapean a la escala nueva */
  --nf-paper:          var(--nf-surface-base);
  --nf-paper-2:        #e6d7ea;                    /* dividers en shell (F0 2026-08-19) */
  --nf-canvas:         var(--nf-surface-content);
  --nf-surface:        var(--nf-surface-elevated);
  --nf-surface-soft:   #f9f3fa;                    /* hover / zebra (F0 2026-08-19) */

  /* Tinta — matiz ciruela (rev. 2026-08-18), refuerzo WCAG B1 D-CRO-2
     conservado: ink-3 e ink-4 se derivaron para mantener el contraste
     exacto que tenían en cálido, no los valores del dossier (que lo
     bajaban a 4.38:1 y 2.35:1 y revertían este mismo refuerzo). */
  --nf-ink:            #1e1622;
  --nf-ink-2:          #453b4c;
  --nf-ink-3:          #625768;   /* 5.84:1 sobre L2 — AA, igual que en cálido */
  --nf-ink-4:          #7f7684;   /* F0: era #837a88, que con el L1 nuevo caía a
                                     2.99:1 — por debajo de AA-L. Este da 3.15:1. */

  /* Líneas — 3 niveles de fuerza (B1 D-CRO-3), ciruela 2026-08-18.
     Derivadas preservando la luminancia de cada nivel beige. */
  --nf-line-soft:      #dcc9e1;   /* divisor sutil (F0 2026-08-19) */
  --nf-line:           #c8b0cf;   /* borde de card (F0 2026-08-19) */
  --nf-line-strong:    #b295bd;   /* divisor funcional fuerte (F0 2026-08-19) */
  --nf-line-2:         var(--nf-line);   /* pareja legacy de capa 1 — apunta a la escala */

  /* Banda operativa (F0) — opcional, solo con urgencias reales */
  --nf-band-from:      #e8d8ec;
  --nf-band-to:        #d9c7e2;
  --nf-band-kicker:    #086428;   /* verde de acción oscurecido: 4.60:1 sobre --nf-band-to */

  /* Hero bandeja Firmas — tokenizado paridad grafito (B1 D-CRO-4 / BUG-V2).
     Degradado ciruela oscuro (2026-08-18). Nació enganchado a la lateral
     oscura de la fase ciruela (retirada, DEPRECATED §11); el degradado
     se conserva como fondo de hero del tema.
     Luminancia de cada parada conservada respecto al marrón anterior, así
     que los chips de abajo no se tocan. */
  --nf-hero-bg-from:   #1a1220;
  --nf-hero-bg-via1:   #271c30;
  --nf-hero-bg-via2:   #372843;
  --nf-hero-bg-to:     #493659;

  /* Hero chips — sobre fondo ciruela oscuro (B3.1.4). SIN CAMBIO: son los
     acentos semánticos compartidos y su contraste sale igual (>7:1). */
  --nf-hero-chip-err-bg:  rgba(255, 93, 73, 0.20);
  --nf-hero-chip-err-fg:  #ffc4ba;
  --nf-hero-chip-warn-bg: rgba(245, 196, 110, 0.20);
  --nf-hero-chip-warn-fg: #fadea0;
  --nf-hero-chip-info-bg: rgba(180, 165, 220, 0.20);
  --nf-hero-chip-info-fg: #d8cce8;
  --nf-hero-chip-ok-bg:   rgba(180, 220, 165, 0.20);
  --nf-hero-chip-ok-fg:   #cee8c2;

  /* Stepper paso activo (B3.1.3) — grafito. Referencian brand, que desde
     2026-08-18 es el verde compartido: mismo render que en el tema verde. */
  --nf-step-pending-bg:     var(--nf-surface-base);
  --nf-step-pending-fg:     var(--nf-ink-4);
  --nf-step-active-bg:      var(--nf-brand-600);
  --nf-step-active-fg:      #ffffff;
  --nf-step-completed-bg:   var(--nf-surface-elevated);
  --nf-step-completed-fg:   var(--nf-ink-2);
  --nf-step-completed-mark: var(--nf-brand-700);

  /* Aliases semánticos del proyecto */
  --nf-bg-app:         var(--nf-paper);
  --nf-bg-page:        var(--nf-canvas);
  --nf-border-soft:    var(--nf-line-soft);  /* B1: antes apuntaba a --nf-line */
  --nf-border-mid:     var(--nf-line);
  --nf-text-strong:    var(--nf-ink);
  --nf-text-main:      var(--nf-ink-2);
  --nf-text-soft:      var(--nf-ink-3);
  --nf-text-faint:     var(--nf-ink-4);
  --nf-text-on-dark:   #ffffff;              /* texto sobre fondo oscuro */
  --nf-brand-strong:   var(--nf-brand-deep); /* alias L3 — paralelo a --nf-text-strong (Fase B.2, 2026-05-24) */

  /* Topbar */
  --nf-topbar-bg:            rgba(252, 250, 253, 0.92);
  --nf-topbar-border:        var(--nf-paper-2);
  /* Eran tinte de marca terracota sobre el fondo, no el fondo mismo:
     pasan al neutro del tema (tinta ciruela), no a verde. Alfas
     recalculadas para conservar el peso visual exacto que tenían. */
  --nf-topbar-action-bg:     rgba(30, 22, 34, 0.045);
  --nf-topbar-action-border: rgba(30, 22, 34, 0.08);
  --nf-topbar-btn-hover:     rgba(30, 22, 34, 0.055);

  /* Barra lateral — ciruela casi negra (rev. 2026-08-18).
     La familia --nf-nav-* nació en capa 1 con acento azul #6d94ff; sobre
     ciruela quedaba frío, así que este tema la redeclara. Cierra el
     pendiente anotado al desplegar la paleta fría: --nf-nav-accent SÍ se
     tematiza. Contrastes sobre --nf-nav-bg: text 9.19:1 · text-strong
     16.95:1 · accent 6.89:1 · faint 3.66:1 (AA-L, solo decorativo). */
  --nf-nav-bg:           #e2d3e0;
  --nf-nav-bg-active:    rgba(255,255,255,0.68);
  --nf-nav-border:       rgba(30,22,34,0.10);
  --nf-nav-text:         rgba(30,22,34,0.66);
  --nf-nav-text-strong:  #1e1622;
  --nf-nav-faint:        rgba(30,22,34,0.55);   /* alfa subida de .40: a .40 daba 2.37:1 */
  --nf-nav-accent:       #8e4c7f;
  --nf-nav-accent-ink:   #ffffff;
}

/* ── Profundidad alternativa «BRUMA» — opt-in (F0, 2026-08-19) ────
   La lateral por defecto es «niebla» (clara, declarada en cada tema).
   Esta es la profundidad oscura, disponible bajo [data-depth="oscuro"]
   para una preferencia de usuario o una vista que la pida explícitamente.
   NO hay toggle expuesto: esa preferencia todavía no existe.
   Retira la tinta profunda #141b2b/#1b1521 del bloque V5 anterior.
   Contrastes sobre su propio fondo: text 7.58/8.07 · text-strong 13.65/14.33
   · accent 7.54/6.72 · faint 3.36/3.50 (AA-L, decorativo). */
[data-depth="oscuro"] {
  --nf-nav-bg:           #1d2a33;
  --nf-nav-bg-active:    rgba(255,255,255,0.08);
  --nf-nav-border:       rgba(255,255,255,0.10);
  --nf-nav-text:         rgba(226,233,245,0.76);
  --nf-nav-text-strong:  #f3f7fd;
  --nf-nav-faint:        rgba(226,233,245,0.42);
  --nf-nav-accent:       #7fc4d8;
  --nf-nav-accent-ink:   #0d1424;   /* el acento es claro: encima va tinta */
}
[data-depth="oscuro"][data-theme="grafito"] {
  --nf-nav-bg:           #2b2333;
  --nf-nav-text:         rgba(240,236,241,0.76);
  --nf-nav-text-strong:  #fbf8fc;
  --nf-nav-faint:        rgba(240,236,241,0.42);
  --nf-nav-accent:       #b8a3e0;
  --nf-nav-accent-ink:   #0d1424;
}

/* ═══════════════════════════════════════════════════════════════
   .fi-card — sistema canónico de cards funcionales (B1 D-TRV-1).
   Documentado en docs/sesiones/firmas-correctivo-2026-05-16/
   DIAGNOSTICO.md §5.5. Aplicación en vistas Firmas se hace en B2.

   Variantes:
     .fi-card               base informativa (L3, sin shadow)
     .fi-card--action       + border-left brand para CTA primaria
     .fi-card--nav          + hover state, card clickable
     .fi-card--container    L2 — agrupa cards/elementos

   Estado .is-selected aplica sobre cualquier variante.

   Convive con .card global (VISUAL-SYSTEM §4.1) — sin colisión de
   selectores. Decisión migratoria diferida.
   ═══════════════════════════════════════════════════════════════ */

.fi-card {
  background: var(--nf-surface-elevated);
  border: 1px solid var(--nf-line);
  border-radius: 8px;
  padding: var(--sp-5);
}

.fi-card--action {
  border-left: 3px solid var(--nf-brand-500);
  padding-left: calc(var(--sp-5) - 2px);
}

.fi-card--nav {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fi-card--nav:hover {
  border-color: var(--nf-brand-500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.fi-card--nav:focus-visible {
  outline: 2px solid var(--nf-brand-500);
  outline-offset: 2px;
}

.fi-card--container {
  background: var(--nf-surface-content);
  border: 1px solid var(--nf-border-soft);
  border-radius: 10px;
  padding: var(--sp-4);
}

.fi-card.is-selected {
  border-color: var(--nf-brand-500);
  box-shadow: inset 3px 0 0 var(--nf-brand-500);
}

/* ═══════════════════════════════════════════════════════════════
   .fi-pagination — componente paginación (B3.2).
   Coherente con el sistema de cards: botones secundarios con border
   line, separador, info central con número de página en bold.
   ═══════════════════════════════════════════════════════════════ */

.fi-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}

.fi-pagination__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--nf-line);
  border-radius: var(--r-1);
  background: var(--nf-surface);
  color: var(--nf-ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.fi-pagination__btn:hover {
  border-color: var(--nf-brand-500);
  background: var(--nf-brand-500-a06);
}
.fi-pagination__btn.is-disabled {
  color: var(--nf-text-faint);
  border-color: var(--nf-border-soft);
  background: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.fi-pagination__info {
  font-size: var(--fs-label);
  color: var(--nf-text-main);
}
.fi-pagination__info strong {
  font-weight: var(--fw-bold);
  color: var(--nf-ink);
}
.fi-pagination__total {
  margin-left: 6px;
  color: var(--nf-ink-3);
  font-size: var(--fs-micro);
}

/* ── RESET ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ────────────────────────────────────────────────────── */
html { font-size: var(--fs-body); -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--nf-sans);
  background: var(--nf-bg-app);
  color: var(--nf-text-main);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
}

h1, h2, h3, h4, h5 {
  font-family: var(--nf-display);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  line-height: 1.25;
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-page); }
h3 { font-size: var(--fs-section); }
h4 { font-size: var(--fs-section); }

a { color: var(--nf-brand-500); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--nf-brand-500); }

/* Enlace discreto de navegación: color de texto normal (el verde es sólo para
   acción primaria, no para navegar), con subrayado en hover para señalarse. */
.link-plain { color: var(--nf-text-strong); }
.link-plain:hover { color: var(--nf-text-strong); text-decoration: underline; }

p { line-height: var(--lh-relaxed); color: var(--nf-text-main); }

code, .mono {
  font-family: var(--nf-mono);
  font-size: .875em;
  background: var(--nf-bg-app);
  color: var(--nf-text-soft);
  padding: 2px 7px;
  border-radius: var(--r-1);
  border: 1px solid var(--nf-border-soft);
}

/* ── TOPBAR ──────────────────────────────────────────────────── */
/* Declaración canónica .topbar V5: ver bloque 'NONFOI V2 SHELL' más abajo
   (L#1940 aprox). Aquí solo viven las reglas hijas legacy que aún se
   consumen desde otras vistas. La declaración duplicada legacy
   eliminada en sesión cierre V5 2026-05-24 (D-TOPBAR-DECLARACION-DUPLICADA). */

.topbar-brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.topbar h1 {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: #fff;
  letter-spacing: .01em;
  font-style: italic;
}

.topbar-tagline {
  font-size: var(--fs-label);
  color: rgba(255,255,255,.45);
  letter-spacing: var(--ls-extra);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.topbar a {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1);
  transition: all var(--duration-fast) var(--ease-out);
}
.topbar a:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  text-decoration: none;
}
.topbar a.active {
  color: #fff;
  background: rgba(255,255,255,.15);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  color: rgba(255,255,255,.8);
}

.topbar-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
}

.badge-rol {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--nf-amber);
  color: var(--nf-text-strong);
  padding: 1px 6px;
  border-radius: 10px;
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

.page-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--nf-border-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}

.page-header h1 { margin-bottom: var(--sp-1); }

.page-subtitle {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  font-family: var(--nf-sans);
  font-weight: var(--fw-regular);
}

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  box-shadow: var(--nf-shadow-xs);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.card:hover { box-shadow: var(--nf-shadow-sm); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--nf-border-soft);
}
.card-title {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.card-footer {
  padding-top: var(--sp-4);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--nf-border-soft);
}
.card-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── BOTONES ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  padding: 8px 18px;
  border-radius: var(--r-2);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--nf-shadow-sm); }
.btn:active { transform: translateY(0); }

/* Estado deshabilitado canónico (Ola 5, conformidad 03-09). `disabled` sólo
   bloqueaba el clic: el botón seguía a verde pleno y con cursor de mano, así
   que se leía como encendido — Diseño lo reportó como «primario encendido con
   el motivo vacío» sobre un botón que SÍ estaba deshabilitado. El hover hay
   que neutralizarlo también, o un botón muerto sigue levantándose al pasar por
   encima. Las reglas por módulo que ya existen (erp, comercial, redactor…)
   siguen ganando por especificidad. */
.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; box-shadow: none; }

.btn-primary {
  /* El botón sólido usa la variante honda del verde, no --nf-brand-500:
     blanco sobre #10b44a da 2.75:1 y no llega a AA. La marca NO cambia —
     --nf-brand-500 sigue vivo en badges, acentos y mecha de vigencia;
     solo el relleno sólido baja un escalón. (2026-08-19) */
  background: var(--nf-brand-deep);      /* blanco: 5.47:1 */
  color: #fff;
  border-color: var(--nf-brand-deep);
}
.btn-primary:hover {
  /* Antes: --nf-brand-100 (#e9f8ee) manteniendo color:#fff → 1.10:1, es
     decir texto invisible al pasar el ratón en los ~750 botones de la app. */
  background: var(--nf-brand-800);       /* blanco 7:1 */
  color: #fff;
  border-color: var(--nf-brand-800);
}

.btn-secondary {
  background: transparent;
  color: var(--nf-brand-500);
  border-color: var(--nf-border-soft);
}
.btn-secondary:hover {
  background: var(--nf-bg-app);
  border-color: var(--nf-brand-500);
}

.btn-danger {
  background: transparent;
  color: var(--nf-coral-deep);
  border-color: var(--nf-coral);
}
.btn-danger:hover {
  background: var(--nf-coral-soft);
}

.btn-sm {
  font-size: var(--fs-label);
  padding: 5px 12px;
  border-radius: var(--r-1);
}

.btn-block { width: 100%; justify-content: center; }

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--sp-5);
}

label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-main);
  margin-bottom: var(--sp-2);
  letter-spacing: .01em;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  border: 1.5px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: 9px 13px;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 3px rgba(39,82,201,.12);
}
input::placeholder, textarea::placeholder { color: var(--nf-text-faint); }
textarea { resize: vertical; min-height: 90px; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

/* ── BÚSQUEDA ────────────────────────────────────────────────── */
.search-bar {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  align-items: center;
}
.search-bar input {
  flex: 1;
  max-width: 360px;
}

/* ── LISTA DE CLIENTES ───────────────────────────────────────── */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.client-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.client-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nf-brand-500);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.client-card:hover {
  border-color: var(--nf-border-soft);
  box-shadow: var(--nf-shadow-md);
  transform: translateY(-2px);
}
.client-card:hover::before { opacity: 1; }

.client-card h3 {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
  font-family: var(--nf-display);
}
.client-card .nif {
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-3);
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: .02em;
  border: 1px solid transparent;
}
.badge.ok {
  background: var(--nf-ok-bg);
  color: var(--nf-ok-txt);
  border-color: var(--nf-ok-borde);
}
.badge.warn {
  background: var(--nf-warn-bg);
  color: var(--nf-warn-txt);
  border-color: var(--nf-warn-borde);
}
.badge.err {
  background: var(--nf-error-bg);
  color: var(--nf-error-txt);
  border-color: var(--nf-error-borde);
}
.badge.neutral {
  background: var(--nf-surface-soft);
  color: var(--nf-text-soft);
  border-color: var(--nf-border-soft);
}

/* Semáforos de vencimiento (Eje 2 — escala temporal Firmas, ver
   VISUAL-SYSTEM.md §4.2). vence-critico reusa --nf-error-* por afinidad
   semántica (frente B7). vence-pronto y vencido tienen paleta propia
   --nf-vence-pronto-* / --nf-vencido-* definida en :root (formalizada
   2026-05-19 limpieza badges fase 3). vence-medio y vence-ok quedan
   reservados — no implementados hasta uso real. */
.badge.vence-critico { background: var(--nf-error-bg); color: var(--nf-error-txt); border-color: var(--nf-error-borde); }
.badge.vence-pronto  { background: var(--nf-vence-pronto-bg); color: var(--nf-vence-pronto-txt); border-color: var(--nf-vence-pronto-borde); }
.badge.vencido       { background: var(--nf-vencido-bg); color: var(--nf-vencido-txt); border-color: var(--nf-vencido-borde); }

/* ── FICHA CLIENTE ───────────────────────────────────────────── */
/* ── Ficha cliente header v2 — light theme per DESIGN.md ─────── */
.ficha-cliente-header-v2 {
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3); padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.ficha-cliente-top-v2 { display: flex; align-items: center; gap: var(--sp-5); }
.ficha-cliente-avatar-v2 {
  width: 56px; height: 56px; border-radius: var(--r-3);
  background: var(--nf-brand-500); display: flex; align-items: center; justify-content: center;
  font-family: var(--nf-sans); font-weight: var(--fw-bold); font-size: var(--fs-section);
  color: var(--nf-text-on-dark); flex-shrink: 0;
}
.ficha-cliente-info-v2 { flex: 1; }
.ficha-cliente-nombre-v2 {
  font-family: var(--nf-display); font-size: var(--fs-page);
  font-weight: var(--fw-semibold); color: var(--nf-text-strong); margin-bottom: var(--sp-1);
}
.ficha-cliente-meta-v2 { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ficha-cliente-actions-v2 { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Ficha cliente header legacy (mantener para compatibilidad) ── */
.ficha-header {
  background: var(--nf-brand-500);
  color: #fff;
  border-radius: var(--r-4);
  padding: var(--sp-8);
  margin-bottom: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.ficha-header::after {
  content: '';
  position: absolute;
  right: -40px; top: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.ficha-header::before {
  content: '';
  position: absolute;
  right: 60px; bottom: -80px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
}

.ficha-header h1 {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-style: italic;
  margin-bottom: var(--sp-2);
}
.ficha-header .nif-label {
  font-family: var(--nf-mono);
  font-size: var(--fs-meta);
  color: rgba(255,255,255,.6);
  letter-spacing: var(--ls-extra);
}
.ficha-header .meta {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}

/* Botones dentro de ficha-header — variante sobre fondo azul oscuro */
.ficha-header .btn {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.ficha-header .btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.8);
}

/* Layout .ficha-meta */
.ficha-meta {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Layout .ficha-actions */
.ficha-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── STICKY BAR (mini-header on scroll) ─────────────────────── */
.ficha-sticky-bar {
  position: fixed;
  top: 58px;
  left: 0; right: 0;
  z-index: var(--z-sticky);
  background: var(--nf-surface);
  color: var(--nf-text-strong);
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--nf-border-soft);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--duration-normal) ease, opacity var(--duration-normal) ease;
  pointer-events: none;
}
.ficha-sticky-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ficha-sticky-bar .sticky-name {
  font-family: var(--nf-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}
.ficha-sticky-bar .sticky-nif {
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-left: var(--sp-2);
}
.ficha-sticky-bar .btn {
  font-size: var(--fs-label);
  padding: 2px var(--sp-3);
}
.ficha-sticky-bar .btn:hover {
  border-color: var(--nf-brand-500);
}

/* ── FICHA INDEX (sticky navigation) ────────────────────────── */
.ficha-index-wrap {
  position: sticky;
  top: 58px; /* debajo del topbar; JS ajusta cuando sticky-bar visible */
  z-index: var(--z-sticky);
  background: var(--nf-bg-page);
  padding: var(--sp-2) 0 var(--sp-3);
  margin-bottom: var(--sp-4);
  transition: top var(--duration-normal) ease;
}
.ficha-index-wrap.with-sticky-bar {
  top: 98px; /* 58px topbar + 40px sticky-bar */
}

.ficha-index {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ficha-index a {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--nf-brand-500);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 20px;
  border: 1px solid var(--nf-border-soft);
  background: var(--nf-bg-app);
  transition: all var(--duration-fast) var(--ease-out);
}
.ficha-index a:hover {
  background: var(--nf-brand-500);
  color: #fff;
  border-color: var(--nf-brand-500);
  text-decoration: none;
}
.ficha-index a.active {
  background: var(--nf-brand-500);
  color: #fff;
  border-color: var(--nf-brand-500);
}

/* Secciones colapsables */
/* ── B5 (2026-08-13): utilidades técnicas por certificado en la ficha de
   persona. Mismo gesto deliberado que la ficha de cert: nada visible hasta
   desplegar, candado como señal de material sensible. ────────────────── */
.pf-cert-utilidades-row > td { padding-top: 0; border-top: 0; }
.pf-cert-utilidades > summary {
  cursor: pointer;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  list-style: none;
}
.pf-cert-utilidades > summary::-webkit-details-marker { display: none; }
.pf-cert-utilidades__btns {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.pf-cert-pass {
  font-size: var(--fs-meta);
  padding: 2px var(--sp-2);
  background: var(--nf-warn-bg, var(--nf-surface));
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-1);
}

.ficha-section {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out);
  scroll-margin-top: 150px; /* topbar + sticky-bar + index + gap */
}
.ficha-section:hover { /* no shadow in resting per DESIGN.md */ }

.ficha-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  user-select: none;
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  list-style: none;
  transition: background var(--duration-fast) var(--ease-out);
  gap: var(--sp-3);
}
.ficha-section > summary::-webkit-details-marker { display: none; }
.ficha-section > summary::after {
  content: '›';
  font-size: 1.3em;
  color: var(--nf-text-faint);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.ficha-section[open] > summary::after { transform: rotate(90deg); }
.ficha-section > summary:hover { background: var(--nf-surface-soft); }
.ficha-section[open] > summary {
  border-bottom: 1px solid var(--nf-border-soft);
  background: var(--nf-surface-soft);
}

.section-content {
  padding: var(--sp-6);
  animation: slideDown 180ms ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TABLAS ──────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-meta);
}
.data-table th {
  text-align: left;
  font-size: var(--fs-label);           /* 12px via token semántico */
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  text-transform: none;
  color: var(--nf-text-soft);
  padding: 12px var(--sp-4);
  border-bottom: 2px solid var(--nf-border-soft);
  background: var(--nf-bg-app);
  white-space: nowrap;
}
.data-table th:first-child { border-radius: var(--r-1) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-1) 0 0; }
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--nf-border-soft);
  color: var(--nf-text-main);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--nf-surface-soft); }

/* ── KV ROWS ─────────────────────────────────────────────────── */
.kv-row {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--nf-border-soft);
  align-items: flex-start;
  font-size: var(--fs-meta);
}
.kv-row:last-child { border-bottom: none; }
.kv-row .kv-key {
  width: 180px;
  flex-shrink: 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--nf-text-soft);
  padding-top: 1px;
}
.kv-row .kv-val { color: var(--nf-text-strong); flex: 1; }

/* ── INLINE FORMS ────────────────────────────────────────────── */
.inline-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.inline-form input,
.inline-form select {
  width: auto;
  min-width: 140px;
}

/* ── ALERT BOX ───────────────────────────────────────────────── */
.alert-box {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-meta);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  border-left: 3px solid transparent;
}
.alert-box.info    { background:var(--nf-bg-app);   border-left-color:var(--nf-border-mid); color:var(--nf-border-mid); }
.alert-box.success { background:var(--nf-brand-soft);     border-left-color:var(--nf-brand); color:var(--nf-brand-strong); }
.alert-box.warning { background:var(--nf-amber-soft);  border-left-color:var(--nf-amber); color:var(--nf-amber-deep); }
.alert-box.danger  { background:var(--nf-coral-soft);      border-left-color:var(--nf-coral); color:var(--nf-coral-deep); }

/* ── TIMELINE ────────────────────────────────────────────────── */
.timeline { padding-left: var(--sp-5); position: relative; }
.timeline::before {
  content:'';
  position:absolute;
  left:7px; top:0; bottom:0;
  width: 2px;
  background: var(--nf-border-soft);
}
.timeline-item {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -4px; top: 4px;
  width: 10px; height: 10px;
  background: var(--nf-surface);
  border: 2px solid var(--nf-border-mid);
  border-radius: 50%;
}
.timeline-item .tl-date {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.timeline-item .tl-content { font-size: var(--fs-meta); color: var(--nf-text-main); }

/* ── FICHA LAYOUT v2 — dos columnas ──────────────────────────── */
.ficha-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); align-items: start;
}
.ficha-nav {
  position: sticky; top: calc(58px + var(--sp-4));
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3); overflow: hidden;
}
.ficha-nav-header {
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-label); font-weight: var(--fw-semibold);
  color: var(--nf-text-soft); border-bottom: 1px solid var(--nf-border-soft);
}
.ficha-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-meta); color: var(--nf-text-main);
  text-decoration: none; border-left: 3px solid transparent;
  border-bottom: 1px solid var(--nf-border-soft); transition: background var(--duration-fast) var(--ease-out); cursor: pointer;
}
.ficha-nav-item:last-child { border-bottom: none; }
.ficha-nav-item:hover { background: var(--nf-surface-soft); color: var(--nf-brand-500); }
.ficha-nav-item.activo { border-left-color: var(--nf-brand-500); background: var(--nf-bg-app); color: var(--nf-brand-500); font-weight: var(--fw-medium); }
.ficha-nav-badge {
  background: var(--nf-coral); color: var(--nf-text-on-dark); font-size: var(--fs-micro); font-weight: var(--fw-bold);
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
.ficha-pendientes-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2); background: var(--nf-coral-soft);
  color: var(--nf-coral-deep); border: 1px solid var(--nf-coral);
  border-radius: 20px; font-size: var(--fs-label); font-weight: var(--fw-semibold);
  text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out);
}
.ficha-pendientes-chip:hover { background: #fca5a5; }
.ficha-doc-iframe {
  width: 100%; height: 75vh; border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3); margin-top: var(--sp-4);
}
.ficha-panel { min-width: 0; }
.ficha-sec { display: none; }
.ficha-sec.activo { display: block; }
.ficha-index-wrap { display: none; }

@media (max-width: 900px) {
  .ficha-layout { grid-template-columns: 1fr; }
  .ficha-nav { position: static; }
}

/* ── TABS ────────────────────────────────────────────────────── */
.client-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--nf-border-soft);
  margin-bottom: var(--sp-6);
  overflow-x: auto;
}
.client-tabs .tab {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  padding: var(--sp-3) var(--sp-5);
  color: var(--nf-text-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
}
.client-tabs .tab:hover { color: var(--nf-brand-500); }
.client-tabs .tab.active {
  color: var(--nf-brand-500);
  border-bottom-color: var(--nf-brand-500);
}

/* ── SOCIAL CARDS ────────────────────────────────────────────── */
.social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.social-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--nf-surface-soft);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  font-size: var(--fs-meta);
  transition: all var(--duration-fast) var(--ease-out);
}
.social-card:hover {
  background: var(--nf-bg-app);
  border-color: var(--nf-border-soft);
  text-decoration: none;
}
.social-icon { font-size: 1.1em; }

/* ── NEWS LIST ───────────────────────────────────────────────── */
.news-list { list-style: none; }
.news-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--nf-border-soft);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  font-size: var(--fs-meta);
}
.news-item:last-child { border-bottom: none; }
.news-item .news-date {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  padding-top: 2px;
  font-family: var(--nf-mono);
  min-width: 80px;
}

/* ── COLLAPSIBLE FORMS ───────────────────────────────────────── */
.collapsible-form {
  background: var(--nf-surface-soft);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}
.collapsible-form h4 {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-4);
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--nf-text-soft);
}
.empty-state .empty-icon {
  font-size: var(--fs-hero-num);
  margin-bottom: var(--sp-4);
  opacity: .4;
}
.empty-state h3 {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-2);
}
.empty-state p { font-size: var(--fs-meta); max-width: 320px; margin: 0 auto; }

/* ── STATS / COUNTERS ────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.stat-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  text-align: center;
}
.stat-card .stat-value {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
  margin-bottom: var(--sp-1);
}
.stat-card .stat-value.critico { color: var(--nf-coral-deep); }
.stat-card .stat-value.warn    { color: var(--nf-coral-deep); }
.stat-card .stat-value.eur {
  font-size: clamp(1.1rem, 2.5vw, 1.75rem);
  word-break: break-word;
}
.stat-card .stat-label {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
a.stat-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--duration-fast), transform var(--duration-fast);
}
a.stat-card-link:hover {
  box-shadow: 0 4px 12px rgba(10,36,99,.1);
  transform: translateY(-2px);
}

/* ── Sync buttons ────────────────────────────────────────────── */
.btn-sync .spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--nf-border-mid);
  border-top-color: var(--nf-brand-500);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-sync-ok  { background: var(--nf-brand-soft);  color: var(--nf-brand-strong);  border-color: var(--nf-brand); }
.btn-sync-err { background: var(--nf-coral-soft);   color: var(--nf-coral-deep);   border-color: var(--nf-coral); }

/* ── Accordion ───────────────────────────────────────────────── */
.accordion-row { cursor: pointer; }
.accordion-row:hover td { background: var(--nf-surface-soft); }
.accordion-row .acc-toggle { transition: transform .2s; display: inline-block; }
.accordion-row.open .acc-toggle { transform: rotate(90deg); }
.accordion-detail { display: none; }
.accordion-detail.open { display: table-row; }
.accordion-detail td { padding: 0; }
.accordion-inner { padding: var(--sp-2) var(--sp-4); background: var(--nf-surface-soft); }
.accordion-inner table { width: 100%; }

/* ── LOGIN ───────────────────────────────────────────────────── */
/* ── LOGIN V2 ────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nf-bg-app);
}
.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.login-brand {
  text-align: center;
  margin-bottom: 32px;
}
.login-brand__logo {
  height: 56px;
  margin-bottom: 12px;
}
.login-brand__name {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
}
.login-box .form-group { margin-bottom: 16px; text-align: left; }
.login-box .form-group label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  height: 44px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 14px;
  padding: 0 16px;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.login-input:focus {
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 3px rgba(16, 180, 74, 0.1);
}
.login-input::placeholder { color: var(--nf-text-faint); }
.login-btn-primary {
  width: 100%;
  padding: 13px;
  margin-top: 8px;
  background: var(--nf-brand-600);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background 160ms ease;
}
.login-btn-primary:hover { background: var(--nf-brand-700); }
.login-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-mid);
  border-radius: 14px;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-main);
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.login-btn-google:hover {
  background: var(--nf-surface-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.login-error {
  background: var(--nf-coral-soft);
  color: var(--nf-coral-deep);
  border: 1px solid var(--nf-coral);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-meta);
  margin-bottom: var(--sp-5);
}

/* ── FICHA FOOTER ────────────────────────────────────────────── */
.ficha-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--nf-border-soft);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── UTILIDADES ──────────────────────────────────────────────── */
.mt-1  { margin-top: var(--sp-1); }
.mt-2  { margin-top: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-1  { margin-bottom: var(--sp-1); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-3  { margin-bottom: var(--sp-3); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mt-16 { margin-top: var(--sp-4); }
.mb-16 { margin-bottom: var(--sp-4); }

.flex-between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.flex-center  { display:flex; align-items:center; gap:var(--sp-3); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-muted   { color: var(--nf-text-soft); font-size: var(--fs-meta); }
.text-mono    { font-family: var(--nf-mono); }
.text-lg      { font-size: var(--fs-section); }
.text-sm      { font-size: var(--fs-meta); }
.text-xs      { font-size: var(--fs-label); }
.font-bold    { font-weight: var(--fw-bold); }
.w-full       { width: 100%; }

.divider {
  border: none;
  border-top: 1px solid var(--nf-border-soft);
  margin: var(--sp-6) 0;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nf-surface-soft); }
::-webkit-scrollbar-thumb { background: var(--nf-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nf-text-faint); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: var(--sp-5) var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-tagline { display: none; }
  .client-grid { grid-template-columns: 1fr; }
  .ficha-header { padding: var(--sp-6); border-radius: var(--r-3); }
  .ficha-header h1 { font-size: var(--fs-page); }
  .page-header { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .kv-row { flex-direction: column; gap: var(--sp-1); }
  .kv-row .kv-key { width: auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-nav { display: none; }
  .ficha-sticky-bar .sticky-name { max-width: 200px; }
  .ficha-sticky-bar { padding: var(--sp-2) var(--sp-3); }
  .ficha-index-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ficha-index { flex-wrap: nowrap; }
  .ficha-section { scroll-margin-top: 130px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar input { max-width: 100%; }
}

/* ── DROPDOWN AUTOCOMPLETE ───────────────────────────────────── */
.dropdown-wrap {
  position: relative;
}
.dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--nf-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  box-shadow: var(--nf-shadow-md);
  z-index: var(--z-dropdown);
  max-height: 280px;
  overflow-y: auto;
}
.dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--nf-border-soft);
  font-size: var(--fs-meta);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--nf-bg-page); }
.dropdown-item strong { display: block; font-weight: var(--fw-semibold); color: var(--texto); }
.dropdown-item .nif  { font-family: var(--nf-mono); font-size: var(--fs-label); color: var(--nf-text-soft); }

/* ── STEP LABEL (multi-step flows) ──────────────────────────── */
.step-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: var(--sp-3);
}

/* ── HUB GRID (2×2 module cards) ─────────────────────────────── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.hub-grid .card { display: flex; flex-direction: column; }
.hub-grid .card-body { flex: 1; }
.hub-grid .card-footer {
  border-top: 1px solid var(--nf-border-soft);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
}
.hub-grid .card-footer .text-xs { color: var(--nf-text-soft); }
.hub-grid .preview-list { list-style: none; }
.hub-grid .preview-list li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--nf-border-soft);
  font-size: var(--fs-label);
  color: var(--nf-text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hub-grid .preview-list li:last-child { border-bottom: none; }

/* ── ERROR MODAL ─────────────────────────────────────────────── */
.error-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-modal {
  background: var(--nf-surface);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  max-width: 520px;
  width: 90%;
  box-shadow: var(--nf-shadow-lg);
}
.error-modal h3 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-section);
}
.error-modal pre {
  background: var(--nf-coral-soft);
  color: var(--nf-coral-deep);
  padding: var(--sp-4);
  border-radius: var(--r-2);
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--sp-4);
}
.error-modal .btn { float: right; }

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

/* ── SPINNER ─────────────────────────────────────────────────── */
.spinner-fiscal {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--nf-border-soft);
  border-top-color: var(--nf-brand-500);
  border-radius: 50%;
  animation: spin-fiscal .7s linear infinite;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
@keyframes spin-fiscal { to { transform: rotate(360deg); } }

/* ── CLIENT CHIP ─────────────────────────────────────────────── */
.client-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  border-radius: 20px;
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-4);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.client-chip .chip-close {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-section); color: var(--nf-text-soft);
  padding: 0 2px; line-height: var(--lh-1);
}
.client-chip .chip-close:hover { color: var(--nf-coral-deep); }

/* ── ACTION CELL (no-wrap for button groups) ─────────────────── */
.actions-cell {
  white-space: nowrap;
  min-width: 140px;
}
.actions-cell .btn { vertical-align: middle; }

/* ── NOTA CARD (log de notas internas) ───────────────────────── */
.nota-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.nota-card:last-child { margin-bottom: 0; }
.nota-card .nota-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
.nota-card .nota-texto {
  font-size: var(--fs-meta);
  line-height: var(--lh-relaxed);
  color: var(--nf-text-main);
  white-space: pre-wrap;
}
.nota-card textarea {
  width: 100%;
  min-height: 80px;
  margin-bottom: var(--sp-2);
}

/* ── MUTED ROWS (sin cert) ───────────────────────────────────── */
.fila-sin-cert td { opacity: .45; }
.fila-sin-cert:hover td { background: transparent; }

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  .topbar, .ficha-footer, .btn, .ficha-index-wrap, .ficha-sticky-bar { display: none; }
  body { background: white; }
  .ficha-header { background: white; color: var(--nf-brand-500); border: 2px solid var(--nf-brand-500); }
  .ficha-header h1, .ficha-header .nif-label { color: var(--nf-text-strong); }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.text-xs        { font-size: var(--fs-label); }
.text-sm        { font-size: var(--fs-meta); }
.text-muted     { color: var(--nf-text-soft); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-nowrap    { white-space: nowrap; }
.mono           { font-family: var(--nf-mono); }
.fw-600         { font-weight: var(--fw-semibold); }
.uppercase      { text-transform: uppercase; }
.section-label  { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--nf-text-soft); text-transform: uppercase; margin-bottom: 6px; }
.info-panel     { background: var(--nf-surface-soft); border-radius: 8px; padding: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.alert-traspaso { background: var(--nf-amber-soft); border-left: 4px solid var(--nf-amber); padding: 16px; margin-bottom: 16px; }
.alert-error    { background: var(--nf-coral-soft); border-left: 4px solid var(--nf-coral); padding: 16px; margin-bottom: 16px; }
.card-section   { background: var(--nf-surface); border: 1px solid var(--nf-border-soft); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.btn-resolver   { background: var(--nf-brand); color: #fff; border-color: var(--nf-brand); }

/* ── CLIENTE LIST (fichas/index) ─────────────────────────────── */
.cliente-row:hover {
  border-color: var(--nf-border-soft);
  box-shadow: var(--nf-shadow-sm);
  transform: translateX(3px);
}
.cliente-row:hover .acento { opacity: 1; }
.cliente-row:hover .tipo-label { display: block !important; }
.letra-nav:hover {
  background: var(--nf-brand-500) !important;
  color: #fff !important;
  border-color: var(--nf-brand-500) !important;
}
mark {
  background: var(--nf-amber-soft);
  color: var(--nf-text-strong);
  border-radius: 2px;
  padding: 0 2px;
}

/* ── MOTION REDUCTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================
   Módulo Documentos
   ============================================================= */
.doc-tabs { display:flex; flex-wrap:wrap; gap:0; border-bottom:2px solid var(--nf-border-soft); margin-bottom:1rem; }
.doc-tab { padding:.6rem 1rem; font-size:var(--fs-meta); color:var(--nf-text-soft); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.doc-tab:hover { color:var(--nf-brand-500); }
.doc-tab.active { color:var(--nf-brand-500); border-bottom-color:var(--nf-brand-500); font-weight: var(--fw-semibold); }
.doc-tab-count { font-size:var(--fs-micro); background:var(--nf-surface-soft); padding:1px 6px; border-radius:8px; margin-left:4px; }
.doc-tab-pending { background:var(--nf-amber-soft); color:var(--nf-amber); }

.doc-toolbar { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; margin-bottom:.5rem; }
.doc-toolbar-right { display:flex; gap:.5rem; align-items:center; }
.doc-check-all { display:flex; align-items:center; gap:.5rem; cursor:pointer; }

.doc-table .doc-col-check { width:32px; text-align:center; }
.doc-ext { display:inline-block; padding:2px 6px; border-radius:4px; font-size:var(--fs-micro); font-weight: var(--fw-semibold); font-family: var(--nf-mono); margin-right:6px; vertical-align:middle; }
.doc-ext-pdf { background:#fcebeb; color:#A32D2D; }
.doc-ext-xls { background:#EAF3DE; color:#3B6D11; }
.doc-ext-doc { background:#E6F1FB; color:#185FA5; }
.doc-ext-other { background:var(--nf-surface-soft); color:var(--nf-text-soft); }
.doc-name {
  font-size: var(--fs-meta); vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 380px; display: inline-block;
}
.doc-table td { vertical-align: middle; }
.doc-table .badge { padding: 1px 7px; font-size: var(--fs-micro); min-width: auto; }

.doc-actions { position:relative; }
.doc-menu-btn { background:none; border:1px solid var(--nf-border-soft); cursor:pointer; padding:2px 8px; border-radius:4px; }
.doc-dropdown { position:absolute; right:0; top:100%; background:#fff; border:1px solid var(--nf-border-soft); border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index: var(--z-dropdown); min-width:160px; }
.doc-dropdown a { display:block; padding:8px 14px; font-size:var(--fs-meta); color:var(--nf-text-main); text-decoration:none; }
.doc-dropdown a:hover { background:var(--nf-surface-soft); }
.doc-dropdown .text-danger { color:#c0392b; }

.doc-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding:1.5rem 0; }

.doc-selection-bar { position:fixed; bottom:0; left:0; right:0; background:var(--nf-brand-500); color:#fff; padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; z-index: var(--z-toast); }
.doc-selection-actions { display:flex; gap:.5rem; align-items:center; }

/* Bloque documentos en ficha cliente */

@media (max-width: 768px) {

}

/* Vistas alternables de documentos */

.doc-search-input { flex:1; min-width:120px; padding:4px 8px; border:1px solid var(--nf-border-soft); border-radius:4px; font-size:var(--fs-meta); }

/* Año filter + left view switcher */

/* Vinculación Drive */
.doc-cobertura-bar { display:inline-block; width:60px; height:6px; background:var(--nf-border-soft); border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:4px; }
.doc-cobertura-fill { height:100%; border-radius:3px; min-width:3px; }
.doc-cob-red { background:#E24B4A; }
.doc-cob-amber { background:#EF9F27; }
.doc-cob-blue { background:#185FA5; }
.doc-cob-green { background:#3B6D11; }
.doc-metric-card { text-decoration:none; color:inherit; cursor:pointer; transition:border-color var(--duration-fast); }
.doc-metric-card:hover { border-color:var(--nf-brand-500); }
.doc-tipo-select { font-size:var(--fs-micro); padding:2px 6px; border:1px solid var(--nf-border-soft); border-radius:4px; }
.doc-vincular-wrap { position:relative; }
.doc-vincular-input { width:100%; font-size:var(--fs-meta); padding:4px 8px; }
.doc-vincular-results { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--nf-border-soft); border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index: var(--z-dropdown); max-height:200px; overflow-y:auto; }
.doc-vincular-item { padding:8px 12px; font-size:var(--fs-meta); cursor:pointer; }
.doc-vincular-item:hover { background:var(--nf-surface-soft); }

/* ── NORMALIZACIÓN DRIVE ────────────────────────────────────── */
.doc-norm-tabs { display:flex; gap:0; border-bottom:2px solid var(--nf-border-soft); margin-bottom:1rem; }
.doc-norm-tab { padding:.6rem 1rem; font-size:var(--fs-meta); color:var(--nf-text-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.doc-norm-tab:hover { color:var(--nf-brand-500); }
.doc-norm-tab.active { color:var(--nf-brand-500); border-bottom-color:var(--nf-brand-500); font-weight: var(--fw-semibold); }
.doc-norm-tab-count { font-size:var(--fs-micro); background:var(--nf-surface-soft); padding:1px 6px; border-radius:8px; margin-left:4px; }
.doc-norm-row { cursor:pointer; }
.doc-norm-row:hover { background:var(--nf-surface-soft); }
.doc-norm-row .doc-norm-arrow { display:inline-block; width:1em; transition:transform var(--duration-fast); }
.doc-norm-row.expanded .doc-norm-arrow { transform:rotate(90deg); }
.doc-norm-detail-row { display:none; }
.doc-norm-detail-row.open { display:table-row; }
.doc-norm-detail-row td { padding:0 !important; }
.doc-norm-detail { padding:var(--sp-3); background:var(--nf-surface-soft); border-radius:var(--r-2); margin:var(--sp-2) var(--sp-2) var(--sp-3); }
.doc-norm-action { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--nf-border-soft); font-size:var(--fs-meta); }
.doc-norm-action:last-child { border-bottom:none; }
.doc-norm-badge-renombrar { background:var(--nf-bg-app); color:var(--nf-text-soft); }

/* ── DUPLICADOS DRIVE ─────────────────────────────────────── */
.doc-dup-tabs { display:flex; gap:0; border-bottom:2px solid var(--nf-border-soft); margin-bottom:1rem; }
.doc-dup-tab { padding:.6rem 1rem; font-size:var(--fs-meta); color:var(--nf-text-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.doc-dup-tab:hover { color:var(--nf-brand-500); }
.doc-dup-tab.active { color:var(--nf-brand-500); border-bottom-color:var(--nf-brand-500); font-weight: var(--fw-semibold); }
.doc-dup-tab-count { font-size:var(--fs-micro); background:var(--nf-surface-soft); padding:1px 6px; border-radius:8px; margin-left:4px; }
.doc-dup-file { display:flex; flex-direction:column; gap:2px; }
.doc-dup-link { word-break:break-all; }
.doc-norm-badge-mover { background:var(--nf-amber-soft); color:var(--nf-amber-deep); }
.doc-norm-badge-crear { background:var(--nf-brand-soft); color:var(--nf-brand-strong); }

/* ================================================================
   APP SHELL — Layout principal sidebar + topbar
   ================================================================ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ================================================================
   NONFOI V2 SHELL — Topbar + Sidebar + Layout
   ================================================================ */

/* ── TOPBAR V2 ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: var(--nf-sidebar-w); right: 0;
  height: var(--nf-topbar-h);
  background: var(--nf-topbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nf-topbar-border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  z-index: var(--z-sticky);
}

.topbar-brand {
  display: none; /* Brand now lives in sidebar */
}

.topbar-divider { display: none; }

.topbar-search {
  flex: 1;
  max-width: 520px;
  position: relative;
}

.topbar-search input {
  width: 100%;
  height: 40px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 16px;
  padding: 0 var(--sp-4) 0 38px;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  transition: var(--duration-fast) var(--ease-out);
  outline: none;
  box-shadow: 0 2px 12px rgba(16, 42, 50, 0.05);
}

.topbar-search input::placeholder { color: var(--nf-text-soft); }

.topbar-search input:focus {
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 3px rgba(16, 180, 74, 0.1);
}

.topbar-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nf-text-soft);
  pointer-events: none;
  font-size: var(--fs-label);
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 16px;
  background: var(--nf-topbar-action-bg);
  border: 1px solid var(--nf-topbar-action-border);
}

.topbar-icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--nf-text-main);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-body);
  box-shadow: none;
  transition: background 120ms ease;
  position: relative;
  text-decoration: none;
}
.topbar-icon-btn svg { color: var(--nf-text-strong); stroke-width: 1.8; opacity: 0.9; }

.topbar-icon-btn:hover {
  background: var(--nf-topbar-btn-hover);
}
.topbar-icon-btn:hover svg { opacity: 1; }

.topbar-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--nf-brand-500);
  border-radius: 50%;
  border: 2px solid var(--nf-topbar-action-bg);
}

.topbar-avatar {
  width: 34px; height: 34px;
  border-radius: 14px;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(16, 42, 50, 0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--nf-brand-700);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}

/* ── Theme toggle button ─────────────────────────────────────── */
.topbar-theme-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--nf-topbar-action-border);
  background: transparent;
  color: var(--nf-text-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta);
  transition: background 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
  opacity: 0.8;
}
.topbar-theme-btn:hover {
  background: var(--nf-topbar-btn-hover);
  border-color: var(--nf-brand-500);
  color: var(--nf-brand-500);
  opacity: 1;
}
.topbar-theme-btn.active {
  background: var(--nf-brand-100);
  border-color: var(--nf-brand-500);
  color: var(--nf-brand-600);
  opacity: 1;
}

/* ── BODY CON SIDEBAR ─────────────────────────────────────────── */
.app-body {
  display: flex;
  padding-top: var(--nf-topbar-h);
  min-height: 100vh;
}

/* ── SIDEBAR V5 ───────────────────────────────────────────────────
   El color lo pone public/css/nav-v5.css (tinta profunda --nf-nav-*,
   rev. 2026-08-18). Las reglas de fondo/borde de aquí quedan
   sobreescritas; se borrarán al consolidar. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--nf-sidebar-w);
  background: var(--nf-paper);
  color: var(--nf-ink);
  border-right: 1px solid var(--nf-paper-2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 14px 16px;
  transition: width var(--duration-normal) cubic-bezier(.4,0,.2,1), padding var(--duration-normal) cubic-bezier(.4,0,.2,1);
  z-index: var(--z-sticky);
}

.sidebar.collapsed { width: var(--nf-sidebar-w-collapsed); padding: 18px 6px 16px; }

/* Brand block — logo + texto */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 18px;
  border-bottom: 1px solid var(--nf-paper-2);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.sidebar-brand__mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-brand__name {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--nf-ink);
  transition: opacity var(--duration-fast);
}
.sidebar-brand__sub {
  font-size: var(--fs-micro);
  color: var(--nf-ink-3);
  letter-spacing: 0.02em;
  transition: opacity var(--duration-fast);
}
.sidebar.collapsed .sidebar-brand__name,
.sidebar.collapsed .sidebar-brand__sub { opacity: 0; }

.sidebar-section {
  padding: var(--sp-4) 0 var(--sp-2);
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--nf-paper-2);
}

.sidebar-section-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nf-text-faint);
  padding: 0 10px var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--duration-fast);
}

.sidebar.collapsed .sidebar-section-label { opacity: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-main);
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--nf-surface-soft);
  color: var(--nf-ink);
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--nf-surface);
  color: var(--nf-ink);
  box-shadow:
    inset 3px 0 0 var(--nf-brand-500),
    var(--nf-shadow-xs);
  font-weight: var(--fw-semibold);
}

.nav-item-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-meta);
  color: var(--nf-ink-3);
}

.nav-item.active .nav-item-icon { color: var(--nf-brand-500); }

.nav-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-fast);
}

.sidebar.collapsed .nav-item-label { opacity: 0; pointer-events: none; }

.nav-item-count {
  font-size: var(--fs-micro);
  font-family: var(--nf-mono);
  color: var(--nf-ink-3);
  background: var(--nf-paper-2);
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  transition: opacity var(--duration-fast);
}

.sidebar.collapsed .nav-item-count { opacity: 0; }

.nav-item.active .nav-item-count {
  background: var(--nf-brand-500);
  color: #FFFFFF;
}

/* Tooltip en modo colapsado */
.nav-item[data-tooltip] { position: relative; }

.sidebar.collapsed .nav-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--nf-ink);
  color: var(--nf-text-on-dark);
  font-size: var(--fs-label);
  padding: 4px 10px;
  border-radius: var(--r-2);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-tooltip);
}

/* ── SIDEBAR TOGGLE ───────────────────────────────────────────── */
.sidebar-toggle {
  margin: auto 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--nf-line);
  height: 48px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: transparent;
  color: var(--nf-ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-meta);
  transition: var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--nf-paper-2);
  color: var(--nf-text-main);
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--nf-text-main);
  outline-offset: -2px;
}

.sidebar-toggle:active {
  background: var(--nf-line);
}

/* ── MAIN CONTENT V2 ─────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--nf-sidebar-w);
  min-width: 0;
  min-height: calc(100vh - var(--nf-topbar-h));
  background: var(--nf-bg-page);
  transition: margin-left var(--duration-normal) cubic-bezier(.4,0,.2,1);
}

.main-content.sidebar-collapsed { margin-left: var(--nf-sidebar-w-collapsed); }

/* A5 (sesión Firmas pulido final 2026-05-26): refuerzo desde <html> y
   <body>. La clase .sidebar-collapsed se aplica a documentElement (FOUC
   pre-paint via head.ejs IIFE) y a body (via JS topbar.ejs apply()) —
   cubre todos los casos sin depender del timing de aplicación al main.
   La transition heredada de .main-content suaviza el cambio. */
html.sidebar-collapsed .main-content,
body.sidebar-collapsed .main-content { margin-left: var(--nf-sidebar-w-collapsed); }
/* FOUC también para .sidebar — width 248→60 sin flash inicial. */
html.sidebar-collapsed .sidebar { width: var(--nf-sidebar-w-collapsed); padding: 18px 6px 16px; }

/* Con la barra colapsada, los submenús se OCULTAN (Remo, 2026-09-21).
   Los `.nav-sub` son para la barra abierta; colapsada se llega por el icono
   del módulo.

   Por qué hace falta decirlo: la barra pasa a 60px y nada tocaba `.nav-sub`,
   así que sus enlaces seguían pintándose dentro de una caja de 19px. No
   fallaba ni avisaba — se leía como una decisión de diseño, que es
   exactamente lo que impide sospecharlo (R-LA-CLASE-INVENTADA-SE-LEE-COMO-DISEÑO).
   Medido a 720 en las tres rutas donde lo reportó CV6, antes del arreglo:

     /firmas          «· Tramitaciones»      scrollWidth 81  clientWidth 19
     /notificaciones  «· Mesa»               scrollWidth 37  clientWidth 19
     /onboarding      «· Cola de aterrizajes» scrollWidth 62  clientWidth 19

   Y su control, que es lo que hace que el cero de después signifique algo: a
   1280 la barra NO colapsa, los seis enlaces se ven y desbordan CERO. Por eso
   la regla cuelga de `.sidebar-collapsed` y no del ancho de ventana.

   Va aquí, con la familia de colapso, y no en `canon-v5.css`: es el
   comportamiento del shell al colapsar, no un token del canon. */
html.sidebar-collapsed .sidebar .nav-sub,
body.sidebar-collapsed .sidebar .nav-sub { display: none; }

.page-wrapper {
  max-width: var(--nf-content-default);  /* 1100px por defecto */
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

/* ── Modos de ancho canónicos ──────────────────────────────────── */
.page-wrapper.content-narrow  { max-width: var(--nf-content-narrow);  /* 640px  — formularios, settings */ }
.page-wrapper.content-default { max-width: var(--nf-content-default); /* 1100px — defecto explícito     */ }
.page-wrapper.content-wide    { max-width: var(--nf-content-wide);    /* 1420px — dashboards, tablas densas */ }

/* ── PAGE HEADER ──────────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--sp-8);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.page-header-title {
  font-family: var(--nf-display);
  font-size: var(--fs-page);   /* más funcional que decorativo — el token
                                  manda; el «26px» que decía aquí llevaba
                                  obsoleto desde D3 (era 24) y con F0 son 20 */
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-1);
  line-height: var(--lh-tight);
}

/* h1 dentro de page-header hereda la misma tipografía que page-header-title */
.page-header h1,
.page-header .page-title {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-1);
  line-height: var(--lh-tight);
}

/* Subtítulo / párrafo dentro de page-header */
.page-header > div > p,
.page-header .page-subtitle {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin: 0;
}

/* ── Tipografía utilitaria — escala disciplinada ───────────────── */

/* Título de sección dentro de página — funcional, no decorativo */
.section-title {
  font-family: var(--nf-sans);
  font-size: var(--fs-section);   /* 17px */
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

/* Etiqueta de grupo / divider de sección */
.section-label {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);           /* 12px */
  font-weight: var(--fw-bold);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Etiqueta de campo en pares clave-valor */
.data-label {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);           /* 12px */
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Texto secundario / metadata — fechas, IDs, contexto */
.meta {
  font-size: var(--fs-meta);            /* 13px */
  color: var(--nf-text-soft);
  line-height: 1.4;
}

/* Texto de datos numéricos / NIFs / códigos en tablas */
.mono-data {
  font-family: var(--nf-mono);
  font-size: var(--fs-dense);      /* 14px */
  letter-spacing: 0.01em;
}

.page-header-sub {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin: 0;
}
.page-header-date {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-soft);
  margin: 0;
}

/* ── SHORTCUT GRID (inicio.ejs) ───────────────────────────────── */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.shortcut-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--duration-fast) var(--ease-out);
  box-shadow: 0 1px 3px rgba(10,36,99,.08), 0 0 0 0.5px rgba(10,36,99,.06);
}

.shortcut-card:hover {
  border-color: var(--nf-border-soft);
  box-shadow: 0 4px 12px rgba(10,36,99,.12), 0 0 0 1px rgba(10,36,99,.08);
  transform: translateY(-1px);
}

.shortcut-card-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  background: var(--nf-bg-app);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.shortcut-card-icon svg {
  width: 18px; height: 18px;
  color: var(--nf-brand-500);
}

.shortcut-card-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  line-height: 1.3;
}

.shortcut-card-desc {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  line-height: 1.4;
}

/* ── KPI ROW ──────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.kpi-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 1px 3px rgba(10,36,99,.08), 0 0 0 0.5px rgba(10,36,99,.06);
}

.kpi-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-extra);
  text-transform: uppercase;
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-2);
}

.kpi-value {
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-regular);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
  margin-bottom: var(--sp-1);
}

.kpi-delta {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.kpi-delta.positive { color: var(--nf-brand-strong); }
.kpi-delta.warning  { color: #8A6520; }

/* ── SECTION HEADER ───────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.section-header .section-title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  letter-spacing: 0.02em;
}

.section-count {
  font-size: var(--fs-label);
  font-family: var(--nf-mono);
  color: var(--nf-text-soft);
}

.section-action {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--nf-brand-500);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.section-action:hover { text-decoration: underline; }

.sidebar .nav-item svg {
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.sidebar .nav-item:hover svg { opacity: 1; }
.sidebar .nav-item.active svg {
  opacity: 1;
  color: var(--nf-brand-500);
}

/* ================================================================
   FIN APP SHELL
   ================================================================ */

/* ================================================================
   UTILIDADES — eliminación inline styles
   ================================================================ */

.section-gap { margin-bottom: var(--sp-5); }

.summary-danger  { color: var(--nf-coral-deep); }
.summary-warning { color: var(--nf-amber-deep); }
.summary-alert   { color: var(--nf-coral-deep); }

.alert-success {
  background: var(--nf-brand-soft);
  border-left: 4px solid var(--nf-brand);
  padding: var(--sp-4);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  color: var(--nf-brand-strong);
}

/* ── Margin/padding helpers ─────────────────────────────────── */
.ml-1  { margin-left: var(--sp-1); }
.ml-2  { margin-left: var(--sp-2); }
.ml-auto { margin-left: auto; }
.mr-1  { margin-right: var(--sp-1); }
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.p-3   { padding: var(--sp-3); }

/* ── Display / flex helpers ─────────────────────────────────── */
.d-inline       { display: inline; }
.d-inline-flex  { display: inline-flex; align-items: center; }
.shrink-0       { flex-shrink: 0; }
.flex-1         { flex: 1; }
.flex-col       { display: flex; flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.justify-end { justify-content: flex-end; }

/* ── Text helpers ───────────────────────────────────────────── */
.clickable      { cursor: pointer; }
.break-all      { word-break: break-all; }
.text-strikethrough { text-decoration: line-through; }
.opacity-muted  { opacity: .6; }
.text-azul      { color: var(--nf-brand-500); }
.text-gris-800  { color: var(--nf-text-main); }
.text-rojo      { color: var(--nf-coral-deep); }
.text-amarillo  { color: var(--nf-amber-deep); }
.text-italic-muted { font-style: italic; color: var(--nf-text-soft); }
.fw-400         { font-weight: var(--fw-regular); }

/* ── Ficha-specific components ──────────────────────────────── */
.btn-xs {
  padding: 2px 8px;
  font-size: var(--fs-micro);
}
.btn-xxs {
  padding: 1px 8px;
  font-size: var(--fs-micro);
}
.btn-mini {
  padding: 1px 6px;
  font-size: var(--fs-micro);
}

.ficha-subtitle {
  margin: 16px 0 8px;
  font-size: var(--fs-body);
}

.ficha-subsection-title {
  font-size: .95em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--nf-border-soft);
}

.ficha-separator {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--nf-border-soft);
}

.ficha-separator-flex {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--nf-border-soft);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ficha-input-date {
  width: 160px;
}

.label-inline {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.ficha-pending-list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ficha-pending-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--nf-coral-soft);
  border: 1px solid var(--nf-coral);
  border-radius: var(--r-2);
}

.ficha-pending-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,.6);
  border-radius: var(--r-1);
}

.ficha-area-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--nf-coral-deep);
  margin-right: var(--sp-2);
}

.ficha-area-label-block {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nf-coral-deep);
  margin-bottom: var(--sp-2);
}

.ficha-danger-title {
  font-weight: var(--fw-bold);
  color: var(--nf-coral-deep);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ficha-detail-text {
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
}

.ficha-date-muted {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-left: var(--sp-2);
}

.icon-link { font-size: var(--fs-section); }

.link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
}

.icon-sm { font-size: var(--fs-body); }

.sage-info-box {
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  padding: 12px;
  font-size: var(--fs-meta);
}

.sage-info-title {
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin-bottom: 8px;
}

.badge-fiscal-neutral {
  background: var(--nf-border-soft);
  color: var(--nf-text-soft);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-micro);
}

.badge-fiscal-warn {
  background: var(--nf-amber-soft);
  color: var(--nf-amber-deep);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-micro);
}

.badge-fiscal-danger {
  background: var(--nf-coral-soft);
  color: var(--nf-coral-deep);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--fs-micro);
}

.text-detail { font-size: var(--fs-meta); }

.text-095 { font-size: var(--fs-body); }

.text-09  { font-size: .9em; }

.text-085 { font-size: .85em; }

.text-082 { font-size: .82em; }

.text-075 { font-size: .75em; }

.text-08  { font-size: var(--fs-label); }

.censal-card {
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #fff;
}

.censal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .85em;
  color: var(--nf-text-soft);
}

.censal-warning {
  background: var(--nf-amber-soft);
  border: 1px solid var(--nf-amber);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: .9em;
  color: var(--nf-amber-deep);
}

.modelo-tag {
  font-family: var(--nf-mono);
  font-size: .8em;
  background: var(--nf-bg-app);
  color: var(--nf-text-strong);
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
  margin: 1px;
}

.fiscal-col-gap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ficha-summary-toggle {
  cursor: pointer;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  list-style: none;
  padding: var(--sp-2) 0;
}

.sage-details-toggle {
  cursor: pointer;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--nf-brand-500);
  list-style: none;
  padding: var(--sp-2) 0;
}

.alert-box-flush { margin: 0 0 12px; }

.max-w-600 { max-width: 600px; }
.max-w-500 { max-width: 500px; }
.max-w-550 { max-width: 550px; }

.badge-exento {
  background: #fff;
  color: var(--nf-text-soft);
  border: 1px solid var(--nf-border-soft);
}

.badge-automatico {
  background: var(--nf-border-soft);
  color: var(--nf-text-main);
}

.badge-revisar {
  background: #ffe8d6;
  color: #c75000;
  border: 1px solid #ffb380;
}

.badge-sage-origin {
  background: var(--nf-bg-app);
  color: var(--nf-brand-500);
}

.badge-manual-origin {
  background: #f0f0f0;
  color: var(--nf-text-soft);
}

.badge-iban-loading {
  background: var(--nf-surface-soft);
  color: var(--nf-text-soft);
}

.cell-truncate {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ul-notas-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.ficha-pendientes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.nueva-sage-success {
  background: #e8f5e9;
  border-left: 4px solid #2e7d32;
  padding: 16px;
  margin-bottom: 20px;
}

.nueva-sage-info {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.nueva-sage-title {
  margin: 20px 0 12px;
  font-size: var(--fs-body);
}

.color-success { color: #2e7d32; }

.flex-2 { flex: 2; }

.flex-end-align {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.form-actions-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.documentos-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: var(--z-modal-backdrop);
  overflow-y: auto;
}

.documentos-modal-card {
  max-width: 700px;
  margin: var(--sp-10) auto;
  background: var(--nf-surface);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  position: relative;
}

.documentos-close-btn {
  position: absolute;
  right: var(--sp-3);
  top: var(--sp-3);
}

.documentos-filters {
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.documentos-filters-justify {
  justify-content: center;
  margin-top: var(--sp-4);
  gap: var(--sp-2);
}

.documentos-flex-min {
  flex: 1;
  min-width: 200px;
}

.documentos-code-block {
  background: var(--nf-surface-soft);
  padding: var(--sp-4);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-size: var(--fs-label);
  max-height: 60vh;
  overflow-y: auto;
}

.badge-subtipo { font-size: var(--fs-micro); }

/* index.ejs client list components */
.index-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nf-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-section);
  color: var(--nf-brand-500);
  flex-shrink: 0;
}

.index-client-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-client-nif {
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-top: 1px;
}

.index-meta-group {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.index-tipo-badge {
  font-size: var(--fs-micro);
}

.index-client-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.index-acento {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--nf-brand-500);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.index-client-info {
  flex: 1;
  min-width: 0;
}

.index-search-wrap {
  position: relative;
  max-width: 480px;
}

.index-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nf-border-soft);
  font-size: var(--fs-body);
  pointer-events: none;
}

.index-search-input {
  width: 100%;
  padding-left: 40px;
  font-size: var(--fs-section);
}

.index-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--nf-text-soft);
  font-size: var(--fs-section);
}

.index-count-stat {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
  min-width: 36px;
}

.index-tipo-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.index-tipo-label-hidden {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--nf-text-soft);
  flex-shrink: 0;
}

.index-separator {
  flex: 1;
  height: 1px;
  background: var(--nf-border-soft);
}

.index-letra-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-4);
  background: var(--nf-bg-app);
  border-radius: var(--r-2);
  border: 1px solid var(--nf-border-soft);
}

.letra-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-1);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: var(--nf-display);
}

.index-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.index-icon-muted {
  color: var(--nf-border-soft);
  font-size: var(--fs-body);
  flex-shrink: 0;
}

.hr-max-w { max-width: 550px; }

.proceso-border-tipo {
  border-left: 3px solid;
  padding-left: var(--sp-2);
}

/* ── PROCESOS — Layout ──────────────────────────────────────── */

.proceso-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.proceso-progress-bar {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.proceso-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.proceso-campo-row {
  margin-top: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
}

.proceso-campo-clave { flex: 1; }
.proceso-campo-valor { flex: 2; }

.proceso-historial-entry {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}

.proceso-historial-header {
  display: flex;
  justify-content: space-between;
}

.proceso-transicion-notas { margin-top: var(--sp-3); }

.proceso-blocked-card {
  border-left: 4px solid var(--nf-coral);
}

.proceso-blocked-title { color: var(--nf-coral-deep); }

.proceso-select-full {
  width: 100%;
  margin-bottom: var(--sp-2);
}

/* ── PROCESOS — Dashboard ───────────────────────────────────── */

.proceso-tipo-title { margin: 0; }

.proceso-tipo-count { margin: var(--sp-1) 0 0; }

.proceso-blocked-list {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-4);
}

.proceso-blocked-link { color: inherit; }

/* ── PROCESOS — Kanban ──────────────────────────────────────── */

.kanban-board {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-4);
  min-height: 400px;
}

.kanban-column {
  min-width: 240px;
  flex: 1;
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}

.kanban-column-title {
  margin: 0;
  font-size: var(--fs-meta);
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.kanban-card {
  padding: var(--sp-3);
  cursor: pointer;
}

.kanban-card-title { font-size: var(--fs-meta); }

.kanban-card-footer {
  margin-top: var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-card-deadline { color: var(--nf-coral-deep); }

/* ── PROCESOS — Form ────────────────────────────────────────── */

.proceso-form-card { max-width: 600px; }

.proceso-search-results {
  display: none;
  position: relative;
  z-index: var(--z-dropdown);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  max-height: 200px;
  overflow-y: auto;
}

.proceso-search-result-item {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid var(--nf-border-soft);
}

.proceso-form-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ── PROCESOS — Utilidades compartidas ──────────────────────── */

.flex-center-sm { display: flex; align-items: center; gap: var(--sp-2); }

.text-tiny-note { margin-top: 2px; }

/* ================================================================
   FIRMAS — Clases para eliminar inline styles
   ================================================================ */

/* ── Dashboard stat counters ─────────────────────────────────── */
.firmas-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.firmas-counter-card {
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--duration-fast);
}
.firmas-counter-card:hover {
  box-shadow: var(--nf-shadow-sm);
  color: inherit;
}

.firmas-counter-card--critico {
  background: #ffebee;
  border: 1px solid #ef9a9a;
}
.firmas-counter-card--proximo {
  background: #fff3e0;
  border: 1px solid #ffb74d;
}
.firmas-counter-card--activo {
  background: var(--nf-brand-soft);
  border: 1px solid var(--nf-brand);
}
.firmas-counter-card--tramitaciones {
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
}

.firmas-counter-value {
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
}
.firmas-counter-value--critico { color: #c62828; }
.firmas-counter-value--proximo { color: #e65100; }
.firmas-counter-value--activo  { color: var(--nf-brand-700); }
.firmas-counter-value--azul    { color: var(--nf-text-strong); }

.firmas-counter-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
}
.firmas-counter-label--critico { color: #c62828; }
.firmas-counter-label--proximo { color: #e65100; }
.firmas-counter-label--activo  { color: var(--nf-brand-700); }
.firmas-counter-label--azul    { color: var(--nf-text-strong); }

/* ── Dashboard section container ─────────────────────────────── */
.firmas-section-container {
  border-radius: 12px;
  border: 1px solid var(--nf-border-soft);
}

/* ── Badge inline spacing ────────────────────────────────────── */
.firmas-badge-inline {
  font-size: var(--fs-micro);
  vertical-align: middle;
  margin-left: 8px;
}

.firmas-badge-count {
  margin-left: 8px;
  font-weight: var(--fw-semibold);
}

.firmas-badge-adjacent {
  margin-left: 4px;
}

/* ── Button toolbar ──────────────────────────────────────────── */
.firmas-actions {
  display: flex;
  gap: 8px;
}

/* ── Section empty state ─────────────────────────────────────── */
.firmas-empty-state {
  padding: 24px;
}

/* ── Section footer link ─────────────────────────────────────── */
.firmas-section-link {
  margin-top: 10px;
}
.firmas-section-link a {
  font-size: var(--fs-meta);
}

/* ── Table cell variants ─────────────────────────────────────── */
.firmas-cell-bold {
  font-weight: var(--fw-semibold);
}
.firmas-cell-muted {
  color: var(--nf-text-soft);
}
.firmas-cell-small {
  font-size: var(--fs-meta);
}
.firmas-cell-small-muted {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}
.firmas-cell-nowrap {
  white-space: nowrap;
}
.firmas-cell-center {
  text-align: center;
}
.firmas-cell-estado {
  font-size: var(--fs-meta);
}

/* ── Table th min-width for actions ──────────────────────────── */
th.firmas-col-acciones {
  min-width: 140px;
}
th.firmas-col-acciones-sm {
  width: 80px;
}

/* ── Semaforo row backgrounds ────────────────────────────────── */
.firmas-row-critico      { background: #ffebee; }
.firmas-row-revocado     { background: #ef9a9a; }
.firmas-row-proximo      { background: #fff3e0; }
.firmas-row-prealerta    { background: #fffde7; }
.firmas-row-vigente      { background: white; }
.firmas-row-en-curso     { background: #e3f2fd; }
.firmas-row-completado   { background: #f1f8e9; }
.firmas-row-inactivo     { background: var(--nf-surface-soft); }
.firmas-row-bloqueado    { background: #fff0f1; }

/* ── Null value placeholder ──────────────────────────────────── */
.firmas-null {
  color: var(--nf-text-soft);
}

/* ── Filter/form bar ─────────────────────────────────────────── */
.firmas-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: flex-end;
}

.firmas-filter-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  margin-bottom: 3px;
  color: var(--nf-text-soft);
}

.firmas-filter-select {
  padding: 8px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  font-size: var(--fs-meta);
}

.firmas-filter-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  font-size: var(--fs-meta);
}

.firmas-filter-grow {
  flex: 1;
  min-width: 200px;
}

.firmas-filter-grow-sm {
  flex: 1;
  min-width: 160px;
}

.firmas-filter-end {
  align-self: flex-end;
}

/* ── Mini-nav badges ─────────────────────────────────────────── */
.firmas-nav-badge {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-label);
  text-decoration: none;
}

/* ── Nav row ─────────────────────────────────────────────────── */
.firmas-nav-row {
  display: flex;
  gap: 8px;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Header gap ──────────────────────────────────────────────── */
.firmas-header-gap {
  gap: var(--sp-2);
}

/* ── Overflow table wrapper ──────────────────────────────────── */
.firmas-table-wrap {
  overflow-x: auto;
}

/* ── Pagination ──────────────────────────────────────────────── */
.firmas-pagination {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

/* ── Badge tipo ──────────────────────────────────────────────── */
.firmas-badge-tipo {
  font-size: var(--fs-micro);
}

/* ── Badge estado tramitacion ────────────────────────────────── */
.firmas-badge-estado {
  font-size: var(--fs-micro);
  text-transform: capitalize;
}

/* ── Progress cell ───────────────────────────────────────────── */
.firmas-cell-progress {
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.firmas-progress-sep {
  color: var(--nf-text-faint);
}

.firmas-progress-count {
  color: var(--nf-text-soft);
  margin-left: 4px;
}

/* ── Tipo badge capitalize ───────────────────────────────────── */
.firmas-badge-capitalize {
  text-transform: capitalize;
}

/* ── Certificate form container ──────────────────────────────── */
.firmas-form-card {
  background: #fff;
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  padding: 28px;
}

/* ── Required field asterisk ─────────────────────────────────── */
.firmas-required {
  color: var(--nf-coral-deep);
}

/* ── NIF input uppercase ─────────────────────────────────────── */
.firmas-input-uppercase {
  text-transform: uppercase;
}

/* ── Alert box spacing ───────────────────────────────────────── */
.firmas-alert-mb {
  margin-bottom: 20px;
}

/* ── PFX file info ───────────────────────────────────────────── */
.firmas-pfx-info {
  margin-bottom: 6px;
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

/* ── Password hint ───────────────────────────────────────────── */
.firmas-password-hint {
  margin-bottom: 6px;
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

/* ── File input padding ──────────────────────────────────────── */
.firmas-file-input {
  padding: 8px 0;
}

/* ── Form footer actions ─────────────────────────────────────── */
.firmas-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ── Clickable stat card ─────────────────────────────────────── */
.firmas-stat-clickable {
  cursor: pointer;
}

/* ── Stat value color variants ───────────────────────────────── */
.firmas-stat-verde {
  color: var(--nf-brand-strong);
}
.firmas-stat-gris {
  color: var(--nf-text-soft);
}

/* ── Badge consultoria ───────────────────────────────────────── */
.firmas-badge-consultoria {
  background: var(--nf-amber-soft);
  color: var(--nf-text-strong);
  border-color: var(--nf-amber);
}

/* ── v2 — Card inner padding ─────────────────────────────────── */
.firmas-card-padded {
  padding: var(--sp-5);
}
.firmas-card-padded-sm {
  padding: var(--sp-4);
}

/* ── v2 — Timeline step ─────────────────────────────────────── */
.firmas-timeline-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: space-between;
}

.firmas-timeline-step {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--r-2);
}

.firmas-step-icon {
  font-size: var(--fs-section);
}

.firmas-step-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-1);
}

.firmas-step-status-ok {
  color: var(--nf-brand-strong);
}
.firmas-step-status-actual {
  color: var(--nf-text-strong);
  font-weight: var(--fw-bold);
}

/* ── v2 — Detail heading ─────────────────────────────────────── */
.firmas-detail-heading {
  font-size: var(--fs-section);
}

/* ── v2 — Notes pre-wrap ─────────────────────────────────────── */
.firmas-notes {
  white-space: pre-wrap;
}

/* ── v2 — Zendesk link ───────────────────────────────────────── */
.firmas-zendesk-link {
  margin-left: var(--sp-2);
}

/* ── v2 — Action bar label ───────────────────────────────────── */
.firmas-action-label {
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-right: var(--sp-2);
}

/* ── v2 — Danger button ──────────────────────────────────────── */
.firmas-btn-danger {
  color: var(--nf-coral-deep);
  border-color: var(--nf-coral);
}

/* ── v2 — Muted button ──────────────────────────────────────── */
.firmas-btn-muted {
  color: var(--nf-text-soft);
}

/* ── v2 — Blocked alert ──────────────────────────────────────── */
.firmas-blocked-title {
  color: var(--nf-coral-deep);
}

.firmas-blocked-reason {
  margin-top: var(--sp-2);
}

.firmas-blocked-actions {
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.firmas-desbloq-select {
  padding: 4px 8px;
}

/* ── v2 — Response card ──────────────────────────────────────── */
.firmas-response-header {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.firmas-response-quote {
  font-style: italic;
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  margin-bottom: var(--sp-2);
}

.firmas-response-actions {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
}

/* ── v2 — Upload section ─────────────────────────────────────── */
.firmas-upload-section {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--nf-border-soft);
}

.firmas-upload-heading {
  text-transform: uppercase;
  color: var(--nf-text-soft);
  letter-spacing: var(--ls-wide);
}

.firmas-upload-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.firmas-upload-input {
  font-size: var(--fs-meta);
}

/* ── v2 — Form max-width ─────────────────────────────────────── */
.firmas-form-narrow {
  max-width: 700px;
  padding: var(--sp-6);
}

/* ── v2 — Form lookup dropdown ───────────────────────────────── */
.firmas-lookup-wrapper {
  position: relative;
}

.firmas-lookup-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  box-shadow: var(--nf-shadow-md);
  max-height: 240px;
  overflow-y: auto;
  left: 0;
  right: 0;
}

.firmas-lookup-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--nf-border-soft);
  font-size: var(--fs-meta);
}
.firmas-lookup-item:hover {
  background: var(--nf-surface-soft);
}

/* ── v2 — Lista stat cards borders ───────────────────────────── */
.firmas-stat-border-azul    { border-left: 3px solid var(--nf-text-strong); }
.firmas-stat-border-rojo    { border-left: 3px solid #ff5a5f; background: #fff0f1; }

/* ── v2 — Inline form filter card ────────────────────────────── */
.firmas-filter-card {
  padding: var(--sp-4);
}
.firmas-inline-filter {
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ── v2 — Titular uppercase ──────────────────────────────────── */
.firmas-titular-upper {
  text-transform: uppercase;
}

/* ── v2 — Auditoria header actions ───────────────────────────── */
.firmas-audit-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

/* ── v2 — Simular stats grid 4-col ───────────────────────────── */
.firmas-simular-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ── v2 — Small mono text ────────────────────────────────────── */
.firmas-mono-small {
  font-size: var(--fs-micro);
}
.firmas-mono-small-azul {
  font-size: var(--fs-micro);
  color: var(--nf-text-strong);
}

/* ── CTA margin-top ──────────────────────────────────────────── */
.firmas-cta-top {
  margin-top: 12px;
}

/* ── Link color dark ─────────────────────────────────────────── */
.firmas-link-dark {
  color: var(--nf-text-main);
}
.firmas-link-dark:hover {
  color: var(--nf-brand-500);
}

/* ── Cell font-size variants ─────────────────────────────────── */
.firmas-cell-empresa {
  color: var(--nf-text-soft);
  font-size: var(--fs-meta);
}
.firmas-cell-fecha {
  font-size: var(--fs-meta);
}
.firmas-cell-tipo {
  font-size: var(--fs-meta);
}

/* ── v2 — Response card dynamic bg ───────────────────────────── */
.firmas-response-positiva  { background: #f0fdf4; border-color: #86efac; }
.firmas-response-negativa  { background: #fef2f2; border-color: #fca5a5; }
.firmas-response-consulta  { background: #eff6ff; border-color: #93c5fd; }
.firmas-response-neutral   { background: #f9fafb; border-color: #d1d5db; }

/* ── Banner RM info ──────────────────────────────────────────── */
.firmas-banner-rm {
  background: var(--nf-bg-app);
  border-color: var(--nf-border-soft);
  color: var(--nf-text-strong);
  margin-bottom: 16px;
}

/* ── Banner tipo spacing ─────────────────────────────────────── */
.firmas-banner-tipo {
  margin-bottom: 16px;
}

/* ================================================================
   CERTIFICADO NUEVO — layout 2 columnas + card tipo
   ================================================================ */

.cert-nuevo-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .cert-nuevo-grid { grid-template-columns: 1fr; }
}

.cert-section-label {
  display: block;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin-bottom: 14px;
}

.cert-tipo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.cert-tipo-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 2px solid var(--nf-border-mid);
  border-radius: 10px;
  background: var(--nf-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  box-shadow: var(--nf-shadow-sm);
  text-align: left;
  width: 100%;
}
.cert-tipo-card:hover {
  border-color: var(--nf-brand-500);
  box-shadow: var(--nf-shadow-md);
}
.cert-tipo-card.activo {
  border-color: var(--nf-brand-500);
  background: var(--nf-brand-soft);
  box-shadow: var(--nf-shadow-md);
}

.cert-tipo-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--nf-border-mid);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border var(--duration-fast);
}
.cert-tipo-card.activo .cert-tipo-radio {
  border: 6px solid var(--nf-brand-500);
}

.cert-tipo-nombre {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin-bottom: 3px;
}
.cert-tipo-desc {
  font-family: var(--nf-sans);
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}

.cert-pfx-split {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.cert-pfx-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid var(--nf-border-mid);
  border-radius: 8px;
  background: var(--nf-surface);
  cursor: pointer;
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  transition: border-color var(--duration-fast);
}
.cert-pfx-option.activo {
  border-color: var(--nf-brand-500);
  background: var(--nf-brand-soft);
}
.cert-pfx-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--nf-border-mid);
  flex-shrink: 0;
  transition: border var(--duration-fast);
}
.cert-pfx-option.activo .cert-pfx-radio {
  border: 5px solid var(--nf-brand-500);
}

.cert-drop-zone {
  border: 2px dashed var(--nf-border-mid);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
  margin-bottom: 20px;
}
.cert-drop-zone.dragging {
  border-color: var(--nf-brand-500);
  background: var(--nf-brand-soft);
}
.cert-drop-icon { color: var(--nf-text-soft); }
.cert-drop-icon.ok { color: var(--nf-brand-strong); }
.cert-drop-text-main {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin-bottom: 2px;
}
.cert-drop-text-sub {
  font-family: var(--nf-sans);
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}

.cert-form-box {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--nf-shadow-sm);
  margin-bottom: 16px;
}

.cert-guide-panel {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--nf-shadow-sm);
  margin-bottom: 20px;
}
.cert-guide-placeholder {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  text-align: center;
  padding: 20px 0;
}
.cert-guide-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.cert-guide-icon { color: var(--nf-brand-500); flex-shrink: 0; margin-top: 2px; }
.cert-guide-title {
  font-family: var(--nf-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  line-height: 1.3;
}
.cert-guide-reqs-label {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  margin-bottom: 8px;
}
.cert-guide-reqs {
  margin: 0 0 14px;
  padding-left: 16px;
}
.cert-guide-reqs li {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);
  color: var(--nf-text-main);
  margin-bottom: 5px;
}
.cert-guide-fnmt {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-brand-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.cert-guide-fnmt:hover { color: var(--nf-brand-600); text-decoration: none; }
.cert-guide-tiempo-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.cert-guide-tiempo-label {
  font-family: var(--nf-sans);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
.cert-guide-tiempo {
  display: inline-block;
  font-family: var(--nf-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--nf-surface-soft);
  color: var(--nf-text-soft);
  border: 1px solid var(--nf-border-soft);
}

.cert-msg-panel {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--nf-shadow-sm);
}
.cert-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cert-msg-title {
  font-family: var(--nf-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.cert-msg-badge {
  font-family: var(--nf-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--nf-surface-soft);
  color: var(--nf-text-soft);
  border: 1px solid var(--nf-border-soft);
}

/* solicitudes-nueva.ejs — clases extraídas de inline styles (D-V5-EJS-INLINE-STYLES-LEAKAGE, 2026-05-24) */
.sol-nueva-card { max-width: 600px; }
.sol-nueva-form {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.sol-nueva-required { color: var(--nf-brand-500); }
.sol-nueva-field {
  width: 100%;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  font-family: inherit;
  font-size: var(--fs-dense);
}
.sol-nueva-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
.sol-nueva-radios {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  margin: 0;
}
.sol-nueva-radios legend {
  padding: 0 var(--sp-2);
}
.sol-nueva-radio {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-dense);
}

/* certificado-form.ejs — clases extraídas de inline styles (D-V5-EJS-INLINE-STYLES-LEAKAGE, 2026-05-24) */
.cert-breadcrumb { font-size: var(--fs-label); }
.cert-opt-marker { font-weight: var(--fw-regular); }
.cert-msg-textarea-wrap {
  display: flex;
  gap: var(--sp-2);
}
.cert-msg-textarea {
  flex: 1;
  font-family: var(--nf-sans);
  font-size: var(--fs-dense);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--nf-border-soft);
  background: var(--nf-surface);
  color: var(--nf-text-main);
  resize: none;
  outline: none;
}

/* ================================================================
   FISCAL — Clases para eliminar inline styles
   ================================================================ */

/* ── Censal-cliente page header ─────────────────────────────── */
.fiscal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fiscal-breadcrumb {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

.fiscal-client-title {
  margin: 6px 0 0;
  font-size: var(--fs-section);
}

.fiscal-client-nif {
  font-family: monospace;
  color: var(--nf-text-soft);
  font-size: var(--fs-meta);
}

/* ── Censal-cliente alert / card panels ─────────────────────── */
.fiscal-alert-nodata {
  background: var(--nf-amber-soft);
  border: 1px solid var(--nf-amber);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.fiscal-card-panel {
  background: #fff;
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.fiscal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.fiscal-card-title {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--nf-text-strong);
}

.fiscal-meta-date {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.fiscal-error-msg {
  color: var(--nf-coral-deep);
  font-size: var(--fs-meta);
  margin-bottom: 12px;
}

/* ── Censal-cliente data grid ───────────────────────────────── */
.fiscal-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fiscal-data-value {
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
}

.fiscal-span-full {
  grid-column: 1 / -1;
}

/* ── Censal-cliente tables ──────────────────────────────────── */
.fiscal-table-compact {
  width: 100%;
  font-size: var(--fs-meta);
  border-collapse: collapse;
}

.fiscal-table-compact tr {
  border-bottom: 1px solid var(--nf-border-soft);
}

.fiscal-cell-code {
  padding: 4px 8px 4px 0;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--nf-text-strong);
}

.fiscal-cell-desc {
  padding: 4px 8px;
  color: var(--nf-text-main);
}

.fiscal-cell-estado {
  padding: 4px 0;
  text-align: right;
  white-space: nowrap;
}

.fiscal-cell-fecha {
  padding: 4px 0 4px 12px;
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  white-space: nowrap;
}

.fiscal-cell-obligacion {
  padding: 4px 12px 4px 0;
  color: var(--nf-text-strong);
}

.fiscal-cell-periodicidad {
  padding: 4px 8px;
  white-space: nowrap;
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
}

.fiscal-empty-text {
  color: var(--nf-text-faint);
  font-size: var(--fs-meta);
}

/* ── Censal-cliente certificado panel ───────────────────────── */
.fiscal-cert-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fiscal-cert-select {
  font-size: var(--fs-meta);
  padding: 6px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  color: var(--nf-text-strong);
  flex: 1;
  min-width: 260px;
}

.fiscal-cert-result {
  margin-top: 12px;
  font-size: var(--fs-meta);
}

/* ── Censal-cliente historial ───────────────────────────────── */
.fiscal-historial-title {
  font-size: var(--fs-body);
  color: var(--nf-text-main);
  margin-bottom: 10px;
}

.fiscal-historial-row-current {
  background: #f0f9f4;
}

.fiscal-icon-error {
  color: var(--nf-coral-deep);
  font-size: var(--fs-label);
}

.fiscal-icon-ok {
  color: #27ae60;
  font-size: var(--fs-label);
}

/* ── Apoderamientos ─────────────────────────────────────────── */
.fiscal-stat-clickable {
  cursor: pointer;
}

.fiscal-stat-verde {
  color: var(--nf-brand-strong);
}

.fiscal-dropdown-narrow {
  max-width: 460px;
}

.fiscal-actions-gap {
  gap: var(--sp-3);
}

.fiscal-cell-truncate {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Declaraciones ──────────────────────────────────────────── */
.fiscal-form-flex-2 {
  flex: 2;
}

.fiscal-form-flex-end {
  display: flex;
  align-items: flex-end;
}

/* ── Certificados ───────────────────────────────────────────── */
.fiscal-tipos-grid {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.fiscal-tipo-card {
  flex: 1;
  min-width: 160px;
  cursor: pointer;
  padding: var(--sp-4);
  text-align: center;
}

.fiscal-tipo-code {
  font-size: var(--fs-section);
  margin-bottom: var(--sp-1);
}

.fiscal-tipo-label {
  color: var(--nf-text-strong);
}

.fiscal-solicitar-actions {
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ── Index dashboard ────────────────────────────────────────── */
.fiscal-stat-link {
  display: block;
  text-decoration: none;
}

.fiscal-stat-date {
  font-size: var(--fs-section);
}

.fiscal-hub-search-grow {
  flex: 1;
}

.fiscal-badge-sm {
  font-size: var(--fs-micro);
}

/* ================================================================
   ADMIN — Clases para eliminar inline styles
   ================================================================ */

/* ── Alert spacing ──────────────────────────────────────────── */
.admin-alert-mb {
  margin-bottom: 1rem;
}

/* ── Two-column layout ──────────────────────────────────────── */
.admin-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* ── Separator ──────────────────────────────────────────────── */
.admin-separator {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--borde);
}

/* ── Danger button ──────────────────────────────────────────── */
.admin-btn-danger {
  color: var(--nf-coral);
}

/* ── Sidebar column layout ──────────────────────────────────── */
.admin-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Module/perm description ────────────────────────────────── */
.admin-module-desc {
  margin-bottom: 1rem;
  font-size: var(--fs-meta);
}

/* ── Checkbox label row ─────────────────────────────────────── */
.admin-check-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  cursor: pointer;
}

/* ── Submit with top gap ────────────────────────────────────── */
.admin-submit-mt {
  margin-top: 1rem;
}

/* ── Ocultos section spacing ────────────────────────────────── */
.admin-ocultos-section {
  margin-top: 1.5rem;
}

.admin-ocultos-table {
  margin-bottom: 1.5rem;
}

.admin-ocultos-empty {
  margin-bottom: 1.5rem;
}

/* ── Client search dropdown ─────────────────────────────────── */
.admin-search-wrapper {
  max-width: 500px;
  position: relative;
}

.admin-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nf-bg-page);
  border: 1px solid var(--borde);
  border-radius: 6px;
  z-index: var(--z-dropdown);
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.admin-search-item {
  padding: .6rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--borde);
}
.admin-search-item:hover {
  background: var(--nf-surface-soft);
}

.admin-search-item-nif {
  color: var(--texto-muted);
  font-size: var(--fs-label);
}

.admin-mod-ocultar-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 700px;
}

/* ── Form card narrow ───────────────────────────────────────── */
.admin-form-card {
  max-width: 500px;
}

/* ── Form actions row ───────────────────────────────────────── */
.admin-form-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ── Card no-padding ────────────────────────────────────────── */
.admin-card-flush {
  padding: 0;
}

/* ── Censal table text size ─────────────────────────────────── */
.fiscal-table-sm {
  font-size: var(--fs-meta);
}

/* ── Btn font-size small ────────────────────────────────────── */
.fiscal-btn-sm-text {
  font-size: var(--fs-meta);
}

/* ── Btn margin-left ────────────────────────────────────────── */
.fiscal-btn-ml {
  margin-left: 12px;
}

/* ── Section label gap ──────────────────────────────────────── */
.fiscal-label-mb {
  margin-bottom: 8px;
}

/* ── Nowrap ──────────────────────────────────────────────────── */
.nowrap {
  white-space: nowrap;
}

/* ── Row cursor-pointer ─────────────────────────────────────── */
.row-clickable {
  cursor: pointer;
}

@media (max-width: 768px) {
  .admin-grid-2col { grid-template-columns: 1fr; }
  .fiscal-data-grid  { grid-template-columns: 1fr; }
}

/* ================================================================
   UTILIDADES — Gestión Interna (gi-*)
   ================================================================ */

/* Stats grid 4 columnas */
.gi-stats-4col { grid-template-columns: repeat(4, 1fr); }

/* Stats grid 3 columnas */
.gi-stats-3col { grid-template-columns: repeat(3, 1fr); }

/* Stat card con borde lateral ámbar — indicador de acción */
.gi-stat-accent { border-left: 3px solid var(--nf-amber); }

/* Card con padding interior — bloque de sección */
.gi-card-padded { padding: var(--sp-4); }

/* Grupo de botones con gap y wrap */
.gi-btn-group { gap: var(--sp-2); flex-wrap: wrap; }

/* Botón inline de edición en celda de tabla */
.gi-btn-edit-cell {
  padding: 2px 6px;
  font-size: var(--fs-label);
  margin-left: var(--sp-1);
}

/* Input de búsqueda/select dentro de celda de tabla */
.gi-input-cell {
  max-width: 220px;
  font-size: var(--fs-label);
}

/* Select filtro en formulario */
.gi-select-filter { max-width: 180px; }

/* ================================================================
   UTILIDADES — Documentos (doc-*)
   ================================================================ */

/* Métrica grande dentro de metric card */
.doc-metric-value { font-size: var(--fs-page); }

/* Variantes de color para métricas */
.doc-metric-value-ambar  { font-size: var(--fs-page); color: var(--nf-amber); }
.doc-metric-value-green  { font-size: var(--fs-page); color: #3B6D11; }

/* Input de búsqueda de documentos con max-width */
.doc-search-narrow { max-width: 300px; }

/* Anchos de columnas en tabla vincular */
.doc-col-ficheros  { width: 80px; }
.doc-col-cobertura { width: 100px; }
.doc-col-cliente   { width: 250px; }
.doc-col-tipo      { width: 110px; }
.doc-col-acciones  { width: 100px; }

/* Barra de acciones alineada a la derecha */
.doc-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--sp-3);
}

/* Separador filtros en search-bar */
.doc-filter-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ================================================================
   UTILIDADES — Comunicaciones (com-*)
   ================================================================ */

/* Panel principal con padding */
.com-panel { padding: var(--sp-5); }

/* Título del panel */
.com-title { font-size: var(--fs-section); }

/* Contenedor de mensajes con scroll */
.com-messages {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}

/* Compositor — sección de redacción */
.com-compositor {
  border-radius: var(--r-2);
  padding: var(--sp-3);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

/* Compositor con borde superior (cuando hay ticket) */
.com-compositor-border {
  border-top: 1px solid var(--nf-border-soft);
  padding-top: var(--sp-3);
}

/* Form group ancho flexible */
.com-field-narrow { flex: 1; }
.com-field-wide   { flex: 2; }

/* Inputs del compositor */
.com-input {
  font-size: var(--fs-meta);
  width: 100%;
}

/* Select del compositor */
.com-select { font-size: var(--fs-meta); }

/* Textarea del compositor */
.com-textarea {
  width: 100%;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
}

/* Badge de nota interna */
.com-badge-nota {
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #fef08a;
  border-radius: 4px;
  font-size: var(--fs-micro);
  margin-bottom: 6px;
}

/* Separador visual "--- o ---" */
.com-separator {
  text-align: center;
  margin: var(--sp-4) 0 var(--sp-3);
  color: var(--nf-text-faint);
  font-size: var(--fs-label);
}

/* Grupo de vinculación manual */
.com-vincular-group {
  gap: var(--sp-2);
  justify-content: center;
}

/* Input ticket manual */
.com-input-ticket {
  width: 160px;
  font-size: var(--fs-meta);
}

/* Burbujas de mensaje (generadas por JS) */
.com-msg {
  border-radius: var(--r-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
}
.com-msg-internal {
  background: #fef9c3;
  border: 1px dashed #fde047;
  margin-left: var(--sp-6);
}
.com-msg-agent {
  background: #eff6ff;
  border: 1px solid var(--nf-border-soft);
  margin-left: var(--sp-6);
}
.com-msg-client {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  margin-right: var(--sp-6);
}
.com-msg-body {
  white-space: pre-wrap;
  color: var(--nf-text-main);
}

/* ================================================================
   UTILIDADES — Ficha Header / navegación
   ================================================================ */

/* Botón de navegación deshabilitado */
.btn-nav-disabled {
  opacity: .3;
  pointer-events: none;
}

/* Botón inline con margin-left pequeño */
.btn-ml-sm { margin-left: 4px; }

/* ================================================================
   UTILIDADES — Generales (layout)
   ================================================================ */

/* Paginación con gap y margin-top */
.pagination-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   FIRMAS V2 — REDISEÑO LISTA
   ═══════════════════════════════════════════════════════════ */

/* Contadores */
.firmas-counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.firmas-counter-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  border-top: 3px solid var(--estado-color, var(--nf-border-soft));
  box-shadow: var(--nf-shadow-xs);
}

.firmas-counter-total { border-top-color: var(--nf-text-strong); }
.firmas-counter-bloq  { border-top-color: #ff5a5f; }

.firmas-counter-num {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
}

.firmas-counter-lbl {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin-top: var(--sp-1);
  text-transform: capitalize;
  font-weight: var(--fw-medium);
}

/* Filtros */
.firmas-filter-bar {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--nf-shadow-xs);
}

.firmas-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.firmas-filter-form > * {
  flex: 0 0 auto;
}

.firmas-filter-select {
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  background: var(--nf-bg-page);
  cursor: pointer;
  flex-shrink: 0;
  width: auto;
  max-width: 200px;
}

.firmas-filter-check {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
  margin-left: var(--sp-2);
}

/* Cards grid */
.firmas-cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.firmas-card-item {
  display: flex;
  align-items: stretch;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  box-shadow: var(--nf-shadow-xs);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.firmas-card-item:hover {
  box-shadow: var(--nf-shadow-md);
  transform: translateY(-1px);
}

.firmas-card-bloqueado {
  opacity: 0.8;
  background: var(--nf-coral-soft);
}

.firmas-card-estado-bar {
  width: 5px;
  background: var(--card-estado-color, var(--nf-border-mid));
  flex-shrink: 0;
  min-height: 60px;
}

.firmas-card-body {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.firmas-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.firmas-card-num {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  letter-spacing: 0.03em;
}

.firmas-card-badges {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.firmas-card-titular {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
}

.firmas-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.firmas-card-sep {
  color: var(--nf-text-faint);
  font-size: var(--fs-label);
}

.firmas-card-arrow {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  color: var(--nf-text-faint);
  font-size: var(--fs-section);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.firmas-card-item:hover .firmas-card-arrow {
  color: var(--nf-brand-500);
  transform: translateX(3px);
}

/* ── Modificadores semáforo — barra lateral coloreada ────────── */
.firmas-card-item--vencido  .firmas-card-estado-bar { background: #ff5a5f; }
.firmas-card-item--critico  .firmas-card-estado-bar { background: #ff5a5f; }
.firmas-card-item--proximo  .firmas-card-estado-bar { background: #f4b24d; }
.firmas-card-item--sin_fecha .firmas-card-estado-bar { background: var(--nf-border-mid); }

/* ── Lista de items de acción ────────────────────────────────── */
.firmas-accion-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

/* ── Copy operativo bajo el titular ──────────────────────────── */
.firmas-accion-copy {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-top: var(--sp-1);
}

.badge.info {
  background: var(--nf-info-bg);
  color: var(--nf-info-txt);
  border-color: var(--nf-info-borde);
}

/* ═══════════════════════════════════════════════════════════
   FIRMAS V2 — REDISEÑO DETALLE (dos columnas)
   ═══════════════════════════════════════════════════════════ */

.firmas-detalle-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.firmas-detalle-sidebar {
  position: sticky;
  top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.firmas-detalle-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* Stepper vertical */
.firmas-stepper-v {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  box-shadow: var(--nf-shadow-xs);
}

.firmas-stepper-v-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-3);
}

.firmas-step-v {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  position: relative;
}

.firmas-step-v:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  height: 24px;
  width: 2px;
  background: var(--nf-border-soft);
  z-index: var(--z-base);
}

.firmas-step-v-dot {
  position: relative;
  z-index: var(--z-raised);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  flex-shrink: 0;
  border: 2px solid var(--nf-border-soft);
  background: var(--nf-surface-soft);
  color: var(--nf-text-faint);
}

.firmas-step-v-dot.completado {
  background: var(--nf-brand-soft);
  border-color: var(--nf-brand);
  color: var(--nf-brand-strong);
}

.firmas-step-v-dot.actual {
  background: var(--nf-brand-500);
  border-color: var(--nf-brand-500);
  color: white;
}

.firmas-step-v-info {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.firmas-step-v-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-main);
}

.firmas-step-v-label.actual { color: var(--nf-text-strong); font-weight: var(--fw-bold); }
.firmas-step-v-label.completado { color: var(--nf-brand-700); }

.firmas-step-v-sub {
  font-size: var(--fs-label);
  color: var(--nf-text-faint);
}

/* Sidebar acciones */
.firmas-sidebar-acciones {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  box-shadow: var(--nf-shadow-xs);
}

.firmas-sidebar-acciones-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-3);
}

.firmas-acciones-btns {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.firmas-acciones-btns .btn {
  width: 100%;
  justify-content: center;
}

/* Datos tramitación en sidebar */
.firmas-sidebar-datos {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  box-shadow: var(--nf-shadow-xs);
}

/* Secciones de pasos en columna principal */
.firmas-paso {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--nf-shadow-xs);
}

.firmas-paso summary {
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  user-select: none;
  color: var(--nf-text-main);
  border-bottom: 1px solid transparent;
}

.firmas-paso summary::-webkit-details-marker { display: none; }

.firmas-paso[open] summary {
  border-bottom-color: var(--nf-border-soft);
  color: var(--nf-text-strong);
}

.firmas-paso summary::before {
  content: '›';
  font-size: var(--fs-section);
  color: var(--nf-text-faint);
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
  width: 16px;
}

.firmas-paso[open] summary::before {
  transform: rotate(90deg);
  color: var(--nf-text-strong);
}

.firmas-paso-body {
  padding: var(--sp-4);
}

/* Form section divider en formulario nuevo */
.firmas-seccion-tipo .form-section-divider {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--nf-amber);
  border-left: 3px solid var(--nf-amber);
  padding-left: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-3);
}

@media (max-width: 900px) {
  .firmas-detalle-layout {
    grid-template-columns: 1fr;
  }
  .firmas-detalle-sidebar {
    position: static;
  }
}

/* ── Comunicaciones colapsable ── */
.firmas-comm-wrapper {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--nf-shadow-xs);
  margin-bottom: var(--sp-4);
}

.firmas-comm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.firmas-comm-header:hover { background: var(--nf-bg-page); }

.firmas-comm-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.firmas-comm-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.firmas-comm-icon { font-size: var(--fs-section); }

.firmas-comm-ticket {
  font-family: var(--nf-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}

.firmas-comm-badge-activo {
  background: var(--nf-brand-soft);
  color: var(--nf-brand-strong);
  border: 1px solid var(--nf-brand);
  border-radius: var(--r-4);
  padding: 1px var(--sp-2);
  font-size: var(--fs-label);
}

.firmas-comm-pulse {
  width: 8px;
  height: 8px;
  background: var(--nf-brand-strong);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

.firmas-comm-chevron {
  font-size: var(--fs-section);
  color: var(--nf-text-faint);
  transition: transform var(--duration-fast) var(--ease-out);
  display: inline-block;
}

.firmas-comm-toggle-label {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.firmas-comm-body { border-top: 1px solid var(--nf-border-soft); }

/* ── Gestores chips ── */
.firmas-gestores-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.firmas-gestor-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--nf-bg-page);
  border-radius: var(--r-2);
  border: 1px solid var(--nf-border-soft);
}

.firmas-gestor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.firmas-gestor-dot.principal  { background: var(--nf-text-strong); }
.firmas-gestor-dot.secundario { background: #f4b24d; }

.firmas-gestor-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--nf-text-faint);
  cursor: pointer;
  font-size: var(--fs-section);
  padding: 0 var(--sp-1);
  line-height: var(--lh-1);
  transition: color var(--duration-fast) var(--ease-out);
}

.firmas-gestor-remove:hover { color: #ff5a5f; }

/* ── Stepper ready indicator ── */
.firmas-step-ready {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--nf-brand-strong);
  font-weight: var(--fw-bold);
}

.display-none { display: none; }

/* ── Bloqueo banner ── */
.firmas-bloqueo-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--nf-coral-soft);
  border: 2px solid var(--nf-coral);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.08);
}

.firmas-bloqueo-icon {
  font-size: var(--fs-page);
  line-height: var(--lh-1);
  flex-shrink: 0;
}

.firmas-bloqueo-content { flex: 1; }

.firmas-bloqueo-title {
  font-size: var(--fs-section);
  font-weight: 800;
  color: var(--nf-coral-deep);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--sp-1);
}

.firmas-bloqueo-motivo {
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  margin: var(--sp-1) 0;
}

.firmas-bloqueo-fecha { color: var(--nf-text-soft); }

.firmas-bloqueo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
  align-items: flex-end;
}

/* ══════════════════════════════════════════════════════════════════════════════
   UTILIDADES — prefijo .u-
   ══════════════════════════════════════════════════════════════════════════════ */

/* Layout */
.u-flex-1 { flex: 1; }
.u-w-full { width: 100%; }
.u-min-w-0 { min-width: 0; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-flex-wrap { flex-wrap: wrap; }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-ml-2 { margin-left: var(--sp-2); }
.u-p-3 { padding: var(--sp-3); }
.u-p-4 { padding: var(--sp-4); }
.u-text-center { text-align: center; }

/* Tipografía */
.u-text-xs { font-size: var(--fs-label); }
.u-text-sm { font-size: var(--fs-meta); }
.u-text-10 { font-size: var(--fs-micro); }
.u-text-13 { font-size: var(--fs-label); }
.u-bold { font-weight: var(--fw-semibold); }
.u-upper { text-transform: uppercase; letter-spacing: var(--ls-extra); }
.u-nowrap { white-space: nowrap; }
.u-prewrap { white-space: pre-wrap; }
.u-cursor-pointer { cursor: pointer; }

/* Anchos de columna tabla */
.u-col-28 { width: 28px; }
.u-col-32 { width: 32px; }
.u-col-75 { width: 75px; }
.u-col-80 { width: 80px; }
.u-col-180 { width: 180px; }
.u-col-200 { width: 200px; }

/* Colores de estado (para JS dinámico y badges) */
.u-color-ok { color: var(--nf-brand-strong); }
.u-color-warn { color: var(--nf-amber); }
.u-color-err { color: var(--nf-coral-deep); }
.u-bg-ok { background: var(--nf-brand-soft); }
.u-bg-err { background: var(--nf-coral-soft); }

/* Bloque pre formateado (JSON, etc.) */
.u-pre-block {
  white-space: pre-wrap;
  font-size: var(--fs-label);
  max-height: 300px;
  overflow: auto;
  background: var(--nf-surface-soft);
  padding: 8px;
  border-radius: 6px;
}

/* Separador de formulario con color destacado */
.form-section-accent {
  border-left: 3px solid var(--nf-amber);
  padding-left: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--nf-amber);
}

/* Select ancho firmas */
.firmas-select-full {
  width: 100%;
  font-size: var(--fs-meta);
}

/* Divider login (o / or) */
.login-divider { flex: 1; border: none; border-top: 1px solid var(--nf-border-mid); }
.login-divider-text { color: var(--nf-text-soft); font-size: var(--fs-meta); }

/* Tarjeta con borde lateral de color (procesos) */
.card-border-left { border-left: 4px solid var(--card-accent, var(--nf-brand-500)); }

/* Badge con borde lateral (tipo proceso) */
.badge-accent { border-left: 3px solid var(--badge-accent, var(--nf-brand-500)); padding-left: var(--sp-2); }

/* Categoría documentos — colores vía custom properties */

/* Badge avisos (inicio) */
.badge-avisos {
  background: var(--nf-amber-soft);
  color: var(--nf-amber);
  border: 1px solid var(--nf-amber);
}

/* Comunicaciones — burbuja mensaje */
.comm-bubble {
  border-radius: var(--r-2);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-meta);
}

/* Modal overlay inline */
.modal-card {
  max-width: 400px;
  width: 90%;
  margin: auto;
  margin-top: 20vh;
}

/* ── Additional utility / component classes ── */

/* Stats grid — 3-column variant. Breakpoint narrow: cae a 2 cols
   (en viewport <1200px con sidebar fijo var(--nf-sidebar-w) no caben 3 cards). */
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) {
  .stats-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stats-grid-3 { grid-template-columns: 1fr; }
}

/* data-table-wrap — wrapper para .data-table con scroll horizontal
   cuando la tabla excede el ancho del contenedor (tablas densas). */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* FISCAL censal status badges (override badge-fiscal-neutral) */
.badge-fiscal-alta { background: var(--nf-brand-soft); color: var(--nf-brand-strong); }
.badge-fiscal-baja { background: var(--nf-coral-soft); color: var(--nf-coral-deep); }

/* Proceso step badge */
.proceso-step-badge {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-1);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
}
.proceso-step-current { background: var(--nf-brand-500); color: #fff; }
.proceso-step-done { background: var(--nf-brand-soft); color: var(--nf-brand-strong); }
.proceso-step-pending { background: var(--nf-surface-soft); color: var(--nf-text-soft); }

/* Proceso bloqueado button */
.btn-bloqueo { color: var(--nf-coral-deep); border-color: var(--nf-coral); }

/* Proceso search dropdown item */
.proceso-dropdown-item {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid var(--nf-border-soft);
}

/* Firmas dashboard — alert dot with dynamic background */
.fd-alert-dot { background: var(--dot-bg, var(--nf-border-mid)); }

/* Comparativo table — check column with dynamic color */
.comp-check-col { text-align: center; }
td[style*="--check-color"] { color: var(--check-color); }

/* Dynamic row background via custom property */
tr[style*="--row-bg"] { background: var(--row-bg); }

/* Login — Google button */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #fff;
  color: #333;
  border: 1px solid var(--nf-border-mid);
}

/* Login — divider wrapper */
.login-divider-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
}

/* Error page padding */
.error-state { padding: var(--sp-10); }

/* Comunicaciones — color gris-700 for message text */
.comm-text { color: var(--nf-text-main); }

/* Ficha — dias restantes with dynamic color */
.dias-restantes { font-weight: var(--fw-semibold); color: var(--dias-color, inherit); }

/* Comunicaciones — note internal background */
.comm-bubble-internal { background: #fef9c3; border: 1px dashed #fde047; margin-left: var(--sp-6); }
.comm-bubble-agent { background: #eff6ff; border: 1px solid var(--nf-border-soft); margin-left: var(--sp-6); }
.comm-bubble-client { background: var(--nf-surface); border: 1px solid var(--nf-border-soft); margin-right: var(--sp-6); }

/* ═══════════════════════════════════════════════════════════════
   FIRMA ELECTRÓNICA V2 — Dashboard
   Clases fd-* para views/firmas-v2/dashboard.ejs
   ═══════════════════════════════════════════════════════════════ */

/* Layout principal */
.fd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.fd-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.fd-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fd-date {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

/* KPIs */
.fd-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.5rem;
}
.fd-kpi {
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-kpi-link {
  text-decoration: none;
  transition: background var(--duration-fast);
}
.fd-kpi-link:hover {
  background: var(--nf-surface-soft);
}
.fd-kpi-link.active-amber {
  background: var(--nf-amber-soft);
}
.fd-kpi-link.active-danger {
  background: var(--nf-coral-soft);
}
.fd-kpi-label {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}
.fd-kpi-value {
  font-size: var(--fs-page);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
}
.fd-kpi-value.amber {
  color: var(--nf-amber);
}
.fd-kpi-value.danger {
  color: var(--nf-coral-deep);
}

/* Grid de dos columnas */
.fd-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  align-items: start;
}

/* Panels */
.fd-panel {
  background: var(--nf-surface);
  border: 0.5px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.fd-panel:last-child {
  margin-bottom: 0;
}
.fd-panel-title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  margin-bottom: 1rem;
}
.fd-panel-title.secondary {
  color: var(--nf-text-soft);
}
.fd-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.fd-panel-title-row h2 {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  margin: 0;
}
.fd-panel-title-row a {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  text-decoration: none;
}
.fd-panel-title-row a:hover {
  color: var(--nf-text-strong);
}
.fd-sidebar-stack {
  display: flex;
  flex-direction: column;
}

/* Sección label dentro de panel */
.fd-section-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--nf-text-faint);
  margin: 0.75rem 0 0.5rem;
}
.fd-section-label:first-child {
  margin-top: 0;
}

/* Filas de tramitación */
.fd-tram-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--nf-border-soft);
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.fd-tram-row:last-child {
  border-bottom: none;
}
.fd-tram-row:hover {
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
  padding-left: 6px;
  padding-right: 6px;
}
.fd-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nf-surface-soft);
  border: 0.5px solid var(--nf-border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--nf-text-soft);
  flex-shrink: 0;
}
.fd-step-circle.done {
  background: var(--nf-brand-soft);
  border-color: var(--nf-brand);
  color: var(--nf-brand-strong);
}
.fd-step-circle.blocked {
  background: var(--nf-coral-soft);
  border-color: var(--nf-coral);
  color: var(--nf-coral-deep);
}
.fd-tram-info {
  flex: 1;
  min-width: 0;
}
.fd-tram-ref {
  font-size: var(--fs-micro);
  color: var(--nf-text-faint);
  margin-bottom: 1px;
}
.fd-tram-name {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-tram-meta {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-tram-badge {
  flex-shrink: 0;
}

/* Alertas vencimiento */
.fd-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fd-alert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--nf-border-soft);
}
.fd-alert-item:last-child {
  border-bottom: none;
}
.fd-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--dot-bg, var(--nf-border-mid));
}
.fd-alert-dot.red {
  background: var(--nf-coral);
}
.fd-alert-dot.amber {
  background: var(--nf-amber);
}
.fd-alert-info {
  flex: 1;
  min-width: 0;
}
.fd-alert-name {
  font-size: var(--fs-label);
  color: var(--nf-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-alert-date {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}

/* Mis pendientes */
.fd-pend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 0.5px solid var(--nf-border-soft);
  text-decoration: none;
  color: inherit;
}
.fd-pend-item:last-child {
  border-bottom: none;
}
.fd-pend-item:hover {
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
  padding-left: 6px;
  padding-right: 6px;
}

/* Búsqueda de certificado */
.fd-search-wrap {
  position: relative;
}
.fd-search-input {
  width: 100%;
}
.fd-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--nf-surface);
  border: 0.5px solid var(--nf-border-mid);
  border-radius: var(--r-2);
  z-index: var(--z-dropdown);
  max-height: 280px;
  overflow-y: auto;
}
.fd-search-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 0.5px solid var(--nf-border-soft);
}
.fd-search-item:last-child {
  border-bottom: none;
}
.fd-search-item:hover {
  background: var(--nf-surface-soft);
}
.fd-search-item-name {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
}
.fd-search-item-meta {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}
.fd-search-empty {
  padding: 10px 12px;
  font-size: var(--fs-label);
  color: var(--nf-text-faint);
}

/* Accesos rápidos */
.fd-quick-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fd-quick-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  text-decoration: none;
  border-radius: var(--r-2);
  transition: background .1s, color .1s;
}
.fd-quick-link:hover {
  background: var(--nf-surface-soft);
  color: var(--nf-text-strong);
}
.fd-quick-link-arrow {
  flex-shrink: 0;
  opacity: 0.5;
}

/* Estado vacío */
.fd-empty {
  font-size: var(--fs-label);
  color: var(--nf-text-faint);
  padding: 0.5rem 0;
}

/* Responsive */
@media (max-width: 900px) {
  .fd-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .fd-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   GESTIÓN INTERNA — gi-*
   ════════════════════════════════════════════════════════════════ */

/* ── Dashboard: layout de 3 zonas ──────────────────────────────── */
.gi-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gi-dashboard .page-header p {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin-top: 4px;
}

/* ── Zona 1: Resumen financiero ────────────────────────────────── */
.gi-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gi-resumen .stat-card {
  text-align: center;
  padding: 28px 24px;
}

.gi-resumen .stat-value {
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin-bottom: 6px;
}

.gi-resumen .stat-label {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  font-weight: var(--fw-regular);
}

.gi-stat-hero .stat-value {
  font-size: var(--fs-page);
  color: var(--nf-text-strong);
}

.gi-stat-alert .stat-value {
  color: var(--nf-amber);
}

/* ── Proyección de facturación recurrente (GI, lote 5) ────────────────────── */
.gi-proyeccion-head {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
/* La cifra manda: es el dato de la tarjeta, no un adorno de la cabecera. */
.gi-proyeccion-total { flex: 0 0 auto; min-width: 16rem; }
.gi-proyeccion-total .stat-value {
  font-size: var(--fs-hero-text);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
}
.gi-proyeccion-nota { flex: 1 1 20rem; margin: 0; font-size: var(--fs-meta); }
/* 12 filas siempre visibles: el desglose no se colapsa. */
.gi-proyeccion-tabla { width: 100%; }

/* ── Zona 2: Requiere atención ─────────────────────────────────── */
.gi-atencion {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  overflow: hidden;
}

.gi-atencion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--nf-border-soft);
  background: var(--nf-bg-page);
}

.gi-atencion-header h3 {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin: 0;
}

.gi-atencion-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gi-atencion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}

.gi-atencion-item:last-child { border-bottom: none; }
.gi-atencion-item:hover { background: #fafbfc; }

.gi-atencion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nf-amber);
  margin-right: 12px;
  flex-shrink: 0;
}

.gi-atencion-dot--ok { background: var(--nf-brand); }

.gi-atencion-text {
  flex: 1;
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  line-height: 1.4;
}

.gi-atencion-link {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  text-decoration: none;
  white-space: nowrap;
  margin-left: 20px;
}

.gi-atencion-link:hover { text-decoration: underline; }

.gi-atencion-ok {
  padding: 32px 24px;
  text-align: center;
  color: var(--nf-brand);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}

/* ── Zona 3: Cards de módulos ──────────────────────────────────── */
.gi-modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gi-modulo-card {
  display: flex;
  flex-direction: column;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-normal) ease;
  min-height: 120px;
}

.gi-modulo-card:hover {
  border-color: var(--nf-brand-500);
  box-shadow: 0 4px 12px rgba(10, 36, 99, 0.08);
  transform: translateY(-1px);
}

.gi-modulo-card h4 {
  font-family: var(--nf-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin: 0 0 12px;
}

.gi-modulo-card .stat-value {
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
  margin-bottom: 6px;
}

.gi-modulo-card p {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin: 0;
  line-height: 1.4;
  margin-top: auto;
}

.gi-modulo-card--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Sync Sage: utilitaria, poco protagonismo ──────────────────── */
.gi-sync-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fafbfc;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  font-size: var(--fs-micro);
  color: #9ca3af;
}

.gi-sync-bar > span {
  margin-right: auto;
  font-size: var(--fs-micro);
}

.gi-sync-btn {
  padding: 3px 8px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 4px;
  background: var(--nf-surface);
  font-size: var(--fs-micro);
  color: #9ca3af;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.gi-sync-btn:hover {
  border-color: var(--nf-brand-500);
  color: var(--nf-brand-500);
  background: #f0f4ff;
}

.gi-sync-btn.btn-sync-ok  { border-color: var(--nf-brand); color: var(--nf-brand-strong); }
.gi-sync-btn.btn-sync-err { border-color: var(--nf-coral);  color: var(--nf-coral-deep); }

/* ── Paginación (reutilizable) ─────────────────────────────────── */
.gi-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--nf-border-soft);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-top: 8px;
}

.gi-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gi-pagination-btn {
  padding: 6px 12px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  background: var(--nf-surface);
  font-size: var(--fs-label);
  color: #374151;
  cursor: pointer;
  transition: all var(--duration-fast);
}

.gi-pagination-btn:hover { background: var(--nf-bg-page); }
.gi-pagination-btn.active {
  background: var(--nf-brand-500);
  color: var(--nf-text-on-dark);
  border-color: var(--nf-brand-500);
  font-weight: var(--fw-medium);
}
.gi-pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Filtros (reutilizable en todas las vistas GI) ─────────────── */
.gi-filtros {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gi-filtros select,
.gi-filtros input[type="text"] {
  padding: 7px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  font-size: var(--fs-dense);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  outline: none;
  transition: border-color var(--duration-fast);
  width: auto;
  min-width: 120px;
  max-width: 220px;
}

.gi-filtros select:focus,
.gi-filtros input[type="text"]:focus {
  border-color: var(--nf-brand-500);
  outline: 2px solid var(--nf-brand-500);
  outline-offset: -1px;
}

.gi-filtros .btn { font-size: var(--fs-dense); }

/* Filtros en card compacta con separación visual */
.gi-filtros-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ── Tablas GI — ajustes de columnas ───────────────────────────── */
.data-table .col-importe {
  text-align: right;
  font-family: var(--nf-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table td.col-fecha {
  font-family: var(--nf-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--fs-label);
}

.data-table th.col-fecha {
  white-space: nowrap;
}

.data-table .mono {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table .col-email {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table .col-center { text-align: center; }

.data-table .col-narrow { width: 40px; text-align: center; }
.data-table .col-narrow input[type="checkbox"] { margin: 0; }

.data-table .badge {
  min-width: 50px;
  text-align: center;
  display: inline-block;
}

.data-table .btn-ver {
  font-size: var(--fs-micro);
  color: var(--nf-brand-500);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  transition: all var(--duration-fast);
  display: inline-block;
}

.data-table .btn-ver:hover {
  border-color: var(--nf-brand-500);
  background: #f0f4ff;
}

/* ── Lote de envío — resumen ───────────────────────────────────── */
.gi-lote-resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.gi-lote-resumen .stat-card {
  text-align: center;
  padding: 20px 16px;
}

.gi-lote-resumen .stat-value {
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: 4px;
}

.gi-lote-resumen .stat-label {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gi-lote-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.gi-lote-actions .btn {
  font-size: var(--fs-label);
  padding: 8px 16px;
}

/* ── Cruce — resumen ───────────────────────────────────────────── */
.gi-cruce-resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.gi-cruce-resumen .stat-card {
  text-align: center;
  padding: 20px 16px;
}

.gi-cruce-resumen .stat-value {
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.gi-cruce-resumen .stat-label {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}

@media (max-width: 1100px) {
  .gi-cruce-resumen { grid-template-columns: repeat(2, 1fr); }
}

/* ── Botón "← Dashboard" unificado ────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  background: var(--nf-surface);
  color: var(--nf-brand-500);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: all var(--duration-fast);
  white-space: nowrap;
}

.btn-back:hover {
  border-color: var(--nf-brand-500);
  background: #f0f4ff;
}

/* ── Órdenes — layout ──────────────────────────────────────────── */

.gi-orden-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.gi-precio-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
  padding: 1rem 0 0;
}

.gi-precio-actions {
  display: flex;
  gap: 0.5rem;
}


.empty-state--sm {
  padding: 1.5rem;
  text-align: center;
  color: var(--nf-text-soft);
}

.gi-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.gi-inline-form .form-control { width: auto; min-width: 140px; }
.gi-inline-form-actions { display: flex; gap: 0.25rem; }

.gi-checkbox-label {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.gi-nota-cargo-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.gi-nota-cargo-row p { margin: 0; }

.gi-section-title {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--nf-border-soft);
}

.gi-kpi-card--warning {
  border-left: 3px solid var(--nf-amber);
}

/* ── Badge como link (PDF clickable) ──────────────────────────── */
a.badge {
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--duration-fast);
}
a.badge:hover {
  opacity: 0.8;
}

/* ── Selector de rango para lotes ─────────────────────────────── */
.gi-rango {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--nf-border-soft);
}

.gi-rango-label {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  white-space: nowrap;
}

.gi-rango-input {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  font-size: var(--fs-label);
  font-family: var(--nf-mono);
  text-align: center;
}

.gi-rango-input:focus {
  border-color: var(--nf-cobalt);
  outline: none;
}

.gi-rango-sep {
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
}

/* ── Responsive GI ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gi-resumen { grid-template-columns: 1fr; }
  .gi-modulos { grid-template-columns: repeat(2, 1fr); }
  .gi-lote-resumen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gi-precio-form { grid-template-columns: 1fr; }
  .gi-modulos { grid-template-columns: 1fr; }
  .gi-lote-resumen { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   GESTOR DOCUMENTAL v2
   ══════════════════════════════════════════════════════════════ */

/* ── Utilidades compartidas ──────────────────────────────────── */
.doc-vista-toggle { display: flex; gap: var(--sp-2); align-items: center; }
.doc-filtro-cliente-input {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2); font-size: var(--fs-meta); width: 300px;
}
.doc-filtro-cliente-input:focus { border-color: var(--nf-brand-500); outline: none; }
.doc-drive-link { font-size: var(--fs-micro); color: var(--nf-brand-500); text-decoration: none; }
.doc-drive-link:hover { text-decoration: underline; }
.doc-progress-outer { height: 4px; background: var(--nf-surface-soft); border-radius: 2px; overflow: hidden; }
.doc-progress-inner { height: 100%; background: var(--nf-brand); border-radius: 2px; transition: width 0.5s ease; }
.text-success { color: var(--nf-brand-strong); }
.text-primary { color: var(--nf-text-strong); }
.text-warning { color: var(--nf-amber-deep); }

/* ── KPI bar (/documentos) ───────────────────────────────────── */
.doc-kpi-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.doc-kpi-card {
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5);
}
.doc-kpi-card .kpi-value {
  font-family: var(--nf-mono); font-size: var(--fs-page); font-weight: var(--fw-bold);
  color: var(--nf-text-strong); line-height: var(--lh-1); margin-bottom: var(--sp-1);
}
.doc-kpi-card .kpi-label {
  font-size: var(--fs-label); color: var(--nf-text-soft);
}
.doc-kpi-card.kpi-cobertura .kpi-value { color: var(--nf-brand-strong); }
.doc-kpi-card .doc-progress-outer { margin-top: var(--sp-3); height: 4px; }

/* ── Grid clientes (/documentos/clientes) ────────────────────── */
.doc-clientes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4);
}
.doc-cliente-card {
  padding: var(--sp-5); text-decoration: none; color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.doc-cliente-card:hover {
  border-color: var(--nf-brand-500); box-shadow: 0 4px 12px rgba(10,36,99,0.08); transform: translateY(-1px);
}
.doc-cliente-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--sp-2); }
.doc-cliente-card-nombre {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--nf-text-strong);
  margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-cliente-card-nif { font-family: var(--nf-mono); font-size: var(--fs-micro); color: var(--nf-text-soft); }
.doc-cliente-card-stats { font-size: var(--fs-label); color: var(--nf-text-main); margin-bottom: var(--sp-2); }
.doc-cliente-card-stats .mono { font-family: var(--nf-mono); }
.doc-cliente-card-stats .mono.fw-600 { font-weight: var(--fw-semibold); }

/* ── Vista detalle cliente (/documentos/cliente/:id) ─────────── */
.doc-cliente-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-6); align-items: start; }
.doc-cliente-sidebar { position: sticky; top: 80px; }
.doc-cliente-sidebar .card { padding: 0; overflow: hidden; }
.doc-cliente-main { min-width: 0; }

.doc-cat-item {
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  border-bottom: 1px solid var(--nf-border-soft); border-left: 3px solid transparent;
  transition: background var(--duration-fast) var(--ease-out);
}
.doc-cat-item:last-child { border-bottom: none; }
.doc-cat-item:hover { background: var(--nf-surface-soft); }
.doc-cat-item.cat-activa { background: var(--nf-bg-app); border-left-color: var(--nf-brand-500); }
.doc-cat-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-1); }
.doc-cat-item-name { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--nf-text-main); }
.doc-cat-item.cat-activa .doc-cat-item-name { color: var(--nf-brand-500); }
.doc-cat-item-count { font-family: var(--nf-mono); font-size: var(--fs-micro); color: var(--nf-text-soft); }
.doc-cat-item-progress { display: flex; align-items: center; gap: 6px; }
.doc-cat-item-progress .doc-progress-outer { flex: 1; height: 3px; }
.doc-cat-item-pct { font-size: var(--fs-micro); font-family: var(--nf-mono); color: var(--nf-text-soft); }

.doc-main-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.doc-main-cat-label { font-family: var(--nf-display); font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--nf-text-strong); }
.doc-main-cat-count { font-size: var(--fs-label); color: var(--nf-text-soft); margin-left: var(--sp-2); }
.doc-main-filter {
  padding: 6px 10px; border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1); font-size: var(--fs-label); width: 220px;
}
.doc-main-filter:focus { border-color: var(--nf-brand-500); outline: none; }

/* ── Badges estado RAG ───────────────────────────────────────── */
.badge-rag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-1);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge-rag-indexado { background: var(--nf-brand-soft); color: var(--nf-brand-strong); border: 1px solid var(--nf-brand); }
.badge-rag-pendiente { background: var(--nf-surface-soft); color: var(--nf-text-soft); }
.badge-rag-procesando { background: var(--nf-amber-soft); color: var(--nf-amber-deep); border: 1px solid var(--nf-amber); }
.badge-rag-error { background: var(--nf-coral-soft); color: var(--nf-coral-deep); border: 1px solid var(--nf-coral); }
.badge-rag-ocr { background: var(--nf-bg-app); color: var(--nf-brand-500); border: 1px solid var(--nf-border-soft); }

/* ── Vista persona (/documentos/persona/:id) ─────────────────── */
.persona-header {
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3); padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-4);
}
.persona-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--nf-bg-app); display: flex;
  align-items: center; justify-content: center;
  font-size: var(--fs-section); color: var(--nf-brand-500); flex-shrink: 0;
}
.persona-info { flex: 1; }
.persona-nombre {
  font-family: var(--nf-display); font-size: var(--fs-section);
  font-weight: var(--fw-semibold); color: var(--nf-text-strong); margin-bottom: var(--sp-1);
}
.persona-meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.persona-nif {
  font-family: var(--nf-mono); font-size: var(--fs-micro); color: var(--nf-text-soft);
  background: var(--nf-surface-soft); padding: 2px 6px; border-radius: var(--r-1);
  border: 1px solid var(--nf-border-soft);
}

/* ── Empty state documental ──────────────────────────────────── */
.doc-empty-state { text-align: center; padding: var(--sp-10) var(--sp-8); color: var(--nf-text-soft); }
.doc-empty-state .empty-icon { font-size: var(--fs-hero-num); margin-bottom: var(--sp-4); opacity: 0.4; }
.doc-empty-state .empty-titulo { font-size: var(--fs-section); font-weight: var(--fw-medium); color: var(--nf-text-main); margin-bottom: var(--sp-2); }
.doc-empty-state .empty-desc { font-size: var(--fs-meta); line-height: 1.6; }

/* ── Modal overlay ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: var(--z-modal-backdrop);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  width: 480px; max-width: 90vw; padding: var(--sp-6);
  box-shadow: var(--nf-shadow-lg);
}
.modal-box .page-title.text-base { font-size: var(--fs-section); }

/* ── Toggle vista cliente ────────────────────────────────────── */
.vista-toggle-cliente {
  display: flex; gap: 2px; background: var(--nf-surface-soft);
  border: 1px solid var(--nf-border-soft); border-radius: 6px; padding: 2px;
}
.btn-vista-mini {
  padding: 4px 8px; border: none; background: transparent;
  border-radius: 4px; cursor: pointer; font-size: var(--fs-meta);
  color: var(--nf-text-soft); transition: all var(--duration-fast) var(--ease-out);
}
.btn-vista-mini.activo {
  background: var(--nf-surface); color: var(--nf-brand-500);
}

/* ── Vista Drive — carpetas ──────────────────────────────────── */
.drive-carpeta {
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2); margin-bottom: var(--sp-2); overflow: hidden;
}
.drive-carpeta-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.drive-carpeta-header:hover { background: var(--nf-surface-soft); }
.drive-carpeta-path {
  flex: 1; font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--nf-text-strong);
  font-family: var(--nf-mono);
}
.drive-carpeta-stats { display: flex; align-items: center; gap: var(--sp-2); }
.drive-carpeta-total { font-size: var(--fs-micro); color: var(--nf-text-soft); }
.drive-carpeta-chevron {
  color: var(--nf-text-soft); font-size: var(--fs-micro); transition: transform var(--duration-normal) ease;
}
.drive-carpeta.expandida .drive-carpeta-chevron { transform: rotate(180deg); }
.drive-carpeta-body { border-top: 1px solid var(--nf-border-soft); }
.drive-doc-row {
  display: grid; grid-template-columns: 1fr auto auto auto auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5); font-size: var(--fs-label);
  transition: background var(--duration-fast) var(--ease-out);
}
.drive-doc-row:hover { background: var(--nf-surface-soft); }
.drive-doc-nombre {
  color: var(--nf-text-main); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.drive-doc-link { color: var(--nf-text-soft); text-decoration: none; font-size: var(--fs-micro); }
.drive-doc-link:hover { color: var(--nf-brand-500); }

/* ── Responsive gestor documental ────────────────────────────── */
@media (max-width: 900px) {
  .doc-clientes-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-cliente-layout { grid-template-columns: 1fr; }
  .doc-cliente-sidebar { position: static; }
  .doc-kpi-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .doc-clientes-grid { grid-template-columns: 1fr; }
  .doc-kpi-bar { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD INICIO — tarjetas de trabajo diario en /inicio
   ══════════════════════════════════════════════════════════════════════════════ */

/* Layout interno de las tarjetas del dashboard */
/* =========================================================
   DCO V2 — Control Operativo visual system
   Hero (críticas) · Datebox rows (vencidas / sin-cobertura) · Agenda (próximas)
   ========================================================= */

/* ── Shared ──────────────────────────────────────────────── */
.dco-pill {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
}
.dco-pill--criticas      { background: #fdecec; color: #9f1d1d; border: 1px solid #f3c9c9; }
.dco-pill--vencidas      { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.dco-pill--sin-cobertura { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.dco-pill--proximas      { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.dco-datebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
}
.dco-datebox__dia {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-1);
}
.dco-datebox__mes {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: var(--lh-1);
  margin-top: 2px;
}

/* ── Hero — críticas ─────────────────────────────────────── */
.dco-hero {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff6f6 0%, #feeaea 100%);
  border: 1px solid #f0d3d3;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(201,75,75,0.08);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.dco-hero:hover {
  box-shadow: 0 6px 24px rgba(201,75,75,0.14);
  transform: translateY(-1px);
}
.dco-hero:focus-visible {
  outline: 2px solid var(--nf-coral-deep);
  outline-offset: 2px;
}
.dco-hero__dateblock {
  border-radius: 14px;
  padding: 14px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid #f3c9c9;
  text-align: center;
}
.dco-hero__date-day {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: 800;
  color: #7f1d1d;
  line-height: var(--lh-1);
}
.dco-hero__date-month {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: #9f6b6b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.dco-hero__content { min-width: 0; }
.dco-hero__top { margin-bottom: 8px; }
.dco-hero__title {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: #7f1d1d;
  line-height: 1.25;
  margin-bottom: 6px;
}
.dco-hero__meta {
  font-size: var(--fs-label);
  color: #7a5a5a;
  margin-bottom: 4px;
}
.dco-hero__summary {
  font-size: var(--fs-label);
  color: #5c3a3a;
  line-height: 1.4;
}

/* ── Datebox rows — vencidas + sin-cobertura ─────────────── */
.dco-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--nf-border-soft);
  background: var(--nf-surface);
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.dco-row:hover {
  box-shadow: 0 6px 20px rgba(10,36,99,0.07);
  transform: translateY(-1px);
}
.dco-row:focus-visible {
  outline: 2px solid var(--nf-brand-500);
  outline-offset: 2px;
}
.dco-row__body { flex: 1; min-width: 0; }
.dco-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.dco-row__delta { font-size: var(--fs-micro); color: #7a746b; }
.dco-row__title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  line-height: 1.3;
  margin-bottom: 3px;
}
.dco-row__meta { font-size: var(--fs-label); color: #6e6a63; }

/* Vencidas variant */
.dco-row--vencidas { background: #fff8f8; border-color: #f5dfdf; }
.dco-datebox--vencidas {
  background: linear-gradient(135deg, #fef2f2, #fde8e8);
  border: 1px solid #fecaca;
}
.dco-datebox--vencidas .dco-datebox__dia { color: #b91c1c; }
.dco-datebox--vencidas .dco-datebox__mes { color: #dc2626; }

/* Sin cobertura variant */
.dco-row--sin-cobertura { background: #fffbf1; border-color: #f5ead5; }
.dco-datebox--sin-cobertura {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
}
.dco-datebox--sin-cobertura .dco-datebox__dia { color: #92400e; }
.dco-datebox--sin-cobertura .dco-datebox__mes { color: #b45309; }

/* ── Agenda — próximas ───────────────────────────────────── */
.dco-agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d6e4f5;
  background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.dco-agenda-item:hover {
  box-shadow: 0 6px 20px rgba(10,36,99,0.08);
  transform: translateY(-1px);
}
.dco-agenda-item:focus-visible {
  outline: 2px solid var(--nf-brand-500);
  outline-offset: 2px;
}
.dco-datebox--proximas {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border: 1px solid #93c5fd;
}
.dco-datebox--proximas .dco-datebox__dia { color: #1e40af; }
.dco-datebox--proximas .dco-datebox__mes { color: #2563eb; }
.dco-agenda-item__body { flex: 1; min-width: 0; }
.dco-agenda-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.dco-agenda-item__delta { font-size: var(--fs-micro); color: #4b7ab5; }
.dco-agenda-item__title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  line-height: 1.3;
  margin-bottom: 3px;
}
.dco-agenda-item__meta { font-size: var(--fs-label); color: #6e6a63; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .dco-hero { padding: 16px; grid-template-columns: 70px 1fr; gap: 12px; }
  .dco-hero__title { font-size: var(--fs-section); }
  .dco-hero__date-day { font-size: var(--fs-section); }
  .dco-datebox { width: 44px; min-width: 44px; height: 44px; }
  .dco-datebox__dia { font-size: var(--fs-section); }
}
/* ── Bandeja control — page-level list ──────────────────── */
.control-bandeja-count {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin-bottom: 20px;
}

/* ── Execution linkage — badge, link, create btn ─────────── */
.dco-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}
.exec-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 6px 8px;
}
.exec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--nf-brand-100);
  color: var(--nf-brand-700);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.exec-link {
  font-size: var(--fs-micro);
  color: var(--nf-brand-700);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.exec-link:hover { text-decoration: underline; }
.exec-create-btn {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  background: none;
  border: 1px dashed var(--nf-border-mid);
  border-radius: 6px;
  padding: 2px 10px;
  cursor: pointer;
  font-family: inherit;
}
.exec-create-btn:hover {
  color: var(--nf-brand-700);
  border-color: var(--nf-brand-500);
  background: var(--nf-brand-050);
}

/* ── Execution view — step list ─────────────────────────────────────── */
.exec-steps { display: flex; flex-direction: column; gap: 2px; }
.exec-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  font-size: var(--fs-label); color: var(--nf-text-soft);
}
.exec-step--completed {
  color: var(--nf-text-main);
}
.exec-step--active {
  background: var(--nf-brand-050);
  color: var(--nf-brand-700);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--nf-brand-100);
}
.exec-step__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--nf-border-mid);
}
.exec-step--completed .exec-step__dot { background: var(--nf-brand-500); }
.exec-step--active    .exec-step__dot { background: var(--nf-brand-500); box-shadow: 0 0 0 3px var(--nf-brand-100); }
.exec-view-section { margin-bottom: 20px; }
.exec-view-section h3 { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--nf-text-soft); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 8px; }

/* ── Execution view — full layout ───────────────────────────────────── */
.exec-view-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 20px;
}
.exec-view-header__title { font-size: var(--fs-section); font-weight: var(--fw-bold); color: var(--nf-text-strong); margin: 0 0 6px; }
.exec-view-header__meta  { font-size: var(--fs-label); color: var(--nf-text-soft); }
.exec-view-header__badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.exec-state-legacy {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--nf-surface-soft);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  font-family: var(--nf-mono);
  color: var(--nf-text-main);
  border: 1px solid var(--nf-border-soft);
}

.exec-block          { margin-bottom: 20px; }
.exec-block--gap     { border-left: 3px solid var(--nf-amber); padding-left: 12px; opacity: 0.85; }
.exec-gap-note       { font-size: var(--fs-label); color: var(--nf-text-soft); margin: 0; }

.exec-risk-high      { color: var(--nf-coral-deep);    font-weight: var(--fw-semibold); }
.exec-risk-medium    { color: var(--nf-amber-deep); font-weight: var(--fw-semibold); }
.exec-risk-low       { color: var(--nf-brand-strong);    font-weight: var(--fw-semibold); }

.exec-interventions  { font-size: var(--fs-micro); color: var(--nf-text-soft); padding: 6px 0; }
.exec-flag           { display: inline-block; font-size: var(--fs-micro); padding: 2px 7px; border-radius: 4px;
                       background: var(--nf-amber-soft); color: var(--nf-amber-deep); border: 1px solid var(--nf-amber); margin-left: 6px; }

.exec-communication-context { padding: 4px 0; }
.exec-pelota {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  font-size: var(--fs-label); font-weight: var(--fw-medium);
}
.exec-pelota--cliente {
  background: var(--nf-amber-soft); color: var(--nf-amber-deep);
  border: 1px solid var(--nf-amber);
}
.exec-pelota--despacho {
  background: var(--nf-brand-050); color: var(--nf-brand-700);
  border: 1px solid var(--nf-brand-100);
}
.exec-comm-summary {
  margin: 8px 0 0; font-size: var(--fs-label); color: var(--nf-text-soft);
  font-style: italic; padding-left: 4px;
}

/* ── Execution internal notes ─────────────────────────────────────── */
.exec-notes-list { display: grid; gap: 10px; margin-bottom: 16px; }
.exec-note {
  padding: 12px 14px; border-radius: 12px;
  background: var(--nf-surface-soft); border: 1px solid var(--nf-border-soft);
}
.exec-note--escalado { background: var(--nf-coral-soft); border-color: var(--nf-coral); }
.exec-note--aviso    { background: var(--nf-amber-soft); border-color: var(--nf-amber); }
.exec-note__header {
  display: flex; gap: 10px; align-items: center; margin-bottom: 6px;
  font-size: var(--fs-micro); color: var(--nf-text-soft);
}
.exec-note__tipo   { font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.exec-note__body   { font-size: var(--fs-meta); color: var(--nf-text-main); line-height: var(--lh-normal); margin: 0; }
.exec-note-form    { display: grid; gap: 8px; margin-top: 12px; }
.exec-note-form textarea {
  min-height: 80px; padding: 10px; border-radius: 10px;
  border: 1px solid var(--nf-border-soft); font-size: var(--fs-meta);
  resize: vertical; font-family: var(--nf-sans); background: var(--nf-surface);
}
.exec-note-form select {
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--nf-border-soft); font-size: var(--fs-meta);
  background: var(--nf-surface); color: var(--nf-text-main);
}

/* ── Execution alerts (avisos internos) ───────────────────────────── */
.exec-alerts { display: grid; gap: 8px; margin-bottom: 16px; }
.exec-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: #eef6ff; border: 1px solid #bfdbfe;
}
.exec-alert--escalado          { background: var(--nf-coral-soft); border-color: var(--nf-coral); }
.exec-alert--asignacion_pendiente { background: var(--nf-amber-soft); border-color: var(--nf-amber); }
.exec-alert__text    { flex: 1; font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--nf-text-main); }
.exec-alert__from    { font-size: var(--fs-micro); color: var(--nf-text-soft); white-space: nowrap; }
.exec-alert__dismiss {
  font-size: var(--fs-micro); color: var(--nf-text-soft);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background var(--duration-fast);
}
.exec-alert__dismiss:hover { background: var(--nf-border-soft); }

/* Ownership bar */
.exec-ownership-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px;
}
.exec-ownership-missing {
  display: flex; align-items: center; gap: 10px; flex: 1;
  padding: 10px 14px; border-radius: 10px;
  background: var(--nf-coral-soft); border: 1px solid var(--nf-coral);
  color: var(--nf-coral-deep); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
}
.exec-ownership-missing svg { flex-shrink: 0; }
.exec-ownership-missing span { font-weight: var(--fw-regular); color: var(--nf-text-main); margin-left: 4px; }
.exec-ownership-ok {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.exec-ownership-label {
  font-size: var(--fs-micro); color: var(--nf-text-soft); text-transform: uppercase;
  letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold);
}
.exec-ownership-nombre { font-size: var(--fs-meta); color: var(--nf-text-strong); }
.exec-actors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exec-actor {
  font-size: var(--fs-micro); padding: 3px 9px; border-radius: 999px;
  background: var(--nf-surface-soft); border: 1px solid var(--nf-border-soft);
  color: var(--nf-text-soft);
}
.exec-handoff-signal {
  font-size: var(--fs-micro); padding: 3px 10px; border-radius: 999px; font-weight: var(--fw-semibold);
}
.exec-handoff-signal--warn  { background: var(--nf-amber-soft); color: var(--nf-amber-deep); border: 1px solid var(--nf-amber); }
.exec-handoff-signal--alert { background: var(--nf-coral-soft);     color: var(--nf-coral-deep);     border: 1px solid var(--nf-coral); }

/* Ownership history */
.exec-ownership-history { padding: 12px 16px; }
.exec-ownership-history h4 { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--nf-text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.exec-history-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--nf-border-soft); font-size: var(--fs-label);
}
.exec-history-row:last-child { border-bottom: none; }
.exec-history-from   { color: var(--nf-text-soft); }
.exec-history-arrow  { color: var(--nf-text-faint); font-size: var(--fs-micro); }
.exec-history-to     { font-weight: var(--fw-semibold); color: var(--nf-text-strong); }
.exec-history-reason { font-size: var(--fs-micro); padding: 2px 8px; border-radius: 999px; background: var(--nf-surface-soft); border: 1px solid var(--nf-border-soft); color: var(--nf-text-soft); }
.exec-history-meta   { margin-left: auto; font-size: var(--fs-micro); color: var(--nf-text-faint); white-space: nowrap; }

/* Alerts page — listado completo */
.alerts-list { display: grid; gap: 10px; }
.alert-item {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 14px;
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
}
.alert-item--mencion              { border-left: 4px solid #5da8ff; }
.alert-item--escalado             { border-left: 4px solid var(--nf-coral); background: var(--nf-coral-soft); }
.alert-item--asignacion_pendiente { border-left: 4px solid var(--nf-amber); background: var(--nf-amber-soft); }
.alert-item__icon   { font-size: var(--fs-section); line-height: var(--lh-1); }
.alert-item__body   { min-width: 0; }
.alert-item__main   { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--nf-text-strong); margin-bottom: 4px; }
.alert-item__context { font-size: var(--fs-label); color: var(--nf-text-soft); margin-bottom: 4px; }
/* «informativo» (2026-09-20): distingue lo que hay que HACER de lo que es
   para saber. Sin esta marca, 33 avisos de un apoderamiento nuevo pesan en la
   campana igual que 33 urgencias, y el asesor no tiene forma de saberlo hasta
   abrirlos uno a uno. Discreta a propósito: informa, no compite con el asunto. */
.alert-item__informativa {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 1px var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nf-text-soft);
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
}
.alert-item__meta   { font-size: var(--fs-micro); color: var(--nf-text-faint); }
.alert-item__action button {
  font-size: var(--fs-micro); padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--nf-border-soft); background: var(--nf-surface);
  cursor: pointer; color: var(--nf-text-soft); transition: background var(--duration-fast);
}
.alert-item__action button:hover { background: var(--nf-surface-soft); }

/* Actors list (P2/P4 — con tipo_label + fecha_relativa) */
.exec-actors-list { display: flex; flex-direction: column; gap: 3px; }
.exec-actor-row   { font-size: var(--fs-micro); color: var(--nf-text-soft); }
.exec-actor-row strong { color: var(--nf-text-main); font-weight: var(--fw-semibold); }
.exec-actor-row .exec-actor-action { color: var(--nf-text-soft); }
.exec-actor-row .exec-actor-when   { color: var(--nf-text-faint); }

/* Assign form */
.exec-assign-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--nf-border-soft); margin-top: 10px;
  width: 100%;
}
.exec-assign-select {
  font-size: var(--fs-label); padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--nf-border-mid); background: var(--nf-surface);
  color: var(--nf-text-main); min-width: 160px;
}
.exec-assign-select:focus { outline: none; border-color: var(--nf-brand-500); }
.exec-btn {
  font-size: var(--fs-label); font-weight: var(--fw-semibold); padding: 6px 14px; border-radius: 8px;
  border: none; cursor: pointer; transition: background var(--duration-fast);
}
.exec-btn--primary   { background: var(--nf-brand-500); color: #fff; }
.exec-btn--primary:hover { background: var(--nf-brand-600); }
.exec-btn--secondary { background: var(--nf-surface-soft); color: var(--nf-text-main); border: 1px solid var(--nf-border-mid); }
.exec-btn--secondary:hover { background: var(--nf-border-soft); }

/* Alert context line */
.exec-alert__context { font-size: var(--fs-micro); color: var(--nf-text-faint); white-space: nowrap; }

/* Topbar — contador alerts internas */
.topbar-icon-btn--alerts { position: relative; }
.topbar-alert-count {
  /* inline-flex, no inline: en un <span> inline `min-width` y `text-align`
     NO aplican, así que la píldora se quedaba en 16 px con 28 px de
     contenido y recortaba el último dígito — «268» se leía «26». */
  display: inline-flex; align-items: center; justify-content: center;
  /* Y flex-shrink:0: como hijo de un contenedor flex, el navegador
     convierte inline-flex en flex y lo ENCOGE por debajo de su contenido.
     Sin esto seguía recortando aunque min-width ya aplicase. */
  flex-shrink: 0;
  background: var(--nf-coral-deep); color: #fff;
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: 999px;
  min-width: 16px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Fecha tile para vencimientos */
/* Chip tipo documento (PDF, XLS...) */
/* Avatar con iniciales para actividad */
/* Responsive — tablet hacia abajo colapsa las dos columnas */
@media (max-width: 960px) {
}

/* Responsive — ancho intermedio: compactar tarjetas */
@media (max-width: 720px) {
}

/* Responsive — móvil pequeño: apilar acciones debajo */
@media (max-width: 520px) {
}

/* Franja compacta "Todo bajo control" cuando no hay urgentes ni bloqueados */
/* Link "Ver todos" del modo baja densidad */
/* Dashboard — panel notas pendientes */
/* ══════════════════════════════════════════════════════════════════════════════
   IRPF — Selector de estado en ficha (/irpf/:id)
   ══════════════════════════════════════════════════════════════════════════════ */

.irpf-estado-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.irpf-estado-label {
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  font-weight: var(--fw-medium);
}

.irpf-estado-select {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  padding: 6px 10px;
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-1);
  background: var(--nf-surface);
  color: var(--nf-text-strong);
  min-width: 180px;
}
.irpf-estado-select:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px var(--nf-bg-app);
}

.irpf-estado-terminal {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  font-style: italic;
}

.irpf-estado-feedback {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  min-width: 120px;
}
.irpf-estado-feedback.ok  { color: var(--nf-brand-strong); font-weight: var(--fw-medium); }
.irpf-estado-feedback.err { color: var(--nf-coral-deep); font-weight: var(--fw-medium); }

/* IRPF — listado de documentos en la ficha */
.irpf-doc-folder {
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.irpf-doc-hint {
  font-size: var(--fs-label);
  margin-top: var(--sp-2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FASE 4 — Repositorio fiscal histórico (/irpf/:id + admin pendientes)
   ══════════════════════════════════════════════════════════════════════════════ */

.fiscal-archivo-hint {
  font-size: var(--fs-label);
  margin-bottom: var(--sp-3);
  color: var(--nf-text-soft);
}

.fiscal-archivo-path {
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge de tier de confianza */
.fiscal-archivo-tier {
  font-size: var(--fs-micro);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.fiscal-archivo-tier-segura {
  background: var(--nf-brand-soft);
  color: var(--nf-brand-strong);
  border-color: var(--nf-brand);
}
.fiscal-archivo-tier-probable {
  background: var(--nf-surface);
  color: var(--nf-text-main);
  border: 1px solid var(--nf-amber);
}
.fiscal-archivo-tier-pendiente {
  background: var(--nf-surface-soft);
  color: var(--nf-text-main);
  border-color: var(--nf-border-mid);
}
.fiscal-archivo-tier-descartada {
  background: var(--nf-surface-soft);
  color: var(--nf-text-soft);
  border-color: var(--nf-border-soft);
  text-decoration: line-through;
}

/* Grupo colapsable por ejercicio (archivo persona) */
.fiscal-archivo-grupo {
  margin-top: var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  overflow: hidden;
}
.fiscal-archivo-grupo > summary {
  padding: var(--sp-2) var(--sp-4);
  background: var(--nf-surface-soft);
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  list-style: none;
  user-select: none;
}
.fiscal-archivo-grupo > summary::-webkit-details-marker { display: none; }
.fiscal-archivo-grupo > summary::before {
  content: '▸';
  margin-right: var(--sp-2);
  color: var(--nf-text-soft);
  display: inline-block;
  transition: transform var(--duration-fast);
}
.fiscal-archivo-grupo[open] > summary::before {
  transform: rotate(90deg);
}
.fiscal-archivo-grupo-count {
  color: var(--nf-text-soft);
  font-weight: var(--fw-regular);
  margin-left: var(--sp-2);
}
.fiscal-archivo-tabla-grupo {
  margin: 0;
  border-radius: 0;
  border: none;
}
.fiscal-archivo-tabla-grupo thead th {
  background: var(--nf-surface);
  border-top: 1px solid var(--nf-border-soft);
}

/* Vista admin pendientes */
.fiscal-archivo-razon {
  font-size: var(--fs-micro);
  background: var(--nf-surface-soft);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: var(--nf-text-main);
}
.fiscal-archivo-pendientes .badge + .badge {
  margin-left: 4px;
}
.fiscal-archivo-paginacion {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.fiscal-archivo-paginacion a {
  padding: 4px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  font-size: var(--fs-label);
  color: var(--nf-text-main);
  text-decoration: none;
}
.fiscal-archivo-paginacion a.activa {
  background: var(--nf-brand-500);
  color: var(--nf-text-on-dark);
  border-color: var(--nf-brand-500);
}

/* Modal simple de resolución */
.fiscal-archivo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-modal-backdrop);
  align-items: center;
  justify-content: center;
}
.fiscal-archivo-modal-contenido {
  background: var(--nf-surface);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--nf-shadow-sm);
}
.fiscal-archivo-modal-contenido h3 {
  margin-top: 0;
  color: var(--nf-text-strong);
}

/* ── Fase 4.1 — Documento principal y bloques por rol documental ─────── */

.fiscal-archivo-principal {
  border: 2px solid var(--nf-brand-500);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--nf-surface);
  margin-bottom: var(--sp-4);
  box-shadow: var(--nf-shadow-sm);
}
.fiscal-archivo-principal-vacio {
  border-color: var(--nf-border-soft);
  background: var(--nf-surface-soft);
  box-shadow: none;
}
.fiscal-archivo-principal-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--nf-text-strong);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.fiscal-archivo-principal-vacio .fiscal-archivo-principal-label {
  color: var(--nf-text-soft);
}
.fiscal-archivo-principal-nombre {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
  margin-bottom: var(--sp-2);
  word-break: break-word;
}
.fiscal-archivo-principal-nombre a {
  color: var(--nf-brand-500);
  text-decoration: none;
}
.fiscal-archivo-principal-nombre a:hover {
  text-decoration: underline;
}
.fiscal-archivo-principal-meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-label);
}

/* Bloques por rol — reutilizan .fiscal-archivo-grupo y añaden distinción
   visual sutil por rol (sin colores fuertes para no competir con el badge
   de tier de confianza, que es ortogonal a la prioridad documental). */
.fiscal-archivo-rol-justificante > summary { border-left: 3px solid var(--nf-brand-500); }
.fiscal-archivo-rol-borrador     > summary { border-left: 3px solid var(--nf-amber); }
.fiscal-archivo-rol-requerimiento > summary { border-left: 3px solid var(--nf-coral); }
.fiscal-archivo-rol-contestacion > summary { border-left: 3px solid var(--nf-coral); }
.fiscal-archivo-rol-datos_fiscales > summary { border-left: 3px solid var(--nf-border-mid); }
.fiscal-archivo-rol-soporte > summary { border-left: 2px solid var(--nf-border-soft); }
.fiscal-archivo-rol-otro > summary { border-left: 2px solid var(--nf-border-soft); }
.fiscal-archivo-rol-declaracion_presentada > summary { border-left: 3px solid var(--nf-brand-500); }

/* Bloques soporte/otro: visualmente más secundarios — el contenido es
   ruido fiscal (facturas, recibos, basura digitalizada) y no debe
   competir con el documento principal ni con los bloques jerárquicos. */
.fiscal-archivo-rol-soporte,
.fiscal-archivo-rol-otro {
  margin-top: var(--sp-2);
  border-color: var(--nf-border-soft);
}
.fiscal-archivo-rol-soporte > summary,
.fiscal-archivo-rol-otro > summary {
  background: var(--nf-surface);
  padding: 6px var(--sp-3);
  font-size: var(--fs-label);
}
.fiscal-archivo-rol-soporte > summary .fiscal-archivo-grupo-titulo,
.fiscal-archivo-rol-otro > summary .fiscal-archivo-grupo-titulo {
  font-weight: var(--fw-regular);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-micro);
}
.fiscal-archivo-rol-soporte > summary .fiscal-archivo-grupo-count,
.fiscal-archivo-rol-otro > summary .fiscal-archivo-grupo-count {
  color: var(--nf-text-soft);
}

.fiscal-archivo-grupo-titulo {
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}

.fiscal-archivo-ver-todos-row td {
  background: var(--nf-surface-soft);
}
.fiscal-archivo-ver-todos {
  cursor: pointer;
  color: var(--nf-brand-500);
  font-size: var(--fs-label);
  padding: var(--sp-2);
  display: inline-block;
  user-select: none;
}
.fiscal-archivo-ver-todos:hover { text-decoration: underline; }

/* Corte temporal entre el expediente actual y el histórico del titular */
.fiscal-archivo-corte-temporal {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
}
.fiscal-archivo-corte-temporal::before,
.fiscal-archivo-corte-temporal::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nf-border-soft);
}
.fiscal-archivo-corte-temporal span {
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}

/* Tipos enumerados en el summary del histórico (D1) */
.fiscal-archivo-grupo-tipos {
  color: var(--nf-text-soft);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label);
  margin-left: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════════
   Capa transversal de comunicaciones — UI Despacho (Fase 5)
   Documentado en docs/modulos/COMUNICACIONES.md §7 y §10.

   Prefijos:
     .caso-*              → bloque de comunicación de la ficha del caso
     .dashboard-bandeja-* → bandejas del Inicio
   ════════════════════════════════════════════════════════════════════ */

/* ── Bloque del caso (ficha) ───────────────────────────────────────── */

.caso-bloque {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}

.caso-bloque-error {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--nf-coral-soft);
  border: 1px solid var(--nf-coral);
  border-radius: var(--r-2);
  color: var(--nf-coral-deep);
  font-size: var(--fs-label);
}

/* ── Cabecera del caso ─────────────────────────────────────────────── */

.caso-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--nf-border-soft);
}

.caso-cabecera-info {
  flex: 1;
  min-width: 0;
}

.caso-cabecera-asunto {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.3;
  word-break: break-word;
}

.caso-cabecera-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.caso-cabecera-agente {
  color: var(--nf-text-main);
}

.caso-cabecera-acciones {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Chips de pendiente_de ─────────────────────────────────────────── */

.caso-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-radius: 999px;
  border: 1px solid transparent;
}

.caso-chip-pendiente-cliente {
  background: var(--nf-amber-soft);
  color: var(--nf-amber-deep);
  border-color: var(--nf-amber);
}

.caso-chip-pendiente-despacho {
  background: var(--nf-bg-app);
  color: var(--nf-text-strong);
  border-color: var(--nf-brand-500);
}

.caso-chip-sin-asignar {
  background: var(--nf-surface-soft);
  color: var(--nf-text-main);
  border-color: var(--nf-border-mid);
}

/* ── Botones genéricos del bloque ──────────────────────────────────── */

.caso-btn {
  font-family: inherit;
  font-size: var(--fs-label);
  padding: 6px 14px;
  border-radius: var(--r-2);
  cursor: pointer;
  border: 1px solid var(--nf-border-mid);
  background: var(--nf-surface);
  color: var(--nf-text-strong);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.caso-btn:hover { background: var(--nf-surface-soft); }
.caso-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.caso-btn-primary {
  background: var(--nf-brand-500);
  color: var(--nf-text-on-dark);
  border-color: var(--nf-brand-500);
}
.caso-btn-primary:hover {
  background: var(--nf-brand-100);
  border-color: var(--nf-border-mid);
}

.caso-btn-ghost {
  background: transparent;
  color: var(--nf-text-main);
  border-color: var(--nf-border-soft);
}

/* ── Feed cronológico ──────────────────────────────────────────────── */

.caso-feed {
  margin: var(--sp-4) 0;
}

.caso-feed-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Sub-frente 2.2 (2026-05-28): layout chat — mensajes cliente
     alineados a la izquierda, mensajes despacho a la derecha. Mata
     la ambigüedad visual entre los dos roles (la doctrina pide
     diferenciación "a primer golpe"). Las notas internas del feed
     Zendesk, cuando existen, quedan full-width con su ámbar — no se
     alinean al chat. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.caso-feed-mensaje-cliente,
.caso-feed-mensaje-despacho {
  max-width: 80%;
}
.caso-feed-mensaje-cliente {
  align-self: flex-start;
}
.caso-feed-mensaje-despacho {
  align-self: flex-end;
}
/* Nota interna full-width — sigue su patrón ámbar de cabecera */
.caso-feed-nota-interna {
  align-self: stretch;
}

.caso-feed-vacio {
  padding: var(--sp-4);
  text-align: center;
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
}

.caso-feed-item {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  background: var(--nf-surface);
}

.caso-feed-item-cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-2);
}

.caso-feed-autor { font-weight: var(--fw-semibold); color: var(--nf-text-main); }
.caso-feed-fecha { color: var(--nf-text-soft); }

.caso-feed-cuerpo {
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Mensajes públicos del despacho — borde izquierdo azul */
.caso-feed-mensaje-despacho {
  border-left: 3px solid var(--nf-brand-500);
}

/* Mensajes del cliente — borde gris suave */
.caso-feed-mensaje-cliente {
  border-left: 3px solid var(--nf-border-soft);
}

/* Notas internas — fondo amarillo claro + etiqueta lateral */
.caso-feed-nota-interna {
  background: var(--nf-amber-soft);
  border-color: var(--nf-amber);
  border-left: 3px solid var(--nf-amber);
}
.caso-feed-etiqueta {
  display: inline-block;
  padding: 2px 8px;
  background: var(--nf-amber);
  color: var(--nf-text-on-dark);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
}

/* ── Caja única de comunicación (composer) ────────────────────────── */

.caso-composer {
  margin-top: var(--sp-4);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  background: var(--nf-surface);
  padding: var(--sp-4);
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.caso-composer[data-destino="equipo"] {
  background: var(--nf-amber-soft);
  border-color: var(--nf-amber);
}

.caso-composer-destino {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-label);
  color: var(--nf-text-main);
}

.caso-composer-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.caso-composer-radio input { accent-color: var(--nf-brand-500); }

.caso-composer-textarea {
  display: block;
  width: 100%;
  padding: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-2);
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}

.caso-composer-textarea:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px rgba(10, 36, 99, 0.15);
}

.caso-composer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-3);
  gap: var(--sp-3);
}

.caso-composer-feedback {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
.caso-composer-feedback[data-tipo="ok"]  { color: var(--nf-brand-strong); }
.caso-composer-feedback[data-tipo="err"] { color: var(--nf-coral-deep); }

/* Contexto bajo el selector de destino (Fase 6.B) */
.caso-composer-contexto {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  font-style: italic;
}
.caso-composer[data-destino="equipo"] .caso-composer-contexto {
  color: var(--nf-amber-deep);
  font-style: normal;
  font-weight: var(--fw-semibold);
}

/* Zona de adjuntos del composer (Sprint 7) */
.caso-composer-adjuntos {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--nf-bg-app);
  border: 1px dashed var(--nf-border-soft);
  border-radius: 6px;
}
.caso-composer-adjuntos-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.caso-composer-adjuntos-chips:empty { margin-bottom: 0; }
.caso-composer-adj-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-label);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 12px;
}
.caso-composer-adj-chip button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: var(--fs-label);
  color: var(--nf-text-faint);
  line-height: var(--lh-1);
}
.caso-composer-adj-chip button:hover { color: var(--nf-coral-deep); }
.caso-composer-adjuntos-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.caso-composer-adjuntos-id {
  width: 110px;
  padding: 4px 8px;
  font-size: var(--fs-meta);
  border: 1px solid var(--nf-border-soft);
  border-radius: 4px;
}

/* Chip del ticket Zendesk en la cabecera del caso (Fase 6.B) */
/* Vínculo colgado: el caso apunta a un ticket que Zendesk ya no tiene. Es el
   mismo chip que el enlace, en ámbar y sin ser pulsable — no hay adónde ir.
   Ámbar y no coral: no está roto el certificado ni el caso, está roto el
   vínculo, y se arregla revinculando. Sólo tokens Layer 1/3. */
.caso-ticket-roto {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--nf-warn-txt);
  background: var(--nf-warn-bg);
  border: 1px solid var(--nf-warn-borde);
  border-radius: 999px;
}
.caso-ticket-roto[hidden] { display: none; }

.caso-ticket-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--nf-mono);
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.caso-ticket-link:hover {
  background: var(--nf-brand-500);
  color: var(--nf-text-on-dark);
  border-color: var(--nf-brand-500);
}
.caso-ticket-link-icon {
  font-size: var(--fs-micro);
  opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════
   Bloque "Preparar comunicación" — estado sin ticket (Fase 6.B replanteada)
   Se muestra dentro de .caso-bloque cuando caso.ticket_principal es null.
   ════════════════════════════════════════════════════════════════════ */

.caso-preparar-bloque {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}

.caso-preparar-titulo {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
  margin: 0 0 var(--sp-4) 0;
  font-weight: var(--fw-semibold);
}

.caso-preparar-resumen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  text-align: left;
  max-width: 520px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-4);
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
}

.caso-preparar-resumen dt {
  color: var(--nf-text-soft);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
  padding-top: 2px;
}

.caso-preparar-resumen dd {
  color: var(--nf-text-strong);
  font-size: var(--fs-meta);
  margin: 0;
  word-break: break-word;
}

/* Sub-frente 2.2.bis B.1 (2026-05-28): input del asunto editable.
 * Reemplaza al `<dd>` de solo lectura previo. Estilo discreto que se
 * integra como un valor de la lista — borde fino, sin chrome de form. */
.caso-preparar-asunto-input {
  width: 100%;
  padding: 6px var(--sp-2);
  font-family: inherit;
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  box-sizing: border-box;
}
.caso-preparar-asunto-input:focus {
  outline: none;
  border-color: var(--nf-brand);
  box-shadow: 0 0 0 2px var(--nf-brand-soft);
}

.caso-preparar-warning {
  padding: var(--sp-3);
  background: var(--nf-amber-soft);
  color: var(--nf-amber-deep);
  border: 1px solid var(--nf-amber);
  border-radius: var(--r-2);
  margin: 0 auto var(--sp-3);
  max-width: 520px;
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
}

/* Form inline de email (se muestra cuando la persona no tiene email) */
.caso-preparar-email-form {
  max-width: 520px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-3);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  text-align: left;
}
.caso-preparar-email-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-main);
}
.caso-preparar-email-label input {
  padding: 8px var(--sp-3);
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-1);
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  background: var(--nf-surface);
}
.caso-preparar-email-label input:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px rgba(10, 36, 99, 0.15);
}
.caso-preparar-email-hint {
  margin: var(--sp-2) 0 0 0;
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  line-height: 1.4;
}

.caso-preparar-acciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 520px;
  margin: 0 auto;
}

.caso-preparar-acciones .caso-btn-primary {
  padding: 10px 24px;
  font-size: var(--fs-meta);
}

.caso-preparar-vincular {
  width: 100%;
  margin-top: var(--sp-2);
  text-align: left;
}

.caso-preparar-vincular > summary {
  cursor: pointer;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  text-align: center;
  list-style: none;
  user-select: none;
  padding: var(--sp-2);
}
.caso-preparar-vincular > summary::-webkit-details-marker { display: none; }
.caso-preparar-vincular > summary:hover { color: var(--nf-brand-500); }

.caso-preparar-vincular-form {
  padding: var(--sp-3);
  background: var(--nf-surface-soft);
  border-radius: var(--r-2);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.caso-preparar-vincular-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-label);
  color: var(--nf-text-main);
  font-weight: var(--fw-semibold);
}

.caso-preparar-vincular-label input {
  padding: 8px var(--sp-3);
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-1);
  font-family: var(--nf-mono);
  font-size: var(--fs-meta);
  background: var(--nf-surface);
}
.caso-preparar-vincular-label input:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px rgba(10, 36, 99, 0.15);
}

.caso-preparar-vincular-hint {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  margin: 0;
  font-style: italic;
}
.caso-preparar-vincular-hint code {
  font-family: var(--nf-mono);
  font-style: normal;
  background: var(--nf-surface);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: var(--fs-micro);
}

.caso-preparar-vincular-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.caso-preparar-vincular-preview {
  padding: var(--sp-3);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--nf-text-main);
}
.caso-preparar-vincular-preview strong {
  color: var(--nf-text-strong);
  font-family: var(--nf-mono);
}
.caso-preparar-vincular-conversion {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--nf-bg-app);
  color: var(--nf-text-soft);
  border-radius: var(--r-1);
  font-size: var(--fs-micro);
}

/* Bloque de emails del preview de vinculación (Fase 6.B.ii — reglas de email)
   Muestra siempre los 2 emails + mensaje informativo según el estado. */
.caso-preparar-vincular-emails {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--nf-surface-soft);
  border-radius: var(--r-1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-micro);
  color: var(--nf-text-main);
}
.caso-preparar-vincular-emails strong {
  color: var(--nf-text-strong);
  font-family: var(--nf-mono);
}
.caso-preparar-vincular-email-msg {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-1);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
}
.caso-preparar-vincular-email-match {
  background: var(--nf-brand-soft);
  color: var(--nf-brand-strong);
  border: 1px solid var(--nf-brand);
}
.caso-preparar-vincular-email-mismatch {
  background: var(--nf-amber-soft);
  color: var(--nf-amber-deep);
  border: 1px solid var(--nf-amber);
}
.caso-preparar-vincular-email-sin-email {
  background: var(--nf-bg-app);
  color: var(--nf-text-soft);
  border: 1px solid var(--nf-border-soft);
}
.caso-preparar-vincular-emails button[data-action="guardar-email-en-ficha"] {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

.caso-preparar-error {
  padding: var(--sp-3);
  background: var(--nf-coral-soft);
  color: var(--nf-coral-deep);
  border: 1px solid var(--nf-coral);
  border-radius: var(--r-2);
  margin: var(--sp-3) auto 0;
  max-width: 520px;
  font-size: var(--fs-label);
  text-align: left;
  line-height: var(--lh-normal);
}

/* Bloque legacy de comunicaciones en ficha IRPF — colapsado por defecto (Fase 6.B) */
.irpf-legacy-comunicaciones {
  margin-top: var(--sp-4);
  background: var(--nf-surface-soft);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-2) var(--sp-3);
}
.irpf-legacy-comunicaciones > summary {
  cursor: pointer;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
  user-select: none;
  list-style: none;
}
.irpf-legacy-comunicaciones > summary::-webkit-details-marker { display: none; }
.irpf-legacy-comunicaciones > summary::before {
  content: '▸ ';
  color: var(--nf-text-soft);
  display: inline-block;
  transition: transform var(--duration-fast);
}
.irpf-legacy-comunicaciones[open] > summary::before {
  content: '▾ ';
}
.irpf-legacy-comunicaciones[open] > summary {
  margin-bottom: var(--sp-3);
}

/* ════════════════════════════════════════════════════════════════════
   Bandejas del dashboard — UI Despacho (Fase 5)
   ════════════════════════════════════════════════════════════════════ */

/* Grid de las 3 bandejas en /inicio. Auto-fit con minmax permite que
   las cards se reorganicen sin huecos cuando "Sin asignar" se oculta
   por permiso (root.hidden=true en casos-client.js). */
@media (max-width: 720px) {
}

.dashboard-bandeja {
  /* Sin estilo propio: la presentación la pone .card del canon. Esta clase
     sobrevive SOLO como gancho de casos-client.js:1091, que engancha por
     selector de clase. Se retira cuando el cambio a [data-bandeja] esté
     verificado en staging. */
}

/* =============================================================
   WORKSPACE DUAL — Clientes v2 Fase 1
   Prefijo: ws-
   ============================================================= */

/* ── Shell ─────────────────────────────────────────────────── */
.ws-body {
  margin-top: var(--sp-2);
}

/* ── Header ────────────────────────────────────────────────── */
.ws-header {
  margin-bottom: var(--sp-5);
}
.ws-header-top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
}
.ws-header-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: var(--r-3);
  background: var(--nf-brand-500);
  color: #fff;
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-header-info {
  flex: 1;
  min-width: 0;
}
.ws-header-nombre {
  font-family: var(--nf-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2);
}
.ws-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.ws-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.ws-header-actions-nav {
  display: flex;
  gap: var(--sp-2);
}
.ws-header-actions-main {
  display: flex;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--nf-border-soft);
  margin-left: var(--sp-1);
}
.ws-header-actions-grouped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.ws-header-actions-sep {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  background: var(--nf-border-soft);
  margin: 0 var(--sp-1);
  vertical-align: middle;
}

/* ── Mode switch ───────────────────────────────────────────── */
.ws-mode-switch {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--nf-border-soft);
  margin-bottom: var(--sp-5);
}
.ws-mode-tab {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
}
.ws-mode-tab:hover {
  color: var(--nf-brand-500);
  text-decoration: none;
}
.ws-mode-tab.active {
  color: var(--nf-brand-500);
  border-bottom-color: var(--nf-brand-500);
  font-weight: var(--fw-bold);
}

/* ── Trabajo — layout ──────────────────────────────────────── */
.ws-trabajo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 860px;
}

/* Notas urgentes en modo trabajo */
.ws-trabajo-urgentes {
  padding: var(--sp-3) var(--sp-4);
  background: var(--nf-error-bg);
  border: 1px solid var(--nf-error-borde);
  border-radius: var(--r-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ws-trabajo-urgentes-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--nf-error-txt);
}
.ws-trabajo-urgente-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
}
.ws-trabajo-urgente-txt {
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  flex: 1;
}

/* Summary strip — compacto, secundario */
.ws-summary-strip {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--nf-bg-app);
  border-radius: var(--r-2);
}
.ws-summary-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.ws-summary-value {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
}
.ws-summary-value.warn { color: var(--nf-warn-txt); }
.ws-summary-value.critico { color: var(--nf-error-txt); }
.ws-summary-label {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

/* Ownership bar */
.ws-ownership-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ws-ownership-badge {
  font-size: var(--fs-label);
}

/* Primary action banner */
.ws-primary-action {
  margin-bottom: 0;
}
.ws-primary-action-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* Action list — usa .card existente */
.ws-action-list .card-header {
  margin-bottom: var(--sp-3);
}

/* Action item */
.ws-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}
.ws-action-item:last-child {
  border-bottom: none;
}
.ws-action-item-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}
.ws-action-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ws-action-item-title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.ws-action-item-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.ws-action-badge {
  text-transform: capitalize;
  min-width: auto;
  font-size: var(--fs-micro);
}

/* Action item — badges temporales */
.ws-action-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: 2px;
}
.ws-temporal-badge {
  font-size: var(--fs-micro);
  padding: 1px 6px;
  min-width: auto;
}
.ws-temporal-placeholder {
  opacity: 0.5;
  border-style: dashed;
}

/* Empty state mejorado */
.ws-empty-card {
  border-left: 3px solid var(--nf-brand-500);
}
.ws-empty-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.ws-empty-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--nf-ok-bg);
  color: var(--nf-brand-500);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-empty-header h3 {
  font-size: var(--fs-section);
  margin-bottom: var(--sp-1);
}
.ws-empty-context {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--nf-border-soft);
}
.ws-empty-hecho {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
}

/* Collaboration bar (per action-item) */
.ws-action-collab {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0 var(--sp-2) 44px;
}
.ws-collab-owner {
  color: var(--nf-text-soft);
}
.ws-collab-followers {
  color: var(--nf-text-soft);
}
.ws-collab-badge {
  font-size: var(--fs-micro);
  padding: 1px 6px;
  min-width: auto;
}
.ws-collab-btn {
  font-size: var(--fs-label);
  color: var(--nf-brand-500);
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
}
.ws-collab-btn:hover {
  background: var(--nf-bg-app);
}
.ws-collab-btn.following {
  background: var(--nf-bg-app);
  color: var(--nf-brand-500);
  border-color: var(--nf-brand-500);
}

/* Quick actions */
.ws-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--nf-border-soft);
}

/* ── Cliente — layout ──────────────────────────────────────── */
.ws-cliente {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.ws-cliente-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-6);
  align-items: start;
}
.ws-cliente-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Vitals bar */
.ws-vitals-bar {
  display: flex;
  gap: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ws-vitals-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-5);
  border-right: 1px solid var(--nf-border-soft);
}
.ws-vitals-item:last-child {
  border-right: none;
}
.ws-vitals-num {
  font-family: var(--nf-mono);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  line-height: var(--lh-1);
}
.ws-vitals-num.warn    { color: var(--nf-warn-txt); }
.ws-vitals-num.critico { color: var(--nf-error-txt); }
.ws-vitals-lbl {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-semibold);
}

/* Column differentiation */
.ws-col-primary .card-header {
  border-bottom: 1px solid var(--nf-border-soft);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
}
.ws-col-secondary .card {
  padding: var(--sp-5);
}
.ws-col-secondary .card-title {
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
}
.ws-col-secondary .card-header {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.ws-col-secondary .ws-kv-table td {
  padding: var(--sp-1) 0;
  font-size: var(--fs-meta);
}
.ws-col-secondary .ws-kv-table td:first-child {
  width: 120px;
  color: var(--nf-text-soft);
  font-weight: var(--fw-medium);
}

/* Operational strip */
.ws-op-strip {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
}
.ws-op-strip-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Key-value table */
.ws-kv-table {
  width: 100%;
  border-collapse: collapse;
}
.ws-kv-table td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--nf-border-soft);
  font-size: var(--fs-meta);
  vertical-align: top;
}
.ws-kv-table td:first-child {
  width: 140px;
  padding-right: var(--sp-3);
}
.ws-kv-table tr:last-child td {
  border-bottom: none;
}

/* Personas grid */
.ws-personas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ws-personas-item {
  padding: var(--sp-2) var(--sp-3);
  background: var(--nf-bg-app);
  border-radius: var(--r-2);
}

/* Docs summary */
.ws-docs-summary {
  margin-bottom: var(--sp-2);
}
.ws-docs-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Actividad list */
.ws-actividad-list {
  display: flex;
  flex-direction: column;
}
.ws-actividad-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}
.ws-actividad-item:last-child {
  border-bottom: none;
}

/* Estado row */
.ws-estado-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ws-header-top {
    flex-direction: column;
    align-items: stretch;
  }
  .ws-header-avatar {
    width: 48px;
    height: 48px;
    font-size: var(--fs-section);
  }
  .ws-summary-strip {
    flex-direction: column;
    gap: var(--sp-2);
  }
  .ws-cliente-grid {
    grid-template-columns: 1fr;
  }
  .ws-primary-action-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .ws-action-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .ws-action-item-right {
    width: 100%;
    justify-content: flex-end;
  }
  .ws-op-strip {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .ws-estado-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── fi-card-procesos — CTA Trabajo activo en modo overview ──── */
.fi-card-procesos-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}
.fi-card-procesos-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-brand-500);
  text-decoration: none;
}
.fi-card-procesos-link:hover {
  text-decoration: underline;
}

/* ── ws-col-section-label — separador semántico en columna secundaria */
.ws-col-section-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--nf-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--sp-4) 0 var(--sp-2);
}

/* ── cert-estado-bar — franja horizontal de estado en detalle de certificado */
.cert-estado-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-meta);
}

/* ── firmas-bandeja — wrapper de secciones operativas ───────────────────── */
/* ── firma-row — bandeja operativa Firmas v3 ─────────────────────────────── */
/* Reusa dashboard-card como base. Solo añade zona de señal y meta wrappable. */
.firma-row__signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  width: 84px;
}
.firma-row__urgencia {
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
  white-space: nowrap;
  line-height: 1.3;
}
/* Meta sin truncar — el contenido de Firmas es más largo que el dashboard genérico */
.firma-row__meta {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  line-height: 1.4;
}

/* ── firma-accion — bloque de acción principal en detalle ────────────────── */
.firma-accion-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-4);
}

.firma-accion-h3 {
  font-family: var(--nf-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin: var(--sp-4) 0 var(--sp-3);
}

.firma-accion-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.firma-renovacion-desc {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* ── firma-stepper — pasos compactos de renovación ──────────────────────── */
.firma-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--sp-3) 0;
}

.firma-stepper-paso {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--nf-text-soft);
  background: var(--nf-surface-soft);
  border: 1px solid var(--nf-border-soft);
  white-space: nowrap;
}

.firma-stepper-paso.activo {
  background: var(--nf-text-strong);
  color: var(--nf-surface);
  border-color: var(--nf-text-strong);
  font-weight: var(--fw-semibold);
}

.firma-stepper-paso.hecho {
  background: #eefbf3;
  color: #1a6b34;
  border-color: #58d68d;
}

.firma-stepper-sep {
  color: var(--nf-border-mid);
  font-size: var(--fs-label);
  line-height: var(--lh-1);
}

/* ── firma-section — colapsable v2 en detalle ────────────────────────────── */
.firma-section {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}

.firma-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  user-select: none;
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  list-style: none;
  gap: var(--sp-3);
}

.firma-section > summary::-webkit-details-marker { display: none; }

.firma-section > summary::after {
  content: '›';
  font-size: 1.3em;
  color: var(--nf-border-mid);
  transition: transform var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.firma-section[open] > summary::after { transform: rotate(90deg); }

.firma-section > summary:hover { background: var(--nf-surface-soft); }

.firma-section[open] > summary {
  border-bottom: 1px solid var(--nf-border-soft);
  background: var(--nf-surface-soft);
}

.firma-section-body {
  padding: var(--sp-6);
}

/* ── firma-detalle-titulo — h1 adaptable del titular en detalle ──────────── */
.firma-detalle-titulo {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  line-height: 1.25;
}

/* ── firma-work-card — card de mando principal en detalle ────────────────── */
.firma-work-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.firma-work-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--fs-meta);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--nf-border-soft);
  margin-bottom: var(--sp-4);
}

.firma-work-title {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin: 0 0 var(--sp-1);
}

.firma-work-subtitle {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin: 0 0 var(--sp-4);
}

.firma-work-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.firma-work-actions form { display: contents; }

.firma-tech-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--nf-border-soft);
}

.firma-tech-actions form { display: contents; }

.firma-tech-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.4px;
  color: var(--nf-text-faint);
  text-transform: uppercase;
  margin-right: var(--sp-1);
  white-space: nowrap;
}

/* ── firma-picker — dropdown "Iniciar renovación" en flex row ────────────── */
.firma-picker { position: relative; display: inline-block; }

.firma-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-1);
  background: var(--nf-surface);
  color: var(--nf-text-strong);
  border: 1px solid var(--nf-border-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.firma-picker > summary::-webkit-details-marker { display: none; }
.firma-picker[open] > summary { border-color: var(--nf-brand-500); }

.firma-picker-body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 220px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-2);
  box-shadow: var(--nf-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.firma-picker-body form { display: contents; }

.firma-picker-option {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-main);
  background: none;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}

.firma-picker-option:hover { background: var(--nf-surface-soft); }

/* ── firma-section-kicker — encabezado contextual sobre comunicaciones ───── */
.firma-section-kicker {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin-bottom: var(--sp-1);
}

.firma-section-kicker-desc {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  margin-bottom: var(--sp-3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIRMAS DASHBOARD v39 — fd-* (tokens v2 exclusivamente)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Franja de alerta ────────────────────────────────────────────────────────── */

.fd-alert-franja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff7e8;
  border: 1px solid #f4b24d;
  border-radius: 8px;
  padding: 10px 16px;
}

.fd-alert-franja__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fd-alert-count {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  font-family: var(--nf-sans);
}

.fd-alert-count--err    { color: #ff5a5f; }
.fd-alert-count--warn   { color: #f4b24d; }
.fd-alert-count--neutral { color: var(--nf-text-soft); }

.fd-alert-sep {
  color: var(--nf-border-mid);
  font-size: var(--fs-label);
}

.fd-alert-franja__link-row {
  display: flex;
  justify-content: flex-end;
}

.fd-alert-franja__link {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-brand-700);
  text-decoration: none;
}

.fd-alert-franja__link:hover {
  text-decoration: underline;
}

/* ── Tabs ────────────────────────────────────────────────────────────────────── */

.fd-tabs {
  display: flex;
  border-bottom: 2px solid var(--nf-border-soft);
  gap: 0;
  margin-bottom: 20px;
}

.fd-tab {
  padding: 10px 16px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  font-family: var(--nf-sans);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--nf-text-soft);
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.fd-tab:hover {
  color: var(--nf-text-main);
}

.fd-tab.active {
  color: var(--nf-text-strong);
  border-bottom-color: var(--nf-brand-700);
  font-weight: var(--fw-semibold);
}

.fd-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  margin-left: 6px;
  min-width: 18px;
}

.fd-tab__badge--err     { background: #fff0f1; color: #ff5a5f; }
.fd-tab__badge--neutral { background: var(--nf-surface-soft); color: var(--nf-text-soft); }

/* ── Panel de tab ────────────────────────────────────────────────────────────── */

.fd-tab-panel { outline: none; }

/* ── Item de bandeja ─────────────────────────────────────────────────────────── */

.fd-item {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.fd-item:hover {
  border-color: var(--nf-border-mid);
  box-shadow: 0 2px 8px rgba(10, 36, 99, 0.06);
}

.fd-item:last-child { margin-bottom: 0; }

.fd-item__row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.fd-item__row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-meta);
  flex-wrap: wrap;
}

.fd-item__signals {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fd-item__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-item__nombre {
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  font-size: var(--fs-meta);
}

.fd-item__nif {
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  color: var(--nf-text-main);
  white-space: nowrap;
}

.fd-item__tipo {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.fd-item__sep {
  color: var(--nf-border-mid);
  font-size: var(--fs-label);
}

/* ── Ver más ─────────────────────────────────────────────────────────────────── */

.fd-ver-mas {
  padding: 12px 0 4px;
  text-align: center;
}

.fd-ver-mas__link {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-brand-700);
  text-decoration: none;
}

.fd-ver-mas__link:hover {
  text-decoration: underline;
}

/* ── Subniveles sidebar ──────────────────────────────────────────────────────── */

.nav-sub {
  padding-left: 28px;
  margin-top: 2px;
  margin-bottom: 4px;
}

.nav-sub-item {
  display: block;
  padding: 3px 8px;
  font-size: var(--fs-micro);
  /* A6 (2026-05-26): se pasaron a tinta V5 porque el shell dejó de ser
     oscuro. La paleta fría (2026-08-18) revierte esa premisa — la lateral
     vuelve a ser oscura — así que el color vivo lo pone nav-v5.css con
     tokens --nf-nav-*. Estos valores solo aplican fuera de .sidebar. */
  color: var(--nf-text-soft);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--duration-fast);
}

.nav-sub-item:hover {
  color: var(--nf-text-main);
}

.nav-sub-item.active {
  color: var(--nf-text-strong);
  font-weight: var(--fw-medium);
}

/* ── Firmas — Detalle tramitación (fd-det-*) ────────────────────────────── */

.fd-det-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--nf-sans); font-size: var(--fs-label);
  color: var(--nf-text-soft); margin-bottom: 16px;
}
.fd-det-breadcrumb a { color: var(--nf-text-soft); text-decoration: none; }
.fd-det-breadcrumb a:hover { color: var(--nf-brand-500); text-decoration: underline; }

.fd-det-title {
  font-family: var(--nf-display); font-size: var(--fs-page); font-weight: var(--fw-bold);
  color: var(--nf-text-strong); letter-spacing: var(--ls-tight);
  line-height: 1.3; margin-bottom: 6px;
}
.fd-det-nif {
  font-family: var(--nf-mono); font-size: var(--fs-label);
  color: var(--nf-text-soft); font-variant-numeric: tabular-nums;
}

.fd-det-layout {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 24px; align-items: start;
}
@media (max-width: 920px) { .fd-det-layout { grid-template-columns: 1fr; } }

.fd-det-sidebar { min-width: 0; }

.fd-det-section { margin-bottom: 24px; }
.fd-det-section:last-child { margin-bottom: 0; }

.fd-det-section-h {
  font-family: var(--nf-display); font-size: var(--fs-section); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.fd-det-section-h--sm { font-size: var(--fs-meta); }

.fd-det-section-badge {
  font-family: var(--nf-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  padding: 2px 8px; border-radius: 20px;
  background: var(--nf-surface-soft); color: var(--nf-text-soft);
  border: 1px solid var(--nf-border-soft);
}

.fd-det-card {
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: 12px; padding: 20px;
}
.fd-det-card--sm { padding: 16px; }

.fd-det-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.fd-det-card-title {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.fd-det-card-title--sm { font-size: var(--fs-label); }

.fd-det-kv-group { margin-bottom: 20px; }
.fd-det-kv {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.fd-det-kv:last-child { margin-bottom: 0; }
.fd-det-kv__label {
  font-family: var(--nf-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--nf-text-soft); flex-shrink: 0; margin-right: 16px;
}
.fd-det-kv__val {
  font-family: var(--nf-sans); font-size: var(--fs-meta);
  color: var(--nf-text-strong); text-align: right;
}
.fd-det-kv__val--mono {
  font-family: var(--nf-mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-det-kv__val--err { color: var(--nf-coral-deep); font-weight: var(--fw-semibold); }

.fd-det-divider { height: 1px; background: var(--nf-border-soft); margin: 14px 0; }

.fd-det-cert-subtitle {
  font-family: var(--nf-sans); font-size: var(--fs-meta);
  color: var(--nf-text-soft); margin-bottom: 16px;
}

.fd-det-empty { text-align: center; padding: 28px 16px; }
.fd-det-empty__text {
  font-family: var(--nf-sans); font-size: var(--fs-meta); color: var(--nf-text-faint);
}

.fd-det-avatar {
  width: 40px; height: 40px; border-radius: 14px; background: var(--nf-brand-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: #ffffff; flex-shrink: 0; letter-spacing: var(--ls-normal);
}

.fd-det-responsable { display: flex; align-items: center; gap: 12px; }
.fd-det-responsable__name {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong); margin-bottom: 4px;
}

.fd-det-sin-gestor {
  font-family: var(--nf-sans); font-size: var(--fs-label); color: var(--nf-text-soft);
}

.fd-det-asignar-btn-wrap { margin-bottom: 12px; }

.fd-det-gestor-select {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--nf-border-soft); background: var(--nf-surface);
  color: var(--nf-text-main); font-family: var(--nf-sans); font-size: var(--fs-label);
  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out);
}
.fd-det-gestor-select:focus { border-color: var(--nf-brand-500); outline: none; }

.fd-det-info-field { margin-bottom: 10px; }
.fd-det-info-field:last-child { margin-bottom: 0; }
.fd-det-info-field__label {
  font-family: var(--nf-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  color: var(--nf-text-soft); text-transform: uppercase;
  letter-spacing: var(--ls-wide); margin-bottom: 3px;
}
.fd-det-info-field__val {
  font-family: var(--nf-mono); font-size: var(--fs-label);
  color: var(--nf-text-main); font-variant-numeric: tabular-nums;
}
.fd-det-info-field__val--err { color: var(--nf-coral-deep); font-weight: var(--fw-semibold); }
.fd-det-info-field__val--link {
  font-family: var(--nf-sans); font-size: var(--fs-label); color: var(--nf-brand-500);
}

/* ── Firmas — Vistas renovación (fd-ren-*) ─────────────────────────────── */

/* Stepper horizontal circular — 7 pasos canónicos */
.fd-ren-stepper {
  display: flex; align-items: flex-start; margin-bottom: 24px; overflow-x: auto;
}
.fd-ren-step {
  display: flex; flex: 1; align-items: flex-start; min-width: 0;
}
.fd-ren-step__col {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
.fd-ren-step__circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-semibold);
  border: 2px solid var(--nf-border-mid);
  color: var(--nf-text-faint); background: transparent;
}
.fd-ren-step__circle--activo {
  background: var(--nf-brand-500); border-color: var(--nf-brand-500);
  color: #ffffff; box-shadow: 0 0 0 4px var(--nf-brand-100);
}
.fd-ren-step__circle--hecho {
  background: var(--nf-brand-500); border-color: var(--nf-brand-500); color: #ffffff;
}
.fd-ren-step__circle--hecho-ok {
  background: var(--nf-brand); border-color: var(--nf-brand); color: #ffffff;
}
.fd-ren-step__circle--err {
  background: var(--nf-coral-soft); border-color: var(--nf-coral); color: var(--nf-coral-deep);
}
.fd-ren-step__label--err { color: var(--nf-coral-deep); font-weight: var(--fw-semibold); }
.fd-ren-step__circle--no_aplica { opacity: 0.35; }
.fd-ren-step__label {
  font-family: var(--nf-sans); font-size: var(--fs-micro); text-align: center;
  margin-top: 8px; white-space: nowrap; color: var(--nf-text-faint);
}
.fd-ren-step__label--activo { color: var(--nf-brand-700); font-weight: var(--fw-semibold); }
.fd-ren-step__label--hecho  { color: var(--nf-brand-700); font-weight: var(--fw-medium); }
.fd-ren-step__label--hecho-ok { color: var(--nf-brand-strong); font-weight: var(--fw-semibold); }
.fd-ren-step__label--no_aplica { opacity: 0.4; }
.fd-ren-step__date {
  font-family: var(--nf-mono); font-size: var(--fs-micro); text-align: center;
  margin-top: 4px; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--nf-brand-strong);
}
.fd-ren-step__noapl {
  font-family: var(--nf-sans); font-size: var(--fs-micro); text-align: center;
  margin-top: 2px; white-space: nowrap; color: var(--nf-text-faint); opacity: 0.6;
}
.fd-ren-connector {
  flex: 1; height: 2px; background: var(--nf-border-mid);
  margin: 15px 6px 0; flex-shrink: 0; min-width: 6px;
}
.fd-ren-connector--hecho   { background: var(--nf-brand-500); }
.fd-ren-connector--hecho-ok { background: var(--nf-brand); }

/* Tarjeta acción principal (borde brand verde) */
.fd-ren-action-card {
  background: var(--nf-surface); border: 2px solid var(--nf-brand-500);
  border-radius: 12px; padding: 24px; box-shadow: var(--nf-shadow-sm);
}
.fd-ren-action-card--err {
  background: var(--nf-surface); border: 2px solid var(--nf-coral);
  border-radius: 12px; padding: 24px; box-shadow: var(--nf-shadow-sm);
}

/* Banner de éxito (renovación completada) */
.fd-ren-ok-banner {
  background: var(--nf-brand-soft); border: 2px solid var(--nf-brand);
  border-radius: 12px; padding: 28px; box-shadow: var(--nf-shadow-sm);
}
.fd-ren-ok-banner__head {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px;
}
.fd-ren-ok-banner__check {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--nf-brand); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: var(--fs-section); font-weight: var(--fw-bold);
}
.fd-ren-ok-banner__title {
  font-family: var(--nf-display); font-size: var(--fs-section); font-weight: var(--fw-semibold);
  color: var(--nf-brand-strong); margin-bottom: 8px;
}
.fd-ren-ok-banner__sub {
  font-family: var(--nf-sans); font-size: var(--fs-meta);
  color: var(--nf-text-soft); line-height: var(--lh-normal);
}

/* Opciones radio para aceptación del cliente */
.fd-ren-radio-opt {
  display: block; cursor: pointer; padding: 16px; border-radius: 10px;
  border: 1.5px solid var(--nf-border-soft); background: var(--nf-surface);
  margin-bottom: 10px; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.fd-ren-radio-opt:last-child { margin-bottom: 0; }
.fd-ren-radio-opt:hover { border-color: var(--nf-border-mid); }
.fd-ren-radio-opt:has(input[type=radio]:checked) {
  border: 2px solid var(--nf-brand-500); background: var(--nf-brand-050);
}
.fd-ren-radio-opt--rechaza:has(input[type=radio]:checked) {
  border: 2px solid var(--nf-coral); background: var(--nf-coral-soft);
}
.fd-ren-radio-opt__inner { display: flex; align-items: flex-start; gap: 12px; }
.fd-ren-radio-opt__radio {
  margin-top: 2px; width: 18px; height: 18px;
  cursor: pointer; accent-color: var(--nf-brand-500); flex-shrink: 0;
}
.fd-ren-radio-opt__title {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong); margin-bottom: 4px;
}
.fd-ren-radio-opt__desc {
  font-family: var(--nf-sans); font-size: var(--fs-label);
  color: var(--nf-text-soft); line-height: var(--lh-normal);
}

/* Alerta inline sin margin-bottom (para incrustar en cards) */
.fd-ren-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: 8px; border-left: 3px solid transparent;
}
.fd-ren-alert--warn {
  background: var(--nf-amber-soft); border-left-color: var(--nf-amber);
  color: var(--nf-amber-deep);
}
.fd-ren-alert--err {
  background: var(--nf-coral-soft); border-left-color: var(--nf-coral); color: var(--nf-coral-deep);
}
.fd-ren-alert--info {
  background: var(--nf-bg-app); border-left-color: var(--nf-border-soft); color: var(--nf-border-mid);
}
.fd-ren-alert__icon { flex-shrink: 0; font-size: var(--fs-meta); line-height: var(--lh-1); margin-top: 1px; }
.fd-ren-alert__txt  { font-family: var(--nf-sans); font-size: var(--fs-label); line-height: var(--lh-normal); margin: 0; }
.fd-ren-alert__link {
  font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-semibold);
  color: inherit; text-decoration: none; display: inline-block; margin-top: 6px;
}
.fd-ren-alert__link:hover { text-decoration: underline; }

/* Historial item en bloqueado */
.fd-ren-hist-item {
  padding: 12px; background: var(--nf-bg-app); border: 1px solid var(--nf-border-soft);
  border-radius: 8px; margin-bottom: 10px;
}
.fd-ren-hist-item:last-child { margin-bottom: 0; }
.fd-ren-hist-item__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.fd-ren-hist-item__titulo {
  font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--nf-text-soft);
}
.fd-ren-hist-item__body {
  font-family: var(--nf-sans); font-size: var(--fs-micro); color: var(--nf-text-soft);
}

/* ── Lote 4: Verificación identidad, Pasos 2/3/5, Espera ───────────────── */

/* Panel doc identidad (verde/rojo según estado) */
.fd-ren-doc-box {
  border-radius: 10px; padding: 20px;
}
.fd-ren-doc-box--ok {
  background: var(--nf-brand-soft); border: 1px solid var(--nf-brand);
}
.fd-ren-doc-box--err {
  background: var(--nf-coral-soft); border: 1px solid var(--nf-coral);
}
.fd-ren-doc-box--neutral {
  background: var(--nf-surface-soft); border: 1px solid var(--nf-border-soft);
}
.fd-ren-doc-box__head {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
}
.fd-ren-doc-box__icon { font-size: var(--fs-section); line-height: var(--lh-1); flex-shrink: 0; margin-top: 2px; }
.fd-ren-doc-box__title {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong); margin: 0;
}
.fd-ren-doc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.fd-ren-doc-row:last-child { margin-bottom: 0; }
.fd-ren-doc-row__label {
  font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--nf-text-soft);
}
.fd-ren-doc-row__val {
  font-family: var(--nf-mono); font-size: var(--fs-label); font-variant-numeric: tabular-nums;
  color: var(--nf-text-strong);
}
.fd-ren-doc-row__val--ok  { color: var(--nf-brand-strong); font-weight: var(--fw-semibold); }
.fd-ren-doc-row__val--err { color: var(--nf-coral-deep);  font-weight: var(--fw-semibold); }

/* Botón expand/colapso (sin decoración, texto discreto) */
.fd-ren-expand-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--nf-text-soft); transition: color var(--duration-fast) var(--ease-out);
}
.fd-ren-expand-btn:hover { color: var(--nf-text-main); }

/* Panel expandible */
.fd-ren-expand-panel {
  margin-top: 8px; border-radius: 10px; padding: 20px;
  border: 1px solid var(--nf-border-soft);
  background: var(--nf-surface);
}
.fd-ren-expand-panel--warn {
  background: var(--nf-amber-soft); border-color: var(--nf-amber);
}

/* Input controlado (PC name, fecha) */
.fd-ren-field { margin-bottom: 20px; }
.fd-ren-field:last-child { margin-bottom: 0; }
.fd-ren-field__label {
  display: block; font-family: var(--nf-sans); font-size: var(--fs-label);
  font-weight: var(--fw-medium); color: var(--nf-text-soft); margin-bottom: 8px;
}
.fd-ren-field__wrap { position: relative; }
.fd-ren-field__input {
  width: 100%; font-family: var(--nf-mono); font-size: var(--fs-meta);
  padding: 10px 52px 10px 12px; border-radius: 8px;
  border: 1.5px solid var(--nf-border-mid); background: var(--nf-surface);
  color: var(--nf-text-main); font-variant-numeric: tabular-nums;
}
.fd-ren-field__input:focus { outline: none; border-color: var(--nf-brand-500); box-shadow: 0 0 0 3px var(--nf-brand-100); }
.fd-ren-field__counter {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--nf-mono); font-size: var(--fs-micro); color: var(--nf-text-faint);
  pointer-events: none;
}
.fd-ren-field__hint {
  font-family: var(--nf-sans); font-size: var(--fs-micro);
  color: var(--nf-text-soft); margin-top: 6px;
}

/* Badge espera cliente */
.fd-ren-badge-espera {
  display: inline-flex; align-items: center;
  font-family: var(--nf-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  padding: 2px 10px; border-radius: 20px;
  background: var(--nf-amber-soft); color: var(--nf-amber-deep);
  border: 1px solid var(--nf-amber);
}

/* Registradores — estado del paso2 */
.fd-ren-mercantil-sub {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;
}
.fd-ren-mercantil-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid var(--nf-border-soft);
  background: var(--nf-surface); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.fd-ren-mercantil-opt:has(input[type=radio]:checked) {
  border-color: var(--nf-brand-500); background: var(--nf-brand-050);
}
.fd-ren-mercantil-opt__radio {
  margin-top: 2px; width: 18px; height: 18px;
  cursor: pointer; accent-color: var(--nf-brand-500); flex-shrink: 0;
}
.fd-ren-mercantil-opt__title {
  font-family: var(--nf-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold);
  color: var(--nf-text-strong); margin-bottom: 2px;
}
.fd-ren-mercantil-opt__desc {
  font-family: var(--nf-sans); font-size: var(--fs-label); color: var(--nf-text-soft);
}

/* Card bloqueado registradores */
.fd-ren-bloqueado-card {
  background: var(--nf-coral-soft); border: 2px solid var(--nf-coral);
  border-radius: 10px; padding: 24px;
}
.fd-ren-bloqueado-card__title {
  font-family: var(--nf-display); font-size: var(--fs-section); font-weight: var(--fw-semibold);
  color: var(--nf-coral-deep); margin-bottom: 12px;
}

/* Divider fino */
.fd-ren-divider { height: 1px; background: var(--nf-border-soft); margin: 20px 0; }

/* Paso 2 — Contadores */
.fd-ren-contadores { background: var(--nf-surface); border: 1px solid var(--nf-border-soft); border-radius: 10px; padding: 20px; margin-top: 20px; }
.fd-ren-contadores__title { font-family: var(--nf-display); font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--nf-text-strong); margin-bottom: 16px; }
.fd-ren-contadores__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.fd-ren-contador__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fd-ren-contador__label { font-family: var(--nf-sans); font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--nf-text-soft); }
.fd-ren-contador__bar { width: 100%; height: 6px; background: var(--nf-surface-soft); border-radius: 3px; overflow: hidden; }
.fd-ren-contador__fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.fd-ren-contador__fill--ok   { background: var(--nf-brand-500); }
.fd-ren-contador__fill--warn { background: #f4b24d; }
.fd-ren-contador__fill--err  { background: #ff5a5f; }
.fd-ren-contadores__note { font-family: var(--nf-sans); font-size: var(--fs-micro); color: var(--nf-text-soft); margin: 0; }
.fd-det-subgroup { border-top: 1px solid var(--nf-border-soft); padding-top: 8px; margin-top: 4px; }
.fd-det-subgroup__title { font-family: var(--nf-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--nf-text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.fd-det-subgroup__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.fd-det-subgroup__row:last-child { margin-bottom: 0; }
.fd-det-subgroup__key { font-family: var(--nf-sans); font-size: var(--fs-micro); color: var(--nf-text-soft); }
.fd-det-subgroup__val { font-family: var(--nf-mono); font-size: var(--fs-micro); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.fd-det-subgroup__val--warn { color: #f4b24d; }
.fd-det-subgroup__val--err  { color: #ff5a5f; }

/* Paso 6 — PFX dropzone */
.fd-ren-pfx-dropzone { border: 2px dashed var(--nf-border-mid); border-radius: 8px; padding: 28px; text-align: center; background: var(--nf-surface-soft); cursor: pointer; transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease; margin-bottom: 16px; }
.fd-ren-pfx-dropzone:hover,
.fd-ren-pfx-dropzone--hover { border-color: var(--nf-brand-500); background: var(--nf-brand-050); }
.fd-ren-pfx-dropzone--active { border-color: var(--nf-brand-500); border-style: solid; }
.fd-ren-pfx-dropzone__icon { font-size: var(--fs-page); display: block; margin-bottom: 8px; }
.fd-ren-pfx-dropzone__txt { font-family: var(--nf-sans); font-size: var(--fs-label); color: var(--nf-text-soft); margin-bottom: 4px; }
.fd-ren-pfx-dropzone__hint { font-family: var(--nf-sans); font-size: var(--fs-micro); color: var(--nf-text-faint); margin: 0; }
.fd-ren-pfx-input { display: none; }

/* === GESTOR DOCUMENTAL === */

/* Tokens de color por categoría — bg y texto */
:root {
  --gd-cat-fiscal-bg:              #e8f0fe;
  --gd-cat-fiscal-txt:             #174ea6;
  --gd-cat-laboral-bg:             #e6f4ea;
  --gd-cat-laboral-txt:            #1e6832;
  --gd-cat-contabilidad-bg:        #fce8b2;
  --gd-cat-contabilidad-txt:       #7b4f00;
  --gd-cat-escrituras-bg:          #ede7f6;
  --gd-cat-escrituras-txt:         #4527a0;
  --gd-cat-notificaciones-bg:      #fde8e8;
  --gd-cat-notificaciones-txt:     #9c2626;
  --gd-cat-contratos-bg:           #e8f5e9;
  --gd-cat-contratos-txt:          #1b5e20;
  --gd-cat-buzon-bg:               #fff8e1;
  --gd-cat-buzon-txt:              #6d4c00;
  --gd-cat-sin_categoria-bg:       var(--nf-surface-soft);
  --gd-cat-sin_categoria-txt:      var(--nf-text-soft);
  --gd-cat-otro-bg:                var(--nf-surface-soft);
  --gd-cat-otro-txt:               var(--nf-text-soft);
}

/* Paginación */
.pagination {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
}

.pagination-info {
  font-family: var(--nf-sans); font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}

/* ── Bulk toolbar (Sprint 8) ─────────────────────────────────────────────── */
.docs-bulk-checkbox-col { width: 32px; text-align: center; padding: 8px; }
.docs-bulk-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; margin-bottom: 12px;
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft); border-radius: 8px;
}
.docs-bulk-toolbar[hidden] { display: none; }
.docs-bulk-toolbar-counter { font-weight: var(--fw-semibold); color: var(--nf-text-strong); }
.docs-bulk-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.docs-bulk-dialog {
  padding: 24px; border: 1px solid var(--nf-border-soft); border-radius: 12px;
  background: var(--nf-surface); max-width: 480px; width: 90vw;
}
.docs-bulk-dialog::backdrop { background: rgba(0,0,0,0.4); }
.docs-bulk-dialog header {
  font-weight: var(--fw-semibold); color: var(--nf-text-strong); font-size: var(--fs-section); margin-bottom: 12px;
  display: block;
}
.docs-bulk-dialog-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.docs-bulk-dialog-body select {
  padding: 8px 12px; border: 1px solid var(--nf-border-soft);
  border-radius: 6px; background: #fff; font-size: var(--fs-body);
}
.docs-bulk-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Gestor documental — barra filtros Sprint 9 ─────────────────────────────── */
.docs-filtros-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  flex-wrap: wrap;
}
.docs-filtro { display: flex; flex-direction: column; gap: 3px; }
.docs-filtro-texto { flex: 1 1 auto; min-width: 180px; }
.docs-filtro-tipo { flex: 0 0 auto; min-width: 160px; }
.docs-filtro-input,
.docs-filtro-select {
  padding: 7px 11px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  background: #fff;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--nf-text-strong);
}
.docs-filtro-input:focus,
.docs-filtro-select:focus {
  outline: 2px solid var(--nf-brand-500);
  outline-offset: 1px;
  border-color: var(--nf-brand-500);
}
.docs-filtros-clear { align-self: center; margin-left: auto; }
.docs-filtros-clear[hidden] { display: none; }

/* ── Gestor documental — indicadores cabecera Sprint 10 ─────────────────────── */
.docs-indicadores {
  display: flex;
  gap: 24px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
}
.docs-indicador { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.docs-indicador-valor {
  font-size: var(--fs-page);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  line-height: 1.1;
}
.docs-indicador-label {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
  text-transform: lowercase;
}

/* ── Mi perfil / permisos ───────────────────────────────────────────────────── */
.mi-perfil {
  max-width: 720px;
  margin: 24px auto;
  padding: 0 16px;
}
.mi-perfil-header h1 {
  margin: 0 0 4px 0;
  color: var(--nf-text-strong);
}
.mi-perfil-sub {
  color: var(--nf-text-soft);
  font-size: var(--fs-body);
  margin: 0 0 24px 0;
}
.mi-perfil-seccion {
  margin-bottom: 16px;
  padding: 20px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
}
.mi-perfil-seccion h2 {
  margin: 0 0 12px 0;
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
}
.mi-perfil-help {
  color: var(--nf-text-soft);
  font-size: var(--fs-meta);
  margin: 0 0 12px 0;
}
.mi-perfil-dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 16px;
  margin: 0;
}
.mi-perfil-dl dt { color: var(--nf-text-soft); font-weight: var(--fw-medium); }
.mi-perfil-dl dd { margin: 0; color: var(--nf-text-strong); }
.mi-perfil-modulos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.mi-perfil-modulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--nf-border-soft);
}
.mi-perfil-modulo.on {
  background: rgba(16, 180, 74, 0.08);
  border-color: var(--nf-brand-500);
}
.mi-perfil-modulo.off { opacity: 0.5; }
.mi-perfil-modulo-nombre { font-weight: var(--fw-medium); font-size: var(--fs-meta); }
.mi-perfil-modulo-estado { font-size: var(--fs-meta); color: var(--nf-text-soft); }
.mi-perfil-modulo.on .mi-perfil-modulo-estado { color: var(--nf-brand-500); }
.mi-perfil-lista { margin: 0; padding-left: 20px; }
.mi-perfil-lista li { margin-bottom: 6px; }
.mi-perfil-detalle { color: var(--nf-text-soft); font-size: var(--fs-meta); }
.mi-perfil-footer {
  margin-top: 8px;
  padding: 16px;
  text-align: center;
  color: var(--nf-text-soft);
  font-size: var(--fs-meta);
}

/* ── Admin audit log ────────────────────────────────────────────────────────── */
.admin-audit-filtros {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 16px;
  flex-wrap: wrap;
}
.admin-audit-filtros label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-meta);
}
.admin-audit-filtros select {
  min-width: 200px;
  padding: 6px 10px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 4px;
}
.admin-audit-table { font-size: var(--fs-meta); }
.admin-audit-fecha {
  white-space: nowrap;
  color: var(--nf-text-soft);
}
.admin-audit-detalle {
  margin: 0;
  font-size: var(--fs-label);
  background: #f3f4f6;
  padding: 6px 8px;
  border-radius: 4px;
  max-width: 380px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-audit-paginacion {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.admin-audit-paginacion a { color: var(--nf-brand-500); text-decoration: none; }

/* ── Fiscal cotejo card ─────────────────────────────────────────────────────── */
.cotejo-indicador {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
}
.cotejo-indicador--ok    { color: var(--nf-brand-strong); }
.cotejo-indicador--delta { color: var(--nf-coral-deep); }
.cotejo-indicador--incidencia { color: var(--nf-amber-deep); }
.cotejo-indicador--neutral { color: var(--nf-text-soft); }

.cotejo-meta {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
  margin-left: auto;
}

.cotejo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--nf-border-soft);
}

.cotejo-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cotejo-cnae-badge {
  font-size: var(--fs-micro);
  padding: 1px 5px;
  margin-left: 2px;
}

.cotejo-status-badge {
  font-size: var(--fs-label);
}

.cotejo-no-cotejo {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

/* ── FI-CARD-NOTAS (card notas internas — workspace v2) ─────── */
.fi-card-notas-form {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-notas-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: var(--sp-2);
}
.fi-card-notas-textarea:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nf-brand-500) 15%, transparent);
}
.fi-card-notas-actions {
  display: flex;
  gap: var(--sp-2);
}
.fi-card-nota-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-nota-item:last-child { border-bottom: none; }
.fi-card-nota-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
.fi-card-nota-autor {
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
}
.fi-card-nota-sep { color: var(--nf-border-soft); }
.fi-card-nota-texto {
  font-size: var(--fs-meta);
  line-height: 1.6;
  color: var(--nf-text-strong);
  white-space: pre-wrap;
  margin-bottom: var(--sp-2);
}
.fi-card-nota-btns {
  display: flex;
  gap: var(--sp-1);
}
.fi-nota-btn-eliminar { color: var(--err, #dc2626); }
.fi-card-notas-empty {
  padding: var(--sp-2) 0;
  color: var(--nf-text-soft);
}

/* Notas v2 — filtros de autor */
.fi-notas-filtros {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--nf-border-soft);
  padding-bottom: var(--sp-2);
}
.fi-notas-filtro-btn {
  background: none;
  border: none;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-soft);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.fi-notas-filtro-btn:hover { background: var(--nf-bg-app); color: var(--nf-text-strong); }
.fi-notas-filtro-btn.active { background: var(--nf-brand-100); color: var(--nf-brand-600); }

/* Notas v2 — urgencia, vencimiento, contexto */
.fi-card-nota-badge {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  padding: 1px 6px;
  border-radius: 4px;
  line-height: var(--lh-normal);
  margin-right: 4px;
}
.fi-card-nota-badge-urgente {
  background: var(--nf-error-bg);
  color: var(--nf-error-txt);
  border: 1px solid var(--nf-error-borde);
}
.fi-card-nota-badge-informativa {
  background: var(--nf-info-bg);
  color: var(--nf-info-txt);
  border: 1px solid var(--nf-info-borde);
}
.fi-card-nota-badge-venc {
  display: inline-block;
  font-size: var(--fs-label);
  padding: 1px 6px;
  border-radius: 4px;
  line-height: var(--lh-normal);
  margin-left: 6px;
}
.fi-card-nota-badge-venc-ok {
  background: var(--nf-ok-bg);
  color: var(--nf-ok-txt);
  border: 1px solid var(--nf-ok-borde);
}
.fi-card-nota-badge-venc-warn {
  background: var(--nf-warn-bg);
  color: var(--nf-warn-txt);
  border: 1px solid var(--nf-warn-borde);
}
.fi-card-nota-badge-venc-error {
  background: var(--nf-error-bg);
  color: var(--nf-error-txt);
  border: 1px solid var(--nf-error-borde);
}
.fi-card-nota-vencida {
  background: var(--nf-error-bg);
  border-radius: 6px;
}
.fi-card-notas-form-campos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.fi-card-notas-campo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.fi-card-notas-select,
.fi-card-notas-input-date {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  font-size: var(--fs-meta);
  background: var(--nf-surface);
  color: var(--nf-text-main, var(--nf-text-strong));
}
.fi-card-notas-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-label);
}
.fi-card-notas-radio-group label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  color: var(--nf-text-main, var(--nf-text-strong));
}

/* ── FI-CARD-ACCESOS (accesos bancarios — workspace v2) ─────── */
.fi-card-accesos-form {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-accesos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
@media (max-width: 640px) {
  .fi-card-accesos-grid { grid-template-columns: 1fr; }
}
.fi-card-accesos-label {
  display: block;
  font-size: var(--fs-label);
  color: var(--nf-text-strong);
  margin-bottom: 4px;
  font-weight: var(--fw-medium);
}
.fi-card-accesos-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  font-family: var(--nf-sans);
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  background: var(--nf-surface);
  box-sizing: border-box;
}
.fi-card-accesos-input:focus {
  outline: none;
  border-color: var(--nf-brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nf-brand-500) 15%, transparent);
}
.fi-card-acceso-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-acceso-item:last-child { border-bottom: none; }
.fi-card-acceso-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.fi-card-acceso-banco {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
}
.fi-card-acceso-tipo { font-size: var(--fs-label); }
.fi-card-acceso-meta { margin-bottom: var(--sp-1); }
.fi-card-acceso-pwd-area {
  font-family: var(--nf-mono);
  font-size: var(--fs-meta);
  background: var(--nf-bg-app);
  border-radius: var(--r-1);
  padding: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1);
  margin-bottom: var(--sp-1);
  color: var(--nf-text-strong);
}

/* ── FI-CARD-FIRMAS (firmas digitales — workspace v2) ────────── */
.fi-card-firmas-stats {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.fi-card-firmas-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fi-card-firmas-num {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--nf-text-strong);
  font-family: var(--nf-mono);
}
.fi-card-firmas-num--err  { color: var(--err, #dc2626); }
.fi-card-firmas-num--warn { color: var(--amber-600, #d97706); }
.fi-card-firmas-prox { margin-top: var(--sp-2); }

/* ── FI-CARD-BANCARIOS (cuentas bancarias ADR-018 — workspace v2) */
.fi-card-bancarios-list { display: flex; flex-direction: column; }
.fi-card-bancario-item {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-bancario-item:last-child { border-bottom: none; }
.fi-card-bancario-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.fi-card-bancario-iban {
  font-size: var(--fs-meta);
  color: var(--nf-text-strong);
  letter-spacing: 0.03em;
}
.fi-card-bancario-badges { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.fi-card-bancario-badge { font-size: var(--fs-micro); }
.fi-card-bancario-meta { margin-top: 2px; }

/* La principal se distingue sin gritar: un filete a la izquierda, no un fondo.
   Son cuentas bancarias en una card densa y el color ya lo lleva el badge. */
.fi-card-bancario-item.is-principal {
  border-left: 2px solid var(--nf-brand-500);
  padding-left: var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
}
/* «por defecto» va dentro del badge y en menor jerarquía: informa de que es
   una convención de orden, no una decisión de nadie. */
.fi-card-bancario-defecto {
  font-weight: var(--fw-regular);
  opacity: 0.75;
}
/* El form de marcar no debe ocupar sitio ni romper la fila de badges. */
.fi-card-bancario-marcar { display: inline-flex; margin: 0; }
.fi-card-bancario-btn {
  font-size: var(--fs-micro);
  padding: 0 var(--sp-1);
  color: var(--nf-text-soft);
}
.fi-card-bancario-btn:hover { color: var(--nf-brand-500); }

/* ── FI-CARD-PERSONAS (personas ampliada ADR-018 — workspace v2) */
.fi-card-personas-section {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--nf-border-soft);
}
.fi-card-personas-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.fi-card-personas-section-title {
  display: block;
  letter-spacing: 0.07em;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
  color: var(--nf-text-soft);
}
.fi-card-persona-item {
  padding: var(--sp-1) 0;
}
.fi-card-persona-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.fi-card-persona-nombre {
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  text-decoration: none;
}
a.fi-card-persona-nombre:hover { text-decoration: underline; }
.fi-card-persona-badges { display: flex; gap: var(--sp-1); flex-shrink: 0; flex-wrap: wrap; }

/* ── Régimen fiscal card (fi-card-fiscal-*) ─────────────────────────────────── */
.fi-card-fiscal-section {
  padding: var(--sp-3) 0 var(--sp-2);
  border-top: 1px solid var(--nf-border-soft);
}
.fi-card-fiscal-section:first-of-type { border-top: none; padding-top: 0; }
.fi-card-fiscal-section-title {
  display: block;
  letter-spacing: 0.07em;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
  color: var(--nf-text-soft);
}
.fi-card-fiscal-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.fi-card-fiscal-skel-row {
  height: 14px;
  border-radius: var(--r-1);
  background: var(--nf-border-soft);
  animation: fi-card-fiscal-pulse 1.4s ease-in-out infinite;
  width: 100%;
}
.fi-card-fiscal-skel-row--md { width: 75%; }
.fi-card-fiscal-skel-row--sm { width: 50%; }
@keyframes fi-card-fiscal-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
.fi-card-fiscal-obligaciones-table { margin: 0 0 var(--sp-2); font-size: var(--fs-meta); }
.fi-card-fiscal-badge-estado { font-size: var(--fs-micro); }
.fi-card-fiscal-censales {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.fi-card-fiscal-censales-title {
  display: block;
  letter-spacing: 0.07em;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
  color: var(--nf-text-soft);
}
.fi-card-fiscal-censal-item { display: flex; align-items: baseline; gap: var(--sp-1); }
.fi-card-fiscal-censal-nombre { color: var(--nf-text-strong); text-decoration: none; font-size: var(--fs-meta); }
a.fi-card-fiscal-censal-nombre:hover { text-decoration: underline; color: var(--nf-brand-500); }
.fi-card-fiscal-sede-link { color: var(--nf-text-soft); text-decoration: none; }
.fi-card-fiscal-sede-link:hover { color: var(--nf-brand-500); }
.fi-card-fiscal-retry {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.fi-card-fiscal-retry-btn { flex-shrink: 0; }
@keyframes gd-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes gd-highlight-fade {
  0%   { background: var(--nf-brand-500-a20); }
  100% { background: transparent; }
}

/* ════════════════════════════════════════════════════════════════
   CATÁLOGO DE SERVICIOS Y ASIGNACIONES (v2)
   ════════════════════════════════════════════════════════════════
   Componentes nuevos del Lote 4. Convención BEM-like:
     .nf-componente
     .nf-componente__elemento
     .nf-componente--modificador
   Solo tokens v2 (--nf-brand-500, --nf-shell-bg, --nf-bg-app, etc.)
   Sin colores hardcoded. Sin box-shadow en estado resting.
   Sin text-transform:uppercase en labels de tabla.
   ════════════════════════════════════════════════════════════════ */

/* ─── Card base (reutilizable por todos los bloques v2) ─── */
.nf-card {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.nf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--nf-border-soft);
}

.nf-card__title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}

/* ─── Botones v2 ─── */
.nf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nf-text-strong);
  font-size: var(--fs-meta);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.nf-btn:hover {
  background: var(--nf-bg-app);
}

.nf-btn--primary {
  background: var(--nf-brand-500);
  color: white;
  border-color: var(--nf-brand-500);
}

.nf-btn--primary:hover {
  background: var(--nf-brand-600);
  border-color: var(--nf-brand-600);
}

.nf-btn--secondary {
  border-color: var(--nf-border-soft);
}

.nf-btn--small {
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-label);
}

/* ─── Badges v2 ─── */
.nf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  background: var(--nf-bg-app);
  color: var(--nf-text-strong);
}

.nf-badge--info {
  background: color-mix(in oklab, var(--nf-brand-500) 12%, transparent);
  color: var(--nf-brand-500);
}

.nf-badge--warning {
  background: color-mix(in oklab, #d97706 15%, transparent);
  color: #92400e;
}

.nf-badge--success {
  background: color-mix(in oklab, #059669 15%, transparent);
  color: #065f46;
}

/* ─── Bloque Asignaciones ─── */
.nf-asignaciones-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.nf-asignaciones-grid dt {
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  align-self: start;
  padding-top: 0.15rem;
}

.nf-asignaciones-grid dd {
  margin: 0;
  color: var(--nf-text-strong);
}

/* ─── Chip de usuario ─── */
.nf-user-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.nf-user-chip__name {
  font-weight: var(--fw-medium);
}

.nf-user-chip--placeholder .nf-user-chip__name {
  font-style: italic;
  color: var(--nf-text-soft);
}

/* ─── Lista de overrides por familia ─── */
.nf-overrides-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.nf-overrides-list li,
.nf-overrides-list__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nf-card__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-familia-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  background: var(--nf-bg-app);
  color: var(--nf-text-strong);
  text-transform: lowercase;
}

/* ─── Modal v2 ─── */
.nf-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  max-width: 540px;
  width: 90vw;
}

.nf-modal::backdrop { background: rgba(0, 0, 0, 0.4); }

.nf-modal__box {
  display: flex;
  flex-direction: column;
  background: var(--nf-surface);
}

.nf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--nf-border-soft);
}

.nf-modal__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }

.nf-modal__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nf-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--nf-border-soft);
}

/* Modal de confirmación V5 (nf-confirm.js) — D-COMERCIAL-CONFIRM-V5 */
.nf-confirm { max-width: 26rem; }
.nf-confirm__msg { margin: 0; color: var(--nf-text-strong); line-height: 1.5; }

/* ─── Form fields v2 ─── */
.nf-form-field { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }

.nf-form-field label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
}

.nf-input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  font-size: var(--fs-meta);
  background: var(--nf-surface);
  font-family: inherit;
  resize: vertical;
}

.nf-input:focus {
  outline: 2px solid var(--nf-brand-500);
  outline-offset: -1px;
  border-color: var(--nf-brand-500);
}

.nf-error-inline {
  color: #b91c1c;
  background: color-mix(in oklab, #b91c1c 10%, transparent);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: var(--fs-label);
}

/* ─── Autocomplete dropdown ─── */
.nf-ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: 6px;
  z-index: var(--z-dropdown);
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
}

.nf-ac-item {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: var(--fs-meta);
}

.nf-ac-item:hover { background: var(--nf-bg-app); }

/* ─── Bloque Servicios ─── */
.nf-servicios-totales {
  display: flex;
  gap: 0.75rem;
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.nf-servicios-totales__num {
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}

.nf-acordeon-familia {
  border-top: 1px solid var(--nf-border-soft);
  padding: 0.75rem 0;
}

.nf-acordeon-familia:first-child { border-top: none; }

.nf-acordeon-familia__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.25rem 0;
}

.nf-acordeon-familia__title {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  text-transform: capitalize;
}

.nf-acordeon-familia__count {
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}

.nf-servicio-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-top: 1px dashed var(--nf-border-soft);
}

.nf-servicio-row:first-child { border-top: none; }

.nf-servicio__name {
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
}

.nf-servicio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-size: var(--fs-label);
}

.nf-servicio__actions {
  display: flex;
  gap: 0.25rem;
  align-items: start;
}

.nf-modelo-fiscal-pill {
  display: inline-flex;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: var(--fs-micro);
  background: var(--nf-bg-app);
  color: var(--nf-text-strong);
  border: 1px solid var(--nf-border-soft);
}

.nf-badge-naturaleza {
  text-transform: lowercase;
}

.nf-badge-estado--activo {
  background: color-mix(in oklab, #059669 12%, transparent);
  color: #065f46;
}

.nf-badge-estado--pausado {
  background: color-mix(in oklab, #d97706 12%, transparent);
  color: #92400e;
}

.nf-badge-estado--terminado {
  background: var(--nf-bg-app);
  color: var(--nf-text-soft);
}

.nf-badge-estado--en_traspaso_entrante,
.nf-badge-estado--en_traspaso_saliente,
.nf-badge-estado--con_obligaciones_residuales {
  background: color-mix(in oklab, var(--nf-brand-500) 10%, transparent);
  color: var(--nf-brand-500);
}

.nf-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--nf-text-soft);
}

.nf-empty-state__cta {
  margin-top: 1rem;
}

.nf-toggle-terminados {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--nf-border-soft);
  font-size: var(--fs-label);
}

.nf-toggle-terminados button {
  background: none;
  border: none;
  color: var(--nf-brand-500);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-label);
}

/* ─── Sidebar contextual de cliente (Lote 4.3) ─── */
.nf-sidebar-cliente-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nf-border-soft);
}

.nf-sidebar-cliente-section__link {
  text-transform: capitalize;
}

/* Lote 5.3 — auditoría carteras */
.stat-card .stat-value.ok { color: var(--nf-brand-500); }
.stat-card--muted { opacity: 0.65; }

/* ─── Toast notifications — Redactor B5.bis.7 ─── */
.nf-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  font-size: var(--fs-meta);
  z-index: var(--z-toast);
  animation: nf-toast-fade 4s ease forwards;
}
.nf-toast--error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.nf-toast--info  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
@keyframes nf-toast-fade {
  0%, 100% { opacity: 0; }
  10%, 85%  { opacity: 1; }
}

/* ─── D-ADJUNTOS-PROCESO — caja reutilizable de adjuntos del trámite ─── */
.adj-proceso-caja {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  font-family: var(--nf-sans);
  color: var(--nf-text-strong);
}
.adj-proceso-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.adj-proceso-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
  margin: 0;
}
.adj-proceso-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 .5rem;
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--nf-text-strong);
}
.adj-proceso-lista {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0 -.25rem .75rem;
}
.adj-proceso-loader,
.adj-proceso-vacio {
  padding: 1rem .5rem;
  text-align: center;
  font-size: var(--fs-meta);
  color: #6b7280;
}
.adj-proceso-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  border: 1px solid transparent;
}
.adj-proceso-item:hover {
  background: var(--nf-bg-app);
}
.adj-proceso-item.is-selected {
  background: rgba(16, 180, 74, .08);
  border-color: var(--nf-brand-500);
}
.adj-proceso-item.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.adj-proceso-check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--nf-brand-500);
  cursor: pointer;
}
.adj-proceso-body {
  flex: 1 1 auto;
  min-width: 0;
}
.adj-proceso-nombre {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--nf-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El nombre es un enlace cuando hay documento que abrir. `display:block` para
   conservar el recorte con puntos suspensivos de `.adj-proceso-nombre`, que en
   un `<a>` inline no se aplica.

   Distinguible en reposo, sin maraña (decisión de diseño, 12-09-2026): un
   subrayado fino en color de LÍNEA —no de marca— separado 3px del texto. Dice
   «esto se abre» sin gritarlo, y el que no abre queda en texto plano, así que
   la diferencia se ve de un vistazo y no hay que pasar por encima para saberlo.
   Al señalarlo, el subrayado pasa a tinta: el mismo trazo, más firme. */
a.adj-proceso-nombre {
  display: block;
  color: var(--nf-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--nf-line-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* El color del TEXTO se repite aquí a propósito. La global `a:hover` (0,1,1)
   pinta todo enlace con el verde de marca y gana a la clase sola (0,1,0): sin
   esto, al señalar el nombre se volvía verde —medido sobre el estilo computado,
   no sobre la regla— y el verde es para actuar, no para navegar. Es la misma
   razón por la que existe `.link-plain` unas líneas más arriba. */
a.adj-proceso-nombre:hover,
a.adj-proceso-nombre:focus-visible {
  color: var(--nf-text-strong);
  text-decoration-color: var(--nf-text-strong);
}
.adj-proceso-meta {
  font-size: var(--fs-micro);
  color: #6b7280;
  margin-top: .125rem;
}
/* V6 F5 · doble ancla — trámite de origen por fichero.
   Va como TERCERA LÍNEA dentro del cuerpo, no como cuarto elemento en la fila:
   el lateral son 320 px y meterlo en horizontal obliga a `flex-wrap` y deja el
   nombre comiéndose a sí mismo. Apilado no hace falta envolver nada. */
.adj-proceso-origen {
  display: inline-block;
  margin-top: .1875rem;
  font-size: var(--fs-micro);
  line-height: var(--lh-tight, 1.25);
  color: var(--nf-text-soft);
  padding: .0625rem .375rem;
  border-radius: var(--r-sm, .25rem);
  background: var(--nf-bg-app);
  border: 1px solid var(--nf-border-soft);
  cursor: help;
}
/* Neutral a propósito: que un fichero venga de un trámite anterior es lo
   normal en una renovación, no una anomalía. Se distingue, no se alarma. */
.adj-proceso-origen.is-anterior {
  border-style: dashed;
}
.adj-proceso-nota {
  margin: 0 0 .5rem;
  font-size: var(--fs-micro);
  line-height: var(--lh-normal, 1.45);
  color: var(--nf-text-main);
}
.adj-proceso-acciones {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--nf-border-soft);
  padding-top: .75rem;
}
.adj-proceso-enviar[disabled] {
  background: var(--nf-paper-2);
  border-color: var(--nf-line);
  color: var(--nf-ink-3);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.adj-proceso-enviar[disabled]:hover {
  background: var(--nf-paper-2);
  color: var(--nf-ink-3);
  box-shadow: none;
  transform: none;
}

/* ── Coste API panel ───────────────────────────────────────────────────────── */

.coste-api-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.coste-api-kpi {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.coste-api-kpi-label {
  color: var(--nf-ink-3);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.coste-api-kpi-value {
  color: var(--nf-ink);
  font-family: var(--nf-mono);
  font-size: var(--fs-page);
  font-weight: var(--fw-semibold);
}
.coste-api-kpi-meta {
  color: var(--nf-ink-3);
  font-size: var(--fs-meta);
}

.coste-api-section {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
}
.coste-api-section-title {
  font-size: var(--fs-section);
  margin: 0 0 var(--sp-3) 0;
  color: var(--nf-ink);
}

.coste-api-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.coste-api-table {
  width: 100%;
}
.coste-api-num {
  text-align: right;
  font-family: var(--nf-mono);
}
.coste-api-ts {
  font-family: var(--nf-mono);
  font-size: var(--fs-meta);
  color: var(--nf-ink-3);
}
.coste-api-error-msg {
  font-family: var(--nf-mono);
  font-size: var(--fs-label);
  color: var(--nf-ink-3);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coste-api-empty {
  color: var(--nf-ink-3);
  text-align: center;
  padding: var(--sp-4) 0;
}
.coste-api-footer {
  color: var(--nf-ink-3);
  font-size: var(--fs-meta);
  text-align: center;
  margin-top: var(--sp-4);
}

@media (max-width: 1100px) {
  .coste-api-kpis    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coste-api-grid-2  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .coste-api-kpis    { grid-template-columns: 1fr; }
}

/* Bloque Onboarding — estado por familia (ficha cliente, B2.1) */
.onb-familias { display: flex; flex-direction: column; gap: var(--sp-2); }
.onb-fila {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--nf-border-soft);
}
.onb-fila:last-child { border-bottom: none; }
.onb-familia { font-weight: var(--fw-medium); flex: 1 1 auto; }
.onb-fecha   { color: var(--nf-text-soft); font-size: var(--fs-meta); }
.onb-activar { margin-left: auto; }

/* Handoff onboarding en bandeja comercial (solo lectura, B2.1) */
.com-handoff        { display: inline-block; margin-left: var(--sp-2); font-size: var(--fs-micro); }
.com-handoff--ok    { color: var(--nf-brand-500); text-decoration: none; }
.com-handoff--ok:hover { text-decoration: underline; }
.com-handoff--pend  { color: var(--nf-text-soft); }

/* ── Carteras · asignación masiva (bulk panel) ──────────────────────────── */
.bulk-bar { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.bulk-bar .form-group { margin: 0; }
.bulk-search { position: relative; }
.bulk-results {
  position: absolute; z-index: var(--z-dropdown); top: 100%; left: 0; width: 100%;
  margin: var(--sp-2) 0 0; padding: 0; list-style: none;
  background: var(--nf-surface); border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2); box-shadow: var(--nf-shadow-md);
  max-height: 220px; overflow-y: auto;
}
.bulk-results:empty { display: none; }
.bulk-results li { padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--fs-meta); }
.bulk-results li:hover { background: var(--nf-bg-page); }

/* ── Carteras · subnavegación (tabs) ────────────────────────────────────── */
.cartera-subnav {
  display: flex; gap: var(--sp-1); flex-wrap: wrap;
  border-bottom: 1px solid var(--nf-border-soft); margin-bottom: var(--sp-4);
}
.cartera-tab {
  padding: var(--sp-2) var(--sp-3); color: var(--nf-text-soft); text-decoration: none;
  border-bottom: 2px solid transparent; font-size: var(--fs-meta); font-weight: var(--fw-medium);
}
.cartera-tab:hover { color: var(--nf-text-strong); }
.cartera-tab.active { color: var(--nf-brand-500); border-bottom-color: var(--nf-brand-500); }

/* ── Clientes V3 F2 — bloque "Ahora" de la ficha (.fah-*) ─────────────── */
.fah-bloque {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.fah-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.fah-titulo { font-family: var(--nf-display); font-size: var(--fs-section); margin: 0; }
.fah-contador { font-size: var(--fs-meta); color: var(--nf-text-soft); }
.fah-vacio { margin: var(--sp-2) 0 0; color: var(--nf-text-soft); }
.fah-lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.fah-item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--nf-text-strong);
}
.fah-item:hover { border-color: var(--nf-border-mid); background: var(--nf-bg-page); }
.fah-item--nos-toca { border-left: 3px solid var(--nf-brand-500); }
.fah-modulo { font-size: var(--fs-label); color: var(--nf-text-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.fah-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fah-item-titulo { font-weight: var(--fw-semibold, 600); }
.fah-item-meta { font-size: var(--fs-meta); color: var(--nf-text-main); }
.fah-bloqueado { color: var(--nf-warn-txt); font-weight: var(--fw-semibold, 600); }
.fah-chips { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.fah-pelota { font-size: var(--fs-label); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--nf-border-mid); color: var(--nf-text-main); }
.fah-pelota--despacho { background: var(--nf-brand-500); border-color: var(--nf-brand-500); color: var(--nf-text-on-dark); }
.fah-plazo { font-size: var(--fs-label); }
.fah-plazo--rojo  { color: var(--nf-error-txt); font-weight: var(--fw-semibold, 600); }
.fah-plazo--ambar { color: var(--nf-warn-txt); }
.fah-plazo--verde { color: var(--nf-text-soft); }
.fah-timeline { margin-top: var(--sp-3); font-size: var(--fs-meta); }
.fah-timeline summary { cursor: pointer; color: var(--nf-text-soft); }
.fah-timeline-lista { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fah-timeline-fecha { color: var(--nf-text-soft); margin-right: var(--sp-2); }
.fah-timeline-autor { color: var(--nf-text-soft); }
#gd-drive-toggle.activo { background: var(--nf-bg-page); border-color: var(--nf-border-mid); }

/* ── Espejo de almacenamiento cliente ↔ Drive · prefijo .esp-vinc- ───────────
   ADR-053. Hermano visual del bloque de arriba y a propósito: es la misma
   operación —declarar de dónde vienen los documentos de este cliente— con el
   otro extremo. Comparte disposición y componentes (`.alert-box`, `.badge`);
   lo único propio es el rótulo de estado del vínculo, que aquel no tiene. */
.esp-vinc { margin: var(--sp-4) 0; padding-top: var(--sp-4); border-top: 1px solid var(--nf-border-soft); }
.esp-vinc-titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; color: var(--nf-text-soft);
}
.esp-vinc-lista { display: flex; flex-direction: column; gap: var(--sp-2); }
.esp-vinc-item {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--nf-bg-page);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  font-size: var(--fs-dense);
}
.esp-vinc-item-nombre { font-weight: var(--fw-semibold); color: var(--nf-text-strong); }
.esp-vinc-item-flecha { color: var(--nf-text-faint); }
.esp-vinc-item-enlace {
  margin-left: auto;
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  text-decoration: none;
  border-bottom: 1px solid var(--nf-border-mid);
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esp-vinc-item-enlace:hover { color: var(--nf-brand-500); border-bottom-color: var(--nf-brand-500); }
.esp-vinc-badge { font-size: var(--fs-micro); }
.esp-vinc-motivo { flex-basis: 100%; color: var(--nf-text-soft); font-size: var(--fs-label); }

/* Línea de salud del espejo (VG2). Ocupa toda la fila bajo el vínculo: es la
   respuesta a «¿puedo fiarme de lo que veo en Drive?» y compite mal metida
   entre el nombre y los botones. Sin caja ni borde — no es una alerta, es un
   rótulo permanente, y una alerta que sale siempre deja de leerse. */
/* Rejilla de paneles de administración (/admin y /mi-perfil).
   `auto-fill` con mínimo en rem: la rejilla se adapta sola al número de
   tarjetas y al ancho, sin media queries que haya que mantener al añadir una. */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-3);
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.admin-card:hover { border-color: var(--nf-brand-500); }
.admin-card-titulo { font-weight: var(--fw-semibold); color: var(--nf-text-strong); }
.admin-card-desc   { font-size: var(--fs-label); color: var(--nf-text-soft); }

/* Panel de salud del espejo. El color va en el icono y en la cifra que se
   sale de umbral, no en la fila entera: una tabla teñida de rojo se lee peor
   que una tabla con un rojo dentro. */
.esp-adm-icono { font-weight: var(--fw-bold); color: var(--nf-ok-txt); width: 1.5rem; }
.esp-adm-num-mal .esp-adm-icono { color: var(--nf-error-txt); }
.esp-adm-num-mal { color: var(--nf-text-strong); }
.esp-adm-sub { margin-top: calc(var(--sp-1) * -1); margin-bottom: var(--sp-3); font-size: var(--fs-label); }

/* Las tablas no muerden: cada una scrollea DENTRO de su tarjeta en vez de
   empujar la página a lo ancho, y las columnas cortas se declaran para que el
   ancho sobrante se lo lleve el texto y no la fecha. */
.esp-adm-tabla { overflow-x: auto; }
.esp-adm-nowrap { white-space: nowrap; }
.esp-adm-c-icono  { width: 2rem; }
.esp-adm-c-estado { width: 7rem; }
.esp-adm-c-num    { width: 6rem; text-align: right; }
.esp-adm-c-valor  { width: 12rem; }
.esp-adm-c-umbral { width: 10rem; }
.esp-adm-c-fecha  { width: 11rem; }
.esp-adm-num-celda { text-align: right; font-family: var(--nf-mono); white-space: nowrap; }

/* Nombre de documento y motivo: una línea, con puntos suspensivos y el texto
   completo en el `title`. Un nombre largo partido en cuatro líneas descuadra
   la fila entera y hace ilegible todo lo demás. */
.esp-adm-nombre, .esp-adm-motivo {
  max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esp-adm-motivo { max-width: 30rem; font-size: var(--fs-label); }

/* Las secciones que piden ACCIÓN se distinguen de las que sólo informan. Sin
   esto, mirar la página no dice qué hay que hacer y qué hay que leer. */
.card-accion { border-left: 3px solid var(--nf-warn-borde); }

.page-header-acciones { display: flex; gap: var(--sp-2); }

/* La carpeta espejada: se nombra, no se enlaza. El enlace aparece sólo si
   alguien pulsa «ver enlace» — un enlace compartido a la vista es un acceso a
   la carpeta del cliente copiable por cualquiera que pase por la pantalla. */
.esp-vinc-item-carpeta { font-family: var(--nf-mono); font-size: var(--fs-label); color: var(--nf-text-main); }
.esp-vinc-ver-enlace {
  background: none; border: 0; padding: 0;
  font-size: var(--fs-micro); color: var(--nf-text-soft);
  text-decoration: underline; cursor: pointer;
}
.esp-vinc-ver-enlace:hover { color: var(--nf-brand-500); }

/* El control de escritura ocupa su propia fila: es la decisión con más
   consecuencias del bloque y no puede leerse como un botón más de la barra. */
.esp-vinc-escritura {
  flex-basis: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-2);
  font-size: var(--fs-label);
}
.esp-vinc-escritura-si { color: var(--nf-text-strong); }
.esp-vinc-escritura-no { color: var(--nf-text-soft); }

.esp-vinc-salud {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--nf-text-soft);
}
.esp-vinc-salud-icono { font-weight: var(--fw-bold); }
/* El color va SOLO en el icono. Teñir la frase entera de rojo convierte cada
   ficha con un vínculo parado en una pantalla que grita; el ojo encuentra el
   símbolo igual de rápido y el texto se sigue leyendo. */
.esp-vinc-salud-ok       .esp-vinc-salud-icono { color: var(--nf-ok-txt); }
.esp-vinc-salud-atencion .esp-vinc-salud-icono { color: var(--nf-warn-txt); }
.esp-vinc-salud-parado   .esp-vinc-salud-icono { color: var(--nf-error-txt); }
/* Los dos que piden algo sí llevan el texto marcado: no basta con el símbolo
   cuando lo que hay detrás es trabajo pendiente o un espejo caído. */
.esp-vinc-salud-atencion,
.esp-vinc-salud-parado { color: var(--nf-text-strong); }

.esp-vinc-abrir {
  margin-top: var(--sp-3);
  background: none; border: 0; padding: 0;
  color: var(--nf-text-soft);
  font-family: var(--nf-sans);
  font-size: var(--fs-label);
  cursor: pointer;
  border-bottom: 1px solid var(--nf-border-mid);
}
.esp-vinc-abrir:hover { color: var(--nf-brand-500); border-bottom-color: var(--nf-brand-500); }

.esp-vinc-form  { margin-top: var(--sp-4); }
.esp-vinc-intro {
  margin: 0 0 var(--sp-3);
  color: var(--nf-text-main);
  font-size: var(--fs-dense);
  max-width: var(--nf-content-narrow);
}
.esp-vinc-campo { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.esp-vinc-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
}
.esp-vinc-input,
.esp-vinc-select {
  flex: 1 1 22rem;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--nf-border-soft);
  border-radius: var(--r-2);
  background: var(--nf-surface);
  color: var(--nf-text-strong);
  font-family: var(--nf-sans);
  font-size: var(--fs-dense);
}
.esp-vinc-input { font-family: var(--nf-mono); font-size: var(--fs-meta); }
.esp-vinc-input:focus,
.esp-vinc-select:focus { outline: none; border-color: var(--nf-brand-500); }

.esp-vinc-destino { margin-bottom: var(--sp-3); }
.esp-vinc-salida  { margin-top: var(--sp-4); }

/* La tarjeta del veredicto: qué se va a espejar contra qué, antes de decidir. */
.esp-vinc-tarjeta {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4);
  background: var(--nf-surface);
  border: 1px solid var(--nf-border-mid);
  border-radius: var(--r-2);
  margin-bottom: var(--sp-3);
}
.esp-vinc-tarjeta-cab { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.esp-vinc-tarjeta-nombre {
  font-family: var(--nf-display);
  font-size: var(--fs-section);
  color: var(--nf-text-strong);
}
.esp-vinc-tarjeta-meta { color: var(--nf-text-soft); font-size: var(--fs-label); }
.esp-vinc-acciones { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Interruptor del espejo en el formulario de edición de la ficha · .esp-flag- */
.esp-flag-check {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-dense); color: var(--nf-text-strong);
  cursor: pointer;
}
.esp-flag-check input[disabled] { cursor: not-allowed; }
.esp-flag-check input[disabled] + span { color: var(--nf-text-soft); }
.esp-flag-ayuda {
  margin: var(--sp-2) 0 0;
  color: var(--nf-text-soft);
  font-size: var(--fs-label);
  max-width: var(--nf-content-narrow);
}

/* ── F3 Notificaciones — card Servicios contratados (Sage) · prefijo .fsage- ── */
.fsage { margin-top: var(--sp-5); }
.fsage-kicker {
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; color: var(--nf-text-soft); margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2);
}
.fsage-codigo { color: var(--nf-text-faint); }
.fsage-vacio, .fsage-meta { font-size: var(--fs-meta); color: var(--nf-text-soft); margin: var(--sp-2) 0; }
.fsage-facturado { font-size: var(--fs-meta); margin: var(--sp-3) 0 var(--sp-2); }
.fsage-mora { font-size: var(--fs-meta); font-weight: var(--fw-semibold); margin: 0; }
.fsage-mora--ok { color: var(--nf-ok-txt); }
.fsage-mora--ambar { color: var(--nf-warn-txt); }
.fsage-mora--roja { color: var(--nf-error-txt); }
.fsage-metodo { font-size: var(--fs-micro); color: var(--nf-text-faint); margin: var(--sp-1) 0 0; }
.fsage-desglose { font-size: var(--fs-label); color: var(--nf-text-soft); margin: var(--sp-2) 0; }
.fsage-desglose ul { list-style: none; padding-left: var(--sp-3); margin: var(--sp-2) 0; }
.fsage-aprox { color: var(--nf-text-faint); font-size: var(--fs-micro); }
.fsage-suplidos { font-size: var(--fs-meta); color: var(--nf-text-main); margin: var(--sp-2) 0 0; }

/* F3.2 — tab Servicios (Sage): derivación, procedencia y calibración C4 */
.fsage-derivacion { cursor: help; color: var(--nf-text-faint); }
.fsage-ejercicio { margin-top: var(--sp-4); }
.fsage-ejercicio-titulo { display: flex; gap: var(--sp-3); align-items: baseline; }
.fsage-nota { font-size: var(--fs-label); color: var(--nf-text-faint); margin-top: var(--sp-3); }
.fsage-mora--reciente { color: var(--nf-warn-txt); }
.fsage-reciente-tag { color: var(--nf-warn-txt); font-size: var(--fs-micro); }
.fsage-fuente { font-size: var(--fs-label); color: var(--nf-text-faint); margin-top: var(--sp-3); cursor: help; }
.fsage-multititular { font-size: var(--fs-label); color: var(--nf-warn-txt); cursor: help; }


/* ═══════════════════════════════════════════════════════════════
   BANDA OPERATIVA — pieza compartida (F0, 2026-08-19)

   Sustituye al hero de portada como sitio donde se cuentan las
   urgencias del día. Es OPCIONAL: una vista la pinta solo cuando
   hay urgencias reales que contar. La cabecera común de página
   (.ph) es clara y compacta y va siempre.

   Por defecto es clara («niebla»): superficie tematizada un nivel
   más honda que el canvas, con el CTA invertido a tinta. Bajo
   [data-depth="oscuro"] recupera el degradado hero del repo.

   Ninguna vista la consume todavía — llega con F1 (piloto Fiscal).
   ═══════════════════════════════════════════════════════════════ */
.band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-4);
  color: var(--nf-ink);
  background: linear-gradient(120deg, var(--nf-band-from), var(--nf-band-to));
}
.band-kicker {
  font-family: var(--nf-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-extra);
  color: var(--nf-band-kicker);
  margin: 0 0 var(--sp-2);
}
.band h4 {
  font-family: var(--nf-display);
  font-size: var(--fs-hero-text);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}
.band p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--nf-ink-2);
  max-width: 46ch;
}
.band-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.hchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--nf-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
}
.hchip.err  { background: var(--nf-coral-soft);  color: var(--nf-coral-deep); }
.hchip.warn { background: var(--nf-amber-soft);  color: var(--nf-amber-deep); }
.hchip.info { background: var(--nf-cobalt-soft); color: var(--nf-cobalt-deep); }
.hchip.ok   { background: var(--nf-brand-soft);  color: var(--nf-brand-deep); }
.band-num { text-align: right; }
.band-num b {
  display: block;
  font-family: var(--nf-display);
  font-size: var(--fs-hero-num);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.03em;
  line-height: var(--lh-1);
  font-variant-numeric: tabular-nums;
}
.band-num span {
  font-family: var(--nf-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--nf-ink-3);
}
/* CTA invertido a tinta — sobre banda clara */
.btn-on-dark { background: var(--nf-ink); color: var(--nf-text-on-dark); }

/* Profundidad «bruma»: la banda recupera el degradado hero oscuro y su
   vocabulario de chips, que ya está tematizado por --nf-hero-chip-*. */
[data-depth="oscuro"] .band {
  color: var(--nf-text-on-dark);
  background: linear-gradient(120deg,
    var(--nf-hero-bg-from), var(--nf-hero-bg-via1) 38%,
    var(--nf-hero-bg-via2) 68%, var(--nf-hero-bg-to));
}
[data-depth="oscuro"] .band p        { color: rgba(255,255,255,.72); }
[data-depth="oscuro"] .band-kicker   { color: var(--nf-brand-glow); }
[data-depth="oscuro"] .band-num span { color: rgba(255,255,255,.6); }
[data-depth="oscuro"] .hchip.err  { background: var(--nf-hero-chip-err-bg);  color: var(--nf-hero-chip-err-fg); }
[data-depth="oscuro"] .hchip.warn { background: var(--nf-hero-chip-warn-bg); color: var(--nf-hero-chip-warn-fg); }
[data-depth="oscuro"] .hchip.info { background: var(--nf-hero-chip-info-bg); color: var(--nf-hero-chip-info-fg); }
[data-depth="oscuro"] .hchip.ok   { background: var(--nf-hero-chip-ok-bg);   color: var(--nf-hero-chip-ok-fg); }
[data-depth="oscuro"] .btn-on-dark { background: var(--nf-surface); color: var(--nf-ink); }

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; gap: var(--sp-4); }
  .band-num { text-align: left; }
}

/* ── Ficha · botón de sincronización ERP (E1 adenda C) ─────────────────── */
.ferp-sync {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.ferp-sync-estado {
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

/* Preflight del espejo: el veredicto de la última comprobación de igualdad.
   Verde y ámbar del sistema — no hay literales aquí (ADR-053 §D18). */
.esp-vinc-preflight {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}
.esp-vinc-preflight-ok strong { color: var(--nf-ok-600, var(--nf-brand-500)); }
.esp-vinc-preflight-ko strong { color: var(--nf-warn-600, var(--nf-text-strong)); }

/* Freno del espejo: lo retenido se ve, no se deduce de que no pase nada. */
.esp-vinc-freno {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--nf-warn-500, var(--nf-border-mid));
  background: var(--nf-bg-page);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
}

/* Lo que el cliente quitó de Dropbox y sigue en Drive: asimetría por diseño,
   invisible hasta que se dice (ADR-053 §D15). */
.esp-vinc-retirados {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-meta);
  color: var(--nf-text-soft);
}

/* Régimen del espejo (ADR-053 §D19). Los dos estados se distinguen a simple
   vista porque significan cosas muy distintas para la carpeta del cliente. */
.esp-vinc-regimen {
  margin: var(--sp-2) 0;
  padding: var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--fs-meta);
  color: var(--nf-text-main);
  background: var(--nf-bg-page);
  border-left: 3px solid var(--nf-border-mid);
}
.esp-vinc-regimen-sync { border-left-color: var(--nf-info-borde); }
.esp-vinc-regimen-espejo { border-left-color: var(--nf-brand-500); }
.esp-vinc-regimen-titulo { margin: 0 0 var(--sp-2); }
.esp-vinc-regimen-cifra { margin: var(--sp-1) 0 0; color: var(--nf-text-soft); }
.esp-vinc-regimen-pie { margin: var(--sp-2) 0 0; color: var(--nf-text-soft); }
.esp-vinc-barra {
  display: block;
  height: 6px;
  border-radius: var(--r-1);
  background: var(--nf-border-soft);
  overflow: hidden;
}
.esp-vinc-barra-hecho {
  display: block;
  height: 100%;
  background: var(--nf-brand-500);
  transition: width var(--duration-2, .3s) var(--ease-out, ease);
}
/* El censo es un tramo distinto de la igualación —medir, no copiar— y se pinta
   distinto para que las dos barras no se lean como la misma cosa a medias. */
/* `--nf-info-500` no existe: esta barra se quedaba SIN FONDO —el `var()`
   resuelve a vacío y la declaración se descarta entera— y la de arriba se
   salvaba sólo por su fallback. Las dos al vocabulario semántico. */
.esp-vinc-barra-censo { background: var(--nf-info-borde); }
.esp-vinc-regimen-espera { border-left-color: var(--nf-border-mid); }

/* Módulo dueño de una unidad interna, bajo su desplegable de tipo. Es metadato,
   no dato: mismo peso visual que el resto de lo secundario de la tabla. */
.doc-tipo-dueno {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--nf-text-soft);
}
/* Validación en el campo (17-09-2026). El mensaje va DONDE está el problema:
   un emergente obliga a leerlo, cerrarlo y luego buscar qué campo falta. */
.nf-campo-err {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--nf-error-600, var(--nf-text-strong));
}
[aria-invalid="true"] {
  border-color: var(--nf-error-600, var(--nf-border-mid));
}


/* ── Caja de comunicación con el cliente, COMPACTA (2026-09-18) ─────────────
   Superficie TRANSVERSAL: la usan Firmas (ficha del trámite y wizard),
   Comercial (ficha V6) y Jurídico. Se toca con eso delante.

   Medido antes: 616 px de alto en la ficha del trámite, repartidos en
   resumen 156 · formulario de correo 128 · acciones 95 · dos títulos. Todo
   apilado en vertical dentro de una caja de 600 px de ancho.

   Qué cambia: SÓLO la disposición. Mismos campos, mismos botones, misma
   conducta — crear el problema con su asunto propuesto y su asignado,
   vincular a un ticket existente, y pedir el correo del cliente cuando no
   hay. El campo de correo sigue apareciendo sólo cuando falta: eso ya lo
   decidía el JS y no se toca.

   Sólo a partir de 1200 px: en estrecho una banda en línea no cabe, y el uso
   dentro del sidebar de Firmas tiene sus propias reglas, más específicas, que
   siguen ganando. */
@media (min-width: 1200px) {
  /* Titular · correo · asunto · asignado.
     En REJILLA y no en `flex`: en flex cada `dt` y cada `dd` envuelven POR
     SEPARADO —una etiqueta puede cerrar una fila y su valor abrir la
     siguiente—, que es justo lo que no puede pasar con un par. Aquí el par
     ocupa dos celdas de la misma fila y no se puede partir.

     PROBADO Y DESCARTADO antes: `grid-auto-flow: column` con etiqueta arriba y
     valor debajo. Impide partir el par igual, pero a 598 px de ancho SUBE a
     150 px porque cuatro campos de lado no caben y el texto envuelve dentro de
     cada celda. */
  .caso-preparar-resumen {
    display: grid;
    /* `auto` y no `1fr`: con `1fr` las dos columnas de valor se repartían el
       sobrante a partes iguales y «FVE TITULAR CON DOC» y «Tú (puedes
       cambiarlo después)» envolvían a dos líneas —39 px cada una, medidas—.
       Con `auto` cada columna se ajusta a lo que lleva. */
    grid-template-columns: max-content auto max-content auto;
    align-items: center;
    /* 2 px entre filas y no 8: con el par inseparable y el asunto en fila
       propia son CUATRO filas —titular+correo, etiqueta del asunto, campo del
       asunto, asignado— y cada punto de hueco se paga tres veces. Medido: con
       `--sp-2` la banda salía a 147 px y la caja se pasaba del techo de 280
       sin correo; con 4 px, a 113. Bajarlo a 2 devuelve 6 de los 29 que costó
       la fila nueva, y los devuelve a los OCHO consumidores, no sólo a
       Firmas. */
    gap: 2px var(--sp-3);
    max-width: none;
    /* Relleno vertical mínimo: las etiquetas se comen 316 px de ancho —la
       columna se dimensiona por la más larga— y eso ya obliga a que los dos
       valores de la primera fila envuelvan. Lo que queda por recortar es el
       hueco, no el texto. */
    padding: var(--sp-1) var(--sp-3);
  }
  .caso-preparar-resumen dt { padding-top: 0; }
  /* El campo del asunto, con el alto de una línea y no el de un formulario. */
  .caso-preparar-resumen .caso-preparar-asunto-input { padding: 3px var(--sp-2); }

  /* El asunto, en FILA PROPIA Y A ANCHO COMPLETO — etiqueta en una fila, campo
     en la siguiente, las dos de borde a borde (2026-09-20).

     Antes ocupaba la fila pero arrancaba en la columna 2, o sea después de la
     columna de etiquetas, que la dimensiona la más larga («CORREO DEL
     CLIENTE», 144 px). Con eso el campo se quedaba en 507 px en el wizard y
     471 en la ficha para un asunto que MIDE 526, así que **el asunto propuesto
     se truncaba en las dos pantallas**. No era impresión de la captura:
     `scrollWidth > clientWidth`, 19 px de recorte en el wizard y 55 en la
     ficha, y el asunto es justo el campo que hay que leer entero antes de
     crear el ticket.

     Con la fila entera el campo pasa a 663 / 627 y no se corta.

     Cuesta una fila —la etiqueta ya no comparte con el campo—, y esa fila se
     devuelve en el marco de la caja de Firmas (`notas-equipo.css`), no aquí:
     el recorte de un consumidor no se paga en la superficie de los ocho. */
  .caso-preparar-resumen dt:has(label[for="caso-preparar-asunto-input"]) { grid-column: 1 / -1; }
  .caso-preparar-resumen dd:has(.caso-preparar-asunto-input) { grid-column: 1 / -1; }
  /* El último valor llega hasta el final: su fila no tiene con quién
     compartir y así no envuelve. */
  .caso-preparar-resumen dd:last-of-type { grid-column: 2 / -1; }
  .caso-preparar-asunto-input { min-width: 180px; }

  /* El correo, etiqueta y campo en la misma línea, con su frase detrás. */
  .caso-preparar-email-form {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
  }
  .caso-preparar-email-label { flex-direction: row; align-items: center; }
  .caso-preparar-email-hint { margin: 0; flex: 1 1 240px; }

  /* El botón y el enlace de vincular, en la misma fila. */
  .caso-preparar-acciones {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: none;
    gap: var(--sp-2) var(--sp-4);
  }
  /* Sin esto el `<details>` ocupa el 100 % y el enlace se va a su propia
     fila: el botón y «o vincular a un ticket existente» tienen que ir juntos. */
  .caso-preparar-vincular { width: auto; }
  /* Y su formulario, cuando se abre, a lo ancho por debajo. */
  .caso-preparar-vincular[open] { width: 100%; }

  /* La banda respira menos: cuatro pares y un campo en 526 px se parten en
     tres filas si cada etiqueta lleva su interlineado de bloque. */
  .caso-preparar-resumen dt { font-size: var(--fs-micro); letter-spacing: 0.03em; }
  .caso-preparar-resumen dd { font-size: var(--fs-label); }
  .caso-preparar-email-hint { font-size: var(--fs-micro); }

  /* ── El cromo anidado ────────────────────────────────────────────────────
     Medido: TRES cajas una dentro de otra, cada una con 20 px arriba y abajo,
     más los márgenes entre títulos. Son ~120 px de la altura que no dicen
     nada. Aquí se aprietan; los datos y las acciones no se tocan. */
  .caso-preparar-bloque { padding: var(--sp-3); }
  .caso-preparar-titulo { margin-bottom: var(--sp-2); }
  .caso-preparar-resumen { margin-bottom: var(--sp-2); }
  .caso-preparar-email-form { margin-bottom: var(--sp-2); }
}

/* ── Explicación y definición en pantalla · prefijo .nf- ─────────────────────
 *
 * «Toda vista se explica a sí misma» (dictamen GD-2, decisión 1). Nació en el
 * Gestor Documental como `.gd-explica` / `.gd-def` y resultó no ser suyo: a
 * 2026-09-18 lo usan Comercial (23 veces), Fichas, Buscar y las cinco vistas de
 * Documentos. Un componente que usan cinco módulos no es de uno.
 *
 * Aquí está la ÚNICA definición. Comercial ya consume estas clases; el Gestor
 * Documental conserva `.gd-explica` / `.gd-def` como alias en `gd-comun.css`
 * hasta migrar sus vistas, y entonces aquellas se retiran.
 *
 * Por qué importó: Comercial las usaba sin cargar `gd-comun.css`, así que en
 * sus pantallas el componente sólo existía por un override propio e INCOMPLETO
 * —`.gd-explica b` no estaba—, y el negrita salía sin su token de color. Una
 * regla que falta no lanza nada: el navegador pinta lo que queda y parece una
 * decisión de diseño. Guard: `tests/unit/ui/prefijo-css-modular.test.js`.
 *
 * Valores tal cual los dejó GD-2. Cero literales: sólo tokens.
 */

/* La línea bajo el título: qué hace el sistema aquí y qué te toca a ti. Fija,
   no un aviso — por eso no lleva color de estado ni icono. Si hay que
   destacarla es que la pantalla no se explica, y el arreglo es el texto. */
.nf-explica {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
  /* 2px: el mismo filete que `.nfm-cons` del canon. No hay token de grosor de
     filete en el sistema; el que hay es el del color. */
  border-left: 2px solid var(--nf-line-strong);
  font-size: var(--fs-meta);
  color: var(--nf-ink-2);
  max-width: 78ch;                 /* una línea que no se lee no explica nada */
}
.nf-explica b { color: var(--nf-ink); font-weight: var(--fw-semibold); }

/* Término con su definición al lado. Para contadores y jerga. Va DONDE aparece
   el término, no en un manual — un glosario aparte es un sitio al que nadie va
   desde la pantalla en la que le surge la duda. */
.nf-def {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  line-height: var(--lh-normal);
  color: var(--nf-ink-3);
}
.nf-def b { color: var(--nf-ink-2); font-weight: var(--fw-medium); }

/* Historial del ciclo de vida en la tarjeta de estado. Lista, no tabla: son
   cuatro datos por fila y una tabla de cuatro columnas en una tarjeta estrecha
   obliga a desplazar en horizontal. */
.ws-ciclo-hist { margin-top: var(--sp-4); border-top: 1px solid var(--nf-border-soft); padding-top: var(--sp-3); }
.ws-ciclo-hist-lista { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.ws-ciclo-hist-lista li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--nf-border-soft); }
.ws-ciclo-hist-lista li:last-child { border-bottom: 0; }
.ws-ciclo-hist-cab { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-label); }
.ws-ciclo-hist-pie { display: block; margin-top: var(--sp-1); color: var(--nf-text-soft); font-size: var(--fs-micro); }
/* Mono propio y no `.ob-mono`: la ficha no carga el CSS del módulo de
   onboarding, así que aquella clase existe y aquí no se aplicaría. */
.ws-ciclo-hist-ts,
.ws-ciclo-hist-tr { font-family: var(--nf-mono); }

/* Salida del card de onboarding hacia el plan. Va en la cabecera porque es
   navegación, no una acción sobre los datos de abajo. */
.onb-ver-plan {
  margin-left: auto;
  font-size: var(--fs-meta);
  color: var(--nf-brand-500);
  text-decoration: none;
  white-space: nowrap;
}
.onb-ver-plan:hover { text-decoration: underline; }
/* El card que no pudo cargar. Se ENSEÑA con su motivo en vez de desaparecer:
   una ausencia no se reporta, y un fallo que nadie reporta no se arregla. */
.onb-fallo { color: var(--nf-text-soft); font-size: var(--fs-meta); }

/* El veredicto del control del ERP en la ficha: misma rejilla que `.onb-fila`
   pero separado por una línea, porque no es una familia contratada — es el
   resumen de lo que el plan comprueba sobre el ERP. */
.onb-veredicto {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 2px solid var(--nf-border-mid);
}