:root {
  /* Paleta alinhada ao Dimensionador de Aquecedores (mesma marca DR Hidráulica —
     SPEC-alinhar-design-com-aquecedores.md). Hex direto, sem mais indireção via
     assets/design-system/tokens/*.css: este projeto agora tem paleta local própria. Os NOMES das
     variáveis abaixo continuam os mesmos já consumidos em cascata no resto deste arquivo
     (var(--color-*), var(--radius*), var(--on-primary)) — só o VALOR final mudou. */
  --color-bg: #eef1f5;
  --color-surface: #ffffff;
  --color-primary: #1f6fb2;        /* azul-500 do aquecedores */
  --color-primary-dark: #10233c;   /* navy-900 */
  --color-primary-light: #eaf3fb;  /* azul-100 */
  --color-accent: #1f9d55;         /* verde-600 — sucesso/positivo, badge "Recomendada" etc. */
  --color-accent-light: #e6f6ec;   /* verde-100 */
  --color-text: #1b2430;           /* cinza-900 */
  --color-text-muted: #5b6672;     /* cinza-600 */
  --color-border: #dfe3e8;         /* borda neutra usada em botões/inputs no aquecedores */
  --color-danger: #c8272c;         /* brand-red */
  --color-danger-light: #fbe9e9;   /* brand-red-100 */
  --shadow-card: 0 6px 20px rgba(16,35,60,0.08);
  --shadow-card-hover: 0 10px 28px rgba(16,35,60,0.16);
  /* --radius-sm/--radius-lg/--radius-pill/--on-primary antes vinham direto dos tokens externos
     (assets/design-system/tokens/spacing.css e colors.css, sem alias local); agora são
     redeclarados aqui — style.css carrega DEPOIS de assets/design-system/styles.css no
     index.html, então estes valores locais vencem a cascata sem precisar tocar nos tokens
     compartilhados. */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --on-primary: #ffffff;

  /* Dourado — usado no aquecedores como cor de destaque/premium; aqui, no botão "Como
     calculamos" (ver .btn-como-calculamos mais abaixo). */
  --color-gold: #c9922a;
  --color-gold-dark: #b9862a;
  --color-gold-light: #fbf1dc;
  --color-gold-border: #ecd9ab;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }

button { font-family: inherit; }

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.app-header .logo { height: 40px; width: auto; display: block; }
.app-header h1 { font-size: 18px; color: var(--color-primary-dark); }
.header-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-muted); }
.header-catalogo-btn { margin-left: auto; flex-shrink: 0; }

.view {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-primary:disabled { background: var(--neutral-300); cursor: not-allowed; }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-primary-light); }
.btn-text { background: none; color: var(--color-text-muted); padding: 8px 10px; }
.btn-text:hover { color: var(--color-primary); }
/* SPEC-resultados-redesign.md, item 4: "Copiar referência" é uma ação secundária discreta —
   não deve competir visualmente com os botões primários de navegação (Voltar/Próximo) nem com
   "Ver detalhes"/"Ver tabela da família". Mesma classe reutilizada nos 3 lugares onde o botão
   aparece (card da lista, card da bomba recomendada, modal), então este ajuste vale pros 3. */
.btn-copiar-ref {
  background: none; border-color: var(--color-border); color: var(--color-text-muted);
  font-size: 12px; font-weight: 600; padding: 6px 12px;
}
.btn-copiar-ref:hover { color: var(--color-primary); background: var(--color-bg); border-color: var(--color-primary); }

/* Seção D: os botões Voltar/Próximo continuam sendo criados e inseridos por wizardActions() do
   jeito que já é (filhos de .wizard-card, no fluxo normal). Em telas largas eles escapam do fluxo
   via position:absolute, ancorados na borda do card, e usam transform:translateX(100%) — que
   desloca o botão pela LARGURA DELE MESMO, não um valor fixo (correção do bug de sobreposição:
   um offset fixo de 30px deixava a maior parte do botão dentro do card). */
.actions-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 20px;
}

.actions-row .btn-secondary,
.actions-row .btn-primary {
  border-radius: 999px; padding: 12px 22px;
  box-shadow: var(--shadow-card-hover);
  display: inline-flex; align-items: center; gap: 8px;
}

/* Flutuação pra fora do card — só em telas bem largas, onde garantidamente sobra espaço (.wizard-card
   tem até 780px dentro de .view, max-width 1080px com 24px de padding cada lado — só sobra espaço
   lateral suficiente pra um botão de ~150px + 20px de vão acima de ~1200px de viewport). Abaixo
   disso os botões ficam no fluxo normal do card (rodapé), sem flutuar. */
@media (min-width: 1220px) {
  .actions-row { margin-top: 0; padding-top: 0; }
  .actions-row .btn-secondary {
    position: absolute; left: 0; top: 50%;
    transform: translate(calc(-100% - 20px), -50%);
  }
  .actions-row .btn-primary {
    position: absolute; right: 0; top: 50%;
    transform: translate(calc(100% + 20px), -50%);
  }
}

/* ---------- Tela inicial ---------- */
.intro-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px 40px;
  text-align: center;
  max-width: 680px;
  margin: 40px auto;
}
.intro-card h2 { font-size: 26px; color: var(--color-primary-dark); margin-bottom: 12px; }
.intro-card p { color: var(--color-text-muted); font-size: 15.5px; margin-bottom: 28px; }
.intro-icon { margin-bottom: 20px; }

/* ---------- Hero no topo do wizard (mostra onde o usuário está) ----------
   O fundo azul-marinho é da TELA inteira (ver body.tela-wizard-escura, aplicado em render()),
   não uma caixa isolada — por isso .wizard-hero não tem mais background/padding/border-radius
   de caixa. */
body.tela-wizard-escura {
  background: linear-gradient(160deg, #0b1626, #16324f);
}

.wizard-hero {
  padding: 8px 0 26px;
  text-align: center;
}
.wizard-hero-titulo { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; color: #fff; }

/* ---------- Progresso do wizard ---------- */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.wizard-progress .step-dot {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--color-text-muted);
}
.wizard-progress .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-border); color: var(--on-primary); font-weight: 700; font-size: 12px;
}
.wizard-progress .step-dot.done .dot { background: var(--color-accent); }
.wizard-progress .step-dot.active .dot { background: var(--color-primary); }
.wizard-progress .step-dot.active { color: var(--color-primary-dark); font-weight: 600; }
.wizard-progress .connector { width: 24px; height: 2px; background: var(--color-border); }

