/* ============================================================
   NIU UI · Kit de diseño reutilizable
   Extraído del tablero "Eficiencia de Contenido".
   Úsalo en cualquier proyecto: <link rel="stylesheet" href="niu-ui.css">
   (Requiere el archivo bg.svg junto a este CSS para el fondo.)
   ============================================================ */

/* ---------- Tokens ----------
   Paleta oficial NIU (marca) → tokens semánticos (función) → alias heredados (--brand, --ink…) que ya
   usan todos los componentes. Cambiar un color = cambiarlo AQUÍ, en un solo lugar.
   Protagonismo: azul oscuro, azul eléctrico y anaranjado; celeste, azul claro y púrpura son acentos.
   Fondos blancos y neutros; el color va en navegación, estados, acciones e indicadores. */
:root{
  /* marca */
  --niu-navy:#002850;       /* institucional: identidad, navegación, texto de alta jerarquía */
  --niu-blue:#003CFF;       /* interacción: selección, focus, links, acción primaria (blanco encima 8.6:1) */
  --niu-orange:#F58C00;     /* énfasis puntual — nunca texto blanco encima (2.4:1) */
  --niu-sky:#8CCEF0;        /* acento secundario, comparación, fondos suaves */
  --niu-light-blue:#0086FF; /* acento interactivo secundario */
  --niu-purple:#4209C1;     /* acento especial, con moderación */
  --niu-white:#FFFFFF;
  --niu-charcoal:#262626;   /* texto y neutros */
  /* derivados de marca (tintes de los mismos colores, no colores nuevos) */
  --niu-navy-hover:#0b3a6a; --niu-navy-soft:#e8eef5;
  --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-500:#5b6675;       /* texto secundario: 5.9:1 sobre blanco */
  /* semánticos (función ≠ marca: el anaranjado NIU NO es "warning") */
  --color-primary:var(--niu-blue); --color-heading:var(--niu-navy); --color-text:var(--niu-charcoal);
  --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);
  --color-accent:var(--niu-orange);
  /* alias heredados (los usan los componentes existentes) */
  --bg:var(--gray-50); --bg2:var(--gray-100); --card:var(--gray-0);
  --ink:var(--niu-charcoal); --ink-strong:var(--niu-navy); --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);
  /* series de gráficos */
  --c1:var(--niu-blue); --c2:var(--niu-purple); --c3:var(--niu-light-blue); --c4:#16a34a; --c5:var(--niu-orange); --c6:var(--niu-sky);
  /* espacio (escala de 4 px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* radios: pocos niveles */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px; --radius:var(--r-lg);
  /* sombras mínimas (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-page:20px; --fs-section:15px; --fs-card:14px; --fs-body:13.5px; --fs-caption:12px; --fs-label:11.5px; --fs-hero:40px;
  /* 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;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink);
  background:#ffffff;
  min-height:100vh; padding:32px 24px 64px;
  -webkit-font-smoothing:antialiased;
}
/* Fondo de líneas fluidas NIU: mismo aspecto de siempre (fijo, cubre la pantalla), pero en una capa propia
   compuesta por la GPU — así no se repinta en cada scroll como con background-attachment:fixed. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#ffffff url('bg.svg') center center / cover no-repeat;will-change:transform;transform:translateZ(0)}

.wrap{max-width:1180px;margin:0 auto}          /* contenedor centrado */
a{color:var(--brand)}

/* ---------- Encabezado ---------- */
.niu-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.niu-brand{display:flex;align-items:center;gap:13px}
.niu-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;
  box-shadow:0 6px 16px rgba(47,91,234,.35)}
.niu-top h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
.niu-sub{color:var(--muted);font-size:13px;margin-top:2px}

/* ---------- Controles (filtros, botones, inputs) ---------- */
.niu-controls{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.niu-field{display:flex;flex-direction:column;gap:4px}
.niu-field label{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding-left:2px}
select,input,.niu-input{border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:0 11px;height:var(--h-control);
  font-size:13px;color:var(--ink);font-family:inherit;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
input[type=checkbox],input[type=radio]{height:auto;padding:0}
select:hover,input:hover,.niu-input:hover{border-color:var(--gray-300)}
select:focus,input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--niu-blue-ring)}
/* Botones: secundario (default) · .primary · .ghost · .danger · .icon · .sm — misma altura, radio y foco */
.niu-btn{border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:0 14px;height:var(--h-control);font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap}
.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);color:#fff;border-color:var(--brand)}
.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(--color-error-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}

/* ---------- Navegación por pestañas ---------- */
.niu-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.niu-tabs a{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.niu-tabs a:hover{color:var(--ink)}
.niu-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- Tarjetas ---------- */
.niu-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:var(--sp-4) 20px;margin-bottom:var(--sp-4)}
.niu-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.niu-hint{font-size:12px;color:var(--muted);margin-bottom:16px}

/* Tarjeta destacada / narrativa (storytelling) */
.niu-lead{background:linear-gradient(180deg,#fff,#fbfcff);border:1px solid var(--line);border-left:5px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;margin-bottom:20px;
  font-size:15.5px;line-height:1.55;color:#1f2937}
.niu-lead .eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}

/* ---------- KPIs / stat tiles ---------- */
.niu-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:820px){.niu-stats{grid-template-columns:repeat(2,1fr)}}
.niu-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.niu-stat .k{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.niu-stat .v{font-size:28px;font-weight:800;margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.niu-stat .n{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- Badges / pills ---------- */
.niu-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.niu-badge .dot{width:7px;height:7px;border-radius:50%}
.niu-badge.ok{background:#ecfdf3;color:var(--ok)}
.niu-badge.warn{background:#fffbeb;color:var(--warn)}
.niu-badge.danger{background:#fef2f2;color:var(--danger)}

/* ---------- Barras de progreso ---------- */
.niu-bar{height:7px;background:var(--line2);border-radius:5px;overflow:hidden}
.niu-bar>i{display:block;height:100%;border-radius:5px;background:var(--brand);transition:width .5s ease}

/* ---------- Tablas ---------- */
.niu-table{width:100%;border-collapse:collapse;font-size:12.5px}
.niu-table th,.niu-table td{padding:8px 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{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line);background:var(--card)}
.niu-table tbody tr{transition:background var(--t-fast)}.niu-table tbody tr:hover{background:var(--gray-50)}
.niu-table tbody tr{border-bottom:1px solid var(--line2)}
.niu-table tbody tr:last-child{border-bottom:none}

/* ---------- Utilidades ---------- */
.niu-scroll{overflow-x:auto}                     /* envuelve tablas/gráficas anchas */
.txt-ok{color:var(--ok)} .txt-warn{color:var(--warn)} .txt-danger{color:var(--danger)} .txt-muted{color:var(--muted)}
.niu-foot{color:#9aa4b2;font-size:12px;text-align:center;margin-top:26px}
.niu-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.niu-cols{grid-template-columns:1fr}}
.tabular{font-variant-numeric:tabular-nums}