/* ============================================================================
   nv-modern.css — Sistema soft-UI premium NovaHost (admin + cliente comparten)
   Dirección: moderno suave · sombras difusas · radios amplios · gradiente
   navy→cyan · Sora display / Inter cuerpo · light + dark.
   Objetivo: panel de billing por encima de Hostinger/SiteGround.
   Se carga DESPUÉS de los CSS existentes → gana por cascada.
   ============================================================================ */

:root {
  /* Marca (heredan de los tokens F0 si existen; fallback literal) */
  --nvm-navy:        var(--color-navy, #1E3A5F);
  --nvm-navy-800:    #17304d;
  --nvm-navy-900:    #102338;
  --nvm-cyan:        var(--color-cyan, #0891B2);
  --nvm-cyan-bright: #22B8DC;
  --nvm-amber:       var(--color-amber, #D97706);

  /* Superficie light */
  --nvm-bg:          #f4f6fb;
  --nvm-bg-2:        #eef1f8;
  --nvm-surface:     #ffffff;
  --nvm-surface-2:   #f8fafc;
  --nvm-border:      #e6eaf2;
  --nvm-border-soft: #eef1f7;
  --nvm-ink:         #0f1e30;
  --nvm-ink-soft:    #4a5a70;
  --nvm-ink-mute:    #8592a6;

  /* Escala radios / sombras soft */
  --nvm-r-sm: 10px;
  --nvm-r:    16px;
  --nvm-r-lg: 22px;
  --nvm-r-pill: 999px;

  --nvm-shadow-sm: 0 1px 2px rgba(16,35,56,.04), 0 2px 6px rgba(16,35,56,.05);
  --nvm-shadow:    0 2px 6px rgba(16,35,56,.05), 0 12px 28px -8px rgba(16,35,56,.12);
  --nvm-shadow-lg: 0 8px 20px -6px rgba(16,35,56,.16), 0 30px 60px -20px rgba(16,35,56,.22);
  --nvm-glow-cyan: 0 0 0 1px rgba(34,184,220,.35), 0 8px 24px -6px rgba(8,145,178,.45);

  --nvm-sidebar-w: 264px;
  --nvm-sidebar-w-collapsed: 78px;
  --nvm-font-display: 'Sora', var(--nv-font-display, ui-sans-serif), sans-serif;
  --nvm-font-body: 'Inter', var(--nv-font-body, ui-sans-serif), system-ui, sans-serif;
  --nvm-ease: cubic-bezier(.4,.14,.3,1);
}

/* nv-modern gana la cascada con !important sobre body/.nvm-card/.nvm-kpi/
   alertas/badges/tablas — es la capa que realmente pinta casi toda la UI.
   Alias directo a los tokens ya invertidos en _brand-shared.css (una sola
   fuente de verdad de color, dos namespaces). Navy/cyan de marca (sidebar,
   hero, botones) se dejan intactos: son fondo sólido, no texto — no cambian
   entre temas. */
[data-bs-theme="dark"] {
  --nvm-bg:          var(--nv-page-bg);
  --nvm-bg-2:        var(--nv-border-soft);
  --nvm-surface:     var(--nv-card-bg);
  --nvm-surface-2:   var(--nv-border-soft);
  --nvm-border:      var(--nv-border);
  --nvm-border-soft: var(--nv-border-soft);
  --nvm-ink:         var(--nv-text);
  --nvm-ink-soft:    var(--nv-text-soft);
  --nvm-ink-mute:    var(--nv-text-muted);
}

/* ---------------------------------------------------------------- base */
body {
  background: var(--nvm-bg) !important;
  color: var(--nvm-ink);
  font-family: var(--nvm-font-body);
  -webkit-font-smoothing: antialiased;
}
.nvm h1,.nvm h2,.nvm h3,.nvm h4,
.nvm-display { font-family: var(--nvm-font-display); letter-spacing: -.01em; }

/* ================================================================ SHELL */
.nvm-shell { display: flex; min-height: 100vh; }

/* --------- sidebar navy gradiente --------- */
.nvm-side {
  width: var(--nvm-sidebar-w);
  flex: 0 0 var(--nvm-sidebar-w);
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(34,184,220,.16), transparent 60%),
    linear-gradient(185deg, var(--nvm-navy) 0%, var(--nvm-navy-800) 55%, var(--nvm-navy-900) 100%);
  color: #dce7f2;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  z-index: 40;
  transition: width .28s var(--nvm-ease), flex-basis .28s var(--nvm-ease);
  overflow: hidden;
}
.nvm-side__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 18px;
}
.nvm-side__brand img { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.nvm-side__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.nvm-side__nav::-webkit-scrollbar { width: 5px; }
.nvm-side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }

.nvm-side__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(220,231,242,.42); padding: 16px 12px 6px;
}
.nvm-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0;
  border-radius: var(--nvm-r-sm);
  color: rgba(220,231,242,.78); font-weight: 500; font-size: 14px;
  text-decoration: none; position: relative;
  transition: background .18s var(--nvm-ease), color .18s var(--nvm-ease), transform .18s var(--nvm-ease);
  white-space: nowrap;
}
.nvm-nav-link svg, .nvm-nav-link .nvm-ico { width: 20px; height: 20px; flex: 0 0 20px; opacity: .9; }
.nvm-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.nvm-nav-link.is-active {
  background: linear-gradient(90deg, rgba(34,184,220,.22), rgba(34,184,220,.05));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(34,184,220,.25);
}
.nvm-nav-link.is-active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 4px 4px 0;
  background: linear-gradient(var(--nvm-cyan-bright), var(--nvm-cyan));
  box-shadow: 0 0 14px 1px rgba(34,184,220,.7);
}
.nvm-side__foot { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px; }
.nvm-side__user {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--nvm-r-sm);
  color: #eaf2fb; text-decoration: none;
}
.nvm-side__user:hover { background: rgba(255,255,255,.07); color:#fff; }
.nvm-side__user .avatar { width: 34px; height: 34px; border-radius: 50%; background-size: cover; flex: 0 0 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.nvm-side__user small { color: rgba(220,231,242,.5); }

/* colapsado */
.nvm-shell.is-collapsed .nvm-side { width: var(--nvm-sidebar-w-collapsed); flex-basis: var(--nvm-sidebar-w-collapsed); }
.nvm-shell.is-collapsed .nvm-nav-link span,
.nvm-shell.is-collapsed .nvm-side__label,
.nvm-shell.is-collapsed .nvm-side__brand img,
.nvm-shell.is-collapsed .nvm-side__user > div { display: none; }
.nvm-shell.is-collapsed .nvm-nav-link { justify-content: center; }

/* --------- main --------- */
.nvm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* --------- topbar glass --------- */
.nvm-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 26px;
  background: color-mix(in srgb, var(--nvm-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--nvm-border-soft);
}
.nvm-top__toggle {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--nvm-border);
  background: var(--nvm-surface); color: var(--nvm-ink-soft);
  display: grid; place-items: center; cursor: pointer;
  transition: .18s var(--nvm-ease);
}
.nvm-top__toggle:hover { color: var(--nvm-cyan); box-shadow: var(--nvm-shadow-sm); transform: translateY(-1px); }
.nvm-top__spacer { flex: 1 1 auto; }
.nvm-top__btn {
  height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--nvm-border);
  background: var(--nvm-surface); color: var(--nvm-ink-soft); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  transition: .18s var(--nvm-ease);
}
.nvm-top__btn:hover { color: var(--nvm-cyan); box-shadow: var(--nvm-shadow-sm); transform: translateY(-1px); }
.nvm-top__btn svg,.nvm-top__toggle svg { width: 18px; height: 18px; }

