/* Checklist de documentos (/documentos). Usa os tokens e as classes de style.css. */

.documentos { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 104px); }

.impressao-topo { display: none; }

.documentos__aviso {
  max-width: 52rem; margin-bottom: 28px; padding: 14px 18px;
  border-left: 3px solid var(--ciano); border-radius: 4px 10px 10px 4px;
  background: #fff; font-size: .9375rem; color: var(--texto-2);
}
.documentos__aviso strong { color: var(--marinho); }
.documentos__aviso a { color: var(--indigo); font-weight: 600; text-underline-offset: 2px; }

/* ---------- Abas ---------- */

.abas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.abas[hidden] { display: none; }
.aba {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px 10px 18px;
  border: 1px solid var(--borda-campo); border-radius: 999px; background: #fff;
  font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--texto-2); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.aba .icone { width: 22px; height: 22px; }
.aba:hover { border-color: var(--indigo); color: var(--indigo); }
.aba[aria-selected="true"] { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.aba:focus-visible { outline-offset: 3px; border-radius: 999px; }
.aba__conta {
  min-width: 3.25em; padding: 3px 10px; border-radius: 999px; text-align: center;
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--fundo-2); color: var(--texto-3);
}
.aba__conta:empty { display: none; }
.aba[aria-selected="true"] .aba__conta { background: rgb(255 255 255 / 18%); color: #fff; }

/* ---------- Lista ---------- */

.lista[hidden] { display: none; }
/* painel da aba (tabindex=0 pelo JS): contorno afastado dos cartões, dentro da margem lateral */
.lista[role="tabpanel"]:focus-visible { outline-offset: 8px; border-radius: var(--raio); }
.lista + .lista { margin-top: clamp(56px, 7vw, 88px); }
.abas:not([hidden]) ~ .lista + .lista { margin-top: 0; }

.lista__topo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 20px 48px; align-items: end;
  margin-bottom: 8px;
}
.lista__intro h2 { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); letter-spacing: -.01em; }
.lista__intro p { margin-top: 12px; max-width: 42rem; color: var(--texto-2); }

.progresso {
  padding: 18px 20px 20px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
}
.progresso[hidden] { display: none; }
.progresso__texto { font-size: .9375rem; color: var(--texto-2); }
.progresso__texto strong { font-size: 1.375rem; font-weight: 600; color: var(--marinho); font-variant-numeric: tabular-nums; }
.progresso__barra { height: 6px; margin-top: 10px; border-radius: 3px; background: var(--fundo-2); overflow: hidden; }
.progresso__barra span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ciano); transition: width .25s; }
.progresso__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.progresso__acoes .botao { flex: 1 1 auto; min-height: 42px; padding: 9px 16px; font-size: .9375rem; }
.progresso__acoes .icone { width: 18px; height: 18px; }
.progresso__aviso {
  margin-top: 12px; padding: 8px 12px; border-radius: 8px;
  background: #fdf5e1; font-size: .875rem; line-height: 1.45; color: #6b4f00;
}
.progresso__status { font-size: .875rem; color: var(--texto-2); }
.progresso__status:not(:empty) { margin-top: 12px; }
.progresso__status button {
  margin-left: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 2px;
}

.etapa-docs {
  display: flex; align-items: center; gap: 12px;
  margin: 40px 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo);
}
.etapa-docs::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.docs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.doc {
  display: grid; grid-template-columns: 26px minmax(0, 5fr) minmax(0, 7fr); gap: 12px 24px; align-items: start;
  padding: 22px 26px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  transition: border-color .2s, background-color .2s;
}
.doc:has(.doc__marca:checked) { border-color: color-mix(in srgb, var(--indigo) 32%, white); background: color-mix(in srgb, var(--indigo) 3%, white); }

