/* ============ Documentação Autorax · cores e componentes da marca ============ */
:root {
  --ax-navy: #091E37;
  --ax-navy-2: #12365F;
  --ax-azul: #145AF6;
  --ax-ciano: #07BCDB;
  --md-primary-fg-color: #091E37;
  --md-primary-fg-color--light: #12365F;
  --md-primary-fg-color--dark: #06152A;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #145AF6;
  --md-accent-fg-color--transparent: rgba(20, 90, 246, .1);
  --md-typeset-a-color: #145AF6;
  --ax-card: #ffffff;
  --ax-card-borda: #e3e6eb;
  --ax-card-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .06);
  --ax-suave: #f5f6f8;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0B1626;
  --md-primary-fg-color--light: #12365F;
  --md-primary-fg-color--dark: #050C16;
  --md-default-bg-color: #0d1016;
  --md-default-bg-color--light: #151922;
  --md-typeset-a-color: #6FA0FF;
  --md-accent-fg-color: #6FA0FF;
  --ax-card: #151922;
  --ax-card-borda: #262c37;
  --ax-card-sombra: 0 1px 3px rgba(0, 0, 0, .45);
  --ax-suave: #11151c;
}

/* ---------- cabeçalho ---------- */
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.25rem; width: auto; }
/* a logo já diz Autorax: no cabeçalho fica só "Documentação" */
.md-header__title .md-header__topic:first-child .md-ellipsis { font-size: 0; }
.md-header__title .md-header__topic:first-child .md-ellipsis::after { content: "Documentação"; font-size: .9rem; font-weight: 600; letter-spacing: -.01em; opacity: .85; }
.md-tabs { background: var(--md-primary-fg-color); }
.md-tabs__link { font-weight: 500; opacity: .78; }
.md-tabs__item--active .md-tabs__link { opacity: 1; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-weight: 650; letter-spacing: -.015em; color: var(--md-default-fg-color); }
.md-typeset h1 { font-size: 2rem; margin-bottom: .6em; }
.md-typeset h2 { margin-top: 1.8em; }

