/**
 * Puente de temas: aplica al shell demo las mismas reglas que html.dark-theme en el panel real.
 */
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) {
    background-color: #000000;
    color: #e5e5e5;
    color-scheme: dark;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .demo-panel-wrapper,
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .demo-main-panel,
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .content.dash-v2 {
    background-color: #000000 !important;
    color: #e5e5e5;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .navbar,
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .navbar-default,
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) nav.navbar {
    background: linear-gradient(180deg, #0a101c 0%, #000000 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(252, 163, 17, 0.28) !important;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]) .navbar a:not(.lp-demo-plan-switch-btn),
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]) .navbar .navbar-brand {
    color: #e5e5e5 !important;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]) .theme-toggle a i {
    color: #fca311 !important;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .sidebar,
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .sidebar-modern {
    background: #0a101c !important;
}

.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .card:not(.dash-24h-card):not(.dash-kpi),
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .panel:not(.dash-panel):not(.quick-panel),
.lp-adm-real-shell:is(.dark-theme, [data-theme="dark"]):is([data-skin="classic"], :not([data-skin]), [data-skin=""]) .adm-card {
    background-color: #14213d !important;
    border-color: #1c2f52 !important;
    color: #e5e5e5 !important;
}

.lp-adm-real-shell:not(.dark-theme):is([data-skin="classic"], :not([data-skin]), [data-skin=""]),
.lp-adm-real-shell[data-theme="light"]:is([data-skin="classic"], :not([data-skin]), [data-skin=""]) {
    background-color: #ffffff;
    color: #14213d;
    color-scheme: light;
}

.lp-adm-real-shell:not(.dark-theme) .demo-panel-wrapper,
.lp-adm-real-shell:not(.dark-theme) .demo-main-panel,
.lp-adm-real-shell:not(.dark-theme) .content.dash-v2,
.lp-adm-real-shell[data-theme="light"] .demo-panel-wrapper,
.lp-adm-real-shell[data-theme="light"] .demo-main-panel,
.lp-adm-real-shell[data-theme="light"] .content.dash-v2 {
    background-color: #f4f6fb !important;
    color: #14213d;
}

.lp-adm-real-shell:not(.dark-theme) .sidebar-modern,
.lp-adm-real-shell[data-theme="light"] .sidebar-modern {
    background: #ffffff !important;
}

.lp-adm-real-shell .theme-toggle a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.lp-adm-real-shell .theme-toggle a i {
    color: #fca311 !important;
}

/* Evitar que landing-demo.css pise el dashboard real dentro de la demo */
.lp-adm-real-shell .dash-v2 .dash-hero,
.lp-adm-real-shell .dash-v2 .dash-kpi,
.lp-adm-real-shell .dash-v2 .dash-24h-card,
.lp-adm-real-shell .dash-v2 .qa-chip {
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}

.lp-adm-real-shell .lp-adm-panel {
    display: none;
}

.lp-adm-real-shell .lp-adm-panel.is-active {
    display: block;
}

.lp-adm-real-shell .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ----- Puente Classic skin (html[data-skin] → shell demo embebida) ----- */
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-ring {
    display: none;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metrics {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 2px 0 2px;
    padding: 14px 0 4px;
    border-top: 1px solid color-mix(in srgb, var(--dh-accent) 35%, transparent);
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metric {
    flex: 1 1 140px;
    gap: 6px;
    padding: 4px 20px 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metric + .dash-hero-metric {
    padding-left: 20px;
    border-left: 1px solid color-mix(in srgb, var(--dh-fg) 14%, transparent);
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metric-label {
    order: 2;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    opacity: 0.9;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metric-value {
    order: 1;
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    font-weight: 800;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-title {
    margin-bottom: 2px;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-metric-max {
    font-size: 0.55em;
    font-weight: 600;
    vertical-align: 0.12em;
    margin-left: 4px;
    opacity: 0.75;
}
.lp-adm-real-shell:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero-link {
    margin-top: 14px;
}

/* Classic light hero (shell sin .dark-theme) */
.lp-adm-real-shell:not(.dark-theme):is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero,
.lp-adm-real-shell[data-theme="light"]:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero {
    --dh-bg: linear-gradient(155deg, #ffffff 0%, #f7f8fb 48%, #eef2f7 100%);
    --dh-fg: #14213d;
    --dh-muted: rgba(20, 33, 61, 0.55);
    --dh-accent: #d98900;
    --dh-border: rgba(20, 33, 61, 0.1);
    --dh-shadow: 0 10px 28px rgba(20, 33, 61, 0.07);
    --dh-pill-bg: rgba(252, 163, 17, 0.1);
    --dh-pill-border: rgba(252, 163, 17, 0.32);
    --dh-metric-bg: transparent;
    --dh-metric-border: transparent;
    --dh-glow-a: rgba(252, 163, 17, 0.1);
    --dh-glow-b: rgba(20, 33, 61, 0.05);
}
.lp-adm-real-shell:not(.dark-theme):is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero .dash-status-pill.online,
.lp-adm-real-shell[data-theme="light"]:is(:not([data-skin]), [data-skin=""], [data-skin="classic"]) .dash-hero .dash-status-pill.online {
    color: #1a7f4b;
    border-color: rgba(26, 127, 75, 0.35);
    background: rgba(26, 127, 75, 0.08);
}

/* ----- Puente dashboard oscuro (html.dark-theme → shell demo) ----- */
.lp-adm-real-shell.dark-theme .dash-live-clock,
.lp-adm-real-shell[data-theme="dark"] .dash-live-clock { color: #8892a0; }
.lp-adm-real-shell.dark-theme .dash-topbar-eyebrow,
.lp-adm-real-shell[data-theme="dark"] .dash-topbar-eyebrow { color: #fca311; }
.lp-adm-real-shell.dark-theme .dash-topbar-title,
.lp-adm-real-shell[data-theme="dark"] .dash-topbar-title { color: #eef2f7; }
.lp-adm-real-shell.dark-theme .dash-kpi,
.lp-adm-real-shell[data-theme="dark"] .dash-kpi {
    background: #0a101c;
    border-color: #1c2f52;
}
.lp-adm-real-shell.dark-theme .dash-kpi-value,
.lp-adm-real-shell[data-theme="dark"] .dash-kpi-value { color: #eef2f7; }
.lp-adm-real-shell.dark-theme .dash-kpi-purple .dash-kpi-value,
.lp-adm-real-shell[data-theme="dark"] .dash-kpi-purple .dash-kpi-value { color: #fca311; }
.lp-adm-real-shell.dark-theme .dash-panel,
.lp-adm-real-shell[data-theme="dark"] .dash-panel {
    background: #0a101c;
    border-color: #1c2f52;
}
.lp-adm-real-shell.dark-theme .dash-panel .panel-header,
.lp-adm-real-shell[data-theme="dark"] .dash-panel .panel-header { border-bottom-color: #1c2f52; }
.lp-adm-real-shell.dark-theme .dash-panel .panel-header h4,
.lp-adm-real-shell[data-theme="dark"] .dash-panel .panel-header h4 { color: #e0e6ed; }
.lp-adm-real-shell.dark-theme .dash-24h-section,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-section {
    background: #0a101c;
    border-color: #1c2f52;
}
.lp-adm-real-shell.dark-theme .dash-24h-header h3,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-header h3 { color: #e0e6ed; }
.lp-adm-real-shell.dark-theme .dash-24h-header p,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-header p { color: #8892a0; }
.lp-adm-real-shell.dark-theme .dash-24h-card,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.lp-adm-real-shell.dark-theme .dash-24h-value,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-value { color: #e0e6ed; }
.lp-adm-real-shell.dark-theme .dash-24h-label,
.lp-adm-real-shell[data-theme="dark"] .dash-24h-label { color: #8892a0; }
.lp-adm-real-shell.dark-theme .dash-v2-card,
.lp-adm-real-shell[data-theme="dark"] .dash-v2-card {
    background: #0a101c;
    border-color: #1c2f52;
}
.lp-adm-real-shell.dark-theme .dash-v2 .dash-quick-top,
.lp-adm-real-shell[data-theme="dark"] .dash-v2 .dash-quick-top {
    background: #0a101c;
    border-color: #1c2f52;
}
.lp-adm-real-shell.dark-theme .dash-health-badge.health-excellent,
.lp-adm-real-shell[data-theme="dark"] .dash-health-badge.health-excellent {
    color: #7dffb3;
    border-color: rgba(125, 255, 179, 0.4);
}

.lp-adm-real-shell.dark-theme .qa-chip,
.lp-adm-real-shell[data-theme="dark"] .qa-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0 !important;
}
.lp-adm-real-shell.dark-theme .qa-chip:hover,
.lp-adm-real-shell.dark-theme .qa-chip:focus,
.lp-adm-real-shell[data-theme="dark"] .qa-chip:hover,
.lp-adm-real-shell[data-theme="dark"] .qa-chip:focus {
    background: color-mix(in srgb, var(--qa-accent, #fca311) 12%, #0a101c);
    color: #fff !important;
}

.lp-adm-real-shell.dark-theme .dash-online-item,
.lp-adm-real-shell[data-theme="dark"] .dash-online-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.lp-adm-real-shell.dark-theme .dash-online-avatar,
.lp-adm-real-shell[data-theme="dark"] .dash-online-avatar { color: #fca311; }
.lp-adm-real-shell.dark-theme .dash-online-name,
.lp-adm-real-shell[data-theme="dark"] .dash-online-name { color: #e0e6ed; }
.lp-adm-real-shell.dark-theme .dash-online-more,
.lp-adm-real-shell[data-theme="dark"] .dash-online-more {
    background: rgba(252, 163, 17, 0.08);
    color: #fca311 !important;
}

.lp-adm-real-shell.dark-theme .dash-v2-navbar,
.lp-adm-real-shell[data-theme="dark"] .dash-v2-navbar {
    background: rgba(26, 29, 35, 0.92) !important;
    border-bottom: 1px solid #1c2f52 !important;
}

/* Classic Light: navbar y cards del panel demo */
.lp-adm-real-shell:not(.dark-theme) .navbar,
.lp-adm-real-shell:not(.dark-theme) .navbar-default,
.lp-adm-real-shell[data-theme="light"] .navbar,
.lp-adm-real-shell[data-theme="light"] .navbar-default {
    background: #ffffff !important;
    border-bottom: 1px solid #e8ecf0 !important;
}
.lp-adm-real-shell:not(.dark-theme) .navbar a:not(.lp-demo-plan-switch-btn),
.lp-adm-real-shell:not(.dark-theme) .navbar .navbar-brand,
.lp-adm-real-shell[data-theme="light"] .navbar a:not(.lp-demo-plan-switch-btn),
.lp-adm-real-shell[data-theme="light"] .navbar .navbar-brand {
    color: #14213d !important;
}
.lp-adm-real-shell:not(.dark-theme) .adm-card,
.lp-adm-real-shell[data-theme="light"] .adm-card {
    background: #ffffff !important;
    border-color: #e8ecf0 !important;
    color: #14213d !important;
}

/* Tipografía del dashboard: no heredar 13px de landing-demo */
.lp-adm-real-shell .content.dash-v2 {
    font-size: 14px;
    line-height: 1.45;
}

/* ----- Sidebar: puente #serverMenu / #settingsData (html.dark-theme → shell) ----- */
.lp-adm-real-shell.dark-theme .sidebar-modern #serverMenu > ul > li > a,
.lp-adm-real-shell.dark-theme .sidebar-modern #settingsData > ul > li > a,
.lp-adm-real-shell[data-theme="dark"] .sidebar-modern #serverMenu > ul > li > a,
.lp-adm-real-shell[data-theme="dark"] .sidebar-modern #settingsData > ul > li > a {
    color: var(--sb-text, #e0e6ed) !important;
    background: transparent !important;
}

.lp-adm-real-shell:not(.dark-theme) .sidebar-modern #serverMenu > ul > li > a,
.lp-adm-real-shell:not(.dark-theme) .sidebar-modern #settingsData > ul > li > a,
.lp-adm-real-shell[data-theme="light"] .sidebar-modern #serverMenu > ul > li > a,
.lp-adm-real-shell[data-theme="light"] .sidebar-modern #settingsData > ul > li > a {
    color: var(--sb-text, #3d4a5c) !important;
}

.lp-adm-real-shell.dark-theme .sidebar-modern #serverMenu > ul > li + li,
.lp-adm-real-shell[data-theme="dark"] .sidebar-modern #serverMenu > ul > li + li {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

.lp-adm-real-shell:not(.dark-theme) .sidebar-modern #serverMenu > ul > li + li,
.lp-adm-real-shell[data-theme="light"] .sidebar-modern #serverMenu > ul > li + li {
    border-top-color: rgba(20, 33, 61, 0.08) !important;
}