/* Central de Ajuda 4Keyless. Paleta da landpage (brand, teal, ink). Gerado com
   scripts/ajuda/gerar.mjs; este arquivo é a fonte (scripts/ajuda/assets/). */
:root {
  --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-500: #2563eb; --brand-600: #1d4ed8; --brand-700: #1e40af;
  --teal-50: #f0fdfa; --teal-500: #14b8a6; --teal-600: #0d9488;
  --ink-900: #0f172a; --ink-800: #1e293b; --ink-700: #334155; --ink-600: #475569;
  --ink-400: #94a3b8; --ink-200: #e2e8f0; --ink-100: #f1f5f9; --ink-50: #f8fafc;
  --ambar-50: #fffbeb; --ambar-500: #d97706;
  --raio: 10px;
  --largura-texto: 46rem;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 5rem; }
body { margin: 0; background: #fff; color: var(--ink-900); font: 16px/1.65 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-600); text-underline-offset: 2px; }
a:hover { color: var(--brand-700); }
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pular { position: absolute; left: -999px; top: 0; background: var(--ink-900); color: #fff; padding: .5rem 1rem; z-index: 100; }
.pular:focus { left: 1rem; }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ink-200); }
.topo-dentro { max-width: 80rem; margin: 0 auto; padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink-900); flex-shrink: 0; }
.marca-nome { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.marca-nome span { color: var(--brand-500); }
.marca-ajuda { font-size: .9rem; color: var(--ink-600); padding-left: .6rem; border-left: 1px solid var(--ink-200); }
.busca { position: relative; flex: 1; max-width: 30rem; }
.busca input { width: 100%; font: inherit; font-size: .95rem; padding: .55rem .9rem .55rem 2.3rem; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--ink-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394A3B8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .85rem center; }
.busca input:focus { outline: 2px solid var(--brand-100); border-color: var(--brand-500); background-color: #fff; }
.busca-resultados { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--raio); box-shadow: 0 12px 32px rgba(15,23,42,.12); max-height: 70vh; overflow: auto; }
.busca-resultados a { display: block; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--ink-900); }
.busca-resultados a:hover, .busca-resultados a[aria-selected="true"] { background: var(--brand-50); }
.busca-resultados small { display: block; color: var(--ink-600); font-size: .82rem; }
.busca-resultados .vazio { padding: .7rem; color: var(--ink-600); font-size: .9rem; }
.topo-links { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; font-size: .9rem; }
.topo-links a { color: var(--ink-600); text-decoration: none; }
.topo-links a:hover { color: var(--ink-900); }
.botao { display: inline-flex; align-items: center; gap: .4rem; background: var(--brand-500); color: #fff !important; font-weight: 600; font-size: .9rem; padding: .5rem 1rem; border-radius: 8px; text-decoration: none; }
.botao:hover { background: var(--brand-600); }

.aviso-idioma { background: var(--ambar-50); border-bottom: 1px solid #fde68a; color: #92400e; text-align: center; padding: .55rem 1.5rem; font-size: .9rem; }

/* miolo */
.miolo { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
.lateral { padding: 2rem 0; position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 4rem); overflow: auto; font-size: .9rem; }
.lateral-det > summary { display: none; }
.lateral-nav details { margin-bottom: .6rem; }
.lateral-nav summary { cursor: pointer; font-weight: 600; color: var(--ink-900); padding: .25rem 0; list-style: none; }
.lateral-nav summary::-webkit-details-marker { display: none; }
.lateral-nav summary a { color: inherit; text-decoration: none; }
.lateral-nav ul { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .75rem; border-left: 1px solid var(--ink-200); }
.lateral-nav li a { display: block; padding: .28rem .6rem; color: var(--ink-600); text-decoration: none; border-radius: 6px; line-height: 1.4; }
.lateral-nav li a:hover { color: var(--ink-900); background: var(--ink-50); }
.lateral-nav li a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); font-weight: 600; }

main { padding: 2rem 0 4rem; min-width: 0; }
.migalhas { font-size: .85rem; color: var(--ink-400); display: flex; gap: .45rem; margin-bottom: 1rem; }
.migalhas a { color: var(--ink-600); text-decoration: none; }
.migalhas a:hover { color: var(--brand-600); }
h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .6rem; font-weight: 800; }
.artigo-resumo { font-size: 1.1rem; color: var(--ink-600); margin: 0 0 1.25rem; max-width: var(--largura-texto); }
.artigo-topo { border-bottom: 1px solid var(--ink-200); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.botao-painel { margin-top: .25rem; }

.indice { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--raio); padding: .9rem 1.2rem; margin-bottom: 2rem; max-width: var(--largura-texto); }
.indice ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.indice li { margin: .15rem 0; }

