/* ==========================================================================
   COMPOSIÇÃO DA PÁGINA
   --------------------------------------------------------------------------
   Cabeçalho e busca, coluna única, navegação horizontal, linha de registro,
   anatomia do registro e o responsivo. Uma composição só: listas em vez de
   cartões, hierarquia dada pela tipografia e por fios finos.
   ========================================================================== */
/* ==========================================================================
   db.html — CAMADA ÚNICA DE APRESENTAÇÃO
   Uma composição só: coluna centrada, navegação horizontal, listas em vez de
   cartões, hierarquia dada pela tipografia e por fios finos. Não há painel
   lateral, não há indicadores decorativos: o que ocupa espaço é conteúdo.
   ========================================================================== */
:root{
  --wrap:880px;             /* medida única de composição e de leitura */
  --h-top:56px;             /* única barra fixa */
  --chrome:56px;
  --pad:clamp(20px,4vw,30px);
  --tc:var(--text-3);       /* cor semântica do registro corrente */
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text)}
button{font:inherit;color:inherit}
::selection{background:rgba(0,113,227,.15)}

/* cor semântica por tipo — usada só como ponto de orientação, nunca como bloco */
[data-t="problema"]     {--tc:#d70015}
[data-t="evidencia"]    {--tc:#c25e00}
[data-t="verificacao"]  {--tc:#0071e3}
[data-t="componente"]   {--tc:#c2410c}
[data-t="procedimento"] {--tc:#1a7f37}
[data-t="configuracao"] {--tc:#0a7ea4}
[data-t="validacao"]    {--tc:#0d8a6a}
[data-t="prevencao"]    {--tc:#4d7c0f}
[data-t="metodo"]       {--tc:#5b6b7c}
[data-t="orientacao"]   {--tc:#7d3cc0}
[data-t="referencia"]   {--tc:#6b7280}
[data-t="sinal"]        {--tc:#8a6d00}
[data-t="trilha"]       {--tc:#a21caf}

/* ==========================================================================
   1. CABEÇALHO — marca e busca, nada mais
   ========================================================================== */
/* atalho de teclado: primeiro foco da página pula a barra fixa e vai ao
   conteúdo. Fica fora da tela até receber foco — nunca ocupa espaço visual. */
.skip{
  position:fixed;top:8px;left:8px;z-index:300;transform:translateY(-160%);
  padding:9px 15px;border-radius:9px;border:1px solid var(--blue);
  background:var(--surface);color:var(--blue-2);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-hover);transition:transform .16s;
}
.skip:focus{transform:translateY(0)}
#conteudo:focus{outline:none}
#conteudo:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.tb{
  position:fixed;top:0;left:0;right:0;height:var(--h-top);z-index:100;
  background:rgba(251,251,253,.82);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line);
}
.tb-in{
  height:var(--h-top);max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:22px;
}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0;border-radius:8px}
.brand:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.brand .bmark{
  width:24px;height:24px;border-radius:7px;background:var(--text);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand .bmark svg{width:14px;height:14px}
.brand .bname{font-size:14.5px;font-weight:600;letter-spacing:-0.018em;white-space:nowrap;color:var(--text)}
.brand .bname i{font-style:normal;color:var(--text-3);font-weight:400}

/* campo de busca — um só em toda a página */
.sbox{position:relative;flex:1 1 auto;max-width:400px;margin-left:auto}
.sfield{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 11px;
  background:var(--surface-2);border:1px solid transparent;border-radius:9px;
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.sbox.focus .sfield{background:var(--surface);border-color:rgba(0,113,227,.4);box-shadow:0 0 0 3px rgba(0,113,227,.09)}
.sfield .sico{width:15px;height:15px;color:var(--text-4);flex-shrink:0}
.sfield input{
  flex:1;min-width:0;border:none;background:none;outline:none;font:inherit;
  font-size:14px;letter-spacing:-0.01em;color:var(--text);
}
.sfield input::placeholder{color:var(--text-4)}
.skbd{font-family:var(--mono);font-size:10.5px;color:var(--text-4);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;flex-shrink:0}
.sbox.focus .skbd,.sbox.has .skbd{display:none}
.sclear{display:none;width:21px;height:21px;border:none;background:var(--line);border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:var(--text-2);flex-shrink:0;padding:0}
.sbox.has .sclear{display:flex}
.sclear svg{width:11px;height:11px}
.sclear:hover{background:var(--line-2);color:var(--text)}

/* sugestões — as mesmas linhas usadas em qualquer lista */
.sug{
  position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:110;display:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);overflow:hidden auto;max-height:min(68vh,480px);
  padding:4px 14px;
}
.sug.on{display:block}
.sug .item{padding:11px 0}
.sug .item .it-d{margin-top:3px;font-size:13px}
.sug .item .it-m{margin-top:5px}
.sug .item.sel{background:var(--surface-2)}
.sug .list{border-bottom:none}
.sug-all{
  display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:12px 0;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--blue);
}
.sug-all:hover,.sug-all.sel{color:var(--blue-2)}
.sug-none{padding:16px 0;font-size:14px;color:var(--text-3);line-height:1.55}

/* ==========================================================================
   2. PÁGINA — coluna única, sem painéis
   ========================================================================== */
.page{max-width:var(--wrap);margin:0 auto;padding:calc(var(--chrome) + 30px) var(--pad) 90px}
.view{display:none}
.view.on{display:block}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:24px;
  font-size:12.5px;color:var(--text-3);letter-spacing:-0.006em;
}
.crumb:empty{display:none}
.crumb a{color:var(--text-2)}
.crumb a:hover{color:var(--blue)}
.crumb .sep{color:var(--text-4)}
.crumb b{font-weight:500;color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .back{
  margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:none;background:none;
  cursor:pointer;font-size:12.5px;color:var(--text-2);padding:3px 0;flex-shrink:0;
}
.crumb .back svg{width:13px;height:13px}
.crumb .back:hover{color:var(--blue)}

/* abertura da vista de lista */
.intro{margin-bottom:26px}
.intro .eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4);margin-bottom:11px}
.intro h1{font-size:clamp(23px,2.9vw,30px);font-weight:650;letter-spacing:-0.028em;line-height:1.18;text-wrap:balance}
.intro p{font-size:15.5px;line-height:1.6;color:var(--text-2);margin-top:12px;max-width:66ch;letter-spacing:-0.011em}

/* ---------- porta de entrada: as entradas curadas por sintoma ---------- */
.qk{margin-top:28px}
.qk-k{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);margin-bottom:12px}
/* Duas colunas: os 8 cartões fecham em 4 fileiras completas, sem sobra e sem
   cartão solto. `auto-fill` enchia a linha até onde coubesse e largava o
   resto numa fileira incompleta — com 8 cartões dava 3+3+2, e a última
   ficava com um vão do tamanho de um cartão. Aqui a divisão é declarada
   (--qkc), e não deduzida da largura disponível.

   Grid, e não flex: com `grid-template-columns` as duas colunas têm a mesma
   medida em todas as fileiras e os cartões de uma mesma fileira nascem com a
   mesma altura, que é o alinhamento que se espera de uma composição em
   tabela. O flex anterior servia para centralizar uma última fileira
   incompleta — caso que deixa de existir quando a divisão fecha certo. */
.qk-grid{
  --qkc:var(--qk-lg,2);--qkgap:10px;
  display:grid;grid-template-columns:repeat(var(--qkc),minmax(0,1fr));
  gap:var(--qkgap);align-items:stretch;
}
.qk-card{
  --qc:var(--text-4);
  min-width:0;display:flex;flex-direction:column;
  position:relative;padding:14px 16px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow);
  overflow:hidden;
}
/* uma coluna só quando duas deixariam o cartão estreito demais para os
   rótulos — abaixo de ~480px cada um ficaria com menos de 220px */
@media(max-width:480px){ .qk-grid{--qkc:1} }
.qk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--qc)}
.qk-h{display:flex;align-items:center;gap:9px;min-width:0}
.qk-ic{width:19px;height:19px;flex-shrink:0;color:var(--qc);display:flex}
.qk-ic svg{width:19px;height:19px}
.qk-t{font-size:14.5px;font-weight:650;letter-spacing:-0.016em;color:var(--text);line-height:1.3}
.qk-src{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);margin:6px 0 0}
.qk-l{list-style:none;margin:10px 0 0;padding:0}
.qk-l li + li{margin-top:1px}
.qk-l a{
  display:block;padding:5px 0;font-size:14px;line-height:1.45;
  color:var(--text-2);letter-spacing:-0.009em;
}
.qk-l a::before{content:"→";color:var(--qc);margin-right:8px;font-size:12px}
.qk-l a:hover{color:var(--blue-2)}
.qk-f{font-size:13.5px;line-height:1.6;color:var(--text-3);margin-top:14px;max-width:66ch;letter-spacing:-0.008em}

/* ==========================================================================
   3. NAVEGAÇÃO — horizontal, no fluxo da página
   ========================================================================== */
.browse{border-top:1px solid var(--line);padding:16px 0 4px}
.bmain{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:10px}
.brow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px 12px;padding:2px 0}
.bk{
  flex:0 0 76px;padding-top:7px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-4);
}
.bls{flex:1 1 240px;display:flex;flex-wrap:wrap;gap:2px;min-width:0}
.bl{
  display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:7px;
  font-size:13.5px;line-height:1.35;color:var(--text-2);cursor:pointer;
  transition:background .13s,color .13s;
}
.bl:hover{background:var(--surface-2);color:var(--text)}
.bl.sel{background:var(--surface-2);color:var(--text);font-weight:600}
.bl .dot{width:6px;height:6px;border-radius:50%;background:var(--tc);flex-shrink:0}
.bls .bl{font-size:13px;padding:5px 9px;color:var(--text-3)}
.bls .bl:hover{color:var(--text)}
.bls .bl.sel{color:var(--text)}

