/* ============================================================
   NIU UI v2 · Design System del Dashboard Financiero
   Fundamentos portados del Tablero Único (niu-tablero-unico/frontend/static/niu-ui.css)
   y adaptados a Flask + Chart.js. Un solo lugar para tokens y componentes:
   las páginas NO deben redefinir estos estilos (sólo layout propio).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* marca NIU */
  --niu-navy:#002850; --niu-blue:#003CFF; --niu-orange:#F58C00; --niu-sky:#8CCEF0;
  --niu-light-blue:#0086FF; --niu-purple:#4209C1; --niu-white:#FFFFFF; --niu-charcoal:#262626;
  --niu-navy-hover:#0b3a6a; --niu-navy-soft:#e8eef5; --niu-navy-2:#1d4f86;
  --niu-blue-hover:#0031d1; --niu-blue-soft:#eaf0ff; --niu-blue-ring:rgba(0,60,255,.22);
  --niu-orange-soft:#fff3e2; --niu-sky-soft:#eef8fd; --niu-purple-soft:#f0eafc;
  /* neutros */
  --gray-0:#ffffff; --gray-50:#f6f8fb; --gray-100:#eef1f5; --gray-200:#e3e7ee; --gray-300:#cfd6e2;
  --gray-400:#9aa5b4; --gray-500:#5b6675; --gray-700:#334155;
  /* semánticos (función ≠ marca: el anaranjado NIU NO es "warning") */
  --color-success:#16a34a; --color-success-text:#15803d; --color-success-soft:#e8f7ee;
  --color-warning:#f59e0b; --color-warning-text:#b45309; --color-warning-soft:#fff6e6;
  --color-error:#dc2626;   --color-error-text:#b91c1c;   --color-error-soft:#fdecec;
  --color-info:var(--niu-light-blue); --color-info-soft:var(--niu-blue-soft);
  /* alias heredados (los usan los componentes y páginas existentes) */
  --bg:var(--gray-50); --bg2:var(--gray-100); --card:var(--gray-0);
  --ink:var(--niu-charcoal); --ink-strong:var(--niu-navy); --ink-2:var(--gray-700); --muted:var(--gray-500);
  --line:var(--gray-200); --line2:var(--gray-100);
  --brand:var(--niu-blue); --brand-2:var(--niu-purple); --brand-soft:var(--niu-blue-soft);
  --ok:var(--color-success); --warn:var(--color-warning); --danger:var(--color-error);
  --ok-text:var(--color-success-text); --warn-text:var(--color-warning-text); --danger-text:var(--color-error-text);
  /* mapa de color de DATOS — único para toda la app (ver static/js/niu/chart-theme.js) */
  --d-real:var(--niu-navy); --d-plan:var(--gray-400); --d-proj:rgba(0,40,80,.28);
  --d-proyecto:var(--niu-blue); --d-recurrente:var(--niu-navy); --d-licencias:var(--niu-purple);
  --d-agente:var(--niu-orange); --d-pauta:var(--niu-light-blue); --d-otros:var(--niu-sky);
  --d-contenido:var(--niu-orange); --d-desarrollo:var(--niu-blue); --d-operaciones:var(--niu-navy); --d-sindepto:var(--gray-300);
  --d-ingreso:#b9d3f0; --d-costo:var(--niu-navy);
  /* series genéricas (no usar para estado) */
  --c1:var(--niu-blue); --c2:var(--niu-purple); --c3:var(--niu-light-blue); --c4:var(--niu-navy); --c5:var(--niu-orange); --c6:var(--niu-sky);
  /* espacio (4 pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* radios */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-lg);
  /* elevación (el borde hace el trabajo) */
  --shadow-sm:0 1px 2px rgba(0,40,80,.05);
  --shadow:0 1px 2px rgba(0,40,80,.04), 0 4px 14px rgba(0,40,80,.05);
  --shadow-lg:0 12px 40px rgba(0,40,80,.16);
  /* tipografía */
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --fs-hero:30px; --fs-page:20px; --fs-section:15px; --fs-card:14px; --fs-body:13.5px; --fs-small:12.5px; --fs-caption:12px; --fs-label:11px;
  /* movimiento */
  --t-fast:120ms; --t-base:160ms; --ease:cubic-bezier(.2,.8,.2,1);
  /* capas */
  --z-sticky:30; --z-overlay:90; --z-drawer:91; --z-menu:95; --z-toast:120; --z-modal:200;
  /* controles */
  --h-control:34px; --h-control-sm:30px; --h-chip:28px;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);font-size:var(--fs-body);line-height:1.45;background:#fff;
  min-height:100vh;padding:14px 28px 48px;-webkit-font-smoothing:antialiased}
