/* ============================================================================
   Grupo Mayer OS — la piel del admin de Django

   POR QUÉ ASÍ Y NO REESCRIBIENDO EL ADMIN. El admin trae su propio sistema de
   variables CSS (`--primary`, `--body-bg`, `--link-fg`, …) y toda su hoja las
   consume. Darles los valores de nuestros tokens cambia el 80 % del aspecto
   sin tocar una sola plantilla de Django: los listados, los formularios, los
   filtros y las acciones siguen siendo los suyos —con su JavaScript y sus
   pruebas— y pasan a verse como el resto del sistema.

   Lo que no se puede resolver por variable (la cabecera, el login, la fuente,
   los radios) va abajo, como reglas puntuales. Se carga DESPUÉS de las hojas
   del admin desde `templates/admin/base_site.html`.

   El modo oscuro del admin se gobierna con `html[data-theme]` y con
   `prefers-color-scheme`, igual que el nuestro; se cubren los dos.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- Tokens de marca, los mismos de sistema.css ------------------------ */
  --gm-azul: #0048AC;
  --gm-azul-oscuro: #032752;
  --gm-navy: #021B3A;
  --gm-canvas: #F4F7FB;
  --gm-surface: #FFFFFF;
  --gm-surface-subtle: #F7F9FC;
  --gm-text: #15243A;
  --gm-text-secondary: #526176;
  --gm-text-muted: #718096;
  --gm-border: #E2E8F0;
  --gm-border-strong: #CAD4E0;
  --gm-blue-soft: #E9F1FF;
  --gm-success: #1A7A4C;  --gm-success-bg: #E8F5EE;
  --gm-warning: #8A5000;  --gm-warning-bg: #FFF3D8;
  --gm-danger: #A32C26;   --gm-danger-bg: #FCEBE9;

  /* --- Las variables que el admin consume ---------------------------------- */
  --primary: var(--gm-azul);
  --secondary: var(--gm-azul-oscuro);
  --accent: #6FA8FF;
  --primary-fg: #fff;
  --body-fg: var(--gm-text);
  --body-bg: var(--gm-canvas);
  --body-quiet-color: var(--gm-text-secondary);
  --body-loud-color: var(--gm-text);
  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: var(--gm-navy);
  --header-link-color: #fff;
  --breadcrumbs-fg: var(--gm-text-secondary);
  --breadcrumbs-link-fg: var(--gm-azul);
  --breadcrumbs-bg: var(--gm-surface);
  --link-fg: var(--gm-azul);
  --link-hover-color: #003B91;
  --link-selected-fg: var(--gm-azul);
  --hairline-color: var(--gm-border);
  --border-color: var(--gm-border-strong);
  --error-fg: var(--gm-danger);
  --message-success-bg: var(--gm-success-bg);
  --message-warning-bg: var(--gm-warning-bg);
  --message-error-bg: var(--gm-danger-bg);
  --darkened-bg: var(--gm-surface-subtle);
  --selected-bg: var(--gm-blue-soft);
  --selected-row: var(--gm-blue-soft);
  --button-fg: #fff;
  --button-bg: var(--gm-azul);
  --button-hover-bg: #003B91;
  --default-button-bg: var(--gm-azul-oscuro);
  --default-button-hover-bg: var(--gm-navy);
  --close-button-bg: var(--gm-text-muted);
  --close-button-hover-bg: var(--gm-text-secondary);
  --delete-button-bg: var(--gm-danger);
  --delete-button-hover-bg: #8a221d;
  --object-tools-fg: var(--gm-text);
  --object-tools-bg: var(--gm-surface);
  --object-tools-hover-bg: var(--gm-blue-soft);
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Oscuro: por preferencia del sistema cuando el admin está en «auto», y por
   elección explícita. Mismos valores que el bloque oscuro de sistema.css. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --gm-oscuro: 1; }
}
html[data-theme="dark"] { --gm-oscuro: 1; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --gm-azul: #74AAFF; --gm-canvas: #0A1220; --gm-surface: #101B2B; --gm-surface-subtle: #0E1929;
    --gm-text: #ECF2FA; --gm-text-secondary: #BDCADB; --gm-text-muted: #91A2B8;
    --gm-border: #263750; --gm-border-strong: #3A4E6B; --gm-blue-soft: #172D4B;
    --gm-success: #80D4A5; --gm-success-bg: #153629; --gm-warning: #F3C46F; --gm-warning-bg: #382B18;
    --gm-danger: #F3A29B; --gm-danger-bg: #3B2225;
    --primary-fg: #07182E; --button-fg: #07182E; --link-hover-color: #9AC0FF; --button-hover-bg: #9AC0FF;
    --default-button-bg: #74AAFF; --default-button-hover-bg: #9AC0FF; --header-bg: #06101F;
  }
}
html[data-theme="dark"] {
  --gm-azul: #74AAFF; --gm-canvas: #0A1220; --gm-surface: #101B2B; --gm-surface-subtle: #0E1929;
  --gm-text: #ECF2FA; --gm-text-secondary: #BDCADB; --gm-text-muted: #91A2B8;
  --gm-border: #263750; --gm-border-strong: #3A4E6B; --gm-blue-soft: #172D4B;
  --gm-success: #80D4A5; --gm-success-bg: #153629; --gm-warning: #F3C46F; --gm-warning-bg: #382B18;
  --gm-danger: #F3A29B; --gm-danger-bg: #3B2225;
  --primary-fg: #07182E; --button-fg: #07182E; --link-hover-color: #9AC0FF; --button-hover-bg: #9AC0FF;
  --default-button-bg: #74AAFF; --default-button-hover-bg: #9AC0FF; --header-bg: #06101F;
}