.doc__marca {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; margin: 0; flex: none; cursor: pointer;
  /* borda com contraste de 3,4:1 sobre o branco (WCAG 1.4.11); --borda-campo seria 1,5:1 */
  border: 2px solid var(--borda-entrada); border-radius: 7px; background: #fff center / 18px no-repeat;
  transition: border-color .15s, background-color .15s;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc__marca:hover { border-color: var(--indigo); }
.doc__marca:focus-visible { outline: 3px solid var(--anel-foco); outline-offset: 2px; }
.doc__marca:checked {
  border-color: var(--indigo); background-color: var(--indigo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.doc__nome { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--marinho); }
.doc__nome label { cursor: pointer; }
.doc__quando { margin-top: 10px; font-size: .9375rem; color: var(--texto-2); }

.selo {
  display: inline-block; margin: 0 6px 4px 0; padding: 3px 10px; border-radius: 999px; vertical-align: 1px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  max-width: 100%; /* inline-block: desce inteiro para a linha seguinte; só quebra se for mais largo que o cartão */
}
.selo--sempre  { background: color-mix(in srgb, var(--indigo) 10%, white); color: var(--indigo); }
.selo--duimp   { background: color-mix(in srgb, var(--ciano) 14%, white); color: #005f85; }
.selo--depende { background: #fdf5e1; color: #6b4f00; }

.doc__texto { display: grid; gap: 12px; font-size: 1rem; color: var(--texto-2); }
.doc__texto strong { color: var(--texto); }
.doc__texto a { color: var(--indigo); font-weight: 600; text-underline-offset: 2px; }
.doc__dica {
  padding: 10px 14px; border-left: 3px solid var(--ciano); border-radius: 2px 8px 8px 2px;
  background: var(--fundo-2); font-size: .9375rem;
}

.requisitos { padding: 14px 16px 16px; border: 1px solid var(--linha); border-radius: 10px; }
.requisitos__titulo { font-size: .9375rem; font-weight: 600; color: var(--marinho); }
.requisitos__lista {
  margin: 10px 0 0; padding-left: 1.6em; columns: 2; column-gap: 32px;
  font-size: .9375rem; line-height: 1.45;
}
.requisitos__lista li { break-inside: avoid; margin-bottom: 6px; padding-left: 2px; }
.requisitos__lista li::marker { font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }

/* ---------- Chamada e links relacionados ---------- */

.documentos__chamada { margin-top: clamp(48px, 6vw, 72px); }
.documentos__chamada h2 { font-size: 1.5rem; color: #fff; }

.relacionados { margin-top: 48px; }
.relacionados__titulo { font-size: 1.375rem; }
.relacionados__lista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.relacionado {
  display: flex; align-items: flex-start; gap: 14px; height: 100%;
  padding: 18px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  font-size: .9375rem; color: var(--texto-2); text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.relacionado:hover { border-color: color-mix(in srgb, var(--indigo) 30%, white); box-shadow: var(--sombra); }
.relacionado .icone {
  width: 40px; height: 40px; padding: 8px; border-radius: 10px;
  color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, white);
}
.relacionado strong { display: block; margin-bottom: 2px; font-size: 1.0625rem; font-weight: 600; color: var(--marinho); }

.documentos-fontes { padding-block: clamp(56px, 7vw, 88px); }
.documentos-fontes .texto-legal { padding-block: 0; }
.documentos-fontes h2 { font-size: 1.375rem; }

/* ---------- Responsivo ---------- */

@media (max-width: 1000px) {
  .lista__topo { grid-template-columns: 1fr; align-items: start; }
  .progresso { max-width: 32rem; }
  .relacionados__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .doc { grid-template-columns: 26px minmax(0, 1fr); padding: 20px 20px 22px; }
  .doc__texto { grid-column: 2; }
}

@media (max-width: 640px) {
  .requisitos__lista { columns: 1; }
  /* minmax(0, 1fr): a coluna não cresce até o conteúdo da aba; se não couber, o contador desce */
  .abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .abas[hidden] { display: none; }
  .aba { min-width: 0; flex-wrap: wrap; justify-content: center; gap: 2px 8px; min-height: 48px; padding: 8px 10px; font-size: 1rem; }
  .aba__nome { min-width: 0; overflow-wrap: anywhere; }
  .aba .icone { display: none; }
}

/* Tela estreita ou fonte padrão maior (em acompanha a fonte do navegador): nome em cima, contador embaixo */
@media (max-width: 23.5em) {
  .aba { flex-direction: column; padding: 8px 4px; border-radius: var(--raio); }
  .aba:focus-visible { border-radius: var(--raio); }
  .aba__conta { min-width: 0; padding: 1px 8px; }
}

@media (max-width: 560px) {
  .doc { gap: 10px 14px; padding: 18px 16px 20px; }
  .doc__texto { grid-column: 1 / -1; }
  .doc__nome { font-size: 1.125rem; }
  .relacionados__lista { grid-template-columns: 1fr; }
  .progresso__acoes .botao { flex-basis: 100%; }
}

/* ---------- Alto contraste (Windows): as cores do sistema substituem as da página ---------- */

@media (forced-colors: active) {
  /* a caixa personalizada perde o fundo e o sinal branco: volta a caixa nativa, desenhada pelo sistema */
  .doc__marca, .doc__marca:checked { appearance: auto; -webkit-appearance: auto; background-image: none; }
  .aba[aria-selected="true"] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
  .aba[aria-selected="true"] .aba__conta { forced-color-adjust: none; background: HighlightText; color: Highlight; }
  .progresso__barra { border: 1px solid CanvasText; }
  .progresso__barra span { forced-color-adjust: none; background: Highlight; }
  .selo, .progresso__aviso { border: 1px solid CanvasText; }
}

/* ---------- Impressão: só a lista, sem cabeçalho e rodapé do site ---------- */

@media print {
  @page { margin: 14mm 12mm; }

  body { font-size: 10pt; line-height: 1.4; color: #000; background: #fff; }
  .cabecalho, .rodape, .whatsapp-flutuante, .pular, .abas, .progresso__barra, .progresso__acoes, .progresso__status, .progresso__aviso,
  .pagina-topo .sobretitulo, .pagina-topo p, .documentos__chamada, .relacionados, .documentos-fontes { display: none !important; }

  .conteiner { width: auto; }
  .pagina-topo { background: none; color: #000; }
  .pagina-topo::after { display: none; }
  .pagina-topo .conteiner { padding: 0; }
  .pagina-topo h1 { margin: 0; max-width: none; font-size: 17pt; color: #000; }

  .documentos { padding: 0; background: none; }
  .impressao-topo { display: block; margin: 4pt 0 10pt; font-size: 8.5pt; color: #444; }
  .documentos__aviso { max-width: none; margin: 0 0 12pt; padding: 6pt 10pt; border-left-color: #999; background: none; font-size: 9pt; color: #222; }
  .documentos__aviso a { display: none; }

  .lista__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12pt; margin: 0; }
  .lista__intro h2 { font-size: 14pt; color: #000; }
  .lista__intro p { margin-top: 3pt; font-size: 9pt; color: #333; }
  .progresso { max-width: none; padding: 0; border: 0; flex: none; }
  .progresso__texto { font-size: 9pt; color: #333; white-space: nowrap; }
  .progresso__texto strong { font-size: 9pt; color: #000; }

  .etapa-docs { margin: 12pt 0 4pt; font-size: 8.5pt; color: #000; break-after: avoid; }
  .etapa-docs::after { background: #999; }

  .docs { gap: 0; }
  .doc {
    grid-template-columns: 14pt minmax(0, 5fr) minmax(0, 8fr); gap: 3pt 12pt;
    padding: 7pt 0; border: 0; border-bottom: .5pt solid #bbb; border-radius: 0; background: none !important;
    break-inside: avoid;
  }
  .doc:has(.doc__marca:checked) { border-color: #bbb; }
  /* a folha tem menos de 880px: desfaz o empilhamento do celular */
  .doc__cabeca { grid-column: 2; grid-row: 1; }
  .doc__texto { grid-column: 3; grid-row: 1; }
  .doc__marca { width: 12pt; height: 12pt; margin-top: 1pt; border: 1pt solid #000; border-radius: 2pt; background-size: 9pt; }
  .doc__marca:checked { border-color: #000; background-color: #000; }
  .doc__nome { font-size: 10.5pt; color: #000; }
  .doc__quando { margin-top: 3pt; font-size: 8.5pt; color: #333; }
  .selo { margin-right: 4pt; padding: 0 4pt; border: .5pt solid #777; background: none !important; font-size: 7pt; color: #000 !important; }
  .doc__texto { gap: 4pt; font-size: 8.5pt; color: #222; }
  .doc__texto strong { color: #000; }
  .doc__texto a { color: inherit; font-weight: inherit; text-decoration: none; }
  .doc__dica { padding: 0 0 0 6pt; border-left: 1.5pt solid #999; background: none; font-size: 8.5pt; }
  .requisitos { padding: 4pt 6pt; border-color: #bbb; }
  .requisitos__titulo { font-size: 8.5pt; color: #000; }
  .requisitos__lista { margin-top: 3pt; columns: 2; font-size: 8pt; column-gap: 14pt; }
  .requisitos__lista li { margin-bottom: 1pt; }
  .requisitos__lista li::marker { color: #000; }
}