/* Estilos compartidos de marca para el Observatorio */

:root {
  --brand-dark: #a3223a;   /* color base */
  --brand-dark-2: #8e1d33; /* cercano para el gradiente */

  /* alias útiles */
  --brand: var(--brand-dark);
  --brand-600: var(--brand-dark-2);

  /* Integración con Bootstrap para textos/íconos/link-primary */
  --bs-primary: var(--brand);
  --bs-primary-rgb: 163, 34, 58;
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-600);
}

html, body {
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.navbar-brand {
  font-weight: 600;
}

/* Botones Bootstrap al color de marca */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-600);
  --bs-btn-active-border-color: var(--brand-600);
}
.btn-outline-primary{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
}

/* Focus en formularios con color de marca */
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(163, 34, 58, 0.25);
}