/* --- Tipografía y superficie ------------------------------------------------ */
body { font-family: var(--font-family-primary); font-size: 14px; -webkit-font-smoothing: antialiased; }
#container { background: var(--body-bg); }
#content { padding: 22px 32px 40px; }
#content h1 { font-size: 22px; font-weight: 750; letter-spacing: -.01em; color: var(--gm-text); margin: 0 0 14px; }
h2, h3 { font-weight: 700; color: var(--gm-text); }

/* --- Cabecera: la marca, no el texto azul del admin ------------------------- */
#header { height: auto; padding: 10px 32px; align-items: center; box-shadow: 0 1px 0 rgb(255 255 255 / 6%); }
#branding h1 { margin: 0; display: flex; align-items: center; }
#branding h1 a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: .01em; }
#branding .gm-admin-logo { height: 30px; width: auto; display: block; }
#branding .gm-admin-marca { opacity: .85; font-weight: 500; }
#user-tools { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
#user-tools a { border-bottom: 0; padding: 4px 8px; border-radius: 6px; }
#user-tools a:hover, #user-tools a:focus { background: rgb(255 255 255 / 10%); color: #fff; }
#user-tools .theme-toggle { border-radius: 6px; }

/* --- Migas: sobre blanco, como en las pantallas propias ---------------------- */
div.breadcrumbs { padding: 10px 32px; border-bottom: 1px solid var(--gm-border); font-size: 12px; color: var(--gm-text-secondary); }
div.breadcrumbs a { color: var(--gm-azul); font-weight: 500; }

/* --- Barra lateral del admin (nav-sidebar) ------------------------------------ */
#nav-sidebar { background: var(--gm-surface); border-right: 1px solid var(--gm-border); }
#nav-sidebar .module th, #nav-sidebar .module caption { background: transparent; color: var(--gm-text-muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
#nav-sidebar .module caption { padding: 14px 16px 6px; }
#nav-sidebar .current-model { background: var(--gm-blue-soft); border-radius: 6px; }
#nav-sidebar a { color: var(--gm-text); font-weight: 500; }
#nav-sidebar .current-app .section:link, #nav-sidebar .current-app .section:visited { color: var(--gm-azul); }
.toggle-nav-sidebar { background: var(--gm-surface); border-right: 1px solid var(--gm-border); color: var(--gm-text-muted); }
#nav-filter { border: 1px solid var(--gm-border-strong); border-radius: 6px; background: var(--gm-surface); color: var(--gm-text); font-family: inherit; }