/* Fondo de líneas fluidas NIU en capa propia (GPU): no repinta en cada scroll. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#fff url('bg.svg') center center / cover no-repeat;will-change:transform;transform:translateZ(0)}
.wrap{max-width:1440px;margin:0 auto}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--niu-blue);outline-offset:2px}
b,strong{font-weight:700}
.num,.tabular,td.am,.niu-stat .v{font-variant-numeric:tabular-nums}
.ic{flex:none;vertical-align:-3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. Shell: encabezado · navegación · cabecera de página ---------- */
.ui-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-3)}
.niu-brand{display:flex;align-items:center;gap:10px}
.niu-logo{width:34px;height:34px;border-radius:var(--r-md);background:var(--niu-navy);color:#fff;font-weight:800;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex:none}
.ui-top h1{font-size:15px;font-weight:700;color:var(--niu-navy);letter-spacing:-.01em;line-height:1.15}
.ui-top h1 small{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1px}
.ui-ctx{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--niu-navy-soft);color:var(--niu-navy);font-size:12.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-ctx:empty{visibility:hidden}
.ui-top-r,.niu-controls{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex-wrap:wrap;justify-content:flex-end}
.ui-src{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:#fff;font-size:12px;color:var(--muted);white-space:nowrap}
.ui-src b{color:var(--ink);font-weight:600}
.ui-src .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ui-src .dot.warn{background:var(--warn)}.ui-src .dot.bad{background:var(--danger)}
.ui-src:empty{display:none}

/* Nivel 1: rail de hojas (navy activo + acento anaranjado mínimo) */
.niu-tabs{display:flex;gap:2px;padding:4px;margin:0 0 var(--sp-4);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap}
.niu-tabs a{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gray-500);text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.niu-tabs a .ic{opacity:.7;transition:opacity var(--t-fast)}
.niu-tabs a:hover{background:var(--gray-100);color:var(--niu-navy)}.niu-tabs a:hover .ic{opacity:1}
.niu-tabs a:active{background:var(--gray-200)}
.niu-tabs a.active{background:var(--niu-navy);color:#fff}.niu-tabs a.active .ic{opacity:1}
.niu-tabs a.active::after{content:'';position:absolute;left:50%;bottom:4px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--niu-orange)}
.niu-tabs a:focus-visible{outline:0;box-shadow:0 0 0 3px var(--niu-blue-ring)}

/* Cabecera de página: título + alcance activo + acciones */
.ui-page-h,.niu-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.ui-page-t{font-size:var(--fs-page);font-weight:800;color:var(--niu-navy);letter-spacing:-.015em;line-height:1.2}
.niu-sub{color:var(--muted);font-size:var(--fs-small);margin-top:2px}
.ui-page-a{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* ---------- 4. Botones y controles ---------- */
/* Jerarquía: .primary (1 por vista) · default=secondary · .ghost=tertiary · .danger · .icon · .sm */
.niu-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-control);padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);font:600 13px var(--font);
  cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.niu-btn:hover{border-color:var(--gray-300);background:var(--gray-50);color:var(--ink-strong)}
.niu-btn:active{transform:translateY(1px);background:var(--gray-100)}
.niu-btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--niu-blue-ring);border-color:var(--brand)}
.niu-btn[disabled],.niu-btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.niu-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.niu-btn.primary:hover{background:var(--niu-blue-hover);border-color:var(--niu-blue-hover);color:#fff}
.niu-btn.ghost{border-color:transparent;background:transparent;color:var(--brand)}
.niu-btn.ghost:hover{background:var(--niu-blue-soft)}
.niu-btn.danger{color:var(--danger-text);border-color:#f3c2c2}.niu-btn.danger:hover{background:var(--color-error-soft)}
.niu-btn.icon{width:var(--h-control);padding:0}
.niu-btn.sm{height:var(--h-control-sm);padding:0 11px;font-size:12.5px}
.niu-btn.is-busy .ic{animation:uiSpin .9s linear infinite}
@keyframes uiSpin{to{transform:rotate(360deg)}}

select,input,textarea,.niu-input{border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:0 11px;height:var(--h-control);
  font:13px var(--font);color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea{height:auto;padding:8px 11px}
input[type=checkbox],input[type=radio]{height:auto;padding:0}
select:hover,input:hover,textarea:hover{border-color:var(--gray-300)}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--niu-blue-ring)}
select[disabled]{background:var(--gray-50);color:var(--muted);cursor:default}
.niu-field{display:flex;flex-direction:column;gap:4px}
.niu-field label{font-size:var(--fs-label);color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase}

/* Chips de filtro (multi-selección) */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--h-chip);padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--ink-2);font:600 12.5px var(--font);cursor:pointer;user-select:none;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chip:hover{border-color:var(--gray-300);color:var(--niu-navy);background:var(--gray-50)}
.chip.active,.chip[aria-pressed=true]{background:var(--niu-navy);border-color:var(--niu-navy);color:#fff}
.chip:focus-visible{outline:0;box-shadow:0 0 0 3px var(--niu-blue-ring)}
.chip.sm{height:26px;padding:0 10px;font-size:12px}
.chip.q{border-style:dashed}
.chip.dis{opacity:.4;cursor:not-allowed}
.chiprow{display:flex;flex-wrap:wrap;gap:4px}

/* Segmented (toggle de vista) */
.toggle,.ui-seg{display:inline-flex;background:var(--gray-100);border-radius:var(--r-pill);padding:3px;gap:2px}
.toggle button,.ui-seg button{border:0;background:transparent;border-radius:var(--r-pill);height:26px;padding:0 13px;font:600 12.5px var(--font);
  color:var(--muted);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.toggle button:hover,.ui-seg button:hover{color:var(--ink)}
.toggle button.active,.ui-seg button.on{background:#fff;color:var(--niu-navy);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.toggle button:focus-visible,.ui-seg button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--niu-blue-ring)}

/* Barra de filtros (compacta, agrupada) */
.filt{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);align-items:flex-end;margin:0 0 var(--sp-4);
  padding:10px 14px;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.filt:empty{display:none}
.filt .grp{display:flex;flex-direction:column;gap:5px;min-width:0}
.filt .lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filt select{height:var(--h-chip);font-size:12.5px}

/* Barra de filtros GLOBAL v2 (static/js/filters.js): compacta, fija arriba, alcance visible */
.fbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  margin:0 0 var(--sp-4);padding:8px 10px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.fbar .fl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 2px 0 4px}
.fbar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.fbar .grow{flex:1}
.ui-dd{position:relative;display:inline-flex}
.ui-dd>button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;font:600 12.5px var(--font);color:var(--ink);cursor:pointer;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.ui-dd>button:hover{border-color:var(--gray-300);background:var(--gray-50)}
.ui-dd>button[aria-expanded=true]{border-color:var(--brand);box-shadow:0 0 0 3px var(--niu-blue-ring)}
.ui-dd>button .k{color:var(--muted);font-weight:600}
.ui-dd>button.set{border-color:var(--niu-navy);background:var(--niu-navy-soft);color:var(--niu-navy)}
.ui-dd>button .chev{opacity:.6;flex:none}
.ui-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-menu);min-width:220px;padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);animation:uiIn var(--t-fast) var(--ease)}
.ui-pop[hidden]{display:none}
.ui-pop .opt{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:none;border-radius:var(--r-sm);
  font:500 13px var(--font);color:var(--ink);cursor:pointer;text-align:left}
