/* C.A.C. Alianza — tema para Django admin
   Paleta: Azul royal #2a3bb0 / Oro #f5c400 / Neutros fríos */

/* ── MODO CLARO ─────────────────────────────────── */
:root,
html[data-theme="light"] {
  --primary:                 #2a3bb0;
  --secondary:               #1b2575;
  --accent:                  #f5c400;
  --primary-fg:              #ffffff;

  --body-fg:                 #1d2230;
  --body-bg:                 #ffffff;
  --body-quiet-color:        #5a6178;
  --body-loud-color:         #0d101a;

  --header-color:            #ffffff;
  --header-branding-color:   var(--accent);
  --header-bg:               var(--secondary);
  --header-link-color:       #ffffff;

  --breadcrumbs-fg:          #c5cdf2;
  --breadcrumbs-link-fg:     #ffffff;
  --breadcrumbs-bg:          var(--primary);

  --link-fg:                 #2a3bb0;
  --link-hover-color:        #1b2575;
  --link-selected-fg:        #3144cf;

  --hairline-color:          #eceef5;
  --border-color:            #d7dbe8;

  --error-fg:                #ba2121;
  --message-success-bg:      #e7f6ec;
  --message-warning-bg:      #fef3cf;
  --message-error-bg:        #fdecec;

  --darkened-bg:             #f5f6fb;
  --selected-bg:             #eceef5;
  --selected-row:            #fef0bf;

  --button-fg:               #ffffff;
  --button-bg:               var(--primary);
  --button-hover-bg:         #1b2575;
  --default-button-bg:       var(--primary);
  --default-button-hover-bg: #1b2575;
  --close-button-bg:         #6b7290;
  --close-button-hover-bg:   #545b76;
  --delete-button-bg:        #ba2121;
  --delete-button-hover-bg:  #a41515;

  --object-tools-fg:         #1b2575;
  --object-tools-bg:         var(--accent);
  --object-tools-hover-bg:   #e0ad00;

  color-scheme: light;
}

/* ── MODO OSCURO (media query) ───────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:                 #5468e6;
    --secondary:               #2a3bb0;
    --accent:                  #f5c400;
    --primary-fg:              #ffffff;

    --body-fg:                 #e6e8f2;
    --body-bg:                 #13151e;
    --body-quiet-color:        #9aa3ba;
    --body-loud-color:         #ffffff;

    --header-color:            #ffffff;
    --header-branding-color:   var(--accent);
    --header-bg:               #171a26;
    --header-link-color:       #e6e8f2;

    --breadcrumbs-fg:          #9aa3ba;
    --breadcrumbs-link-fg:     #e6e8f2;
    --breadcrumbs-bg:          #1c2030;

    --link-fg:                 #93a1f2;
    --link-hover-color:        #b3bdf7;
    --link-selected-fg:        #f5c400;

    --hairline-color:          #262b3c;
    --border-color:            #30364a;

    --error-fg:                #e79b9b;
    --message-success-bg:      #15301f;
    --message-warning-bg:      #332b0f;
    --message-error-bg:        #3a1b1b;

    --darkened-bg:             #1a1d28;
    --selected-bg:             #232838;
    --selected-row:            #2f2a12;

    --button-fg:               #ffffff;
    --button-bg:               var(--primary);
    --button-hover-bg:         #6b7de8;
    --default-button-bg:       var(--primary);
    --default-button-hover-bg: #6b7de8;
    --close-button-bg:         #545b76;
    --close-button-hover-bg:   #6b7290;
    --delete-button-bg:        #c44545;
    --delete-button-hover-bg:  #d65555;

    --object-tools-fg:         #171a26;
    --object-tools-bg:         var(--accent);
    --object-tools-hover-bg:   #e0ad00;

    color-scheme: dark;
  }
}

/* ── MODO OSCURO (toggle manual) ─────────────────── */
html[data-theme="dark"] {
  --primary:                 #5468e6;
  --secondary:               #2a3bb0;
  --accent:                  #f5c400;
  --primary-fg:              #ffffff;

  --body-fg:                 #e6e8f2;
  --body-bg:                 #13151e;
  --body-quiet-color:        #9aa3ba;
  --body-loud-color:         #ffffff;

  --header-color:            #ffffff;
  --header-branding-color:   var(--accent);
  --header-bg:               #171a26;
  --header-link-color:       #e6e8f2;

  --breadcrumbs-fg:          #9aa3ba;
  --breadcrumbs-link-fg:     #e6e8f2;
  --breadcrumbs-bg:          #1c2030;

  --link-fg:                 #93a1f2;
  --link-hover-color:        #b3bdf7;
  --link-selected-fg:        #f5c400;

  --hairline-color:          #262b3c;
  --border-color:            #30364a;

  --error-fg:                #e79b9b;
  --message-success-bg:      #15301f;
  --message-warning-bg:      #332b0f;
  --message-error-bg:        #3a1b1b;

  --darkened-bg:             #1a1d28;
  --selected-bg:             #232838;
  --selected-row:            #2f2a12;

  --button-fg:               #ffffff;
  --button-bg:               var(--primary);
  --button-hover-bg:         #6b7de8;
  --default-button-bg:       var(--primary);
  --default-button-hover-bg: #6b7de8;
  --close-button-bg:         #545b76;
  --close-button-hover-bg:   #6b7290;
  --delete-button-bg:        #c44545;
  --delete-button-hover-bg:  #d65555;

  --object-tools-fg:         #171a26;
  --object-tools-bg:         var(--accent);
  --object-tools-hover-bg:   #e0ad00;

  color-scheme: dark;
}

/* ── CABECERAS DE MÓDULO ─────────────────────────── */
.module h2,
.module caption,
.inline-group h2 {
  background: var(--primary);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .module h2, .module caption, .inline-group h2 {
    background: var(--secondary);
    color: #ffffff;
  }
}
html[data-theme="dark"] .module h2,
html[data-theme="dark"] .module caption,
html[data-theme="dark"] .inline-group h2 {
  background: var(--secondary);
  color: #ffffff;
}

/* ── SIDEBAR — ítem activo ───────────────────────── */
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--accent);
  border-left: 3px solid var(--accent);
}

/* ── LOGO ────────────────────────────────────────── */
#branding-logo {
  height: 42px;
  width: auto;
  vertical-align: middle;
  margin-right: 10px;
}

#site-name {
  display: flex;
  align-items: center;
}

/* ── LINKS en header ─────────────────────────────── */
#header a:focus,
#header a:hover {
  color: var(--accent);
  text-decoration: none;
}

#branding h1 a:link,
#branding h1 a:visited {
  color: var(--accent);
}

div.breadcrumbs a {
  color: var(--breadcrumbs-link-fg);
}

/* ── INPUTS — mayor contraste ────────────────────── */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: var(--body-bg);
  color: var(--body-fg);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* claro: fondo ligeramente diferenciado del blanco de página */
:root input[type="text"],
:root input[type="search"],
:root input[type="email"],
:root input[type="password"],
:root input[type="number"],
:root input[type="url"],
:root textarea,
:root select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="url"],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #f5f6fb;
}

/* oscuro: fondo más claro que el body para destacar el campo */
@media (prefers-color-scheme: dark) {
  :root input[type="text"],
  :root input[type="search"],
  :root input[type="email"],
  :root input[type="password"],
  :root input[type="number"],
  :root input[type="url"],
  :root textarea,
  :root select {
    background: #232838;
  }
}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #232838;
}