/* ---------- Color Module Styles ----------- */
/* Esquema "Trámite institucional" — vino / arena.
   Mantiene los MISMOS selectores que el colors.css original del subtema para
   que el módulo Color de Drupal pueda seguir reescribiéndolo. */

body {
  color: #2B2724;
  background: #2B2724;
}

#page,
#main-wrapper,
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: #fff;
}

.tabs ul.primary li a.is-active {
  background-color: #fff;
}

.tabs ul.primary li.is-active a {
  background-color: #fff;
  border-bottom-color: #fff;
}

#navbar-top {
  /* !important necesario: el ajuste bootstrap_navbar_background pone la clase
     .bg-primary en la barra, y esa utilidad de Bootstrap ya trae !important.
     Sin esto el módulo Color no podría repintar la barra. */
  background-color: #3D0F22 !important;
}

#navbar-main {
  /* Mismo caso que #navbar-top: hay que ganarle a .bg-primary. */
  background-color: #6B1E3C !important;
}

a,
.link {
  color: #6B1E3C;
}

a:hover,
a:focus,
.link:hover,
.link:focus {
  color: #3D0F22;
}

.nav-item .dropdown-item a.active {
  color: white;
}

.nav-link {
  color: rgb(255, 255, 255);
}

.nav-link:hover,
.nav-link:focus {
  color: rgb(255, 255, 255);
}

a:active,
.link:active {
  color: #8A2B4F;
}

.page-item.active .page-link {
  background-color: #6B1E3C;
  border-color: #6B1E3C;
}

.page-link,
.page-link:hover {
  color: #6B1E3C;
}

.sidebar .block {
  background-color: #FBF8F2;
  border-color: #DDD9D3;
}

.btn-primary {
  background-color: #6B1E3C;
  border-color: #6B1E3C;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #4E1429;
}

.site-footer {
  background: #2B2724;
}

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: #ffffff;
}


/* ---------- Tokens de marca del kit de diseño ----------
   Este archivo es el ÚNICO que el módulo Color reescribe (ver color/color.inc),
   por eso los tokens que dependen del esquema elegido se declaran aquí y no en
   style.css. style.css carga después pero NO vuelve a declararlos, así que
   estos valores son los que ganan y todo el sistema visual —botones, alertas,
   tablas, pestañas, pie— sigue el esquema activo.

   Cada valor corresponde a un campo de color.inc:
     --mx-vino-900  = "Header background top"    (top)
     --mx-vino-700  = "Header background bottom" (bottom / button / link)
     --mx-vino-800  = "Primary button hover"     (buttonhover)
     --mx-gris-900  = "Footer background"        (footer / text)
     --mx-arena-50  = "Sidebar background"       (sidebar)
     --mx-gris-200  = "Sidebar borders"          (sidebarborders)
     --mx-blanco    = "Main background"          (bg)

   Límite conocido: en el esquema predeterminado bottom, button y link comparten
   el mismo hex (#6B1E3C). El módulo Color sustituye por valor de color, no por
   campo, así que en un esquema donde esos tres difieran (p. ej. "Blue Lagoon")
   los tres tomarán un único color. Si necesitas separarlos, dale a cada campo
   un hex distinto en el esquema predeterminado de color.inc. */
:root {
  --mx-vino-900: #3D0F22;
  --mx-vino-800: #4E1429;
  --mx-vino-700: #6B1E3C;
  --mx-gris-900: #2B2724;
  --mx-arena-50: #FBF8F2;
  --mx-gris-200: #DDD9D3;
  --mx-blanco: #ffffff;
}


/* ---------- Color Form ----------- */

[dir="rtl"] .color-form .color-palette {
  margin-left: 0;
  margin-right: 20px;
}

[dir="rtl"] .color-form .form-item label {
  float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
  right: -20px;
  left: 0;
}