/* Contraste do indicador de etapas sobre o fundo escuro do wizard (as cores padrão acima foram
   pensadas pra fundo claro e ficariam quase invisíveis sobre o azul-marinho). */
body.tela-wizard-escura .wizard-progress .step-dot { color: rgba(255, 255, 255, .68); }
body.tela-wizard-escura .wizard-progress .dot { background: rgba(255, 255, 255, .22); color: #fff; }
body.tela-wizard-escura .wizard-progress .step-dot.done .dot { background: var(--color-accent); }
body.tela-wizard-escura .wizard-progress .step-dot.active .dot { background: var(--color-primary); }
body.tela-wizard-escura .wizard-progress .step-dot.active { color: #fff; font-weight: 700; }
body.tela-wizard-escura .wizard-progress .connector { background: rgba(255, 255, 255, .22); }

.wizard-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding: 36px 40px;
  max-width: 780px;
  margin: 0 auto;
  min-height: 732px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}
.wizard-card h2 { font-size: 20px; color: var(--color-primary-dark); margin-bottom: 6px; }
.wizard-card .step-help { color: var(--color-text-muted); font-size: 13.5px; margin-bottom: 22px; }
/* Etapa 1 (categoria) precisa de mais largura pra caber fotos maiores confortavelmente —
   SPEC-cards-categoria-degrade-e-fotos-maiores.md, item 2. */
.wizard-card-largo { max-width: 980px; }

/* ---------- P1: cards de categoria ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.category-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: left;
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.category-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card-hover); }
.category-card.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.category-card .icon { flex-shrink: 0; color: var(--color-primary); }
.category-card h3 { font-size: 15px; margin-bottom: 4px; color: var(--color-text); }
.category-card p { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.category-card { border-left: 4px solid var(--cat-cor, var(--color-border)); }
.category-card.selected { border-left-color: var(--cat-cor, var(--color-primary)); }
.category-card-foto {
  flex-shrink: 0; width: 92px; height: 92px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; background: var(--color-bg);
}
.category-card-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Animação de seleção (seção C) — preenche rapidamente com a cor da borda ao clicar, antes de
   avançar pra próxima etapa (feedback visual claro de "foi selecionado"). */
.category-card.category-card-flash {
  background: var(--cat-cor, var(--color-primary));
  transition: background .22s ease;
}
.category-card.category-card-flash h3,
.category-card.category-card-flash p {
  color: #fff; transition: color .22s ease;
}

/* Grupo de botões clicáveis (pills) usado no lugar de <select> — mesmo espírito visual dos
   .category-card, porém mais compacto (SPEC-disponibilidade-e-ux-pressurizacao.md, item B). */
.botoes-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.botao-escolha {
  border: 2px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  color: var(--color-text); font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.botao-escolha:hover { border-color: var(--color-primary); }
.botao-escolha.selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

/* Campo de quantidade com botões numéricos + campo digitável (item D). */
.field-com-botoes-qtd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.botoes-quantidade { display: flex; flex-wrap: wrap; gap: 6px; }
.botao-quantidade {
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.botao-quantidade:hover { border-color: var(--color-primary); }
.botao-quantidade.selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.field-com-botoes-qtd input[type="number"] { width: 72px; flex-shrink: 0; }

/* "Tipo de boiler" — mais espaçado/centralizado/colorido que os .botoes-escolha genéricos
   (item G). data-valor vem de renderBotoesEscolha (genérico, aplicado a todos os grupos). */
.botoes-boiler { justify-content: center; gap: 12px; padding: 6px 0; }
.botoes-boiler .botao-escolha { padding: 10px 20px; }
.botoes-boiler .botao-escolha[data-valor="alta"] { border-color: var(--color-accent); }
.botoes-boiler .botao-escolha[data-valor="alta"].selected { background: var(--color-accent); border-color: var(--color-accent); }
.botoes-boiler .botao-escolha[data-valor="baixa"] { border-color: var(--color-primary); }
.botoes-boiler .botao-escolha[data-valor="baixa"].selected { background: var(--color-primary); border-color: var(--color-primary); }
.botoes-boiler .botao-escolha[data-valor="sem"] { border-color: var(--color-text-muted); }
.botoes-boiler .botao-escolha[data-valor="sem"].selected { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.field-group-boiler { text-align: center; }
.field-group-boiler label { text-align: center; }

/* Subtítulo para sub-seções dentro de uma etapa do wizard (ex.: filtros opcionais de drenagem). */
.substep-title {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-muted); margin: 4px 0 14px; padding-top: 14px; border-top: 1px dashed var(--color-border);
}

/* Subtítulo com mais ênfase (ex.: "Diâmetro e material da tubulação" na etapa combinada de
   pressurização residencial) — fonte maior, cor mais forte, borda mais grossa que .substep-title. */
.substep-title-destaque {
  font-size: 15px; color: var(--color-primary-dark); font-weight: 800;
  border-top: 2px solid var(--color-primary); padding-top: 16px;
}

/* Numeração automática via CSS dos campos/subtítulos dentro do card (etapas de pressurização
   residencial) — conta em ordem de aparição no DOM, sem precisar calcular números no JS. Funciona
   mesmo com campos condicionais aparecendo/sumindo, porque o CSS conta só o que está renderizado. */
.campos-numerados { counter-reset: campo; }
.campos-numerados .field-group > label::before,
.campos-numerados > .substep-title::before {
  counter-increment: campo;
  content: counter(campo) ". ";
  color: var(--color-primary);
  font-weight: 800;
}

/* Destaque visual (borda + fundo) pra campos importantes — Fator de simultaneidade e Tipo de
   boiler, pressurização residencial. */
.campo-destaque {
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  padding: 14px 16px;
}

/* ---------- Campos de formulário ---------- */
.field-group { margin-bottom: 20px; }
.field-group label { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.field-row { display: flex; gap: 12px; }
.field-row .field-group { flex: 1; }
input[type="number"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  background: var(--color-surface);
  color: var(--color-text);
}
input[type="number"]:focus, select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.field-hint { font-size: 12.5px; color: var(--color-text-muted); margin-top: 5px; }
.field-error { font-size: 12.5px; color: var(--color-danger); margin-top: 5px; display: none; }
.field-group.invalid input, .field-group.invalid select { border-color: var(--color-danger); }
.field-group.invalid .field-error { display: block; }
.input-with-unit { display: flex; gap: 10px; align-items: flex-start; }
.input-with-unit input { flex: 2; }
.input-with-unit select { flex: 1; }
.converted-note { font-size: 12.5px; color: var(--color-text-muted); margin-top: 6px; }

/* ---------- Barra deslizante (slider) sincronizada com campo numérico ---------- */
input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
  display: block;
}
.field-with-slider .slider-row,
.slider-row { margin-top: 10px; }

.diagram-wrap { display: flex; justify-content: center; margin: 8px 0 24px; }
.diagram-wrap svg { max-width: 100%; height: auto; }

/* Cards clicáveis de "Posição do pressurizador" (item H) — reaproveita o espírito visual de
   .category-card, porém menor, com um SVG ilustrativo em vez de só texto. */
.posicao-cards-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
.posicao-card {
  flex: 1; min-width: 130px; border: 2px solid var(--color-border); border-radius: var(--radius);
  padding: 12px; cursor: pointer; text-align: center; background: var(--color-surface);
  transition: border-color .15s ease, background .15s ease;
}
.posicao-card:hover { border-color: var(--color-primary); }
.posicao-card.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.posicao-card-svg { display: flex; justify-content: center; }
.posicao-card-svg svg { width: 100%; height: auto; max-width: 110px; }
.posicao-card-label { font-size: 12.5px; font-weight: 600; color: var(--color-text); margin-top: 6px; }

/* ---------- Resultados ---------- */
.results-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.results-header h2 { font-size: 21px; color: var(--color-primary-dark); }
.results-header .summary-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-top: 6px;
}
.results-header-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
/* Contador de ativos da tela "Modelos disponíveis" (item A.4) — cor de alerta, distinta do chip
   neutro acima (só aparece quando há pelo menos 1 modelo desativado). */
.summary-chip-alerta {
  background: var(--color-danger-light);
  color: var(--color-danger);
  margin-left: 8px;
}
/* Ações em massa por série (item A.3) — dentro do <summary>, estilo link discreto. */
.serie-acoes-bulk { display: flex; gap: 10px; }
.serie-bulk-link {
  background: none; border: none; padding: 0; font-size: 12px; font-weight: 600;
  color: var(--color-primary); cursor: pointer; text-decoration: underline;
}
.serie-bulk-link:hover { color: var(--color-primary-dark); }

.panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; user-select: none;
}
.panel-header h3 { font-size: 15px; color: var(--color-primary-dark); }
.panel-header .chevron { transition: transform .15s ease; color: var(--color-text-muted); }
.panel.open .panel-header .chevron { transform: rotate(180deg); }
.panel-body { padding: 0 20px 20px; display: none; }
.panel.open .panel-body { display: block; }

/* SPEC-resultados-redesign.md, item 2: a tabela rígida de 2 colunas quebrava rótulos longos
   (ex. "Comprimento trecho de recalque...") com palavras soltas numa coluna estreita. Trocado por
   uma lista de linhas empilhadas — rótulo em cima ocupando a largura toda do card (quebra normal,
   sem coluna espremida), valor destacado embaixo à direita. */
.calc-steps-list { display: flex; flex-direction: column; }
.calc-step {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 2px; border-bottom: 1px dashed var(--color-border);
}
.calc-step-label { color: var(--color-text-muted); font-size: 12.5px; text-wrap: balance; }
.calc-step-value { align-self: flex-end; text-align: right; font-weight: 600; font-size: 14px; color: var(--color-text); }
.calc-step.total { border-bottom: none; border-top: 2px solid var(--color-primary); padding-top: 12px; margin-top: 4px; }
.calc-step.total .calc-step-label { color: var(--color-primary-dark); font-weight: 700; font-size: 13px; }
.calc-step.total .calc-step-value { font-size: 17px; font-weight: 800; color: var(--color-primary-dark); }
.calc-note { font-size: 12.5px; color: var(--color-text-muted); background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 12px; }
.calc-warning { font-size: 12.5px; color: var(--color-danger); background: var(--color-danger-light); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }

/* Aviso de segurança da categoria prevencao_incendio (fase 2a do catálogo, SPEC-fase2a-incendio.md):
   dimensionamento simplificado não substitui projeto técnico de PPCI/NBR 13714 — tom âmbar (alerta
   regulatório), separado do vermelho usado em .calc-warning (que sinaliza falha/lacuna de dado). */
.aviso-seguranca-incendio {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--text-strong);
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px;
}
.aviso-seguranca-incendio .aviso-icone { flex: 0 0 auto; color: var(--warning); margin-top: 1px; }
.aviso-seguranca-incendio strong { color: var(--text-strong); }
.aviso-seguranca-titulo { font-weight: 700; margin: 0 0 6px; }
.aviso-seguranca-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }

