/* ==========================================================================
   NEWSON DESIGN SYSTEM  ·  ns-*
   Sistema de diseño global — futurista, glass, dark + light
   Autor: rediseño integral 2026
   Cargar SIEMPRE primero. El archivo newson-override.css va al final.
   ========================================================================== */

/* ------------------------------------------------------------------ FONTS */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ============================================================== 1. TOKENS */
:root{
  /* ---- Marca ---- */
  --ns-brand:        #FF8A1F;
  --ns-brand-2:      #F39C12;
  --ns-brand-3:      #FFC46B;
  --ns-brand-rgb:    255,138,31;

  --ns-cyan:         #22D3EE;
  --ns-cyan-rgb:     34,211,238;
  --ns-violet:       #8B5CF6;
  --ns-violet-rgb:   139,92,246;
  --ns-blue:         #3B82F6;
  --ns-emerald:      #10E39B;
  --ns-emerald-rgb:  16,227,155;

  /* ---- Semánticos ---- */
  --ns-ok:           #22C55E;
  --ns-ok-rgb:       34,197,94;
  --ns-warn:         #FBBF24;
  --ns-warn-rgb:     251,191,36;
  --ns-danger:       #FB4E6D;
  --ns-danger-rgb:   251,78,109;
  --ns-info:         #38BDF8;
  --ns-info-rgb:     56,189,248;

  /* ---- Superficies (DARK por defecto) ---- */
  --ns-bg:           #060912;
  --ns-bg-2:         #0A101F;
  --ns-surface:      rgba(255,255,255,.045);
  --ns-surface-2:    rgba(255,255,255,.07);
  --ns-surface-3:    rgba(255,255,255,.10);
  --ns-surface-solid:#0E1626;
  --ns-elevated:     #121B2E;
  --ns-border:       rgba(255,255,255,.10);
  --ns-border-2:     rgba(255,255,255,.16);
  --ns-border-glow:  rgba(var(--ns-brand-rgb),.38);

  /* ---- Texto ---- */
  --ns-text:         #E9EFFB;
  --ns-text-2:       #B3C1DB;
  --ns-text-3:       #8496BC;   /* subido: antes 4,3:1 sobre las tarjetas */
  --ns-text-inv:     #06101F;
  /* El naranja de marca sobre fondo claro no llega al mínimo legible, así que
     el texto usa un tono propio; los rellenos y bordes siguen con --ns-brand. */
  --ns-brand-text:   #FF9633;
  --ns-ok-text:      #5FE39C;
  --ns-warn-text:    #FCD97A;
  --ns-danger-text:  #FF97A8;
  --ns-cyan-text:    #7FE7F7;
  --ns-violet-text:  #C4AEFF;

  /* ---- Niveles de evaluación de proveedores ----------------------------
     El semáforo del área: Excelente amarillo, Bueno verde, Regular naranja,
     Malo rojo. Están aquí y no repartidos por cada hoja porque los usan el
     gráfico, la leyenda, los contadores, los botones de filtro, la pantalla
     de tramos, el panel y los PDF: con el color escrito en cada sitio, un
     cambio dejaba siempre alguna pantalla con el color viejo.
     «-fill» es el relleno (barras, puntos, fondos de botón) y «-text» el
     tono legible para texto; nunca se usa el relleno como color de letra. */
  --ns-nv-exc:      #FACC15;   --ns-nv-exc-rgb: 250,204,21;   --ns-nv-exc-text: #FDE047;
  --ns-nv-bue:      #22C55E;   --ns-nv-bue-rgb: 34,197,94;    --ns-nv-bue-text: #5FE39C;
  --ns-nv-reg:      #FB923C;   --ns-nv-reg-rgb: 251,146,60;   --ns-nv-reg-text: #FDBA8C;
  --ns-nv-mal:      #FB4E6D;   --ns-nv-mal-rgb: 251,78,109;   --ns-nv-mal-text: #FF97A8;
  --ns-nv-sin:      #7C8DA8;   --ns-nv-sin-rgb: 124,141,168;  --ns-nv-sin-text: #A8B6CE;
  /* Tinta oscura para escribir ENCIMA del relleno vivo (botones de filtro) */
  --ns-nv-exc-ink:  #3A2C00;
  --ns-nv-bue-ink:  #03270F;
  --ns-nv-reg-ink:  #3A1B00;
  --ns-nv-mal-ink:  #3A0010;   /* sobre el rojo vivo el blanco solo da 2,9:1 */

  /* ---- Estados de una solicitud de herramientas ----
     Nuevo cian · En proceso ámbar · Realizado verde · Cerrado violeta ·
     Cancelado rojo. Antes los cinco eran la misma píldora gris y había que
     leer la palabra para saber en qué punto estaba cada pedido. */
  --ns-st-nuevo:     var(--ns-cyan);    --ns-st-nuevo-text:     var(--ns-cyan-text);    --ns-st-nuevo-rgb: var(--ns-cyan-rgb);
  --ns-st-proceso:   var(--ns-warn);    --ns-st-proceso-text:   var(--ns-warn-text);    --ns-st-proceso-rgb: var(--ns-warn-rgb);
  --ns-st-realizado: var(--ns-ok);      --ns-st-realizado-text: var(--ns-ok-text);      --ns-st-realizado-rgb: var(--ns-ok-rgb);
  --ns-st-cerrado:   var(--ns-violet);  --ns-st-cerrado-text:   var(--ns-violet-text);  --ns-st-cerrado-rgb: var(--ns-violet-rgb);
  --ns-st-cancelado: var(--ns-danger);  --ns-st-cancelado-text: var(--ns-danger-text);  --ns-st-cancelado-rgb: var(--ns-danger-rgb);

  /* ---- Las dos áreas que entregan, como series de un gráfico ----
     Categóricas: identifican QUIÉN, no un estado ni una magnitud, así que no
     usan el semáforo (que está reservado para bueno/malo). Comprobadas con el
     validador de paletas: separación suficiente también para daltonismo
     (ΔE 14,4 deutan) y contraste ≥3:1 sobre la superficie del gráfico. */
  --ns-area-log: #0EA5C4;
  --ns-area-sis: #8B5CF6;

  /* ---- Tipografía ---- */
  --ns-font:         'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ns-font-display: 'Sora', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ns-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --ns-fs-xs:  .72rem;
  --ns-fs-sm:  .8rem;
  --ns-fs-md:  .88rem;
  --ns-fs-base:.94rem;
  --ns-fs-lg:  1.06rem;
  --ns-fs-xl:  1.3rem;
  --ns-fs-2xl: 1.65rem;
  --ns-fs-3xl: 2.1rem;
  --ns-fs-4xl: 2.8rem;

  /* ---- Espacio ---- */
  --ns-1: 4px;   --ns-2: 8px;   --ns-3: 12px;  --ns-4: 16px;
  --ns-5: 20px;  --ns-6: 24px;  --ns-8: 32px;  --ns-10: 40px;
  --ns-12: 48px; --ns-16: 64px; --ns-20: 80px;

  /* ---- Radios ---- */
  --ns-r-xs: 8px;  --ns-r-sm: 12px; --ns-r-md: 16px;
  --ns-r-lg: 22px; --ns-r-xl: 28px; --ns-r-full: 999px;

  /* ---- Sombras ---- */
  --ns-shadow-sm: 0 2px 10px rgba(0,0,0,.30);
  --ns-shadow:    0 12px 34px rgba(0,0,0,.42);
  --ns-shadow-lg: 0 28px 70px rgba(0,0,0,.55);
  --ns-glow:      0 0 0 1px rgba(var(--ns-brand-rgb),.28), 0 10px 40px rgba(var(--ns-brand-rgb),.24);
  --ns-glow-cyan: 0 0 0 1px rgba(var(--ns-cyan-rgb),.28),  0 10px 40px rgba(var(--ns-cyan-rgb),.22);
  --ns-inset:     inset 0 1px 0 rgba(255,255,255,.07);

  /* ---- Gradientes ---- */
  --ns-grad-brand:  linear-gradient(135deg,#FFB347 0%,#FF8A1F 45%,#F0700A 100%);
  --ns-grad-cyan:   linear-gradient(135deg,#67E8F9 0%,#22D3EE 50%,#0EA5C4 100%);
  --ns-grad-violet: linear-gradient(135deg,#A78BFA 0%,#8B5CF6 50%,#6D3EE8 100%);
  --ns-grad-ok:     linear-gradient(135deg,#4ADE80 0%,#22C55E 50%,#12A150 100%);
  --ns-grad-danger: linear-gradient(135deg,#FB7185 0%,#F43F5E 50%,#D62348 100%);
  --ns-grad-line:   linear-gradient(90deg,transparent,rgba(var(--ns-brand-rgb),.55),rgba(var(--ns-cyan-rgb),.45),transparent);
  --ns-grad-text:   linear-gradient(100deg,#FFFFFF 0%,#FFD9A8 40%,#FF8A1F 100%);

  /* ---- Movimiento ---- */
  --ns-t-fast: .16s cubic-bezier(.4,0,.2,1);
  --ns-t:      .28s cubic-bezier(.4,0,.2,1);
  --ns-t-slow: .55s cubic-bezier(.16,1,.3,1);
  --ns-spring: .5s cubic-bezier(.34,1.56,.64,1);

  /* ---- Layout ---- */
  --ns-nav-h: 66px;
  --ns-maxw: 1520px;
  --ns-blur: 18px;

  color-scheme: dark;
}

/* -------------------------------------------------------- TEMA CLARO ---- */
[data-theme="light"]{
  --ns-bg:           #EEF2FA;
  --ns-bg-2:         #F7F9FD;
  --ns-surface:      rgba(255,255,255,.80);
  --ns-surface-2:    rgba(255,255,255,.94);
  --ns-surface-3:    #FFFFFF;
  --ns-surface-solid:#FFFFFF;
  --ns-elevated:     #FFFFFF;
  --ns-border:       rgba(15,32,66,.11);
  --ns-border-2:     rgba(15,32,66,.18);
  --ns-border-glow:  rgba(var(--ns-brand-rgb),.45);

  --ns-text:         #0D1B34;
  --ns-text-2:       #3E5372;
  --ns-text-3:       #5E7292;   /* subido: antes 2,9:1 sobre el papel */
  --ns-text-inv:     #FFFFFF;
  /* Sobre papel, los acentos vivos no llegan al mínimo legible como texto:
     cada uno tiene aquí su tono oscuro. Los rellenos siguen con el vivo. */
  --ns-brand-text:   #A8530A;
  --ns-ok-text:      #0F7A3D;
  --ns-warn-text:    #8A5A00;
  --ns-danger-text:  #B21D33;
  --ns-cyan-text:    #0B5E70;
  --ns-violet-text:  #5B3FBF;

  /* Sobre papel, el relleno se oscurece para que también sirva de borde y el
     tono de texto baja aún más: un amarillo vivo como letra no se lee. */
  --ns-nv-exc:      #EAB308;   --ns-nv-exc-rgb: 234,179,8;    --ns-nv-exc-text: #7A5300;
  --ns-nv-bue:      #15803D;   --ns-nv-bue-rgb: 21,128,61;    --ns-nv-bue-text: #0F7A3D;
  --ns-nv-reg:      #C2410C;   --ns-nv-reg-rgb: 194,65,12;    --ns-nv-reg-text: #9A3412;
  --ns-nv-mal:      #E11D48;   --ns-nv-mal-rgb: 225,29,72;    --ns-nv-mal-text: #B21D33;
  --ns-nv-sin:      #94A3B8;   --ns-nv-sin-rgb: 148,163,184;  --ns-nv-sin-text: #55637A;
  --ns-nv-exc-ink:  #3A2C00;
  --ns-nv-bue-ink:  #FFFFFF;
  --ns-nv-reg-ink:  #FFFFFF;
  --ns-nv-mal-ink:  #FFFFFF;
  --ns-area-log: #0891B2;
  --ns-area-sis: #7C3AED;

  --ns-shadow-sm: 0 2px 8px rgba(19,41,80,.08);
  --ns-shadow:    0 10px 30px rgba(19,41,80,.11);
  --ns-shadow-lg: 0 26px 60px rgba(19,41,80,.16);
  --ns-glow:      0 0 0 1px rgba(var(--ns-brand-rgb),.30), 0 10px 34px rgba(var(--ns-brand-rgb),.20);
  --ns-inset:     inset 0 1px 0 rgba(255,255,255,.9);
  --ns-grad-text: linear-gradient(100deg,#0D1B34 0%,#B4600C 55%,#FF8A1F 100%);

  color-scheme: light;
}

/* ============================================================== 2. RESET */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  /* Sin scroll-behavior:smooth global: al desplazarse por programa
     (scrollIntoView, foco, anclas) la página sigue moviéndose y un toque
     puede caer en el botón equivocado. Se aplica solo a las anclas. */
  /* evita zoom accidental en inputs iOS */
  -webkit-tap-highlight-color: rgba(var(--ns-brand-rgb),.16);
}

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--ns-font);
  font-size:var(--ns-fs-base);
  line-height:1.6;
  color:var(--ns-text);
  background:var(--ns-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background var(--ns-t), color var(--ns-t);
}

img,svg,video,canvas{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--ns-font-display); font-weight:700; line-height:1.22; margin:0 0 var(--ns-3); letter-spacing:-.015em; }
h1{ font-size:var(--ns-fs-3xl); }
h2{ font-size:var(--ns-fs-2xl); }
h3{ font-size:var(--ns-fs-xl); }
h4{ font-size:var(--ns-fs-lg); }
p{ margin:0 0 var(--ns-3); }
hr{ border:0; height:1px; background:var(--ns-border); margin:var(--ns-6) 0; }
::selection{ background:rgba(var(--ns-brand-rgb),.32); color:#fff; }

/* ------------------------------------------------------------ SCROLLBAR */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.55),rgba(var(--ns-cyan-rgb),.42));
  border-radius:99px; border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.85),rgba(var(--ns-cyan-rgb),.7)); background-clip:padding-box; }
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--ns-brand-rgb),.5) transparent; }

