/* Tema oscuro para la guia de clases (ficha de clase y portada de la guia).
   Se carga DESPUES de class-common.css / class.css / index.css y solo cambia colores. */
:root {
    --sand: #08060f;
    --ink: #f0e6ff;
    --muted: #b9acd6;
    --purple: #f0e6ff;
    --aqua: #4dd8e6;
    --aqua-deep: #4dd8e6;
    --coral: #ff8f7a;
    --pink: #f08fbf;
    --gold: #fbbf24;
    --line: rgba(109,40,217,.35);
    --white-glass: rgba(23,18,41,.92);
    --shadow: 0 14px 36px rgba(0,0,0,.5);
}
body {
    color: var(--ink);
    background: #08060f url('/assets/backgrounds/secciones.webp') center top / cover fixed;
}
h1, h2, h3, h4 { color: #f0e6ff; }
h2, h3 { color: #fbbf24; }
.brand { color: #fbbf24; }
.nav-shell { background: rgba(8,6,15,.88) !important; border-color: rgba(109,40,217,.35) !important; box-shadow: 0 10px 30px rgba(0,0,0,.4) !important; }
.nav-links a { color: #b9acd6; }
.nav-links a:hover, .nav-links a:focus { color: #fff; background: rgba(124,58,237,.25); }
.menu-toggle { background: rgba(255,255,255,.08); border-color: rgba(109,40,217,.4); color: #f0e6ff; }
.breadcrumb:hover { color: #fbbf24; }

.class-hero {
    border-color: rgba(251,191,36,.35);
    background: radial-gradient(ellipse at 15% 20%, rgba(109,40,217,.4), transparent 60%), linear-gradient(160deg, #171236, #0d0a16);
}
.class-symbol { border-color: rgba(251,191,36,.3); background: radial-gradient(circle, rgba(124,58,237,.35), rgba(15,11,28,.9)); }

.element-card, .tier-box, .eidolon-group, .utility-box, .changelog-entry, .quick-tag, .changelog-chevron {
    background: rgba(255,255,255,.05); border-color: var(--line); color: #f0e6ff;
}
.element-card.primary { border-color: rgba(251,191,36,.6); background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(124,58,237,.14)); }
.recommendation, .element-icon { background: rgba(124,58,237,.28); color: #f0e6ff; }
.placeholder-note { background: rgba(251,191,36,.08); }
.eidolon-group-head { background: rgba(124,58,237,.22) !important; color: #f0e6ff; }
.eidolon-group-icon { background: rgba(255,255,255,.1); }
.eidolon-card { background: rgba(255,255,255,.05); border-color: var(--line); color: #f0e6ff; }
.eidolon-card.featured { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.6); box-shadow: 0 5px 18px rgba(251,191,36,.12); }
.eidolon-icon { background: rgba(124,58,237,.25); color: #f0e6ff; }
.eidolon-name { color: #f0e6ff; }
.envoy-image-wrap, .envoy-image-wrap img { background: #181818; border-color: rgba(251,191,36,.3); }
.envoy-placeholder { border-color: rgba(251,191,36,.3); }
.not-found { background: rgba(23,18,41,.92); border-color: rgba(251,191,36,.35); }
.site-footer { border-top-color: rgba(109,40,217,.3); color: #9a8dbb; }
.button { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a1000; }

.accent-pink { --class-light: rgba(240,143,191,.22); }
.accent-coral { --class-light: rgba(255,143,122,.22); }
.accent-gold { --class-light: rgba(251,191,36,.2); }
.accent-blue { --class-light: rgba(111,168,255,.22); }
.accent-aqua { --class-light: rgba(77,216,230,.2); }
.accent-violet { --class-light: rgba(155,123,255,.25); }
.accent-green { --class-light: rgba(120,210,140,.2); }

.recommended-eidolon-card { background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(124,58,237,.18)) !important; border-color: rgba(251,191,36,.55) !important; color: #f0e6ff; }
.recommended-eidolon-icon { background: rgba(124,58,237,.3) !important; }

/* Portada de la guia: filtros de tier, tarjetas de clase y directorio */
.guide-card-icon { background: rgba(124,58,237,.25) !important; }
.classes-section, .notice { background: rgba(23,18,41,.9) !important; border-color: var(--line) !important; color: #cdbfe8; }
.tier-filters { background: rgba(255,255,255,.05) !important; border-color: var(--line) !important; }
.tier-filter { color: #b9acd6; }
.tier-filter.active { background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; color: #fff !important; }
.class-card, .directory-class { background: rgba(255,255,255,.05) !important; border-color: var(--line) !important; color: #f0e6ff; }
.class-card:hover, .directory-class:hover { border-color: #fbbf24 !important; }
.class-card strong, .directory-class strong { color: #f0e6ff; }