/* ---------- Diâmetro sugerido em destaque ---------- */
.diametro-destaque {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--color-primary-light); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 4px;
}
.diametro-destaque-titulo {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-primary-dark); margin: 0 0 2px;
}
.diametro-destaque-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.diametro-destaque-item .dd-trecho { font-weight: 700; color: var(--color-primary-dark); }
.diametro-destaque-item .dd-valor { font-weight: 600; color: var(--color-text); }
.diametro-destaque-item .dd-material {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-primary-dark); background: var(--color-surface);
  border: 1px solid var(--color-primary); border-radius: 20px; padding: 2px 8px;
}

/* SPEC-resultados-modal-e-lista-completa.md, item 1.3: painel principal sem painel colapsável —
   "Bomba recomendada" (mais larga) + "Dados fornecidos" (mais estreita) lado a lado. Sem bomba
   recomendada (categoria sem nenhum modelo compatível), sobra só "Dados fornecidos", centralizado
   e com largura máxima (.sem-recomendada) em vez de esticar pra ocupar a linha toda. */
.painel-calculo-wrap { margin-bottom: 20px; }
.calc-cards-grid-2col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.calc-cards-grid-2col.sem-recomendada { grid-template-columns: 1fr; max-width: 480px; }
.calc-col-esquerda { display: flex; flex-direction: column; gap: 20px; }
.calc-col-esquerda > *:last-child { flex: 1; display: flex; flex-direction: column; }
@media (max-width: 900px) { .calc-cards-grid-2col, .calc-cards-grid-2col.sem-recomendada { grid-template-columns: 1fr; max-width: none; } }
/* Avisos/alertas importantes (AMT>100 incêndio, diâmetro substituído/indisponível, nota de
   simultaneidade) — permanecem visíveis DIRETO na tela principal, fora do modal "Como
   calculamos" (item 1.1). */