/* --------------------------------------------------------------- FOCUS */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--ns-brand);
  outline-offset:3px;
  border-radius:var(--ns-r-xs);
}

/* ======================================================= 3. FONDO GLOBAL */
.ns-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(1200px 620px at 12% -8%,  rgba(var(--ns-brand-rgb),.16), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%,   rgba(var(--ns-cyan-rgb),.13),  transparent 60%),
    radial-gradient(900px 700px  at 50% 110%, rgba(var(--ns-violet-rgb),.14),transparent 62%),
    var(--ns-bg);
}
[data-theme="light"] .ns-bg{
  background:
    radial-gradient(1200px 620px at 12% -8%,  rgba(var(--ns-brand-rgb),.13), transparent 62%),
    radial-gradient(1000px 560px at 92% 4%,   rgba(var(--ns-cyan-rgb),.12),  transparent 60%),
    radial-gradient(900px 700px  at 50% 110%, rgba(var(--ns-violet-rgb),.10),transparent 62%),
    var(--ns-bg);
}
.ns-bg::before{                 /* malla técnica */
  content:''; position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(var(--ns-cyan-rgb),.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ns-cyan-rgb),.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 25%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 25%, #000 20%, transparent 78%);
}
[data-theme="light"] .ns-bg::before{
  background-image:
    linear-gradient(rgba(15,32,66,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,32,66,.05) 1px, transparent 1px);
}
.ns-bg__orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation:ns-float 22s ease-in-out infinite;
}
.ns-bg__orb--1{ width:44vw; height:44vw; max-width:620px; max-height:620px; left:-10vw; top:-12vw; background:radial-gradient(circle,rgba(var(--ns-brand-rgb),.55),transparent 68%); }
.ns-bg__orb--2{ width:38vw; height:38vw; max-width:540px; max-height:540px; right:-8vw; top:8vh;  background:radial-gradient(circle,rgba(var(--ns-cyan-rgb),.45),transparent 68%); animation-delay:-7s; }
.ns-bg__orb--3{ width:34vw; height:34vw; max-width:480px; max-height:480px; left:34vw; bottom:-16vw; background:radial-gradient(circle,rgba(var(--ns-violet-rgb),.42),transparent 68%); animation-delay:-13s; }

@keyframes ns-float{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(3vw,-2vh,0) scale(1.07); }
  66%    { transform:translate3d(-2vw,3vh,0) scale(.95); }
}

/* ==================================================== 4. LAYOUT / SHELL */
.ns-shell{
  max-width:var(--ns-maxw);
  margin-inline:auto;
  padding:clamp(14px,3vw,30px);
  padding-top:calc(var(--ns-nav-h) + clamp(14px,3vw,28px));
  width:100%;
}
.ns-shell--flush{ padding-top:clamp(14px,3vw,30px); }
.ns-stack   { display:flex; flex-direction:column; gap:var(--ns-4); }
.ns-stack-lg{ display:flex; flex-direction:column; gap:var(--ns-8); }
.ns-row     { display:flex; align-items:center; gap:var(--ns-3); flex-wrap:wrap; }
.ns-row--between{ justify-content:space-between; }
.ns-row--end{ justify-content:flex-end; }
.ns-grid{ display:grid; gap:var(--ns-4); }
.ns-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.ns-grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.ns-grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr)); }
.ns-spacer{ flex:1 1 auto; }

/* ===================================================== 5. ENCABEZADOS */
.ns-page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--ns-4); flex-wrap:wrap; margin-bottom:var(--ns-6);
}
.ns-page-head__title{ display:flex; align-items:center; gap:var(--ns-4); min-width:0; }
.ns-page-head__icon{
  width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center;
  border-radius:var(--ns-r-md); font-size:1.28rem; color:#fff;
  background:var(--ns-grad-brand); box-shadow:var(--ns-glow);
  position:relative; overflow:hidden;
}
.ns-page-head__icon::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg,rgba(255,255,255,.42),transparent 55%);
}
.ns-page-head h1,.ns-page-head h2{
  margin:0; font-size:clamp(1.28rem,3.4vw,1.9rem); letter-spacing:-.02em;
}
.ns-page-head__sub{ margin:2px 0 0; color:var(--ns-text-2); font-size:var(--ns-fs-md); }

.ns-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ns-font-mono); font-size:var(--ns-fs-xs);
  text-transform:uppercase; letter-spacing:.22em; color:var(--ns-brand-text);
  margin-bottom:var(--ns-2);
}
.ns-eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px; background:var(--ns-grad-brand); }

.ns-gradient-text{
  background:var(--ns-grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================ 6. CARDS */
.ns-card{
  position:relative;
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-lg);
  padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--ns-shadow), var(--ns-inset);
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  transition:transform var(--ns-t), border-color var(--ns-t), box-shadow var(--ns-t);
  overflow:hidden;
}
.ns-card--hover:hover{ transform:translateY(-4px); border-color:var(--ns-border-glow); box-shadow:var(--ns-shadow-lg), var(--ns-glow); }
.ns-card--flat{ box-shadow:none; background:var(--ns-surface); }
.ns-card--solid{ background:var(--ns-surface-solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
.ns-card__head{
  display:flex; align-items:center; gap:var(--ns-3);
  padding-bottom:var(--ns-4); margin-bottom:var(--ns-4);
  border-bottom:1px solid var(--ns-border);
}
.ns-card__title{ font-family:var(--ns-font-display); font-weight:600; font-size:var(--ns-fs-lg); margin:0; }
.ns-card__sub  { color:var(--ns-text-2); font-size:var(--ns-fs-sm); margin:0; }
/* Una cabecera con título y subtítulo es una fila flex; en un móvil el título
   se comprimía por debajo de su palabra más larga y se partía a mitad
   («Matri z de acces o»). Con min-content nunca baja de la palabra más larga,
   y al permitir el salto el subtítulo se va a su propio renglón. */
.ns-card__head{ flex-wrap:wrap; }
.ns-card__title{ min-width:min-content; }
/* línea superior luminosa */
.ns-card--beam::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--ns-grad-line);
}

/* ============================================================= 7. KPIs */
.ns-kpi{
  position:relative; overflow:hidden;
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md);
  padding:var(--ns-5);
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  box-shadow:var(--ns-shadow-sm), var(--ns-inset);
  transition:transform var(--ns-t), border-color var(--ns-t), box-shadow var(--ns-t);
  display:flex; flex-direction:column; gap:var(--ns-2);
  min-width:0;
}
.ns-kpi:hover{ transform:translateY(-4px); border-color:var(--ns-border-2); box-shadow:var(--ns-shadow); }
.ns-kpi::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:var(--ns-grad-brand); opacity:.9;
}
.ns-kpi--cyan::after  { background:var(--ns-grad-cyan); }
.ns-kpi--violet::after{ background:var(--ns-grad-violet); }
.ns-kpi--ok::after    { background:var(--ns-grad-ok); }
.ns-kpi--danger::after{ background:var(--ns-grad-danger); }
.ns-kpi--warn::after  { background:linear-gradient(135deg,#FDE68A,#FBBF24,#D9930A); }

.ns-kpi__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ns-3); }
.ns-kpi__label{
  font-size:var(--ns-fs-xs); text-transform:uppercase; letter-spacing:.13em;
  color:var(--ns-text-3); font-weight:600; line-height:1.4;
}
.ns-kpi__icon{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--ns-r-sm);
  display:grid; place-items:center; font-size:1.02rem;
  background:rgba(var(--ns-brand-rgb),.14); color:var(--ns-brand-text);
  border:1px solid rgba(var(--ns-brand-rgb),.24);
}
.ns-kpi--cyan   .ns-kpi__icon{ background:rgba(var(--ns-cyan-rgb),.14);   color:var(--ns-cyan);   border-color:rgba(var(--ns-cyan-rgb),.26); }
.ns-kpi--violet .ns-kpi__icon{ background:rgba(var(--ns-violet-rgb),.16); color:#A78BFA;          border-color:rgba(var(--ns-violet-rgb),.28); }
.ns-kpi--ok     .ns-kpi__icon{ background:rgba(var(--ns-ok-rgb),.14);     color:var(--ns-ok);     border-color:rgba(var(--ns-ok-rgb),.26); }
.ns-kpi--danger .ns-kpi__icon{ background:rgba(var(--ns-danger-rgb),.14); color:var(--ns-danger); border-color:rgba(var(--ns-danger-rgb),.26); }
.ns-kpi--warn   .ns-kpi__icon{ background:rgba(var(--ns-warn-rgb),.14);   color:var(--ns-warn);   border-color:rgba(var(--ns-warn-rgb),.26); }

/* --- Cifras por nivel de evaluación de proveedores ---------------------
   Usan el semáforo del área (--ns-nv-*) en vez de los acentos genéricos, para
   que el número de «Excelente» sea del mismo amarillo que su barra y su punto
   en la leyenda. */
.ns-kpi--nv-exc::after{ background:var(--ns-nv-exc); }
.ns-kpi--nv-bue::after{ background:var(--ns-nv-bue); }
.ns-kpi--nv-reg::after{ background:var(--ns-nv-reg); }
.ns-kpi--nv-mal::after{ background:var(--ns-nv-mal); }
.ns-kpi--nv-sin::after{ background:var(--ns-nv-sin); }

.ns-kpi--nv-exc .ns-kpi__value{ color:var(--ns-nv-exc-text); }
.ns-kpi--nv-bue .ns-kpi__value{ color:var(--ns-nv-bue-text); }
.ns-kpi--nv-reg .ns-kpi__value{ color:var(--ns-nv-reg-text); }
.ns-kpi--nv-mal .ns-kpi__value{ color:var(--ns-nv-mal-text); }
.ns-kpi--nv-sin .ns-kpi__value{ color:var(--ns-nv-sin-text); }

.ns-kpi__value{
  font-family:var(--ns-font-display); font-weight:800;
  font-size:clamp(1.7rem,4.4vw,2.35rem); line-height:1.05;
  letter-spacing:-.03em; color:var(--ns-text);
  font-variant-numeric:tabular-nums;
}
.ns-kpi__foot{ display:flex; align-items:center; gap:6px; font-size:var(--ns-fs-xs); color:var(--ns-text-3); }
.ns-kpi__delta{ display:inline-flex; align-items:center; gap:4px; font-weight:700; font-size:var(--ns-fs-xs); padding:2px 8px; border-radius:var(--ns-r-full); }
.ns-kpi__delta--up  { background:rgba(var(--ns-ok-rgb),.14);     color:var(--ns-ok); }
.ns-kpi__delta--down{ background:rgba(var(--ns-danger-rgb),.14); color:var(--ns-danger); }
.ns-kpi__delta--flat{ background:var(--ns-surface-2);            color:var(--ns-text-3); }

/* barra de progreso mini */
.ns-meter{ height:6px; border-radius:99px; background:var(--ns-surface-2); overflow:hidden; margin-top:4px; }
.ns-meter__fill{ height:100%; border-radius:99px; background:var(--ns-grad-brand); transition:width var(--ns-t-slow); }
.ns-meter__fill--cyan{ background:var(--ns-grad-cyan); }
.ns-meter__fill--ok  { background:var(--ns-grad-ok); }
.ns-meter__fill--warn{ background:linear-gradient(90deg,#FDE68A,#FBBF24); }
.ns-meter__fill--danger{ background:var(--ns-grad-danger); }

/* ========================================================== 8. BOTONES */
.ns-btn{
  --btn-bg:var(--ns-surface-2);
  --btn-fg:var(--ns-text);
  --btn-bd:var(--ns-border-2);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; min-height:44px;              /* táctil */
  border-radius:var(--ns-r-sm);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--ns-font-display);
  font-size:var(--ns-fs-md); font-weight:600; letter-spacing:.01em;
  line-height:1; white-space:nowrap; text-align:center;
  cursor:pointer; overflow:hidden;
  transition:transform var(--ns-t-fast), box-shadow var(--ns-t), background var(--ns-t), border-color var(--ns-t), filter var(--ns-t);
  -webkit-user-select:none; user-select:none;
}
.ns-btn:hover{ transform:translateY(-2px); border-color:var(--ns-border-glow); }
.ns-btn:active{ transform:translateY(0) scale(.98); }
.ns-btn:disabled,.ns-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none !important; }
.ns-btn__ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.4); pointer-events:none; animation:ns-ripple .6s ease-out forwards; z-index:0; }
@keyframes ns-ripple{ to{ transform:scale(3.2); opacity:0; } }
.ns-btn > *:not(.ns-btn__ripple){ position:relative; z-index:1; }
/* El destello (ripple) DEBE quedarse fuera del flujo: la regla anterior
   tenía la misma especificidad y le ganaba por ir después, así que el
   destello pasaba a ocupar sitio y el botón se agrandaba de golpe al
   pulsarlo — el clic acababa cayendo al lado. */
