/* themes7.css — selector de 7 temas sin romper estilos existentes
   No pisa reglas globales: solo define variables y estilos del botón/panel. */

/* -------- Variables por tema (aplican a quien las use) -------- */
:root {
  --t-bg: #0b0f14;
  --t-panel: #121820;
  --t-text: #e8eef6;
  --t-muted: #9cb0c7;
  --t-accent: #ffd166;   /* por defecto (Imperial) */
  --t-accent-2: #4ea8de;
}

/* Imperial (dorado + lapislázuli) */
html[data-theme="imperial"] {
  --t-bg:#0b0f14; --t-panel:#111827; --t-text:#f5f7fb; --t-muted:#a7b4c6;
  --t-accent:#ffd166; --t-accent-2:#1f6feb;
}
/* Neon Grid (cyberpunk) */
html[data-theme="neon"] {
  --t-bg:#090a0f; --t-panel:#0e0f16; --t-text:#e7e7ff; --t-muted:#a39bd1;
  --t-accent:#39ff14; --t-accent-2:#ff2ea6;
}
/* Black Ops (gris carbón + acentos verdes/amarillos) */
html[data-theme="blackops"] {
  --t-bg:#101316; --t-panel:#13181d; --t-text:#e6f0e9; --t-muted:#9eb4a9;
  --t-accent:#9ef01a; --t-accent-2:#ffd100;
}
/* Skyline (azules suaves, panel translúcido) */
html[data-theme="skyline"] {
  --t-bg:#0a1224; --t-panel:#0f1c33cc; --t-text:#eaf3ff; --t-muted:#a9c3e5;
  --t-accent:#56c2ff; --t-accent-2:#7aa4ff;
}
/* Terracota (tierra/campo) */
html[data-theme="terracota"] {
  --t-bg:#17120e; --t-panel:#1e1712; --t-text:#f1e7dc; --t-muted:#c9b3a1;
  --t-accent:#e07a5f; --t-accent-2:#f2cc8f;
}
/* White Pro (claro profesional) */
html[data-theme="whitepro"] {
  --t-bg:#f5f7fb; --t-panel:#ffffff; --t-text:#0b1220; --t-muted:#6b7280;
  --t-accent:#2563eb; --t-accent-2:#06b6d4;
}
/* Dynamic (auto día/noche) — se decide por JS pero ponemos fallback */
html[data-theme="dynamic"] {
  /* Fallback = similar a Imperial */
  --t-bg:#0b0f14; --t-panel:#111827; --t-text:#f5f7fb; --t-muted:#a7b4c6;
  --t-accent:#ffd166; --t-accent-2:#1f6feb;
}

/* -------- Estilos del UI del selector (aislados) -------- */
.theme-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
  width: 46px; height: 46px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--t-accent); color: #111; font-weight: 700;
  box-shadow: 0 6px 20px #0008; transition: transform .12s ease;
}
.theme-fab:hover { transform: translateY(-1px); }

.theme-panel {
  position: fixed; right: 1rem; bottom: 4.25rem; z-index: 9999;
  width: min(92vw, 360px);
  background: var(--t-panel); color: var(--t-text);
  border-radius: 12px; box-shadow: 0 10px 30px #000a; display: none;
  border: 1px solid #ffffff12; overflow: hidden;
}
.theme-panel.open { display: block; }
.theme-hd {
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; border-bottom:1px solid #ffffff14;
  background: linear-gradient(180deg, #ffffff09, transparent);
}
.theme-hd h4{margin:0;font-size:15px}
.theme-list{padding:.25rem .5rem .75rem .5rem; max-height:50vh; overflow:auto}
.theme-item{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem;
  border-radius:10px; cursor:pointer;
}
.theme-item:hover{ background:#ffffff0e; }
.theme-dot{ width:14px; height:14px; border-radius:50%; border:2px solid #0005; box-shadow: inset 0 0 0 2px #0006;}
.theme-name{ flex:1; font-size:14px; }
.theme-active{ outline:2px solid var(--t-accent); outline-offset:2px; }
.theme-foot{ padding:.6rem 1rem; border-top:1px solid #ffffff14; font-size:12px; color:var(--t-muted);}
.theme-link{ color:var(--t-accent-2); text-decoration:none; }
.theme-link:hover{ text-decoration:underline; }

/* Dot colors */
[data-theme-dot="imperial"]  { background:#ffd166; }
[data-theme-dot="neon"]      { background:#39ff14; }
[data-theme-dot="blackops"]  { background:#9ef01a; }
[data-theme-dot="skyline"]   { background:#56c2ff; }
[data-theme-dot="terracota"] { background:#e07a5f; }
[data-theme-dot="whitepro"]  { background:#ffffff; box-shadow: inset 0 0 0 2px #0002; }
[data-theme-dot="dynamic"]   { background:linear-gradient(135deg,#222 0 45%,#fff 55% 100%); }