.ui-pop .opt:hover,.ui-pop .opt:focus-visible{background:var(--gray-50);outline:0}
.ui-pop .opt .bx{width:16px;height:16px;border:1.5px solid var(--gray-300);border-radius:4px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.ui-pop .opt[aria-checked=true] .bx{background:var(--niu-navy);border-color:var(--niu-navy)}
.ui-pop .opt .hint{margin-left:auto;font-size:11px;color:var(--muted)}
.ui-pop .div{height:1px;background:var(--line2);margin:4px 2px}
.ui-pop .ft{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 4px 2px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px}
.mgrid button{height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:600 12.5px var(--font);color:var(--ink-2);cursor:pointer;position:relative}
.mgrid button:hover{border-color:var(--gray-300);background:var(--gray-50)}
.mgrid button[aria-pressed=true]{background:var(--niu-navy);border-color:var(--niu-navy);color:#fff}
.mgrid button.fut{border-style:dashed;color:var(--muted)}
.mgrid button.cur::after{content:'';position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--niu-orange)}
.mlegend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:4px 6px 2px}
.fnote{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.fnote .ic{color:var(--gray-400)}
.fscope{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-pill);background:var(--niu-orange-soft);color:#8a4b00;font-size:11.5px;font-weight:600;white-space:nowrap}
@media(max-width:760px){.fbar{position:static}.fbar .grow{display:none}.ui-dd>button{max-width:220px}}

/* ---------- 5. Superficies: tarjetas, encabezados de sección ---------- */
.niu-card,.cchart{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:var(--sp-4) 18px;margin-bottom:var(--sp-4)}
.niu-card h3{font-size:var(--fs-section);font-weight:700;color:var(--niu-navy);margin-bottom:2px}
.niu-hint{font-size:var(--fs-caption);color:var(--muted);margin-bottom:var(--sp-3);line-height:1.45}
/* Tarjeta de gráfica: encabezado ligero (título a la izquierda), no barra oscura */
.cchart{padding:0;overflow:hidden;margin-bottom:0}
.cchart .ch-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0;
  font-size:var(--fs-card);font-weight:700;color:var(--niu-navy);text-align:left;letter-spacing:0;background:none}
