/* Buró de Crédito branding for Scalar (BDI-1736). */
/* Tokens copied from burodecredito.com.mx (its :root vars and the lender
   pages' c-body--fisicas-grantors theme), not approximated. */
:root {
  --bdc-blue: #1a6af4; /* --blue-1, primary CTA */
  --bdc-blue-hover: #1d62d9; /* --blue-8 */
  --bdc-navy: #104888; /* Buró-provided navy (BDI-1736); their site uses #083a69 */
  --bdc-tint: #eaf2ff; /* --blue-3, breadcrumb bar and soft fills */
  --bdc-surface: #f4f5f6; /* --blue-4 */
  --bdc-line: #e7ebef; /* --blue-9 */
  --bdc-line-strong: #c8ccd0; /* --blue-7 */
  --bdc-text: #000;
  --bdc-text-2: #5b6770; /* --blue-11 */
  --bdc-text-3: #6d7383;
  --bdc-red: #e32426; /* logo swoosh; only for "required" marks */
  --bdc-header-height: 72px;
  /* Scalar offsets its sticky sidebar and headers by this. */
  --scalar-custom-header-height: var(--bdc-header-height);
}

.light-mode {
  --scalar-font: 'Open Sans', system-ui, sans-serif;
  --scalar-font-code: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --scalar-color-1: var(--bdc-text);
  --scalar-color-2: var(--bdc-text-2);
  --scalar-color-3: var(--bdc-text-3);
  --scalar-color-accent: var(--bdc-blue);
  --scalar-color-red: var(--bdc-red);
  --scalar-color-orange: var(--bdc-red);
  --scalar-background-1: #fff;
  --scalar-background-2: var(--bdc-surface);
  --scalar-background-3: var(--bdc-line);
  --scalar-background-accent: var(--bdc-tint);
  --scalar-border-color: var(--bdc-line);
  --scalar-link-color: var(--bdc-blue);
  --scalar-sidebar-background-1: #fff;
  --scalar-sidebar-color-1: var(--bdc-text);
  --scalar-sidebar-color-2: var(--bdc-text-2);
  --scalar-sidebar-color-active: var(--bdc-navy);
  --scalar-sidebar-item-active-background: var(--bdc-tint);
  --scalar-sidebar-search-border-color: var(--bdc-line-strong);
  --scalar-button-1: var(--bdc-blue);
  --scalar-button-1-color: #fff;
  --scalar-button-1-hover: var(--bdc-blue-hover);
  --scalar-radius: 8px;
  --scalar-radius-lg: 16px;
  --scalar-radius-xl: 16px;
}

body {
  margin: 0;
  background: #fff;
  font-family: 'Open Sans', system-ui, sans-serif;
}

.bdc-header {
  position: sticky;
  top: 0;
  /* Below Scalar's request client modal so the overlay dims it too. */
  z-index: 10;
  box-sizing: border-box;
  height: var(--bdc-header-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--bdc-line);
}

.bdc-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
}

.bdc-brand img {
  height: 40px;
  width: auto;
  flex: none;
}

.bdc-divider {
  width: 1px;
  height: 28px;
  background: var(--bdc-line-strong);
  flex: none;
}

.bdc-title {
  color: var(--bdc-text);
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bdc-title small {
  color: var(--bdc-text-3);
  font-weight: 600;
  font-size: 14px;
}

.bdc-lang {
  margin-left: auto;
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--bdc-navy);
  border-radius: 75px;
  flex: none;
}

.bdc-lang button {
  border: 0;
  background: transparent;
  color: var(--bdc-navy);
  font: 600 13px 'Open Sans', system-ui, sans-serif;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.bdc-lang button[aria-pressed='true'] {
  background: var(--bdc-navy);
  color: #fff;
}

.bdc-lang button:focus-visible {
  outline: 2px solid var(--bdc-blue);
  outline-offset: 2px;
}

/* Pill buttons: BDC blue with white text (Try it opener and Send). */
.scalar-app .show-api-client-button,
.scalar-app .scalar-button-solid {
  border-radius: 105px !important;
  background: var(--bdc-blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.scalar-app .show-api-client-button:hover,
.scalar-app .scalar-button-solid:hover {
  background: var(--bdc-blue-hover) !important;
}

.scalar-app .show-api-client-button * {
  color: #fff !important;
}

/* Headings are black and bold on burodecredito.com.mx. */
.scalar-app .section-header,
.scalar-app h1,
.scalar-app h2 {
  color: var(--bdc-text);
  font-weight: 700;
}

@media (max-width: 640px) {
  :root {
    --bdc-header-height: 60px;
  }
  .bdc-header {
    padding: 0 16px;
  }
  .bdc-brand {
    gap: 10px;
  }
  .bdc-brand img {
    height: 26px;
  }
  .bdc-title {
    font-size: 14px;
  }
  .bdc-title {
    line-height: 1.15;
  }
  .bdc-title small {
    display: block;
    font-size: 11px;
  }
}