/* ==========================================================================
   Consulta de Extrato — tela inicial (variante 11: assistente + hero gov.br)
   Todas as classes custom usam prefixo `xt-` para não colidir com Bootstrap
   nem com o gov.br DS (ex.: .progress e .badge são componentes do Bootstrap).
   Tokens gov.br entram com fallback hex porque o core local não expõe a v3.
   ========================================================================== */

.xt-scope {
  /* paleta travada (fallback dos tokens gov.br) */
  --xt-ink: #1c1c1c;
  --xt-ink-soft: #333;
  --xt-muted: #595959;
  --xt-primary: var(--blue-warm-vivid-70, #1351b4);
  --xt-primary-dk: var(--blue-warm-vivid-80, #0c326f);
  --xt-primary-tint: #eaf0fb;
  --xt-primary-ln: #c5d4eb;
  --xt-success: var(--green-cool-vivid-50, #168821);
  --xt-warning-bg: #fff8e1;
  --xt-warning-bd: var(--yellow-vivid-20, #ffcd07);
  --xt-line: #d9dde3;
  --xt-border: #c8ccd1;
  --xt-surface: #fff;
  --xt-bg: var(--background-light, #f4f5f7);
  --xt-r: 12px;

  color: var(--xt-ink);
  font-family: "Raleway", "Rawline", sans-serif;
  line-height: 1.55;
}

/* ============ PÁGINA + CARD ============ */
.xt-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 24px;
}
.xt-card {
  margin-top: 0;
  position: relative;
  z-index: 2;
  background: var(--xt-surface);
  border: 1px solid var(--xt-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 22px 50px -26px rgba(12, 50, 111, 0.55);
  overflow: hidden;
}
.xt-card-head {
  padding: 26px 36px 22px;
  border-bottom: 1px solid var(--xt-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.xt-card-title {
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  margin: 0 0 4px;
  color: var(--xt-ink);
}
.xt-card-lead {
  font-size: 0.92rem;
  color: var(--xt-muted);
  margin: 0;
}
.xt-progress {
  flex: 0 0 auto;
  text-align: right;
  min-width: 118px;
}
.xt-progress .xt-count {
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--xt-primary-dk);
  white-space: nowrap;
}
.xt-progress .xt-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 100px;
  background: var(--xt-primary-tint);
  overflow: hidden;
}
.xt-progress .xt-bar > i {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--xt-primary);
  border-radius: 100px;
  transition: width 0.25s ease;
}
.xt-card-body {
  padding: 30px 36px 34px;
}

/* ============ STEP / PERGUNTA ============ */
.xt-step {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 20px;
  position: relative;
  padding-bottom: 30px;
}
.xt-step:last-of-type {
  padding-bottom: 6px;
}
.xt-marker {
  position: relative;
  display: flex;
  justify-content: center;
}
.xt-step:not(:last-of-type) .xt-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 36px;
  bottom: -30px;
  width: 2px;
  background: var(--xt-line);
  z-index: 0;
}
.xt-badge {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--xt-surface);
  color: var(--xt-primary);
  border: 2px solid var(--xt-primary-ln);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.xt-step.is-active .xt-badge {
  background: var(--xt-primary);
  border-color: var(--xt-primary);
  color: #fff;
  box-shadow: 0 0 0 5px var(--xt-primary-tint);
}
/* "concluído" (verde) tem precedência sobre "ativo" — um passo preenchido fica
   verde mesmo sendo o foco atual (vem depois para vencer no cascata). */
.xt-step.is-done .xt-badge {
  background: var(--xt-success);
  border-color: var(--xt-success);
  color: #fff;
  box-shadow: none;
}

.xt-step-body {
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.xt-step.xt-trocando .xt-step-body {
  opacity: 0.2;
  transform: translateY(4px);
}

/* passo desabilitado — identificador/documento antes de escolher o tipo */
.xt-step.is-disabled {
  opacity: 0.6;
}
.xt-step.is-disabled .xt-badge {
  background: var(--xt-surface);
  border-color: var(--xt-border);
  color: var(--xt-muted);
}
.xt-step.is-disabled .input-icon i {
  color: var(--xt-muted);
}
.xt-card .br-input input:disabled {
  background: #f3f4f6;
  color: var(--xt-muted);
  cursor: not-allowed;
}
.xt-eyebrow {
  display: block;
  font-family: "Rawline", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xt-muted);
  margin: 0 0 4px;
}
.xt-q {
  display: block;
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--xt-ink);
  margin: 0 0 12px;
  padding: 0;
}
.xt-step.is-active .xt-q {
  font-size: 1.5rem;
}
.xt-control {
  margin-top: 2px;
}

/* painel de ênfase no passo ativo */
.xt-step.is-active .xt-step-body {
  background: linear-gradient(180deg, var(--xt-primary-tint), #f4f8ff);
  border: 1px solid var(--xt-primary-ln);
  border-left: 4px solid var(--xt-primary);
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-top: -4px;
  transition: background 0.2s ease, opacity 0.16s ease, transform 0.16s ease;
}
.xt-step.is-active .xt-eyebrow {
  color: var(--xt-primary-dk);
}

.xt-help {
  font-size: 0.84rem;
  color: var(--xt-muted);
  margin: 8px 0 0;
  display: flex;
  gap: 7px;
  align-items: center;
}
.xt-help i {
  color: var(--xt-primary);
  font-size: 0.8rem;
}
.xt-help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--xt-muted);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
.xt-help-link i {
  color: var(--xt-primary);
  font-size: 0.76rem;
}
.xt-help-link:hover {
  color: var(--xt-primary-dk);
  text-decoration: underline;
}
.xt-help-link:focus-visible {
  outline: 2px solid var(--xt-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ overrides de componentes gov.br (escopados ao card) ============ */
.xt-card .br-input input {
  font-family: "Raleway", sans-serif;
  font-size: 1.2rem;
}
/* O input do gov.br tem margin-top de --spacing-scale-half (4px); o .input-icon
   (absoluto) fica no topo do grupo, ~4px acima do texto. Descemos o ícone o
   mesmo tanto para centralizar com o número digitado. */
/* Ícone num slot de largura fixa (glifo centralizado) — assim o espaço até o
   número fica uniforme independentemente da largura do ícone (id-card é largo,
   fingerprint é estreito). top compensa o margin-top de 4px do input. */
.xt-card .br-input .input-icon {
  top: var(--spacing-scale-half, 4px);
  width: 1.5rem;
  justify-content: center;
}
.xt-card .br-input .input-icon i {
  color: var(--xt-primary);
  font-size: 1.15rem;
}
.xt-card .br-input .input-icon + input {
  /* margin-left do ícone (12px) + slot (24px) + respiro (8px) */
  padding-left: 2.75rem;
}
.xt-card .br-input label {
  font-weight: 600;
  color: var(--xt-ink-soft);
}
.xt-step.is-active .br-input input {
  background: #fff;
}
.xt-card .br-checkbox label {
  font-weight: 600;
  color: var(--xt-ink-soft);
}

/* ============ tiles selecionáveis (radios) ============ */
.xt-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.xt-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  background: var(--xt-surface);
  border: 2px solid var(--xt-border);
  border-radius: var(--xt-r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.xt-tile:hover {
  border-color: var(--xt-primary-ln);
}
.xt-tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.xt-tile .xt-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--xt-bg);
  color: var(--xt-muted);
  font-size: 1.25rem;
  transition: 0.15s;
}
.xt-tile .xt-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.xt-tile .xt-txt strong {
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--xt-ink);
}
.xt-tile .xt-txt small {
  font-size: 0.85rem;
  color: var(--xt-muted);
}
.xt-tile:has(input:checked) {
  border-color: var(--xt-primary);
  background: var(--xt-primary-tint);
  box-shadow: inset 0 0 0 1px var(--xt-primary);
}
.xt-tile:has(input:checked) .xt-ico {
  background: var(--xt-primary);
  color: #fff;
}
.xt-tile:has(input:focus-visible) {
  outline: 3px solid var(--xt-primary);
  outline-offset: 2px;
}

/* ============ exercício: input + checkbox ============ */
.xt-exer-grid {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.xt-exer-grid .br-input {
  flex: 1 1 200px;
  min-width: 160px;
}
.xt-toggle-wrap {
  flex: 1 1 220px;
  padding-bottom: 4px;
}

.xt-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--xt-warning-bg);
  border: 1px solid #f3e2a8;
  border-left: 4px solid var(--xt-warning-bd);
  border-radius: 10px;
  padding: 11px 14px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: #6b5800;
}
.xt-note i {
  color: #9a7d00;
  margin-top: 2px;
}

/* ============ Filtros (opcional) — barrinha segmented + ano inline (f03) ============ */
.xtf-bar {
  margin-top: 14px;
  padding: 14px 16px 16px;
  background: #f5f6f8;
  border: 1px solid var(--xt-line);
  border-radius: 14px;
}
.xtf-bar-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 12px;
}
.xtf-bar-title {
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-muted);
  margin: 0;
}
.xtf-bar-title i { margin-right: 5px; color: var(--xt-muted); }
.xtf-bar-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--xt-success);
}
.xtf-bar-tag i { font-size: 0.75rem; }