.cchart .ch-b{padding:8px 14px 14px}
.secttl{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--sp-5) 0 var(--sp-3)}
.secttl::after{content:'';flex:1;height:1px;background:var(--line)}
.chart-box{position:relative;height:240px}.chart-box.sm{height:210px}

/* Grids reutilizables */
.g2,.cgrid,.tgrid,.niu-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.g3,.comp3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4)}
.g2>.niu-card,.g3>.niu-card,.tgrid>.niu-card,.comp3>.niu-card,.cgrid>.niu-card{margin-bottom:0}
@media(max-width:1100px){.g3,.comp3{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.g2,.g3,.cgrid,.tgrid,.comp3,.niu-cols{grid-template-columns:1fr}}

/* Narrativa / titular (storytelling) */
.niu-lead,.lead-op{background:#fff;border:1px solid var(--line);border-left:4px solid var(--niu-navy);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:12px 18px;margin-bottom:var(--sp-4);font-size:14px;line-height:1.55;color:var(--ink-2)}
.niu-lead b,.lead-op b{color:var(--niu-navy)}
.niu-lead .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

/* ---------- 6. KPIs ---------- */
.niu-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4)}
@media(max-width:1000px){.niu-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.niu-stats{grid-template-columns:1fr}}
.niu-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:14px 16px;min-width:0}
.niu-stat .k{font-size:var(--fs-label);color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.niu-stat .v{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.02em;color:var(--niu-navy)}
.niu-stat .n{font-size:var(--fs-caption);color:var(--muted);margin-top:2px}
.kpi .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px}
.kpi .real{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--niu-navy);font-variant-numeric:tabular-nums}
.kpi .bud{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap}
.kpi .barwrap,.niu-bar{position:relative;height:6px;border-radius:4px;background:var(--gray-100);margin:10px 0 6px;overflow:visible}
.kpi .barwrap>i,.niu-bar>i{display:block;height:100%;border-radius:4px;background:var(--brand);transition:width .5s var(--ease)}
.kpi .barwrap>.tgt{position:absolute;top:-4px;width:2px;height:14px;border-radius:1px;background:var(--niu-navy)}
.kpi .cmp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-caption);font-weight:600}

