/* File: src/MeshHealth.Dashboard/asset/css/themes.css */
/* Solo dos temas: oscuro (teal) y blanco — cargado al final de styles.css */

:root,
[data-theme="oscuro"],
[data-theme="midnight"] {
  --mesh-bg: #071a22;
  --mesh-bg-elevated: #0c2430;
  --mesh-bg-sidebar: #0a1f2c;
  --mesh-bg-panel: #0f2a38;
  --mesh-bg-input: #0a2230;
  --mesh-border: #1a4a58;
  --mesh-border-strong: #2a6b7a;
  --mesh-text: #e8f7f5;
  --mesh-text-muted: #8eb8b4;
  --mesh-text-dim: #6a9590;
  --mesh-accent: #14b8a6;
  --mesh-accent-2: #2dd4bf;
  --mesh-accent-hover: #5eead4;
  --mesh-nav-active-bg: #123844;
  --mesh-nav-active-bar: #14b8a6;
  --mesh-login-accent: #14b8a6;
  --mesh-login-glow: rgba(20, 184, 166, 0.16);
  --mesh-scrollbar-track: #0c2430;
  --mesh-scrollbar-thumb: #2a6b7a;
  --mesh-icon: #5eead4;
  --mesh-icon-muted: #6a9590;
  --mesh-bg-card: #123040;
  --mesh-bg-subtle: #0a1f2c;
  --mesh-bg-inset: #0a2230;
  --mesh-topbar-bg: #0a1f2c;
  --mesh-chart-track: #1a4a58;
  --mesh-chart-grid: rgba(94, 234, 212, 0.12);
  --mesh-tooltip-bg: #123844;
  --mesh-tooltip-border: #2a6b7a;
  --mesh-success: #22c55e;
  --mesh-warning: #eab308;
  --mesh-danger: #ef4444;
  --mesh-shadow: rgba(2, 20, 24, 0.45);
  --mesh-accent-glow: color-mix(in srgb, var(--mesh-accent) 16%, transparent);
  --mesh-on-accent: #042f2e;
  --mesh-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mesh-accent) 40%, transparent);
  --mesh-page-glow: radial-gradient(1200px 600px at 12% -10%, rgba(45, 212, 191, 0.18), transparent 55%),
    radial-gradient(900px 500px at 88% 8%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(800px 480px at 50% 100%, rgba(20, 184, 166, 0.1), transparent 45%);
  color-scheme: dark;
}

[data-theme="blanco"] {
  --mesh-bg: #f0fdfa;
  --mesh-bg-elevated: #ffffff;
  --mesh-bg-sidebar: #ecfeff;
  --mesh-bg-panel: #ffffff;
  --mesh-bg-input: #ffffff;
  --mesh-border: #cce7e3;
  --mesh-border-strong: #99d5ce;
  --mesh-text: #0f172a;
  --mesh-text-muted: #475569;
  --mesh-text-dim: #64748b;
  --mesh-accent: #0d9488;
  --mesh-accent-2: #14b8a6;
  --mesh-accent-hover: #0f766e;
  --mesh-nav-active-bg: #ccfbf1;
  --mesh-nav-active-bar: #0d9488;
  --mesh-login-accent: #0d9488;
  --mesh-login-glow: rgba(13, 148, 136, 0.12);
  --mesh-scrollbar-track: #e6fffa;
  --mesh-scrollbar-thumb: #5eead4;
  --mesh-icon: #0d9488;
  --mesh-icon-muted: #64748b;
  --mesh-bg-card: #ffffff;
  --mesh-bg-subtle: #f0fdfa;
  --mesh-bg-inset: #ecfeff;
  --mesh-topbar-bg: #ffffff;
  --mesh-chart-track: #cce7e3;
  --mesh-chart-grid: rgba(13, 148, 136, 0.12);
  --mesh-tooltip-bg: #ffffff;
  --mesh-tooltip-border: #99d5ce;
  --mesh-success: #16a34a;
  --mesh-warning: #ca8a04;
  --mesh-danger: #dc2626;
  --mesh-shadow: rgba(15, 118, 110, 0.1);
  --mesh-accent-glow: color-mix(in srgb, var(--mesh-accent) 12%, transparent);
  --mesh-on-accent: #ffffff;
  --mesh-focus-ring: 0 0 0 2px color-mix(in srgb, var(--mesh-accent) 35%, transparent);
  --mesh-page-glow: radial-gradient(1000px 520px at 10% -8%, rgba(45, 212, 191, 0.22), transparent 55%),
    radial-gradient(800px 420px at 92% 0%, rgba(56, 189, 248, 0.14), transparent 50%);
  color-scheme: light;
}

body.mesh-app,
.mesh-app {
  background: var(--mesh-bg);
  background-image: var(--mesh-page-glow);
  background-attachment: fixed;
  color: var(--mesh-text);
  transition: background 0.3s ease, color 0.2s ease;
}

.enterprise-shell {
  background: transparent;
  color: var(--mesh-text);
}

.enterprise-sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mesh-accent) 12%, var(--mesh-bg-sidebar)) 0%, var(--mesh-bg-sidebar) 40%);
  border-right: 1px solid color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
}

.enterprise-brand,
.mesh-lockup--compact {
  border-bottom-color: color-mix(in srgb, var(--mesh-accent) 22%, var(--mesh-border));
}

.enterprise-main {
  background: transparent;
}

.enterprise-topbar {
  background: transparent;
  border-bottom: none;
  color: var(--mesh-text);
}