/* Mobile-first: empilhado e limpo (sem divisor); vira inline via container query. */
.xtf-bar-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.xtf-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.xtf-flabel {
  display: block;
  font-family: "Rawline", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xt-muted);
  margin: 0 0 6px;
  padding: 0;
}

/* Tipo de extrato — botões grandes e claros no mobile; segmented compacto no desktop */
.xtf-seg {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
}
/* cada botão no máx. 240px e o grupo alinhado à esquerda (não estica) */
.xtf-seg-opt { position: relative; display: flex; cursor: pointer; flex: 0 1 240px; min-width: 0; }
.xtf-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xtf-seg-opt > span {
  display: inline-flex;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 16px;
  border: 2px solid var(--xt-border);
  border-radius: 10px;
  background: #fff;
  font-family: "Rawline", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--xt-ink-soft);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.xtf-seg-opt > span i { font-size: 0.95rem; color: var(--xt-muted); }
.xtf-seg-opt:hover > span { border-color: var(--xt-primary-ln); }
.xtf-seg-opt:has(input:checked) > span {
  background: var(--xt-primary-tint);
  border-color: var(--xt-primary);
  color: var(--xt-primary-dk);
  box-shadow: inset 0 0 0 1px var(--xt-primary);
}
.xtf-seg-opt:has(input:checked) > span i { color: var(--xt-primary); }
.xtf-seg-opt:has(input:focus-visible) > span {
  outline: 3px solid var(--xt-primary);
  outline-offset: 2px;
}