/* KPI v2 (NiuUI.kpi): VALOR + CONTEXTO (vs plan/meta) + SIGNIFICADO (estado) + tendencia */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-4)}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}}
.kpi2{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:12px 14px 12px;min-width:0;
  display:flex;flex-direction:column;gap:6px;position:relative}
.kpi2 .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kpi2 .k{font-size:var(--fs-label);color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi2 .row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.kpi2 .v{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--niu-navy);font-variant-numeric:tabular-nums;line-height:1.1}
.kpi2 .sub{font-size:var(--fs-caption);color:var(--muted)}
.kpi2 .sub b{color:var(--ink);font-weight:600}
.kpi2 .ft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--muted)}
.delta{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-variant-numeric:tabular-nums}
.delta.up{color:var(--ok-text)}.delta.dn{color:var(--danger-text)}.delta.flat{color:var(--muted)}
.spark{display:block;flex:none}
/* Bullet: barra real con marca de plan/meta (100%) — escala hasta 125% */
.bullet{position:relative;height:6px;border-radius:4px;background:var(--gray-100);margin:2px 0}
.bullet>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--niu-navy);transition:width .5s var(--ease)}
.bullet>i.ok{background:var(--ok)}.bullet>i.warn{background:var(--warn)}.bullet>i.bad{background:var(--danger)}
.bullet>b{position:absolute;top:-4px;width:2px;height:14px;border-radius:1px;background:var(--niu-navy)}

/* Excepciones "Requiere atención" (OVERVIEW → EXCEPCIÓN → ACCIÓN) */
.attn{display:flex;flex-direction:column}
.attn .it{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px 4px;border-bottom:1px solid var(--line2);
  background:none;border-left:0;border-right:0;border-top:0;text-align:left;font:inherit;color:inherit;width:100%}