.avisos-calculo:empty { display: none; }
.avisos-calculo > *:first-child { margin-top: 16px; }
/* Todo o quadro dos desenhos (título + os dois SVGs + a vazão estimada) dentro de UM único fundo
   azul, igual o estilo que .calc-diagram-vazao já usava sozinha — o pedido era o quadro inteiro,
   não só a caixinha da vazão. Hoje é o Card 1 ("Dados fornecidos") do grid de 3. */
.calc-diagram-col {
  display: flex; flex-direction: column; align-items: stretch;
  /* Rodada 5 (item M, cores sólidas): fundo neutro sólido do app em vez do azul pastel, ainda
     distinto do card branco por cima, mantendo a borda de destaque. */
  background: var(--color-bg); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 16px; min-width: 0;
}
/* Item 1, SPEC-resultados-ajustes-finos.md: mesma estrutura título/corpo/rodapé de
   .crl-faixa-titulo/.card-recomendada-lateral — faixa fixa no topo (aqui azul escuro), corpo
   central ocupando o espaço que sobrar, rodapé (vazão + botão) sempre grudado na base. */
.cdc-faixa-titulo {
  background: var(--color-primary-dark); color: #fff;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px; margin: -16px -16px 14px;
  border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
  text-align: center;
}
.cdc-corpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.cdc-rodape { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* Card 2 ("Resultado do cálculo") — mesmo padrão de card estabelecido no app (fundo com leve
   destaque, borda, cantos arredondados, título em caixa alta), mas em tom neutro pra diferenciar
   do azul de "dados de entrada" e do verde de "recomendação". */
.calc-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 16px; min-width: 0;
}
.calc-diagram-titulo {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-primary-dark); margin: 0; align-self: flex-start;
}
.diagram-wrap-compact { margin: 0; width: 100%; }
/* Item 1, SPEC-refinamentos-dados-fornecidos-e-filtros.md: o desenho de posição do
   pressurizador, só aqui em "Dados fornecidos" (tela de resultados), estava grande demais e
   dominando o card sobre o resumo de dados abaixo dele. Encolhe só aqui — não mexe no tamanho
   usado na etapa "Instalação do pressurizador" (.posicao-card-svg, max-width: 110px, continua
   intocado). */
.diagram-wrap-mini svg { max-width: 130px; margin: 0 auto; }
/* Agora aninhada dentro do quadro azul de .calc-diagram-col — vira um "chip" claro (fundo
   surface) para se destacar por contraste em vez de duplicar o azul. */
.calc-diagram-vazao {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  background: var(--color-surface); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 8px 14px; width: 100%;
}
.calc-diagram-vazao .cdv-label { font-size: 11px; font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .02em; }
.calc-diagram-vazao .cdv-valor { font-size: 15px; font-weight: 800; color: var(--color-text); }
/* Vazão total estimada da etapa "Pontos de consumo" (pressurizacao_residencial): mais destaque
   que o chip claro padrão acima — fundo azul escuro sólido, valor maior, + equivalência em L/min
   ao lado do valor em m³/h. */
.calc-diagram-vazao-destaque {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  padding: 14px 16px;
}
.calc-diagram-vazao-destaque .cdv-label { color: rgba(255,255,255,.85); }
.cdv-valor-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; }
.calc-diagram-vazao-destaque .cdv-valor { color: #fff; font-size: 19px; }
.calc-diagram-vazao-destaque .cdv-equivalencia { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; }
/* Título do Card 2 reaproveita .calc-diagram-titulo (mesma classe do título do Card 1) pra
   garantir identidade visual consistente entre os 3 cards — só precisa da margem inferior que
   .calc-diagram-titulo não tinha (lá o espaçamento vem do gap:14px do flex column do card azul). */
.calc-card .calc-diagram-titulo { margin: 0 0 8px; }

/* Resumo compacto de "Dados fornecidos" (seção 2, SPEC-resultados-filtros-no-card-e-resumo-
   dados.md) — exclusivo de pressurização residencial: grid 2 colunas, fonte pequena, pra caber
   sem esticar o card ao lado de "Bomba recomendada" (que usa align-items: stretch). */
.resumo-dados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; width: 100%; }
.resumo-dados-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; border-bottom: 1px dashed var(--color-border); padding-bottom: 3px; }
.resumo-dados-item .rdi-label { color: var(--color-text-muted); font-weight: 600; }
.resumo-dados-item .rdi-valor { color: var(--color-text); font-weight: 700; text-align: right; }

/* Botão "Como calculamos" (seção 5): saiu do card "Bomba recomendada", entra em destaque laranja
   dentro do card "Dados fornecidos" — cor nova, ainda não usada no resto do app. Herda
   padding/border-radius/display:flex de .btn (base), só sobrescreve cor/fundo. */
.btn-como-calculamos {
  background: var(--color-gold); color: #fff; border: none;
  font-weight: 700; width: 100%; justify-content: center; margin-top: 8px;
}
.btn-como-calculamos:hover { background: var(--color-gold-dark); }