.mesh-layout > .enterprise-topbar {
  background: var(--mesh-topbar-bg);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.stat-card,
.panel {
  background: var(--mesh-bg-panel);
  border-color: color-mix(in srgb, var(--mesh-border) 88%, var(--mesh-accent) 12%);
  color: var(--mesh-text);
}

.panel-header {
  border-bottom-color: var(--mesh-border);
}

.panel-title {
  color: var(--mesh-text);
}

.panel-subtitle {
  color: var(--mesh-text-dim);
}

.stat-label {
  color: var(--mesh-text-muted);
}

.stat-value {
  color: var(--mesh-text);
}

.nav-item.active {
  background: var(--mesh-nav-active-bg);
}

.nav-item.active::before {
  background: var(--mesh-nav-active-bar);
}

.nav-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4375rem;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--nav-icon-color, #94a3b8) 18%, transparent);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.nav-item:hover .nav-icon-wrap {
  background: color-mix(in srgb, var(--nav-icon-color, #94a3b8) 28%, transparent);
}

.nav-item.active .nav-icon-wrap {
  background: color-mix(in srgb, var(--nav-icon-color, #94a3b8) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-icon-color) 40%, transparent);
}

.nav-icon-wrap .nav-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  stroke: var(--nav-icon-color, #94a3b8) !important;
  color: var(--nav-icon-color, #94a3b8);
}

.login-overlay {
  background: radial-gradient(ellipse at 50% 0%, var(--mesh-login-glow) 0%, transparent 55%),
    color-mix(in srgb, var(--mesh-bg) 97%, transparent);
}

.login-card {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
}

.login-field label {
  color: var(--mesh-text-muted);
}

.login-field input {
  background: var(--mesh-bg-input);
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text);
}

.login-field input:focus {
  border-color: var(--mesh-accent-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mesh-accent) 20%, transparent);
}

.login-submit,
.sec-btn-primary {
  background: linear-gradient(145deg, var(--mesh-accent-hover) 0%, var(--mesh-accent) 100%);
  color: #ffffff;
}

.login-submit:hover,
.sec-btn-primary:hover {
  filter: brightness(1.08);
}

.sec-btn-link {
  color: var(--mesh-accent);
}

.theme-select-label {
  color: var(--mesh-text-dim);
}

.theme-select {
  background: var(--mesh-bg-input);
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text);
}

.theme-select:focus {
  outline: none;
  border-color: var(--mesh-accent);
}

.sidebar-prefs .theme-select-label {
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.panel-title-icon {
  color: var(--mesh-icon);
}

.topbar-action {
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text-muted);
}

.topbar-action:hover {
  border-color: var(--mesh-accent);
  color: var(--mesh-icon);
}

.topbar-action svg {
  color: inherit;
}

/* Iconos de interfaz — siguen el tema activo */
.device-spec-icon,
.device-wifi-icon,
.peripheral-badge-icon svg {
  color: var(--mesh-icon-muted);
}

.info-card-icon,
.repair-card-icon,
.repair-header-icon,
.panel-title-icon,
.device-quick-btn svg,
.mesh-remote-tile svg,
.mesh-lockup-icon,
.mesh-logo {
  color: var(--mesh-icon);
}

.alert-serial-badge {
  color: var(--mesh-accent-hover);
  background: color-mix(in srgb, var(--mesh-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--mesh-accent-hover) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 8%, transparent);
}

.mesh-remote-tile:hover,
.mesh-remote-tile.active {
  border-color: var(--mesh-accent);
}

.mesh-remote-tile.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 25%, transparent);
}

.nav-icon-wrap .nav-icon {
  transition: stroke 0.25s ease, color 0.25s ease;
}

.nav-icon-wrap {
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

::-webkit-scrollbar-track {
  background: var(--mesh-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--mesh-scrollbar-thumb);
}

/* ── Integración de temas en todo el contenido visual ─────── */

.enterprise-brand,
.mesh-lockup--compact,
.enterprise-sidebar-footer,
.sidebar-prefs {
  color: var(--mesh-text);
}

.nav-item {
  color: var(--mesh-text-muted);
}

.nav-item:hover {
  color: var(--mesh-text);
  background: color-mix(in srgb, var(--mesh-nav-active-bg) 65%, transparent);
}

.nav-item.active {
  color: var(--mesh-text);
}

.topbar-title,
.topbar-subtitle,
.fleet-devices-title,
.device-card-name,
.panel-title,
.sec-title,
.device-hero-title {
  color: var(--mesh-text);
}

.topbar-subtitle,
.stat-label,
.panel-subtitle,
.device-card-user,
.device-card-updated,
.device-hero-meta-muted,
.fleet-devices-count,
.storage-health-index,
.device-spec-label,
.info-card-label {
  color: var(--mesh-text-muted);
}

.device-card,
.device-summary-stack,
.storage-health-grid .storage-health-card.panel,
.repair-card,
.ml-stat-card,
.perf-card,
.info-card,
.token-card,
.user-card,
.alert-item,
.inv-row,
.device-list-row,
.mesh-stack-table tbody tr,
.enterprise-table tbody tr,
.remote-session-card,
.device-spec-row,
.fleet-devices-panel,
.device-cards-empty {
  background: var(--mesh-bg-card);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
  transition: background 0.3s ease, border-color 0.25s ease, color 0.2s ease;
}

.device-card:hover {
  border-color: var(--mesh-border-strong);
  box-shadow: 0 4px 24px var(--mesh-shadow);
}

.device-card:focus-visible {
  border-color: var(--mesh-accent-hover);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-accent) 28%, transparent);
}

.device-section-tab {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
  color: var(--mesh-text-muted);
}

.device-section-tab:hover {
  color: var(--mesh-text);
  border-color: var(--mesh-border-strong);
}

.device-section-tab.active {
  background: color-mix(in srgb, var(--mesh-accent) 12%, var(--mesh-bg-panel));
  border-color: var(--mesh-accent);
  color: var(--mesh-text);
}

.device-health-pill--good { background: color-mix(in srgb, var(--mesh-success) 18%, transparent); color: var(--mesh-success); }
.device-health-pill--warn { background: color-mix(in srgb, var(--mesh-warning) 18%, transparent); color: var(--mesh-warning); }
.device-health-pill--bad { background: color-mix(in srgb, var(--mesh-danger) 18%, transparent); color: var(--mesh-danger); }

.health-donut,
.score-ring {
  background: conic-gradient(var(--donut-color, var(--mesh-accent)) var(--donut-deg, 0deg), var(--mesh-chart-track) 0deg) !important;
}

.health-donut::before,
.health-ring::before,
.score-ring::before,
.device-hero-gauge::before {
  background: var(--mesh-bg-panel) !important;
}