.brefine{display:none}
.browse.open .brefine{display:block}
.bmore{
  display:inline-block;margin:8px 0 2px;padding:4px 0;border:none;background:none;cursor:pointer;
  font-size:12.5px;color:var(--blue);
}
.bmore:hover{text-decoration:underline}

.tools{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);min-height:46px}
.tools .clr{font-size:13px;color:var(--blue);cursor:pointer;background:none;border:none;padding:0}
.tools .clr:hover{text-decoration:underline}
.tools .sort{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-4)}
.tools select{
  font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);background:none;
  border:none;cursor:pointer;padding:2px 0;letter-spacing:-0.008em;
}
.tools select:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ==========================================================================
   4. LINHA DE REGISTRO — o único componente de listagem do sistema
   Vale para catálogo, resultados de busca, sugestões e correlatos.
   ========================================================================== */
.list{border-bottom:1px solid var(--line)}
.item{
  display:block;padding:15px 12px;margin:0 -12px;border-top:1px solid var(--line);
  color:inherit;transition:background .13s;
}
.list > .item:first-child{border-top:none}
.item:hover{background:var(--surface-2)}
.item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px}
.item .it-t{
  display:block;font-size:15.5px;font-weight:600;letter-spacing:-0.016em;line-height:1.35;
  color:var(--text);overflow-wrap:anywhere;
}
.item:hover .it-t{color:var(--blue-2)}
.item .it-c{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--text-4);margin-right:9px;letter-spacing:0}
.item .it-d{
  display:block;font-size:14px;line-height:1.55;color:var(--text-2);margin-top:4px;
  letter-spacing:-0.008em;overflow-wrap:anywhere;
}
.item .it-d mark{background:rgba(255,204,0,.4)}
.item .it-m{display:block;margin-top:7px;font-size:12px;line-height:1.5;color:var(--text-4);letter-spacing:-0.004em}
.it-m .dot,.kicker .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tc);
  margin-right:8px;vertical-align:1px;
}
.sp{color:var(--line-2);margin:0 2px}
.g-crit{color:var(--crit)}
.g-alta{color:var(--alta)}
.g-media{color:var(--media)}
.g-baixa{color:var(--baixa)}