/* Seção C, rodada 4: card "Recomendação de tubulação" empilhado abaixo dos cards do painel,
   ocupando a largura total — alinhado/consistente com os cards acima (mesma largura efetiva do
   painel), em vez de espremido dentro de uma coluna estreita. */
.diametro-destaque-full { margin: 18px 0 0; }

/* ---------- Card 3 — "Bomba recomendada" (SPEC-resultados-redesign.md, item 3) ----------
   Agora um dos 3 blocos lado a lado, com espaço de verdade (não mais espremido em 380px): foto
   grande, Ø sucção e recalque, entrega na altura calculada, vazão estimada e botão de copiar
   referência. */
.card-recomendada-lateral {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm); padding: 16px; width: 100%; min-width: 0;
}
.card-recomendada-lateral .crl-badge { align-self: flex-start; }
/* Item 2, SPEC-resultados-ajustes-finos.md: empurra o bloco de filtros (último elemento do card)
   pro rodapé, mesmo quando o card estica além do conteúdo natural (align-items: stretch do grid
   de cards) — mesmo comportamento de rodapé fixo do card "Dados fornecidos" (.cdc-rodape). */
.card-recomendada-lateral .filtros-compactos { margin-top: auto; }
/* Faixa de título sólida (item 2.1) — substitui o badge pill pequeno por um cabeçalho de card
   "de verdade", sangrando até a borda do card (que tem padding: 16px). */
.crl-faixa-titulo {
  background: var(--color-accent); color: #fff;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px; margin: -16px -16px 14px;
  border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
}
.crl-top { display: flex; gap: 16px; align-items: center; }
/* Era 64px no CSS (renderizava 62px) — grande demais é desnecessário, mas 64 era exatamente o
   problema reportado. Sobe pra mesma ordem de grandeza da foto dos cards da lista principal
   (.model-photo, 132px). */
.crl-photo {
  width: 120px; height: 120px; flex-shrink: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.crl-photo img { width: 100%; height: 100%; object-fit: contain; }
.crl-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.crl-nome {
  font-size: 20px; font-weight: 800; color: var(--color-text); background: none; border: none;
  padding: 0; cursor: pointer; text-align: left; line-height: 1.3;
}
.crl-nome:hover { color: var(--color-primary); text-decoration: underline; }
/* Item A, itens menores: potência numa linha própria abaixo do nome da família, discreta. */
.crl-potencia { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.crl-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--color-text-muted); }
.crl-specs strong { color: var(--color-text); font-weight: 700; }
.crl-vazao {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  /* Rodada 5 (item M, cores sólidas): fundo sólido forte em vez de pastel — texto precisa de
     cores claras (.cdv-sobre-solido abaixo) para manter contraste sobre o fundo escuro. */
  background: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.crl-vazao .cdv-sobre-solido.cdv-label { color: rgba(255, 255, 255, .85); }
.crl-vazao .cdv-sobre-solido.cdv-valor { color: #fff; }

/* Tempo para esvaziar / acionamentos por hora (SPEC-drenagem-vazao-opcional-e-tempo-esvaziamento.md,
   seção 8) — exclusivo de drenagem_solidos, só quando o local de instalação foi informado. Mesmo
   visual sólido de .crl-vazao acima (fundo var(--color-primary), texto claro). */
.crl-tempo-esvaziamento {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  background: var(--color-primary); border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 8px;
}
.crl-tempo-esvaziamento .cdv-sobre-solido.cdv-label { color: rgba(255, 255, 255, .85); }
.crl-tempo-esvaziamento .cdv-sobre-solido.cdv-valor { color: #fff; }
/* Cor definida inline por elemento (verde/âmbar/vermelho conforme acionamentos/hora) — não
   sobrescrever aqui, só o peso/tamanho de fonte. */
.crl-acionamentos-badge { font-size: 14px; font-weight: 800; margin-top: 2px; }
.crl-acionamentos-nota { font-size: 0.72rem; color: rgba(255, 255, 255, .75); line-height: 1.4; margin-top: 4px; }

/* Item 4, SPEC-refinamentos-dados-fornecidos-e-filtros.md: vazão da mesma bomba em 3 pressões
   fixas de referência (10/15/20 m.c.a.), logo abaixo de .crl-vazao acima. Valor em L/min, com
   m³/h no tooltip (.has-tooltip/.tooltip-box, padrão trazido do Dimensionador de Aquecedores). */
.crl-pontos-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin-top: 10px; margin-bottom: 4px; }
/* Item 5, SPEC-resultados-ajustes-finos.md: asterisco clicável ao lado do título, mostra/esconde
   uma nota explicativa (estimativa baseada na curva do fabricante). */
.crl-pontos-titulo-row { display: flex; align-items: center; gap: 4px; margin-top: 10px; margin-bottom: 4px; }
.crl-pontos-titulo-row .crl-pontos-titulo { margin: 0; }
.crl-pontos-asterisco {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 13px; font-weight: 800; color: var(--color-primary); line-height: 1;
}
.crl-pontos-asterisco:hover { color: var(--color-primary-dark); }
.crl-pontos-nota { font-size: 11.5px; color: var(--color-text-muted); margin: -2px 0 6px; line-height: 1.4; }
.crl-pontos-nota[hidden] { display: none; }
.crl-pontos-referencia { display: flex; flex-direction: column; gap: 4px; }
.crl-ponto-item { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-bg); }
.crl-ponto-item .cpi-mca { color: var(--color-text-muted); }
.crl-ponto-item .cpi-valor { font-weight: 700; color: var(--color-primary-dark); }
/* .has-tooltip (base) já define display:inline-block, mas aqui o item precisa continuar como
   linha flex (label à esquerda, valor à direita) — reafirma display:flex por cima. */
.crl-ponto-item.has-tooltip { display: flex; }

/* Item E: gradação de calor (10 m.c.a. mais claro, 20 m.c.a. mais escuro) — reaproveita os tokens
   de azul já existentes, exclusivo de pressurização residencial. */
.crl-ponto-item.calor-fraco { background: var(--color-primary-light); }
.crl-ponto-item.calor-medio { background: var(--color-primary); }
.crl-ponto-item.calor-medio .cpi-mca, .crl-ponto-item.calor-medio .cpi-valor { color: #fff; }
.crl-ponto-item.calor-forte { background: var(--color-primary-dark); }
.crl-ponto-item.calor-forte .cpi-mca, .crl-ponto-item.calor-forte .cpi-valor { color: #fff; }

.crl-btn { width: 100%; justify-content: center; }
.card-recomendada-lateral .btn-copiar-ref.crl-btn { margin-top: -2px; }

/* Filtros compactos (seção 3, SPEC-resultados-filtros-no-card-e-resumo-dados.md) — agora moram
   DENTRO do card "Bomba recomendada" (ou, sem recomendada, direto acima do empty-state), em vez
   de painel lateral fixo da página inteira. Versão "clean", sem tomar muito espaço da foto/specs
   da bomba. */
/* Item 5.2: moldura completa (era só border-top tracejado) — o bloco de filtros fica claramente
   demarcado dentro do card, em vez de emendado visualmente no resto do conteúdo. */
.filtros-compactos {
  margin-top: 14px; padding: 12px 14px 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.filtros-compactos-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); margin-bottom: 8px; text-align: center; }
.marca-chips-compacto { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; justify-content: center; }
.marca-chip-compacto { font-size: 11.5px; padding: 3px 8px; }
/* Item 5.1: cor por fornecedor (mesma lógica de .model-marca-* / renderMarcaBadge), como borda +
   fundo pastel quando marcado — precisa continuar legível tanto marcado quanto desmarcado. */
.marca-chip-compacto[data-marca="schneider"] { border-color: var(--color-accent); }
/* Item 7.1, SPEC-resultados-ajustes-finos.md: fundo sólido da cor da marca (não mais pastel) +
   texto branco quando marcado — .marca-chip-compacto herda color pro texto solto do label. */
.marca-chip-compacto[data-marca="schneider"]:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.marca-chip-compacto[data-marca="texius"] { border-color: var(--color-primary); }
.marca-chip-compacto[data-marca="texius"]:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.marca-chip-compacto[data-marca="syllent"] { border-color: #7c3aed; }
.marca-chip-compacto[data-marca="syllent"]:has(input:checked) { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.filtros-linha-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; justify-content: center; }
.filtros-linha-checks .checkbox-row { margin-bottom: 0; font-size: 12.5px; }
.filtros-linha-bitolas { gap: 10px; justify-content: center; }
.filtros-linha-bitolas .field-group { margin-bottom: 0; }
.filtros-linha-bitolas label { font-size: 11.5px; margin-bottom: 3px; }
.filtros-linha-bitolas select { font-size: 12.5px; padding: 6px 8px; }

/* ---------- Modal: bloco de vazão estimada nesta configuração (item B) ---------- */
.vazao-estimada-destaque { align-items: flex-start; }
.vazao-estimada-valor { font-size: 22px; font-weight: 800; color: var(--color-primary-dark); }
.vazao-estimada-nota { font-size: 12.5px; color: var(--color-text); }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; }
.checkbox-row input { width: 16px; height: 16px; }
/* Item F.2: "Com inversor de frequência" em destaque dourado (mesma família do botão "Como
   calculamos") — reforça que é um atributo "premium" do produto. */
.checkbox-row-inversor { font-weight: 700; color: var(--color-gold-dark); }
.checkbox-row-inversor input { accent-color: var(--color-gold); }

/* SPEC-resultados-redesign.md, item 5: marca em destaque (chips clicáveis maiores). Reaproveitada
   pela versão compacta dos filtros dentro do card "Bomba recomendada" (seção 3,
   SPEC-resultados-filtros-no-card-e-resumo-dados.md — ver .marca-chip-compacto mais abaixo). */
.marca-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1.5px solid var(--color-border); border-radius: 999px;
  font-size: 13.5px; font-weight: 700; color: var(--color-text); background: var(--color-surface);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.marca-chip:hover { border-color: var(--color-primary); }
.marca-chip input { width: 15px; height: 15px; accent-color: var(--color-primary); margin: 0; }
.marca-chip:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-primary); }