.health-donut-inner,
.health-ring-inner,
.score-ring-inner,
.device-hero-gauge-inner {
  background: transparent !important;
  color: var(--mesh-text);
}

.health-donut-score,
.health-ring-value {
  color: var(--mesh-text);
}

.health-donut-grade,
.health-ring-grade {
  color: var(--mesh-text-muted);
}

.storage-health-index strong,
.device-metric-value strong,
.perf-bar-fill {
  color: var(--mesh-accent-hover);
}

.perf-bar-track {
  background: var(--mesh-chart-track);
}

.mesh-stack-table thead th,
.enterprise-table thead th {
  background: var(--mesh-bg-subtle);
  border-color: var(--mesh-border);
  color: var(--mesh-text-muted);
}

.mesh-stack-table tbody td,
.enterprise-table tbody td {
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.mesh-stack-table tbody tr:hover,
.enterprise-table tbody tr:hover,
.inv-row:hover,
.device-list-row:hover {
  background: color-mix(in srgb, var(--mesh-accent) 5%, var(--mesh-bg-card));
}

input,
select,
textarea,
.search-input,
.inv-search-input,
.topbar-search input,
.sec-field input,
.sec-field select,
.sec-select,
.sec-inventario-search,
.tokens-expiry-row .sec-field-input,
.fleet-repair-select {
  background: var(--mesh-bg-input);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.repair-log-panel {
  background: var(--mesh-bg-inset);
  color: var(--mesh-text-muted);
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.inv-search-input:focus {
  border-color: var(--mesh-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-accent) 18%, transparent);
}

.sec-btn,
.topbar-action,
.device-quick-btn,
.mesh-btn-secondary {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text-muted);
}

.sec-btn:hover,
.device-quick-btn:hover,
.mesh-btn-secondary:hover {
  border-color: var(--mesh-accent);
  color: var(--mesh-accent-hover);
}

.chip,
.filter-chip,
.inv-filter-chip {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
  color: var(--mesh-text-muted);
}

.chip.active,
.filter-chip.active,
.inv-filter-chip.active {
  background: color-mix(in srgb, var(--mesh-accent) 14%, var(--mesh-bg-panel));
  border-color: var(--mesh-accent);
  color: var(--mesh-text);
}

.alert-severity-critical { border-left-color: var(--mesh-danger); }
.alert-severity-warning { border-left-color: var(--mesh-warning); }
.alert-severity-info { border-left-color: var(--mesh-accent); }

.device-online-badge.online {
  background: color-mix(in srgb, var(--mesh-success) 16%, transparent);
  color: var(--mesh-success);
  border-color: color-mix(in srgb, var(--mesh-success) 35%, transparent);
}

.device-online-badge.offline {
  background: color-mix(in srgb, var(--mesh-text-dim) 14%, transparent);
  color: var(--mesh-text-muted);
  border-color: var(--mesh-border);
}

.repair-card:hover,
.info-card:hover,
.token-card:hover {
  border-color: var(--mesh-accent);
}

.panel-head,
.fleet-devices-toolbar--panel {
  border-bottom-color: var(--mesh-border);
}

.storage-sync-pill--live {
  background: color-mix(in srgb, var(--mesh-success) 14%, transparent);
  color: var(--mesh-success);
  border-color: color-mix(in srgb, var(--mesh-success) 30%, transparent);
}

.storage-sync-pill--offline {
  background: color-mix(in srgb, var(--mesh-danger) 12%, transparent);
  color: var(--mesh-danger);
}

.storage-sync-pill--wait {
  background: color-mix(in srgb, var(--mesh-warning) 12%, transparent);
  color: var(--mesh-warning);
}

/* Áreas hundidas / gráficos: tono del tema, sin negro puro desconectado */
:root,
[data-theme] {
  --mesh-bg-inset: color-mix(in srgb, var(--mesh-bg-panel) 88%, var(--mesh-bg-elevated) 12%);
}

.panel > .supervision-health-body,
.panel .supervision-metric-body {
  background: transparent;
}

.storage-health-inner,
.sec-scopes-panel,
.repair-run {
  background: color-mix(in srgb, var(--mesh-bg-panel) 90%, var(--mesh-bg-elevated) 10%);
}

/* ── Adaptación completa: letra, fondos, bordes, badges, gauges ── */

.login-submit,
.sec-btn-primary {
  color: var(--mesh-on-accent, #ffffff);
}

.brand-icon {
  background: linear-gradient(145deg, var(--mesh-accent-hover) 0%, var(--mesh-accent) 100%);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mesh-accent) 28%, transparent);
}

.brand-icon svg {
  stroke: var(--mesh-on-accent, #ffffff);
}

.brand-subtitle,
.mesh-lockup-edition {
  color: var(--mesh-text-dim);
}

.sidebar-footer {
  border-top-color: var(--mesh-border);
}

.sidebar-prefs {
  background: var(--mesh-bg-inset);
  border-color: var(--mesh-border);
}

.sidebar-refresh,
.sidebar-logout {
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text-muted);
  background: transparent;
}

.sidebar-refresh:hover,
.sidebar-logout:hover {
  color: var(--mesh-text);
  border-color: var(--mesh-border-strong);
  background: var(--mesh-nav-active-bg);
}

.nav-badge {
  background: color-mix(in srgb, var(--mesh-danger) 22%, transparent);
  color: var(--mesh-danger);
}

.nav-item,
.nav-label {
  color: inherit;
}

.topbar-user-dropdown {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
  box-shadow: 0 12px 32px var(--mesh-shadow);
}

.topbar-user-dropdown-item {
  color: var(--mesh-text);
}

.topbar-user-dropdown-item:hover {
  background: var(--mesh-nav-active-bg);
}

.topbar-user-dropdown-item--danger {
  color: var(--mesh-danger);
}

.topbar-theme-btn,
.topbar-theme-name,
.topbar-theme-sublabel,
.topbar-theme-chevron {
  color: var(--mesh-text-muted);
}

.topbar-theme-name {
  color: var(--mesh-text);
}

.mesh-modal-backdrop {
  background: color-mix(in srgb, var(--mesh-bg) 40%, rgba(0, 0, 0, 0.55));
}