.attn .it:last-child{border-bottom:0}
.attn button.it{cursor:pointer;border-radius:var(--r-sm);transition:background var(--t-fast)}
.attn button.it:hover{background:var(--gray-50)}
.attn .sev{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.attn .sev.bad{background:var(--color-error-soft);color:var(--danger-text)}.attn .sev.warn{background:var(--color-warning-soft);color:var(--warn-text)}
.attn .sev.ok{background:var(--color-success-soft);color:var(--ok-text)}.attn .sev.info{background:var(--niu-blue-soft);color:var(--niu-blue)}
.attn .t{font-weight:700;font-size:13px;color:var(--niu-navy)}
.attn .d{font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:1px}
.attn .a{font-size:12px;color:var(--muted);margin-top:3px}
.attn .amt{font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.attn .empty{padding:18px 4px;color:var(--muted);font-size:13px}

/* Encabezado de tarjeta con acciones (título + segmentados) */
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.card-h h3{margin:0}
.card-h .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cap{font-size:11.5px;color:var(--muted);margin-top:6px}

/* Mapa de calor (tipo × mes) */
.heat{width:100%;border-collapse:separate;border-spacing:3px;font-size:12px;table-layout:fixed}
.heat th{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:2px 4px;text-align:center}
.heat th.rl{text-align:left;width:150px}
.heat th.tot,.heat td.tot{width:96px;text-align:right}
.heat td{height:34px;border-radius:6px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);padding:0 2px}
.heat td.rl{text-align:left;font-weight:700;color:var(--niu-navy);padding-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat td.c{cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-fast)}
.heat td.c:hover,.heat td.c:focus-visible{box-shadow:0 0 0 2px var(--niu-navy) inset;outline:0}
.heat td.tot{font-weight:800;color:var(--ink)}
.heat td.tot small{display:block;font-size:10.5px;color:var(--muted);font-weight:600}
.heat tr.tfoot td{height:34px;background:var(--gray-100);font-weight:800;color:var(--niu-navy);cursor:default}
.heat tr.tfoot td.rl{background:transparent}
.heat-legend{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.heat-legend i{display:inline-block;width:18px;height:10px;border-radius:3px}

/* Fila de tabla expandible (progressive disclosure): botón chevron + subfilas */
.xrow-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:4px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer;vertical-align:middle;transition:background var(--t-fast),transform var(--t-fast)}
.xrow-btn:hover{background:var(--gray-50);color:var(--niu-navy)}
.xrow-btn .ic{transition:transform var(--t-fast)}
.xrow-btn[aria-expanded=true] .ic{transform:rotate(180deg)}
tr.subrow td{background:var(--gray-50)}
tr.subrow[hidden]{display:none}

/* Leyenda interactiva (chips con total y participación) */
.mixleg{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.mchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font:600 12px var(--font);color:var(--ink);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),opacity var(--t-fast)}
.mchip:hover{border-color:var(--gray-300);background:var(--gray-50)}
.mchip:focus-visible{outline:0;box-shadow:0 0 0 3px var(--niu-blue-ring)}
.mchip i{width:10px;height:10px;border-radius:3px;flex:none}
.mchip i.tick{height:0;border-top:3px solid var(--ink);border-radius:0;width:14px}
.mchip b{font-weight:700;color:var(--niu-navy)}
.mchip span{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.mchip.off{opacity:.45}.mchip.off b{text-decoration:line-through}
.mchip.plan{cursor:default}.mchip.plan:hover{background:#fff;border-color:var(--line)}
.chart-box.tall{height:360px}

/* Detalle plegable */
details.more{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4)}
details.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:12px 16px;font-weight:700;color:var(--niu-navy);font-size:var(--fs-card)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary .ic{transition:transform var(--t-fast)}
details.more[open]>summary .ic{transform:rotate(180deg)}
details.more>summary .s{font-weight:500;color:var(--muted);font-size:12px}
details.more>.in{padding:0 16px 14px}

/* Layout de composición */
.lay-2-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4)}
.lay-1-1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4)}
.lay-2-1>.niu-card,.lay-1-1>.niu-card{margin-bottom:0}
@media(max-width:1000px){.lay-2-1,.lay-1-1{grid-template-columns:1fr}}
.headline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 var(--sp-3);font-size:15px;color:var(--ink-2);line-height:1.5}
.headline b{color:var(--niu-navy)}
.headline .tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- 7. Estado: badges, pills, tags (siempre texto/ícono, no sólo color) ---------- */
.niu-badge,.pill,.estado,.pipill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-xs);white-space:nowrap;line-height:1.5}
.niu-badge{border-radius:var(--r-pill);padding:3px 10px}
.niu-badge .dot{width:7px;height:7px;border-radius:50%}
.niu-badge.ok,.pill.ok,.estado.ok{background:var(--color-success-soft);color:var(--ok-text)}
.niu-badge.warn,.pill.warn{background:var(--color-warning-soft);color:var(--warn-text)}
.niu-badge.danger,.pill.bad,.estado.bad{background:var(--color-error-soft);color:var(--danger-text)}
.pill.info,.pipill{background:var(--niu-blue-soft);color:var(--niu-blue)}
.txt-ok{color:var(--ok-text)} .txt-warn{color:var(--warn-text)} .txt-danger{color:var(--danger-text)} .txt-muted{color:var(--muted)}

/* Leyenda compacta */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--muted);margin:2px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:3px;flex:none}

/* ---------- 8. Insights (hecho → lectura → acción) ---------- */
.insight{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}.insight:last-child{border-bottom:none}
.insight .ic{width:30px;height:30px;border-radius:var(--r-md);flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;vertical-align:0}
.insight .ic.ok{background:var(--color-success-soft);color:var(--ok-text)}.insight .ic.warn{background:var(--color-warning-soft);color:var(--warn-text)}
.insight .ic.danger{background:var(--color-error-soft);color:var(--danger-text)}.insight .ic.info{background:var(--niu-blue-soft);color:var(--niu-blue)}
.insight .tt{font-weight:700;font-size:13.5px;color:var(--niu-navy);margin-bottom:2px}
.insight .dd{font-size:13px;color:var(--ink-2);line-height:1.5}.insight .dd b{color:var(--ink)}
.taxnote,.note{font-size:11.5px;color:var(--muted);margin-top:10px;padding:8px 12px;background:var(--gray-50);border:1px solid var(--line2);border-radius:var(--r-md)}
.taxnote b,.note b{color:var(--ink)}

