/* Tema oscuro/claro/automático — ver accounts.models.PanelUser.theme_preference.
   s4.css ya define sus colores como variables en :root; acá solo se
   redefinen para el modo oscuro. "Automático" = sin atributo data-theme,
   sigue prefers-color-scheme del sistema. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:       #0B3861;
    --primary-light: #1565a0;
    --primary-dark:  #051b2e;
    --accent:        #4a9eff;
    --bg:            #121820;
    --card:          #1b2430;
    --border:        #2b3645;
    --text:          #e6edf3;
    --muted:         #93a1b1;
    --row-alt:       #202b38;
    --row-hover:     #26344a;
    --shadow:        0 2px 8px rgba(0,0,0,0.5);
    /* --primary (azul oscuro) casi no se distingue sobre --card oscuro;
       los títulos usan --accent en su lugar. */
    --heading:       var(--accent);
  }
}

:root[data-theme="dark"] {
  --primary:       #0B3861;
  --primary-light: #1565a0;
  --primary-dark:  #051b2e;
  --accent:        #4a9eff;
  --bg:            #121820;
  --card:          #1b2430;
  --border:        #2b3645;
  --text:          #e6edf3;
  --muted:         #93a1b1;
  --row-alt:       #202b38;
  --row-hover:     #26344a;
  --shadow:        0 2px 8px rgba(0,0,0,0.5);
  --heading:       var(--accent);
}

body { background: var(--bg); color: var(--text); transition: background .15s, color .15s; }

.theme-lang-switch { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
.theme-lang-switch form { display:flex; gap:10px; flex-wrap: wrap; }

/* ===== SLIDER SEGMENTADO (tema / idioma) =====
   3 radios ocultos + sus labels (visibles, clickeables) + un span que es
   el "slider" que se desliza por detrás hasta la opción marcada. */
.toggle-group {
  position: relative;
  display: inline-flex;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 3px;
}
.toggle-group input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.toggle-group label {
  position: relative;
  z-index: 1;
  width: 38px;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  transition: color .2s;
  user-select: none;
}
.toggle-group input:checked + label { color: var(--primary); }
.toggle-group input:focus-visible + label { outline: 2px solid #fff; outline-offset: 2px; }
.toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 38px;
  height: calc(100% - 6px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.toggle-group input:nth-of-type(1):checked ~ .toggle-slider { transform: translateX(0); }
.toggle-group input:nth-of-type(2):checked ~ .toggle-slider { transform: translateX(38px); }
.toggle-group input:nth-of-type(3):checked ~ .toggle-slider { transform: translateX(76px); }