/*
 * Los colores de ICR en el panel de administración.
 *
 * Son los mismos que usa hbconfigurator en `styles/theme.js`: el azul corporativo,
 * su versión oscura y el cian del logo. No se reescribe ninguna regla del admin,
 * solo las variables de las que cuelgan, así que lo que Django cambie de un
 * release a otro sigue funcionando.
 *
 *   #23388d  azul corporativo      #1a2760  su versión oscura
 *   #56c2ef  cian del logo         #37332f  texto
 */

:root {
  --icr-blue: #23388d;
  --icr-blue-dark: #1a2760;
  --icr-cyan: #56c2ef;

  --primary: var(--icr-blue);
  --secondary: var(--icr-blue);
  --accent: var(--icr-cyan);

  --header-bg: var(--icr-blue);
  --header-color: #ffffff;
  --header-branding-color: #ffffff;

  --breadcrumbs-bg: var(--icr-blue-dark);
  --breadcrumbs-fg: #b9c4e4;
  --breadcrumbs-link-fg: #ffffff;

  --link-fg: var(--icr-blue);
  --link-hover-color: var(--icr-blue-dark);
  --link-selected-fg: var(--icr-blue-dark);

  --button-bg: var(--icr-blue);
  --button-hover-bg: var(--icr-blue-dark);
  --default-button-bg: var(--icr-blue-dark);
  --default-button-hover-bg: var(--icr-blue);

  --object-tools-bg: var(--icr-blue-dark);
  --object-tools-hover-bg: var(--icr-blue);

  /* El amarillo de la fila seleccionada desentona con el azul; un cian muy claro
     señala igual de bien y no compite con los avisos, que sí son amarillos */
  --selected-row: #e3f3fb;

  --body-fg: #37332f;
}

/* En oscuro el azul corporativo no tiene contraste contra el fondo, así que manda
   el cian del logo. Se repite el selector de Django —el suyo gana por orden— y se
   cubren los dos modos: el automático del sistema y el elegido a mano */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--icr-cyan);
    --secondary: var(--icr-blue);
    --header-bg: var(--icr-blue-dark);
    --breadcrumbs-bg: #14203f;
    --breadcrumbs-fg: #9fb0d8;
    --link-fg: #7fd0f3;
    --link-hover-color: var(--icr-cyan);
    --link-selected-fg: var(--icr-cyan);
    --button-bg: var(--icr-blue);
    --button-hover-bg: var(--icr-blue-dark);
    --default-button-bg: var(--icr-blue);
    --default-button-hover-bg: var(--icr-blue-dark);
    --object-tools-bg: var(--icr-blue);
    --object-tools-hover-bg: var(--icr-blue-dark);
    --selected-row: #1d3a4d;
    --body-fg: #eeeeee;
  }
}

html[data-theme="dark"] {
  --primary: var(--icr-cyan);
  --secondary: var(--icr-blue);
  --header-bg: var(--icr-blue-dark);
  --breadcrumbs-bg: #14203f;
  --breadcrumbs-fg: #9fb0d8;
  --link-fg: #7fd0f3;
  --link-hover-color: var(--icr-cyan);
  --link-selected-fg: var(--icr-cyan);
  --button-bg: var(--icr-blue);
  --button-hover-bg: var(--icr-blue-dark);
  --default-button-bg: var(--icr-blue);
  --default-button-hover-bg: var(--icr-blue-dark);
  --object-tools-bg: var(--icr-blue);
  --object-tools-hover-bg: var(--icr-blue-dark);
  --selected-row: #1d3a4d;
  --body-fg: #eeeeee;
}

/* El tema claro elegido a mano tiene que poder volver a los colores claros */
html[data-theme="light"] {
  --primary: var(--icr-blue);
  --secondary: var(--icr-blue);
  --header-bg: var(--icr-blue);
  --breadcrumbs-bg: var(--icr-blue-dark);
  --breadcrumbs-fg: #b9c4e4;
  --link-fg: var(--icr-blue);
  --link-hover-color: var(--icr-blue-dark);
  --link-selected-fg: var(--icr-blue-dark);
  --selected-row: #e3f3fb;
  --body-fg: #37332f;
}

/* ───────────────────────────── el logo ───────────────────────────── */

#site-name a {
  display: flex;
  align-items: center;
  gap: 12px;
}

#site-name .icr-logo {
  height: 26px;
  width: auto;
  flex: none;
}

/* En pantallas estrechas la cabecera de Django ya va justa: se queda el logo, que
   identifica igual y ocupa mucho menos que el título */
@media (max-width: 767px) {
  #site-name .icr-name { display: none; }
  #site-name .icr-logo { height: 22px; }
}