/* ============================================================================
nv-estacion.css — Sistema de diseño "Estación" (panel admin NovaHost).
Consola de operaciones: densa, técnica, datos en mono, cian-señal.
Marca real: navy #1E3A5F · cian #0891B2/#22D3EE · ámbar #D97706 · verde #059669.
Fuentes: Sora (títulos) · Inter (UI) · JetBrains Mono (datos).
Ritmo de radios: superficies casi rectas, redondez solo en status-pills/avatares.
Tema por defecto CLARO; oscuro via [data-bs-theme="dark"].
Se carga ÚLTIMO → gana la cascada. Componentes con namespace nvx-* (nuevos,
nv-modern.css no los toca → sin guerra de !important). Solo el shell/canvas
se sobre-escribe puntualmente sobre nv-modern.
Spec: docs/superpowers/specs/2026-07-19-estacion-admin-redesign-design.md
============================================================================ */
:root{
/* Marca */
--nvx-navy:#1E3A5F; --nvx-navy-900:#0a1628; --nvx-navy-800:#17304d;
--nvx-cyan:#0891B2; --nvx-cyan-bright:#22D3EE; --nvx-amber:#D97706; --nvx-amber-bright:#FBBF24;
/* Superficie — CLARO (default) */
--nvx-canvas:#EEF2F7;
--nvx-surface:#FFFFFF;
--nvx-surface-2:#F6F8FB;
--nvx-ink:#12233B;
--nvx-ink-soft:#3B4A60;
--nvx-muted:#64748B;
--nvx-line:#E2E8F0;
--nvx-line-strong:#CBD5E1;
--nvx-accent:#0891B2;
--nvx-accent-ink:#0E6E86;
--nvx-accent-soft:#E0F2F7;
--nvx-good:#059669; --nvx-good-soft:#E3F4EC;
--nvx-warn:#D97706; --nvx-warn-soft:#FBEEDB;
--nvx-crit:#DC2626; --nvx-crit-soft:#FBE6E6;
--nvx-info:#0891B2; --nvx-info-soft:#E0F2F7;
/* Texto sobre fondos suaves tintados: más oscuro en claro para contraste ≥4.5. */
--nvx-good-ink:#047857; --nvx-warn-ink:#92400E; --nvx-crit-ink:#B91C1C;
/* Radios — recto dominante */
--nvx-r-surface:4px;
--nvx-r-control:6px;
--nvx-r-data:2px;
--nvx-r-pill:999px;
/* Sombra restringida (consola: estructura por líneas) */
--nvx-shadow:0 1px 2px rgba(18,35,59,.05), 0 6px 16px -10px rgba(18,35,59,.16);
--nvx-shadow-hover:0 2px 4px rgba(18,35,59,.06), 0 14px 30px -12px rgba(18,35,59,.22);
/* Tipografía */
--nvx-display:'Sora','Inter',ui-sans-serif,system-ui,sans-serif;
--nvx-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
--nvx-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,'Cascadia Code',Consolas,monospace;
}
[data-bs-theme="dark"]{
--nvx-canvas:#081120;
--nvx-surface:#0C1D34;
--nvx-surface-2:#0D2138;
--nvx-ink:#D9E4F5;
--nvx-ink-soft:#A6BAD8;
--nvx-muted:#7488A8;
--nvx-line:#193052;
--nvx-line-strong:#24406B;
--nvx-accent:#22D3EE;
--nvx-accent-ink:#7FE7F5;
--nvx-accent-soft:rgba(34,211,238,.12);
--nvx-good:#10B981; --nvx-good-soft:rgba(16,185,129,.14);
--nvx-warn:#FBBF24; --nvx-warn-soft:rgba(217,119,6,.18);
--nvx-crit:#F87171; --nvx-crit-soft:rgba(239,68,68,.16);
--nvx-info:#22D3EE; --nvx-info-soft:rgba(34,211,238,.12);
/* En oscuro el brillante ya contrasta sobre el soft translúcido. */
--nvx-good-ink:#34D399; --nvx-warn-ink:#FBBF24; --nvx-crit-ink:#F87171;
--nvx-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5);
--nvx-shadow-hover:0 2px 4px rgba(0,0,0,.35), 0 16px 34px -14px rgba(0,0,0,.6);
}
/* ============================================================================
0. CANVAS + SHELL — override puntual sobre nv-modern (!important necesario)
El sidebar navy es el ancla de marca en ambos temas (no flipea).
============================================================================ */
/* html + body al mismo canvas: si sólo body lo lleva, el overscroll/scroll deja
asomar el bg de html (Tabler lo pone #F9FAFB) y "el background cambia". */
html, body{ background:var(--nvx-canvas) !important; }
body{
font-family:var(--nvx-body) !important;
color:var(--nvx-ink);
}
.nvm-content, .nvm-main{ background:transparent !important; }
.nvm-content{ font-family:var(--nvx-body); }
/* Sidebar navy anclado (retune de radios/acento cian) */
.nvm-side{ background:linear-gradient(180deg,#0a1628 0%,#122a47 55%,#1E3A5F 100%) !important; }
.nvm-nav-link{ border-radius:var(--nvx-r-control) !important; }
.nvm-nav-link.is-active{
background:rgba(34,211,238,.14) !important;
color:#8FE9F5 !important;
box-shadow:inset 3px 0 0 var(--nvx-cyan-bright) !important;
}
.nvm-nav-link.is-active .nvm-ico{ color:#8FE9F5 !important; }
/* Topbar limpio sobre el canvas */
.nvm-top{
background:var(--nvx-surface) !important;
border-bottom:1px solid var(--nvx-line) !important;
}
.nvm-top__btn, .nvm-top__toggle{
border-radius:var(--nvx-r-control) !important;
color:var(--nvx-ink-soft) !important;
}
.nvm-top__btn:hover, .nvm-top__toggle:hover{
background:var(--nvx-surface-2) !important; color:var(--nvx-accent-ink) !important;
}
/* Breadcrumb Estación — limpio y minimal. Sobrescribe el arrow-pill pesado de
custom-admin-nv.css (los pills gris #EAEAEA quedaban casi invisibles sobre el
fondo Estática y el solape negativo encimaba la flecha navy = costura). Ahora:
enlaces atenuados + separador chevron sutil + activo en tinta. nv-estacion.css
carga última → vence sin !important salvo color (custom lo marca !important). */
.nvm-breadcrumb-bar{ margin:0; }
.breadcrumb{
display:flex; flex-wrap:wrap; align-items:center; gap:1px;
margin:0 0 2px; padding:0; background:transparent; list-style:none;
}
.breadcrumb-item{ display:inline-flex; align-items:center; }
.breadcrumb-item + .breadcrumb-item{ margin-left:0; }
.breadcrumb-item + .breadcrumb-item::before{
content:""; flex:none; width:6px; height:6px; margin:0 6px;
border-right:1.6px solid var(--nvx-muted); border-bottom:1.6px solid var(--nvx-muted);
transform:rotate(-45deg); opacity:.55;
}
.breadcrumb-item > a,
.breadcrumb-item.active{
display:inline-flex; align-items:center; gap:6px;
background:transparent; clip-path:none; border-radius:7px;
padding:4px 8px; font-size:12.5px; font-weight:500; line-height:1.4;
color:var(--nvx-muted) !important; text-decoration:none;
}
.breadcrumb-item:first-child > a{ padding-left:8px; clip-path:none; border-radius:7px; }
.breadcrumb-item > a:hover{ background:var(--nvx-surface-2, var(--nvx-surface)); color:var(--nvx-accent-ink) !important; }
.breadcrumb-item.active{ color:var(--nvx-ink) !important; font-weight:700; }
.breadcrumb-item .icon, .breadcrumb-item svg{ width:14px; height:14px; }
/* Contenedor de página */
.nvx-wrap{
max-width:1360px; margin:0 auto; padding:22px clamp(14px,2.2vw,26px) 40px;
display:flex; flex-direction:column; gap:16px; font-family:var(--nvx-body); color:var(--nvx-ink);
}
/* ============================================================================
1. SECTION TITLE
============================================================================ */
.nvx-sectitle{ display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.nvx-sectitle h3{
margin:0; font-family:var(--nvx-display); font-size:14px; font-weight:700;
letter-spacing:-.01em; color:var(--nvx-ink); display:flex; align-items:center; gap:9px;
}
.nvx-sectitle__ico{
width:28px; height:28px; border-radius:var(--nvx-r-data); flex:none;
display:grid; place-items:center; background:var(--nvx-accent-soft); color:var(--nvx-accent-ink);
}
.nvx-sectitle__ico svg{ width:16px; height:16px; }
.nvx-sectitle .nvx-spacer{ flex:1; }
.nvx-link{
font-size:12px; font-weight:600; color:var(--nvx-accent-ink); text-decoration:none;
display:inline-flex; align-items:center; gap:5px;
}
.nvx-link:hover{ text-decoration:underline; }
.nvx-link svg{ width:13px; height:13px; }
/* ============================================================================
2. HERO — greeting band
============================================================================ */
.nvx-hero{
/* overflow:visible (no hidden) para que los dropdown-menu de acciones del hero
(p. ej. "Herramientas de facturación") no queden recortados por el hero.
El redondeo de la rejilla decorativa se movió a ::before (border-radius:inherit). */
position:relative; overflow:visible;
background:linear-gradient(135deg,#0a1628 0%,#1E3A5F 60%,#0a1f3d 100%);
color:#EAF1FF; border-radius:var(--nvx-r-surface);
padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.nvx-hero::before{ /* rejilla cian — firma de marca */
content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; border-radius:inherit;
background-image:linear-gradient(rgba(8,145,178,.13) 1px,transparent 1px),
linear-gradient(90deg,rgba(8,145,178,.13) 1px,transparent 1px);
background-size:28px 28px;
-webkit-mask-image:linear-gradient(120deg,#000,transparent 70%);
mask-image:linear-gradient(120deg,#000,transparent 70%);
}
.nvx-hero__text{ position:relative; z-index:1; min-width:0; }
.nvx-hero__pre{
font-family:var(--nvx-mono); font-size:11px; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; color:#7FD9EA; margin-bottom:6px;
}
.nvx-hero__title{
margin:0 0 4px; font-family:var(--nvx-display); font-size:clamp(20px,2.6vw,27px);
font-weight:800; letter-spacing:-.02em; text-wrap:balance;
/* El hero es navy en ambos temas → texto claro SIEMPRE. !important vence a la
regla h1{color:navy !important} de nv-modern que lo dejaba navy-sobre-navy en claro. */
color:#EAF1FF !important;
}
.nvx-hero__sub{ margin:0; font-size:13px; color:#C0D2EC !important; }
.nvx-hero__pre{ color:#7FD9EA !important; }
.nvx-hero__sub .nvx-dot{ color:#7FD9EA; margin:0 4px; }
.nvx-hero__side{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.nvx-hero__avatar{
width:52px; height:52px; border-radius:var(--nvx-r-pill); flex:none;
background-size:cover; background-position:center; border:2px solid rgba(127,217,234,.4);
}
/* ============================================================================
3. STATUS PILL — redondo (elemento orgánico)
============================================================================ */
.nvx-pill{
display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
font-size:11.5px; font-weight:600; padding:6px 13px; border-radius:var(--nvx-r-pill);
background:rgba(16,185,129,.16); color:#A7F3D0;
}
.nvx-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:#34D399; }
.nvx-pill--warn{ background:rgba(217,119,6,.18); color:#FCD9A0; }
.nvx-pill--warn::before{ background:var(--nvx-amber-bright); }
.nvx-pill--danger{ background:rgba(239,68,68,.2); color:#FCA5A5; }
.nvx-pill--danger::before{ background:#F87171; }
.nvx-pill--info{ background:rgba(148,163,184,.18); color:#CBD5E1; }
.nvx-pill--info::before{ background:#94A3B8; }
/* ============================================================================
4. ALERTS — franja de severidad recta + icon-tile cuadrado
============================================================================ */
.nvx-alert{
display:flex; gap:13px; align-items:flex-start; padding:14px 16px;
background:var(--nvx-surface); border:1px solid var(--nvx-line);
border-left:3px solid var(--nvx-muted); border-radius:var(--nvx-r-surface);
box-shadow:var(--nvx-shadow);
}
.nvx-alert--danger{ border-left-color:var(--nvx-crit); }
.nvx-alert--warning{ border-left-color:var(--nvx-warn); }
.nvx-alert--info{ border-left-color:var(--nvx-info); }
.nvx-alert--success{ border-left-color:var(--nvx-good); }
.nvx-alert--success .nvx-alert__ico{ background:var(--nvx-good-soft, var(--nvx-surface-2)); color:var(--nvx-good); }
.nvx-alert__ico{
width:34px; height:34px; border-radius:var(--nvx-r-data); flex:none;
display:grid; place-items:center; background:var(--nvx-surface-2); color:var(--nvx-muted);
}
.nvx-alert--danger .nvx-alert__ico{ background:var(--nvx-crit-soft); color:var(--nvx-crit); }
.nvx-alert--warning .nvx-alert__ico{ background:var(--nvx-warn-soft); color:var(--nvx-warn); }
.nvx-alert--info .nvx-alert__ico{ background:var(--nvx-info-soft); color:var(--nvx-accent-ink); }
.nvx-alert__ico svg{ width:19px; height:19px; }
.nvx-alert__body{ flex:1; min-width:0; }
.nvx-alert__body h4{ margin:0 0 2px; font-size:14px; font-weight:700; color:var(--nvx-ink); }
.nvx-alert__body p{ margin:0; font-size:12.5px; color:var(--nvx-muted); }
.nvx-alert__body p strong{ color:var(--nvx-ink); }
.nvx-alert__action{ margin-top:10px; }
/* Input nativo de color como swatch compacto (input-group junto al hex) */
.nvx-inp--color{ width:46px; min-width:46px; padding:4px; cursor:pointer; }
.nvx-inp--color::-webkit-color-swatch-wrapper{ padding:0; }
.nvx-inp--color::-webkit-color-swatch{ border:none; border-radius:calc(var(--nvx-r-inp, 8px) - 4px); }
/* Toast Estación (FOSSBilling.message) — reemplaza el look Bootstrap por tarjeta
soft con acento lateral por tipo + punto de estado. */
.toast-container{ z-index:1090; padding:16px; }
.nvx-toast.toast{
background:var(--nvx-surface); border:1px solid var(--nvx-line);
border-left:3px solid var(--nvx-muted); border-radius:var(--nvx-r-surface);
box-shadow:var(--nvx-shadow); overflow:hidden; min-width:300px; max-width:380px;
font-family:var(--nvx-body);
}
.nvx-toast--success{ border-left-color:var(--nvx-good); }
.nvx-toast--danger{ border-left-color:var(--nvx-crit); }
.nvx-toast--warning{ border-left-color:var(--nvx-warn); }
.nvx-toast--primary{ border-left-color:var(--nvx-info); }
.nvx-toast .toast-header{ background:transparent; border-bottom:0; padding:11px 13px 2px; color:var(--nvx-ink); }
.nvx-toast .toast-header strong{ font-size:12.5px; font-weight:700; color:var(--nvx-ink); }
.nvx-toast .toast-body{ padding:2px 13px 12px; font-size:13px; color:var(--nvx-muted); line-height:1.45; }
/* punto de estado (reemplaza el círculo bg-* de Bootstrap) */
.nvx-toast .toast-header span[class*="rounded-circle"]{ width:11px !important; height:11px !important; padding:0 !important; border:0 !important; border-radius:50%; flex:none; }
.nvx-toast--success .toast-header span[class*="rounded-circle"]{ background:var(--nvx-good) !important; }
.nvx-toast--danger .toast-header span[class*="rounded-circle"]{ background:var(--nvx-crit) !important; }
.nvx-toast--warning .toast-header span[class*="rounded-circle"]{ background:var(--nvx-warn) !important; }
.nvx-toast--primary .toast-header span[class*="rounded-circle"]{ background:var(--nvx-info) !important; }
/* ============================================================================
5. QUICK ACTIONS
============================================================================ */
.nvx-quick{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.nvx-qtile{
display:flex; align-items:center; gap:11px; padding:13px 14px; text-decoration:none;
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
color:var(--nvx-ink); transition:transform .12s, box-shadow .12s, border-color .12s;
}
.nvx-qtile:hover{ transform:translateY(-2px); box-shadow:var(--nvx-shadow-hover); border-color:var(--nvx-accent); }
.nvx-qtile__ico{
width:36px; height:36px; border-radius:var(--nvx-r-data); flex:none; display:grid; place-items:center;
background:var(--nvx-accent-soft); color:var(--nvx-accent-ink);
}
.nvx-qtile__ico svg{ width:19px; height:19px; }
.nvx-qtile--primary .nvx-qtile__ico{ background:var(--nvx-navy); color:#fff; }
.nvx-qtile--danger .nvx-qtile__ico{ background:var(--nvx-crit-soft); color:var(--nvx-crit); }
.nvx-qtile__title{ font-size:13px; font-weight:600; display:block; line-height:1.15; }
.nvx-qtile__desc{ font-size:11px; color:var(--nvx-muted); display:block; }
/* ============================================================================
6. KPI TILES — icon-tile cuadrado + número mono + chip estado
============================================================================ */
.nvx-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.nvx-kpi{
display:flex; flex-direction:column; gap:11px; padding:15px; text-decoration:none;
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
color:var(--nvx-ink); position:relative; overflow:hidden;
transition:transform .12s, box-shadow .12s, border-color .12s;
}
.nvx-kpi:hover{ transform:translateY(-2px); box-shadow:var(--nvx-shadow-hover); border-color:var(--nvx-accent); }
.nvx-kpi__top{ display:flex; align-items:center; justify-content:space-between; }
.nvx-kpi__ico{
width:36px; height:36px; border-radius:var(--nvx-r-data); flex:none; display:grid; place-items:center;
background:var(--nvx-accent-soft); color:var(--nvx-accent-ink);
}
.nvx-kpi__ico svg{ width:19px; height:19px; }
.nvx-kpi__chev{ color:var(--nvx-muted); opacity:.5; }
.nvx-kpi__chev svg{ width:18px; height:18px; }
.nvx-kpi__num{
font-family:var(--nvx-mono); font-size:clamp(21px,2.4vw,27px); font-weight:700;
letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--nvx-ink);
}
.nvx-kpi__label{ font-size:12px; color:var(--nvx-muted); margin-top:4px; }
.nvx-kpi__sub{
font-family:var(--nvx-mono); font-size:11px; font-weight:600; width:fit-content;
display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--nvx-r-data);
color:var(--nvx-muted); background:var(--nvx-surface-2);
}
.nvx-kpi__sub--ok{ color:var(--nvx-good-ink); background:var(--nvx-good-soft); }
.nvx-kpi__sub--warn{ color:var(--nvx-warn-ink); background:var(--nvx-warn-soft); }
.nvx-kpi__sub--danger{ color:var(--nvx-crit-ink); background:var(--nvx-crit-soft); }
.nvx-kpi__sub--info{ color:var(--nvx-accent-ink); background:var(--nvx-info-soft); }
/* Acento superior por color (recto) */
.nvx-kpi--green::before,.nvx-kpi--cyan::before,.nvx-kpi--amber::before,
.nvx-kpi--navy::before,.nvx-kpi--purple::before,.nvx-kpi--teal::before{
content:""; position:absolute; top:0; left:0; right:0; height:3px;
}
.nvx-kpi--green::before{ background:var(--nvx-good); }
.nvx-kpi--cyan::before{ background:var(--nvx-cyan); }
.nvx-kpi--amber::before{ background:var(--nvx-amber); }
.nvx-kpi--navy::before{ background:var(--nvx-navy); }
.nvx-kpi--purple::before{ background:#7C3AED; }
.nvx-kpi--teal::before{ background:#0D9488; }
/* ============================================================================
7. ACTIVITY / DATA CARDS
============================================================================ */
.nvx-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.nvx-card{
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
box-shadow:var(--nvx-shadow); overflow:hidden; display:flex; flex-direction:column;
}
.nvx-card__h{ display:flex; align-items:center; gap:10px; padding:14px 16px 10px; }
.nvx-card__h h3{
margin:0; font-family:var(--nvx-display); font-size:13.5px; font-weight:700; color:var(--nvx-ink);
display:flex; align-items:center; gap:9px; flex:1;
}
.nvx-card__h .nvx-sectitle__ico{ width:26px; height:26px; }
.nvx-row{
display:flex; align-items:center; gap:11px; padding:10px 16px; text-decoration:none;
border-top:1px solid var(--nvx-line); color:var(--nvx-ink); transition:background .1s;
}
.nvx-row:hover{ background:var(--nvx-surface-2); }
.nvx-row__ico{
width:32px; height:32px; border-radius:var(--nvx-r-data); flex:none; display:grid; place-items:center;
background:var(--nvx-surface-2); color:var(--nvx-muted);
}
.nvx-row__ico svg{ width:17px; height:17px; }
.nvx-row__ico--ok{ background:var(--nvx-good-soft); color:var(--nvx-good); }
.nvx-row__ico--warn{ background:var(--nvx-warn-soft); color:var(--nvx-warn); }
.nvx-row__ico--danger{ background:var(--nvx-crit-soft); color:var(--nvx-crit); }
.nvx-row__ico--info{ background:var(--nvx-info-soft); color:var(--nvx-accent-ink); }
.nvx-row__body{ flex:1; min-width:0; }
.nvx-row__title{
font-size:12.5px; font-weight:600; color:var(--nvx-ink); display:block;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nvx-row__meta{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--nvx-muted); margin-top:2px; }
.nvx-row__right{ text-align:right; flex:none; }
.nvx-row__amount{ font-family:var(--nvx-mono); font-size:12.5px; font-weight:700; color:var(--nvx-ink); display:block; font-variant-numeric:tabular-nums; }
.nvx-row__time{ font-family:var(--nvx-mono); font-size:10.5px; color:var(--nvx-muted); }
.nvx-empty{ padding:28px 16px; text-align:center; color:var(--nvx-muted); font-size:12.5px; }
.nvx-empty svg{ width:26px; height:26px; color:var(--nvx-good); margin-bottom:6px; }
.nvx-empty strong{ display:block; color:var(--nvx-ink); font-size:13px; margin-bottom:2px; }
/* ============================================================================
8. BADGES — chip recto (dato) vs pill (estado)
============================================================================ */
.nvx-badge{
font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:var(--nvx-r-pill);
background:var(--nvx-surface-2); color:var(--nvx-muted); white-space:nowrap;
}
.nvx-badge--ok{ color:var(--nvx-good-ink); background:var(--nvx-good-soft); }
.nvx-badge--warn{ color:var(--nvx-warn-ink); background:var(--nvx-warn-soft); }
.nvx-badge--danger{ color:var(--nvx-crit-ink); background:var(--nvx-crit-soft); }
.nvx-badge--info{ color:var(--nvx-accent-ink); background:var(--nvx-info-soft); }
/* ============================================================================
9. BUTTONS
============================================================================ */
.nvx-btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
font-family:var(--nvx-body); font-size:13px; font-weight:600; line-height:1;
padding:9px 15px; border-radius:var(--nvx-r-control); border:1px solid transparent;
text-decoration:none; transition:filter .12s, background .12s, border-color .12s;
}
.nvx-btn svg{ width:16px; height:16px; }
.nvx-btn--sm{ padding:6px 11px; font-size:12px; }
.nvx-btn--sm svg{ width:14px; height:14px; }
/* Botones sólidos con texto blanco a 13px → AA exige ≥4.5. El cian/ámbar de
marca (#0891B2/#D97706) daban 3.7/3.2 con blanco. Oscurecemos SOLO el fondo del
botón (el cian/ámbar brillante se mantiene para acentos/stripes/íconos sobre soft). */
.nvx-btn--primary{ background:#0E7490; color:#fff; }
.nvx-btn--primary:hover{ filter:brightness(1.08); }
.nvx-btn--navy{ background:var(--nvx-navy); color:#fff; }
.nvx-btn--danger{ background:#C81E1E; color:#fff; }
.nvx-btn--warn{ background:#B45309; color:#fff; }
.nvx-btn--ghost{ background:var(--nvx-surface); color:var(--nvx-ink); border-color:var(--nvx-line-strong); }
.nvx-btn--ghost:hover{ background:var(--nvx-surface-2); border-color:var(--nvx-accent); }
/* El tema define a:hover{color:navy} (custom-admin-nv) y en dark navy-ink
(_novahost_brand). Como los nvx-btn suelen ser , al pasar el mouse el texto
se volvía navy → ilegible sobre los botones sólidos (navy/navy = invisible;
teal/rojo/ámbar = bajo contraste). Reafirmamos el color por variante en
hover/focus + damos brillo de feedback a los sólidos sin hover propio.
(mayor especificidad que `a:hover` + carga última → vence sin !important). */
.nvx-btn--navy:hover, .nvx-btn--danger:hover, .nvx-btn--warn:hover{ filter:brightness(1.08); }
.nvx-btn--primary:hover, .nvx-btn--primary:focus,
.nvx-btn--navy:hover, .nvx-btn--navy:focus,
.nvx-btn--danger:hover, .nvx-btn--danger:focus,
.nvx-btn--warn:hover, .nvx-btn--warn:focus{ color:#fff; }
.nvx-btn--ghost:hover, .nvx-btn--ghost:focus{ color:var(--nvx-ink); }
.nvx-btn--glass:hover, .nvx-btn--glass:focus{ color:#EAF1FF; }
/* ============================================================================
10. CHART CARD + SYSTEM STATUS
============================================================================ */
.nvx-chart{
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
box-shadow:var(--nvx-shadow); padding:16px;
}
.nvx-chart__h{ display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.nvx-chart__h .nvx-sectitle{ margin:0; flex:1; }
.nvx-chart__canvas{ width:100%; height:230px; }
.nvx-chart__empty{ display:flex; align-items:center; justify-content:center; height:100%;
min-height:190px; color:var(--nvx-muted); font-size:13px; text-align:center; }
.nvx-daterange{ width:14rem; max-width:100%; }
.nvx-sys{
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
box-shadow:var(--nvx-shadow); padding:16px;
}
.nvx-sys__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:10px; }
.nvx-sys__item{ display:flex; flex-direction:column; gap:3px; }
.nvx-sys__label{ font-size:11px; color:var(--nvx-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.nvx-sys__value{ font-family:var(--nvx-mono); font-size:14px; font-weight:600; color:var(--nvx-ink); display:flex; align-items:center; gap:7px; }
.nvx-sys__value--ok{ color:var(--nvx-good); }
.nvx-sys__value--warn{ color:var(--nvx-warn); }
.nvx-sys__value--err{ color:var(--nvx-crit); }
.nvx-sys__value .nvx-dotind{ width:7px; height:7px; border-radius:50%; background:currentColor; }
/* ============================================================================
10b. MODALES — fix de parpadeo
El backdrop-filter:blur del .modal-blur recompone la página pesada detrás en
cada repaint (foco, caret, tecleo) → parpadeo. El .modal-backdrop oscuro ya
separa el modal, así que quitamos el blur. Y transition:all en .modal-content
anima cualquier cambio → se neutraliza.
============================================================================ */
.modal.modal-blur{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* transition:all lo heredan ~371 descendientes del modal (header/title/body/
secciones/botones…). En hover, cada micro-cambio anima los 371 → tormenta de
repaint = parpadeo. Acotamos la transición a props de PINTURA baratas: nada de
transform/width/height/layout (lo caro). Mantiene el fade de foco, mata el flicker. */
.modal-content, .modal-content *{
transition-property: color, background-color, border-color, box-shadow, opacity !important;
transition-duration: .12s !important;
}
/* El diálogo tenía transform animado (translateY, offset -16px) que se re-dispara
con reflows del contenido scrollable → parpadeo/"salto". Lo fijamos sin transform. */
.modal.fade .modal-dialog{ transform: none !important; }
/* Backdrop navy de marca, opaco suficiente para separar sin blur. El patrón
modal-blur fuerza opacity:0 (confiaba en el blur) → usamos rgba + opacity:1
para no pelear con esa regla. */
.modal-backdrop, .modal-backdrop.show{ background-color:rgba(10,22,40,.6) !important; opacity:1 !important; }
/* ============================================================================
12. LISTAS — stat cards, tabs, toolbar, filtros, tabla, paginación, menú
============================================================================ */
/* stat cards clicables (Activo/Suspendido/… con barra de acento) */
.nvx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.nvx-stat{ display:flex; align-items:center; gap:13px; padding:14px 16px; text-decoration:none;
background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface);
position:relative; overflow:hidden; box-shadow:var(--nvx-shadow); color:var(--nvx-ink);
transition:border-color .12s, box-shadow .12s; }
.nvx-stat:hover{ border-color:var(--nvx-accent); box-shadow:var(--nvx-shadow-hover); }
.nvx-stat.is-on{ border-color:var(--nvx-accent); }
.nvx-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; }
.nvx-stat--ok::before{ background:var(--nvx-good); }
.nvx-stat--warn::before{ background:var(--nvx-crit); }
.nvx-stat--amber::before{ background:var(--nvx-warn); }
.nvx-stat--crit::before{ background:var(--nvx-crit); }
.nvx-stat--mut::before{ background:var(--nvx-muted); }
.nvx-stat--nav::before{ background:var(--nvx-navy); }
/* Variante de 6 cards (Pedidos: 6 estados) — misma card que Clientes, más columnas. */
.nvx-stats--6{ grid-template-columns:repeat(6,1fr); }
.nvx-stat__num{ font-family:var(--nvx-mono); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.nvx-stat__lab{ font-size:12.5px; color:var(--nvx-muted); }
/* card de lista + tabs */
.nvx-lcard{ background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface); box-shadow:var(--nvx-shadow); overflow:visible; }
/* Tabs envuelven en varias filas (flex-wrap) en vez de scrollear: sin overflow
→ sin el scroll vertical fantasma que overflow-x:auto fuerza vía overflow-y. */
.nvx-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:10px 14px 0; border-bottom:1px solid var(--nvx-line); }
.nvx-tab{ padding:9px 14px; font-size:13px; font-weight:600; color:var(--nvx-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer; white-space:nowrap; }
.nvx-tab.is-on, .nvx-tab.active{ color:var(--nvx-accent-ink); border-bottom-color:var(--nvx-cyan); }
/* Foco de teclado visible en controles Estación. */
.nvx-btn:focus-visible, .nvx-tab:focus-visible, .nvx-seg__btn:focus-visible, .nvx-iact:focus-visible{ outline:2px solid var(--nvx-accent); outline-offset:2px; }
/* toolbar / search / segmento estado */
.nvx-toolbar{ display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap; }
.nvx-search{ flex:1; min-width:200px; display:flex; align-items:center; gap:8px; padding:0 12px; background:var(--nvx-surface-2); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-control); }
.nvx-search svg{ width:15px; height:15px; color:var(--nvx-muted); flex:none; }
.nvx-search input{ border:0; background:transparent; outline:none; padding:9px 0; font-size:13px; color:var(--nvx-ink); width:100%; font-family:inherit; }
.nvx-segf{ display:flex; gap:5px; flex-wrap:wrap; }
.nvx-segf label, .nvx-segf button{ font-size:12px; font-weight:600; padding:7px 11px; border-radius:var(--nvx-r-control); border:1px solid var(--nvx-line-strong); color:var(--nvx-muted); background:var(--nvx-surface); cursor:pointer; }
/* Activo en #0E7490 (no el cian brillante) → blanco 12px cumple AA. */
.nvx-segf input:checked + label, .nvx-segf label.is-on, .nvx-segf button.is-on{ background:#0E7490; color:#fff; border-color:#0E7490; }
/* Radios ocultos pero focusables por teclado (no display:none). */
.nvx-segf input{ position:absolute; opacity:0; pointer-events:none; }
.nvx-segf input:focus-visible + label{ outline:2px solid var(--nvx-accent); outline-offset:2px; }
/* panel de filtros */
.nvx-filters{ padding:14px; background:var(--nvx-surface-2); border-top:1px solid var(--nvx-line); border-bottom:1px solid var(--nvx-line); }
.nvx-filters__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.nvx-fld{ display:flex; flex-direction:column; gap:5px; }
.nvx-fld label{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--nvx-muted); }
.nvx-flabel{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--nvx-muted); }
.nvx-fld-actions{ align-self:end; flex-direction:row; justify-content:flex-end; gap:8px; }
.nvx-toolbar__hint{ flex:1; font-size:13px; color:var(--nvx-muted); }
.nvx-modal-label{ display:block; margin-bottom:5px; }
/* tabla */
.nvx-table-wrap{ overflow-x:auto; }
.nvx-table{ width:100%; border-collapse:collapse; font-size:13px; }
.nvx-table thead th{ text-align:left; font-family:var(--nvx-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--nvx-muted); padding:9px 14px; background:var(--nvx-surface-2); border-top:1px solid var(--nvx-line); border-bottom:1px solid var(--nvx-line); white-space:nowrap; }
.nvx-table .text-end, .nvx-table th.text-end{ text-align:right; }
.nvx-col-shrink{ width:1%; white-space:nowrap; }
.nvx-mb-10{ margin-bottom:10px; }
.nvx-mb-8{ margin-bottom:8px; }
.nvx-hidden{ display:none !important; }
.nvx-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--nvx-line); vertical-align:middle; }
.nvx-table tbody tr:hover{ background:var(--nvx-surface-2); }
/* Tabla clave→valor (ficha de transacción, payload IPN): | por fila. */
.nvx-table tbody th{ padding:10px 14px; border-bottom:1px solid var(--nvx-line); text-align:left; font-weight:600; color:var(--nvx-muted); white-space:nowrap; vertical-align:middle; }
.nvx-pre{ margin:0; padding:12px 14px; background:var(--nvx-surface-2); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-data); font-family:var(--nvx-mono); font-size:12px; color:var(--nvx-ink); white-space:pre-wrap; word-break:break-word; overflow-x:auto; }
.nvx-cli{ display:flex; align-items:center; gap:10px; }
.nvx-cli__av{ width:34px; height:34px; border-radius:var(--nvx-r-data); flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-size:12px; overflow:hidden; }
.nvx-cli__av img{ width:100%; height:100%; object-fit:cover; }
.nvx-cli__body b{ font-weight:600; display:block; color:var(--nvx-ink); }
.nvx-cli__body b a{ color:inherit; text-decoration:none; }
.nvx-cli__body b a:hover{ color:var(--nvx-accent-ink); }
.nvx-cli__body small{ color:var(--nvx-muted); font-size:11.5px; }
.nvx-date{ font-family:var(--nvx-mono); font-size:12px; color:var(--nvx-ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.nvx-status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--nvx-r-pill); }
.nvx-status::before{ content:""; width:6px; height:6px; border-radius:50%; }
.nvx-status--ok{ color:var(--nvx-good-ink); background:var(--nvx-good-soft); } .nvx-status--ok::before{ background:var(--nvx-good); }
.nvx-status--warn{ color:var(--nvx-warn-ink); background:var(--nvx-warn-soft); } .nvx-status--warn::before{ background:var(--nvx-warn); }
.nvx-status--mut{ color:var(--nvx-muted); background:var(--nvx-surface-2); } .nvx-status--mut::before{ background:var(--nvx-muted); }
/* Faltaba: mod_order_manage/mod_order_index ya referencian nvx-status--crit
(failed_setup/failed_renew, tickets abiertos) sin que existiera — pill sin color. */
.nvx-status--crit{ color:var(--nvx-crit-ink); background:var(--nvx-crit-soft); } .nvx-status--crit::before{ background:var(--nvx-crit); }
.nvx-status--info{ color:var(--nvx-accent-ink); background:var(--nvx-info-soft); } .nvx-status--info::before{ background:var(--nvx-cyan); }
.nvx-acts{ display:flex; gap:5px; justify-content:flex-end; position:relative; }
.nvx-iact{ position:relative; width:31px; height:31px; border-radius:var(--nvx-r-data); border:1px solid var(--nvx-line); display:grid; place-items:center; color:var(--nvx-muted); background:var(--nvx-surface); cursor:pointer; text-decoration:none; }
.nvx-iact:hover{ border-color:var(--nvx-accent); color:var(--nvx-accent-ink); }
.nvx-iact:focus-visible{ outline:2px solid var(--nvx-accent); outline-offset:1px; }
.nvx-iact--danger:hover{ border-color:var(--nvx-crit); color:var(--nvx-crit); }
.nvx-iact svg{ width:15px; height:15px; }
/* Tooltip propio (reemplaza el title= nativo, lento y sin foco/móvil): burbuja
CSS pura arriba del botón, dispara en hover Y focus-visible (teclado/tap-hold).
--nvx-navy es constante claro/oscuro (no se sobre-escribe en [data-bs-theme=dark]),
así que sirve de fondo fijo sin condicional de tema. */
.nvx-iact[data-tip]:hover::after,
.nvx-iact[data-tip]:focus-visible::after{
content:attr(data-tip);
position:absolute;
bottom:calc(100% + 7px);
left:50%;
transform:translateX(-50%);
background:var(--nvx-navy);
color:#fff;
font-size:11.5px;
font-weight:600;
line-height:1.3;
white-space:nowrap;
padding:5px 9px;
border-radius:var(--nvx-r-control);
box-shadow:var(--nvx-shadow-hover);
pointer-events:none;
z-index:50;
}
/* El ULTIMO boton de acciones (borde derecho de la fila, junto al clip de
.nvx-table-wrap{overflow-x:auto}) ancla su tooltip a la derecha y crece hacia
la izquierda (hay tabla de sobra) — si no, el bubble centrado se recorta.
Mayor especificidad que la regla base: gana en cascada. */
.nvx-acts .nvx-iact:last-child[data-tip]:hover::after,
.nvx-acts .nvx-iact:last-child[data-tip]:focus-visible::after{
left:auto;
right:0;
transform:none;
}
.nvx-cbx{ width:16px; height:16px; cursor:pointer; accent-color:var(--nvx-cyan); vertical-align:middle; }
.nvx-tfoot{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; gap:10px; flex-wrap:wrap; }
/* dropdown menú (cambio de estado) */
.nvx-menu{ position:absolute; right:0; top:36px; background:var(--nvx-surface); border:1px solid var(--nvx-line-strong); border-radius:var(--nvx-r-control); box-shadow:var(--nvx-shadow-hover); padding:5px; width:196px; z-index:40; }
.nvx-menu__item{ display:flex; width:100%; align-items:center; gap:9px; padding:8px 9px; border:0; border-radius:var(--nvx-r-data); font-size:12.5px; color:var(--nvx-ink); background:transparent; text-align:left; cursor:pointer; text-decoration:none; }
/* color explícito en hover: vence a la regla del tema a:hover{color:navy} en los items . */
.nvx-menu__item:hover{ background:var(--nvx-surface-2); color:var(--nvx-ink); }
.nvx-menu__item svg{ width:15px; height:15px; flex:none; color:var(--nvx-muted); }
.nvx-menu__item.is-crit{ color:var(--nvx-crit-ink); } .nvx-menu__item.is-crit svg{ color:var(--nvx-crit); }
.nvx-menu__item.is-crit:hover{ color:var(--nvx-crit-ink); background:var(--nvx-crit-soft); }
.nvx-menu__dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.nvx-menu__sep{ height:1px; background:var(--nvx-line); margin:4px 0; }
/* Menú de acción por fila = dropdown Bootstrap restilado a Estación (sin JS custom;
el toggle lo maneja bootstrap, los items son fb_api_link → api.js los ejecuta). */
.dropdown-menu.nvx-rowmenu{ padding:5px; min-width:212px; border:1px solid var(--nvx-line-strong); border-radius:var(--nvx-r-control); box-shadow:var(--nvx-shadow-hover); background:var(--nvx-surface); }
/* Selects inline (asignar/prioridad/estado) dentro del rowmenu — bandeja Soporte. */
.nvx-rowmenu .nvx-menu__label{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nvx-muted); padding:6px 9px 2px; }
.nvx-rowmenu select{ margin:0 2px; width:calc(100% - 4px); }
/* Celda "Asunto" de la bandeja de tickets — subline con la mesa de ayuda. */
.nvx-subline{ font-size:11.5px; color:var(--nvx-muted); }
/* Celda "Estado" consolidada (badges de estado+prioridad en fila + línea SLA). */
.nvx-status-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.nvx-sla-line{ margin-top:4px; }
/* Acciones del hero (ficha): el botón destructivo se lee como DESTRUCTIVO (sólido
rojo), separado de las acciones de ciclo de vida (glass). Un glass tenue no
comunica "eliminar". Aplica en cualquier hero navy (order/client). */
.nvx-chero__actions .nvx-btn--danger{ background:#C81E1E; color:#fff; border-color:transparent; }
.nvx-chero__actions .nvx-btn--danger:hover{ background:#E02424; color:#fff; }
.nvx-chero__actions .nvx-sep{ width:1px; align-self:stretch; margin:2px 4px; background:rgba(127,217,234,.22); }
/* Matices de acción sobre el hero navy (glass tintado): éxito/advertencia. */
.nvx-btn--glass.is-good{ background:rgba(16,185,129,.22); border-color:rgba(16,185,129,.4); }
.nvx-btn--glass.is-good:hover{ background:rgba(16,185,129,.32); color:#EAF1FF; }
.nvx-btn--glass.is-warn{ background:rgba(251,191,36,.2); border-color:rgba(251,191,36,.42); }
.nvx-btn--glass.is-warn:hover{ background:rgba(251,191,36,.3); color:#EAF1FF; }
/* ============================================================================
13. FORMULARIOS — secciones, campos, inputs, switch
============================================================================ */
.nvx-form{ display:flex; flex-direction:column; gap:14px; }
.nvx-fsec{ background:var(--nvx-surface); border:1px solid var(--nvx-line); border-radius:var(--nvx-r-surface); box-shadow:var(--nvx-shadow); overflow:hidden; }
.nvx-fsec__h{ padding:12px 16px; border-bottom:1px solid var(--nvx-line); display:flex; align-items:center; gap:9px; }
.nvx-fsec__h .ic{ width:26px; height:26px; border-radius:var(--nvx-r-data); background:var(--nvx-accent-soft); color:var(--nvx-accent-ink); display:grid; place-items:center; flex:none; }
.nvx-fsec__h .ic svg{ width:15px; height:15px; }
.nvx-fsec__h b{ font-family:var(--nvx-display); font-size:13.5px; font-weight:700; color:var(--nvx-ink); }
.nvx-fsec__h small{ color:var(--nvx-muted); font-size:11.5px; margin-left:auto; }
.nvx-fsec__b{ padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nvx-fsec__b--1col{ grid-template-columns:1fr; }
.nvx-fg{ display:flex; flex-direction:column; gap:5px; }
.nvx-fg--full{ grid-column:1 / -1; }
/* Envoltorio nativo para desactivar de golpe todos los controles de un
formulario cuando el usuario sólo tiene 'view' (sin 'manage_*'), sin JS ni
marcar cada input a mano: |