/* ---------- 9. Tablas ---------- */
.niu-table,.pnl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.niu-table th,.niu-table td{padding:8px;text-align:right;font-variant-numeric:tabular-nums}
.niu-table th:first-child,.niu-table td:first-child{text-align:left}
.niu-table thead th,.pnl thead th{position:sticky;top:0;z-index:1;background:var(--card);color:var(--muted);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line);padding:8px;text-align:left}
.niu-table thead th:not(:first-child){text-align:right}
.pnl thead th.r{text-align:right}
.niu-table tbody tr,.pnl tbody tr{transition:background var(--t-fast)}
.niu-table tbody tr:hover,.pnl tbody tr:hover td{background:var(--gray-50)}
.niu-table tbody td,.pnl tbody td{border-bottom:1px solid var(--line2)}
.niu-table tbody tr:last-child td{border-bottom:none}
.pnl tbody td{padding:8px;vertical-align:middle}
.pnl td.idx{color:var(--gray-400);font-size:11px;width:26px;text-align:center}
.pnl td.am{text-align:right;font-weight:600}
.pnl td.var.neg,.pnl td.am.neg{color:var(--danger-text)}.pnl td.var.pos{color:var(--ok-text)}
.pnl tr.hl td,.pnl tr.sub td{background:var(--gray-50);font-weight:700;color:var(--niu-navy)}
.pnl tr.res td{background:var(--niu-navy-soft);font-weight:800;color:var(--niu-navy)}
.niu-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 10. Estados: carga, vacío, error, progreso ---------- */
/* .loading se pinta como skeleton (las páginas sólo inyectan <div class="loading">) */
.loading{position:relative;min-height:340px;color:transparent;user-select:none;overflow:hidden;font-size:0}
.loading::before,.loading::after{content:'';position:absolute;left:0;right:0;border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--gray-100) 25%,#f8fafc 37%,var(--gray-100) 63%);background-size:400% 100%;animation:uiSk 1.3s ease infinite}
.loading::before{top:0;height:96px}
.loading::after{top:112px;height:228px;
  -webkit-mask:linear-gradient(90deg,#000 49%,transparent 49%,transparent 51%,#000 51%);mask:linear-gradient(90deg,#000 49%,transparent 49%,transparent 51%,#000 51%)}
@keyframes uiSk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ui-sk{border-radius:var(--r-md);background:linear-gradient(90deg,var(--gray-100) 25%,#f8fafc 37%,var(--gray-100) 63%);background-size:400% 100%;animation:uiSk 1.3s ease infinite}
.ui-refrescando{opacity:.55;pointer-events:none;transition:opacity var(--t-fast)}
.ui-in>*{animation:uiIn var(--t-base) var(--ease)}
@keyframes uiIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ui-estado{max-width:460px;margin:48px auto;text-align:center;color:var(--muted);font-size:13.5px}
.ui-estado .ic-wrap{width:44px;height:44px;margin:0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--niu-navy)}
.ui-estado.err .ic-wrap{background:var(--color-error-soft);color:var(--danger-text)}
.ui-estado h3{margin:12px 0 6px;font-size:16px;color:var(--niu-navy)}
.ui-estado p{margin:0 0 16px;line-height:1.5}
.ui-estado details{margin-top:14px;text-align:left;font-size:12px}
.ui-estado pre{white-space:pre-wrap;word-break:break-word;background:var(--gray-50);border-radius:var(--r-md);padding:10px;margin-top:6px}
.ui-progreso{position:fixed;top:0;left:0;height:2px;width:0;background:var(--niu-blue);z-index:var(--z-modal);opacity:0;pointer-events:none}
.ui-progreso.on{opacity:1;width:72%;transition:width 1.8s cubic-bezier(.1,.7,.2,1)}
.ui-progreso.fin{opacity:0;width:100%;transition:width .15s,opacity .3s .1s}

/* ---------- 11. Overlays: toast, diálogo, drawer, tooltip ---------- */
.ui-toasts{position:fixed;right:20px;bottom:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;max-width:min(380px,calc(100vw - 40px))}
.ui-toast{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--niu-navy);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:13px;color:var(--ink);animation:uiIn var(--t-base) var(--ease)}
.ui-toast.ok{border-left-color:var(--ok)}.ui-toast.bad{border-left-color:var(--danger)}.ui-toast.warn{border-left-color:var(--warn)}
.ui-toast b{display:block;color:var(--niu-navy)}
.ui-overlay{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:var(--z-overlay);animation:uiFade var(--t-base) ease}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
.ui-dialog{position:fixed;left:50%;top:22%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);z-index:var(--z-modal);padding:20px}
.ui-dialog h3{font-size:16px;color:var(--niu-navy);margin-bottom:6px}
.ui-dialog p{color:var(--ink-2);font-size:13.5px;line-height:1.5}
.ui-dialog .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.ui-drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:#fff;z-index:var(--z-drawer);box-shadow:-12px 0 40px rgba(0,40,80,.16);
  display:flex;flex-direction:column;animation:uiSlide .22s var(--ease)}
