/* Una sola identidad de marca: verde original para "metra" y azul Civi para el punto. */
:root {
  --civimetra-metra: #58d2b8;
}

.builder-brand .brand-metra,
.public-brand .brand-metra,
.product-brand .brand-metra,
.civi-hero-brand .brand-metra,
.public-footer-brand .brand-metra,
.print-document-brand .brand-metra,
.budget-print-cover .brand-metra,
.public-brand b span {
  color: var(--civimetra-metra) !important;
}

.builder-brand .brand-dot,
.public-brand .brand-dot,
.product-brand .brand-dot,
.civi-hero-brand .brand-dot,
.public-footer-brand .brand-dot,
.print-document-brand .brand-dot,
.budget-print-cover .brand-dot {
  color: #174c80 !important;
}

.auth-side .product-brand > b > .brand-dot {
  color: #174c80 !important;
}

/* Las páginas públicas también cargan el tema editorial, más específico. */
body .public-header .public-brand b span,
body .public-footer .public-brand b span,
body .public-brand b span,
body .product-brand .brand-metra,
body .builder-brand .brand-metra {
  color: #58d2b8 !important;
}

body .public-header .public-brand .brand-dot,
body .public-footer .public-brand .brand-dot,
body .public-brand .brand-dot,
body .product-brand .brand-dot,
body .builder-brand .brand-dot {
  color: #174c80 !important;
}

body.public-page .public-header .public-brand b span.brand-metra,
body.public-page .public-footer .public-brand b span.brand-metra,
body.public-page .public-brand b span.brand-metra {
  color: rgb(88, 210, 184) !important;
}

/* En las pantallas oscuras de acceso el icono C se muestra en blanco. */
.auth-side .product-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.auth-side .civimetra-c-mark {
  display: inline-flex !important;
  width: 19px;
  height: 23px;
  flex: 0 0 19px;
}

.auth-side .civimetra-c-mark svg {
  display: block !important;
  width: 100%;
  height: 100%;
}

.auth-side .civimetra-c-mark path { fill: #fff !important; }
.auth-side .civimetra-c-mark stop { stop-color: #fff !important; }