/* ---------- página inicial (estilo central de ajuda) ---------- */
.ax-hero {
  background: radial-gradient(110% 120% at 50% -10%, var(--ax-navy-2) 0%, var(--ax-navy) 58%, #061428 100%);
  color: #fff; padding: 4.2rem 1rem 4.6rem; text-align: center; position: relative; overflow: hidden;
}
.ax-hero::after { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 80%; background: radial-gradient(50% 50% at 50% 50%, rgba(7, 188, 219, .16), transparent 70%); pointer-events: none; }
.ax-hero__in { max-width: 46rem; margin: 0 auto; position: relative; z-index: 1; }
.ax-hero__eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 600; color: #7FD6F7; margin: 0 0 .7rem; }
.ax-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 650; letter-spacing: -.02em; margin: 0 0 .7rem; color: #fff; line-height: 1.12; }
.ax-hero h1 span { color: var(--ax-ciano); }
.ax-hero__sub { color: #B8C7DA; font-size: 1.02rem; margin: 0 auto 1.9rem; max-width: 36rem; }
.ax-hero__busca {
  display: flex; align-items: center; gap: .7rem; max-width: 38rem; margin: 0 auto; cursor: text;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: .7rem;
  padding: .85rem 1rem; color: #C9D6E6; font-size: .92rem; text-align: left; transition: background .2s, border-color .2s;
}
.ax-hero__busca:hover, .ax-hero__busca:focus-visible { background: rgba(255, 255, 255, .11); border-color: rgba(127, 214, 247, .55); outline: none; }
.ax-hero__busca svg { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; }
.ax-hero__busca span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-hero__busca kbd { font: 600 .72rem Inter, sans-serif; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: .3rem; padding: .1rem .45rem; color: #E6EEF7; }

/* na inicial: sem barras laterais e conteúdo mais largo, subindo sobre o fundo escuro */
.ax-home .md-main__inner { margin-top: 0; }
.ax-home .md-content__inner { margin-top: -2.4rem; padding-top: 0; }
.ax-home .md-content__inner > h1:first-child { display: none; }
.ax-home .md-content { max-width: 74rem; margin: 0 auto; }

.ax-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1rem; margin: 0 0 2.2rem; }
.md-typeset .ax-card {
  background: var(--ax-card); border: 1px solid var(--ax-card-borda); border-radius: .8rem; box-shadow: var(--ax-card-sombra);
  padding: 1.15rem 1.2rem 1rem; display: flex; flex-direction: column; position: relative; z-index: 1;
}
.md-typeset .ax-card h3 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; margin: 0 0 .45rem; }
.md-typeset .ax-card h3 a { color: inherit; }
.md-typeset .ax-card h3 a:hover { color: var(--md-accent-fg-color); }
.ax-ico { width: 2rem; height: 2rem; border-radius: .55rem; display: grid; place-items: center; flex: none; background: rgba(20, 90, 246, .1); color: var(--ax-azul); }
[data-md-color-scheme="slate"] .ax-ico { background: rgba(111, 160, 255, .14); color: #8FB5FF; }
.ax-ico svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.md-typeset .ax-card p { font-size: .76rem; color: var(--md-default-fg-color--light); margin: 0 0 .7rem; line-height: 1.5; }
.md-typeset .ax-card ul { list-style: none; margin: 0; padding: 0; }
.md-typeset .ax-card li { margin: 0; padding: .28rem 0; border-top: 1px dashed var(--ax-card-borda); font-size: .76rem; }
.md-typeset .ax-card li:first-child { border-top: 0; }
.md-typeset .ax-card li a { font-weight: 500; }
.md-typeset .ax-card li a::after { content: " →"; opacity: 0; transition: opacity .15s; }
.md-typeset .ax-card li a:hover::after { opacity: 1; }

.md-typeset .ax-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.md-typeset .ax-faixa a {
  display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: .7rem; background: var(--ax-suave);
  border: 1px solid var(--ax-card-borda); color: var(--md-default-fg-color); font-size: .78rem;
}
.md-typeset .ax-faixa a:hover { border-color: var(--md-accent-fg-color); }
.md-typeset .ax-faixa b { display: block; font-size: .84rem; }

/* ---------- vídeo do passo a passo ---------- */
.md-typeset .ax-video { margin: 1.1rem 0 1.6rem; border-radius: .75rem; overflow: hidden; border: 1px solid var(--ax-card-borda); background: #000; box-shadow: var(--ax-card-sombra); }
.md-typeset .ax-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #091E37; }
.md-typeset .ax-video figcaption { background: var(--ax-card); color: var(--md-default-fg-color--light); font-size: .72rem; padding: .55rem .9rem; margin: 0; text-align: left; max-width: none; display: flex; gap: .5rem; align-items: center; }
.md-typeset .ax-video figcaption::before { content: "▶"; color: var(--ax-azul); font-size: .65rem; }

/* passos numerados */
.md-typeset ol.ax-passos { counter-reset: p; list-style: none; padding-left: 0; margin-left: 0; }
.md-typeset ol.ax-passos > li { counter-increment: p; position: relative; padding-left: 2.3rem; margin: 0 0 .75rem; }
.md-typeset ol.ax-passos > li::before {
  content: counter(p); position: absolute; left: 0; top: .05rem; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--ax-azul); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center;
}

/* caminho no sistema (ex.: Vendas → Negócios) */
.md-typeset .ax-caminho { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; background: var(--ax-suave); border: 1px solid var(--ax-card-borda); border-radius: 2rem; padding: .2rem .75rem; color: var(--md-default-fg-color--light); margin: 0 0 1rem; vertical-align: middle; }
.md-typeset .ax-perfis { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem .4rem; vertical-align: middle; }
.md-typeset .ax-perfis span { line-height: 1.5; }
.md-typeset .ax-perfis span { font-size: .66rem; font-weight: 600; padding: .12rem .55rem; border-radius: 2rem; background: rgba(7, 188, 219, .12); color: #0b7f95; }
[data-md-color-scheme="slate"] .ax-perfis span { color: #6fdcf0; }

/* botões e telas citados no texto */
.md-typeset .ax-bt { display: inline-block; font-size: .78em; font-weight: 600; padding: .05rem .5rem; border-radius: .35rem; border: 1px solid var(--ax-card-borda); background: var(--ax-card); white-space: nowrap; }

.md-typeset table:not([class]) { font-size: .74rem; }
.md-typeset table:not([class]) th { background: var(--ax-suave); }
.md-footer { background: var(--ax-navy); }
[data-md-color-scheme="slate"] .md-footer { background: #070f1b; }

@media screen and (max-width: 44.9375em) {
  .ax-hero { padding: 2.8rem 1rem 3.4rem; }
  .ax-hero__busca kbd { display: none; }
}