@keyframes uiSlide{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.ui-drawer-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ui-drawer-h h3{font-size:16px;color:var(--niu-navy)}
.ui-drawer-b{padding:16px 18px;overflow:auto;flex:1}
.ui-tip{position:relative;display:inline-flex;color:var(--gray-400);cursor:help;margin-left:4px;vertical-align:middle}
.ui-tip:hover,.ui-tip:focus{color:var(--niu-navy);outline:0}
.ui-tip:hover::after,.ui-tip:focus::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  background:var(--niu-navy);color:#fff;font:400 12px/1.45 var(--font);padding:8px 11px;border-radius:var(--r-sm);width:max-content;max-width:280px;
  white-space:normal;text-transform:none;letter-spacing:0;z-index:60;box-shadow:var(--shadow-lg)}

/* Popover con desglose (NiuUI.pop / NiuUI.breakdown) */
.tpop{position:relative;display:inline-flex;align-items:center;cursor:help}
.tpop.u{border-bottom:1px dotted var(--gray-400)}
.tpop .tpi{color:var(--gray-400)}.tpop:hover .tpi,.tpop:focus .tpi{color:var(--niu-navy)}
.tpop-b{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:70;width:max-content;min-width:270px;max-width:350px;padding:10px 12px;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  font:500 12px/1.45 var(--font);text-align:left;white-space:normal;letter-spacing:0;text-transform:none}
.tpop.r .tpop-b{left:auto;right:0}
.tpop:hover>.tpop-b,.tpop:focus>.tpop-b,.tpop:focus-within>.tpop-b{display:block}
.bd-t{font-weight:800;color:var(--niu-navy);font-size:12px;margin-bottom:4px}
.bd-g,.bd-i,.bd-tot{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
.bd-g{font-weight:700;color:var(--niu-navy);margin-top:6px}
.bd-i{color:var(--ink-2);padding-left:10px;font-size:11.5px}
.bd-tot{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);font-weight:800;color:var(--ink)}
.bd-f{margin-top:6px;color:var(--muted);font-size:11px}

/* ---------- 12. Pie y utilidades ---------- */
.niu-foot{color:var(--gray-500);font-size:11.5px;text-align:center;margin-top:var(--sp-5)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- 13. Responsive del shell ---------- */
@media(max-width:1100px){.ui-top{grid-template-columns:auto 1fr}.ui-ctx{display:none}}
@media(max-width:760px){
  body{padding:12px 16px 40px}
  .ui-top{grid-template-columns:1fr auto}
  .ui-src{display:none}
  .niu-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .niu-tabs a{padding:0 11px}
  .filt{padding:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{body::before,.niu-tabs,.ui-top-r,.filt{display:none}body{padding:0}}