.mesh-modal-card {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
  box-shadow: 0 20px 48px var(--mesh-shadow);
}

.mesh-modal-card h3,
.mesh-modal-card input[type="password"] {
  color: var(--mesh-text);
}

.mesh-modal-card input[type="password"] {
  background: var(--mesh-bg-input);
  border-color: var(--mesh-border);
}

.mesh-modal-error {
  color: var(--mesh-danger);
}

.sec-field input,
.sec-field select,
.sec-select,
.sec-inventario-search,
.tokens-expiry-row .sec-field-input,
.fleet-repair-select,
.sec-field-input {
  background: var(--mesh-bg-input) !important;
  background-color: var(--mesh-bg-input) !important;
  border-color: var(--mesh-border) !important;
  color: var(--mesh-text) !important;
}

.sec-field input:hover,
.sec-field select:hover,
.sec-select:hover {
  border-color: var(--mesh-border-strong) !important;
}

.sec-field input:focus,
.sec-field select:focus,
.sec-select:focus,
.sec-inventario-search:focus,
.fleet-repair-select:focus {
  border-color: var(--mesh-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-accent) 18%, transparent);
}

.sec-btn-ghost:hover {
  border-color: var(--mesh-border-strong);
  color: var(--mesh-text);
}

.sec-token-revoke-btn {
  color: var(--mesh-danger) !important;
}

.sec-token-revoke-btn:hover {
  color: color-mix(in srgb, var(--mesh-danger) 75%, white) !important;
}

.repair-log-placeholder {
  color: var(--mesh-text-dim);
}

.repair-line-error {
  color: var(--mesh-danger);
}

.repair-line-ok {
  color: var(--mesh-text-muted);
}

/* Badges / pills semánticos */
.badge-connected,
.sec-status-pill.active,
.incident-status--ok,
.device-health-pill--good,
.mesh-summary-value--ok,
.sec-inventario-stat-value--ok {
  background: color-mix(in srgb, var(--mesh-success) 15%, transparent);
  color: var(--mesh-success);
  border-color: color-mix(in srgb, var(--mesh-success) 30%, transparent);
}

.badge-disconnected,
.sec-status-pill.inactive,
.incident-status--fail {
  background: color-mix(in srgb, var(--mesh-danger) 15%, transparent);
  color: var(--mesh-danger);
  border-color: color-mix(in srgb, var(--mesh-danger) 30%, transparent);
}

.badge-excellent { background: color-mix(in srgb, var(--mesh-success) 15%, transparent); color: var(--mesh-success); }
.badge-good { background: color-mix(in srgb, var(--mesh-accent-2) 15%, transparent); color: var(--mesh-accent-2); }
.badge-fair,
.incident-status--open { background: color-mix(in srgb, var(--mesh-warning) 15%, transparent); color: var(--mesh-warning); }
.badge-poor { background: color-mix(in srgb, var(--mesh-warning) 18%, transparent); color: var(--mesh-warning); }
.badge-critical { background: color-mix(in srgb, var(--mesh-danger) 15%, transparent); color: var(--mesh-danger); }