.ns-btn > .ns-btn__ripple{ position:absolute !important; z-index:0; }

/* brillo diagonal al hover */
.ns-btn::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.28) 50%,transparent 75%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.ns-btn:hover::before{ transform:translateX(120%); }

.ns-btn--primary{ --btn-bg:var(--ns-grad-brand); --btn-fg:#150A00; --btn-bd:transparent; box-shadow:0 6px 22px rgba(var(--ns-brand-rgb),.34); font-weight:700; }
.ns-btn--primary:hover{ box-shadow:0 12px 34px rgba(var(--ns-brand-rgb),.48); }

.ns-btn--cyan   { --btn-bg:var(--ns-grad-cyan);   --btn-fg:#04202A; --btn-bd:transparent; box-shadow:0 6px 22px rgba(var(--ns-cyan-rgb),.30); font-weight:700; }
.ns-btn--violet { --btn-bg:var(--ns-grad-violet); --btn-fg:#FFF;    --btn-bd:transparent; box-shadow:0 6px 22px rgba(var(--ns-violet-rgb),.32); font-weight:700; }
.ns-btn--ok     { --btn-bg:var(--ns-grad-ok);     --btn-fg:#032713; --btn-bd:transparent; box-shadow:0 6px 22px rgba(var(--ns-ok-rgb),.30); font-weight:700; }
.ns-btn--danger { --btn-bg:var(--ns-grad-danger); --btn-fg:#FFF;    --btn-bd:transparent; box-shadow:0 6px 22px rgba(var(--ns-danger-rgb),.32); font-weight:700; }

.ns-btn--ghost  { --btn-bg:transparent; --btn-fg:var(--ns-text-2); --btn-bd:var(--ns-border); }
.ns-btn--ghost:hover{ --btn-fg:var(--ns-text); background:var(--ns-surface-2); }

.ns-btn--outline{ --btn-bg:transparent; --btn-fg:var(--ns-brand-text); --btn-bd:rgba(var(--ns-brand-rgb),.45); }
.ns-btn--outline:hover{ background:rgba(var(--ns-brand-rgb),.10); }

.ns-btn--soft   { --btn-bg:rgba(var(--ns-brand-rgb),.13); --btn-fg:var(--ns-brand-text); --btn-bd:rgba(var(--ns-brand-rgb),.24); }
.ns-btn--soft-danger{ --btn-bg:rgba(var(--ns-danger-rgb),.13); --btn-fg:var(--ns-danger-text); --btn-bd:rgba(var(--ns-danger-rgb),.26); }
.ns-btn--soft-ok    { --btn-bg:rgba(var(--ns-ok-rgb),.13);     --btn-fg:var(--ns-ok-text);     --btn-bd:rgba(var(--ns-ok-rgb),.26); }
.ns-btn--soft-cyan  { --btn-bg:rgba(var(--ns-cyan-rgb),.13);   --btn-fg:var(--ns-cyan-text);   --btn-bd:rgba(var(--ns-cyan-rgb),.26); }

.ns-btn--sm { padding:8px 14px;  min-height:38px; font-size:var(--ns-fs-sm); border-radius:var(--ns-r-xs); }
.ns-btn--xs { padding:6px 11px;  min-height:32px; font-size:var(--ns-fs-xs); border-radius:var(--ns-r-xs); gap:6px; }
.ns-btn--lg { padding:15px 30px; min-height:52px; font-size:var(--ns-fs-lg); border-radius:var(--ns-r-md); }
.ns-btn--block{ width:100%; }
.ns-btn--icon{ padding:0; width:44px; min-height:44px; flex:0 0 44px; border-radius:var(--ns-r-sm); }
.ns-btn--icon.ns-btn--sm{ width:38px; min-height:38px; flex:0 0 38px; }
.ns-btn--icon.ns-btn--xs{ width:32px; min-height:32px; flex:0 0 32px; }
.ns-btn--pill{ border-radius:var(--ns-r-full); }

/* grupo de acciones */
.ns-btn-group{ display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* ==================================================== 9. FORMULARIOS */
.ns-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ns-label{
  font-size:var(--ns-fs-sm); font-weight:600; color:var(--ns-text-2);
  display:flex; align-items:center; gap:6px;
}
.ns-label--req::after{ content:'*'; color:var(--ns-danger); font-weight:800; }

.ns-input,.ns-select,.ns-textarea{
  width:100%; padding:12px 15px; min-height:46px;
  font-size:16px;                       /* evita el zoom de iOS */
  background:var(--ns-surface-2);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-sm);
  color:var(--ns-text);
  transition:border-color var(--ns-t), box-shadow var(--ns-t), background var(--ns-t);
  appearance:none; -webkit-appearance:none;
}
@media (min-width:640px){ .ns-input,.ns-select,.ns-textarea{ font-size:var(--ns-fs-base); } }
.ns-textarea{ min-height:110px; resize:vertical; line-height:1.6; }
.ns-input::placeholder,.ns-textarea::placeholder{ color:var(--ns-text-3); }
.ns-input:hover,.ns-select:hover,.ns-textarea:hover{ border-color:var(--ns-border-2); }
.ns-input:focus,.ns-select:focus,.ns-textarea:focus{
  border-color:var(--ns-brand-text);
  box-shadow:0 0 0 4px rgba(var(--ns-brand-rgb),.16);
  background:var(--ns-surface-3);
  outline:none;
}
.ns-input:disabled,.ns-select:disabled,.ns-textarea:disabled{ opacity:.5; cursor:not-allowed; }
.ns-input[aria-invalid="true"],.ns-input.is-error{ border-color:var(--ns-danger); box-shadow:0 0 0 4px rgba(var(--ns-danger-rgb),.14); }

.ns-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8D4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:17px;
  padding-right:42px; cursor:pointer;
}
.ns-select option{ background:var(--ns-elevated); color:var(--ns-text); }

/* input con icono */
.ns-input-group{ position:relative; display:flex; align-items:center; width:100%; }
.ns-input-group .ns-input{ padding-left:44px; }
.ns-input-group__icon{
  position:absolute; left:15px; color:var(--ns-text-3); font-size:.95rem;
  pointer-events:none; transition:color var(--ns-t); z-index:1;
}
.ns-input-group .ns-input:focus ~ .ns-input-group__icon,
.ns-input-group:focus-within .ns-input-group__icon{ color:var(--ns-brand-text); }
.ns-input-group__action{
  position:absolute; right:6px; width:36px; height:36px;
  display:grid; place-items:center; border:0; background:transparent;
  color:var(--ns-text-3); border-radius:var(--ns-r-xs); cursor:pointer;
  transition:color var(--ns-t), background var(--ns-t);
}
.ns-input-group__action:hover{ color:var(--ns-brand-text); background:var(--ns-surface-2); }

.ns-help{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); }
.ns-help--error{ color:var(--ns-danger); }

/* checkbox / radio */
.ns-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; -webkit-user-select:none; user-select:none; font-size:var(--ns-fs-md); }
.ns-check input{ position:absolute; opacity:0; width:0; height:0; }
.ns-check__box{
  width:22px; height:22px; flex:0 0 22px; border-radius:7px;
  border:1.5px solid var(--ns-border-2); background:var(--ns-surface-2);
  display:grid; place-items:center; transition:all var(--ns-t);
}
.ns-check__box::after{
  content:''; width:6px; height:11px; margin-top:-2px;
  border:solid #150A00; border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg) scale(0); transition:transform var(--ns-spring);
}
.ns-check input:checked + .ns-check__box{ background:var(--ns-grad-brand); border-color:transparent; box-shadow:0 3px 12px rgba(var(--ns-brand-rgb),.4); }
.ns-check input:checked + .ns-check__box::after{ transform:rotate(45deg) scale(1); }
.ns-check input:focus-visible + .ns-check__box{ outline:2px solid var(--ns-brand); outline-offset:3px; }
.ns-check--radio .ns-check__box{ border-radius:50%; }
.ns-check--radio .ns-check__box::after{ width:9px; height:9px; margin:0; border:0; border-radius:50%; background:#150A00; transform:scale(0); }
.ns-check--radio input:checked + .ns-check__box::after{ transform:scale(1); }

/* switch */
.ns-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.ns-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ns-switch__track{
  width:48px; height:27px; flex:0 0 48px; border-radius:99px;
  background:var(--ns-surface-3); border:1px solid var(--ns-border-2);
  position:relative; transition:all var(--ns-t);
}
.ns-switch__track::after{
  content:''; position:absolute; top:2px; left:2px; width:21px; height:21px;
  border-radius:50%; background:var(--ns-text-2); transition:all var(--ns-spring);
}
.ns-switch input:checked + .ns-switch__track{ background:var(--ns-grad-brand); border-color:transparent; }
.ns-switch input:checked + .ns-switch__track::after{ left:23px; background:#fff; }

/* fieldset visual */
.ns-fieldset{
  border:1px solid var(--ns-border); border-radius:var(--ns-r-md);
  padding:var(--ns-5); margin:0 0 var(--ns-4); background:var(--ns-surface);
}
.ns-fieldset > legend{
  padding:0 10px; font-family:var(--ns-font-display); font-weight:600;
  font-size:var(--ns-fs-sm); color:var(--ns-brand-text);
  text-transform:uppercase; letter-spacing:.1em;
}
.ns-form-grid{ display:grid; gap:var(--ns-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.ns-form-grid--full{ grid-column:1/-1; }

/* ========================================================== 10. BADGES */
.ns-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--ns-r-full);
  font-size:var(--ns-fs-xs); font-weight:700; line-height:1.5;
  letter-spacing:.03em; white-space:nowrap;
  background:var(--ns-surface-2); color:var(--ns-text-2);
  border:1px solid var(--ns-border);
}
.ns-badge--brand { background:rgba(var(--ns-brand-rgb),.14);  color:var(--ns-brand-text);  border-color:rgba(var(--ns-brand-rgb),.28); }
.ns-badge--ok    { background:rgba(var(--ns-ok-rgb),.14);     color:var(--ns-ok);     border-color:rgba(var(--ns-ok-rgb),.28); }
.ns-badge--warn  { background:rgba(var(--ns-warn-rgb),.15);   color:var(--ns-warn);   border-color:rgba(var(--ns-warn-rgb),.30); }
.ns-badge--danger{ background:rgba(var(--ns-danger-rgb),.14); color:var(--ns-danger); border-color:rgba(var(--ns-danger-rgb),.28); }
.ns-badge--info  { background:rgba(var(--ns-info-rgb),.14);   color:var(--ns-info);   border-color:rgba(var(--ns-info-rgb),.28); }
.ns-badge--cyan  { background:rgba(var(--ns-cyan-rgb),.14);   color:var(--ns-cyan);   border-color:rgba(var(--ns-cyan-rgb),.28); }
.ns-badge--violet{ background:rgba(var(--ns-violet-rgb),.16); color:#A78BFA;          border-color:rgba(var(--ns-violet-rgb),.30); }
.ns-badge--solid { background:var(--ns-grad-brand); color:#150A00; border-color:transparent; }
.ns-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.ns-badge--pulse .ns-badge__dot{ animation:ns-pulse 1.9s ease-in-out infinite; }
@keyframes ns-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.75); } }

/* chips filtro */
.ns-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; min-height:38px; border-radius:var(--ns-r-full);
  background:var(--ns-surface-2); border:1px solid var(--ns-border);
  color:var(--ns-text-2); font-size:var(--ns-fs-sm); font-weight:600;
  cursor:pointer; transition:all var(--ns-t); white-space:nowrap;
}
.ns-chip:hover{ border-color:var(--ns-border-glow); color:var(--ns-text); }
.ns-chip.is-active,.ns-chip[aria-pressed="true"]{
  background:rgba(var(--ns-brand-rgb),.16); color:var(--ns-brand-text);
  border-color:rgba(var(--ns-brand-rgb),.4);
  box-shadow:0 4px 16px rgba(var(--ns-brand-rgb),.20);
}
.ns-chip__count{
  background:var(--ns-surface-3); padding:1px 8px; border-radius:99px;
  font-size:var(--ns-fs-xs); font-weight:800; font-variant-numeric:tabular-nums;
}

/* ========================================================== 11. TABLAS */
.ns-table-wrap{
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-lg);
  overflow:hidden;
  box-shadow:var(--ns-shadow-sm), var(--ns-inset);
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
}
.ns-table-scroll{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; }

.ns-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--ns-fs-md); }
.ns-table thead th{
  position:sticky; top:0; z-index:3;
  background:var(--ns-elevated);
  padding:14px 16px; text-align:left; white-space:nowrap;
  font-family:var(--ns-font-display);
  font-size:var(--ns-fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--ns-text-2);
  border-bottom:1px solid var(--ns-border-2);
}
[data-theme="light"] .ns-table thead th{ background:#F1F5FC; }
.ns-table tbody td{
  padding:13px 16px;
  border-bottom:1px solid var(--ns-border);
  color:var(--ns-text); vertical-align:middle;
}
.ns-table tbody tr{ transition:background var(--ns-t-fast); }
.ns-table tbody tr:hover{ background:rgba(var(--ns-brand-rgb),.055); }
.ns-table tbody tr:last-child td{ border-bottom:0; }
.ns-table--zebra tbody tr:nth-child(even){ background:rgba(255,255,255,.022); }
[data-theme="light"] .ns-table--zebra tbody tr:nth-child(even){ background:rgba(15,32,66,.025); }
.ns-table td.ns-num,.ns-table th.ns-num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--ns-font-mono); }
.ns-table .ns-actions{ display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
.ns-table th.ns-sortable{ cursor:pointer; -webkit-user-select:none; user-select:none; }
.ns-table th.ns-sortable:hover{ color:var(--ns-brand-text); }

.ns-table__empty{ padding:var(--ns-12) var(--ns-5); text-align:center; color:var(--ns-text-3); }
.ns-table__empty i{ font-size:2.4rem; opacity:.35; display:block; margin-bottom:var(--ns-3); }

/* ---- MODO TARJETA EN MÓVIL ------------------------------------------ */
@media (max-width:820px){
  .ns-table--cards thead{ display:none; }
  .ns-table--cards,
  .ns-table--cards tbody,
  .ns-table--cards tr,
  .ns-table--cards td{ display:block; width:100%; }
  .ns-table--cards tr{
    background:var(--ns-surface-2);
    border:1px solid var(--ns-border);
    border-radius:var(--ns-r-md);
    margin-bottom:var(--ns-3);
    padding:var(--ns-2) var(--ns-1);
    box-shadow:var(--ns-shadow-sm);
    position:relative; overflow:hidden;
  }
  .ns-table--cards tr::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--ns-grad-brand);
  }
  .ns-table--cards tr:hover{ background:var(--ns-surface-2); }
  .ns-table--cards td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ns-4);
    padding:9px 15px 9px 18px; border-bottom:1px dashed var(--ns-border);
    text-align:right; word-break:break-word; min-height:40px;
  }
  .ns-table--cards td:last-child{ border-bottom:0; }
  .ns-table--cards td::before{
    content:attr(data-label);
    flex:0 0 42%;
    text-align:left;
    font-size:var(--ns-fs-xs); font-weight:700;
    text-transform:uppercase; letter-spacing:.07em;
    color:var(--ns-text-3);
    padding-top:2px;
  }
  .ns-table--cards td[data-label=""]::before,
  .ns-table--cards td:not([data-label])::before{ content:none; }
  .ns-table--cards .ns-actions{ justify-content:flex-end; flex-wrap:wrap; }
}