.artigo-corpo { max-width: var(--largura-texto); }
.artigo-corpo h2 { font-size: 1.4rem; letter-spacing: -.01em; margin: 2.4rem 0 .8rem; }
.artigo-corpo h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.artigo-corpo p, .artigo-corpo li { color: var(--ink-800); }
.artigo-corpo ol, .artigo-corpo ul { padding-left: 1.4rem; }
.artigo-corpo li { margin: .35rem 0; }
.artigo-corpo ol > li::marker { font-weight: 700; color: var(--brand-600); }
.artigo-corpo code { font: .88em ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--ink-100); padding: .1em .35em; border-radius: 4px; }
.artigo-corpo pre { background: var(--ink-900); color: #e2e8f0; padding: 1rem 1.2rem; border-radius: var(--raio); overflow: auto; font-size: .88rem; line-height: 1.55; }
.artigo-corpo pre code { background: none; padding: 0; color: inherit; }
.tabela { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--ink-200); border-radius: var(--raio); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--ink-200); vertical-align: top; }
th { background: var(--ink-50); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

.callout { border-radius: var(--raio); padding: .9rem 1.1rem; margin: 1.3rem 0; border: 1px solid; }
.callout p { margin: 0; display: inline; }
.callout-titulo { margin-right: .35rem; }
.callout-dica, .callout-nota { background: var(--teal-50); border-color: #99f6e4; }
.callout-dica .callout-titulo { color: var(--teal-600); }
.callout-atencao { background: var(--ambar-50); border-color: #fde68a; }
.callout-atencao .callout-titulo { color: var(--ambar-500); }
.callout-importante { background: var(--brand-50); border-color: var(--brand-100); }
.callout-importante .callout-titulo { color: var(--brand-700); }

.print { margin: 1.4rem 0; }
.print-pendente { display: none; }
.print img { display: block; border: 1px solid var(--ink-200); border-radius: var(--raio); box-shadow: 0 6px 20px rgba(15,23,42,.06); }

.relacionados { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-200); max-width: var(--largura-texto); }
.relacionados h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.relacionados ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.relacionados a { font-weight: 600; text-decoration: none; }
.relacionados span { display: block; font-size: .88rem; color: var(--ink-600); }

/* início e seção */
.inicio h1 { font-size: 2.4rem; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.cartao { border: 1px solid var(--ink-200); border-radius: 14px; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.cartao:hover { border-color: var(--brand-100); box-shadow: 0 8px 24px rgba(37,99,235,.07); }
.cartao h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
.cartao h2 a { color: var(--ink-900); text-decoration: none; }
.cartao > p { color: var(--ink-600); font-size: .92rem; margin: 0 0 .8rem; }
.cartao ul { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .92rem; }
.cartao li { padding: .2rem 0; }
.cartao li a { text-decoration: none; }
.cartao-todos { margin-top: auto; font-size: .85rem; font-weight: 600; text-decoration: none; }
.lista-artigos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; max-width: var(--largura-texto); }
.lista-artigos a { display: block; border: 1px solid var(--ink-200); border-radius: var(--raio); padding: .9rem 1.1rem; text-decoration: none; color: var(--ink-900); }
.lista-artigos a:hover { border-color: var(--brand-500); }
.lista-artigos span { display: block; color: var(--ink-600); font-size: .9rem; margin-top: .15rem; }

.rodape { border-top: 1px solid var(--ink-200); background: var(--ink-50); font-size: .88rem; color: var(--ink-600); }
.rodape-dentro { max-width: 80rem; margin: 0 auto; padding: 1.8rem 1.5rem; display: grid; gap: .6rem; }
.rodape p { margin: 0; }
.idiomas { display: flex; gap: 1rem; }
.idiomas a { color: var(--ink-600); text-decoration: none; }
.idiomas a[aria-current="true"] { color: var(--ink-900); font-weight: 600; }
.rodape-direitos { color: var(--ink-400); }

@media (max-width: 900px) {
  .miolo { grid-template-columns: 1fr; gap: 0; padding: 0 1rem; }
  .lateral { position: static; max-height: none; padding: 1rem 0 0; }
  .lateral-det > summary { display: block; cursor: pointer; font-weight: 600; padding: .6rem .9rem; border: 1px solid var(--ink-200); border-radius: var(--raio); background: var(--ink-50); }
  .lateral-det[open] > summary { margin-bottom: .8rem; }
  .topo-dentro { flex-wrap: wrap; gap: .7rem 1rem; padding: .7rem 1rem; }
  .busca { order: 3; flex-basis: 100%; max-width: none; }
  .topo-links a:not(.botao) { display: none; }
  .marca-ajuda { display: none; }
  h1, .inicio h1 { font-size: 1.65rem; }
  main { padding-top: 1.2rem; }
}
@media print {
  .topo, .lateral, .rodape, .busca, .botao-painel, .aviso-idioma { display: none !important; }
  .miolo { display: block; }
}