.lista-modelos-titulo { font-size: 15px; color: var(--color-primary-dark); font-weight: 800; margin: 8px 0 12px; }
.model-list { display: flex; flex-direction: column; gap: 14px; }
.btn-ver-mais { display: flex; justify-content: center; width: 100%; margin-top: 14px; }
.model-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid transparent;
  position: relative;
  transition: box-shadow .15s ease;
}
.model-card:hover { box-shadow: var(--shadow-card-hover); }
.model-card.recomendada { border-color: var(--color-accent); }
/* Seção E1, rodada 4: fotos maiores (eram 88×88) para dar mais destaque visual ao card. */
.model-photo {
  width: 132px; height: 132px; flex-shrink: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative;
}
.model-photo img { width: 100%; height: 100%; object-fit: contain; }

/* Item F.3: selo "Inversor" sobreposto no canto da foto — não ocupa espaço/linha nova do card. */
.selo-inversor {
  position: absolute; top: 4px; right: 4px;
  background: var(--color-gold); color: #fff;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.model-info { flex: 1; min-width: 0; }
/* Seção E2: marca do fabricante acima do nome do modelo (card e modal). Item B, itens menores:
   virou uma pill de verdade (fundo colorido por marca) em vez de só texto cinza — cor definida
   pelos modificadores .model-marca-<slug> abaixo (montados por renderMarcaBadge() em app.js).
   Fallback (marca sem cor definida, ou nenhum modificador aplicado): cinza neutro. */
.model-marca {
  display: inline-block;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-primary); background: var(--color-text-muted);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-bottom: 3px;
}
.model-marca-schneider { background: var(--color-accent); }
.model-marca-texius { background: var(--color-primary); }
.model-marca-syllent { background: #7c3aed; }
/* Rinnai ainda não tem modelos cadastrados no catálogo — regra pronta pra quando houver
   "marca": "Rinnai" em algum modelo (item B, itens menores). */
.model-marca-rinnai { background: var(--color-danger); }
.model-info .model-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.model-info .model-name { font-size: 15.5px; font-weight: 700; color: var(--color-text); background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.model-info .model-name:hover { color: var(--color-primary); text-decoration: underline; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .03em;
}
.badge-recomendada { background: var(--color-accent); color: var(--on-primary); }
.model-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--color-text-muted); }
.model-specs strong { color: var(--color-text); font-weight: 600; }
/* Seção E3: chips de ícone de raio no lugar do texto "Monofásico"/"Trifásico". */
.fase-chips { display: inline-flex; gap: 8px; }
.fase-chip {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--color-primary-dark); font-weight: 700; font-size: 12px;
  background: var(--color-primary-light); border-radius: 20px; padding: 2px 8px 2px 6px;
  cursor: default;
}
.fase-chip svg { flex-shrink: 0; }
/* Seção D: label da folga mais autoexplicativo (era só "folga (m.c.a.)"). */
.model-folga { text-align: right; flex-shrink: 0; }
.model-folga .folga-value { font-size: 18px; font-weight: 700; color: var(--color-accent); }
.model-folga .folga-label {
  font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; max-width: 130px;
}
.folga-info { cursor: help; font-size: 12px; text-transform: none; letter-spacing: 0; }
.model-card-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.model-card-actions .btn { white-space: nowrap; }