/* ========================================================== 12. MODALES */
.ns-modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:clamp(10px,3vw,26px);
  background:rgba(3,7,16,.72);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  overscroll-behavior:contain;
}
.ns-modal.is-open,.ns-modal[open]{ display:flex; animation:ns-fade .24s ease both; }
@keyframes ns-fade{ from{ opacity:0; } to{ opacity:1; } }

.ns-modal__box{
  width:100%; max-width:720px; max-height:min(90dvh,900px);
  display:flex; flex-direction:column;
  background:var(--ns-elevated);
  border:1px solid var(--ns-border-2);
  border-radius:var(--ns-r-xl);
  box-shadow:var(--ns-shadow-lg), 0 0 0 1px rgba(var(--ns-brand-rgb),.12);
  overflow:hidden;
  animation:ns-pop .36s cubic-bezier(.16,1,.3,1) both;
}
.ns-modal__box--sm{ max-width:460px; }
.ns-modal__box--lg{ max-width:1080px; }
.ns-modal__box--full{ max-width:1400px; }
@keyframes ns-pop{ from{ opacity:0; transform:translateY(26px) scale(.965); } to{ opacity:1; transform:none; } }

.ns-modal__head{
  display:flex; align-items:center; gap:var(--ns-3);
  padding:var(--ns-5) var(--ns-6);
  border-bottom:1px solid var(--ns-border);
  background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.07),transparent);
  flex:0 0 auto;
}
.ns-modal__title{ font-family:var(--ns-font-display); font-size:var(--ns-fs-lg); font-weight:700; margin:0; flex:1; min-width:0; }
.ns-modal__close{
  width:38px; height:38px; flex:0 0 38px; border-radius:var(--ns-r-xs);
  border:1px solid var(--ns-border); background:var(--ns-surface-2);
  color:var(--ns-text-2); display:grid; place-items:center; font-size:1.05rem;
  cursor:pointer; transition:all var(--ns-t);
}
.ns-modal__close:hover{ background:rgba(var(--ns-danger-rgb),.16); color:var(--ns-danger); border-color:rgba(var(--ns-danger-rgb),.32); transform:rotate(90deg); }
.ns-modal__body{ padding:var(--ns-6); overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.ns-modal__foot{
  display:flex; gap:var(--ns-3); justify-content:flex-end; flex-wrap:wrap;
  padding:var(--ns-4) var(--ns-6);
  border-top:1px solid var(--ns-border); background:var(--ns-surface);
  flex:0 0 auto;
}
@media (max-width:640px){
  .ns-modal{ padding:0; align-items:flex-end; }
  .ns-modal__box{ max-width:100%; max-height:94dvh; border-radius:var(--ns-r-xl) var(--ns-r-xl) 0 0; animation:ns-sheet .34s cubic-bezier(.16,1,.3,1) both; }
  .ns-modal__box--sm{ max-width:100%; }
  .ns-modal__head,.ns-modal__body,.ns-modal__foot{ padding-left:var(--ns-4); padding-right:var(--ns-4); }
  .ns-modal__foot .ns-btn{ flex:1 1 140px; }
  /* asa de hoja inferior */
  .ns-modal__head::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:42px; height:4px; border-radius:99px; background:var(--ns-border-2);
  }
  .ns-modal__head{ position:relative; padding-top:22px; }
}
@keyframes ns-sheet{ from{ transform:translateY(100%); } to{ transform:none; } }

/* ======================================================== 13. NAVBAR */
.ns-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--ns-nav-h);
  display:flex; align-items:center; gap:var(--ns-4);
  padding:0 clamp(12px,2.6vw,26px);
  background:rgba(8,13,26,.72);
  border-bottom:1px solid var(--ns-border);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  transition:background var(--ns-t), box-shadow var(--ns-t), border-color var(--ns-t);
}
[data-theme="light"] .ns-nav{ background:rgba(255,255,255,.80); }
.ns-nav.is-scrolled{ box-shadow:0 10px 34px rgba(0,0,0,.30); }
[data-theme="light"] .ns-nav.is-scrolled{ box-shadow:0 8px 26px rgba(19,41,80,.10); }
.ns-nav::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ns-grad-line); opacity:.65; }

.ns-nav__brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; min-width:0; }
.ns-nav__logo{ height:34px; width:auto; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(var(--ns-brand-rgb),.35)); }
.ns-nav__brand-txt{ display:none; min-width:0; }
@media (min-width:1080px){ .ns-nav__brand-txt{ display:block; } }
.ns-nav__brand-name{ font-family:var(--ns-font-display); font-weight:700; font-size:var(--ns-fs-md); line-height:1.15; white-space:nowrap; }
.ns-nav__brand-sub{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); line-height:1.2; white-space:nowrap; }

.ns-nav__menu{
  display:flex; align-items:center; gap:3px;
  list-style:none; margin:0; padding:0; flex:1 1 auto;
  min-width:0; overflow:visible;
}
.ns-nav__link{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--ns-r-xs);
  font-size:var(--ns-fs-md); font-weight:600; color:var(--ns-text-2);
  white-space:nowrap; transition:all var(--ns-t); border:1px solid transparent;
}
.ns-nav__link i{ font-size:.92rem; opacity:.85; }
.ns-nav__link:hover{ color:var(--ns-text); background:var(--ns-surface-2); }
.ns-nav__link.is-active{
  color:var(--ns-brand-text);
  background:rgba(var(--ns-brand-rgb),.12);
  border-color:rgba(var(--ns-brand-rgb),.26);
}
.ns-nav__link.is-active::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-1px; width:26px; height:2px; border-radius:2px;
  background:var(--ns-grad-brand); box-shadow:0 0 10px rgba(var(--ns-brand-rgb),.7);
}
.ns-nav__tools{ display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }

