/* Reskin del admin de Django sobre los mismos tokens del panel. Los bloques de
   admin/base.html (content, breadcrumbs, object-tools, etc.) siguen intactos --
   esto solo repinta los selectores estándar que Django ya genera. */

/* --- Overrides de las variables CSS propias del admin (dark_mode.css usa las mismas
   custom properties; fijamos el tema oscuro siempre, sin alternar con :root claro). --- */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --primary: var(--color-accent-2);
  --secondary: var(--color-paper-2);
  --accent: var(--color-accent);
  --primary-fg: var(--color-ink);
  --body-fg: var(--color-ink);
  --body-bg: var(--color-paper);
  --body-quiet-color: var(--color-ink-2);
  --body-loud-color: var(--color-ink);
  --header-color: var(--color-ink);
  --header-branding-color: var(--color-ink);
  --header-bg: var(--color-paper-2);
  --header-link-color: var(--color-ink);
  --breadcrumbs-fg: var(--color-ink-2);
  --breadcrumbs-link-fg: var(--color-ink-2);
  --breadcrumbs-bg: transparent;
  --link-fg: var(--color-accent);
  --link-hover-color: var(--color-accent);
  --link-selected-fg: var(--color-accent);
  --hairline-color: var(--color-paper-3);
  --border-color: var(--color-paper-3);
  --error-fg: var(--color-danger);
  --message-success-bg: var(--color-positive-a16);
  --message-warning-bg: var(--color-warning-a16);
  --message-error-bg: var(--color-danger-a16);
  --darkened-bg: var(--color-paper);
  --selected-bg: var(--color-paper-3);
  --selected-row: var(--color-accent-a12);
  --button-bg: var(--color-accent-2);
  --button-fg: var(--color-ink);
  --button-hover-bg: var(--color-accent);
  --default-button-bg: var(--color-accent);
  --default-button-hover-bg: var(--color-accent-2);
  --close-button-bg: var(--color-paper-3);
  --close-button-hover-bg: var(--color-paper-2);
  --delete-button-bg: var(--color-danger);
  --delete-button-hover-bg: var(--color-danger);
  --object-tools-bg: var(--color-accent-2);
  --object-tools-hover-bg: var(--color-accent);
  color-scheme: dark;
}

body {
  background: var(--color-paper);
  background-image: radial-gradient(600px circle at 100% 0%, var(--color-accent-2-a04), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
}

/* --- Layout: header como topbar, nav-sidebar como sidebar fija --- */
#container { display: block; }

#header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-paper-3);
  margin-left: var(--sidebar-w);
  color: var(--color-ink);
}
body.login #header { margin-left: 0; }

#branding h1, #site-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin: 0; }
#branding h1 a, #site-name a { color: var(--color-ink); text-decoration: none; }

#user-tools { margin-left: auto; font-size: var(--text-sm); color: var(--color-ink-2); }
#user-tools a { color: var(--color-ink-2); text-decoration: none; padding: 0 var(--space-2); }
#user-tools a:hover { color: var(--color-accent); }
#user-tools form#logout-form button {
  background: transparent;
  border: 1px solid var(--color-paper-3);
  color: var(--color-ink-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
}
#user-tools form#logout-form button:hover { border-color: var(--color-accent); color: var(--color-ink); }

nav[aria-label="Breadcrumbs"] { margin-left: var(--sidebar-w); }
.breadcrumbs {
  background: transparent;
  color: var(--color-ink-2);
  padding: var(--space-3) var(--space-6) 0;
  font-size: var(--text-xs);
}
.breadcrumbs a { color: var(--color-ink-2); }
.breadcrumbs a:hover { color: var(--color-accent); }

.main { margin-left: 0; }
#content-start.content { margin-left: var(--sidebar-w); padding: var(--space-6); min-height: 0; }
body.login #content-start.content { margin-left: 0; }

/* --- Nuestra sidebar reutiliza includes/_sidebar.html; se posiciona igual que en
   el dashboard (ver panel.css .sidebar). Acá solo se asegura que quede por encima
   del header/content del admin. --- */
#nav-sidebar-panel { z-index: 40; }

#content { background: transparent; padding: 0; }
#content-main { min-width: 0; }

/* --- Módulos / cards --- */
.module {
  background: var(--color-paper-2);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  margin-bottom: var(--space-6);
  overflow: hidden;
}
.module h2, .module caption {
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
}
.module h3 { padding: 0 var(--space-5); color: var(--color-ink-2); font-size: var(--text-sm); }
.module ul.actionlist { padding: 0 var(--space-5) var(--space-4); }
.module ul.actionlist li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-paper-3); }
.module ul.actionlist li:last-child { border-bottom: none; }

/* app_list del index */
.app-list, #content-main .module table { border-collapse: collapse; }
.app-list th, .app-list td, #content-main .module table th, #content-main .module table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-paper-3);
}
.model-list td a { color: var(--color-ink); text-decoration: none; }
.model-list td a:hover { color: var(--color-accent); }
.addlink, .changelink, .viewlink, .deletelink { color: var(--color-accent) !important; }

