/* ---------- Color Module Styles (Openlab theme) ----------- */

/* CSS Variables for easy theming */
:root {
  /* Core palette */
  --c-primary: #373b78;
  --c-primary-100: #c6cae9;
  --c-bg: #f5f7fa;

  --c-act-1: #a3e4d7;
  --c-act-1-hover: #8fd9c8;
  --c-act-2: #f7c948;
  --c-act-2-hover: #e6b63f;

  --c-text: #2d2d2d;

  --c-link: #4a5eb5;
  --c-link-hover: #3d4b93;
  --c-link-active: #2e3a7a;

  --c-extra: #ff0066;
  --c-extra-hover: #d60057;

  /* Neutrals and helpers */
  --c-white: #ffffff;
  --c-muted-bg: #eef1f7; /* > --c-bg para blocks */
  --c-border: #e3e7f2;   /* borde sutil */
  --focus-ring: #a3e4d7;
}

/* Base */
body {
  color: var(--c-text);
  background: var(--c-bg);
}

/* Page wrappers */
#page,
#main-wrapper,
.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
  background: var(--c-white);
}

/* Tabs */
.tabs ul.primary li a.is-active,
.tabs ul.primary li.is-active a {
  background-color: var(--c-white);
  border-bottom-color: var(--c-white);
}

/* Navbars (Barrio ids) */
#navbar-top {
  background-color: var(--c-primary-100);
  color: var(--c-primary);
}

/* Si tu navbar principal es clara */
#navbar-main {
  background-color: var(--c-bg);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}

/* Links generales */
a,
.link {
  color: var(--c-link);
  text-decoration-color: color-mix(in oklab, var(--c-link), transparent 70%);
}
a:hover,
a:focus,
.link:hover,
.link:focus {
  color: var(--c-link-hover);
  text-decoration-color: var(--c-link-hover);
}
a:active,
.link:active {
  color: var(--c-link-active);
}

/* ------- Navbar links (contextual, SIN forzar blanco global) ------- */
/* Nav clara */
.navbar.navbar-light .navbar-brand,
.navbar.navbar-light .nav-link {
  color: var(--c-text);
}
.navbar.navbar-light .nav-link:hover,
.navbar.navbar-light .nav-link:focus {
  color: var(--c-link);
}

/* Nav oscura */
.navbar.navbar-dark .navbar-brand,
.navbar.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.9);
}
.navbar.navbar-dark .nav-link:hover,
.navbar.navbar-dark .nav-link:focus {
  color: var(--c-white);
}

/* Dropdown activo dentro de nav */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background-color: var(--c-link);
  color: var(--c-white);
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--c-link);
  border-color: var(--c-link);
}
.page-link,
.page-link:hover {
  color: var(--c-link);
}

/* Sidebars / blocks */
.sidebar .block {
  background-color: var(--c-muted-bg);
  border-color: var(--c-border);
}

/* Buttons */
.btn-primary {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #2f3368;
  border-color: #2f3368;
}

/* Optional accent button */
.btn-accent {
  background-color: var(--c-act-1);
  border-color: var(--c-act-1);
  color: #083a32;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--c-act-1-hover);
  border-color: var(--c-act-1-hover);
}

/* Footer */
.site-footer {
  background: var(--c-primary);
  color: var(--c-white);
}
.site-footer a {
  color: var(--c-primary-100);
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--c-act-1);
}

/* ---------- Header branding & secondary menu ---------- */
/* Base (fondos claros) */
.region-header,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
  color: var(--c-text);
}
/* Solo usa texto blanco cuando el header tenga fondo oscuro */
.header-on-dark .region-header,
.header-on-dark .region-header a,
.header-on-dark .region-header li a.is-active,
.header-on-dark .region-header .site-branding__text,
.header-on-dark .region-header .site-branding,
.header-on-dark .region-header .site-branding__text a,
.header-on-dark .region-header .site-branding a,
.header-on-dark .region-secondary-menu .menu-item a,
.header-on-dark .region-secondary-menu .menu-item a.is-active {
  color: var(--c-white);
}

/* Focus visibility (accessibility) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Color Form (RTL helpers) ----------- */
[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;
}