/* Paleta compartida de hosting/admin/*.html — sigue el estilo cálido de la app
   (CreamBg, AccentPurple, CoralAccent, GoldChampion; ver CLAUDE.md).
   Ambas páginas usan los MISMOS nombres de variable, así que solo cambiar los
   valores aquí re-tema las dos a la vez sin tocar el CSS de cada componente.
   --orange y --teal se conservan como NOMBRES por compatibilidad con el CSS
   existente, pero sus VALORES ya no son colores fríos/naranja puro: --orange
   pasa a ser el coral de acento y --teal a un terracota cálido. */
:root {
  --bg:           #f5f0e8;
  --surface:      #faf7f2;
  --card:         #ffffff;
  --border:       #e8e3db;
  --purple:       #6b46c1;
  --purple-light: #8f6fe0;
  --orange:       #ff6b6b;  /* Coral — antes #e87f3a */
  --teal:         #d9784f;  /* Terracota cálido — antes #0abfbc (frío) */
  --gold:         #ffb800;
  --red:          #e74c3c;
  --green:        #7ba85a;  /* Verde templado — antes #27ae60 (frío) */
  --text:         #2a2a2a;
  --text-mid:     #767070;
  --text-dim:     #a69c90;
  --shadow:       0 2px 8px rgba(0,0,0,0.08);
  --shadow-out:   5px 5px 12px rgba(0,0,0,0.11), -3px -3px 8px rgba(255,255,255,0.78);
  --shadow-in:    inset 2px 2px 5px rgba(0,0,0,0.10), inset -2px -2px 5px rgba(255,255,255,0.68);
  --shadow-btn:   3px 3px 7px rgba(0,0,0,0.11), -2px -2px 5px rgba(255,255,255,0.62);
}
[data-theme="dark"] {
  --bg:           #181622;
  --surface:      #1e1b2e;
  --card:         #242037;
  --border:       rgba(255,255,255,0.06);
  --purple:       #a78bfa;
  --purple-light: #c4b5fd;
  --orange:       #ff8585;
  --teal:         #e8916d;
  --gold:         #ffc93c;
  --red:          #ef5a4a;
  --green:        #8bc34a;
  --text:         #e0daf0;
  --text-mid:     #a79bc7;
  --text-dim:     #6b5f8a;
  --shadow:       0 2px 10px rgba(0,0,0,0.4);
  --shadow-out:   5px 5px 14px rgba(0,0,0,0.55), -2px -2px 6px rgba(255,255,255,0.025);
  --shadow-in:    inset 2px 2px 6px rgba(0,0,0,0.50), inset -2px -2px 5px rgba(255,255,255,0.02);
  --shadow-btn:   3px 3px 8px rgba(0,0,0,0.50), -1px -1px 4px rgba(255,255,255,0.02);
}

/* Botón de alternar tema — compartido por ambas páginas */
.btn-dark-toggle {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow-btn); font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: box-shadow .15s, transform .1s;
}
.btn-dark-toggle:hover { transform: translateY(-1px); }
.btn-dark-toggle:active { box-shadow: var(--shadow-in); transform: none; }