/* ═══════════════════════════════════════════════════════════════════════════ NOVA UI SYSTEM — sistema de diseño del panel de Hostbrid Aspecto CubePath: los tokens son los mismos de hostbrid.com (hostbrid-web/src/styles/global.css), copiados, no inventados. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. TOKENS CUBEPATH — la única fuente de verdad del color ─────────────────────────────────────────────────────────────────────────── Escala neutra (la de CubePath/shadcn) para no repetir grises a mano: 950 #0a0a0a · 900 #171717 · 800 #262626 · 700 #404040 · 600 #525252 500 #737373 · 400 #a1a1a1 · 300 #d4d4d4 · 200 #e5e5e5 · 100 #f5f5f5 · 50 #fafafa El panel arranca en OSCURO (base.html pone data-bs-theme="dark" y el script de usa 'dark' por defecto), así que :root lleva los valores oscuros y [data-bs-theme="light"] los claros. Es como estaba montado el fichero: no lo cambio para no obligar a revisar 1.200 líneas de reglas heredadas. ─────────────────────────────────────────────────────────────────────────── */ :root { --radius: 0.625rem; /* Superficies y texto — OSCURO */ --background: #0a0a0a; --foreground: #fafafa; --card: #171717; --card-foreground: #fafafa; --popover: #171717; --popover-foreground: #fafafa; --primary: #e5e5e5; /* CubePath: "primary" es el neutro de máximo contraste, no la marca. La marca es --brand. */ --primary-foreground: #171717; --secondary: #262626; --secondary-foreground: #fafafa; --muted: #262626; --muted-foreground: #a1a1a1; --accent: #262626; --accent-foreground: #fafafa; --destructive: #ff5a68; --border: #ffffff1a; --input: #ffffff26; --ring: #737373; /* Marca Hostbrid. --brand cuelga de --brand-500 a propósito: el whitelabel inyecta --brand-500 por tenant en base.html y así todo lo que use --brand (enlaces, foco, nav activo, acentos) se tiñe solo. */ --brand-50: #eaf6ff; --brand-100: #cfeaff; --brand-200: #a5daff; --brand-300: #74c8ff; --brand-400: #4ebdff; --brand-500: #2cb2ff; --brand-600: #0d99e8; --brand-700: #0b7cbd; --brand-800: #0a6294; --brand-900: #0b4f76; --brand: var(--brand-500); --brand-light: #8ad7ff; --brand-dark: var(--brand-600); --brand-deep: #6fcbff; --brand-foreground: #04212f; --brand-subtle: #0d2634; /* El azul de marca sobre TEXTO no llega a contraste AA en fondo claro (#2cb2ff sobre blanco es 2,2:1; hace falta 4,5:1). Sobre fondo oscuro sí. --brand-text es el azul que se usa cuando el color va en la tipografía; --brand se reserva para rellenos, bordes y acentos. */ --brand-text: var(--brand); /* Estados (los mismos que la página de estado de hostbrid.com) */ --status-operational: #50c249; --status-operational-bg: #50c2491a; --status-degraded: #edb200; --status-degraded-bg: #edb2001a; --status-outage: #e40014; --status-outage-bg: #e400141a; --status-maintenance: #1578ef; --status-maintenance-bg: #1578ef1a; /* Mismo criterio que --brand-text: el color de relleno no sirve como color de texto. Estos son los tonos que llegan a 4,5:1 en cada tema. */ --status-operational-text: var(--status-operational); --status-degraded-text: var(--status-degraded); --status-outage-text: var(--destructive); --status-maintenance-text: #4d94f5; /* #1578ef sobre #0a0a0a se queda en 4,48 */ /* ── Alias heredados: el panel entero ya consume estos nombres. Colgarlos de los tokens de arriba es lo que hace que 1.200 líneas cambien de aspecto sin tocarlas una a una. ── */ --bg-primary: var(--background); --bg-secondary: var(--card); --bg-tertiary: var(--muted); --surface: var(--card); --surface-hover: var(--muted); --border-strong: var(--input); --text-primary: var(--foreground); --text-secondary: #d4d4d4; --text-muted: var(--muted-foreground); --text-disabled: #8f8f8f; /* #737373 sobre la tarjeta oscura no llega a AA */ --success: var(--status-operational); --warning: var(--status-degraded); --error: var(--destructive); --info: var(--brand); /* Sombras: CubePath es plano, así que en oscuro casi no se ven. */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.40); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45); --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Radios derivados de --radius, igual que en CubePath */ --radius-sm: calc(var(--radius) - 4px); /* 6px */ --radius-md: calc(var(--radius) - 2px); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --radius-2xl: calc(var(--radius) + 10px); /* 20px */ /* Tipografía: CubePath usa Geist, pero aquí no hay CDN que valga (CSP) y no se van a empaquetar fuentes nuevas por un cambio de color. Se queda la que ya sirve el panel; la escala y los pesos sí son los de CubePath. */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, 'Fira Code', monospace; } /* ═══════════════════════════════════════════════════════════════════════════ TEMA CLARO — sólo cambian los tokens; ninguna regla de componente se duplica ═══════════════════════════════════════════════════════════════════════════ */ [data-bs-theme="light"] { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --popover: #ffffff; --popover-foreground: #0a0a0a; --primary: #171717; --primary-foreground: #fafafa; --secondary: #f5f5f5; --secondary-foreground: #171717; --muted: #f5f5f5; --muted-foreground: #737373; --accent: #f5f5f5; --accent-foreground: #171717; --destructive: #e40014; --border: #e5e5e5; --input: #e5e5e5; --ring: #a1a1a1; --brand-light: #6fcbff; --brand-deep: #0b6fa8; --brand-subtle: #eaf6ff; --brand-text: var(--brand-700); /* #0b7cbd sobre blanco: 4,6:1 */ --text-secondary: #404040; /* #a1a1a1 sobre blanco es 2,3:1. En fondo claro no cabe un gris terciario más claro que el apagado y que se siga leyendo: se igualan. */ --text-disabled: var(--muted-foreground); --error: var(--status-outage); --status-operational-text: #3f7c39; --status-degraded-text: #8a6800; --status-outage-text: var(--status-outage); --status-maintenance-text: #0f66cf; --shadow-sm: 0 1px 2px 0 rgb(10 10 10 / 0.05); --shadow-md: 0 4px 6px -1px rgb(10 10 10 / 0.07); --shadow-lg: 0 10px 15px -3px rgb(10 10 10 / 0.08); --shadow-xl: 0 20px 25px -5px rgb(10 10 10 / 0.10); } /* ═══════════════════════════════════════════════════════════════════════════ 2. LA PALANCA: Bootstrap se pinta con --bs-*. Mapeándolas sobre los tokens, todos los componentes de Bootstrap (cards, tablas, modales, dropdowns, listas, formularios, offcanvas, paginación…) heredan el aspecto CubePath sin tocar una sola plantilla. Va en :root, no en [data-bs-theme], porque los valores son var() y se resuelven en el elemento que los usa: al cambiar de tema cambian los tokens y estas variables les siguen. Cero reglas duplicadas, cero !important. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Cuerpo */ --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-emphasis-color: var(--foreground); --bs-heading-color: var(--foreground); --bs-secondary-bg: var(--muted); --bs-secondary-color: var(--muted-foreground); --bs-tertiary-bg: var(--muted); --bs-tertiary-color: var(--muted-foreground); /* Bordes y radios */ --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-xxl: var(--radius-2xl); /* Tipografía */ --bs-body-font-family: var(--font-sans); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); /* Enlaces y código: aquí sí manda la marca */ --bs-link-color: var(--brand-text); --bs-link-hover-color: var(--brand-dark); --bs-link-color-rgb: 44, 178, 255; --bs-code-color: var(--brand-text); --bs-highlight-bg: var(--brand-subtle); /* Paleta semántica */ --bs-primary: var(--brand); --bs-secondary: var(--muted-foreground); --bs-success: var(--status-operational); --bs-danger: var(--status-outage); --bs-warning: var(--status-degraded); --bs-info: var(--status-maintenance); --bs-light: var(--muted); --bs-dark: var(--foreground); --bs-primary-rgb: 44, 178, 255; --bs-success-rgb: 80, 194, 73; --bs-danger-rgb: 228, 0, 20; --bs-warning-rgb: 237, 178, 0; --bs-info-rgb: 21, 120, 239; /* Subtiles: Bootstrap los usa en alerts, badges y fondos suaves */ --bs-primary-bg-subtle: var(--brand-subtle); --bs-success-bg-subtle: var(--status-operational-bg); --bs-danger-bg-subtle: var(--status-outage-bg); --bs-warning-bg-subtle: var(--status-degraded-bg); --bs-info-bg-subtle: var(--status-maintenance-bg); --bs-secondary-bg-subtle: var(--muted); --bs-light-bg-subtle: var(--muted); --bs-dark-bg-subtle: var(--muted); --bs-primary-border-subtle: color-mix(in srgb, var(--brand) 35%, transparent); --bs-success-border-subtle: color-mix(in srgb, var(--status-operational) 35%, transparent); --bs-danger-border-subtle: color-mix(in srgb, var(--status-outage) 35%, transparent); --bs-warning-border-subtle: color-mix(in srgb, var(--status-degraded) 35%, transparent); --bs-info-border-subtle: color-mix(in srgb, var(--status-maintenance) 35%, transparent); --bs-secondary-border-subtle: var(--border); --bs-primary-text-emphasis: var(--brand-text); --bs-success-text-emphasis: var(--status-operational-text); --bs-danger-text-emphasis: var(--status-outage-text); --bs-warning-text-emphasis: var(--status-degraded-text); --bs-info-text-emphasis: var(--status-maintenance-text); --bs-secondary-text-emphasis: var(--muted-foreground); /* Foco */ --bs-focus-ring-color: color-mix(in srgb, var(--brand) 25%, transparent); --bs-focus-ring-width: 3px; } /* Los componentes de Bootstrap 5.3 llevan sus propias variables locales con valores compilados (un `.card` no lee --bs-body-bg, lee --bs-card-bg). Se redirigen aquí, una vez, en lugar de repetir reglas por tema. */ .card { --bs-card-bg: var(--card); --bs-card-color: var(--card-foreground); --bs-card-border-color: var(--border); --bs-card-border-radius: var(--radius-xl); --bs-card-inner-border-radius: var(--radius-lg); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--foreground); } .modal { --bs-modal-bg: var(--card); --bs-modal-color: var(--card-foreground); --bs-modal-border-color: var(--border); --bs-modal-border-radius: var(--radius-xl); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); } .dropdown-menu { --bs-dropdown-bg: var(--popover); --bs-dropdown-color: var(--popover-foreground); --bs-dropdown-border-color: var(--border); --bs-dropdown-border-radius: var(--radius-lg); --bs-dropdown-link-color: var(--popover-foreground); --bs-dropdown-link-hover-bg: var(--muted); --bs-dropdown-link-hover-color: var(--foreground); --bs-dropdown-link-active-bg: var(--muted); --bs-dropdown-link-active-color: var(--foreground); --bs-dropdown-divider-bg: var(--border); --bs-dropdown-header-color: var(--muted-foreground); } .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--foreground); --bs-list-group-border-color: var(--border); --bs-list-group-border-radius: var(--radius-lg); --bs-list-group-action-hover-bg: var(--muted); --bs-list-group-action-hover-color: var(--foreground); --bs-list-group-active-bg: var(--muted); --bs-list-group-active-color: var(--foreground); --bs-list-group-active-border-color: var(--border); } .table { --bs-table-bg: transparent; --bs-table-color: var(--foreground); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--muted); --bs-table-striped-color: var(--foreground); --bs-table-hover-bg: var(--muted); --bs-table-hover-color: var(--foreground); } .offcanvas, .offcanvas-start, .offcanvas-end { --bs-offcanvas-bg: var(--card); --bs-offcanvas-color: var(--foreground); --bs-offcanvas-border-color: var(--border); } .form-control, .form-select { --bs-body-bg: var(--background); --bs-border-color: var(--input); } .nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-bg: var(--card); --bs-nav-tabs-link-active-color: var(--foreground); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--card); --bs-nav-link-color: var(--muted-foreground); --bs-nav-link-hover-color: var(--foreground); } .progress { --bs-progress-bg: var(--muted); --bs-progress-bar-bg: var(--brand); --bs-progress-border-radius: 999px; } .accordion { --bs-accordion-bg: var(--card); --bs-accordion-color: var(--foreground); --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--foreground); --bs-accordion-active-bg: var(--muted); --bs-accordion-active-color: var(--foreground); --bs-accordion-border-radius: var(--radius-lg); } .pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--muted-foreground); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--muted); --bs-pagination-hover-color: var(--foreground); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-active-color: var(--brand-foreground); --bs-pagination-border-radius: var(--radius-md); } .alert { --bs-alert-border-radius: var(--radius-lg); } .badge { --bs-badge-border-radius: 999px; } /* Reset & Base */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } /* Topbar Navigation */ .nova-topbar { position: sticky; top: 0; z-index: 1000; background: var(--background); border-bottom: 1px solid var(--border); height: 64px; } .nova-topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--space-lg); max-width: 1920px; margin: 0 auto; } .nova-topbar__left, .nova-topbar__right { display: flex; align-items: center; gap: var(--space-md); } /* Brand Logo */ .nova-brand { display: flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: 1.125rem; color: var(--text-primary); text-decoration: none; transition: transform 0.2s ease; } .nova-brand:hover { transform: scale(1.02); color: var(--text-primary); } .nova-brand__logo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--brand); border-radius: var(--radius-md); } .nova-brand__logo i { font-size: 1.25rem; color: white; } /* Custom logo image - no square box, full visual */ .nova-brand__img { object-fit: contain; } /* Theme-adaptive logo: show/hide based on data-bs-theme */ .nova-brand__img--light { display: none; } [data-bs-theme="light"] .nova-brand__img--dark { display: none !important; } [data-bs-theme="light"] .nova-brand__img--light { display: inline-block !important; } /* Centered brand in topbar */ .nova-brand--center { position: absolute; left: 50%; transform: translateX(-50%); } /* Sidebar */ .nova-sidebar { width: 280px; min-width: 280px; background: var(--bg-secondary); border-right: 1px solid var(--border); overflow-y: auto; height: calc(100vh - 64px); position: sticky; top: 64px; } .nova-sidebar__section { padding: var(--space-lg) var(--space-md) var(--space-sm); } .nova-sidebar__title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-sm); } .nova-sidebar__nav { display: flex; flex-direction: column; gap: var(--space-xs); } .nova-nav-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; text-decoration: none; } .nova-nav-link:hover { background: var(--surface-hover); color: var(--text-primary); } .nova-nav-link.is-active { background: var(--muted); color: var(--foreground); font-weight: 600; border-left: 3px solid var(--brand); padding-left: calc(var(--space-md) - 3px); } .nova-nav-link__icon { font-size: 1.125rem; width: 20px; text-align: center; } /* Main Shell */ .nova-shell { display: flex; min-height: calc(100vh - 64px); background: var(--bg-primary); } .nova-main { flex: 1; padding: var(--space-lg); max-width: none; margin: 0; width: 100%; } /* Utilities para integración con Bootstrap */ .nova-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none; } .nova-btn--ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .nova-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); } .nova-btn--primary { background: var(--primary); color: var(--primary-foreground); border: none; } .nova-btn--primary:hover { filter: brightness(0.92); color: var(--primary-foreground); } .nova-btn--icon { width: 40px; height: 40px; padding: 0; justify-content: center; } /* User Menu */ .nova-user { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; } .nova-user:hover { background: var(--surface-hover); border-color: var(--border-strong); } .nova-user__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; font-size: 0.875rem; } .nova-user__name { font-size: 0.875rem; color: var(--text-primary); } /* Responsive */ @media (max-width: 1024px) { .nova-sidebar:not(.nova-sidebar--mobile) { display: none; } .nova-main { padding: var(--space-lg); } } @media (max-width: 768px) { .nova-topbar__inner { padding: 0 var(--space-md); } .nova-main { padding: var(--space-md); } } /* Mobile Offcanvas Sidebar */ .nova-offcanvas { background: var(--bg-secondary) !important; border-right: 1px solid var(--border) !important; width: 280px !important; } .nova-offcanvas .offcanvas-header { background: var(--bg-secondary); } .nova-offcanvas .offcanvas-title { font-weight: 600; } .nova-offcanvas .nova-sidebar--mobile { display: block !important; position: static; width: 100%; height: auto; padding-top: var(--space-md); overflow-y: auto; } [data-bs-theme="light"] .nova-offcanvas { background: var(--bg-secondary) !important; } [data-bs-theme="light"] .nova-offcanvas .btn-close { filter: none; } /* ═══════════════════════════════════════════════════════════════════════════ TEMA CLARO — componentes Este bloque tenía ~160 líneas de reglas [data-bs-theme="light"] con grises slate a fuego (#f1f5f9, #64748b, rgba(99,102,241,…)) que repetían en claro lo que ya decía la regla base en oscuro. Con --bs-* mapeadas sobre los tokens, todo eso lo resuelve el cambio de token. Sólo queda lo que Bootstrap no deriva de una variable. ═══════════════════════════════════════════════════════════════════════════ */ /* .card-header y .table-light no leen ninguna variable de tema en 5.3 */ .card-header { background-color: transparent; border-bottom-color: var(--border); color: var(--foreground); } .table-light th, .table-light td { background-color: var(--muted) !important; color: var(--foreground) !important; border-color: var(--border) !important; } .input-group-text { background-color: var(--muted); border-color: var(--input); color: var(--muted-foreground); } .toast { background-color: var(--popover); border-color: var(--border); color: var(--popover-foreground); } code { background-color: var(--muted); color: var(--brand-text); border-radius: var(--radius-sm); padding: 0.1em 0.35em; } pre { background-color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-lg); } pre code { background: transparent; padding: 0; } /* Migas y avatar: acento de marca */ .breadcrumb-item a { color: var(--brand-text); text-decoration: none; } .breadcrumb-item.active { color: var(--muted-foreground); } .nova-user__avatar { background: var(--brand); color: var(--brand-foreground); } /* ═══════════════════════════════════════════════════════════════════════════ ADDITIONAL UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ /* Stat cards - reutilizables en cualquier dashboard */ .nova-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); transition: box-shadow 0.2s ease, transform 0.2s ease; } .nova-stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .nova-stat-card__value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .nova-stat-card__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--space-xs); } .nova-stat-card__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* KPI Card Component - replaces inline styles + onmouseover/onmouseout handlers */ .nova-kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all 0.3s ease; } .nova-kpi-card--brand:hover { border-color: var(--brand-500); } .nova-kpi-card--success:hover { border-color: var(--success); } .nova-kpi-card--info:hover { border-color: var(--info); } .nova-kpi-card--warning:hover { border-color: var(--warning); } .nova-kpi-card--error:hover { border-color: var(--error); } .nova-kpi-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); } .nova-kpi-card__icon--brand { background: var(--brand); color: var(--brand-foreground); } .nova-kpi-card__icon--success { background: var(--status-operational); color: #04210a; } .nova-kpi-card__icon--info { background: var(--status-maintenance); color: #ffffff; } .nova-kpi-card__icon--warning { background: var(--status-degraded); color: #241a00; } .nova-kpi-card__icon--error { background: var(--status-outage); color: #ffffff; } .nova-kpi-card__label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.25rem; } .nova-kpi-card__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } /* Quick-access card hover - replaces onmouseover/onmouseout */ .nova-quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: all 0.3s ease; height: 100%; } .nova-quick-card--brand:hover, .nova-quick-card--info:hover, .nova-quick-card--success:hover, .nova-quick-card--warning:hover { border-color: var(--ring); box-shadow: var(--shadow-md); } /* Botones. Bootstrap 5.3 compila los colores de cada variante en variables locales (--bs-btn-bg y compañía) que NO leen --bs-primary: hay que redirigirlas una a una o el botón sale azul Bootstrap. En CubePath el botón principal es el neutro de máximo contraste (negro en claro, blanco en oscuro), igual que el