/* listas longas: o mesmo corte e o mesmo botão em qualquer campo */
.list.capped > .item:nth-child(n+11){display:none}
.list.capped.open > .item{display:block}

.more{
  display:inline-block;margin-top:15px;padding:5px 0;border:none;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--blue);
}
.more:hover{text-decoration:underline}

.empty{padding:44px 0 36px;border-top:1px solid var(--line)}
.empty h3{font-size:17px;font-weight:650;letter-spacing:-0.02em}
.empty p{font-size:14.5px;color:var(--text-3);margin-top:8px;line-height:1.6;max-width:56ch}
.empty .list{margin-top:14px;margin-bottom:4px}
.empty-alt{margin-top:18px!important}
.empty-alt b{color:var(--text-2);font-weight:600}
.empty-alt a{color:var(--blue-2)}
.empty-alt a:hover{text-decoration:underline}

/* por que o resultado casou — discreto, na mesma linha de metadados */
.it-m .why{color:var(--text-3)}
.it-m .why-p{color:var(--alta)}

/* ==========================================================================
   5. REGISTRO — a mesma anatomia para todo e qualquer conteúdo
   ========================================================================== */
.rec{min-width:0}
.rec .kicker{
  display:block;margin-bottom:12px;line-height:1.6;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);
}
.rec .kicker a{color:var(--text-4)}
.rec .kicker a:hover{color:var(--blue)}
.rec h1{
  font-size:clamp(23px,3vw,31px);font-weight:650;letter-spacing:-0.028em;line-height:1.18;
  text-wrap:balance;overflow-wrap:anywhere;
}
.rec h1 .hc{
  display:block;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text-4);
  letter-spacing:0;margin-bottom:9px;text-transform:none;
}
.rec .lede{font-size:16.5px;line-height:1.55;color:var(--text-2);margin-top:13px;max-width:64ch;letter-spacing:-0.013em;overflow-wrap:anywhere}
.ident{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-3);line-height:1.75;overflow-wrap:anywhere;
}
.ident span{display:inline;margin-right:24px}
.ident b{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4);white-space:nowrap;margin-right:7px}
.ident code{font-family:var(--mono);font-size:11.5px;color:var(--text-2);overflow-wrap:anywhere}
.ident a{color:var(--text-2)}
.ident a:hover{color:var(--blue)}