.alert-severity-pill.severity-CRITICAL { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.alert-severity-pill.severity-HIGH { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.alert-severity-pill.severity-MEDIUM { background: rgba(234, 179, 8, 0.2); color: #ca8a04; }
.alert-severity-pill.severity-LOW { background: rgba(34, 197, 94, 0.18); color: #16a34a; }

.alert-badge-predict {
  background: rgba(168, 85, 247, 0.16);
  color: #9333ea;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.alert-badge-done,
.incident-status--ok {
  background: rgba(163, 230, 53, 0.2);
  color: #65a30d;
  border: 1px solid rgba(132, 204, 22, 0.45);
}

.sec-role-admin {
  background: color-mix(in srgb, var(--mesh-accent) 15%, transparent);
  color: var(--mesh-accent-hover);
}

.sec-role-viewer {
  background: color-mix(in srgb, var(--mesh-accent-2) 15%, transparent);
  color: var(--mesh-accent-2);
}

.mesh-summary-value--accent,
.sec-btn-link,
.device-quick-link {
  color: var(--mesh-accent-hover);
}

/* Textos / métricas / device */
.device-metric-value,
.device-hero-score,
.device-hero-name,
.device-hero-title,
.storage-model,
.storage-meta,
.repair-run-summary,
.perf-card,
.info-card-value,
.token-card-value {
  color: var(--mesh-text);
}

.device-hero-meta,
.device-hero-meta-muted,
.device-hero-grade,
.device-hero-last,
.disk-hds-grade--muted,
.disk-hds-temp-chip--muted {
  color: var(--mesh-text-muted);
}

.device-hero-card,
.perf-card,
.ml-stat-card,
.agent-row,
.alert-item,
.inv-row,
.device-list-row {
  border-color: var(--mesh-border);
}

.device-hero-gauge,
.health-ring {
  background: conic-gradient(
    var(--score-color, var(--mesh-success, #22c55e)) var(--score-deg, var(--donut-deg, 0deg)),
    var(--mesh-chart-track) 0
  ) !important;
  transition: --score-deg 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.device-hero-gauge.is-ok,
.health-ring.is-ok {
  --score-color: var(--mesh-success, #22c55e);
}
.device-hero-gauge.is-warn,
.health-ring.is-warn {
  --score-color: var(--mesh-warning, #eab308);
}
.device-hero-gauge.is-crit,
.health-ring.is-crit {
  --score-color: var(--mesh-danger, #ef4444);
}

.device-hero-gauge::before,
.health-ring::before {
  background: var(--mesh-bg-panel) !important;
}

.perf-bar-track,
.disk-hds-bar-track {
  background: var(--mesh-chart-track) !important;
}

.perf-bar-fill {
  background: var(--mesh-accent) !important;
  color: var(--mesh-accent-hover);
}

.perf-cpu .perf-bar-fill { background: var(--mesh-accent-2) !important; }
.perf-mem .perf-bar-fill { background: var(--mesh-accent) !important; }
.perf-disk .perf-bar-fill { background: var(--mesh-warning) !important; }
.perf-net .perf-bar-fill { background: var(--mesh-success) !important; }

/* Gauges SVG — semáforo por porcentaje (no forzar accent del tema) */
.health-gauge-track {
  stroke: var(--mesh-chart-track) !important;
}

.health-gauge-fill:not(.health-gauge-fill--inner) {
  stroke: var(--mesh-success, #22c55e);
}

.health-gauge-fill--inner {
  stroke: var(--mesh-accent-2, #38bdf8);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mesh-accent-2, #38bdf8) 45%, transparent));
}

.health-gauge-fill--ok,
.health-gauge--ok .health-gauge-fill:not(.health-gauge-fill--inner),
.health-gauge-fill--inner.health-gauge-fill--ok {
  stroke: var(--mesh-success, #22c55e) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mesh-success, #22c55e) 45%, transparent));
}

.health-gauge-fill--warn,
.health-gauge--warn .health-gauge-fill:not(.health-gauge-fill--inner),
.health-gauge-fill--inner.health-gauge-fill--warn {
  stroke: var(--mesh-warning, #eab308) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mesh-warning, #eab308) 45%, transparent));
}

.health-gauge-fill--crit,
.health-gauge--crit .health-gauge-fill:not(.health-gauge-fill--inner),
.health-gauge-fill--inner.health-gauge-fill--crit {
  stroke: var(--mesh-danger, #ef4444) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mesh-danger, #ef4444) 45%, transparent));
}

.health-gauge--muted .health-gauge-fill:not(.health-gauge-fill--inner),
.health-gauge--loading .health-gauge-fill--pulse,
.health-gauge--empty .health-gauge-track--dashed {
  stroke: var(--mesh-text-dim) !important;
  filter: none;
}

.health-gauge-value,
.health-gauge-num,
.health-gauge-label {
  color: var(--mesh-text);
}

.health-gauge--ok .health-gauge-num { color: var(--mesh-success, #22c55e); }
.health-gauge--warn .health-gauge-num { color: var(--mesh-warning, #eab308); }
.health-gauge--crit .health-gauge-num { color: var(--mesh-danger, #ef4444); }

.health-gauge-sublabel {
  color: var(--mesh-text-muted);
}

/* Disco HDS */
.disk-hds-item {
  background: var(--mesh-bg-inset);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.disk-hds-item:hover {
  border-color: var(--mesh-border-strong);
  background: color-mix(in srgb, var(--mesh-accent) 6%, var(--mesh-bg-card));
}

.disk-hds-item.is-selected {
  border-color: var(--mesh-accent);
  background: color-mix(in srgb, var(--mesh-accent) 12%, var(--mesh-bg-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mesh-accent) 20%, transparent);
}

.disk-hds-item-icon {
  background: var(--mesh-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-success) 25%, transparent);
}

.disk-hds-item-icon--warn {
  background: var(--mesh-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-warning) 25%, transparent);
}

.disk-hds-item-icon--crit {
  background: var(--mesh-danger);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mesh-danger) 25%, transparent);
}

.disk-hds-item-title,
.disk-hds-item-value {
  color: var(--mesh-text);
}

.disk-hds-item-label {
  color: var(--mesh-text-muted);
}

.storage-badge.ok,
.storage-badge--ok {
  background: color-mix(in srgb, var(--mesh-success) 14%, transparent);
  color: var(--mesh-success);
}

.storage-badge.warn,
.storage-badge--warn {
  background: color-mix(in srgb, var(--mesh-warning) 14%, transparent);
  color: var(--mesh-warning);
}

.storage-badge.muted,
.storage-badge--muted {
  background: color-mix(in srgb, var(--mesh-accent) 12%, transparent);
  color: var(--mesh-accent);
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, transparent);
}

.storage-badge.crit,
.storage-badge--crit {
  background: color-mix(in srgb, var(--mesh-danger) 14%, transparent);
  color: var(--mesh-danger);
}

/* Tablas / filas residuales */
.agent-row:hover,
.alert-item:hover {
  background: color-mix(in srgb, var(--mesh-accent) 5%, var(--mesh-bg-card));
}

.sec-scopes-group-head,
.sec-scope-group-btn {
  background: var(--mesh-bg-subtle);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.user-card-footer,
.token-card-footer {
  background: var(--mesh-bg-inset);
  border-top-color: var(--mesh-border);
}

/* Remote / control — respetar tema salvo canvas de escritorio */
.mesh-remote-tile,
.equipment-control-panel,
.remote-session-card {
  background: var(--mesh-bg-card);
  border-color: var(--mesh-border);
  color: var(--mesh-text);
}

.predictive-alert-banner {
  background: var(--mesh-bg-card);
  color: var(--mesh-text);
}

.predictive-alert-banner.alert-severity-CRITICAL { border-left-color: var(--mesh-danger); }
.predictive-alert-banner.alert-severity-HIGH { border-left-color: var(--mesh-warning); }
.predictive-alert-banner.alert-severity-MEDIUM { border-left-color: var(--mesh-warning); }

.topbar-action:hover {
  background: var(--mesh-nav-active-bg);
  border-color: var(--mesh-accent);
  color: var(--mesh-icon);
}

/* Placeholders y texto muted genérico residual */
::placeholder {
  color: var(--mesh-text-dim);
  opacity: 0.85;
}

.sec-title,
.fleet-devices-title,
.panel-head h2,
.panel-head h3 {
  color: var(--mesh-text);
}

.sec-subtitle,
.fleet-devices-count,
.info-card-label,
.device-spec-label {
  color: var(--mesh-text-muted);
}

.repair-card-title,
.info-card-title,
.token-card-title,
.user-card-name,
.device-card-name {
  color: var(--mesh-text);
}

.repair-card-desc,
.info-card-empty,
.device-cards-empty,
.text-slate-500 {
  color: var(--mesh-text-muted);
}

.sec-btn-danger {
  background: color-mix(in srgb, var(--mesh-danger) 22%, transparent);
  color: var(--mesh-danger);
  border-color: color-mix(in srgb, var(--mesh-danger) 40%, transparent);
}

.sec-btn-danger:hover {
  background: color-mix(in srgb, var(--mesh-danger) 35%, transparent);
}

.login-card {
  background: var(--mesh-bg-panel);
  border-color: var(--mesh-border);
  box-shadow: 0 24px 48px var(--mesh-shadow);
}

.login-subtitle,
.login-brand-sub {
  color: var(--mesh-text-muted);
}

.nav-item:hover {
  color: var(--mesh-text);
  background: color-mix(in srgb, var(--mesh-nav-active-bg) 65%, transparent);
}

.nav-item.active {
  background: var(--mesh-nav-active-bg);
  color: var(--mesh-text);
}

body,
html {
  background: var(--mesh-bg);
  color: var(--mesh-text);
}

[data-theme] {
  color-scheme: inherit;
}

/* Utilidades Tailwind residuales: siguen el tema */
.text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300,
.text-gray-50, .text-gray-100, .text-gray-200, .text-gray-300 {
  color: var(--mesh-text) !important;
}
.text-slate-400, .text-slate-500, .text-slate-600,
.text-gray-400, .text-gray-500, .text-gray-600 {
  color: var(--mesh-text-muted) !important;
}
.text-slate-700, .text-slate-800, .text-slate-900,
.text-gray-700, .text-gray-800, .text-gray-900 {
  color: var(--mesh-text) !important;
}
.bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900 {
  background-color: var(--mesh-bg-panel) !important;
}
.border-slate-700, .border-slate-600, .border-gray-700 {
  border-color: var(--mesh-border) !important;
}
.lang-select option,
.theme-select option,
.theme-select--topbar option,
.theme-select--sidebar option {
  background-color: var(--mesh-bg-panel);
  color: var(--mesh-text);
}
[data-theme="blanco"] .lang-select option,
[data-theme="blanco"] .theme-select option,
[data-theme="blanco"] .theme-select--topbar option,
[data-theme="blanco"] .theme-select--sidebar option {
  background-color: #ffffff;
  color: #0f172a;
}


/* ── Tema blanco: forzar contraste de información residual ── */
[data-theme="blanco"] .enterprise-main,
[data-theme="blanco"] .enterprise-content,
[data-theme="blanco"] .enterprise-shell,
[data-theme="blanco"] .mesh-layout {
  background: var(--mesh-bg) !important;
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] .panel,
[data-theme="blanco"] .stat-card,
[data-theme="blanco"] .device-card,
[data-theme="blanco"] .info-card,
[data-theme="blanco"] .repair-card,
[data-theme="blanco"] .ml-stat-card,
[data-theme="blanco"] .perf-card,
[data-theme="blanco"] .token-card,
[data-theme="blanco"] .user-card,
[data-theme="blanco"] .alert-item,
[data-theme="blanco"] .sec-inventario-stat,
[data-theme="blanco"] .disk-hds-item,
[data-theme="blanco"] .mesh-stack-table tbody tr,
[data-theme="blanco"] .enterprise-table tbody tr {
  background: var(--mesh-bg-card) !important;
  border-color: var(--mesh-border) !important;
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] .topbar-title,
[data-theme="blanco"] .panel-title,
[data-theme="blanco"] .stat-value,
[data-theme="blanco"] .sec-inventario-equipo-name,
[data-theme="blanco"] .sec-inventario-stat-value,
[data-theme="blanco"] .device-metric-value,
[data-theme="blanco"] .device-spec-value,
[data-theme="blanco"] .device-card-name,
[data-theme="blanco"] .device-hero-title,
[data-theme="blanco"] .device-hero-score,
[data-theme="blanco"] .health-gauge-value,
[data-theme="blanco"] .health-gauge-num,
[data-theme="blanco"] .health-donut-score,
[data-theme="blanco"] .disk-hds-item-value,
[data-theme="blanco"] .disk-hds-item-title,
[data-theme="blanco"] .predictive-alert-title,
[data-theme="blanco"] .info-card-title,
[data-theme="blanco"] .info-card-value,
[data-theme="blanco"] .repair-card-title,
[data-theme="blanco"] .mesh-stack-table td,
[data-theme="blanco"] .enterprise-table td {
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] .stat-label,
[data-theme="blanco"] .panel-subtitle,
[data-theme="blanco"] .sec-inventario-equipo-meta,
[data-theme="blanco"] .device-spec-label,
[data-theme="blanco"] .info-card-label,
[data-theme="blanco"] .info-card-empty,
[data-theme="blanco"] .device-cards-empty,
[data-theme="blanco"] .storage-model,
[data-theme="blanco"] .storage-meta,
[data-theme="blanco"] .repair-run-summary,
[data-theme="blanco"] .topbar-subtitle,
[data-theme="blanco"] .health-gauge-sublabel,
[data-theme="blanco"] .device-hero-meta,
[data-theme="blanco"] .device-hero-meta-muted {
  color: var(--mesh-text-muted) !important;
}

[data-theme="blanco"] .sec-inventario-table tbody tr.sec-inventario-row:hover,
[data-theme="blanco"] .mesh-stack-table tbody tr:hover,
[data-theme="blanco"] .enterprise-table tbody tr:hover {
  background: color-mix(in srgb, var(--mesh-accent) 6%, var(--mesh-bg-card)) !important;
}

[data-theme="blanco"] .sec-scopes-group-head,
[data-theme="blanco"] .sec-scope-group-btn,
[data-theme="blanco"] .sec-scopes-panel,
[data-theme="blanco"] .user-card-footer,
[data-theme="blanco"] .token-card-footer,
[data-theme="blanco"] .repair-log-panel {
  background: var(--mesh-bg-inset) !important;
  border-color: var(--mesh-border) !important;
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] input,
[data-theme="blanco"] select,
[data-theme="blanco"] textarea,
[data-theme="blanco"] .sec-field input,
[data-theme="blanco"] .sec-field select,
[data-theme="blanco"] .sec-select,
[data-theme="blanco"] .lang-select {
  background: var(--mesh-bg-input) !important;
  color: var(--mesh-text) !important;
  border-color: var(--mesh-border) !important;
}

[data-theme="blanco"] .topbar-action,
[data-theme="blanco"] .sec-btn,
[data-theme="blanco"] .sec-btn-ghost,
[data-theme="blanco"] .device-quick-btn {
  background: var(--mesh-bg-panel) !important;
  color: var(--mesh-text-muted) !important;
  border-color: var(--mesh-border-strong) !important;
}

[data-theme="blanco"] .topbar-action:hover:not(:disabled),
[data-theme="blanco"] .sec-btn:hover,
[data-theme="blanco"] .device-quick-btn:hover {
  background: var(--mesh-nav-active-bg) !important;
  color: var(--mesh-accent) !important;
  border-color: var(--mesh-accent) !important;
}

[data-theme="blanco"] .predictive-alert-banner {
  background: var(--mesh-bg-card) !important;
  border-color: var(--mesh-border) !important;
  color: var(--mesh-text) !important;
  box-shadow: 0 4px 16px var(--mesh-shadow) !important;
}

[data-theme="blanco"] .storage-health-kpis > *,
[data-theme="blanco"] .storage-kpi,
[data-theme="blanco"] .disk-hds-summary--muted {
  background: var(--mesh-bg-inset) !important;
  color: var(--mesh-text) !important;
  border-color: var(--mesh-border) !important;
}

/* ── Blanco: eliminar manchas azul oscuro residuales ── */
[data-theme="blanco"] .supervision-chart-wrap,
[data-theme="blanco"] .supervision-chart-wrap--bar,
[data-theme="blanco"] .perf-chart-wrap,
[data-theme="blanco"] .device-telemetry-chart-wrap,
[data-theme="blanco"] .chart-container,
[data-theme="blanco"] .repair-log-panel,
[data-theme="blanco"] .mc-panel,
[data-theme="blanco"] .mc-files-panel,
[data-theme="blanco"] .mc-term-panel,
[data-theme="blanco"] .device-section-panel,
[data-theme="blanco"] .fleet-devices-panel,
[data-theme="blanco"] .fleet-repair-panel,
[data-theme="blanco"] .sec-inventario-panel,
[data-theme="blanco"] .sec-usuarios-panel,
[data-theme="blanco"] .mesh-stack-table-wrap,
[data-theme="blanco"] .device-hero-card,
[data-theme="blanco"] .sec-scopes-panel,
[data-theme="blanco"] .login-overlay,
[data-theme="blanco"] .login-card {
  background: var(--mesh-bg-card) !important;
  background-color: var(--mesh-bg-card) !important;
  color: var(--mesh-text) !important;
  border-color: var(--mesh-border) !important;
}

[data-theme="blanco"] .incident-item,
[data-theme="blanco"] .device-incident-item {
  background: linear-gradient(145deg, #fff7ed 0%, #ffffff 55%, #fffbeb 100%) !important;
  border-color: color-mix(in srgb, #f97316 35%, #cbd5e1) !important;
  color: var(--mesh-text) !important;
}
[data-theme="blanco"] .incident-item.alert-severity-HIGH,
[data-theme="blanco"] .device-incident-item.alert-severity-HIGH {
  background: linear-gradient(145deg, #ffedd5 0%, #fff7ed 55%, #ffffff 100%) !important;
  border-left-color: #ea580c !important;
}
[data-theme="blanco"] .incident-item.alert-severity-CRITICAL,
[data-theme="blanco"] .device-incident-item.alert-severity-CRITICAL {
  background: linear-gradient(145deg, #fee2e2 0%, #fff1f2 55%, #ffffff 100%) !important;
  border-left-color: #dc2626 !important;
}
[data-theme="blanco"] .incident-plan-body {
  background: color-mix(in srgb, var(--mesh-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, #cbd5e1) !important;
}
[data-theme="blanco"] .incident-plan-toggle {
  color: #0f766e !important;
}
[data-theme="blanco"] .incident-plan-toggle.is-open {
  color: #042f2e !important;
}
[data-theme="blanco"] #remote-panel-terminal.mc-panel {
  background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 30%, #cbd5e1) !important;
}
[data-theme="blanco"] .mc-term-toolbar,
[data-theme="blanco"] #remote-panel-terminal .mc-panel-head {
  background: linear-gradient(180deg, #ccfbf1 0%, #f0fdfa 100%) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, #cbd5e1) !important;
}
[data-theme="blanco"] .mc-tool-btn {
  background: color-mix(in srgb, var(--mesh-accent) 10%, #ffffff) !important;
  color: var(--mesh-text) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 30%, #cbd5e1) !important;
}
[data-theme="blanco"] .mc-tool-primary,
[data-theme="blanco"] .mc-tool-btn.is-active {
  color: #042f2e !important;
  background: linear-gradient(145deg, #5eead4 0%, #14b8a6 100%) !important;
  border-color: #0f766e !important;
}

[data-theme="blanco"] .mc-desktop-viewport,
[data-theme="blanco"] #remote-desktop-canvas {
  background: linear-gradient(160deg, #ecfeff 0%, #e0f2fe 45%, #eef2ff 100%) !important;
}

[data-theme="blanco"] .mc-desktop-panel,
[data-theme="blanco"] .mc-desktop-shell {
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 55%, #f8fafc 100%) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 30%, #cbd5e1) !important;
}

[data-theme="blanco"] .mc-desktop-topbar,
[data-theme="blanco"] .mc-desktop-bottombar {
  background: linear-gradient(180deg, #ccfbf1 0%, #f0fdfa 100%) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, #cbd5e1) !important;
}

[data-theme="blanco"] .remote-desktop-overlay {
  background: linear-gradient(165deg, color-mix(in srgb, var(--mesh-accent) 18%, rgba(255,255,255,0.94)) 0%, rgba(248,250,252,0.92) 100%) !important;
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] .remote-desktop-overlay.is-error {
  color: #b91c1c !important;
}

[data-theme="blanco"] .remote-desktop-overlay.is-waiting {
  color: #0f766e !important;
}

[data-theme="blanco"] .mc-desktop-btn {
  background: color-mix(in srgb, var(--mesh-accent) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 35%, #cbd5e1) !important;
  color: var(--mesh-text) !important;
}

[data-theme="blanco"] .mc-desktop-btn-primary {
  color: #042f2e !important;
  background: linear-gradient(145deg, #5eead4 0%, #14b8a6 100%) !important;
  border-color: #0f766e !important;
}

[data-theme="blanco"] .mc-desktop-topbar,
[data-theme="blanco"] .mc-desktop-bottombar,
[data-theme="blanco"] .mc-tool-bar,
[data-theme="blanco"] .mc-status-bar {
  background: var(--mesh-bg-elevated) !important;
  color: var(--mesh-text) !important;
  border-color: var(--mesh-border) !important;
}

[data-theme="blanco"] .device-cards-empty,
[data-theme="blanco"] .info-card-empty,
[data-theme="blanco"] .fleet-groups-empty,
[data-theme="blanco"] .mc-files-empty,
[data-theme="blanco"] .repair-log-empty,
[data-theme="blanco"] .mesh-stack-empty td {
  background: transparent !important;
  color: var(--mesh-text-muted) !important;
}

[data-theme="blanco"] .health-donut::before,
[data-theme="blanco"] .health-ring::before,
[data-theme="blanco"] .score-ring::before,
[data-theme="blanco"] .device-hero-gauge::before {
  background: var(--mesh-bg-panel) !important;
}

[data-theme="blanco"] .sec-inventario-search,
[data-theme="blanco"] .tokens-expiry-row .sec-field-input,
[data-theme="blanco"] .fleet-repair-select,
[data-theme="blanco"] .mc-desktop-select,
[data-theme="blanco"] .mc-desktop-btn {
  background: var(--mesh-bg-input) !important;
  color: var(--mesh-text) !important;
  border-color: var(--mesh-border) !important;
}

[data-theme="blanco"] .agent-row:hover,
[data-theme="blanco"] .alert-item:hover,
[data-theme="blanco"] .sec-inventario-row:hover,
[data-theme="blanco"] .inv-row:hover {
  background: color-mix(in srgb, var(--mesh-accent) 8%, var(--mesh-bg-card)) !important;
}

/* Blanco: conservar color en bloqueo y salud disco/batería */
[data-theme="blanco"] .equipment-control-lock,
[data-theme="blanco"] .device-summary-stack .equipment-control-lock {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 55%, #fff1f2 100%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 6px 18px color-mix(in srgb, #ef4444 18%, transparent) !important;
}
[data-theme="blanco"] .equipment-control-unlock,
[data-theme="blanco"] .device-summary-stack .equipment-control-unlock {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 55%, #ecfdf5 100%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 6px 18px color-mix(in srgb, #10b981 18%, transparent) !important;
}
[data-theme="blanco"] .equipment-control-btn-lock {
  color: #fff !important;
  background: linear-gradient(145deg, #f87171 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
}
[data-theme="blanco"] .equipment-control-btn-unlock {
  color: #fff !important;
  background: linear-gradient(145deg, #34d399 0%, #059669 100%) !important;
  border-color: #047857 !important;
}
[data-theme="blanco"] .rental-lock {
  background: linear-gradient(160deg, #fee2e2 0%, #fff 65%) !important;
  border-color: #f87171 !important;
  box-shadow: 0 8px 22px color-mix(in srgb, #ef4444 14%, transparent) !important;
}
[data-theme="blanco"] .rental-unlock {
  background: linear-gradient(160deg, #d1fae5 0%, #fff 65%) !important;
  border-color: #34d399 !important;
  box-shadow: 0 8px 22px color-mix(in srgb, #10b981 14%, transparent) !important;
}
[data-theme="blanco"] .rental-btn-lock {
  color: #fff !important;
  background: linear-gradient(145deg, #f87171 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
}
[data-theme="blanco"] .rental-btn-unlock {
  color: #fff !important;
  background: linear-gradient(145deg, #34d399 0%, #059669 100%) !important;
  border-color: #047857 !important;
}
[data-theme="blanco"] .device-storage-grid .storage-health-card.panel {
  background: linear-gradient(165deg, #ecfeff 0%, #f0f9ff 45%, #eff6ff 100%) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 35%, #cbd5e1) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--mesh-accent) 12%, transparent) !important;
}
[data-theme="blanco"] #battery-health-card.storage-health-card.panel {
  background: linear-gradient(165deg, #ecfdf5 0%, #f0fdf4 45%, #f7fee7 100%) !important;
  border-color: color-mix(in srgb, #10b981 35%, #cbd5e1) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, #10b981 12%, transparent) !important;
}
[data-theme="blanco"] .storage-health-body,
[data-theme="blanco"] #battery-health-card .storage-health-body {
  background: transparent !important;
}
[data-theme="blanco"] .storage-metric-grid {
  background: color-mix(in srgb, var(--mesh-accent) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 28%, #cbd5e1) !important;
}
[data-theme="blanco"] #battery-health-card .storage-metric-grid {
  background: color-mix(in srgb, #10b981 12%, #ffffff) !important;
  border-color: color-mix(in srgb, #10b981 30%, #cbd5e1) !important;
}
[data-theme="blanco"] .disk-hds-summary {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  border-color: #4ade80 !important;
  color: #14532d !important;
}
[data-theme="blanco"] .disk-hds-summary--warn {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #fbbf24 !important;
  color: #78350f !important;
}
[data-theme="blanco"] .disk-hds-summary--crit {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  border-color: #f87171 !important;
  color: #7f1d1d !important;
}
[data-theme="blanco"] .battery-info-heading,
[data-theme="blanco"] .storage-metric-item dt {
  color: var(--mesh-accent) !important;
}
[data-theme="blanco"] #battery-health-card .battery-info-heading,
[data-theme="blanco"] #battery-health-card .storage-metric-item dt {
  color: #047857 !important;
}
[data-theme="blanco"] .storage-health-kpis > *,
[data-theme="blanco"] .storage-kpi,
[data-theme="blanco"] .disk-hds-summary--muted {
  background: color-mix(in srgb, var(--mesh-accent) 8%, #ffffff) !important;
  color: var(--mesh-text) !important;
  border-color: color-mix(in srgb, var(--mesh-accent) 25%, #cbd5e1) !important;
}