/*
 * Identidad Poliguru sobre el admin de Django.
 *
 * Django 4.2+ expone su tema como variables CSS, asi que no hay que pelearse con
 * sus selectores: basta redefinirlas. Eso hace este archivo corto y, sobre todo,
 * resistente a que Django cambie su HTML en la proxima version.
 *
 * Paleta y tipografia de `packages/design/poliguru.css`. Aqui van copiadas en vez
 * de importadas porque el admin se sirve como estatico de Django y no comparte
 * bundle con las apps de front.
 */

:root {
  /* --- Marca Reverb --- */
  --poliguru-teal-deep: #0d2b2b;
  --poliguru-teal-mid: #0d7377;
  --poliguru-teal-light: #14a085;
  --poliguru-teal-pale: #c8e6e5;
  --poliguru-teal-wash: #e8faf7;
  --poliguru-gold: #e6a733;

  /* --- Variables del tema de Django, redefinidas --- */
  --primary: #0d7377;
  --secondary: #0d2b2b;
  --accent: #e6a733;

  --header-bg: #0d2b2b;
  --header-color: #e8faf7;
  --header-branding-color: #ffffff;
  --header-link-color: var(--poliguru-teal-pale);

  --breadcrumbs-bg: #0f3535;
  --breadcrumbs-fg: var(--poliguru-teal-pale);
  --breadcrumbs-link-fg: #ffffff;

  --link-fg: #0d7377;
  --link-hover-color: #14a085;
  --link-selected-fg: #0d2b2b;

  --body-fg: #0d2b2b;
  --body-bg: #f9fffe;
  --body-quiet-color: #4a7070;
  --body-loud-color: #0d2b2b;

  --button-bg: #0d7377;
  --button-fg: #ffffff;
  --button-hover-bg: #14a085;
  --default-button-bg: #0d7377;
  --default-button-hover-bg: #14a085;

  --object-tools-bg: #0d2b2b;
  --object-tools-hover-bg: #0d7377;

  --selected-bg: var(--poliguru-teal-wash);
  --selected-row: #fdf0d6;

  --border-color: #c8e6e5;
  --hairline-color: #e8faf7;

  --message-success-bg: #d4fae8;
  --message-warning-bg: #fdf0d6;
  --message-error-bg: #fde8e8;

  --font-family-primary: "Lora", Georgia, "Hiragino Mincho ProN", serif;
  --font-family-monospace: "DM Mono", ui-monospace, Menlo, monospace;
}

html[data-theme="dark"], :root[data-theme="dark"] {
  --primary: #14a085;
  --header-bg: #0a1a1a;
  --breadcrumbs-bg: #0f2424;
  --link-fg: #5eedb8;
  --link-hover-color: #14a085;
  --body-bg: #0a1a1a;
  --body-fg: #e8faf7;
  --selected-bg: #0d2b2b;
  --border-color: #1a3a3a;
  --hairline-color: #142d2d;
}

/* --- Fondo con resplandores radiales, igual que el resto del sistema ---
   `body.login` incluido explicitamente: Django le pone su propio fondo a la
   pantalla de acceso y sin nombrarla gana esa regla. */
body, body.login {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(13, 115, 119, 0.09), transparent 60%),
    radial-gradient(900px 520px at -8% 32%, rgba(230, 167, 51, 0.06), transparent 55%),
    var(--body-bg);
  background-attachment: fixed;
}

/* --- Wordmark ---
   Las reglas de `packages/design/poliguru.css` seccion 8: cara display, punto
   dorado, tracking negativo. Es lo que impide que "Poliguru" se lea como el
   sustantivo comun en una pantalla llena de "materia prima". */
#site-name a { text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.6rem; }

.poliguru-wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.018em;
  color: #ffffff;
}
.poliguru-dot { color: var(--poliguru-gold); }

.poliguru-context {
  font-family: var(--font-family-monospace);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--poliguru-teal-pale);
  opacity: 0.85;
}

.poliguru-env {
  font-family: var(--font-family-monospace);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--poliguru-gold);
  border: 1px solid rgba(230, 167, 51, 0.4);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  margin-left: 0.7rem;
}

/* --- Encabezado --- */
#header {
  padding: 14px 40px;
  border-bottom: 2px solid var(--poliguru-gold);
}

/* --- Titulos en la cara display --- */
#content h1, .module h2, .module caption, h1, h2.subhead {
  font-family: "Playfair Display", Georgia, "Hiragino Mincho ProN", serif;
}

/* --- Modulos: superficie de vidrio, no caja plana ---
   `backdrop-filter` degrada limpio: sin soporte queda un color solido legible,
   se pierde el desenfoque pero nunca el contraste. */
.module, .dashboard .module {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(13, 43, 43, 0.06);
  overflow: hidden;
}

:root[data-theme="dark"] .module {
  background: rgba(15, 36, 36, 0.68);
  border-color: rgba(94, 237, 184, 0.14);
}

.module caption, .module h2 {
  background: var(--poliguru-teal-mid);
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* --- Formulario de acceso --- */
.login #container {
  margin-top: 6vh;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 10px 30px rgba(13, 43, 43, 0.10);
  overflow: hidden;
}
.login #header { border-radius: 14px 14px 0 0; }
.login .submit-row input {
  background: var(--poliguru-teal-mid);
  border-radius: 8px;
  font-weight: 600;
}
.login .submit-row input:hover { background: var(--poliguru-teal-light); }

/* --- Botones --- */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 8px;
  font-weight: 600;
}

/* --- Accesibilidad: foco siempre visible, y con contraste sobre los dos fondos --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--poliguru-gold);
  outline-offset: 2px;
}

/* --- Pie --- */
.poliguru-footer {
  font-family: var(--font-family-monospace);
  font-size: 0.68rem;
  color: var(--body-quiet-color);
  text-align: center;
  padding: 1.4rem 1rem;
  margin: 0;
}
.poliguru-wordmark-sm {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: var(--poliguru-teal-mid);
}
.poliguru-sep { color: var(--poliguru-gold); margin: 0 0.45rem; }

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Contraste alto: el vidrio se vuelve solido --- */
@media (prefers-contrast: more) {
  .module, .login #container {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--poliguru-teal-mid);
  }
}