/* Água quente predial — rede desenhada, térmica e recirculação.
 *
 * Herda a folha da família de hidrologia e hidráulica. A geometria de página
 * NÃO é redeclarada: largura, margem e as duas colunas do `.workspace` são da
 * folha-base, que mantém a composição por uma escada de breakpoints inteira.
 * Um produto que fixa a própria coluna empilha antes dos outros, e o defeito
 * só aparece em janela de notebook — que não é a largura em que se testa.
 *
 * O que entra aqui é o que é DESTE produto: a colocação do painel de
 * resultados, o desenho da rede, e a paleta térmica — que é o único elemento
 * visual novo de verdade, porque nenhum outro produto da plataforma precisa
 * mostrar temperatura ao longo de um tubo.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

.quente-workspace > .results-panel { grid-column: 1 / -1; }

/* O canvas NÃO estica para acompanhar o painel. Sem isto, um painel de 2800 px
 * arrastava o cartão do desenho junto e abria dois mil pixels de branco ao lado
 * de um SVG de 556 px — o usuário rolava três telas de nada.
 *
 * Sem `position: sticky`, de propósito. Um canvas de 816 px numa janela de
 * 900 px não ganha nada em ficar fixo, e o grude dentro de item de grade
 * confunde a pintura: a área do cartão aparecia em branco durante a rolagem. */
.quente-workspace > .canvas-card { align-self: start; }