.incompativel-list { display: flex; flex-direction: column; gap: 10px; }
.incompativel-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: 13px; }
.incompativel-item:last-child { border-bottom: none; }
.incompativel-item .im-nome { font-weight: 600; }
.incompativel-item .im-motivo { color: var(--color-text-muted); text-align: right; max-width: 60%; }

.empty-state {
  text-align: center; padding: 40px 20px; color: var(--color-text-muted);
  background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.empty-state h3 { color: var(--color-text); margin-bottom: 8px; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 25, 38, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto; z-index: 100;
}
.modal-overlay.hidden { display: none; }
/* Seção 4.2 (SPEC-resultados-filtros-no-card-e-resumo-dados.md): o modal em si cabe numa tela de
   monitor comum — rolagem INTERNA em .modal-body quando precisar, em vez do modal inteiro
   crescendo pra fora da tela (era o overlay inteiro que rolava, com align-items: flex-start). */
.modal {
  background: var(--color-surface); border-radius: var(--radius-lg);
  max-width: 720px; width: 100%; box-shadow: var(--shadow-card-hover);
  padding: 0; max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--color-border); gap: 16px; flex-shrink: 0; }
.modal-header h2 { font-size: 18px; color: var(--color-primary-dark); margin-top: 2px; }
.modal-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 6px; border-radius: 50%; }
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }
.modal-body { padding: 20px 24px 28px; overflow-y: auto; }
.modal-top { display: flex; gap: 18px; margin-bottom: 20px; }
.modal-photo { width: 120px; height: 120px; flex-shrink: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.modal-photo img { width: 100%; height: 100%; object-fit: contain; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; font-size: 13.5px; }
.spec-grid div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border); padding: 5px 0; }
.spec-grid .spec-label { color: var(--color-text-muted); }
.spec-grid .spec-value { font-weight: 600; }

.curve-table-wrap { margin-top: 20px; overflow-x: auto; }
.curve-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.curve-table th, .curve-table td { padding: 7px 10px; text-align: center; border: 1px solid var(--color-border); white-space: nowrap; }
.curve-table th { background: var(--color-bg); font-weight: 700; color: var(--color-text-muted); }
.curve-table tr.operating-point td { background: var(--color-primary); color: var(--on-primary); font-weight: 700; }
.curve-table caption { text-align: left; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--color-primary-dark); }

/* ---------- Modal: tabela "quadro" da família completa ---------- */
.familia-table th:first-child, .familia-table td:first-child { text-align: left; }
.familia-table td.familia-modelo-nome { font-weight: 600; }
.familia-table tr.familia-row-atual td { background: var(--color-accent-light); font-weight: 700; }
.familia-table tr.familia-row-atual td.familia-modelo-nome { color: var(--color-accent); }
.familia-table tr.familia-row-atual td.ponto-operacao-cell {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary-dark);
  font-weight: 800;
}

/* ---------- Modal: gráfico SVG da curva ---------- */
.curve-chart-wrap { margin-top: 24px; }
.curve-chart-title { font-size: 13px; font-weight: 600; color: var(--color-primary-dark); margin-bottom: 8px; }
.curve-chart-svg { width: 100%; height: auto; display: block; }

/* ---------- Tela "Modelos disponíveis" (auditoria do catálogo) ---------- */
/* Reaproveita o mesmo tom âmbar de .aviso-seguranca-incendio para o alerta de série órfã —
   ambos sinalizam "atenção, revise algo", não um erro vermelho de dado ausente. */
.aviso-integridade { margin: 0 0 20px; }
.catalogo-tree { display: flex; flex-direction: column; gap: 14px; }