.xtf-ano-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.xtf-ano-input { position: relative; display: inline-flex; align-items: center; }
.xtf-ano-input i {
  position: absolute;
  left: 11px;
  color: var(--xt-primary);
  font-size: 0.92rem;
  pointer-events: none;
}
.xtf-ano-input input {
  width: 120px;
  height: 44px;
  padding: 0 12px 0 32px;
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--xt-ink);
  background: #fff;
  border: 1px solid var(--xt-border);
  border-radius: 9px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.xtf-ano-input input:focus {
  outline: none;
  border-color: var(--xt-primary);
  box-shadow: 0 0 0 3px var(--xt-primary-tint);
}
.xtf-ano-input input:disabled {
  background: #eef0f3;
  color: var(--xt-muted);
  cursor: not-allowed;
}
.xtf-ano-input input.is-invalid {
  border-color: var(--feedback-danger-vivid-50, #e52207);
}
.xtf-ano-input:has(input:disabled) i { color: var(--xt-muted); }

.xtf-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--xt-ink-soft);
}
.xtf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xtf-check-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--xt-border);
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
  color: #fff;
  transition: 0.15s;
}
.xtf-check-box i { font-size: 0.66rem; opacity: 0; transform: scale(0.6); transition: 0.15s; }
.xtf-check:hover .xtf-check-box { border-color: var(--xt-primary-ln); }
.xtf-check:has(input:checked) .xtf-check-box {
  background: var(--xt-primary);
  border-color: var(--xt-primary);
}
.xtf-check:has(input:checked) .xtf-check-box i { opacity: 1; transform: none; }
.xtf-check:has(input:focus-visible) .xtf-check-box {
  outline: 3px solid var(--xt-primary);
  outline-offset: 2px;
}

/* Botões grandes e claros em TODAS as larguras (decisão de UX): no mobile
   empilham, no desktop ficam lado a lado. Tipo e ano sempre empilhados,
   sem divisor — sem o segmented compacto. */

/* ============ erros de validação (JS) ============ */
.xt-erro {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--feedback-danger-vivid-50, #e52207);
}
.xt-card .br-input input.is-invalid,
.xt-card input.is-invalid {
  border-color: var(--feedback-danger-vivid-50, #e52207);
}

/* ============ ação ============ */
.xt-actions {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--xt-line);
}
.xt-actions .br-button.primary {
  font-family: "Rawline", sans-serif;
  font-weight: 700;
  height: 50px;
  font-size: 1rem;
}
.xt-actions .br-button.primary i {
  margin-right: 8px;
}
.xt-reassure {
  text-align: center;
  font-size: 0.82rem;
  color: var(--xt-muted);
  margin: 14px 0 0;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}
.xt-reassure i {
  color: var(--xt-success);
}

.xt-turnstile {
  margin-top: 20px;
}

/* leitor de tela */
.xt-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ responsivo ============ */
@media (max-width: 560px) {
  .xt-card-head {
    padding: 20px 20px 18px;
    flex-direction: column;
  }
  .xt-progress {
    text-align: left;
    width: 100%;
    min-width: 0;
  }
  .xt-progress .xt-bar {
    max-width: 180px;
  }
  .xt-card-body {
    padding: 24px 18px 26px;
  }
  .xt-step {
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
  }
  .xt-step:not(:last-of-type) .xt-marker::after {
    top: 32px;
  }
  .xt-badge {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
  .xt-q {
    font-size: 1.18rem;
  }
  .xt-step.is-active .xt-q {
    font-size: 1.3rem;
  }
  .xt-step.is-active .xt-step-body {
    padding: 15px 15px 17px;
  }
  .xt-tiles {
    grid-template-columns: 1fr;
  }
  .xt-exer-grid {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xt-scope * {
    transition: none !important;
  }
}