/* Bloco recolhível do painel de entradas. */
.bloco-recolhivel {
  border: 1px solid #e4efea; border-radius: 10px; margin: 0 0 14px; background: #fbfdfc;
}
.bloco-recolhivel > summary {
  cursor: pointer; padding: 10px 12px; font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #0e6b4f; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bloco-recolhivel > summary::-webkit-details-marker { display: none; }
.bloco-recolhivel > summary::after {
  content: "+"; font-size: .95rem; line-height: 1; color: #677971; font-weight: 400;
}
.bloco-recolhivel[open] > summary::after { content: "−"; }
.bloco-recolhivel > summary span {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: #677971; font-size: .7rem;
}
.bloco-recolhivel > *:not(summary) { margin-left: 12px; margin-right: 12px; }
.bloco-recolhivel > *:last-child { margin-bottom: 12px; }

/* ------------------------------------------------------------- entradas */

.painel-selecao { display: grid; gap: 10px; }
.painel-selecao .vazio {
  margin: 0; padding: 14px; border-radius: 10px; border: 1px dashed #cfe0d8;
  background: #f7fbf9; font-size: .78rem; line-height: 1.6; color: #46655a;
}
.painel-selecao .vazio b { color: #0e6b4f; }
.painel-selecao h3 {
  margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: #0b2b21;
  display: flex; align-items: center; gap: 8px;
}
.painel-selecao h3 .marca {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: 5px;
  background: #0e6b4f; color: #fff; font-size: .68rem; font-weight: 600;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-grid.one { grid-template-columns: 1fr; }
.field-grid .wide { grid-column: 1 / -1; }
.field-grid label.checkbox {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: .76rem; color: #2f4c42;
}
.field-grid label.checkbox input { width: auto; margin: 0; }

.field-help {
  margin: 8px 0 0; font-size: .73rem; line-height: 1.6; color: #5a7469;
}
.field-help b { color: #0e6b4f; }

/* Lista de aparelhos e de conexões do elemento selecionado. */
.lista-itens { display: grid; gap: 6px; }
.lista-itens .item {
  display: grid; grid-template-columns: 1fr 58px 26px; gap: 6px; align-items: center;
}
.lista-itens .item select, .lista-itens .item input { font-size: .74rem; padding: 5px 7px; }
.lista-itens .item button {
  border: 1px solid #d6e3dd; background: #fff; border-radius: 6px; cursor: pointer;
  color: #9b3232; font-size: .82rem; line-height: 1; height: 28px;
}
.lista-itens .item button:hover { background: #fdf2f2; border-color: #e0b9b9; }
.linha-adicionar { margin-top: 6px; }
.linha-adicionar button {
  border: 1px dashed #b9d2c8; background: #f4f9f7; border-radius: 7px; cursor: pointer;
  color: #0e6b4f; font-size: .74rem; padding: 6px 10px; width: 100%;
}
.linha-adicionar button:hover { background: #e9f4ef; }

/* Trechos que compõem o anel de recirculação. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips button {
  border: 1px solid #d6e3dd; background: #fff; border-radius: 999px; cursor: pointer;
  padding: 4px 11px; font-size: .73rem; color: #46655a;
}
.chips button[aria-pressed="true"] {
  background: #0e6b4f; border-color: #0e6b4f; color: #fff; font-weight: 600;
}
.chips button:disabled { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------- canvas */

.ferramentas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 0 12px; border-bottom: 1px solid #e4efea; margin-bottom: 12px;
}
.ferramenta {
  display: grid; gap: 1px; text-align: left; cursor: pointer;
  border: 1px solid #d6e3dd; background: #fff; border-radius: 8px; padding: 6px 11px;
}
.ferramenta b { font-size: .76rem; font-weight: 600; color: #0b2b21; }
.ferramenta small { font-size: .66rem; color: #677971; }
.ferramenta.ativa { border-color: #0e6b4f; background: #0e6b4f; }
.ferramenta.ativa b, .ferramenta.ativa small { color: #fff; }
.ferramenta-sep { width: 1px; height: 26px; background: #e4efea; margin: 0 3px; }
.text-button {
  border: none; background: none; cursor: pointer; color: #0e6b4f;
  font-size: .74rem; text-decoration: underline; padding: 4px 6px;
}
.text-button:disabled { color: #a9bcb4; cursor: not-allowed; text-decoration: none; }
.pintura { display: flex; align-items: center; gap: 6px; font-size: .73rem; color: #5a7469; }
.pintura select { width: auto; font-size: .73rem; padding: 4px 7px; }

.canvas-wrap {
  border: 1px solid #e4efea; border-radius: 12px; background: #fbfdfc; overflow: hidden;
}
.canvas-wrap svg { display: block; width: 100%; height: auto; }
.canvas-dica { margin: 8px 0 0; font-size: .73rem; color: #5a7469; min-height: 1.2em; }
.canvas-problemas {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid #e6c9c9; background: #fdf5f5; color: #8c2f2f; font-size: .75rem;
}
.canvas-legenda { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.canvas-legenda span {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: #5a7469;
}
.canvas-legenda i {
  width: 14px; height: 8px; border-radius: 2px; display: inline-block;
}

/* Elementos do desenho da rede. */
.aq-tubo { stroke-linecap: round; fill: none; }
.aq-tubo-halo { stroke: #ffffff; stroke-width: 9; fill: none; stroke-linecap: round; }
.aq-anel { stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 3; fill: none; }
.aq-no circle { stroke: #0b2b21; stroke-width: 1.4; }
.aq-no.selecionado circle { stroke: #b8860b; stroke-width: 3; }
.aq-no.origem circle { stroke-width: 2.4; }
.aq-rotulo {
  font: 500 11px var(--ep-fonte); fill: #0b2b21;
  paint-order: stroke; stroke: #ffffff; stroke-width: 3; stroke-linejoin: round;
}
.aq-rotulo.leve { font-weight: 400; fill: #5a7469; font-size: 10px; }
.aq-trecho-rotulo {
  font: 500 10px var(--ep-fonte); fill: #2f4c42;
  paint-order: stroke; stroke: #ffffff; stroke-width: 3; stroke-linejoin: round;
}
.aq-trecho.selecionado .aq-tubo { stroke: #b8860b !important; }
.aq-aquecedor rect { fill: #0e6b4f; stroke: #0b2b21; stroke-width: 1.4; }
.aq-aquecedor text { font: 600 10px var(--ep-fonte); fill: #fff; }

/* ------------------------------------------------------------ resultados */

.tab-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 0; border-bottom: 1px solid #e4efea; }
.tab-strip button {
  border: none; background: none; cursor: pointer; padding: 9px 13px;
  font-size: .78rem; color: #5a7469; border-bottom: 2px solid transparent;
}
.tab-strip button[aria-selected="true"] { color: #0e6b4f; font-weight: 600; border-bottom-color: #0e6b4f; }
.tab-panel { padding-top: 14px; }

.output-strip {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #0b2b21; color: #e7f2ed;
}
.output-strip span { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #8fb9a9; }
.output-strip strong { font-size: .84rem; font-weight: 500; }
.output-strip .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.primary-button, .secondary-button {
  border-radius: 8px; padding: 8px 14px; font-size: .76rem; cursor: pointer; border: 1px solid transparent;
}
.primary-button { background: #29a37a; color: #04150f; font-weight: 600; }
.primary-button:hover { background: #34b98c; }
.primary-button:disabled { background: #35564a; color: #8fb9a9; cursor: progress; }
.secondary-button { background: transparent; border-color: #35564a; color: #cfe6dc; }
.secondary-button:hover { border-color: #8fb9a9; }

table.dados {
  width: 100%; border-collapse: collapse; font-size: .75rem;
}
table.dados th, table.dados td {
  padding: 6px 8px; border-bottom: 1px solid #eef4f1; text-align: right; white-space: nowrap;
}
table.dados th { font-weight: 600; color: #0b2b21; border-bottom-color: #cfe0d8; }
table.dados th:first-child, table.dados td:first-child { text-align: left; }
table.dados td.nome { white-space: normal; }
table.dados tr.reprova td { background: #fdf5f5; }
table.dados caption {
  caption-side: top; text-align: left; font-size: .73rem; color: #5a7469;
  padding-bottom: 8px; line-height: 1.6;
}

/* A paleta térmica: o único elemento visual que nenhum outro produto tem.
 * Vai da cor da água fria à da água na temperatura de armazenamento, e é
 * usada no canvas, na tabela e na legenda — a MESMA escala nos três, senão o
 * desenho e a tabela contam histórias diferentes. */
.escala-termica {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: .7rem; color: #5a7469;
}
.escala-termica .barra {
  flex: 1; height: 10px; border-radius: 5px; border: 1px solid #d6e3dd;
  background: linear-gradient(90deg, #4a7fb5 0%, #7ba7c9 25%, #d9c98a 50%, #d98f4a 75%, #b5432a 100%);
}

.pilula {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 600;
}
.pilula.ok { background: #e3f3ec; color: #0e6b4f; }
.pilula.nao { background: #fbe6e6; color: #9b3232; }
.pilula.ressalva { background: #fdf3e0; color: #8a5a12; }

.avisos { display: grid; gap: 8px; margin-top: 14px; }
.aviso-caixa {
  padding: 11px 13px; border-radius: 9px; font-size: .75rem; line-height: 1.65;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7; color: #2f4c42;
  white-space: pre-wrap;
}
.aviso-caixa.atencao { border-color: #ecd9b0; border-left-color: #b8860b; background: #fdf9f0; color: #6b5010; }
.aviso-caixa.fronteira { border-color: #d3d9e4; border-left-color: #4a6fa5; background: #f5f7fb; color: #33465f; }
.aviso-caixa b { color: inherit; font-weight: 600; }

/* A PROSA DE PROCEDÊNCIA dentro das tabelas.
 *
 * A cor é #617369, e não o #677971 do resto do texto secundário, por um motivo
 * medido: o auditor de interface achou 4,30:1 para o cinza normal quando ele
 * cai numa linha reprovada, que tem fundo #fdf5f5. O piso é 4,5:1, e o cinza
 * do resto da página só passa contra branco e contra o #fbfdfc do painel.
 * Este tom passa contra os seis fundos que a família usa, o mais escuro deles
 * dando 4,70:1. */
.mem-fonte { font-size: .7rem; color: #617369; font-style: italic; }

@media (max-width: 1100px) {
  .field-grid { grid-template-columns: 1fr; }
  .lista-itens .item { grid-template-columns: 1fr 54px 26px; }
}

/* ALINHAMENTO DOS CAMPOS DA GRADE.
 *
 * O label era `display: block`, então o campo começava onde o texto acabasse:
 * "Garantia temporal pretendida" ocupa duas linhas, "Anos mínimos de série"
 * ocupa uma, e os dois campos da mesma linha saíam em alturas diferentes.
 *
 * Coluna flexível com o campo empurrado para o fim resolve sem depender de o
 * rótulo caber numa linha — que é uma condição que nenhum texto em português
 * respeita por muito tempo. O `:not(.checkbox)` preserva a caixa de marcação,
 * que é deitada de propósito. */
.field-grid label:not(.checkbox) { display: flex; flex-direction: column; gap: 5px; }
.field-grid label:not(.checkbox) > .input-with-unit,
.field-grid label:not(.checkbox) > input,
.field-grid label:not(.checkbox) > select,
.field-grid label:not(.checkbox) > textarea { margin-top: auto; }

/* CÉLULA DE PROSA QUEBRA; CÉLULA DE NÚMERO NÃO.
 *
 * `white-space: nowrap` valia para toda célula, com exceção só de `.nome`. Numa
 * coluna de número isso é certo — "1.234,56 m³/s" partido em duas linhas é
 * ilegível. Numa coluna de PROSA é desastre: a aba do memorial tem uma coluna
 * de procedência com parágrafos, ela esticou até 1.208 px, a tabela foi a
 * 1.395 px dentro de um painel de 1.104, e a PÁGINA INTEIRA passou a rolar na
 * horizontal. Passou despercebido porque a aba estava fechada quando eu olhei.
 *
 * Duas camadas, porque uma só não basta:
 *
 *   A célula que contém prosa — marcada por `.mem-fonte` ou pela classe
 *   `.prosa` — quebra. É a correção da causa.
 *
 *   O painel rola na horizontal em vez de empurrar a página. É a rede: se
 *   amanhã aparecer uma tabela larga por outro motivo, ela fica contida no
 *   próprio painel em vez de quebrar a composição inteira. */
table.dados td:has(.mem-fonte),
table.dados td.prosa,
table.dados th.prosa { white-space: normal; }
.tab-panel { overflow-x: auto; }

/* Últimos dois tokens secundários acertados no piso de contraste.
 *
 * `#7d9389` sobre branco dava 3,28:1; `#65736e` sobre o verde escuro da faixa
 * de saídas dava 3,06:1. O segundo é texto CLARO sobre fundo escuro, e por isso
 * foi CLAREADO, não escurecido — a primeira tentativa escureceu os dois, o que
 * levou o rótulo da faixa a 1,38:1, pior que estava. A direção da correção vem
 * de comparar a luminância do texto com a do fundo, e não de supor. */

/* A FAIXA DE SAÍDAS É ESCURA NESTE PRODUTO, e por isso o texto secundário dela
 * vem do token de fundo escuro.
 *
 * A folha-base declara `.output-strip > div > span { color: var(--muted) }`
 * sobre `var(--surface)`, que é branco — correto lá. Aqui a faixa é
 * `#0b2b21`, e o mesmo token dava 3,06:1. A regra do produto usava
 * `.output-strip span`, de especificidade MENOR que a da base, e por isso
 * nunca chegou a valer: o defeito estava escrito e corrigido ao mesmo tempo,
 * e o que faltava era um seletor que ganhasse. */
.output-strip > div > span { color: var(--muted-escuro, #8fb9a9); }