.ns-nav__user{
  display:none; align-items:center; gap:9px;
  padding:5px 13px 5px 5px; border-radius:var(--ns-r-full);
  background:var(--ns-surface-2); border:1px solid var(--ns-border);
  max-width:210px;
}
@media (min-width:900px){ .ns-nav__user{ display:flex; } }
.ns-nav__avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  background:var(--ns-grad-brand); color:#150A00;
  display:grid; place-items:center; font-weight:800; font-size:var(--ns-fs-sm);
  font-family:var(--ns-font-display);
}
.ns-nav__user-info{ min-width:0; line-height:1.2; }
.ns-nav__user-name{ font-size:var(--ns-fs-sm); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ns-nav__user-role{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ns-nav__burger{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 44px;
  border-radius:var(--ns-r-sm); border:1px solid var(--ns-border);
  background:var(--ns-surface-2); color:var(--ns-text); cursor:pointer;
  transition:all var(--ns-t);
}
.ns-nav__burger:hover{ border-color:var(--ns-border-glow); color:var(--ns-brand-text); }
.ns-nav__burger-bars{ position:relative; width:19px; height:14px; }
.ns-nav__burger-bars span{
  position:absolute; left:0; height:2px; width:100%; border-radius:2px;
  background:currentColor; transition:all var(--ns-t);
}
.ns-nav__burger-bars span:nth-child(1){ top:0; }
.ns-nav__burger-bars span:nth-child(2){ top:6px; width:72%; }
.ns-nav__burger-bars span:nth-child(3){ top:12px; }
.ns-nav.is-open .ns-nav__burger-bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.ns-nav.is-open .ns-nav__burger-bars span:nth-child(2){ opacity:0; transform:translateX(-12px); }
.ns-nav.is-open .ns-nav__burger-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* theme toggle */
.ns-theme-btn{
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--ns-r-sm);
  border:1px solid var(--ns-border); background:var(--ns-surface-2);
  color:var(--ns-text-2); display:grid; place-items:center; cursor:pointer;
  transition:all var(--ns-t); position:relative; overflow:hidden;
}
.ns-theme-btn:hover{ color:var(--ns-brand-text); border-color:var(--ns-border-glow); transform:rotate(-18deg); }
.ns-theme-btn .ns-ico-sun{ display:none; }
.ns-theme-btn .ns-ico-moon{ display:block; }
[data-theme="light"] .ns-theme-btn .ns-ico-sun{ display:block; }
[data-theme="light"] .ns-theme-btn .ns-ico-moon{ display:none; }

/* ---- Menú lateral en móvil ----
   Ocupa toda la altura y todo el ancho útil: los enlaces se estiran de lado
   a lado en lugar de quedarse encogidos, y la ficha del usuario hace de
   cabecera. Pensado para llegar con el pulgar. */
.ns-nav__burger{ display:none; }
@media (max-width:1023px){
  .ns-nav__burger{ display:grid; }
  .ns-nav__menu{
    position:fixed; inset:0 0 0 auto;
    width:min(400px,92vw); height:100dvh;
    display:flex; flex-direction:column; align-items:stretch; gap:5px;
    padding:calc(var(--ns-5) + env(safe-area-inset-top)) var(--ns-5)
            calc(var(--ns-8) + env(safe-area-inset-bottom));
    background:var(--ns-elevated);
    border-left:1px solid var(--ns-border-2);
    box-shadow:-30px 0 70px rgba(0,0,0,.55);
    transform:translateX(102%);
    transition:transform var(--ns-t-slow);
    overflow-y:auto; overscroll-behavior:contain;
    z-index:901;
  }
  .ns-nav.is-open .ns-nav__menu{ transform:none; }

  .ns-nav__menu > li{ display:block; width:100%; }

  /* los enlaces ocupan el ancho completo del panel */
  .ns-nav__link{
    display:flex; width:100%; align-items:center; gap:14px;
    padding:14px 16px; border-radius:var(--ns-r-md);
    font-size:var(--ns-fs-base); font-weight:600; min-height:52px;
    border:1px solid var(--ns-border); background:var(--ns-surface);
    text-align:left;
  }
  .ns-nav__link i{
    width:34px; height:34px; flex:0 0 34px;
    display:grid; place-items:center; font-size:.95rem;
    border-radius:10px; background:var(--ns-surface-2); color:var(--ns-text-2);
  }
  .ns-nav__link:active{ transform:scale(.985); }
  .ns-nav__link.is-active{
    background:rgba(var(--ns-brand-rgb),.13);
    border-color:rgba(var(--ns-brand-rgb),.42);
  }
  .ns-nav__link.is-active i{
    background:var(--ns-grad-brand); color:#150A00;
  }
  .ns-nav__link.is-active::after{ display:none; }
  .ns-nav__link--logout{ border-color:rgba(var(--ns-danger-rgb),.30); }
  .ns-nav__link--logout i{ background:rgba(var(--ns-danger-rgb),.14); color:var(--ns-danger); }

  /* la ficha del usuario, como cabecera del panel */
  .ns-nav__menu .ns-nav__user{
    display:flex; width:100%; max-width:100%;
    margin:0 0 var(--ns-4);
    padding:14px 16px 14px 12px;
    border-radius:var(--ns-r-md);
    background:var(--ns-surface-2);
    border:1px solid var(--ns-border);
  }
  .ns-nav__menu .ns-nav__avatar{ width:42px; height:42px; flex-basis:42px; font-size:.95rem; }
  .ns-nav__menu .ns-nav__user-name{ font-size:var(--ns-fs-base); }

  /* el último bloque queda pegado abajo, al alcance del pulgar */
  .ns-nav__menu .ns-nav__section:last-of-type{ margin-top:auto; }
}
.ns-nav__scrim{
  position:fixed; inset:0; z-index:899;
  background:rgba(2,6,14,.62); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:all var(--ns-t);
}
.ns-nav.is-open ~ .ns-nav__scrim,
.ns-nav__scrim.is-open{ opacity:1; visibility:visible; }

/* separador de sección dentro del drawer */
.ns-nav__section{
  font-size:var(--ns-fs-xs); text-transform:uppercase; letter-spacing:.16em;
  color:var(--ns-text-3); font-weight:700; padding:var(--ns-4) 6px 6px;
}
@media (min-width:1024px){ .ns-nav__section{ display:none; } }

/* logout resaltado */
.ns-nav__link--logout{ color:var(--ns-danger); }
.ns-nav__link--logout:hover{ background:rgba(var(--ns-danger-rgb),.13); color:var(--ns-danger); }

/* ======================================== 14. FLUJO DE PROCESO (steps) */
.ns-flow{ display:grid; gap:var(--ns-3); counter-reset:nsflow; }
@media (min-width:900px){
  .ns-flow--h{ grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--ns-2); }
}
.ns-step{
  position:relative;
  display:flex; gap:var(--ns-4); align-items:flex-start;
  padding:var(--ns-4);
  background:var(--ns-surface); border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md);
  transition:all var(--ns-t);
}
.ns-step:hover{ border-color:var(--ns-border-glow); transform:translateY(-3px); box-shadow:var(--ns-shadow-sm); }
.ns-step__num{
  counter-increment:nsflow;
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center;
  font-family:var(--ns-font-display); font-weight:800; font-size:var(--ns-fs-sm);
  background:rgba(var(--ns-brand-rgb),.14); color:var(--ns-brand-text);
  border:1px solid rgba(var(--ns-brand-rgb),.28);
}
.ns-step__num::before{ content:counter(nsflow,decimal-leading-zero); }
.ns-step__body{ min-width:0; flex:1; }
.ns-step__title{ font-family:var(--ns-font-display); font-weight:700; font-size:var(--ns-fs-md); margin:0 0 3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ns-step__desc{ font-size:var(--ns-fs-sm); color:var(--ns-text-2); margin:0; line-height:1.55; }
.ns-step__meta{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.ns-step--ok    .ns-step__num{ background:rgba(var(--ns-ok-rgb),.15);     color:var(--ns-ok);     border-color:rgba(var(--ns-ok-rgb),.30); }
.ns-step--cyan  .ns-step__num{ background:rgba(var(--ns-cyan-rgb),.15);   color:var(--ns-cyan);   border-color:rgba(var(--ns-cyan-rgb),.30); }
.ns-step--violet .ns-step__num{ background:rgba(var(--ns-violet-rgb),.17);color:#A78BFA;          border-color:rgba(var(--ns-violet-rgb),.32); }
.ns-step--warn  .ns-step__num{ background:rgba(var(--ns-warn-rgb),.16);   color:var(--ns-warn);   border-color:rgba(var(--ns-warn-rgb),.32); }
.ns-step--danger .ns-step__num{ background:rgba(var(--ns-danger-rgb),.15);color:var(--ns-danger); border-color:rgba(var(--ns-danger-rgb),.30); }

/* conector vertical */
.ns-flow:not(.ns-flow--h) .ns-step:not(:last-child)::after{
  content:''; position:absolute; left:calc(var(--ns-4) + 18px); top:100%;
  width:2px; height:var(--ns-3);
  background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.5),transparent);
}

/* timeline */
.ns-timeline{ position:relative; padding-left:26px; }
.ns-timeline::before{
  content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,rgba(var(--ns-brand-rgb),.55),rgba(var(--ns-cyan-rgb),.35),transparent);
}
.ns-timeline__item{ position:relative; padding:0 0 var(--ns-5); }
.ns-timeline__item::before{
  content:''; position:absolute; left:-22px; top:6px;
  width:11px; height:11px; border-radius:50%;
  background:var(--ns-bg); border:2px solid var(--ns-brand);
  box-shadow:0 0 0 3px rgba(var(--ns-brand-rgb),.18);
}
.ns-timeline__time{ font-family:var(--ns-font-mono); font-size:var(--ns-fs-xs); color:var(--ns-text-3); }
.ns-timeline__title{ font-weight:600; font-size:var(--ns-fs-md); margin:2px 0; }
.ns-timeline__desc{ font-size:var(--ns-fs-sm); color:var(--ns-text-2); margin:0; }

/* ===================================================== 15. TICKETS */
.ns-ticket{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--ns-3);
  background:var(--ns-surface);
  border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md);
  padding:var(--ns-4) var(--ns-5);
  box-shadow:var(--ns-shadow-sm);
  transition:all var(--ns-t);
}
.ns-ticket:hover{ transform:translateY(-3px); border-color:var(--ns-border-glow); box-shadow:var(--ns-shadow); }
.ns-ticket::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--ns-grad-brand);
}
.ns-ticket--nuevo::before     { background:var(--ns-grad-cyan); }
.ns-ticket--proceso::before   { background:linear-gradient(180deg,#FDE68A,#FBBF24); }
.ns-ticket--realizado::before { background:var(--ns-grad-ok); }
.ns-ticket--cancelado::before { background:var(--ns-grad-danger); }
/* muescas laterales tipo boleto */
.ns-ticket::after{
  content:''; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--ns-bg); border:1px solid var(--ns-border);
}
.ns-ticket__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ns-3); flex-wrap:wrap; }
.ns-ticket__id{
  font-family:var(--ns-font-mono); font-size:var(--ns-fs-xs); font-weight:600;
  color:var(--ns-brand-text); letter-spacing:.06em;
}
.ns-ticket__title{ font-family:var(--ns-font-display); font-weight:700; font-size:var(--ns-fs-lg); margin:2px 0 0; line-height:1.25; }
.ns-ticket__meta{ display:flex; gap:var(--ns-4); flex-wrap:wrap; font-size:var(--ns-fs-sm); color:var(--ns-text-2); }
.ns-ticket__meta > span{ display:inline-flex; align-items:center; gap:6px; }
.ns-ticket__meta i{ color:var(--ns-text-3); font-size:.85rem; }
.ns-ticket__foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ns-3);
  flex-wrap:wrap; padding-top:var(--ns-3); border-top:1px dashed var(--ns-border);
}
.ns-ticket__progress{ flex:1 1 160px; min-width:140px; }
.ns-ticket__progress-label{ display:flex; justify-content:space-between; font-size:var(--ns-fs-xs); color:var(--ns-text-3); margin-bottom:5px; }

