/* ===========================================================================
   MAGUS — piel del admin de Django
   ---------------------------------------------------------------------------
   El admin de Django (django.contrib.admin) es una interfaz aparte de las
   pantallas propias del proyecto: usa sus propios templates y su propio CSS
   (admin/css/base.css), con un sistema de variables CSS ya integrado.

   En vez de reescribir el HTML del admin con las clases de magus-app.css
   (que no existen ahí), este archivo redefine las variables que el propio
   admin de Django ya usa en todos sus templates, apuntándolas a los tokens
   de Nocturne/Magus. Así, todo el admin toma automáticamente los mismos
   colores y tipografías que el resto del proyecto — y si se retocan los
   tokens en magus-theme.css, el admin cambia con ellos sin tocar este
   archivo.

   Cargar DESPUÉS de nocturne.css y magus-theme.css (los tokens tienen que
   existir antes de poder referenciarlos con var()), y también después del
   propio admin/css/base.css y admin/css/dark_mode.css de Django (ver
   templates/admin/base_site.html), para ganar la cascada.

   Se pisan los tres contextos que usa Django (root, claro y oscuro) con el
   mismo valor: Nocturne/Magus es un único tema oscuro, no tiene variante
   clara, así que no tiene sentido dejar que el selector de tema de Django
   cambie nada acá.
   =========================================================================== */

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --primary: var(--color-surface);
  --secondary: var(--color-neutral-900);
  --accent: var(--color-accent);
  --primary-fg: var(--color-text);

  --body-fg: var(--color-text);
  --body-bg: var(--color-bg);
  --body-quiet-color: var(--color-neutral-500);
  --body-medium-color: var(--color-neutral-400);
  --body-loud-color: var(--color-text);

  --header-color: var(--color-text);
  --header-branding-color: var(--color-accent);
  --header-bg: var(--color-neutral-900);
  --header-link-color: var(--color-text);

  --breadcrumbs-fg: var(--color-neutral-400);
  --breadcrumbs-link-fg: var(--color-text);
  --breadcrumbs-bg: var(--color-neutral-900);

  --link-fg: var(--color-accent-300);
  --link-hover-color: var(--color-accent);
  --link-selected-fg: var(--color-accent);

  --hairline-color: var(--color-neutral-800);
  --border-color: var(--color-neutral-800);

  --error-fg: var(--color-accent-400);

  --message-success-bg: #163a24;
  --message-warning-bg: #4a3510;
  --message-error-bg: var(--color-accent-900);

  --darkened-bg: var(--color-neutral-900);
  --selected-bg: var(--color-neutral-800);
  --selected-row: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));

  --button-fg: var(--color-text);
  --button-bg: var(--color-accent-700);
  --button-hover-bg: var(--color-accent-600);
  --default-button-bg: var(--color-accent);
  --default-button-hover-bg: var(--color-accent-600);
  --close-button-bg: var(--color-neutral-700);
  --close-button-hover-bg: var(--color-neutral-600);
  --delete-button-bg: var(--color-accent-800);
  --delete-button-hover-bg: var(--color-accent-900);

  --object-tools-fg: var(--color-text);
  --object-tools-bg: var(--color-neutral-700);
  --object-tools-hover-bg: var(--color-neutral-600);

  --font-family-primary: var(--font-body), system-ui, sans-serif;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Retoques puntuales sobre HTML que Django genera desde Python (paginador,
   filtros, acciones en lote) y que por eso no se puede reescribir como
   template — se pisa con clases propias de Django, reusando los tokens.
   --------------------------------------------------------------------------- */

/*
  changelists.css define estas mismas reglas con selectores #changelist ...
  (especificidad por id). Para ganarles hace falta iguales selectores, no
  alcanza con una clase suelta ni con cargar después — un id le gana a una
  clase sin importar el orden.
*/
#changelist .paginator {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) 0 0;
  font-size: 12.5px; color: var(--color-neutral-500);
  border-top: 1px solid var(--color-neutral-800);
  border-bottom: 0;
  background: transparent;
  margin-top: var(--space-4);
}
#changelist .paginator a {
  padding: 4px 9px; border-radius: var(--radius-sm); color: var(--color-neutral-400);
}
#changelist .paginator a:hover { background: var(--color-neutral-800); color: var(--color-text); }
#changelist .paginator .this-page {
  padding: 4px 9px; border-radius: var(--radius-sm);
  background: var(--color-accent-800); color: var(--color-accent-100); font-weight: 500;
}

