/* Condutos forçados — adutora sob pressã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 sustenta a composição por uma escada de breakpoints inteira.
 *
 * O que é DESTE produto: a faixa de destaque com os quatro números que fecham
 * o laço — vazão de operação, potência, pressão máxima do transitório e classe
 * de tubo —, e a lista de peças com o K de cada uma.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

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

/* O cartão das figuras NÃO estica para acompanhar o painel de entradas.
 * Sem isto, um painel alto arrasta o cartão junto e abre uma faixa de branco
 * ao lado de um gráfico que ocupa metade dela. */
.cf-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 */

.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; }

/* --------------------------------------------------------------- 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;
}

/* ------------------------------------------------------------ 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 EQUAÇÃO ENTREGUE fica acima dos cartões, e não numa aba.
 * É o que o usuário veio buscar: quatro números para colar em outro produto.
 * Enterrá-la numa aba obrigaria a procurar o resultado. */
.equacao-entregue {
  margin: 14px 0 4px; padding: 16px 18px; border-radius: 12px;
  background: #0b2b21; color: #e7f2ed; display: grid; gap: 14px;
}
/* Os dois resultados de topo, lado a lado: a cheia de projeto e a Q da
 * outorga. São perguntas de disciplinas diferentes — drenagem e
 * licenciamento — e por isso ficam separadas por uma linha, e não numa fila
 * de números iguais. */