/* ================================================== 16. ALERTAS/TOASTS */
.ns-alert{
  display:flex; align-items:flex-start; gap:var(--ns-3);
  padding:var(--ns-4) var(--ns-5);
  border-radius:var(--ns-r-md);
  border:1px solid var(--ns-border);
  background:var(--ns-surface-2);
  font-size:var(--ns-fs-md);
  position:relative; overflow:hidden;
}
.ns-alert::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ns-text-3); }
.ns-alert__icon{ font-size:1.1rem; flex:0 0 auto; margin-top:1px; }
.ns-alert__body{ flex:1; min-width:0; }
.ns-alert__title{ font-weight:700; margin:0 0 2px; font-family:var(--ns-font-display); }
.ns-alert--ok    { background:rgba(var(--ns-ok-rgb),.10);     border-color:rgba(var(--ns-ok-rgb),.26);     color:#8FE9AE; }
.ns-alert--ok::before{ background:var(--ns-ok); }
.ns-alert--warn  { background:rgba(var(--ns-warn-rgb),.10);   border-color:rgba(var(--ns-warn-rgb),.28);   color:#FCD97A; }
.ns-alert--warn::before{ background:var(--ns-warn); }
.ns-alert--danger{ background:rgba(var(--ns-danger-rgb),.10); border-color:rgba(var(--ns-danger-rgb),.28); color:#FFA3B4; }
.ns-alert--danger::before{ background:var(--ns-danger); }
.ns-alert--info  { background:rgba(var(--ns-info-rgb),.10);   border-color:rgba(var(--ns-info-rgb),.26);   color:#93DBFB; }
.ns-alert--info::before{ background:var(--ns-info); }
[data-theme="light"] .ns-alert--ok    { color:#0B7A3E; }
[data-theme="light"] .ns-alert--warn  { color:#94670A; }
[data-theme="light"] .ns-alert--danger{ color:#B32345; }
[data-theme="light"] .ns-alert--info  { color:#0B6F9E; }

.ns-toasts{
  position:fixed; z-index:1100;
  right:clamp(10px,3vw,22px); bottom:clamp(10px,3vw,22px);
  display:flex; flex-direction:column; gap:10px;
  width:min(370px,calc(100vw - 20px));
  pointer-events:none;
}
.ns-toast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  background:var(--ns-elevated); border:1px solid var(--ns-border-2);
  border-radius:var(--ns-r-md); box-shadow:var(--ns-shadow-lg);
  animation:ns-toast-in .4s cubic-bezier(.16,1,.3,1) both;
  position:relative; overflow:hidden;
}
.ns-toast.is-out{ animation:ns-toast-out .3s ease forwards; }
@keyframes ns-toast-in { from{ opacity:0; transform:translateX(110%); } to{ opacity:1; transform:none; } }
@keyframes ns-toast-out{ to{ opacity:0; transform:translateX(110%); } }
.ns-toast::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--ns-grad-brand); transform-origin:left; animation:ns-toast-bar var(--ns-toast-dur,4s) linear forwards; }
@keyframes ns-toast-bar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.ns-toast__icon{ font-size:1.1rem; flex:0 0 auto; color:var(--ns-brand-text); }
.ns-toast--ok     .ns-toast__icon{ color:var(--ns-ok); }     .ns-toast--ok::after    { background:var(--ns-grad-ok); }
.ns-toast--danger .ns-toast__icon{ color:var(--ns-danger); } .ns-toast--danger::after{ background:var(--ns-grad-danger); }
.ns-toast--warn   .ns-toast__icon{ color:var(--ns-warn); }   .ns-toast--warn::after  { background:linear-gradient(90deg,#FDE68A,#FBBF24); }
.ns-toast__msg{ font-size:var(--ns-fs-md); flex:1; min-width:0; }
@media (max-width:640px){ .ns-toasts{ left:10px; right:10px; width:auto; bottom:10px; } }

/* ====================================================== 17. UTILIDADES */
.ns-glass{
  background:var(--ns-surface); border:1px solid var(--ns-border);
  backdrop-filter:blur(var(--ns-blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--ns-blur)) saturate(150%);
}
.ns-mono{ font-family:var(--ns-font-mono); }
.ns-muted{ color:var(--ns-text-2); }
.ns-dim{ color:var(--ns-text-3); }
.ns-center{ text-align:center; }
.ns-right{ text-align:right; }
.ns-nowrap{ white-space:nowrap; }
.ns-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ns-hide{ display:none !important; }
@media (max-width:768px){ .ns-hide-mobile{ display:none !important; } }
@media (min-width:769px){ .ns-hide-desktop{ display:none !important; } }
.ns-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.ns-divider{ height:1px; background:var(--ns-border); margin:var(--ns-5) 0; border:0; }
.ns-divider--glow{ background:var(--ns-grad-line); height:1px; }

/* barra de herramientas (buscador + filtros + acciones) */
.ns-toolbar{
  display:flex; align-items:center; gap:var(--ns-3); flex-wrap:wrap;
  padding:var(--ns-4);
  background:var(--ns-surface); border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md); margin-bottom:var(--ns-4);
  backdrop-filter:blur(var(--ns-blur)); -webkit-backdrop-filter:blur(var(--ns-blur));
}
.ns-toolbar__search{ flex:1 1 260px; min-width:0; }
.ns-toolbar__actions{ display:flex; gap:var(--ns-2); flex-wrap:wrap; }
@media (max-width:640px){
  .ns-toolbar{ padding:var(--ns-3); }
  .ns-toolbar__actions{ width:100%; }
  .ns-toolbar__actions .ns-btn{ flex:1 1 auto; }
}

/* estado vacío */
.ns-empty{ text-align:center; padding:var(--ns-12) var(--ns-5); color:var(--ns-text-3); }
.ns-empty__icon{
  width:76px; height:76px; margin:0 auto var(--ns-4);
  border-radius:var(--ns-r-lg); display:grid; place-items:center;
  background:var(--ns-surface-2); border:1px solid var(--ns-border);
  font-size:1.9rem; color:var(--ns-text-3);
}
.ns-empty__title{ font-family:var(--ns-font-display); font-weight:700; color:var(--ns-text-2); margin:0 0 6px; font-size:var(--ns-fs-lg); }

/* skeleton */
.ns-skeleton{
  background:linear-gradient(90deg,var(--ns-surface-2) 25%,var(--ns-surface-3) 50%,var(--ns-surface-2) 75%);
  background-size:200% 100%; animation:ns-shimmer 1.5s infinite;
  border-radius:var(--ns-r-xs);
}
@keyframes ns-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* revelado al hacer scroll */
.ns-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.ns-reveal.is-in{ opacity:1; transform:none; }

/* tabs */
.ns-tabs{ display:flex; gap:5px; padding:5px; background:var(--ns-surface-2); border:1px solid var(--ns-border); border-radius:var(--ns-r-sm); overflow-x:auto; }
.ns-tab{
  flex:1 1 auto; min-width:max-content; padding:10px 17px; border:0; border-radius:var(--ns-r-xs);
  background:transparent; color:var(--ns-text-2); font-weight:600; font-size:var(--ns-fs-md);
  cursor:pointer; transition:all var(--ns-t); white-space:nowrap;
}
.ns-tab:hover{ color:var(--ns-text); }
.ns-tab.is-active{ background:var(--ns-grad-brand); color:#150A00; box-shadow:0 4px 14px rgba(var(--ns-brand-rgb),.30); }

/* accesos rápidos */
.ns-quick{
  display:flex; align-items:center; gap:var(--ns-3);
  padding:var(--ns-4);
  background:var(--ns-surface); border:1px solid var(--ns-border);
  border-radius:var(--ns-r-md); transition:all var(--ns-t);
  min-height:66px;
}
.ns-quick:hover{ transform:translateY(-3px) translateX(2px); border-color:var(--ns-border-glow); box-shadow:var(--ns-shadow-sm); background:var(--ns-surface-2); }
.ns-quick__icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:var(--ns-r-sm);
  display:grid; place-items:center; font-size:1.02rem;
  background:rgba(var(--ns-brand-rgb),.13); color:var(--ns-brand-text);
  border:1px solid rgba(var(--ns-brand-rgb),.22);
  transition:all var(--ns-t);
}
.ns-quick:hover .ns-quick__icon{ background:var(--ns-grad-brand); color:#150A00; border-color:transparent; }
.ns-quick__body{ min-width:0; flex:1; }
.ns-quick__title{ font-weight:700; font-size:var(--ns-fs-md); font-family:var(--ns-font-display); line-height:1.3; }
.ns-quick__desc{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); line-height:1.4; }
.ns-quick__go{ color:var(--ns-text-3); transition:all var(--ns-t); flex:0 0 auto; }
.ns-quick:hover .ns-quick__go{ color:var(--ns-brand-text); transform:translateX(4px); }

/* ficha dato (label + valor) */
.ns-data{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ns-data__label{ font-size:var(--ns-fs-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--ns-text-3); font-weight:600; }
.ns-data__value{ font-size:var(--ns-fs-md); font-weight:600; color:var(--ns-text); word-break:break-word; }
.ns-data-grid{ display:grid; gap:var(--ns-4); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }

/* ==================================== 18. ACCESIBILIDAD / IMPRESIÓN */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .ns-bg__orb{ animation:none; }
}

@media print{
  .ns-nav,.ns-bg,.ns-toasts,.ns-btn,.ns-toolbar,.ns-nav__scrim{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  .ns-card,.ns-table-wrap{ box-shadow:none !important; border:1px solid #ccc !important; background:#fff !important; }
}

/* soporte sin backdrop-filter */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ns-card,.ns-nav,.ns-table-wrap,.ns-glass,.ns-kpi,.ns-toolbar{ background:var(--ns-elevated); }
}

/* ==========================================================================
   19. LAYOUT DENSO · APROVECHAMIENTO DE ESPACIO
   Objetivo: cero espacio muerto. Todo el ancho útil trabaja.
   ========================================================================== */

/* ---- Contenedor a ancho completo con respiración mínima ---- */
.ns-shell--wide{ max-width:min(1840px, 96vw); }
.ns-shell--full{ max-width:none; padding-inline:clamp(10px,1.8vw,22px); }

/* ---- Layout con panel lateral (master / detail) ---- */
.ns-layout{
  display:grid;
  gap:var(--ns-4);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:1100px){
  .ns-layout--aside   { grid-template-columns:minmax(0,1fr) 340px; }
  .ns-layout--aside-l { grid-template-columns:300px minmax(0,1fr); }
  .ns-layout--split   { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .ns-layout--3       { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
  .ns-layout--60-40   { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  /* El panel lateral solo queda fijo si CABE completo en pantalla.
     Si es más alto, fluye con la página: nunca se recorta contenido.
     La clase .is-sticky la activa newson-ui.js tras medir. */
  .ns-layout__aside--sticky{ align-self:start; }
  .ns-layout__aside--sticky.is-sticky{
    position:sticky; top:calc(var(--ns-nav-h) + var(--ns-4));
  }
}

/* ---- Rejilla de 12 columnas para composiciones exactas ---- */
.ns-g12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--ns-4); }
.ns-g12 > .c-12{ grid-column:span 12; }
@media (min-width:700px){
  .ns-g12 > .c-6{ grid-column:span 6; }
  .ns-g12 > .c-4{ grid-column:span 6; }
  .ns-g12 > .c-8{ grid-column:span 12; }
}
@media (min-width:1024px){
  .ns-g12 > .c-3{ grid-column:span 3; }
  .ns-g12 > .c-4{ grid-column:span 4; }
  .ns-g12 > .c-5{ grid-column:span 5; }
  .ns-g12 > .c-6{ grid-column:span 6; }
  .ns-g12 > .c-7{ grid-column:span 7; }
  .ns-g12 > .c-8{ grid-column:span 8; }
  .ns-g12 > .c-9{ grid-column:span 9; }
}
.ns-g12 > .c-12{ grid-column:1 / -1; }

/* ---- KPI band: siempre llena la fila, nunca deja huecos ---- */
.ns-kpi-band{
  display:grid; gap:var(--ns-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  margin-bottom:var(--ns-4);
}
.ns-kpi-band--tight{ grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr)); gap:var(--ns-2); }
/* variante compacta de KPI: 40 % menos alto, misma información */
.ns-kpi--compact{ padding:var(--ns-3) var(--ns-4); gap:2px; }
.ns-kpi--compact .ns-kpi__value{ font-size:clamp(1.32rem,3.2vw,1.7rem); }
.ns-kpi--compact .ns-kpi__icon{ width:32px; height:32px; flex:0 0 32px; font-size:.86rem; border-radius:10px; }
.ns-kpi--compact .ns-kpi__label{ font-size:.66rem; }

/* KPI en línea (label izq, valor der) — máxima densidad */
.ns-kpi--inline{ flex-direction:row; align-items:center; justify-content:space-between; padding:var(--ns-3) var(--ns-4); }
.ns-kpi--inline .ns-kpi__value{ font-size:1.42rem; }

/* ---- Toolbar pegajosa: filtros siempre visibles al hacer scroll ---- */
.ns-toolbar--sticky{
  position:sticky; top:calc(var(--ns-nav-h) + 6px); z-index:60;
  box-shadow:var(--ns-shadow-sm);
}
.ns-toolbar--compact{ padding:var(--ns-2) var(--ns-3); gap:var(--ns-2); }
.ns-toolbar--compact .ns-input,
.ns-toolbar--compact .ns-select{ min-height:40px; padding:8px 13px; }
.ns-toolbar--compact .ns-select{ padding-right:38px; }

/* la toolbar se reparte el ancho de forma inteligente */
.ns-toolbar__grid{
  display:grid; gap:var(--ns-2); width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  align-items:center;
}
.ns-toolbar__grid > .ns-grow-2{ grid-column:span 2; }
@media (max-width:520px){ .ns-toolbar__grid > .ns-grow-2{ grid-column:span 1; } }

/* ---- Formularios multicolumna dentro de modales ---- */
.ns-form-grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.ns-form-grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
@media (min-width:900px){
  .ns-form-grid--fixed-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ns-form-grid--fixed-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ns-form-grid--fixed-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ns-form-grid .span-2{ grid-column:span 2; }
.ns-form-grid .span-all{ grid-column:1 / -1; }
@media (max-width:640px){ .ns-form-grid .span-2{ grid-column:span 1; } }

/* separador de sección dentro de un formulario largo */
.ns-form-sep{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:var(--ns-3);
  margin:var(--ns-3) 0 0;
  font-family:var(--ns-font-display); font-size:var(--ns-fs-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ns-brand-text);
}
.ns-form-sep::after{ content:''; flex:1; height:1px; background:var(--ns-grad-line); }

/* modal ancho en escritorio, hoja en móvil: aprovecha ambos */
@media (min-width:1024px){
  .ns-modal__box--wide{ max-width:min(1240px, 94vw); }
  .ns-modal__box--wide .ns-modal__body{ padding:var(--ns-6) var(--ns-8); }
}

/* ---- Densidad global: aplicar .ns-dense al <body> o a un contenedor ---- */
.ns-dense{
  --ns-fs-base:.88rem; --ns-fs-md:.84rem; --ns-fs-sm:.78rem;
  --ns-4:13px; --ns-5:16px; --ns-6:19px;
}
.ns-dense .ns-table thead th{ padding:9px 12px; }
.ns-dense .ns-table tbody td{ padding:8px 12px; }
.ns-dense .ns-card{ padding:var(--ns-4); }
.ns-dense .ns-btn{ min-height:38px; padding:8px 15px; }
.ns-dense .ns-input,.ns-dense .ns-select{ min-height:40px; padding:8px 13px; }

/* botón para alternar densidad */
.ns-density-btn{
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--ns-r-sm);
  border:1px solid var(--ns-border); background:var(--ns-surface-2);
  color:var(--ns-text-2); display:grid; place-items:center; cursor:pointer;
  transition:all var(--ns-t);
}
.ns-density-btn:hover{ color:var(--ns-brand-text); border-color:var(--ns-border-glow); }
.ns-density-btn.is-on{ color:var(--ns-brand-text); background:rgba(var(--ns-brand-rgb),.13); border-color:rgba(var(--ns-brand-rgb),.28); }

/* ---- Tabla que ocupa el alto disponible con cabecera fija ---- */
.ns-table-scroll--tall{
  max-height:calc(100dvh - var(--ns-nav-h) - 250px);
  min-height:280px;
  overflow-y:auto;
}
@media (max-width:820px){ .ns-table-scroll--tall{ max-height:none; overflow-y:visible; } }

/* columna de acciones fija a la derecha en tablas anchas */
@media (min-width:821px){
  .ns-table--stick-actions td:last-child,
  .ns-table--stick-actions th:last-child{
    position:sticky; right:0; z-index:2;
    background:var(--ns-elevated);
    box-shadow:-10px 0 18px -10px rgba(0,0,0,.5);
  }
  .ns-table--stick-actions thead th:last-child{ z-index:4; }
  [data-theme="light"] .ns-table--stick-actions td:last-child{ background:#FFF; }
  [data-theme="light"] .ns-table--stick-actions th:last-child{ background:#F1F5FC; }
  /* primera columna (ID/nombre) también fija */
  .ns-table--stick-first td:first-child,
  .ns-table--stick-first th:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--ns-elevated);
    box-shadow:10px 0 18px -10px rgba(0,0,0,.5);
  }
  .ns-table--stick-first thead th:first-child{ z-index:4; }
  [data-theme="light"] .ns-table--stick-first td:first-child{ background:#FFF; }
  [data-theme="light"] .ns-table--stick-first th:first-child{ background:#F1F5FC; }
}

/* ---- Lista compacta de definición (aprovecha ancho con columnas) ---- */
.ns-deflist{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border:1px solid var(--ns-border); border-radius:var(--ns-r-md); overflow:hidden;
}
.ns-deflist__item{
  display:flex; align-items:baseline; gap:var(--ns-3);
  padding:10px 15px; border-bottom:1px solid var(--ns-border);
  min-width:0; background:var(--ns-surface);
}
.ns-deflist__k{ flex:0 0 40%; font-size:var(--ns-fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ns-text-3); font-weight:700; }
.ns-deflist__v{ flex:1; font-size:var(--ns-fs-md); font-weight:600; word-break:break-word; min-width:0; }

/* ---- Barra de acciones flotante en móvil (pulgar alcanza todo) ---- */
.ns-fab-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  display:none; gap:var(--ns-2);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,13,26,.92);
  border-top:1px solid var(--ns-border);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
[data-theme="light"] .ns-fab-bar{ background:rgba(255,255,255,.94); }
@media (max-width:768px){
  .ns-fab-bar{ display:flex; }
  .ns-fab-bar .ns-btn{ flex:1; }
  body.has-fab-bar{ padding-bottom:78px; }
}
/* botón flotante circular */
.ns-fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:801;
  width:56px; height:56px; border-radius:50%;
  border:0; background:var(--ns-grad-brand); color:#150A00;
  display:grid; place-items:center; font-size:1.3rem;
  box-shadow:0 10px 30px rgba(var(--ns-brand-rgb),.46);
  cursor:pointer; transition:transform var(--ns-spring);
}
.ns-fab:hover{ transform:scale(1.08) rotate(90deg); }
@media (min-width:769px){ .ns-fab{ display:none; } }

/* ---- Scroll horizontal con pistas visuales ---- */
.ns-scroll-x{
  display:flex; gap:var(--ns-3); overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.ns-scroll-x > *{ scroll-snap-align:start; flex:0 0 auto; }
.ns-scroll-hint{ position:relative; }
.ns-scroll-hint::after{
  content:''; position:absolute; right:0; top:0; bottom:10px; width:44px;
  background:linear-gradient(90deg,transparent,var(--ns-bg));
  pointer-events:none; opacity:.9;
}

/* ---- Cabecera de página compacta con métricas al lado ---- */
.ns-page-head--dense{ margin-bottom:var(--ns-4); align-items:center; }
.ns-page-head__stats{ display:flex; gap:var(--ns-5); flex-wrap:wrap; }
.ns-page-head__stat{ display:flex; flex-direction:column; line-height:1.15; }
.ns-page-head__stat b{ font-family:var(--ns-font-display); font-size:1.28rem; font-variant-numeric:tabular-nums; }
.ns-page-head__stat span{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); text-transform:uppercase; letter-spacing:.08em; }

/* ---- Panel plegable para ahorrar altura ---- */
.ns-collapse__head{
  display:flex; align-items:center; gap:var(--ns-3); width:100%;
  padding:var(--ns-3) var(--ns-4); cursor:pointer;
  background:var(--ns-surface-2); border:1px solid var(--ns-border);
  border-radius:var(--ns-r-sm); color:var(--ns-text);
  font-family:var(--ns-font-display); font-weight:600; font-size:var(--ns-fs-md);
  text-align:left; transition:all var(--ns-t);
}
.ns-collapse__head:hover{ border-color:var(--ns-border-glow); }
.ns-collapse__head i.ns-collapse__chev{ margin-left:auto; transition:transform var(--ns-t); }
.ns-collapse.is-open .ns-collapse__chev{ transform:rotate(180deg); }
.ns-collapse__body{ display:none; padding:var(--ns-4) 0 0; }
.ns-collapse.is-open .ns-collapse__body{ display:block; animation:ns-slide .3s ease both; }
@keyframes ns-slide{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   20. BARRAS DE DISTRIBUCIÓN (paneles)
   ========================================================================== */
.ns-bars{ display:flex; flex-direction:column; gap:11px; }
.ns-bar{
  display:grid; align-items:center; gap:var(--ns-3);
  grid-template-columns:minmax(74px,32%) 1fr auto;
}
.ns-bar__label{
  font-size:var(--ns-fs-sm); color:var(--ns-text-2); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.ns-bar__track{
  height:9px; border-radius:99px; background:var(--ns-surface-2);
  overflow:hidden; position:relative; min-width:0;
}
.ns-bar__fill{
  display:block; height:100%; border-radius:99px;
  background:var(--ns-grad-brand);
  animation:ns-bar-grow 1s cubic-bezier(.16,1,.3,1) both;
  box-shadow:0 0 12px rgba(var(--ns-brand-rgb),.35);
}
.ns-bar__fill--cyan  { background:var(--ns-grad-cyan);   box-shadow:0 0 12px rgba(var(--ns-cyan-rgb),.32); }
.ns-bar__fill--violet{ background:var(--ns-grad-violet); box-shadow:0 0 12px rgba(var(--ns-violet-rgb),.32); }
.ns-bar__fill--ok    { background:var(--ns-grad-ok);     box-shadow:0 0 12px rgba(var(--ns-ok-rgb),.30); }
.ns-bar__fill--warn  { background:linear-gradient(90deg,#FDE68A,#FBBF24); }
@keyframes ns-bar-grow{ from{ width:0 !important; } }
.ns-bar__value{
  font-family:var(--ns-font-mono); font-size:var(--ns-fs-sm); font-weight:600;
  color:var(--ns-text); min-width:34px; text-align:right; font-variant-numeric:tabular-nums;
}
@media (max-width:480px){
  .ns-bar{ grid-template-columns:minmax(64px,38%) 1fr auto; gap:var(--ns-2); }
  .ns-bar__label{ font-size:var(--ns-fs-xs); }
}

/* anillo de progreso */
.ns-ring{ display:grid; place-items:center; position:relative; width:112px; height:112px; margin-inline:auto; }
.ns-ring svg{ transform:rotate(-90deg); width:100%; height:100%; }
.ns-ring__bg{ fill:none; stroke:var(--ns-surface-3); stroke-width:9; }
.ns-ring__fg{
  fill:none; stroke:url(#nsRingGrad); stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}
.ns-ring__txt{
  position:absolute; text-align:center; line-height:1.1;
}
.ns-ring__num{ font-family:var(--ns-font-display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; }
.ns-ring__lbl{ font-size:var(--ns-fs-xs); color:var(--ns-text-3); text-transform:uppercase; letter-spacing:.1em; }

/* ==========================================================================
   21. CORRECCIONES DE NAVBAR · reparto de espacio sin solapes
   ========================================================================== */

/* la marca no se come el espacio del menú */
.ns-nav__brand{ max-width:min(38%,340px); overflow:hidden; }
.ns-nav__brand-name,.ns-nav__brand-sub{ overflow:hidden; text-overflow:ellipsis; }

/* el menú ocupa el hueco central y nunca invade las herramientas */
.ns-nav__menu{ min-width:0; flex:1 1 auto; }
@media (min-width:1024px){
  .ns-nav__menu{
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:var(--ns-3);
  }
  .ns-nav__menu::-webkit-scrollbar{ display:none; }
  /* elementos exclusivos del menú lateral */
  .ns-nav__only-drawer,
  .ns-nav__section{ display:none !important; }
}
.ns-nav__tools{ flex:0 0 auto; margin-left:0; }

/* botones-icono de la barra (cambiar sistema, salir) */
.ns-nav__icon-btn{
  width:44px; height:44px; flex:0 0 44px; border-radius:var(--ns-r-sm);
  border:1px solid var(--ns-border); background:var(--ns-surface-2);
  color:var(--ns-text-2); display:grid; place-items:center; cursor:pointer;
  transition:all var(--ns-t); text-decoration:none;
}
.ns-nav__icon-btn:hover{ color:var(--ns-brand-text); border-color:var(--ns-border-glow); background:var(--ns-surface-3); }
.ns-nav__icon-btn--logout{ color:var(--ns-danger); border-color:rgba(var(--ns-danger-rgb),.24); background:rgba(var(--ns-danger-rgb),.08); }
.ns-nav__icon-btn--logout:hover{ color:#fff; background:var(--ns-grad-danger); border-color:transparent; }

/* en pantallas medianas el chip de usuario se reduce a solo avatar */
@media (min-width:900px) and (max-width:1279px){
  .ns-nav__user-info{ display:none; }
  .ns-nav__user{ padding:5px; max-width:none; }
}

/* ==========================================================================
   22. REVELADO SEGURO · el contenido NUNCA queda oculto si algo falla
   Solo se anima cuando el motor de interfaz confirma que está activo.
   ========================================================================== */
.ns-reveal{ opacity:1; transform:none; }          /* estado por defecto: visible */
html.ns-js .ns-reveal:not(.is-in){ opacity:0; transform:translateY(20px); }
html.ns-js .ns-reveal{ transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1); }
html.ns-js .ns-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.ns-js .ns-reveal:not(.is-in){ opacity:1; transform:none; }
}
@media print{
  .ns-reveal,html.ns-js .ns-reveal:not(.is-in){ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   23. ICONOS · degradación elegante si el CDN no responde
   ========================================================================== */
html.ns-no-icons .ns-kpi__icon,
html.ns-no-icons .ns-quick__icon,
html.ns-no-icons .ns-page-head__icon,
html.ns-no-icons .sel-choice__icon,
html.ns-no-icons .sel-sys__icon,
html.ns-no-icons .lg-feat__ico{
  background:transparent !important; border-color:transparent !important;
  width:0 !important; flex-basis:0 !important; overflow:hidden;
}
html.ns-no-icons .ns-step__num{ background:rgba(var(--ns-brand-rgb),.14) !important; }

/* ==========================================================================
   24. AJUSTES FINOS DE REPARTO
   ========================================================================== */
/* las tarjetas de una fila se ajustan a su contenido: sin huecos muertos */
.ns-g12,.ns-grid,.ns-kpi-band{ align-items:start; }
.ns-layout{ align-items:start; }

/* navbar: más aire para los enlaces en pantallas grandes */
@media (min-width:1280px){
  .ns-nav__brand{ max-width:300px; }
}
@media (min-width:1024px) and (max-width:1279px){
  .ns-nav__brand-txt{ display:none; }
  .ns-nav__link{ padding:9px 11px; font-size:var(--ns-fs-sm); }
}

/* la barra de KPIs reparte mejor cuando hay 5 o 6 tarjetas */
@media (min-width:1400px){
  .ns-kpi-band{ grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr)); }
}

/* ==========================================================================
   25. BLINDAJE ANTI-DESBORDE
   En rejillas CSS, `1fr` no baja del ancho mínimo del contenido y provoca
   desbordes en pantallas muy estrechas. `minmax(0,1fr)` sí lo permite.
   ========================================================================== */
.ns-layout{ grid-template-columns:minmax(0,1fr); }
.ns-stack,.ns-stack-lg,.ns-layout > *,.ns-g12 > *,.ns-grid > *{ min-width:0; }
.ns-card,.ns-kpi,.ns-ticket,.ns-quick,.ns-step,.ns-table-wrap{ min-width:0; max-width:100%; }
.ns-card__head > div,.ns-quick__body,.ns-step__body,.ns-ticket__head > div{ min-width:0; }

/* en pantallas muy estrechas, respiración mínima y sin lujos que estorben */
@media (max-width:360px){
  :root{ --ns-4:12px; --ns-5:14px; --ns-6:16px; }
  .ns-shell{ padding-inline:10px; }
  .ns-card{ padding:14px; border-radius:var(--ns-r-md); }
  .ns-kpi{ padding:14px; }
  .ns-ticket{ padding:14px 16px; }
  .ns-ticket::after{ display:none; }          /* la muesca no cabe */
  .ns-page-head__stats{ gap:var(--ns-4); }
  .ns-kpi__value{ font-size:1.6rem; }
  .ns-step{ padding:13px; gap:12px; }
  .ns-step__num{ width:30px; height:30px; flex-basis:30px; font-size:.7rem; }
}

/* ==========================================================================
   26. FICHA DE EQUIPO (Inventario TI) · detalle unificado
   ========================================================================== */
.eq-head{ margin-bottom:var(--ns-4); }
.eq-head__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--ns-3); flex-wrap:wrap; margin-bottom:var(--ns-5);
}
.eq-head__id{ display:flex; align-items:center; gap:var(--ns-4); flex-wrap:wrap; }
.eq-head__icon{
  width:58px; height:58px; flex:0 0 58px; border-radius:var(--ns-r-md);
  display:grid; place-items:center; font-size:1.45rem; color:#150A00;
  background:var(--ns-grad-brand); box-shadow:var(--ns-glow);
}
.eq-head__txt{ min-width:0; flex:1 1 260px; }
.eq-head__txt h1{
  margin:2px 0 3px; font-size:clamp(1.25rem,3.2vw,1.85rem);
  letter-spacing:-.02em; line-height:1.15;
}
.eq-head__sub{ margin:0; color:var(--ns-text-2); font-size:var(--ns-fs-md); }
.eq-head__estado{ flex:0 0 auto; align-self:flex-start; }

.eq-tabs{ margin-bottom:var(--ns-4); }
.eq-tabs .ns-tab{ display:inline-flex; align-items:center; gap:8px; }
.eq-tabs .ns-tab i{ font-size:.85rem; }
.eq-tabs .ns-chip__count{ background:rgba(255,255,255,.12); }
.eq-tabs .ns-tab.is-active .ns-chip__count{ background:rgba(0,0,0,.16); }

.eq-panel[hidden]{ display:none !important; }
.eq-panel{ animation:ns-slide .28s ease both; }

@media (max-width:640px){
  .eq-head__top{ flex-direction:column; align-items:stretch; }
  .eq-head__top .ns-btn-group{ display:flex; }
  .eq-head__top .ns-btn{ flex:1 1 auto; justify-content:center; }
  .eq-head__icon{ width:46px; height:46px; flex-basis:46px; font-size:1.15rem; }
}

/* pestañas de estado del listado de inventario */
.inv-estados{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:0 0 var(--ns-4);
}
.inv-estados .ns-chip{ text-decoration:none; }

/* Desplazamiento suave únicamente al seguir un ancla de la misma página,
   nunca en desplazamientos por programa (evita pulsaciones erróneas). */
@media (prefers-reduced-motion: no-preference){
  :target{ scroll-margin-top:calc(var(--ns-nav-h) + 16px); }
  .ns-smooth{ scroll-behavior:smooth; }
}

/* variante de aviso para acciones reversibles (dar de baja) */
.ns-btn--soft-warn{
  --btn-bg:rgba(var(--ns-warn-rgb),.14);
  --btn-fg:var(--ns-warn-text);
  --btn-bd:rgba(var(--ns-warn-rgb),.30);
}
.ns-btn--soft-warn:hover{ background:rgba(var(--ns-warn-rgb),.24); }

/* fila de acciones solo-icono: compacta y siempre alineada a la derecha */
.ns-actions--iconos{
  display:flex; gap:5px; justify-content:flex-end; align-items:center;
  flex-wrap:nowrap;
}
.ns-actions--iconos .ns-btn{ flex:0 0 auto; }

/* ============================================================ FLASH
   Avisos de una sola vez (ns_flash.php). Se apilan arriba del
   contenido, sin tapar la barra de navegación, y se van solos.
   ================================================================ */
.ns-flash{
  position:relative; z-index:5;
  display:grid; gap:var(--ns-3);
  width:min(1400px, calc(100% - var(--ns-6)));
  margin:var(--ns-4) auto 0;
  transition:opacity .35s ease, transform .35s ease;
}
.ns-flash.is-out{ opacity:0; transform:translateY(-8px); }
.ns-flash .ns-alert{ animation:ns-pop .3s cubic-bezier(.16,1,.3,1) both; }
.ns-alert__close{
  margin-left:auto; align-self:flex-start;
  width:28px; height:28px; flex:0 0 auto;
  display:grid; place-items:center;
  border:0; border-radius:var(--ns-r-sm);
  background:transparent; color:inherit;
  font-size:20px; line-height:1; cursor:pointer;
  opacity:.55; transition:opacity .18s ease, background .18s ease;
}
.ns-alert__close:hover{ opacity:1; background:rgba(255,255,255,.10); }

/* Botón de cierre dentro del menú lateral: tocar la franja de al lado del
   panel deja muy poco margen en pantallas estrechas. */
.ns-nav__cerrar{ display:none; }
@media (max-width:1023px){
  .ns-nav__menu .ns-nav__user{ position:relative; padding-right:56px; }
  .ns-nav__cerrar{
    display:grid; place-items:center;
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:12px;
    border:1px solid var(--ns-border); background:var(--ns-surface);
    color:var(--ns-text-2); font-size:1rem; cursor:pointer;
    transition:color var(--ns-t), background var(--ns-t);
  }
  .ns-nav__cerrar:hover,.ns-nav__cerrar:active{
    color:var(--ns-danger); background:rgba(var(--ns-danger-rgb),.12);
  }
  .ns-nav__menu{ width:min(400px,88vw); }
}

/* En móvil el menú es un panel fijo, así que sale del flujo y la zona de
   botones se quedaba pegada a la marca en medio de la barra. Con esto el
   tema y el menú quedan al borde derecho, donde se alcanzan con el pulgar. */
@media (max-width:1023px){
  .ns-nav__tools{ margin-left:auto !important; gap:6px; }
  .ns-nav__brand{ max-width:min(58%,320px); }
  .ns-nav__brand-txt{ display:block; min-width:0; }
  .ns-nav__brand-name{ font-size:var(--ns-fs-sm); }
  .ns-nav__brand-sub{ display:none; }
}
@media (max-width:420px){
  .ns-nav__brand-txt{ display:none; }
  .ns-nav__tools{ gap:4px; }
}

/* Cabecera del panel: la banda de cifras aprovecha el hueco de la derecha
   en vez de quedarse encogida junto al título. */
.ns-page-head--dense{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--ns-6); flex-wrap:wrap;
}
.ns-page-head--dense .ns-page-head__title{ flex:1 1 380px; min-width:0; }
.ns-page-head__stats{
  flex:0 0 auto;
  display:grid;
  grid-auto-flow:column;            /* una sola fila, sin apilarse */
  grid-auto-columns:minmax(86px,auto);
  gap:var(--ns-4) var(--ns-6);
  align-items:end;
  padding:var(--ns-3) 0 var(--ns-3) var(--ns-6);
  border-left:1px solid var(--ns-border);
}
.ns-page-head__stat{ text-align:right; }
.ns-page-head__stat b{ font-size:1.5rem; letter-spacing:-.02em; }

@media (max-width:900px){
  .ns-page-head__stats{
    flex:1 1 100%;
    border-left:0; border-top:1px solid var(--ns-border);
    padding:var(--ns-4) 0 0;
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  }
  .ns-page-head__stat{ text-align:left; }
}