/* --- Módulos, listados, formularios ------------------------------------------- */
.module { border: 1px solid var(--gm-border); border-radius: 10px; background: var(--gm-surface); box-shadow: 0 1px 2px rgb(16 35 64 / 6%); overflow: hidden; }
.module h2, .module caption, .inline-group h2 { background: var(--gm-surface-subtle); color: var(--gm-text); border-bottom: 1px solid var(--gm-border); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; padding: 10px 14px; }
#changelist { border: 0; background: transparent; }
#changelist .results { border: 1px solid var(--gm-border); border-radius: 10px; background: var(--gm-surface); overflow: auto; }
#changelist table thead th { background: var(--gm-surface-subtle); color: var(--gm-text-muted); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--gm-border); padding: 10px 12px; }
#changelist table tbody td, #changelist table tbody th { border-bottom: 1px solid var(--gm-border); padding: 11px 12px; font-size: 13px; }
#changelist table tbody tr:last-child td, #changelist table tbody tr:last-child th { border-bottom: 0; }
.row1 { background: var(--gm-surface); }
.row2 { background: var(--gm-surface-subtle); }
#changelist-filter { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 10px; }
#changelist-filter h2 { background: var(--gm-surface-subtle); color: var(--gm-text); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: .03em; border-bottom: 1px solid var(--gm-border); }
#changelist-filter h3 { color: var(--gm-text-muted); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
#changelist-filter li.selected { border-left: 3px solid var(--gm-azul); }
#changelist-filter li.selected a { color: var(--gm-azul); font-weight: 600; }
#changelist-search, .actions { background: transparent; border: 0; }
#changelist .actions { padding: 8px 0 10px; }
#searchbar { border: 1px solid var(--gm-border-strong); border-radius: 6px; padding: 7px 10px; font-family: inherit; background: var(--gm-surface); color: var(--gm-text); }
.paginator { background: transparent; border: 0; font-size: 13px; color: var(--gm-text-secondary); }
.paginator a, .paginator .this-page { border-radius: 6px; padding: 4px 9px; }
.paginator .this-page { background: var(--gm-azul); color: #fff; }

.form-row { border-bottom: 1px solid var(--gm-border); padding: 10px 14px; }
.form-row label, label { color: var(--gm-text-secondary); font-size: 12px; font-weight: 600; }
.aligned label { width: 180px; }
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], textarea, select, .vTextField {
  border: 1px solid var(--gm-border-strong); border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 13px;
  background: var(--gm-surface); color: var(--gm-text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .vTextField:focus { border-color: var(--gm-azul); outline: 2px solid #4C91FF; outline-offset: 1px; }
.help, div.help, p.help { color: var(--gm-text-muted); font-size: 11px; }
.submit-row { background: var(--gm-surface); border: 1px solid var(--gm-border); border-radius: 10px; box-shadow: 0 1px 2px rgb(16 35 64 / 6%); }
.button, input[type="submit"], input[type="button"], .submit-row input, a.button { border-radius: 6px; padding: 9px 14px; font-family: inherit; font-weight: 600; font-size: 13px; min-height: 36px; }
.button.default, input[type="submit"].default, .submit-row input.default { background: var(--gm-azul); }
.object-tools a { border: 1px solid var(--gm-border); border-radius: 6px; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; padding: 7px 12px; }
.object-tools a.addlink { background-color: var(--gm-azul); color: #fff; border-color: var(--gm-azul); }
ul.messagelist li { border-radius: 8px; border: 1px solid var(--gm-border); font-size: 13px; color: var(--gm-text); background-color: var(--gm-surface); }
ul.messagelist li.success { border-color: var(--gm-success); background-color: var(--gm-success-bg); }
ul.messagelist li.warning { border-color: var(--gm-warning); background-color: var(--gm-warning-bg); }
ul.messagelist li.error { border-color: var(--gm-danger); background-color: var(--gm-danger-bg); }
.errornote { border-radius: 8px; border: 1px solid var(--gm-danger); background: var(--gm-danger-bg); color: var(--gm-text); }
.errorlist li { background: var(--gm-danger-bg); color: var(--gm-danger); border-radius: 6px; }
fieldset.collapsed h2 { background: var(--gm-surface-subtle); }
.inline-related h3 { background: var(--gm-surface-subtle); color: var(--gm-text); border-bottom: 1px solid var(--gm-border); }
.inline-group .tabular td { border-bottom: 1px solid var(--gm-border); }

/* --- Login: la tarjeta centrada de las pantallas de contraseña --------------- */
.login { background: var(--gm-canvas); }
.login #header { display: none; }
.login #container { width: 100%; max-width: 420px; margin: 7vh auto 0; padding: 0 16px; background: transparent; border: 0; }
/* La tarjeta es #content (lo que envuelve logo, formulario y enlace), no
   #content-main: ese es solo el formulario, y el admin lo pone con `float`,
   lo que mandaba el enlace de «olvidé» a flotar a la derecha. */
.login #content { border: 1px solid var(--gm-border); border-radius: 10px; background: var(--gm-surface); box-shadow: 0 12px 32px rgb(16 35 64 / 16%); padding: 30px 28px 26px; }
.login #content-main { float: none; width: auto; border: 0; background: transparent; box-shadow: none; padding: 0; }
.login .gm-login-marca { display: block; width: 148px; height: auto; margin: 0 0 20px; }
.login .gm-login-kicker { margin: 0 0 4px; color: var(--gm-azul); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.login .gm-login-titulo { margin: 0 0 16px; font-size: 21px; font-weight: 750; color: var(--gm-text); }
.login .form-row { border: 0; padding: 6px 0; }
.login .form-row label { display: block; width: auto; margin: 10px 0 5px; font-size: 12px; }
.login .form-row input[type="text"], .login .form-row input[type="password"] { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
.login .submit-row { border: 0; background: transparent; box-shadow: none; padding: 16px 0 0; }
.login .submit-row input { width: 100%; min-height: 44px; }
.login .clave-enlace-login { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: var(--gm-azul); }
.login .errornote { margin: 0 0 14px; }

@media (max-width: 767px) {
  #header { padding: 10px 16px; }
  #content { padding: 16px; }
  div.breadcrumbs { padding: 10px 16px; }
}

/* El logotipo del login cambia con el tema, como en las pantallas propias. */
.login .gm-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .login .gm-logo-light { display: none; }
  html:not([data-theme="light"]) .login .gm-logo-dark { display: block; }
}
html[data-theme="dark"] .login .gm-logo-light { display: none; }
html[data-theme="dark"] .login .gm-logo-dark { display: block; }