/* --- Tablas de changelist: zebra, sticky header, hover glow --- */
#changelist { background: transparent; }
#changelist .results {
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--color-paper-2);
}
#result_list, table.results {
  width: 100%;
  border-collapse: collapse;
  color: var(--color-ink);
}
#result_list thead th, table.results thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-paper-3);
}
#result_list thead th a { color: var(--color-ink); }
#result_list thead th.sorted { color: var(--color-accent); }
#result_list tbody td, #result_list tbody th, table.results tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-paper-3);
  font-size: var(--text-sm);
}
#result_list tbody tr, table.results tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
#result_list tbody tr.row1, table.results tbody tr.row1 { background: var(--color-paper-2); }
#result_list tbody tr.row2, table.results tbody tr.row2 { background: color-mix(in oklch, var(--color-paper-2) 92%, var(--color-paper-3)); }
#result_list tbody tr:hover, table.results tbody tr:hover {
  background: var(--color-accent-a12);
  box-shadow: inset 0 0 0 1px var(--color-accent-a24);
}
#result_list a, table.results a { color: var(--color-ink); text-decoration: none; }
#result_list a:hover, table.results a:hover { color: var(--color-accent); }
#result_list tbody tr.selected, table.results tbody tr.selected { background: var(--selected-row); }

/* Toolbar / búsqueda */
#toolbar { background: transparent; padding: 0 0 var(--space-4); }
#toolbar form#changelist-search { display: flex; gap: var(--space-2); }
#toolbar input#searchbar, #toolbar input[type="text"] {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-paper-3);
  background: var(--color-paper-2);
  color: var(--color-ink);
  min-width: 260px;
}

/* Filtros laterales */
#changelist-filter {
  background: var(--color-paper-2);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
#changelist-filter h2, #changelist-filter h3 { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-sm); }
#changelist-filter li { list-style: none; }
#changelist-filter a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
#changelist-filter a:hover { color: var(--color-accent); }
#changelist-filter li.selected a { color: var(--color-accent); font-weight: 600; }

/* Paginación */
.paginator { color: var(--color-ink-2); padding: var(--space-4) 0; font-size: var(--text-sm); }
.paginator a { color: var(--color-accent); padding: var(--space-1) var(--space-2); text-decoration: none; }
.paginator a:hover { text-decoration: underline; }
.paginator .this-page { font-weight: 700; color: var(--color-ink); padding: var(--space-1) var(--space-2); }

/* Bulk actions */
.actions { background: var(--color-paper-3); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.actions select { margin: 0 var(--space-2); }
.object-tools a {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  text-decoration: none;
}
.object-tools a:hover { filter: brightness(1.08); }

/* --- Formularios --- */
.form-row { border-bottom: 1px solid var(--color-paper-3); padding: var(--space-4) 0; }
.form-row label { color: var(--color-ink-2); font-size: var(--text-sm); }
fieldset.module { border: none; }
input, select, textarea {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-a12);
  outline: none;
}
input[type="submit"], .button, button:not(#logout-form button) {
  background: var(--color-paper-3);
  color: var(--color-ink);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
input[type="submit"]:hover, .button:hover { border-color: var(--color-accent-a24); }
input[type="submit"].default, .default {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-paper);
  border-color: transparent;
  font-weight: 600;
}
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
.submit-row { background: transparent; border: none; padding: var(--space-4) 0; }
.deletelink-box .deletelink, a.deletelink {
  background: var(--color-danger);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
}

/* Mensajes / errores */
ul.messagelist li {
  background: var(--color-paper-2);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-2);
}
ul.messagelist li.success { border-color: var(--color-positive); }
ul.messagelist li.warning { border-color: var(--color-warning); }
ul.messagelist li.error { border-color: var(--color-danger); }
.errorlist { color: var(--color-danger); }
.errornote {
  background: var(--color-danger-a16);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: var(--color-ink);
}
.help, p.help, div.help { color: var(--color-ink-2); font-size: var(--text-xs); }

/* --- Dashboard index (app_list) --- */
.dashboard #content { width: 100%; }

/* --- Login --- */
body.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-paper);
  background-image: radial-gradient(720px circle at 50% 30%, var(--color-accent-2-a04), transparent 65%);
}
body.login #container { width: 100%; max-width: 380px; padding: var(--space-4); }
body.login #header { display: none; }
body.login #content-start.content { margin-left: 0; padding: 0; }
body.login #content { padding: 0; }
body.login #content-main {
  background: var(--color-paper-2);
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), var(--glow-accent);
  padding: var(--space-8) var(--space-6);
}
body.login .form-row { border-bottom: none; padding: var(--space-3) 0; }
body.login .form-row input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
body.login .form-row input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-a12);
}
body.login .submit-row { text-align: center; }
body.login .submit-row input {
  width: 100%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-paper);
  font-weight: 700;
  border: none;
  padding: var(--space-3);
}

@media (max-width: 768px) {
  #header, nav[aria-label="Breadcrumbs"], #content-start.content { margin-left: 0; }
  #header { padding: 0 var(--space-4); }
}