.sec{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--chrome) + 16px)}
.sec > h2{font-size:17px;font-weight:650;letter-spacing:-0.021em;line-height:1.3;margin-bottom:14px}
.subh{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-4);margin:24px 0 8px}
.sec > h2 + .subh{margin-top:0}
.sec > h2 + .list,.sec > h2 + .inl,.sec > h2 + .doc{margin-top:0}

/* listas de referência em linha: densas, legíveis, sem virar etiquetas */
.inl{font-size:14px;line-height:1.85;color:var(--text-3);margin:0 0 6px;overflow-wrap:anywhere}
.inl a{color:var(--blue-2)}
.inl a:hover{text-decoration:underline}
.inl a.mn{font-family:var(--mono);font-size:12.5px;letter-spacing:0}

/* conteúdo técnico: mesma coluna, sem caixa em volta */
.doc{margin-top:4px;overflow:hidden}
.rec .card-body,.doc .card-body{display:block;padding:0;border-top:none}

/* contenção de largura — a mesma regra para todo bloco de conteúdo do registro */
.rec h1,.rec .lede{overflow-wrap:anywhere}
.rec .card-body pre.mono,.rec .card-body .mdtw,.rec .card-body .codewrap{max-width:100%}
.rec .card-body pre.mono{overflow-x:auto}
.rec .card-body table.mdt{min-width:0}
.rec .card-body .pathbox{max-width:100%}
.rec .card-body p,.rec .card-body li,.rec .card-body dd,.rec .card-body dt,
.rec .card-body td,.rec .card-body th{overflow-wrap:anywhere}
.rec .card-body svg{max-width:100%;height:auto}

/* ---------- percurso derivado do próprio documento ----------
   Estes blocos repetem, de propósito, um trecho que também está no conteúdo
   técnico: é ali que a decisão é tomada, e o leitor não deveria ter de
   percorrer um documento inteiro para achar o resultado esperado. Para que a
   repetição se leia como recorte, e não como descuido, cada bloco declara de
   onde veio e leva de volta ao ponto exato. */
.derb{margin:0 0 6px}
.derb + .derb{margin-top:14px}
.der-k{
  font-size:11.5px;color:var(--text-4);letter-spacing:-0.004em;
  padding-left:11px;border-left:2px solid var(--line-2);
}
.der-k .derback{color:var(--blue-2);cursor:pointer;font-weight:600}
.der-k a.derback:hover{text-decoration:underline}
.derb .card-body ul.bul{margin:6px 0 0}

