/* ── Temas de color ─────────────────────────────────────────── */

body.tema-forest {
  --bg:            #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #1e2d1e;
  --border:        #253525;
  --border-subtle: #1c2c1c;
  --accent:        #4caf50;
  --accent-hover:  #388e3c;
  --accent-dim:    #1a2e1a;
}

body.tema-arctic {
  --bg:            #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #1c2a3a;
  --border:        #243444;
  --border-subtle: #1a2a3a;
  --accent:        #64b5f6;
  --accent-hover:  #42a5f5;
  --accent-dim:    #0d2040;
}

body.tema-sakura {
  --bg:            #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #2c1820;
  --border:        #3a1f28;
  --border-subtle: #2a1820;
  --accent:        #f48fb1;
  --accent-hover:  #f06292;
  --accent-dim:    #3a1525;
}

body.tema-ember {
  --bg:            #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #1a1a1a;
  --border:        #2a1500;
  --border-subtle: #1f0f00;
  --accent:        #ff6a00;
  --accent-hover:  #e05e00;
  --accent-dim:    #2a1200;
}

/* badge-green usa rgba hardcodeado — sobreescribir por tema */
body.tema-forest .badge-green { background: rgba(76, 175, 80, 0.15); }
body.tema-arctic .badge-green { background: rgba(100, 181, 246, 0.15); }
body.tema-sakura .badge-green { background: rgba(244, 143, 177, 0.15); }
body.tema-ember  .badge-green { background: rgba(255, 106, 0, 0.15); }

/* ── Selector de tema ───────────────────────────────────────── */

.tema-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.tema-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tema-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.tema-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.tema-btn-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}