/**
 * Dashboard hero — temático (reescrito).
 * Usa tokens --panel-* del skin activo. Classic conserva el estilo por defecto de dashboard.css.
 */

/* Dream / Earth: exponer tokens mínimos para el hero */
html[data-skin="dream-soft"] {
  --panel-bg: #bde0fe;
  --panel-bg-elevated: #a2d2ff;
  --panel-surface: #ffc8dd;
  --panel-border: #cdb4db;
  --panel-text: #2d2033;
  --panel-muted: rgba(45, 32, 51, 0.65);
  --panel-accent: #ffafcc;
  --panel-accent-hover: #a2d2ff;
  --panel-accent-on: #2d2033;
  --panel-sidebar: #ffc8dd;
  --panel-sidebar-text: #2d2033;
  --panel-secondary: #a2d2ff;
}
html[data-skin="earth-soft"] {
  --panel-bg: #2b2530;
  --panel-bg-elevated: #3a3340;
  --panel-surface: #6d6875;
  --panel-border: #b5838d;
  --panel-text: #ffcdb2;
  --panel-muted: rgba(255, 205, 178, 0.7);
  --panel-accent: #e5989b;
  --panel-accent-hover: #b5838d;
  --panel-accent-on: #2b2530;
  --panel-sidebar: #2b2530;
  --panel-sidebar-text: #ffcdb2;
  --panel-secondary: #b5838d;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero {
  --dh-bg: linear-gradient(
    135deg,
    var(--panel-sidebar) 0%,
    color-mix(in srgb, var(--panel-sidebar) 78%, var(--panel-accent) 22%) 55%,
    color-mix(in srgb, var(--panel-sidebar) 62%, var(--panel-accent) 38%) 100%
  );
  --dh-fg: var(--panel-sidebar-text);
  --dh-muted: color-mix(in srgb, var(--panel-sidebar-text) 72%, transparent);
  --dh-accent: var(--panel-accent);
  --dh-accent-on: var(--panel-accent-on);
  --dh-border: color-mix(in srgb, var(--panel-sidebar-text) 22%, transparent);
  --dh-shadow: 0 14px 36px color-mix(in srgb, var(--panel-sidebar) 35%, transparent);
  --dh-pill-bg: color-mix(in srgb, var(--panel-sidebar-text) 12%, transparent);
  --dh-pill-border: color-mix(in srgb, var(--panel-sidebar-text) 28%, transparent);
  --dh-ring-track: color-mix(in srgb, var(--panel-sidebar-text) 20%, transparent);
  --dh-glow-a: color-mix(in srgb, var(--panel-accent) 35%, transparent);
  --dh-glow-b: color-mix(in srgb, var(--panel-secondary, var(--panel-accent)) 28%, transparent);
  --dash-hero-glow-opacity: 0.85;
  --dash-hero-pattern-opacity: 0.12;

  background: var(--dh-bg) !important;
  color: var(--dh-fg) !important;
  border: 1px solid var(--dh-border) !important;
  box-shadow: var(--dh-shadow) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero::before,
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero::after {
  display: block !important;
  opacity: var(--dash-hero-glow-opacity, 0.85);
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-hero-title,
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-value {
  color: var(--dh-fg) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-hero-sub,
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-max,
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-label {
  color: var(--dh-muted) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-hero-link {
  color: var(--dh-accent) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-hero-link:hover {
  color: var(--panel-accent-hover, var(--dh-accent)) !important;
  filter: brightness(1.08);
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-progress {
  stroke: var(--dh-accent) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-bg {
  stroke: var(--dh-ring-track) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero #dashRingGradient stop {
  stop-color: var(--dh-accent) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-status-pill,
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge {
  background: var(--dh-pill-bg) !important;
  border-color: var(--dh-pill-border) !important;
  color: var(--dh-fg) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-status-pill.online {
  color: #1faa6a !important;
  border-color: rgba(31, 170, 106, 0.55) !important;
  background: color-mix(in srgb, #1faa6a 16%, transparent) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-status-pill.offline {
  color: #c0392b !important;
  border-color: rgba(192, 57, 43, 0.5) !important;
  background: color-mix(in srgb, #c0392b 14%, transparent) !important;
}

html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge.health-excellent {
  color: #1faa6a !important;
  border-color: rgba(31, 170, 106, 0.55) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge.health-good {
  color: var(--dh-accent) !important;
  border-color: color-mix(in srgb, var(--dh-accent) 50%, transparent) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge.health-warning {
  color: #d68910 !important;
  border-color: rgba(214, 137, 16, 0.5) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge.health-critical {
  color: #c0392b !important;
  border-color: rgba(192, 57, 43, 0.5) !important;
}
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-health-badge.health-offline {
  color: var(--dh-muted) !important;
  border-color: var(--dh-pill-border) !important;
}

/* Anillo más legible */
html:is([data-skin="peachy"], [data-skin="sunny-beach"], [data-skin="spring-green"], [data-skin="evergreen"], [data-skin="warm-neutral"], [data-skin="stormy-teal"], [data-skin="fiery"], [data-skin="vibrant"], [data-skin="nightfall"], [data-skin="autumn-glow"], [data-skin="red-gradient"], [data-skin="springfield"], [data-skin="pastel-rainbow"], [data-skin="gryffindor"], [data-skin="slytherin"], [data-skin="hufflepuff"], [data-skin="ravenclaw"], [data-skin="dark-red"], [data-skin="pixel"], [data-skin="dream-soft"], [data-skin="earth-soft"]) .dash-hero .dash-ring-center {
  color: var(--dh-fg);
}