/* ═══ ESTILO DA RESPOSTA DO FAQ — FONTE ÚNICA ═══════════════════════════════
   As respostas do FAQ são HTML nosso, com DESENHOS EM SVG feitos à mão (os containers
   em perspectiva, o caminhão, a grua). Esses SVG não trazem cor: quem pinta são estas
   classes. Sem elas, `fill` cai no preto padrão e cada container vira um bloco preto
   sólido — foi exatamente o que apareceu no portal do cliente (Leandro, 14/09), onde o
   mesmo HTML era injetado sem a folha de estilo que só existia na página do site.

   ⚠️ ESTE ARQUIVO É A ÚNICA CÓPIA. É servido em `/faq/estilo.css` (o `/faq` inteiro é
   proxy para o app) e usado pelos DOIS lugares que mostram resposta de FAQ: a página
   pública do site e o portal do cliente. Copiar estas regras para uma terceira tela é
   como elas divergem — e a divergência aqui não dá erro, dá desenho errado e calado.

   ⚠️ AUTOSSUFICIENTE de propósito: declara as próprias variáveis. O portal tem outra
   paleta e não conhece `--verde-soft` nem `--linha`; depender das variáveis da página
   hospedeira faria o desenho mudar de cor conforme a tela.

   ⚠️ VALE PARA `.faq-resp` (portal) E `.faq-a` (site), para que o site possa usar este
   arquivo sem mexer no HTML que ele já gera. `:where()` mantém a especificidade em zero:
   qualquer regra da página hospedeira continua vencendo, então plugar isto no site não
   pode atropelar nada que já esteja lá. */

:where(.faq-resp, .faq-a){
  --f-ink:#1d2017; --f-ink-2:#565b53; --f-ink-3:#9aa094;
  --f-linha:#e6e5df; --f-card:#ffffff;
  --f-verde:#8DC63F; --f-verde-esc:#5F8A1E; --f-verde-soft:#F1F7E4; --f-verde-bd:#DCE9C4;
}

/* caixa do desenho */
:where(.faq-resp, .faq-a) .diagrama{background:var(--f-verde-soft);border:1px solid var(--f-verde-bd);
  border-radius:12px;padding:16px 14px 8px;margin:12px 0 14px}
:where(.faq-resp, .faq-a) .diagrama .desenho{width:100%;height:auto}
:where(.faq-resp, .faq-a) .dg-linha{margin-bottom:14px}
:where(.faq-resp, .faq-a) .dg-linha:last-child{margin-bottom:2px}
:where(.faq-resp, .faq-a) .dg-nome{font-size:13px;font-weight:700;color:var(--f-ink);margin-bottom:4px}
:where(.faq-resp, .faq-a) .dg-nome small{font-weight:500;color:var(--f-ink-2)}
:where(.faq-resp, .faq-a) .dg-hc .dg-nome small{color:var(--f-verde-esc);font-weight:600}
:where(.faq-resp, .faq-a) svg{display:block;overflow:visible;max-width:100%;height:auto}

/* as faces do container — é isto que faltava, e é por isto que tudo saía preto */
:where(.faq-resp, .faq-a) .f-topo{fill:#FAFAF7;stroke:#242424;stroke-width:1.3;stroke-linejoin:round}
:where(.faq-resp, .faq-a) .f-lado{fill:#EFEEE9;stroke:#242424;stroke-width:1.3;stroke-linejoin:round}
:where(.faq-resp, .faq-a) .f-frente{fill:#FFF;stroke:#242424;stroke-width:1.5;stroke-linejoin:round}
:where(.faq-resp, .faq-a) .dg-hc .f-topo,:where(.faq-resp, .faq-a) .dg-hc .f-lado,:where(.faq-resp, .faq-a) .dg-hc .f-frente{stroke:#5F8A1E}
:where(.faq-resp, .faq-a) .corr{stroke:var(--f-linha);stroke-width:1}
:where(.faq-resp, .faq-a) .dg-hc .corr{stroke:var(--f-verde-bd)}

/* cotas */
:where(.faq-resp, .faq-a) .cota{stroke:var(--f-ink-3);stroke-width:1}
:where(.faq-resp, .faq-a) .cota-tx{font-family:'Bricolage Grotesque',sans-serif;font-size:10px;
  fill:var(--f-ink-2);font-weight:600}
:where(.faq-resp, .faq-a) .cota-tx.hc{fill:#5F8A1E}

/* caminhão, carreta e grua */
:where(.faq-resp, .faq-a) .cabine{fill:#FFF;stroke:#242424;stroke-width:1.5;stroke-linejoin:round}
:where(.faq-resp, .faq-a) .vidro{fill:#EFEEE9;stroke:#242424;stroke-width:1}
:where(.faq-resp, .faq-a) .chassi{fill:#242424}
:where(.faq-resp, .faq-a) .roda{fill:#FFF;stroke:#242424;stroke-width:1.5}
:where(.faq-resp, .faq-a) .roda-c{fill:#242424}
:where(.faq-resp, .faq-a) .grua{stroke:#242424;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none}
:where(.faq-resp, .faq-a) .chao{stroke:var(--f-verde-bd);stroke-width:2}

/* observações e listas de conferência */
:where(.faq-resp, .faq-a) .dg-obs{font-size:12px;font-weight:600;margin-top:3px}
:where(.faq-resp, .faq-a) .dg-obs.ok{color:var(--f-verde-esc)}
:where(.faq-resp, .faq-a) .dg-obs.warn{color:#B45309}
:where(.faq-resp, .faq-a) .chk-lista{margin:12px 0 2px}
:where(.faq-resp, .faq-a) .chk{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--f-linha);
  font-size:13px;line-height:1.45;color:var(--f-ink-2)}
:where(.faq-resp, .faq-a) .chk:last-child{border-bottom:none}
:where(.faq-resp, .faq-a) .chk .ico{flex-shrink:0;width:22px;height:22px;margin-top:1px}
:where(.faq-resp, .faq-a) .chk .ico svg{width:22px;height:22px;stroke:var(--f-verde-esc);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:where(.faq-resp, .faq-a) .chk b{color:var(--f-ink)}

/* assinatura dentro do desenho */
:where(.faq-resp, .faq-a) .marca{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  fill:var(--f-verde);letter-spacing:1.5px;paint-order:stroke;stroke:#FFF;stroke-width:3;
  stroke-linejoin:round}
:where(.faq-resp, .faq-a) .dg-credito{display:flex;align-items:center;gap:6px;justify-content:center;
  border-top:1px solid var(--f-verde-bd);margin-top:12px;padding-top:9px;font-size:11px;
  font-weight:600;color:var(--f-verde-esc);letter-spacing:.3px}
:where(.faq-resp, .faq-a) .dg-credito b{font-weight:800}

/* tabelas de medida */
:where(.faq-resp, .faq-a) table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
:where(.faq-resp, .faq-a) th{text-align:left;font-weight:700;color:var(--f-ink);padding:7px 6px;
  border-bottom:2px solid var(--f-linha)}
:where(.faq-resp, .faq-a) td{padding:7px 6px;border-bottom:1px solid var(--f-linha);color:var(--f-ink-2)}
:where(.faq-resp, .faq-a) td:first-child{font-weight:700;color:var(--f-ink);white-space:nowrap}