.nvm-content { padding: 26px; max-width: 1440px; width: 100%; margin: 0 auto; }

/* ================================================================ CARDS */
.nvm-card {
  background: var(--nvm-surface);
  border: 1px solid var(--nvm-border);
  border-radius: var(--nvm-r);
  box-shadow: var(--nvm-shadow);
  padding: 22px;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease);
}
.nvm-card--hover:hover { transform: translateY(-3px); box-shadow: var(--nvm-shadow-lg); }
.nvm-card--flush { padding: 0; overflow: hidden; }

/* hero */
.nvm-hero {
  position: relative; overflow: hidden;
  border-radius: var(--nvm-r-lg);
  padding: 30px 32px;
  color: #eaf5fb;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,184,220,.4), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(217,119,6,.22), transparent 60%),
    linear-gradient(120deg, var(--nvm-navy) 0%, var(--nvm-navy-800) 60%, #0a3a52 100%);
  box-shadow: var(--nvm-shadow-lg);
}
.nvm-hero::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.5; pointer-events:none;
}
.nvm-hero__eyebrow { font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,245,251,.6); }
.nvm-hero__title { font-family: var(--nvm-font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 6px 0 4px; letter-spacing:-.02em; color: #eaf5fb; }
.nvm-hero__sub { color: rgba(234,245,251,.72); font-size: 14px; }

/* KPI */
.nvm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 16px; }
.nvm-hero + .nvm-kpis { margin-top: 20px; }
.nvm-kpi {
  background: var(--nvm-surface);
  border: 1px solid var(--nvm-border);
  border-radius: var(--nvm-r);
  padding: 18px 18px 16px;
  box-shadow: var(--nvm-shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease);
}
.nvm-kpi:hover { transform: translateY(-3px); box-shadow: var(--nvm-shadow); }
.nvm-kpi__ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(8,145,178,.14), rgba(34,184,220,.1));
  color: var(--nvm-cyan);
}
.nvm-kpi__ico svg { width: 22px; height: 22px; }
.nvm-kpi--amber .nvm-kpi__ico { background: linear-gradient(135deg, rgba(217,119,6,.16), rgba(217,119,6,.08)); color: var(--nvm-amber); }
.nvm-kpi--navy  .nvm-kpi__ico { background: linear-gradient(135deg, rgba(30,58,95,.14), rgba(30,58,95,.08)); color: var(--nvm-navy); }
.nvm-kpi--ok    .nvm-kpi__ico { background: linear-gradient(135deg, rgba(26,158,106,.16), rgba(26,158,106,.08)); color: #1a9e6a; }
.nvm-kpi--info  .nvm-kpi__ico { background: linear-gradient(135deg, rgba(8,145,178,.16), rgba(8,145,178,.08)); color: var(--nvm-cyan); }
.nvm-kpi--danger .nvm-kpi__ico { background: linear-gradient(135deg, rgba(214,73,73,.16), rgba(214,73,73,.08)); color: #d64949; }
.nvm-kpi__label { font-size: 12.5px; color: var(--nvm-ink-mute); font-weight: 600; }
.nvm-kpi__num { font-family: var(--nvm-font-display); font-size: 30px; font-weight: 700; color: var(--nvm-ink); line-height: 1.1; letter-spacing: -.02em; margin-top: 2px; }
.nvm-kpi__foot { font-size: 12px; color: var(--nvm-ink-mute); margin-top: 8px; display:flex; align-items:center; gap:6px; }
.nvm-kpi__trend-up { color:#1a9e6a; font-weight:700; }
.nvm-kpi__trend-dn { color:#d64949; font-weight:700; }
.nvm-kpi__spark { position:absolute; right:0; bottom:0; left:0; height:38px; opacity:.5; pointer-events:none; }

/* sección */
.nvm-sec { margin-top: 26px; }
.nvm-sec__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; }
.nvm-sec__title { font-family: var(--nvm-font-display); font-size: 17px; font-weight: 700; color: var(--nvm-ink); letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.nvm-sec__title::before { content:""; width:8px;height:22px;border-radius:4px;background:linear-gradient(var(--nvm-cyan-bright),var(--nvm-cyan)); box-shadow:0 4px 10px -2px rgba(8,145,178,.5); }

/* botones */
.nvm-btn {
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px; border-radius: 13px;
  font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:.18s var(--nvm-ease);
}
.nvm-btn--primary { color:#fff; background: linear-gradient(135deg, var(--nvm-cyan-bright), var(--nvm-cyan)); box-shadow: 0 8px 20px -6px rgba(8,145,178,.5); }
.nvm-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--nvm-glow-cyan); color:#fff; }
.nvm-btn--ghost { color: var(--nvm-ink-soft); background: var(--nvm-surface); border-color: var(--nvm-border); }
.nvm-btn--ghost:hover { color: var(--nvm-cyan); border-color: var(--nvm-cyan); transform: translateY(-2px); box-shadow: var(--nvm-shadow-sm); }

/* alert soft */
.nvm-alert {
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius: var(--nvm-r);
  background: var(--nvm-surface); border:1px solid var(--nvm-border); box-shadow: var(--nvm-shadow-sm);
  margin-bottom: 12px; position:relative; overflow:hidden;
}
.nvm-alert::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.nvm-alert--danger::before { background: linear-gradient(#f26d6d,#d64949); }
.nvm-alert--warn::before   { background: linear-gradient(#f2b34e,var(--nvm-amber)); }
.nvm-alert--info::before   { background: linear-gradient(var(--nvm-cyan-bright),var(--nvm-cyan)); }
.nvm-alert__ico { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 38px; }
.nvm-alert--danger .nvm-alert__ico { background:rgba(214,73,73,.12); color:#d64949; }
.nvm-alert--warn .nvm-alert__ico   { background:rgba(217,119,6,.13); color:var(--nvm-amber); }
.nvm-alert--info .nvm-alert__ico   { background:rgba(8,145,178,.12); color:var(--nvm-cyan); }
.nvm-alert h4 { font-family:var(--nvm-font-display); font-size:14.5px; font-weight:700; margin:0 0 2px; color:var(--nvm-ink); }
.nvm-alert p { margin:0; font-size:13px; color:var(--nvm-ink-soft); }

/* badge */
.nvm-badge { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius: var(--nvm-r-pill); font-size:12px; font-weight:600; }
.nvm-badge--ok    { background:rgba(26,158,106,.12); color:#1a9e6a; }
.nvm-badge--warn  { background:rgba(217,119,6,.13); color:var(--nvm-amber); }
.nvm-badge--info  { background:rgba(8,145,178,.12); color:var(--nvm-cyan); }
.nvm-badge--muted { background:var(--nvm-bg-2); color:var(--nvm-ink-mute); }
.nvm-badge--danger { background:rgba(220,38,38,.13); color:#dc2626; }

/* grid helpers */
.nvm-grid { display:grid; gap:16px; }
.nvm-grid--2 { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.nvm-grid--3 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }

/* page-load stagger */
@keyframes nvm-rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.nvm-rise { animation: nvm-rise .5s var(--nvm-ease) both; }
.nvm-rise:nth-child(1){animation-delay:.02s}.nvm-rise:nth-child(2){animation-delay:.07s}
.nvm-rise:nth-child(3){animation-delay:.12s}.nvm-rise:nth-child(4){animation-delay:.17s}
.nvm-rise:nth-child(5){animation-delay:.22s}.nvm-rise:nth-child(6){animation-delay:.27s}

/* responsive: sidebar off-canvas en móvil */
@media (max-width: 992px) {
  .nvm-side {
    position: fixed; left: 0; top: 0; height: 100vh;
    transform: translateX(-100%); box-shadow: var(--nvm-shadow-lg);
    transition: transform .3s var(--nvm-ease);
  }
  .nvm-shell.is-open .nvm-side { transform: none; }
  .nvm-content { padding: 18px; }
  .nvm-backdrop { position:fixed; inset:0; background:rgba(10,20,34,.5); opacity:0; visibility:hidden; transition:.25s; z-index:39; }
  .nvm-shell.is-open .nvm-backdrop { opacity:1; visibility:visible; }
}
@media (prefers-reduced-motion: reduce) { .nvm-rise { animation: none; } * { transition: none !important; } }

/* ============================================================================
   F3 — Override soft-UI de las clases legacy del dashboard/páginas (nha-*, card).
   Restyle sin reescribir templates: todas las páginas heredan el look premium.
   ============================================================================ */

/* hero welcome → navy gradiente premium.
   Cubre variante admin (.nha-*) Y cliente (.nhd-*) para paridad total. */
.nvm :is(.nha-welcome, .nhd-welcome), .nvm-content :is(.nha-welcome, .nhd-welcome) {
  position: relative; overflow: hidden;
  border: none !important; border-radius: var(--nvm-r-lg) !important;
  color: #eaf5fb !important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,184,220,.42), transparent 55%),
    radial-gradient(90% 130% at 0% 100%, rgba(217,119,6,.22), transparent 60%),
    linear-gradient(120deg, var(--nvm-navy) 0%, var(--nvm-navy-800) 60%, #0a3a52 100%) !important;
  box-shadow: var(--nvm-shadow-lg) !important;
  padding: 30px 32px !important;
}
.nvm :is(.nha-welcome, .nhd-welcome)::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.5;
}
.nvm :is(.nha-welcome-pretitle, .nhd-welcome-pretitle) { color: rgba(234,245,251,.62) !important; letter-spacing:.16em; font-weight:700; }
.nvm :is(.nha-welcome-hello, .nhd-welcome-hello) { font-family: var(--nvm-font-display) !important; font-weight:700 !important; letter-spacing:-.02em; color:#fff !important; }
.nvm :is(.nha-welcome-sub, .nhd-welcome-sub, .nha-welcome-text, .nhd-welcome-text) { color: rgba(234,245,251,.72) !important; }

/* KPI cards → soft shadow, radios amplios, hover lift (admin .nha-* + cliente .nhd-*) */
.nvm :is(.nha-kpi, .nhd-kpi) {
  background: var(--nvm-surface) !important;
  border: 1px solid var(--nvm-border) !important;
  border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease) !important;
}
.nvm :is(.nha-kpi, .nhd-kpi):hover { transform: translateY(-3px); box-shadow: var(--nvm-shadow) !important; }
.nvm :is(.nha-kpi-number, .nhd-kpi-number) { font-family: var(--nvm-font-display) !important; font-weight:700 !important; letter-spacing:-.02em; color: var(--nvm-ink) !important; }
.nvm :is(.nha-kpi-icon, .nhd-kpi-icon) {
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(8,145,178,.14), rgba(34,184,220,.1)) !important;
  color: var(--nvm-cyan) !important;
}
.nvm :is(.nha-kpi-icon, .nhd-kpi-icon) svg { width: 22px; height: 22px; }
.nvm :is(.nha-kpi-label, .nhd-kpi-label) { color: var(--nvm-ink-mute) !important; font-weight:600; }

/* alerts → soft card con acento izquierdo */
.nvm .nha-alert {
  border: 1px solid var(--nvm-border) !important;
  border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important;
  background: var(--nvm-surface) !important;
  position: relative; overflow: hidden;
}
.nvm .nha-alert::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient(var(--nvm-cyan-bright), var(--nvm-cyan)); }
.nvm .nha-alert--danger::before, .nvm .nha-alert.nha-alert--danger::before { background: linear-gradient(#f26d6d,#d64949); }
.nvm .nha-alert--warning::before { background: linear-gradient(#f2b34e,var(--nvm-amber)); }
.nvm .nha-alert-icon { border-radius: 12px !important; }
.nvm .nha-alert-body h4, .nvm .nha-alert h4 { font-family: var(--nvm-font-display) !important; font-weight:700 !important; color: var(--nvm-ink) !important; }

/* quick tiles → soft card hover lift */
.nvm .nha-quick-tile {
  border: 1px solid var(--nvm-border) !important;
  border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important;
  background: var(--nvm-surface) !important;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease) !important;
}
.nvm .nha-quick-tile:hover { transform: translateY(-4px); box-shadow: var(--nvm-shadow) !important; border-color: rgba(34,184,220,.4) !important; }
.nvm .nha-quick-tile-icon { border-radius: 13px !important; background: linear-gradient(135deg, rgba(8,145,178,.12), rgba(34,184,220,.08)) !important; color: var(--nvm-cyan) !important; }
.nvm .nha-quick-tile-title { font-family: var(--nvm-font-display) !important; font-weight:700 !important; color: var(--nvm-ink) !important; }

/* section titles → Sora + barra cyan */
.nvm .nha-section-title { font-family: var(--nvm-font-display) !important; font-weight:700 !important; color: var(--nvm-ink) !important; letter-spacing:-.01em; }

/* sysstatus panel → soft card */
.nvm .nha-sysstatus {
  border: 1px solid var(--nvm-border) !important; border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important; background: var(--nvm-surface) !important;
}
.nvm .nha-sysstatus-value { font-family: var(--nvm-font-display) !important; font-weight:600 !important; color: var(--nvm-ink) !important; }

/* cards Tabler genéricos y nv-* → soft shadow + radios */
.nvm .card, .nvm-content .card, .nvm .nv-card, .nvm .nv-ed-card {
  border: 1px solid var(--nvm-border) !important;
  border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow) !important;
}
/* botones primarios Tabler/nv → gradiente cyan premium */
.nvm .btn-primary, .nvm .nv-btn-primary, .nvm-content .btn-primary {
  background: linear-gradient(135deg, var(--nvm-cyan-bright), var(--nvm-cyan)) !important;
  border: none !important; border-radius: 12px !important;
  box-shadow: 0 8px 20px -6px rgba(8,145,178,.5) !important;
  transition: .18s var(--nvm-ease) !important;
}
.nvm .btn-primary:hover, .nvm .nv-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--nvm-glow-cyan) !important; }
.nvm .btn { border-radius: 11px !important; }

/* tablas → líneas finas, header Sora */
.nvm table.table thead th, .nvm .nv-table thead th { font-family: var(--nvm-font-display) !important; font-weight:700; color: var(--nvm-ink-soft) !important; border-bottom:1px solid var(--nvm-border) !important; }
.nvm table.table td, .nvm table.table th { border-color: var(--nvm-border-soft) !important; }

/* breadcrumb más limpio (si aparece) */
.nvm .breadcrumb { background: transparent; padding-left:0; }

/* ============================================================================
   NOVA CLIENTE — el resto de este archivo cubre las clases del portal
   cliente (nhd-*) que SÍ viven fuera de .nvm-content (áreas legacy/page).
   .nhd-welcome/.nhd-welcome-hello consolidados 2026-07-10: el bloque
   ".nvm :is(.nha-welcome,.nhd-welcome)..." de arriba ya gana por
   especificidad en toda página cliente real (todas usan nvm-shell con
   .nvm-content) — verificado con getComputedStyle en vivo. La copia que
   vivía aquí (sin scope .nvm) era dead code, eliminada.
   ============================================================================ */
.nhd-kpi, .nx-card, .nhd-recommend-card {
  border: 1px solid var(--nvm-border) !important;
  border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important;
  background: var(--nvm-surface) !important;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease) !important;
}
.nhd-kpi:hover, .nhd-recommend-card:hover { transform: translateY(-3px); box-shadow: var(--nvm-shadow) !important; }
.nhd-kpi-number { font-family: var(--nvm-font-display) !important; font-weight:700 !important; letter-spacing:-.02em; color: var(--nvm-ink) !important; }
.nhd-kpi-icon, .nhd-quick-tile-icon, .nhd-recommend-icon { border-radius: 13px !important; background: linear-gradient(135deg, rgba(8,145,178,.12), rgba(34,184,220,.08)) !important; color: var(--nvm-cyan) !important; }
.nhd-kpi-label { color: var(--nvm-ink-mute) !important; font-weight:600; }

.nhd-quick-tile {
  border: 1px solid var(--nvm-border) !important; border-radius: var(--nvm-r) !important;
  box-shadow: var(--nvm-shadow-sm) !important; background: var(--nvm-surface) !important;
  transition: transform .22s var(--nvm-ease), box-shadow .22s var(--nvm-ease) !important;
}
.nhd-quick-tile:hover { transform: translateY(-4px); box-shadow: var(--nvm-shadow) !important; border-color: rgba(34,184,220,.4) !important; }
.nhd-quick-tile-title, .nhd-section-title, .nhd-recommend-card-header { font-family: var(--nvm-font-display) !important; font-weight:700 !important; color: var(--nvm-ink) !important; }

/* cards genéricos + botones cliente premium */
.page .card, .nv-card { border:1px solid var(--nvm-border) !important; border-radius: var(--nvm-r) !important; box-shadow: var(--nvm-shadow) !important; }
.page .btn-primary, .nv-btn-primary, .nv-btn.nv-btn-primary {
  background: linear-gradient(135deg, var(--nvm-cyan-bright), var(--nvm-cyan)) !important;
  border:none !important; border-radius: 12px !important;
  box-shadow: 0 8px 20px -6px rgba(8,145,178,.5) !important; transition:.18s var(--nvm-ease) !important;
}
.page .btn-primary:hover, .nv-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--nvm-glow-cyan) !important; }
.page .btn, .nv-btn { border-radius: 11px !important; }

/* funnel/storefront hero (home) */
.nv-hero, .nvf-hero, .nhd-hero { border-radius: var(--nvm-r-lg) !important; }

/* Generic hidden utility - !important needed to beat Bootstrap/Tabler's
   own component display rules (e.g. .alert{display:flex}) by source
   order. Safe here because toggling is always via classList.add/remove,
   never el.style.display (which !important WOULD break). */
.nvm-hidden { display: none !important; }