#changelist .actions {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  font-size: 12.5px; color: var(--color-neutral-400);
}
#changelist .actions select {
  padding: 6px 10px; height: auto; background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-sm);
  color: var(--color-text); font: inherit; margin-left: 0;
}
#changelist .actions .button {
  padding: 6px 14px; height: auto; box-shadow: none;
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-sm);
  background: var(--color-neutral-800); color: var(--color-text); cursor: pointer; font: inherit;
}
#changelist .actions .button:hover { border-color: var(--color-neutral-600); }

/* buscador (#toolbar viene de changelists.css con id, hay que igualarlo) */
#toolbar {
  background: transparent; border: 0; padding: 0; margin-bottom: var(--space-4);
}
#toolbar #searchbar {
  height: auto; border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  padding: 10px 44px 10px 34px; font-size: 13.5px; max-width: 480px;
}
#toolbar #searchbar:focus { border-color: var(--color-accent); outline: none; }
#toolbar form input[type="submit"] {
  border-radius: var(--radius-sm); box-shadow: none;
  background: var(--color-neutral-800); border-color: var(--color-neutral-700);
}

/* tabla de resultados (#changelist table le gana a .table por especificidad) */
#changelist table thead th {
  padding: var(--space-3); white-space: nowrap;
}
.breadcrumbs { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }

.changelist-results { overflow-x: auto; width: 100%; margin-bottom: var(--space-4); }

/*
  Varias páginas propias de Django (cambio de contraseña, login...) redefinen
  su propio {% block userlinks %} sin llamar a block.super, así que agregan
  contenido distinto al que puso base.html (incluye <form>, <button> y hasta
  el botón de tema día/noche). En vez de perseguir cada template, se estiliza
  de forma genérica lo que sea que termine ahí adentro.
*/
.sidebar-foot { font-size: 11px; }
.sidebar-foot a { color: var(--color-neutral-400); }
.sidebar-foot a:hover { color: var(--color-text); }
.sidebar-foot form { display: inline; }
.sidebar-foot button[type="submit"] {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: inherit; color: var(--color-neutral-400); cursor: pointer;
}
.sidebar-foot button[type="submit"]:hover { color: var(--color-text); }
/* Nocturne/Magus es un único tema fijo: el selector día/noche de Django no aplica. */
.theme-toggle { display: none; }

#changelist-filter {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  min-width: 200px;
}
#changelist-filter h2 {
  font-family: var(--font-heading); font-weight: 500; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-500);
  margin: 0 0 var(--space-3);
}
#changelist-filter h3 {
  font-size: 11.5px; color: var(--color-neutral-500); margin: var(--space-3) 0 6px;
  display: flex; align-items: center; gap: 6px;
}
#changelist-filter ul { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
#changelist-filter li { padding: 3px 0 3px var(--space-3); border-left: 2px solid transparent; }
#changelist-filter li a { color: var(--color-neutral-400); font-size: 12.5px; }
#changelist-filter li a:hover { color: var(--color-text); }
#changelist-filter li.selected { border-left-color: var(--color-accent); }
#changelist-filter li.selected a { color: var(--color-accent-300); }

.object-tools a.addlink, .object-tools a.viewlink, .object-tools a.changelink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 99px;
  background: var(--color-neutral-800); color: var(--color-text);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
}
.object-tools a.addlink:hover { background: var(--color-accent-700); }

.errornote {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-accent-900); border: 1px solid var(--color-accent-700);
  color: var(--color-accent-200); font-size: 13px;
}

.help, .fineprint { color: var(--color-neutral-500); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/*
 * Login del admin — Django espera envolver el form en un #container de
 * ancho fijo (28em, centrado); admin/base.html lo reemplaza por el layout
 * de Magus y ese #container no existe acá. Sin él, los campos (que
 * login.css ya pone en width:100%) se estiran al ancho completo del área
 * de contenido. Se acota el contenedor real de la pantalla de login
 * (#content-main, el que sí pone admin/login.html) en vez de tocar los
 * inputs directo.
 *
 * float:none es necesario: admin/css/base.css pone #content-main en
 * float:left, y un elemento flotado ignora margin:auto — por eso el
 * primer intento quedaba angosto pero pegado a la izquierda en vez de
 * centrado.
 */
body.login #content-main {
  float: none;
  max-width: 360px;
  margin: 90px auto 0;
}