.catalogo-abas { display: flex; gap: 8px; margin: 16px 0 18px; border-bottom: 1px solid var(--color-border); }
.catalogo-aba-btn {
  background: none; border: none; padding: 10px 4px; margin-bottom: -1px;
  font-size: 14px; font-weight: 700; color: var(--color-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.catalogo-aba-btn:hover { color: var(--color-primary); }
.catalogo-aba-btn.selected { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.categoria-node-nome { font-weight: 700; color: var(--color-primary-dark); }
.categoria-marca-grupo { margin-bottom: 14px; }
.categoria-marca-grupo:last-child { margin-bottom: 0; }

.fornecedor-details, .serie-details {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fornecedor-summary, .serie-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; user-select: none; list-style: none;
  flex-wrap: wrap;
}
.fornecedor-summary::-webkit-details-marker, .serie-summary::-webkit-details-marker { display: none; }
.fornecedor-summary::before, .serie-summary::before {
  content: ''; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px;
}
details[open] > .fornecedor-summary::before, details[open] > .serie-summary::before { transform: rotate(45deg); }
.fornecedor-count { font-size: 13px; color: var(--color-text-muted); font-weight: 600; margin-left: auto; }

.fornecedor-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.serie-details { box-shadow: none; border: 1px solid var(--color-border); }
.serie-summary { padding: 12px 16px; }
.serie-summary-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.serie-nome { font-weight: 700; font-size: 14.5px; color: var(--color-text); }
.serie-categoria-badge {
  font-size: 11.5px; font-weight: 600; color: var(--color-primary-dark);
  background: var(--color-primary-light); border-radius: 20px; padding: 2px 10px;
}
.serie-orfa-badge { color: var(--on-danger, #fff); background: var(--color-danger); }
.serie-summary-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--color-text-muted); margin-left: auto; white-space: nowrap; }
.serie-count { font-weight: 600; }

/* Legenda de categorias (topo da tela "Modelos disponíveis") — um ponto colorido por categoria. */
.legenda-categorias {
  display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 8px 0 16px;
  font-size: 0.8rem; color: var(--text-muted); align-items: center;
}
.legenda-categoria-item { display: flex; align-items: center; gap: 6px; }
.legenda-categoria-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Pontos coloridos por categoria em cada série (substitui o badge de texto concatenado). */
.serie-cat-dots { display: flex; gap: 5px; align-items: center; }
.serie-cat-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; cursor: default; flex-shrink: 0; }

/* Indicador "categorias editadas manualmente" + botão de editar, ao lado dos pontos. */
.serie-personalizado-tag {
  font-size: 11px; font-weight: 800; color: var(--color-primary-dark);
  background: var(--color-primary-light); border-radius: 20px; padding: 1px 7px;
}
.serie-editar-categorias-btn.selected { color: var(--color-primary-dark); }

/* Painel de edição de categorias por série — checkboxes inline, aplica na hora. */
.serie-categoria-painel {
  flex-basis: 100%; margin-top: 6px; padding: 12px; border-radius: var(--radius);
  background: var(--color-bg); border: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 10px; cursor: default;
}
.serie-categoria-painel-personalizado { display: flex; align-items: center; gap: 10px; }
.serie-categoria-painel-lista { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.serie-categoria-painel-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text);
  cursor: pointer; user-select: none;
}

.serie-body { padding: 4px 16px 16px 34px; display: flex; flex-direction: column; gap: 10px; }
.familia-titulo {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--color-text-muted); margin-top: 6px;
}
.catalogo-modelos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.catalogo-modelo-item { display: flex; align-items: center; gap: 6px; }
.catalogo-modelo-chk { flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--color-primary); }
.catalogo-modelo-btn {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--color-text); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.catalogo-modelo-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
/* Modelo marcado indisponível (localStorage) — permanece visível na árvore, só sinalizado
   diferente e fora dos resultados de dimensionamento (ver isModeloIndisponivel em app.js). */
.catalogo-modelo-item.indisponivel .catalogo-modelo-btn {
  text-decoration: line-through; opacity: .55; background: var(--color-bg);
}
.catalogo-modelo-item.indisponivel .catalogo-modelo-btn:hover { border-color: var(--color-border); color: var(--color-text); background: var(--color-bg); }
.catalogo-modelo-indisponivel-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--color-danger); white-space: nowrap;
}
.aviso-disponibilidade-local { margin: 0 0 16px; }

.hidden { display: none !important; }

/* ---------- Drenagem de sólidos: etapa combinada "Desnível e distância" e filtros específicos
   (SPEC-drenagem-solidos-fluxo-dedicado.md, rodada 6) ---------- */
.desnivel-distancia-row { align-items: flex-start; gap: 24px; }

/* Local de instalação (opcional) — campos de dimensões (m), lado a lado, responsivo
   (SPEC-drenagem-vazao-opcional-e-tempo-esvaziamento.md, seção 6). */
.local-instalacao-campos { display: flex; gap: 12px; flex-wrap: wrap; }
.local-instalacao-campos > .field-group { flex: 1 1 120px; }
.desnivel-distancia-col { flex: 1; min-width: 0; }
/* Altura FIXA pra área do desenho (rodada 7, seção 3.1): os 2 desenhos (diagramaSVG/
   diagramaDistanciaSVG) têm proporções naturais diferentes — sem isso, os campos abaixo deles
   (Altura de recalque / Distância horizontal) começavam em alturas diferentes, desalinhados. */
.desnivel-distancia-col .diagram-wrap-mini {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 8px;
}
.desnivel-distancia-col .diagram-wrap-mini svg { max-width: 200px; max-height: 100%; width: auto; }

/* Cards de tamanho de sólido: fundo agora claro (o campo em volta virou .campo-destaque, rodada 7,
   seção 1) — cores ajustadas pra contraste sobre fundo claro (branco em cima de branco ficava
   invisível com o padrão antigo). */
.solidos-cards-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.solido-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: 64px; height: 74px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
  padding: 6px 4px;
}
.solido-card:hover { border-color: var(--color-primary); }
.solido-card.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.solido-card-icone { flex: 1; display: flex; align-items: center; justify-content: center; }
.solido-icone-texto { font-size: 18px; font-weight: 800; color: var(--color-primary-dark); }
.solido-card-label { font-size: 10.5px; font-weight: 700; color: var(--color-text); text-align: center; }

/* ---------- Tooltip em CSS puro (sem JS) — padrão trazido do Dimensionador de Aquecedores,
   reaproveitável numa próxima rodada (mostrar vazão em m³/h ao passar o mouse sobre um valor em
   L/min). Ainda sem nenhum elemento usando; deixado pronto (SPEC-alinhar-design-com-
   aquecedores.md). ---------- */
.has-tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip-box {
  display: none; position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; background: var(--color-primary-dark); color: #fff;
  font-size: 12px; font-weight: 400; padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 200; line-height: 1.4;
  text-transform: none; letter-spacing: normal; text-align: center;
}
.tooltip-box::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--color-primary-dark);
}
.has-tooltip:hover .tooltip-box, .has-tooltip:focus .tooltip-box { display: block; }

@media (max-width: 640px) {
  .category-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }
  .wizard-card { padding: 24px 20px; }
  .model-card { flex-wrap: wrap; }
  .app-header { padding: 12px 16px; flex-wrap: wrap; }
  .header-catalogo-btn { margin-left: 0; order: 3; width: 100%; justify-content: center; }
  .serie-body { padding-left: 16px; }
}