/* ════════════════════════════════════════════════════════════════
       v2c Contabilidad IA — Design System (V2C brand: minimal B&W editorial)
       Los nombres de tokens se conservan por compatibilidad con las
       plantillas; los VALORES siguen la guía de marca V2C.
       ════════════════════════════════════════════════════════════════ */
    :root {
      /* Brand — el "azul" histórico ahora es el negro V2C (accent) */
      --v2c-blue:    #0E0E0E;
      --v2c-blue-d:  #000000;
      --v2c-blue-l:  #F4F4F2;
      --v2c-teal:    #5A5A58;
      --v2c-purple:  #3A3A38;

      /* Neutrals (escala de grises V2C) */
      --slate-50:  #F8F8F6;
      --slate-100: #F4F4F2;
      --slate-200: #ECECEA;
      --slate-300: #DEDEDC;
      --slate-400: #A9A9A7;
      --slate-500: #7A7A78;
      --slate-600: #5A5A58;
      --slate-700: #3A3A38;
      --slate-800: #1F1F1F;
      --slate-900: #0E0E0E;
      --slate-950: #000000;

      /* Surface */
      --v2c-dark:    #0E0E0E;
      --v2c-mid:     #1F1F1F;
      --v2c-text:    #1F1F1F;
      --v2c-muted:   #7A7A78;
      --v2c-border:  #ECECEA;
      --v2c-bg:      #F4F4F2;
      --v2c-surface: #ffffff;

      /* Semantic — funcionales, en tono contenido */
      --danger:   #B42318;
      --warning:  #B54708;
      --success:  #067647;
      --info:     #3A3A38;

      /* Shadows — la marca no usa sombras: estructura por bordes finos */
      --shadow-xs: none;
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --shadow-xl: 0 16px 48px rgba(14,14,14,.16);

      /* Radii — geometría contenida, editorial */
      --r-sm: 4px;
      --r-md: 6px;
      --r-lg: 8px;
      --r-xl: 10px;
      --r-2xl: 12px;

      /* Alias --sl-N -- 5 plantillas (dashboard, crm, ventas, logistica,
         compras_pedidos) referencian este prefijo corto en vez de
         --slate-N; sin este alias esos `var(--sl-500)` etc. eran
         referencias a variables inexistentes (bug real preexistente, no
         introducido aquí). Un alias aquí los deja funcionando sin tocar
         cada plantilla una a una. */
      --sl-50:  var(--slate-50);
      --sl-100: var(--slate-100);
      --sl-200: var(--slate-200);
      --sl-300: var(--slate-300);
      --sl-400: var(--slate-400);
      --sl-500: var(--slate-500);
      --sl-600: var(--slate-600);
      --sl-700: var(--slate-700);
      --sl-800: var(--slate-800);
      --sl-900: var(--slate-900);
    }

    /* ── Reset / base ─────────────────────────────────────────────────── */
    *  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    html, body { background: var(--v2c-bg); }
    body {
      font-size: .875rem;
      font-family: 'Montserrat', Arial, Helvetica, system-ui, sans-serif;
      color: var(--v2c-text);
      min-height: 100vh;
    }
    h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; font-weight: 700; }
    .fw-bold, b, strong { font-weight: 700 !important; }
    .num, .tabular { font-variant-numeric: tabular-nums; }

    /* ── Scrollbar refinement ─────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 8px; border: 2px solid var(--v2c-bg); }
    ::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

    /* ════════════════════════════════════════════════════════════════
       Sidebar — negro V2C, plano, editorial (estructura inspirada en
       Tabler/AdminLTE: sidebar fijo con secciones agrupadas y separadores
       sutiles -- ambos son Bootstrap puro, igual que esta app, así que la
       idea estructural se adapta directamente sin portar su código).
       ════════════════════════════════════════════════════════════════ */
    .app-shell { display: flex; min-height: 100vh; align-items: stretch; }

    .sidebar {
      width: 252px; flex-shrink: 0;
      background: var(--v2c-dark); color: #fff;
      display: flex; flex-direction: column;
      position: fixed; top: 0; left: 0; bottom: 0;
      z-index: 1040; overflow: hidden;
      transition: transform .2s ease;
    }
    .sidebar-brand {
      display: flex; align-items: center; gap: .6rem;
      padding: 1.1rem 1.15rem; flex-shrink: 0;
      color: #fff; text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .sidebar-brand:hover { color: #fff; }
    .sidebar .v2c-logo { height: 18px; width: auto; display: block; color: #fff; flex-shrink: 0; }
    .sidebar-brand .sep { color: rgba(255,255,255,.25); font-weight: 400; }
    .sidebar-brand .app-name { color: rgba(255,255,255,.75); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; line-height: 1.2; }

    .sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .65rem; }
    .sidebar-nav::-webkit-scrollbar { width: 6px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 6px; }

    .sidebar-section + .sidebar-section { margin-top: 1.1rem; }
    .sidebar-section-label {
      font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
      color: rgba(255,255,255,.35); padding: 0 .6rem; margin-bottom: .35rem;
    }
    .sidebar-link {
      display: flex; align-items: center; gap: .65rem;
      font-size: .82rem; font-weight: 500;
      padding: .5rem .6rem; margin-bottom: .1rem;
      border-radius: var(--r-md);
      color: rgba(255,255,255,.65) !important;
      text-decoration: none;
      transition: background .12s ease, color .12s ease;
      white-space: nowrap;
    }
    .sidebar-link i { font-size: 1rem; opacity: .85; width: 1.1rem; text-align: center; flex-shrink: 0; }
    .sidebar-link:hover { color: #fff !important; background: rgba(255,255,255,.07); }
    .sidebar-link.active { color: var(--v2c-dark) !important; background: #fff; font-weight: 600; }
    .sidebar-link.active i { opacity: 1; }
    .sidebar-link .chevron { margin-left: auto; font-size: .68rem !important; opacity: .5; transition: transform .15s ease; }
    .sidebar-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
    .sidebar-chat-badge { background: var(--danger); color: #fff; font-size: .66rem; font-weight: 700; line-height: 1; padding: .28rem .45rem; border-radius: 999px; min-width: 1.3rem; text-align: center; }
    .sidebar-chat-badge.mencion { background: #EA580C; }

    .sidebar-sublink {
      display: flex; align-items: center; gap: .6rem;
      font-size: .78rem; font-weight: 500;
      padding: .42rem .6rem .42rem 1.85rem;
      margin-bottom: .05rem;
      border-radius: var(--r-md);
      color: rgba(255,255,255,.55) !important;
      text-decoration: none;
      transition: background .12s ease, color .12s ease;
      white-space: nowrap;
    }
    .sidebar-sublink i { font-size: .85rem; opacity: .8; width: 1rem; text-align: center; flex-shrink: 0; }
    .sidebar-sublink:hover { color: #fff !important; background: rgba(255,255,255,.07); }
    .sidebar-sublink.active { color: #fff !important; background: rgba(255,255,255,.12); font-weight: 600; }

    .sidebar-footer {
      flex-shrink: 0; padding: .7rem .65rem;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .sidebar-footer .dropdown-toggle::after { display: none; }
    .sidebar-user {
      display: flex; align-items: center; gap: .55rem; width: 100%;
      padding: .5rem .55rem; border-radius: var(--r-md);
      color: rgba(255,255,255,.8) !important; background: transparent; border: none;
      font-size: .8rem; font-weight: 600; text-align: left;
    }
    .sidebar-user:hover { background: rgba(255,255,255,.07); color: #fff !important; }
    .sidebar-user-avatar {
      width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12);
      display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0;
    }
    .sidebar-user-name { overflow: hidden; text-overflow: ellipsis; }

    /* Topbar móvil -- solo visible bajo el breakpoint donde el sidebar se
       oculta (ver @media abajo). Botón hamburguesa + marca, sticky. */
    .topbar {
      display: none; align-items: center; gap: .75rem;
      background: var(--v2c-dark); color: #fff;
      padding: .65rem 1rem; position: sticky; top: 0; z-index: 1030;
    }
    .topbar .v2c-logo { height: 16px; width: auto; color: #fff; }
    .sidebar-toggle {
      background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff;
      border-radius: var(--r-sm); width: 34px; height: 34px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    }
    .sidebar-backdrop {
      display: none; position: fixed; inset: 0; background: rgba(14,14,14,.5); z-index: 1035;
    }

    .app-content { flex: 1; min-width: 0; margin-left: 252px; }

    @media (max-width: 991.98px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.is-open { transform: translateX(0); }
      .app-content { margin-left: 0; }
      .topbar { display: flex; }
      .sidebar-backdrop.is-open { display: block; }
    }

    /* ════════════════════════════════════════════════════════════════
       Cards & containers — plano, estructura por bordes finos
       ════════════════════════════════════════════════════════════════ */
    .card {
      border: 1px solid var(--v2c-border);
      border-radius: var(--r-lg);
      box-shadow: none;
      background: var(--v2c-surface);
    }
    .card-header {
      background: var(--v2c-surface);
      border-bottom: 1px solid var(--v2c-border);
      font-weight: 600;
      font-size: .85rem;
      padding: .8rem 1.15rem;
      border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    }

    .stat-card {
      border: 1px solid var(--v2c-border);
      border-radius: var(--r-lg);
      border-left: 3px solid var(--v2c-dark);
      transition: border-color .15s;
      background: var(--v2c-surface);
    }
    .stat-card:hover { border-color: var(--slate-400); }
    .stat-card.critica { border-left-color: var(--danger); }
    .stat-card.alta    { border-left-color: var(--warning); }
    .stat-card.suma    { border-left-color: var(--slate-500); }

    /* KPI cards — flat, tinte mínimo solo para estados semánticos */
    .kpi-card {
      border-radius: var(--r-lg);
      padding: 1.1rem 1.25rem;
      transition: border-color .15s;
      height: 100%;
      border: 1px solid var(--v2c-border);
      background: var(--v2c-surface);
    }
    .kpi-card:hover { border-color: var(--slate-400); }
    .kpi-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .35rem; color: var(--v2c-muted); }
    .kpi-value { font-size: clamp(1.05rem, 1.9vw, 1.55rem); font-weight: 700; line-height: 1.05; margin-bottom: .2rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Bug real visto en producción 10/09/2026 (móvil, /inventario): un
       importe grande ("4.205.812,97 €") se cortaba con "..." dentro de la
       tarjeta -- en pantallas estrechas se prefiere partir el número a una
       segunda línea antes que ocultar parte de la cifra. Afecta a TODAS
       las tarjetas KPI de la plataforma que usan esta clase compartida. */
    @media (max-width: 576px) {
      .kpi-value { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
    }
    /* Aviso de que una tabla ancha se puede desplazar horizontalmente --
       hallazgo real de la auditoría visual del 10/09/2026 (móvil): varias
       tablas se cortaban a mitad de columna sin ninguna pista visual de
       que había más contenido con scroll. Sombra permanente en el borde
       derecho (no depende de JS ni de la posición de scroll) solo cuando
       la tabla realmente desborda su contenedor. */
    @media (max-width: 992px) {
      .table-responsive { position: relative; }
      .table-responsive::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 16px;
        pointer-events: none; background: linear-gradient(to right, transparent, rgba(0,0,0,.08));
      }
    }
    .kpi-sub   { font-size: .72rem; opacity: .65; }
    .kpi-danger  { background: #FFFBFA; color: var(--danger); border-color: #F1D5D2; }
    .kpi-warning { background: #FFFCF5; color: var(--warning); border-color: #EFE1C6; }
    .kpi-info    { background: var(--v2c-surface); color: var(--slate-800); border-color: var(--v2c-border); }
    .kpi-success { background: #FBFEFC; color: var(--success); border-color: #CFE5DA; }
    .kpi-neutral { background: var(--slate-50); color: var(--slate-700); border-color: var(--v2c-border); }
    .kpi-danger .kpi-label, .kpi-warning .kpi-label, .kpi-success .kpi-label { color: inherit; opacity: .75; }

    /* Hero band — bloque negro editorial */
    .hero-band {
      background: var(--v2c-dark);
      color: white;
      border-radius: var(--r-xl);
      padding: 1.6rem 1.9rem;
      margin-bottom: 1.5rem;
    }

    /* Bank cards */
    .bank-card {
      border-radius: var(--r-lg);
      border: 1px solid var(--v2c-border);
      background: var(--v2c-surface);
      overflow: hidden;
    }
    .bank-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; background: var(--slate-50); border-bottom: 1px solid var(--v2c-border); gap: 1rem; flex-wrap: wrap; }
    .bank-icon { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--v2c-dark); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
    .bank-card-body { padding: 1.25rem 1.4rem; }
    .bank-card-detail { padding: 1rem 1.4rem 1.4rem; border-top: 1px solid var(--slate-100); background: var(--slate-50); }

    /* ════════════════════════════════════════════════════════════════
       Tables
       ════════════════════════════════════════════════════════════════ */
    .table-mes { font-size: .85rem; }
    .table-mes thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--v2c-muted); border-bottom: 2px solid var(--v2c-border); }
    .table-lineas-conc td, .table-lineas-conc th { font-size: .82rem; vertical-align: middle; }
    .concepto-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tr-sin-partner td { background: #FFFCF5; }
    .table-anomalias tbody tr { cursor: pointer; transition: background .1s; }
    .table-anomalias tbody tr:hover { background: var(--slate-50); }
    .table > :not(caption) > * > th { font-size: .76rem; text-transform: uppercase; letter-spacing: .35px; color: var(--v2c-muted); font-weight: 700; }

    /* ════════════════════════════════════════════════════════════════
       Badges & status
       ════════════════════════════════════════════════════════════════ */
    .badge-severidad { font-size: .7rem; padding: .3em .6em; border-radius: var(--r-sm); font-weight: 600; letter-spacing: .2px; }
    .severidad-critica     { background: var(--danger); color: white; }
    .severidad-alta        { background: var(--warning); color: white; }
    .severidad-media       { background: #D9A420; color: #1a1a1a; }
    .severidad-baja        { background: var(--slate-400); color: white; }
    .estado-pendiente      { background: var(--slate-400); color: white; }
    .estado-en_revision    { background: var(--v2c-blue); color: white; }
    .estado-resuelta       { background: var(--success); color: white; }
    .estado-ignorada       { background: var(--slate-500); color: white; }
    .estado-falso_positivo { background: var(--slate-600); color: white; }

    /* Pills de estado -- sistema único compartido por toda la app (antes
       cada página redefinía sus propios "badge-ok"/"badge-pte" a mano;
       ahora todas usan estas clases, así que un cambio de estilo aquí se
       nota en toda la app de una vez). */
    .pill {
      display: inline-flex; align-items: center; gap: .3rem;
      padding: .2em .65em; border-radius: 20px;
      font-size: .7rem; font-weight: 700; white-space: nowrap;
      border: 1px solid transparent;
    }
    .pill-ok       { background: #FBFEFC; color: var(--success); border-color: #CFE5DA; }
    .pill-pending  { background: #FFFCF5; color: var(--warning); border-color: #EFE1C6; }
    .pill-info     { background: var(--v2c-blue-l); color: var(--v2c-blue-d); border-color: var(--v2c-blue-l); }
    .pill-danger   { background: #FFFBFA; color: var(--danger); border-color: #F1D5D2; }
    .pill-muted    { background: var(--slate-50); color: var(--slate-600); border-color: var(--v2c-border); }
    .pill-neutral  { background: var(--slate-100); color: var(--slate-700); border-color: var(--slate-200); }

    /* ════════════════════════════════════════════════════════════════
       Numbers
       ════════════════════════════════════════════════════════════════ */
    .num-negativo { color: var(--danger); font-weight: 600; font-variant-numeric: tabular-nums; }
    .num-positivo { color: var(--success); font-variant-numeric: tabular-nums; }
    .num-neutro   { font-variant-numeric: tabular-nums; }

    /* ════════════════════════════════════════════════════════════════
       Misc
       ════════════════════════════════════════════════════════════════ */
    .empty-state { color: var(--slate-400); padding: 4rem 1rem; text-align: center; }
    .info-box { background: var(--v2c-blue-l); border-left: 4px solid var(--v2c-blue); padding: 1rem 1.25rem; border-radius: var(--r-md); }
    .info-box .info-title { font-weight: 600; margin-bottom: .5rem; color: var(--v2c-blue-d); }
    pre.calc { background: white; border: 1px solid var(--v2c-border); padding: .8rem; border-radius: var(--r-md); }
    .table-lineas td, .table-lineas th { font-size: .875rem; white-space: nowrap; }
    .modulo-placeholder { max-width: 880px; }

    main.container-fluid { max-width: 1480px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Page title strip — eyebrow editorial V2C */
    .page-eyebrow {
      font-size: .68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .16em;
      color: var(--v2c-muted);
      margin-bottom: .25rem;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
    }
    .page-eyebrow::before {
      content: '';
      width: 14px; height: 1px;
      background: var(--v2c-dark);
      display: inline-block;
    }

    /* Page header */
    .page-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--slate-200);
    }
    .page-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--slate-900);
      letter-spacing: -.03em;
      margin: 0;
    }

    /* Buttons — planos, negro como primario */
    .btn { transition: background .15s, color .15s, border-color .15s; }
    .btn-primary { background: var(--v2c-dark); border: 1px solid var(--v2c-dark); color: #fff; }
    .btn-primary:hover, .btn-primary:focus { background: var(--v2c-mid); border-color: var(--v2c-mid); color: #fff; }
    .btn-outline-primary { border-color: var(--v2c-dark); color: var(--v2c-dark); }
    .btn-outline-primary:hover { background: var(--v2c-dark); border-color: var(--v2c-dark); color: #fff; }
    .btn-outline-secondary { border-color: var(--slate-300); color: var(--slate-600); }
    .btn-outline-secondary:hover { background: var(--slate-100); color: var(--slate-800); border-color: var(--slate-400); }
    .btn-success { background: var(--success); border: 1px solid var(--success); }
    .btn-success:hover { background: #05603A; border-color: #05603A; }
    .btn-danger { background: var(--danger); border: 1px solid var(--danger); }
    .btn-danger:hover { background: #912018; border-color: #912018; }

    /* Form controls */
    .form-control, .form-select {
      border-color: var(--slate-300);
      border-radius: var(--r-md);
      font-size: .85rem;
      transition: border-color .15s, box-shadow .15s;
    }
    .form-control:focus, .form-select:focus {
      border-color: var(--v2c-dark);
      box-shadow: 0 0 0 3px rgba(14,14,14,.08);
    }
    .form-control-sm, .form-select-sm { border-radius: var(--r-sm); font-size: .82rem; }

    /* Alerts — flat, tinte mínimo */
    .alert { border-radius: var(--r-md); border: 1px solid; font-size: .85rem; padding: .8rem 1.1rem; }
    .alert-info    { background: var(--slate-50); border-color: var(--slate-200); color: var(--slate-700); }
    .alert-warning { background: #FFFCF5; border-color: #EFE1C6; color: var(--warning); }
    .alert-danger  { background: #FFFBFA; border-color: #F1D5D2; color: var(--danger); }
    .alert-success { background: #FBFEFC; border-color: #CFE5DA; color: var(--success); }

    /* Modal */
    .modal-content { border-radius: var(--r-lg); border: 1px solid var(--v2c-border); box-shadow: var(--shadow-xl); overflow: hidden; }
    .modal-header { padding: 1rem 1.4rem; }
    .modal-body { padding: 1.4rem; }
    .modal-footer { padding: .85rem 1.4rem; }

    /* Subtle entrance animation -- escalonada: los primeros bloques de cada
       página entran uno detrás de otro en vez de todos a la vez (mismo
       keyframe de siempre, solo con un pequeño delay creciente). */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    main > * { animation: fadeUp .3s ease-out backwards; }
    main > *:nth-child(1) { animation-delay: 0ms; }
    main > *:nth-child(2) { animation-delay: 40ms; }
    main > *:nth-child(3) { animation-delay: 80ms; }
    main > *:nth-child(4) { animation-delay: 120ms; }
    main > *:nth-child(5) { animation-delay: 160ms; }
    main > *:nth-child(n+6) { animation-delay: 200ms; }

    /* ════════════════════════════════════════════════════════════════
       Micro-interacciones globales -- a petición expresa del usuario
       (11/09/2026, "mejoras visuales y animaciones en todo"). Al vivir
       aquí (layout.html, cargado por cada página) se nota en TODA la
       plataforma de una vez, sin tener que tocar cada plantilla. Todo
       sutil y con transform (barato para el navegador), nunca animaciones
       que muevan el layout (nada de animar width/height/margin). */
    .card, .kpi-card, .stat-card, .bank-card {
      transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease;
    }
    .card:hover, .kpi-card:hover, .stat-card:hover, .bank-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -16px rgba(16,16,15,.22);
    }
    .btn { transform: translateY(0); }
    .btn:hover:not(:disabled) { transform: translateY(-1px); }
    .btn:active:not(:disabled) { transform: translateY(0); transition-duration: .05s; }
    .pill { transition: transform .12s ease, background .15s ease, border-color .15s ease; }
    a.pill:hover, button.pill:hover, .pill[role="button"]:hover { transform: translateY(-1px); }
    .sidebar-link, .sidebar-sublink { transform: translateX(0); }
    .sidebar-link:hover i, .sidebar-sublink:hover i { transform: translateX(1px); }
    .sidebar-link i, .sidebar-sublink i { transition: transform .15s ease; }
    .table-responsive tbody tr { transition: background-color .1s ease; }
    .modal.fade .modal-dialog { transition: transform .2s ease-out, opacity .2s ease-out; }

    /* Quien prefiera menos movimiento (mareos, vestibular) se queda con
       los cambios instantáneos -- accesibilidad, no solo estética. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
    }

    /* Print friendly */
    @media print {
      .navbar, .btn, footer { display: none !important; }
      .card, .stat-card, .kpi-card { box-shadow: none; }
    }

    /* ── Subsection Navigation Cards (shared across all pages) ─────── */
    .nav-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .65rem;
      margin-bottom: 1.5rem;
    }
    @media (max-width: 991px) { .nav-cards { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 480px)  { .nav-cards { grid-template-columns: 1fr 1fr; } }

    .nav-card {
      background: #fff;
      border: 1px solid var(--v2c-border);
      border-radius: var(--r-lg);
      padding: .9rem .85rem .8rem;
      cursor: pointer;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: .35rem;
      transition: border-color .15s, background .15s;
      position: relative;
      min-height: 108px;
      text-decoration: none;
      color: inherit;
    }
    .nav-card:hover:not(.nav-card-soon) {
      border-color: var(--v2c-dark);
      background: var(--slate-50);
      color: inherit;
    }
    .nav-card.active {
      border-color: var(--v2c-dark);
      background: var(--slate-50);
    }
    .nav-card.active .nav-card-title { color: var(--v2c-dark); }

    /* Variantes semánticas del estado activo */
    .nav-card.active.nc-danger  { border-color: var(--danger); background: #FFFBFA; }
    .nav-card.active.nc-danger  .nav-card-title { color: var(--danger); }
    .nav-card.active.nc-purple  { border-color: var(--slate-700); }
    .nav-card.active.nc-purple  .nav-card-title { color: var(--slate-700); }
    .nav-card.active.nc-green   { border-color: var(--success); background: #FBFEFC; }
    .nav-card.active.nc-green   .nav-card-title { color: var(--success); }
    .nav-card.active.nc-amber   { border-color: var(--warning); background: #FFFCF5; }
    .nav-card.active.nc-amber   .nav-card-title { color: var(--warning); }
    .nav-card.active.nc-teal    { border-color: var(--slate-600); }
    .nav-card.active.nc-teal    .nav-card-title { color: var(--slate-600); }

    .nav-card-soon { opacity: .45; cursor: default; pointer-events: none; }

    .nav-card-title {
      font-size: .84rem;
      font-weight: 700;
      color: var(--slate-900);
      line-height: 1.2;
      margin-top: .1rem;
    }
    .nav-card-desc {
      font-size: .67rem;
      color: var(--v2c-muted);
      line-height: 1.4;
      flex: 1;
    }
    .nav-card-badge {
      font-size: .6rem;
      font-weight: 700;
      padding: .15em .45em;
      border-radius: 20px;
      align-self: flex-start;
      white-space: nowrap;
    }
    .nc-badge-red    { background: #FFFBFA; color: var(--danger); border: 1px solid #F1D5D2; }
    .nc-badge-green  { background: #FBFEFC; color: var(--success); border: 1px solid #CFE5DA; }
    .nc-badge-amber  { background: #FFFCF5; color: var(--warning); border: 1px solid #EFE1C6; }
    .nc-badge-gray   { background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--slate-200); }
    .nc-badge-blue   { background: var(--slate-100); color: var(--slate-800); border: 1px solid var(--slate-200); }
    .nc-badge-purple { background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--slate-200); }

    .nav-card-arrow {
      position: absolute;
      top: .65rem;
      right: .65rem;
      font-size: .75rem;
      color: var(--slate-300);
      transition: color .15s, transform .15s;
    }
    .nav-card:hover:not(.nav-card-soon) .nav-card-arrow { color: var(--v2c-dark); transform: translate(2px, -2px); }
    .nav-card.active .nav-card-arrow { color: var(--slate-500); }

    /* Icono de las tarjetas nav-card (Reporting, Pagos, Cobros, Compras,
       Cashflow, Alertas, Tareas...) -- usado en toda la app, no solo en el
       modal launcher que se ha quitado. */
    .tl-icon-wrap {
      width: 38px;
      height: 38px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      background: var(--slate-100);
      color: var(--slate-800);
    }
    /* Monocromo V2C: las variantes de color se neutralizan a gris */
    .tl-icon-blue, .tl-icon-green, .tl-icon-amber, .tl-icon-purple, .tl-icon-rose,
    .tl-icon-teal, .tl-icon-orange, .tl-icon-slate, .tl-icon-indigo, .tl-icon-cyan {
      background: var(--slate-100); color: var(--slate-800);
    }