/** * Xernode — tema claro / oscuro (global: web, panel, admin, blog) * Activar con data-theme="dark|light" en */ html { color-scheme: light; } html[data-theme='dark'] { color-scheme: dark; } /* ——— Tokens semánticos (oscuro = actual) ——— */ :root, html[data-theme='dark'] { --xn-bg-card-hover: #101820; --xn-bg-glow-base: #050d0a; --xn-bg-glow-teal-1: rgba(0, 190, 170, 0.12); --xn-bg-glow-teal-2: rgba(0, 160, 140, 0.08); --xn-bg-glow-vignette: rgba(3, 8, 6, 0.5); --xn-shadow-card: 0 12px 40px rgb(5 10 12 / 0.45); --xn-nav-border: rgba(255, 255, 255, 0.06); --xn-surface-1: hsl(175 35% 4%); --xn-surface-2: hsl(175 30% 5.5%); --xn-surface-3: hsl(175 25% 7%); --xn-surface-4: hsl(175 35% 4.5%); --xn-surface-card: hsl(175 35% 4% / 0.35); --xn-surface-card-strong: hsl(175 35% 4.5% / 0.55); --xn-surface-sidebar: hsl(175 35% 4% / 0.98); --xn-surface-sidebar-admin: hsl(175 28% 3% / 0.98); --xn-surface-sidebar-client: linear-gradient(180deg, hsl(175 32% 4.5%) 0%, hsl(175 35% 3.5%) 100%); --xn-surface-topbar: hsl(175 35% 4% / 0.85); --xn-surface-input: hsl(175 35% 3.5% / 0.9); --xn-surface-hover: hsl(175 35% 5.5% / 0.45); --xn-surface-hover-strong: hsl(175 35% 6% / 0.65); --xn-surface-muted: hsl(175 28% 5%); --xn-surface-muted-hover: hsl(175 28% 6.5%); --xn-surface-glass: hsl(175 30% 5% / 0.45); --xn-surface-glass-hover: hsl(175 30% 7% / 0.65); --xn-surface-disabled: hsl(175 22% 18%); --xn-surface-console: hsl(175 40% 3% / 0.95); --xn-border-subtle: hsl(175 25% 12%); --xn-border-input: hsl(175 25% 18%); --xn-overlay-backdrop: hsl(175 20% 8% / 0.96); --xn-chart-grid: hsl(175 25% 14%); --xn-chart-text: var(--xn-muted); --xn-surface-tick: hsl(175 25% 8%); --xn-surface-tick-hover: hsl(175 30% 10%); --xn-surface-tick-active: hsl(172 80% 45% / 0.2); --xn-surface-note: hsl(175 25% 8% / 0.6); --xn-surface-btn-order: hsl(175 35% 6%); --xn-surface-btn-order-hover: hsl(175 30% 10%); --xn-surface-topbar-btn: hsl(175 25% 7%); --xn-surface-invoice: hsl(175 35% 6% / 0.85); --xn-surface-invoice-banner: hsl(175 25% 8% / 0.45); --xn-surface-tile: hsl(175 35% 5% / 0.92); --xn-surface-pill-muted: hsl(175 25% 12% / 0.8); --xn-surface-input-filled: hsl(175 22% 10%); --xn-surface-dropzone: hsl(175 22% 9%); --xn-surface-dropzone-hover: hsl(172 25% 12%); --xn-surface-hover-row: hsl(175 35% 6% / 0.55); --xn-surface-hover-row-strong: hsl(175 35% 6% / 0.75); --xn-surface-table-head: hsl(175 35% 4% / 0.6); --xn-surface-amount-suffix: hsl(175 25% 9%); --xn-surface-stock-bto: hsl(175 25% 10%); --xn-surface-console-inner: hsl(175 40% 3% / 0.95); --xn-surface-tabs: hsl(175 22% 7% / 0.75); --xn-surface-tabs-hover: hsl(175 25% 10% / 0.8); --xn-surface-tabs-active: hsl(175 25% 12%); --xn-surface-raised: hsl(175 35% 5% / 0.85); --xn-surface-inset: hsl(175 22% 9%); --xn-surface-inset-deep: hsl(175 22% 7% / 0.85); --xn-surface-table-wrap: hsl(175 35% 5% / 0.5); --xn-surface-network: hsl(172 35% 10% / 0.55); --xn-surface-section-head: hsl(175 25% 8% / 0.65); --xn-surface-unit-block: hsl(175 35% 4% / 0.75); --xn-surface-icon-box: hsl(175 25% 8% / 0.9); --xn-surface-toolbar: hsl(175 35% 4% / 0.8); --xn-surface-dialog: linear-gradient(165deg, hsl(175 28% 9%) 0%, hsl(175 35% 6%) 100%); --xn-surface-node-card: hsl(175 22% 9%); --xn-surface-reward-box: linear-gradient(135deg, hsl(172 80% 45% / 0.12), hsl(175 35% 6% / 0.9)), hsl(175 35% 6%); --xn-badge-discount-text: hsl(152 65% 55%); --xn-badge-discount-bg: hsl(142 50% 20% / 0.4); --xn-badge-discount-border: transparent; --xn-os-picker-footer: hsl(175 25% 10% / 0.85); --xn-surface-pill-type: hsl(175 45% 18% / 0.55); --xn-border-pill-type: hsl(175 35% 28% / 0.5); --xn-badge-limited-text: hsl(152 65% 55%); --xn-badge-limited-bg: hsl(152 50% 20% / 0.35); --xn-badge-limited-border: hsl(152 50% 35% / 0.4); --xn-surface-dropdown: hsl(175 35% 7%); --xn-surface-dropdown-hover: hsl(175 25% 12%); --xn-shadow-dropdown: 0 16px 40px hsl(175 40% 2% / 0.55); --xn-alert-error-text: hsl(0 88% 78%); --xn-alert-error-bg: hsl(0 52% 16% / 0.72); --xn-alert-error-border: hsl(0 58% 42% / 0.55); /* Cards sit near page bg — border defines edges, not a gray slab */ --xn-gradient-card: linear-gradient(160deg, hsl(175 35% 3.5% / 0.22) 0%, hsl(175 30% 4.5% / 0.28) 100%); } /* ——— Tema claro ——— */ html[data-theme='light'] { --xn-bg: #f2f6f8; --xn-bg-deep: #eef3f6; --xn-bg-secondary: #ffffff; --xn-bg-nav: rgb(255 255 255 / 0.94); --xn-bg-card-hover: #f8fafb; --xn-foreground: #0f1a22; --xn-muted: #5a6d7d; --xn-card: #ffffff; --xn-border: rgb(13 158 143 / 0.2); --xn-primary: #0d9e8f; --xn-primary-hover: #0bb5a4; --xn-primary-dark: #087a6f; --xn-primary-glow: #0bb5a4; --xn-primary-foreground: #ffffff; --xn-accent-text: #0a8a7d; --xn-brand-primary: #0d9e8f; --xn-brand-text: #0f1a22; --xn-brand-muted: #5a6d7d; --xn-brand-glow: 0 0 10px rgb(13 158 143 / 0.2), 0 0 20px rgb(13 158 143 / 0.12); --xn-gradient-primary: linear-gradient(135deg, #087a6f 0%, #0d9e8f 50%, #0bb5a4 100%); --xn-gradient-hero-text: linear-gradient(to right, #087a6f, #0d9e8f, #0bb5a4); --xn-gradient-card: linear-gradient(160deg, #ffffff 0%, #f4f8fa 100%); --xn-shadow-primary: 0 0 16px rgb(13 158 143 / 0.18); --xn-shadow-card: 0 8px 28px rgb(15 26 34 / 0.08); --xn-nav-border: rgba(15, 26, 34, 0.08); --xn-bg-glow-base: #eef3f6; --xn-bg-glow-teal-1: rgba(13, 158, 143, 0.1); --xn-bg-glow-teal-2: rgba(13, 158, 143, 0.06); --xn-bg-glow-vignette: rgba(238, 243, 246, 0.4); --xn-surface-1: #ffffff; --xn-surface-2: #f4f8fa; --xn-surface-3: #e8eef2; --xn-surface-4: #f0f5f7; --xn-surface-card: #ffffff; --xn-surface-card-strong: #f8fafb; --xn-surface-sidebar: #ffffff; --xn-surface-sidebar-admin: #f8fafb; --xn-surface-sidebar-client: linear-gradient(180deg, #ffffff 0%, #f6f9fb 100%); --xn-surface-topbar: rgb(255 255 255 / 0.96); --xn-surface-input: #ffffff; --xn-surface-hover: #f0f5f7; --xn-surface-hover-strong: #e8eef2; --xn-surface-muted: #f4f8fa; --xn-surface-muted-hover: #e8eef2; --xn-surface-glass: rgb(255 255 255 / 0.9); --xn-surface-glass-hover: #f0f5f7; --xn-surface-disabled: #d8e2e8; --xn-surface-console: #f0f5f7; --xn-border-subtle: #e2eaef; --xn-border-input: #c5d3dc; --xn-overlay-backdrop: rgb(255 255 255 / 0.96); --xn-chart-grid: #d8e2e8; --xn-chart-text: #5a6d7d; --xn-surface-tick: #f0f5f7; --xn-surface-tick-hover: #e8eef2; --xn-surface-tick-active: hsl(172 80% 45% / 0.18); --xn-surface-note: #f0f5f7; --xn-surface-btn-order: #f0f5f7; --xn-surface-btn-order-hover: #e8eef2; --xn-surface-topbar-btn: #f4f8fa; --xn-surface-invoice: #ffffff; --xn-surface-invoice-banner: #f4f8fa; --xn-surface-tile: #ffffff; --xn-surface-pill-muted: #e8eef2; --xn-surface-input-filled: #ffffff; --xn-surface-dropzone: #f4f8fa; --xn-surface-dropzone-hover: #e8f5f2; --xn-surface-hover-row: #f0f5f7; --xn-surface-hover-row-strong: #e8eef2; --xn-surface-table-head: #f4f8fa; --xn-surface-amount-suffix: #f0f5f7; --xn-surface-stock-bto: #e8eef2; --xn-surface-console-inner: #1a242c; --xn-surface-tabs: #f0f5f7; --xn-surface-tabs-hover: #e8eef2; --xn-surface-tabs-active: #ffffff; --xn-surface-raised: #f8fafb; --xn-surface-inset: #f4f8fa; --xn-surface-inset-deep: #f0f5f7; --xn-surface-table-wrap: #ffffff; --xn-surface-network: hsl(172 45% 96%); --xn-surface-section-head: #f4f8fa; --xn-surface-unit-block: #f8fafb; --xn-surface-icon-box: #f0f5f7; --xn-surface-toolbar: #f4f8fa; --xn-surface-dialog: #ffffff; --xn-surface-node-card: #ffffff; --xn-surface-reward-box: linear-gradient(135deg, hsl(172 80% 45% / 0.1), hsl(172 45% 96% / 0.95)), #f0f9f7; --xn-badge-discount-text: hsl(152 62% 30%); --xn-badge-discount-bg: hsl(152 50% 42% / 0.14); --xn-badge-discount-border: hsl(152 45% 38% / 0.35); --xn-os-picker-footer: #f0f5f7; --xn-surface-pill-type: hsl(172 45% 96%); --xn-border-pill-type: hsl(172 40% 72% / 0.45); --xn-badge-limited-text: hsl(152 62% 30%); --xn-badge-limited-bg: hsl(152 50% 42% / 0.16); --xn-badge-limited-border: hsl(152 45% 38% / 0.4); --xn-surface-dropdown: #ffffff; --xn-surface-dropdown-hover: #f0f5f7; --xn-shadow-dropdown: 0 12px 32px rgb(15 26 34 / 0.12); --xn-alert-error-text: hsl(0 72% 34%); --xn-alert-error-bg: hsl(0 82% 96%); --xn-alert-error-border: hsl(0 62% 82%); } /* ——— Toggle sol / luna ——— */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--xn-border-input); border-radius: var(--xn-radius); background: var(--xn-surface-glass); color: var(--xn-foreground); cursor: pointer; transition: border-color var(--xn-transition), background var(--xn-transition), color var(--xn-transition); } .theme-toggle:hover { border-color: hsl(172 80% 45% / 0.4); background: var(--xn-surface-glass-hover); } .theme-toggle__icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: block; } html[data-theme='light'] .theme-toggle__icon--sun { display: block; } html[data-theme='light'] .theme-toggle__icon--moon { display: none; } .theme-toggle--block { width: 100%; height: auto; min-height: 2.5rem; gap: 0.5rem; padding: 0.55rem 0.85rem; font-size: 0.875rem; font-weight: 600; } .nav-mobile-theme { width: 100%; margin-bottom: 0.35rem; } /* ——— Ajustes globales modo claro ——— */ html[data-theme='light'] .vortex-card, html[data-theme='light'] .feature-card, html[data-theme='light'] .faq-item, html[data-theme='light'] .product-hub__card, html[data-theme='light'] .games-catalog__card, html[data-theme='light'] .dedicated-featured__card, html[data-theme='light'] .location-card, html[data-theme='light'] .template-logo-tile, html[data-theme='light'] .portal-stats__item { box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .site-header, html[data-theme='light'] .nav-mobile-panel { box-shadow: 0 1px 0 var(--xn-nav-border); } html[data-theme='light'] .btn-ghost-nav, html[data-theme='light'] .lang-switcher__trigger, html[data-theme='light'] .theme-toggle { background: var(--xn-surface-2); color: var(--xn-foreground); } html[data-theme='light'] .lang-switcher__menu { background: var(--xn-surface-dropdown); border-color: var(--xn-border-input); box-shadow: var(--xn-shadow-dropdown); } html[data-theme='light'] .lang-switcher__option:hover, html[data-theme='light'] .lang-switcher__option.is-active { background: var(--xn-surface-dropdown-hover); } html[data-theme='light'] .lang-switcher__current { color: var(--xn-primary); } html[data-theme='light'] .btn-outline-nav { background: var(--xn-primary); color: var(--xn-primary-foreground); } html[data-theme='light'] .btn-outline-nav:hover { background: var(--xn-primary-hover); } html[data-theme='light'] .config-summary, html[data-theme='light'] .config-slider-card, html[data-theme='light'] .dedicated-order__step, html[data-theme='light'] .gsk-picker__panel { background: var(--xn-surface-1); box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .blog-ticker { background: var(--xn-surface-2); } html[data-theme='light'] .blog-widget, html[data-theme='light'] .blog-feed-card, html[data-theme='light'] .blog-post-card { background: var(--xn-surface-1); box-shadow: var(--xn-shadow-card); } /* Panel / admin shell */ html[data-theme='light'] .app-sidebar { background: var(--xn-surface-sidebar); box-shadow: 1px 0 0 var(--xn-border-subtle); } html[data-theme='light'] .app-sidebar--admin { background: var(--xn-surface-sidebar-admin); } html[data-theme='light'] .app-sidebar--client { background: var(--xn-surface-sidebar-client); } html[data-theme='light'] .app-topbar { background: var(--xn-surface-topbar); border-bottom-color: var(--xn-border-subtle); box-shadow: 0 1px 0 var(--xn-border-subtle); } html[data-theme='light'] .app-sidebar__link:hover, html[data-theme='light'] .app-topbar__link-btn:hover, html[data-theme='light'] .app-topbar__btn:hover:not(:disabled) { background: var(--xn-surface-hover); } html[data-theme='light'] .app-sidebar__link--client.is-active, html[data-theme='light'] .app-sidebar__link--admin.is-active { font-weight: 600; } html[data-theme='light'] .app-sidebar__link--client.is-active { color: hsl(172 72% 28%); background: hsl(172 58% 90%); border-color: hsl(172 45% 72%); box-shadow: inset 3px 0 0 hsl(172 72% 38%); } html[data-theme='light'] .app-sidebar__link--client.is-active .app-sidebar__icon { color: hsl(172 72% 32%); } html[data-theme='light'] .app-sidebar__link--admin.is-active { color: hsl(32 85% 28%); background: hsl(38 88% 90%); border-color: hsl(38 70% 72%); box-shadow: inset 3px 0 0 hsl(38 85% 42%); } html[data-theme='light'] .app-sidebar__link--admin.is-active .app-sidebar__icon { color: hsl(32 80% 34%); } html[data-theme='light'] .panel-card, html[data-theme='light'] .auth-card, html[data-theme='light'] .services-card, html[data-theme='light'] .admin-card, html[data-theme='light'] .invoice-card, html[data-theme='light'] .quick-card, html[data-theme='light'] .add-funds-card, html[data-theme='light'] .account-card, html[data-theme='light'] .admin-discord-panel, html[data-theme='light'] .vm-stats-card, html[data-theme='light'] .service-detail-card { background: var(--xn-surface-1); border-color: var(--xn-border); box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .data-table, html[data-theme='light'] .admin-table-wrap table, html[data-theme='light'] .services-table { background: var(--xn-surface-1); } html[data-theme='light'] .data-table th, html[data-theme='light'] .data-table thead, html[data-theme='light'] .services-table th { background: var(--xn-surface-2); } html[data-theme='light'] .data-table tr:hover td, html[data-theme='light'] .services-table tbody tr:hover { background: var(--xn-surface-hover); } html[data-theme='light'] input, html[data-theme='light'] select, html[data-theme='light'] textarea, html[data-theme='light'] .panel-input, html[data-theme='light'] .panel-select, html[data-theme='light'] .auth-card input, html[data-theme='light'] .blog-search__input { background: var(--xn-surface-input); border-color: var(--xn-border-input); color: var(--xn-foreground); } html[data-theme='light'] .cookie-notice { background: var(--xn-overlay-backdrop); border-top-color: var(--xn-border-subtle); } html[data-theme='light'] .vm-stat-chart__canvas { background: var(--xn-surface-2); } html[data-theme='light'] .vm-stat-chart__tooltip { background: var(--xn-surface-1); border-color: var(--xn-border); box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .modal-backdrop, html[data-theme='light'] .panel-modal-backdrop { background: rgb(15 26 34 / 0.35); } html[data-theme='light'] .modal-panel, html[data-theme='light'] .panel-modal { background: var(--xn-surface-1); box-shadow: 0 20px 50px rgb(15 26 34 / 0.15); } html[data-theme='light'] code, html[data-theme='light'] .content-prose code { background: var(--xn-surface-2); color: var(--xn-foreground); } html[data-theme='light'] .xn-game-panel-showcase, html[data-theme='light'] .xn-panel-showcase, html[data-theme='light'] .dedicated-platforms, html[data-theme='light'] .dedicated-table { background: var(--xn-surface-1); } html[data-theme='light'] .xn-panel-showcase__toolbar, html[data-theme='light'] .dedicated-platform__body { background: var(--xn-surface-2); } html[data-theme='light'] .toast { background: var(--xn-surface-1); border-color: var(--xn-border); box-shadow: var(--xn-shadow-card); } /* ——— Modo claro: componentes con colores fijos ——— */ html[data-theme='light'] .config-tick { background: var(--xn-surface-tick); color: var(--xn-muted); border-color: var(--xn-border-input); } html[data-theme='light'] .config-tick:hover { background: var(--xn-surface-tick-hover); color: var(--xn-foreground); } html[data-theme='light'] .config-tick.is-active { background: var(--xn-surface-tick-active); color: var(--xn-primary-dark); border-color: hsl(172 80% 45% / 0.45); } html[data-theme='light'] .config-note { background: var(--xn-surface-note); color: var(--xn-muted); } html[data-theme='light'] .config-duration-tick { background: var(--xn-surface-tick); color: var(--xn-muted); } html[data-theme='light'] .config-duration-tick.is-active { background: var(--xn-surface-tick-active); color: var(--xn-primary-dark); } html[data-theme='light'] .btn-order { background: var(--xn-primary); color: var(--xn-primary-foreground); border-color: var(--xn-primary); } html[data-theme='light'] .btn-order:hover:not(:disabled) { background: var(--xn-primary-hover); border-color: var(--xn-primary-hover); } html[data-theme='light'] .faq-item, html[data-theme='light'] .content-page__inner--wide .faq-item { background: var(--xn-surface-1); border-color: var(--xn-border); } html[data-theme='light'] .faq-item summary, html[data-theme='light'] .faq-item p { color: var(--xn-foreground); } html[data-theme='light'] .content-cta { background: hsl(172 80% 45% / 0.08); border-color: hsl(172 80% 45% / 0.22); } html[data-theme='light'] .games-catalog__search { background: var(--xn-surface-1); border-color: var(--xn-border-input); } html[data-theme='light'] .dedicated-platform__summary:hover { background: var(--xn-surface-hover-row); } html[data-theme='light'] .dedicated-platform[open] .dedicated-platform__summary { background: var(--xn-surface-hover-row-strong); } html[data-theme='light'] .dedicated-table__head { background: var(--xn-surface-table-head); } html[data-theme='light'] .dedicated-stock-pill--bto { background: var(--xn-surface-stock-bto); color: var(--xn-muted); border-color: var(--xn-border-input); } html[data-theme='light'] .app-topbar__balance, html[data-theme='light'] .app-topbar__link-btn { background: var(--xn-surface-topbar-btn); color: var(--xn-foreground); border-color: var(--xn-border-input); } html[data-theme='light'] .app-topbar__btn--admin { background: hsl(38 92% 50% / 0.12); color: hsl(32 85% 38%); border-color: hsl(38 80% 50% / 0.35); } html[data-theme='light'] .invoice-doc { background: var(--xn-surface-invoice); } html[data-theme='light'] .invoice-doc__banner { background: var(--xn-surface-invoice-banner); } html[data-theme='light'] .invoice-doc__meta-block h2 { color: var(--xn-accent-text); } html[data-theme='light'] .service-overview-tile { background: var(--xn-surface-tile); } html[data-theme='light'] .service-spec-pill--muted { background: var(--xn-surface-pill-muted); color: var(--xn-muted); } html[data-theme='light'] .auth-field textarea, html[data-theme='light'] .auth-field .auth-field-textarea, html[data-theme='light'] .auth-field-textarea { background: var(--xn-surface-input-filled); border-color: var(--xn-border-input); color: var(--xn-foreground); } html[data-theme='light'] .ticket-file-picker__zone { background: var(--xn-surface-dropzone); border-color: var(--xn-border-input); } html[data-theme='light'] .ticket-file-picker__zone--over { background: var(--xn-surface-dropzone-hover); } html[data-theme='light'] .ticket-file-picker__btn { background: var(--xn-surface-2); border-color: var(--xn-border-input); } html[data-theme='light'] .add-funds-amount-row__suffix { background: var(--xn-surface-amount-suffix); color: var(--xn-muted); } html[data-theme='light'] .btn-xs--primary { background: var(--xn-primary); color: var(--xn-primary-foreground); border-color: var(--xn-primary); } html[data-theme='light'] .btn-xs--primary:hover:not(:disabled) { background: var(--xn-primary-hover); } html[data-theme='light'] .dashboard-card { background: var(--xn-surface-1); } html.dark .dashboard-card, html[data-theme='dark'] .dashboard-card { background: transparent; background-image: none; box-shadow: none; } html.dark .xn-game-panel__alloc-card, html[data-theme='dark'] .xn-game-panel__alloc-card { background: hsl(175 30% 4.5% / 0.35); } html.dark .xn-dedicated-fw__frame, html[data-theme='dark'] .xn-dedicated-fw__frame, html.dark .xn-vps-panel.dashboard-card, html[data-theme='dark'] .xn-vps-panel.dashboard-card, html.dark .service-detail-card.dashboard-card, html[data-theme='dark'] .service-detail-card.dashboard-card { background: hsl(175 35% 3.5% / 0.28); background-image: none; } html[data-theme='light'] .config-summary__notes .config-note { background: var(--xn-surface-note); color: var(--xn-muted); } html[data-theme='light'] .btn-logout-nav { background: hsl(0 70% 96%); color: hsl(0 65% 42%); border-color: hsl(0 55% 72% / 0.55); } html[data-theme='light'] .btn-logout-nav:hover { background: hsl(0 70% 92%); color: hsl(0 70% 36%); } html[data-theme='light'] .app-topbar__btn--logout { background: hsl(0 70% 96%); color: hsl(0 65% 42%); border-color: hsl(0 55% 72% / 0.55); } html[data-theme='light'] .app-topbar__btn--logout:hover:not(:disabled) { background: hsl(0 70% 92%); color: hsl(0 70% 36%); } html[data-theme='light'] .feature-tag, html[data-theme='light'] .games-catalog__badge { color: var(--xn-accent-text); } html[data-theme='light'] .portal-hero__eyebrow, html[data-theme='light'] .product-hub__status--live, html[data-theme='light'] .games-catalog__badge--live { color: hsl(152 55% 32%); } /* ——— Interacción nav / footer ——— */ .btn-ghost-nav:not(.btn-logout-nav):hover { color: var(--xn-primary); } .site-header .btn-ghost-nav:not(.btn-logout-nav):hover, .app-topbar__link-btn:hover { text-decoration: underline; text-underline-offset: 3px; } footer a:not(.xernode-brand):hover { color: var(--xn-primary) !important; text-decoration: underline; text-underline-offset: 2px; } html[data-theme='light'] footer { border-top-color: var(--xn-nav-border) !important; } html[data-theme='light'] footer .border-t { border-color: var(--xn-nav-border) !important; } /* ——— Componentes panel/admin con fondos fijos ——— */ html[data-theme='light'] .account-tabs { background: var(--xn-surface-tabs); } html[data-theme='light'] .account-tabs__tab:hover { background: var(--xn-surface-tabs-hover); } html[data-theme='light'] .account-tabs__tab--active { background: var(--xn-surface-tabs-active); box-shadow: 0 1px 2px rgb(15 26 34 / 0.06); } html[data-theme='light'] .spec-change-resource, html[data-theme='light'] .spec-change-waive { background: var(--xn-surface-raised); } html[data-theme='light'] .spec-change-waive__check { background: var(--xn-surface-1); border-color: var(--xn-border-input); } html[data-theme='light'] .orders-table-wrap { background: var(--xn-surface-table-wrap); } html[data-theme='light'] .orders-table th { background: var(--xn-surface-table-head); } html[data-theme='light'] .catalog-mode-card { background: var(--xn-surface-1); } html[data-theme='light'] .catalog-mode-card:hover { background: var(--xn-surface-hover); } html[data-theme='light'] .catalog-mode-card--active { background: hsl(172 80% 45% / 0.08); } html[data-theme='light'] .admin-vm-network__current { background: var(--xn-surface-network); } html[data-theme='light'] .admin-vm-network__toggle, html[data-theme='light'] .admin-vm-network__panel { background: var(--xn-surface-inset); } html[data-theme='light'] .admin-vm-network__toggle-box { background: var(--xn-surface-1); } html[data-theme='light'] .dedicated-admin-section__head { background: var(--xn-surface-section-head); } html[data-theme='light'] .dedicated-admin-unit-card, html[data-theme='light'] .dedicated-admin-unit-block, html[data-theme='light'] .dedicated-admin-order-row, html[data-theme='light'] .dedicated-admin-form__bar { background: var(--xn-surface-unit-block); } html[data-theme='light'] .dedicated-admin-unit-block__head { border-bottom-color: var(--xn-border-subtle); } html[data-theme='light'] .location-picker-card { background: var(--xn-surface-1); } html[data-theme='light'] .location-picker-card:hover { background: var(--xn-surface-hover); } html[data-theme='light'] .location-picker-card.is-selected { background: hsl(214 100% 56% / 0.06); } html[data-theme='light'] .template-logo-tile__icon { background: var(--xn-surface-icon-box); } html[data-theme='light'] .xn-panel-showcase__console, html[data-theme='light'] .xn-panel-showcase__console code { background: var(--xn-surface-console-inner) !important; color: hsl(152 55% 42%); } html[data-theme='light'] .xn-panel-showcase__tab.is-active { color: hsl(172 72% 38%); background: hsl(172 80% 45% / 0.1); } html[data-theme='light'] .xn-panel-showcase__tab:hover:not(.is-active) { color: hsl(172 72% 42%); background: transparent; } html[data-theme='light'] .os-picker-card { background: var(--xn-surface-1); } html[data-theme='light'] .os-picker-card__footer { background: var(--xn-os-picker-footer); } html[data-theme='light'] .os-picker-card__footer.is-selected { color: hsl(172 72% 38%); background: hsl(172 80% 45% / 0.1); } html[data-theme='light'] .account-discord__reward-box { background: var(--xn-surface-reward-box); } html[data-theme='light'] .confirm-dialog { background: var(--xn-surface-dialog); box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .admin-node-card { background: var(--xn-surface-node-card); box-shadow: var(--xn-shadow-card); } html[data-theme='light'] .iso-catalog-item { background: var(--xn-surface-1); } html[data-theme='light'] .templates-table__guest { background: var(--xn-surface-pill-type); border-color: var(--xn-border-pill-type); color: var(--xn-accent-text); } html[data-theme='light'] .dedicated-featured__badge { color: var(--xn-badge-limited-text); background: var(--xn-badge-limited-bg); border-color: var(--xn-badge-limited-border); } html[data-theme='light'] .backup-storage-card, html[data-theme='light'] .backup-storage-detail__attach, html[data-theme='light'] .backup-inventory__stat { background: var(--xn-surface-2); } html[data-theme='light'] .panel-blog-search__input { background: var(--xn-surface-input); } html[data-theme='light'] .services-meta li { background: var(--xn-surface-2); } html[data-theme='light'] .xn-panel-showcase__vars input { background: var(--xn-surface-input); }