.dois-resultados { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 20px; align-items: start; }
.dois-resultados > .risca { background: rgba(231, 242, 237, .16); }
.dois-resultados section { display: grid; gap: 4px; }
.dois-resultados h3 {
  margin: 0; font-size: .66rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: #8fb9a9;
}
.dois-resultados .numero {
  font-size: 2.1rem; font-weight: 500; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dois-resultados .numero span { font-size: .9rem; font-weight: 400; color: #a6cbbb; margin-left: 5px; }
.dois-resultados p { margin: 2px 0 0; font-size: .74rem; line-height: 1.5; color: #a6cbbb; }
@media (max-width: 900px) {
  .dois-resultados { grid-template-columns: 1fr; }
  .dois-resultados > .risca { height: 1px; }
}
.equacao-entregue .nota { font-size: .74rem; line-height: 1.6; color: #a6cbbb; }

/* Entradas de série: área de texto larga, que é como o dado chega. */
.area-rotulo { display: grid; gap: 5px; font-size: .74rem; color: #2f4c42; margin-bottom: 8px; }
.area-rotulo textarea, .area-rotulo input {
  width: 100%; font: 400 .76rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 8px 10px; border: 1px solid #d6e3dd; border-radius: 8px; background: #fff;
  color: #0b2b21; resize: vertical;
}
.area-rotulo textarea:focus, .area-rotulo input:focus { outline: 2px solid #29a37a; outline-offset: -1px; }
.linha-botoes { display: flex; gap: 10px; margin-bottom: 4px; }

/* Elementos dos gráficos.
 *
 * Texto de gráfico usa TINTA, nunca a cor da série: uma matiz clara da rampa é
 * ilegível como texto sobre o branco, e a identidade já vem do traço colorido
 * ao lado. Os quatro níveis abaixo são os únicos que os gráficos usam. */
.g-tick {
  font: 400 11px var(--ep-fonte); fill: #62766e;
  font-variant-numeric: tabular-nums;
}
.g-eixo-titulo { font: 500 12px var(--ep-fonte); fill: #46655a; }
.g-rotulo-direto {
  font: 500 11.5px var(--ep-fonte); fill: #0b2b21;
  font-variant-numeric: tabular-nums;
}
.g-nota { font: 400 11px var(--ep-fonte); fill: #62766e; }
.guia-foco { stroke: #0b2b21; stroke-width: 1; opacity: .22; pointer-events: none; }
.camada-foco rect { cursor: crosshair; }

/* A legenda fica no cabeçalho do cartão, e não dentro do desenho: dentro, ela
 * disputa espaço com as curvas justamente na região que interessa. */
.canvas-legenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.canvas-legenda .chave {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: #46655a; white-space: nowrap;
}
.canvas-legenda .chave i { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.canvas-legenda .chave svg { flex: none; }

/* O balão do cursor. Um gráfico em HTML É interativo, e entregar SVG estático
 * desperdiça o único canal que o papel não tem. */
.canvas-wrap { position: relative; }
.balao {
  position: absolute; top: 11%; z-index: 3; pointer-events: none;
  min-width: 190px; max-width: 290px; padding: 10px 12px;
  background: #0b2b21; color: #e7f2ed; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 43, 33, .22);
  font-size: .74rem; line-height: 1.45; display: grid; gap: 5px;
}
.balao[hidden] { display: none; }
.balao strong {
  font-weight: 500; font-size: .78rem; color: #fff;
  padding-bottom: 5px; border-bottom: 1px solid rgba(231, 242, 237, .16);
}
.balao .linha { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: baseline; }
.balao .linha i {
  width: 8px; height: 8px; border-radius: 2px; align-self: center;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.balao .linha b { font-weight: 400; color: #a6cbbb; }
.balao .linha em { font-style: normal; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.balao .linha small { grid-column: 2 / -1; color: #7fa695; font-size: .68rem; }

.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; }
}

/* ------------------------------------------------------------- cartões */

/* Seis cartões em três colunas.
 *
 * A folha herdada põe quatro por fila; com cinco cartões a segunda fila ficava
 * com um cartão e três vãos escuros — que é exatamente o bloco preto que
 * apareceu na primeira revisão. Três colunas fecham duas filas cheias. */
.result-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-cards article { border-bottom: 1px solid #354139; }
.result-cards article:nth-last-child(-n+3) { border-bottom: 0; }
.result-cards article:nth-child(3n) { border-right: 0; }

@media (max-width: 1100px) {
  .result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-cards article:nth-child(3n) { border-right: 1px solid #354139; }
  .result-cards article:nth-child(2n) { border-right: 0; }
  .result-cards article:nth-last-child(-n+3) { border-bottom: 1px solid #354139; }
  .result-cards article:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---------------------------------------------------- verificações em cartão */

/* A tabela de verificações virou CARTÃO, e a razão não é enfeite.
 *
 * Numa tabela, o valor obtido e o limite ficam em colunas separadas e o leitor
 * tem de comparar dois números com os olhos. O que ele quer saber é uma coisa
 * só — quanto do limite foi usado —, e essa é a informação que nenhuma das
 * duas colunas carrega sozinha. A barra de utilização carrega.
 *
 * O detalhe técnico continua ali, e é o que distingue este produto de um
 * semáforo: verde sem explicação é fé, não engenharia. */
.grade-verificacoes { display: grid; gap: 10px; margin-top: 4px; }

.cartao-verificacao {
  border: 1px solid #dfeae5; border-left: 3px solid #29a37a; border-radius: 11px;
  padding: 13px 16px; background: #fff; display: grid; gap: 9px;
}
.cartao-verificacao.nao { border-left-color: #b5432a; background: #fdf7f5; }
.cartao-verificacao.ressalva { border-left-color: #b58a2a; }

.cartao-verificacao > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.cartao-verificacao h4 {
  margin: 0; font-size: .85rem; font-weight: 500; color: #0b2b21; line-height: 1.35;
}
.cartao-verificacao .veredito {
  flex: none; font-size: .68rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: #e3f3ec; color: #0e6b4f;
}
.cartao-verificacao.nao .veredito { background: #fbe6e6; color: #9b3232; }
.cartao-verificacao.ressalva .veredito { background: #fbf2e0; color: #8a6614; }

/* A barra: o limite é a pista, o preenchimento é o obtido. Quando a
 * utilização passa de 1, o excesso aparece em vermelho DEPOIS da marca do
 * limite — assim a leitura "passou, e por quanto" é imediata. */
.cartao-verificacao .medida {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center;
}
.cartao-verificacao .barra {
  position: relative; height: 7px; border-radius: 4px; background: #eef4f1; overflow: hidden;
}
.cartao-verificacao .barra i {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: #29a37a;
  display: block;
}
.cartao-verificacao.nao .barra i { background: #b5432a; }
.cartao-verificacao.ressalva .barra i { background: #c99a2e; }
.cartao-verificacao .barra b {
  position: absolute; top: -2px; bottom: -2px; width: 2px; background: #0b2b21; opacity: .35;
}
.cartao-verificacao .numeros {
  font-size: .74rem; color: #46655a; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cartao-verificacao .numeros strong { color: #0b2b21; font-weight: 500; }

.cartao-verificacao p { margin: 0; font-size: .76rem; line-height: 1.55; color: #46655a; }
.cartao-verificacao .acao {
  font-size: .76rem; color: #9b3232; padding: 7px 10px; border-radius: 7px;
  background: #fbe6e6; line-height: 1.5;
}
.cartao-verificacao footer {
  font-size: .68rem; color: #62766e; border-top: 1px solid #eef4f1; padding-top: 7px;
}

/* ------------------------------------------------------------- equações */

/* A equação ajustada escrita por extenso.
 *
 * Monoespaçada, porque é para ser COPIADA: numa proporcional o leitor não
 * distingue o que é expoente do que é multiplicação, e a diferença entre
 * `T^0,15` e `T 0,15` é o produto inteiro. */
.equacoes { display: grid; gap: 12px; margin: 4px 0 18px; }
@media (min-width: 980px) { .equacoes { grid-template-columns: 1fr 1fr; } }

.equacao-bloco {
  border: 1px solid #dfeae5; border-radius: 11px; padding: 14px 16px;
  background: #fff; display: grid; gap: 9px; align-content: start;
}
.equacao-bloco h4 {
  margin: 0; font-size: .7rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: #0e6b4f;
}
.equacao-bloco .ajustada {
  display: block; padding: 11px 13px; border-radius: 8px; background: #0b2b21;
  color: #e7f2ed; font: 400 .82rem/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  overflow-x: auto; white-space: nowrap;
}
.equacao-bloco .forma { margin: 0; font-size: .73rem; color: #46655a; line-height: 1.55; }
.equacao-bloco .forma span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #0b2b21;
}
.equacao-bloco .sem { margin: 0; font-size: .76rem; color: #9b3232; }
.equacao-bloco dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  font-size: .73rem; line-height: 1.5;
}
.equacao-bloco dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #0b2b21;
  font-weight: 500; white-space: nowrap;
}
.equacao-bloco dd { margin: 0; color: #5a7469; }
.dados code {
  font: 400 .72rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #0b2b21;
}

/* Texto dentro de cápsula: claro, porque a cápsula é escura. Única exceção à
 * regra de texto em tinta — aqui o fundo é da cor da série. */
.g-capsula {
  font: 500 11.5px var(--ep-fonte); fill: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* 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; }

/* TOKENS DE TEXTO SECUNDÁRIO, corrigidos para o piso de contraste.
 *
 * `#7d968c` dava 2,95:1 sobre o painel claro e 3,18:1 sobre o branco; `#9aaea6`
 * dava 2,34:1. O piso da WCAG AA para texto abaixo de 18,7 px é 4,5:1, e todo
 * texto secundário desta plataforma é de 10 a 12 px — ou seja, o piso vale
 * inteiro para eles.
 *
 * A hierarquia visual NÃO se perde: ela passa a vir do tamanho e do peso, que é
 * de onde deveria vir. Hierarquia construída só com contraste baixo é
 * hierarquia que exclui quem enxerga menos.
 *
 * Os valores novos são o MENOR escurecimento que atinge 4,5:1 mantendo a matiz,
 * calculado e não escolhido a olho. */

/* Ú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); }

/* A LISTA DE PEÇAS, com o K de cada uma.
 *
 * Ela existe porque a perda localizada é a parcela que mais some no resultado:
 * vira um número só, e ninguém confere de onde veio. Aqui cada peça aparece com
 * a quantidade, o K unitário, o K total, e uma marca quando o projeto divergiu
 * do valor de catálogo. */
.lista-pecas { display: grid; gap: 3px; margin-top: 6px; }
.lista-pecas .peca {
  display: grid; grid-template-columns: 1fr 34px 46px 52px 24px; gap: 6px; align-items: center;
  font-size: .72rem; color: #2f4c42; padding: 3px 6px; border-radius: 6px;
}
.lista-pecas .peca:nth-child(odd) { background: #f6faf8; }
.lista-pecas .peca b { font-weight: 400; }
.lista-pecas .peca span { text-align: right; font-variant-numeric: tabular-nums; color: #46655a; }
.lista-pecas .peca .k-total { color: #0b2b21; font-weight: 500; }
/* O botão de remover tinha 17 px de altura, abaixo do piso de 24 px para alvo
 * de toque. Num painel de entradas que se usa com o mouse isso já é pequeno;
 * em tela sensível ao toque é inatingível. */
.lista-pecas .peca button {
  border: 0; background: none; cursor: pointer; color: #a2544a; font-size: .9rem;
  line-height: 1; min-height: 24px; min-width: 24px; border-radius: 6px;
}
.lista-pecas .peca button:hover { background: #fbeeec; }
.lista-pecas .peca .editado { color: #a8742a; }
.lista-pecas .soma {
  display: flex; justify-content: space-between; margin-top: 5px; padding: 5px 6px;
  border-top: 1px solid #dcebe4; font-size: .74rem; color: #0b2b21;
}
.lista-pecas .soma b { font-weight: 500; font-variant-numeric: tabular-nums; }
.linha-adicionar { display: grid; grid-template-columns: 1fr 54px auto; gap: 6px; margin-top: 8px; }
.linha-adicionar select, .linha-adicionar input { font-size: .74rem; padding: 5px 7px; }

/* A faixa de destaque: os quatro números que fecham o laço do produto. */
.quatro-numeros {
  margin: 14px 0 4px; padding: 16px 18px; border-radius: 12px;
  background: #0b2b21; color: #e7f2ed;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
}
.quatro-numeros > div { display: grid; gap: 3px; }
.quatro-numeros span {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #8fb9a9;
}
.quatro-numeros strong {
  font-size: 1.5rem; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.quatro-numeros strong em { font-style: normal; font-size: .8rem; color: #a6cbbb; margin-left: 3px; }
.quatro-numeros small { font-size: .68rem; color: #a6cbbb; line-height: 1.45; }
.quatro-numeros .laco {
  grid-column: 1 / -1; font-size: .72rem; color: #a6cbbb; line-height: 1.6;
  padding-top: 10px; border-top: 1px solid rgba(231, 242, 237, .14);
}

/* O ESQUEMA DO SISTEMA, no alto do painel de entradas.
 *
 * Ele responde à pergunta que a primeira versão do produto deixava no ar: o
 * que exatamente está sendo modelado. Havia campos de nível e de cota, e um
 * perfil com linhas sobre um terreno, mas nada dizia que há um poço embaixo,
 * uma bomba, e um reservatório em cima.
 *
 * É esquemático de propósito — sem escala, proporções fixas. A vista em escala
 * é o perfil, na figura ao lado. */
.esquema-do-sistema {
  margin: 2px 0 14px; padding: 10px 12px 8px; border-radius: 10px;
  background: #f7faf9; border: 1px solid #e2ede8;
}
.esquema-do-sistema svg { display: block; width: 100%; height: auto; }
.esquema-do-sistema .e-rot {
  font: 400 7.5px var(--ep-fonte); fill: #46655a;
}
.esquema-do-sistema .e-cota {
  font: 500 8.5px var(--ep-fonte); fill: #b5432a;
  font-variant-numeric: tabular-nums;
}
.esquema-do-sistema .e-nota {
  margin: 6px 0 0; font-size: .7rem; line-height: 1.5; color: #46655a;
}
.esquema-do-sistema .e-nota b { color: #0b2b21; font-weight: 500; }