/* ---------- próximo passo: rotas reais, nunca um beco ---------- */
.nx{font-size:14.5px;line-height:1.7;color:var(--text-2);margin:9px 0;letter-spacing:-0.008em;overflow-wrap:anywhere}
.nx .nx-k{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-4);margin-bottom:1px;
}
.nx a{color:var(--blue-2)}
.nx a:hover{text-decoration:underline}
.nx-end{
  margin-top:16px;padding:13px 15px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-s);font-size:14px;
}

/* ---------- fluxogramas desenhados a partir do código-fonte ---------- */
.fxwrap{margin:14px 0 6px}
.fxbox{
  overflow-x:auto;padding:16px 14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-s);
}
/* precisa vencer o `.rec .card-body svg{max-width:100%}` da contenção geral:
   aquela regra serve para ilustrações, que podem encolher. Um fluxograma que
   encolhe para caber na coluna fica com texto de 5px — ilegível justamente
   onde o leitor decide o caminho. Aqui ele mantém o tamanho natural e quem
   rola é a moldura. */
.card-body .fxbox > svg.fxsvg{display:block;margin:0 auto;max-width:none;width:auto;height:auto}
.fx-n{stroke-width:1.6px}
.fx-box{fill:var(--surface);stroke:var(--line-2)}
.fx-sub{fill:var(--surface);stroke:var(--text-4)}
.fx-dec{fill:var(--blue-tint);stroke:rgba(0,113,227,.45)}
.fx-term{fill:var(--baixa-bg);stroke:rgba(52,199,89,.5)}
.fx-t{
  font-family:var(--font);font-size:11.5px;fill:var(--text-2);
  text-anchor:middle;letter-spacing:-0.008em;
}
.fx-t1{font-weight:650;fill:var(--text)}
.fx-e{fill:none;stroke:var(--text-4);stroke-width:1.5px}
.fx-dash{stroke-dasharray:5 4}
.fx-ah{fill:var(--text-4)}
.fx-lb{fill:var(--bg);stroke:var(--line-2);stroke-width:1px}
.fx-lt{font-family:var(--font);font-size:10.5px;font-weight:600;fill:var(--text-3);text-anchor:middle}
.fx-g{fill:rgba(0,0,0,.022);stroke:var(--line-2);stroke-width:1.2px;stroke-dasharray:4 4}
.fx-gt{font-family:var(--font);font-size:10.5px;font-weight:700;fill:var(--text-4);letter-spacing:.05em;text-transform:uppercase}
.fxsrc{margin-top:10px}
.fxsrc > summary{
  cursor:pointer;font-size:12.5px;color:var(--text-3);padding:4px 0;
  list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.fxsrc > summary::-webkit-details-marker{display:none}
.fxsrc > summary::before{content:"▸";font-size:11px;color:var(--text-4);transition:transform .15s}
.fxsrc[open] > summary::before{content:"▾"}
.fxsrc > summary:hover{color:var(--blue)}
.fxsrc > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:5px}

/* ---------- rodapé ---------- */
.foot{
  max-width:var(--wrap);margin:0 auto;padding:22px var(--pad) 44px;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  font-size:12.5px;color:var(--text-4);
}
.foot .byline{margin-left:auto}

/* ==========================================================================
   6. RESPONSIVO — a mesma composição, do celular ao desktop
   ========================================================================== */
@media(max-width:640px){
  :root{--h-top:52px;--chrome:52px}
  .brand .bname{display:none}
  .sbox{max-width:none}
  .skbd{display:none}
  .page{padding-top:calc(var(--chrome) + 22px)}
  .bk{flex:0 0 100%;padding-top:10px}
  .bls{flex:1 1 100%}
  .bl{padding:5px 8px}
  .ident span{margin-right:16px}
  .card-body table.mdt{font-size:13.5px}
  .card-body table.mdt th,.card-body table.mdt td{padding:9px 11px}
  /* em tela estreita um comando longo quebra em vez de vazar: nada fica escondido */
  .rec .card-body code.mc{white-space:normal;word-break:break-word}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}