/* Estações de bombeamento e elevatórias.
 *
 * Herda a base da família de hidrologia — workspace, cartões, verificações,
 * abas, canvas e avisos. Aqui ficam só o seletor de vista, o editor de peças e
 * as cores próprias das três vistas do modelo.
 */
@import url("../chuva-vazao/styles.css");
@import url("../shared/ep-como-usar.css");

/* --------------------------------------------------------------- seletor de vista */

.view-picker { display: flex; gap: 4px; }
.view-picker button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.view-picker button:hover { border-color: var(--chart-blue-dark); color: var(--ink); }
.view-picker button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 500;
}

.canvas-toolbar { flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------- editor de peças */

.peca-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }

.peca-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 52px 56px 22px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
}
.peca-row .marca { font-weight: 500; color: var(--chart-blue-dark); letter-spacing: .02em; }
.peca-row .rotulo { color: var(--ink); line-height: 1.3; }
.peca-row input { width: 100%; font-size: 11px; padding: 3px 5px; text-align: right; }
.peca-row .remover {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
}
.peca-row .remover:hover { color: #c0392b; }
.peca-row.is-proibida { border-color: #e6b7b3; background: #fff8f7; }

.peca-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 52px 56px 22px;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px;
  margin-top: 10px;
}

.peca-add { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.peca-add select { flex: 1; font-size: 11px; }

/* --------------------------------------------------------------- vistas do canvas */

#station-canvas { width: 100%; display: block; background: #f4f7f5; border-radius: 12px; }

.canvas-title { fill: #087f5b; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.canvas-sub { fill: #848f8b; font-size: 10.5px; }
.canvas-note { fill: #848f8b; font-size: 10px; }

/* Planta */
.zona-escala { fill: #ffffff; stroke: #cfdad5; stroke-width: 1; }
.zona-esquematica { fill: #f0f4f2; stroke: #cfdad5; stroke-width: 1; stroke-dasharray: 5 4; }
.zona-rotulo { fill: #7d8b86; font-size: 9.5px; letter-spacing: .08em; }
.poco-planta { fill: #dbeaf6; stroke: #24302c; stroke-width: 1.6; }
.poco-agua { fill: #b9d8ef; }
.bomba-corpo { fill: #ffffff; stroke: #24302c; stroke-width: 1.6; }
.bomba-reserva { fill: #f2f5f3; stroke-dasharray: 4 3; }
.bomba-rotulo { fill: #24302c; font-size: 10px; font-weight: 500; }
.linha-succao { fill: none; stroke: #2f6dd2; stroke-width: 2.6; stroke-linecap: round; }
.linha-recalque { fill: none; stroke: #df4652; stroke-width: 2.6; stroke-linecap: round; }
.linha-esquematica { stroke-dasharray: 9 5; }
.peca-simbolo { fill: #ffffff; stroke: #24302c; stroke-width: 1.3; }
.peca-marca { fill: #24302c; font-size: 8.5px; font-weight: 500; }
.peca-guia { stroke: #9aa8a3; stroke-width: .8; fill: none; }

/* Perfil */
.perfil-terreno-area { fill: #e7ded2; }
.perfil-terreno { fill: none; stroke: #8a7a63; stroke-width: 1.4; }
.perfil-tubo { fill: none; stroke: #24302c; stroke-width: 2.4; }
.perfil-regime { fill: none; stroke: #087f5b; stroke-width: 1.8; }
.perfil-maxima { fill: none; stroke: #df4652; stroke-width: 1.4; stroke-dasharray: 6 4; }
.perfil-minima { fill: none; stroke: #2f6dd2; stroke-width: 1.4; stroke-dasharray: 6 4; }
.perfil-critico { fill: none; stroke: #df4652; stroke-width: 1.2; }
.perfil-critico-marca { fill: #df4652; }
.perfil-eixo { stroke: #9aa8a3; stroke-width: 1; }
.perfil-grade { stroke: #dde5e1; stroke-width: 1; }
.perfil-tick { fill: #848f8b; font-size: 9.5px; }

/* Isométrico */
.iso-tubo-succao { fill: none; stroke: #2f6dd2; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.iso-tubo-recalque { fill: none; stroke: #df4652; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.iso-bomba { fill: #ffffff; stroke: #24302c; stroke-width: 1.6; }
.iso-peca { fill: #ffffff; stroke: #24302c; stroke-width: 1.2; }
.iso-eixo { stroke: #9aa8a3; stroke-width: 1; }
.iso-eixo-rotulo { fill: #7d8b86; font-size: 9.5px; }

/* --------------------------------------------------------------- tabelas e cartões */

.criterio-fonte { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
.criterio-forca {
  display: inline-block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; margin-right: 5px; vertical-align: 1px;
}
.criterio-forca.exigido { background: #24302c; color: #fff; }
.criterio-forca.recomendado { background: #e6efeb; color: #4a5b56; }
.criterio-forca.adotado { background: #f6efe0; color: #8a6212; }

.check-row.is-discreta .check-bar { display: none; }
.check-row.is-discreta .metric.util strong { font-size: 12px; color: var(--muted); font-weight: 400; }

.fronteira {
  margin: 14px 0 0; padding: 12px 14px; font-size: 11.5px; line-height: 1.55;
  color: #4a5b56; background: #f6f9f7; border: 1px solid var(--line);
  border-left: 3px solid #8a6212; border-radius: 10px;
}
.fronteira strong { color: var(--ink); font-weight: 500; }

@media (max-width: 1100px) {
  .peca-row, .peca-head { grid-template-columns: 42px minmax(0, 1fr) 46px 48px 20px; }
}

/* Ferramentas do canvas -----------------------------------------------------
 *
 * Mesmo vocabulário da paleta de /vigas/: botão com símbolo grande e rótulo
 * curto, ativo em verde EP, e a barra de modo logo abaixo dizendo o que o
 * clique seguinte vai fazer.
 */
.tool-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tool-button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 7px 8px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  color: var(--muted); font: inherit; line-height: 1;
}
.tool-button b { font-size: 15px; font-weight: 400; color: #24302c; }
.tool-button span { font-size: 10px; letter-spacing: .02em; }
.tool-button:hover { border-color: #b6c7c1; }
.tool-button.active { background: #0d3b2e; border-color: #0d3b2e; color: #d9ece4; }
.tool-button.active b { color: #fff; }
.tool-button.danger-tool.active { background: #a3312a; border-color: #a3312a; color: #ffe4e2; }

.canvas-mode {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 11px; margin-bottom: 8px;
  background: #f2f6f4; border: 1px solid var(--line); border-radius: 8px;
}
.canvas-mode strong { font-size: 10px; font-weight: 600; letter-spacing: .09em; color: #0d3b2e; }
.canvas-mode span { font-size: 11.5px; color: var(--muted); }
.canvas-mode.is-aviso { background: #fdf6ec; border-color: #e8d4ae; }
.canvas-mode.is-aviso span { color: #8a6212; }

.tool-options { margin-bottom: 8px; }
.tool-options > span { display: block; font-size: 9.5px; letter-spacing: .09em; color: var(--muted); margin-bottom: 5px; }
.peca-escolhas { display: flex; flex-wrap: wrap; gap: 5px; }
.peca-escolhas button {
  padding: 5px 9px; cursor: pointer; font: inherit; font-size: 11px;
  background: #fff; border: 1px solid var(--line); border-radius: 7px; color: var(--muted);
}
.peca-escolhas button.active { background: #0d3b2e; border-color: #0d3b2e; color: #fff; }

/* Alvos de clique no desenho ------------------------------------------------ */
.alvo { cursor: pointer; }
/* Faixa de acerto invisível: linha de 2 px é alvo pequeno demais para o mouse. */
.alvo-linha { stroke: transparent; stroke-width: 16; cursor: pointer; }
.alvo-peca { fill: transparent; cursor: pointer; }
#station-canvas .is-selected { stroke: #0d8a5f; stroke-width: 2.4; }
#station-canvas .alvo-linha.is-selected { stroke: rgba(13, 138, 95, .22); stroke-width: 14; }
#station-canvas.modo-mover { cursor: grab; }
#station-canvas.modo-inserir { cursor: crosshair; }
#station-canvas.modo-apagar { cursor: not-allowed; }

.inspector-hint {
  margin: 0 0 14px; padding: 10px 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--muted); background: #f2f6f4; border: 1px dashed #cfdad5; border-radius: 8px;
}
.panel-actions { display: flex; gap: 10px; }

/* Num painel de 350 px o título e dois botões de texto não cabem lado a lado:
 * "Estação e traçado" quebrava em duas linhas e encostava em "Limpar modelo". */
.input-panel .panel-heading { display: block; }
.input-panel .panel-heading .panel-actions { margin-top: 8px; }

/* Corte esquemático — símbolos de tubulação.
 *
 * O desenho de uma elevatória se lê pelos símbolos: registro tem volante,
 * retenção tem portinhola e sentido, redução excêntrica tem o topo reto. A
 * folha de estilo carrega a hierarquia de traço; o módulo `simbolos.mjs`
 * carrega a geometria. */
.sim-traco { fill: none; stroke: #24302c; stroke-width: 1.3; stroke-linecap: round; }
.sim-corpo { fill: #fff; stroke: #24302c; stroke-width: 1.3; stroke-linejoin: round; }
.sim-portinhola { fill: none; stroke: #24302c; stroke-width: 1.5; }
.sim-seta { fill: #24302c; stroke: none; }
.sim-crivo { fill: #eef3f0; stroke: #24302c; stroke-width: 1.2; }
.sim-hachura { stroke: #7d8c87; stroke-width: .7; }
/* O topo reto é a razão de ser da redução excêntrica: reforçado. */
.sim-topo-reto { stroke: #24302c; stroke-width: 2.1; }

.bomba-voluta { fill: #fff; stroke: #24302c; stroke-width: 1.6; }
.bomba-rotor { fill: #24302c; stroke: none; }
.bomba-motor { fill: #f2f6f4; stroke: #24302c; stroke-width: 1.4; stroke-linejoin: round; }
.bomba-base { stroke: #24302c; stroke-width: 2.2; }
.bomba-rotulo { font-size: 11px; font-weight: 600; fill: #24302c; }
.simbolo-bomba.reserva .bomba-motor { fill: #fff; stroke-dasharray: 4 2; }

.reserv-parede { fill: #fff; stroke: #24302c; stroke-width: 1.8; }
.reserv-agua { fill: #dceaf7; stroke: none; }
.reserv-rotulo { font-size: 9px; font-weight: 600; fill: #24302c; letter-spacing: .06em; }
.na-marca { fill: #2f6dd2; stroke: none; }
.na-linha { stroke: #2f6dd2; stroke-width: 1; }
.na-rotulo { font-size: 8px; fill: #4a5b56; }

.terreno-linha { stroke: #24302c; stroke-width: 1.6; }
.terreno-hachura { stroke: #9aa8a3; stroke-width: .8; }

.tubo-succao.parede { fill: none; stroke: #2f6dd2; stroke-width: 1.5; }
.tubo-succao.eixo { fill: none; stroke: #2f6dd2; stroke-width: .6; stroke-dasharray: 7 3 1 3; opacity: .55; }
.tubo-recalque.parede { fill: none; stroke: #df4652; stroke-width: 1.5; }
.tubo-recalque.eixo { fill: none; stroke: #df4652; stroke-width: .6; stroke-dasharray: 7 3 1 3; opacity: .55; }

.chamada-peca { fill: none; stroke: #7d8c87; stroke-width: .8; }
.cota-linha { stroke: #4a5b56; stroke-width: .9; }
.cota-seta { fill: none; stroke: #4a5b56; stroke-width: 1.1; }
.quebra-escala { stroke: #7d8c87; stroke-width: 1.4; }

/* Pontos do traçado.
 *
 * `.alvo-ponto` é área de clique, e precisa ser invisível: sem regra o SVG
 * pinta de preto por padrão, e o ponto virava uma bola de 24 px que engolia a
 * cota e o traçado. */
.alvo-ponto { fill: transparent; cursor: pointer; }
.alvo-ponto:hover { fill: rgba(47, 109, 210, .12); }
.ponto-marca { fill: #fff; stroke: #2f6dd2; stroke-width: 1.8; pointer-events: none; }
.ponto-marca.recalque { stroke: #df4652; }
.ponto-marca.tem-peca { fill: #2f6dd2; }
.ponto-marca.recalque.tem-peca { fill: #df4652; }
.ponto-marca.selecionado { stroke: #101715; stroke-width: 2.6; }
.grade { stroke: #dde5e2; stroke-width: .7; }
.linha-succao { fill: none; stroke: #2f6dd2; stroke-width: 2.2; stroke-linejoin: round; }
.linha-recalque { fill: none; stroke: #df4652; stroke-width: 2.2; stroke-linejoin: round; }
.poco-planta { fill: #fff; stroke: #24302c; stroke-width: 1.6; }
.poco-agua { fill: #dceaf7; stroke: none; }
.nivel-guia { stroke: #2f6dd2; stroke-width: 1; }
.bomba-corpo { fill: #fff; stroke: #24302c; stroke-width: 1.8; }
/* Alvo de seleção no corte: o esquema não tem coordenada, mas a peça precisa
 * abrir o inspetor — sem isso a sucção fica sem nenhuma forma de ser editada. */
.alvo-simbolo { fill: transparent; cursor: pointer; }
.alvo-simbolo:hover { fill: rgba(47, 109, 210, .12); }

/* Roteiro de lançamento.
 *
 * Onze blocos de entrada não sugerem por onde começar. A faixa numerada dá a
 * ordem de montagem — captação, sucção, conjunto, recalque, chegada,
 * verificar — e cada etapa leva à vista certa e arma a ferramenta certa. */
.fluxo-lancamento {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: #f7faf9;
}
.fluxo-lancamento button {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.fluxo-lancamento button span {
  font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: var(--muted);
}
.fluxo-lancamento button:hover { background: #eaf1ee; }
.fluxo-lancamento button.ativa { background: var(--ink); color: #fff; border-color: var(--ink); }
.fluxo-lancamento button.ativa span { color: #9fc7b6; }
.fluxo-lancamento i { color: #b9c6c1; font-style: normal; font-size: 11px; }

/* Tabela de peças — a entrada principal deste produto.
 *
 * Cada linha traz marca, nome, K editável, quantidade e K·n calculado. É a aba
 * Perdas da planilha, com o K aberto para edição porque o valor de manual não
 * foi conferido em fonte primária e o projetista pode ter medido o seu. */
.peca-tabela { margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
/* Duas linhas por peça: num painel de 350 px, seis colunas deixam o nome com
 * 110 px, e "Válvula de pé com crivo" quebra em quatro linhas. Marca e nome
 * ocupam a primeira faixa; K, quantidade e K·n a segunda. */
.peca-cabecalho { display: none; }
.peca-linha {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 54px 46px 26px;
  grid-template-areas: "marca nome nome nome remover" "marca k qtd kn kn";
  gap: 3px 6px; align-items: center; padding: 7px 8px;
}
.peca-linha .marca { grid-area: marca; align-self: start; padding-top: 1px; }
.peca-linha .rotulo { grid-area: nome; }
.peca-linha input[data-campo="k"] { grid-area: k; }
.peca-linha input[data-campo="quantidade"] { grid-area: qtd; }
.peca-linha .kn { grid-area: kn; }
.peca-linha .remover { grid-area: remover; align-self: start; }
.peca-linha input::placeholder { color: #b3bfbb; }
.peca-cabecalho { background: #f2f6f4; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.peca-linha { border-top: 1px solid var(--line); font-size: 12px; }
.peca-linha .marca { font-weight: 600; font-size: 11px; }
.peca-linha .rotulo { color: var(--ink); line-height: 1.25; }
.peca-linha .kn { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.peca-linha .kn::before { content: "K·n "; font-size: 9px; letter-spacing: .05em; }
/* A folha base dá 42 px de altura a todo `input`, o que é certo num campo de
 * formulário e errado numa célula de tabela: dobrava a altura da linha. */
.peca-linha input {
  width: 100%; min-height: 0; height: 24px; padding: 2px 5px;
  font-size: 12px; text-align: right; line-height: 1.2;
}
.peca-linha .remover {
  border: none; background: transparent; color: #b03a3a; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.peca-linha .remover:hover { color: #7d2020; }
.peca-vazia { margin: 0; padding: 10px 8px; font-size: 12px; color: var(--muted); }
.peca-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.peca-add select { flex: 1; min-width: 0; }

.criterio { margin-top: 5px !important; font-size: 10.5px !important; }
.criterio-forca {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}
.criterio-forca.exigido { background: #e4efe9; color: #1d6b4e; }
.criterio-forca.recomendado { background: #f0f0ea; color: #77704f; }

/* Varredura de diâmetro: o adotado se destaca, o fora de norma recua. */
tr.adotado { background: #eaf5ef; }
tr.adotado td { font-weight: 500; }
tr.fora td { color: #97a3a0; }

/* Esquema com os campos de geometria sobre as cotas.
 *
 * A topologia de uma elevatória é fixa, então o desenho não precisa de
 * ferramenta: precisa de campo. Cada medida fica na cota a que pertence, e o
 * usuário digita onde olha, em vez de procurar o campo num painel ao lado. */
.esquema-card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 16px 18px; margin-bottom: 14px;
}
.esquema { position: relative; margin-top: 6px; }
.esquema svg { width: 100%; display: block; background: #fbfdfc; border-radius: 9px; }

/* Campo compacto: só o número e a unidade em destaque; o rótulo é uma legenda
 * pequena acima. Caixa grande sobre o desenho tapa a geometria que ela descreve. */
.cota-campo {
  /* Margem zerada: `label` herda margem do formulário, e margem desloca até
   * elemento posicionado — era o que punha cada campo 12 px abaixo do `top`
   * calculado, e o desencontro crescia com a página. */
  margin: 0;
  position: absolute; display: grid; grid-template-columns: auto auto; grid-auto-rows: min-content;
  gap: 0 3px; padding: 2px 5px 3px;
  border: 1px solid #d7e2de; border-radius: 5px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(16, 23, 21, .06);
  font-size: 11px; white-space: nowrap;
}
.cota-campo span {
  grid-column: 1 / -1; color: var(--muted);
  font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3;
}
.cota-campo input {
  width: 62px; height: 17px; min-height: 0; padding: 0 2px;
  border: none; border-bottom: 1px solid #cfdad6;
  font: inherit; font-size: 11.5px; font-weight: 600; text-align: right; background: transparent;
}
.cota-campo input:focus { outline: none; border-bottom-color: #087f5b; background: #f2f9f6; }
.cota-campo i { font-style: normal; font-size: 9px; color: var(--muted); align-self: end; padding-bottom: 1px; }

/* A posição de cada campo vem de `posicionarCampos()`, em app.mjs, a partir das
 * mesmas constantes que desenham a geometria. Não escreva coordenada aqui: foi
 * o CSS com porcentagens próprias que deixou campo e cota desencontrados. */

.esq-succao { fill: none; stroke: #2f6dd2; stroke-width: 2.6; stroke-linejoin: round; }
.esq-recalque { fill: none; stroke: #df4652; stroke-width: 2.6; stroke-linejoin: round; }
.esq-chamada { stroke: #9aa8a3; stroke-width: .9; }
.esq-cota-linha { stroke: #5c6b66; stroke-width: .9; }
.esq-seta { fill: none; stroke: #5c6b66; stroke-width: 1.2; stroke-linejoin: round; }
.esq-guia { stroke: #c3cec9; stroke-width: .8; stroke-dasharray: 4 3; }

.esquema-nota { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.esquema-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; }
.esquema-legenda span { color: var(--muted); }
.esquema-legenda b { margin-right: 5px; font-weight: 600; }
.esquema-legenda .s b { color: #2f6dd2; }
.esquema-legenda .r b { color: #df4652; }

@media (max-width: 1100px) {
  .cota-campo { font-size: 10px; }
  .cota-campo input { width: 54px; }
}
.sim-generico { font-size: 7px; font-weight: 600; fill: #24302c; }

/* Gráfico de custo por diâmetro: mostra o vale que a tabela só deixa inferir. */
.graf-custo { width: 100%; display: block; margin-bottom: 6px; }
.graf-grade { stroke: #e7edea; stroke-width: 1; }
.graf-total { fill: none; stroke: #101715; stroke-width: 2.4; stroke-linejoin: round; }
.graf-energia { fill: none; stroke: #df8a30; stroke-width: 1.6; stroke-dasharray: 6 3; }
.graf-material { fill: none; stroke: #2f6dd2; stroke-width: 1.6; stroke-dasharray: 6 3; }
.graf-ponto { fill: #101715; }
.graf-adotado { stroke: #087f5b; stroke-width: 1.4; stroke-dasharray: 4 3; }
.graf-fora { fill: #f4f6f5; opacity: .75; }
.graf-legenda { display: flex; gap: 18px; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
/* A cor vem de `--cor`, e a FORMA decide como ela é usada. Antes o `i` tinha
 * altura zero e pintava só com `border-top`: quem passasse `background` inline
 * não via cor nenhuma, e a marca saía na cor herdada. */
.graf-legenda i {
  display: inline-block; width: 20px; height: 0; margin-right: 6px; vertical-align: middle;
  border-top: 2.4px solid var(--cor, currentColor);
}
.graf-legenda i[data-forma="tracejada"] { border-top-style: dashed; }
.graf-legenda i[data-forma="ponto"] { width: 10px; height: 10px; border: none; border-radius: 50%; background: var(--cor); }
.graf-legenda i[data-forma="faixa"] { width: 16px; height: 10px; border: none; border-radius: 2px; background: var(--cor); }
.graf-legenda i.graf-total { border-top-color: #101715; }
.graf-legenda i.graf-energia { border-top-color: #df8a30; border-top-style: dashed; }
.graf-legenda i.graf-material { border-top-color: #2f6dd2; border-top-style: dashed; }

/* --------------------------------------------------------------- resultado */

/* 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 é a área em branco que sobrava. Três
 * colunas fecham duas filas cheias e ainda deixam cada cartão largo o bastante
 * para o rótulo não quebrar. */
.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; }
}

/* ---------------------------------------------------------- quantitativos */

/* A folha herdada corta qualquer .table-wrap em 330 px, que serve para a tabela
 * de duas linhas das perdas e esconde o total de um quadro de dezoito. Aqui o
 * quadro cresce, e cabeçalho e total ficam presos: rolar uma lista de compras
 * sem ver o que é cada coluna nem quanto dá no fim não serve para conferir. */
.quantitativos-wrap { max-height: 620px; }
/* A folha herdada centraliza toda célula. Descrição centralizada numa lista de
 * compras não alinha à esquerda com a linha de cima, e o olho perde a coluna. */
.quantitativos th, .quantitativos td { text-align: left; }
.quantitativos thead th { position: sticky; top: 0; z-index: 2; background: #edf4f1; }
.quantitativos tfoot td { position: sticky; bottom: 0; z-index: 2; }
.quantitativos td.num, .quantitativos th.num { text-align: right; white-space: nowrap; }
.quantitativos tr.grupo th {
  padding-top: 14px; background: #f2f7f5; color: var(--ink);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.quantitativos td.obs { color: var(--muted); font-size: 11px; }
.quantitativos .sem-preco { color: #b3bfba; }
.quantitativos tfoot td { border-top: 2px solid var(--ink); background: #fbfdfc; font-weight: 600; }

/* ------------------------------------------------------------- memorial */

/* O memorial era um bloco de texto pré-formatado: sem hierarquia, a leitura
 * exigia procurar o capítulo linha a linha. Aqui cada capítulo é uma seção
 * numerada, os dados vão em tabela e a equação mostra fórmula, substituição e
 * resultado — que é como se confere conta à mão. */
.memorial {
  max-width: 960px; border: 1px solid var(--line); border-top: 3px solid #087f5b;
  border-radius: 12px; background: #fff; padding: 30px 34px 26px;
  font-size: 13px; line-height: 1.62; color: #3d4d47;
}
.memorial header { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.memorial h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.memorial header p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.memorial .mem-norma { color: #087f5b; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.memorial section { margin-top: 24px; }
.memorial h4 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.memorial h4 i {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 6px; background: #e8f4ef; color: #087f5b;
  font-style: normal; font-size: 11.5px; font-weight: 700;
}
.memorial p { margin: 0 0 8px; }
.memorial .mem-nota { color: var(--muted); font-size: 12px; padding-left: 11px; border-left: 2px solid var(--line); }

/* A equação em três tempos: fórmula, substituição, resultado. Lida em uma
 * linha quando cabe, quebrada nos sinais de igual quando não cabe. */
.memorial .mem-eq {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  margin: 0 0 7px; padding: 8px 12px;
  border-radius: 8px; background: #f7faf9;
  font-size: 13px;
}
.memorial .mem-eq b { min-width: 58px; color: var(--ink); font-weight: 600; }
.memorial .mem-eq .f { color: #4d5d57; }
.memorial .mem-eq .f::before { content: "= "; color: #9aa8a3; }
.memorial .mem-eq .s { color: var(--muted); font-variant-numeric: tabular-nums; }
.memorial .mem-eq .r { color: #087f5b; font-weight: 600; font-variant-numeric: tabular-nums; }
.memorial .mem-eq sub { font-size: .78em; }

/* O memorial é documento: se lê corrido, e não em caixinhas de rolagem. */
.memorial .table-wrap { margin: 0 0 10px; max-height: none; overflow-x: auto; }
.memorial .mem-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.memorial .mem-tabela th {
  padding: 7px 10px; border-bottom: 1.5px solid #c8d5d0; background: transparent;
  color: #4d5d57; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
.memorial .mem-tabela td { padding: 6px 10px; border-bottom: 1px solid #eef3f1; text-align: left; }
.memorial .mem-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.memorial footer { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* Figuras do memorial. */
.memorial .mem-figura { margin: 12px 0 16px; padding: 0; }
.memorial .mem-figura .figura-svg,
.memorial .mem-figura .graf-custo { display: block; width: 100%; height: auto; }
.memorial .mem-figura figcaption {
  margin-top: 6px; color: var(--muted); font-size: 11.5px; font-style: italic; text-align: center;
}
.memorial .graf-legenda { justify-content: center; margin-top: 2px; }
.memorial .graf-legenda i { border-radius: 2px; }

/* Campos que só existem no arranjo em poço seco.
 *
 * `[hidden]` só esconde por causa da folha do navegador, que declara
 * `display: none` com especificidade zero — e `.cota-campo { display: grid }`
 * a vence. Sem esta regra o campo do comprimento da sucção continuava na tela
 * no arranjo submersível, convidando a preencher o que o cálculo ignora. */
.so-poco-seco[hidden],
.cota-campo[hidden] { display: none !important; }

/* Faixa viável do poço, no gráfico da janela. */
.graf-faixa { fill: rgba(8, 127, 91, .10); }
.graf-limite { stroke: #df4652; stroke-width: 1.4; stroke-dasharray: 7 4; fill: none; }
.graf-partidas { fill: none; stroke: #df8a30; stroke-width: 2.2; }
.graf-detencao { fill: none; stroke: #2f6dd2; stroke-width: 2.2; }

/* Interpretações declaradas: o que foi adotado sem confirmar. */
.interpretacao { border: 1px solid #e6d9b8; background: #fdfaf1; border-radius: 9px; padding: 11px 13px; margin-bottom: 9px; }
.interpretacao h5 { margin: 0 0 5px; font-size: 12.5px; }
.interpretacao p { margin: 0 0 4px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.interpretacao p b { color: var(--ink); font-weight: 600; }
.interpretacao .nao-confirmado { color: #a9601c; font-weight: 600; }

/* Máscara sob rótulo que interrompe traço, como no desenho técnico. */
.rotulo-mascara { fill: #ffffff; opacity: .88; }
.memorial .graf-legenda i { border-radius: 2px; }

/* Ajuda de preenchimento da curva. Recolhida por padrão: quem já sabe de onde
 * tirar a curva não precisa dela ocupando o painel. */
.ajuda-curva { margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfc; }
.ajuda-curva summary {
  cursor: pointer; padding: 8px 11px; font-size: 12px; font-weight: 600; color: #087f5b;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.ajuda-curva summary::before { content: "?"; display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; background: #087f5b; color: #fff; font-size: 10px; }
.ajuda-curva summary::-webkit-details-marker { display: none; }
.ajuda-curva[open] summary { border-bottom: 1px solid var(--line); }
.ajuda-corpo { padding: 10px 12px 12px; }
.ajuda-corpo p { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.ajuda-corpo p b { color: var(--ink); font-weight: 600; }
.ajuda-links { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.ajuda-links li { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: baseline; font-size: 11.5px; }
.ajuda-links a { color: #2f6dd2; font-weight: 600; text-decoration: none; }
.ajuda-links a:hover { text-decoration: underline; }
.ajuda-links span { color: var(--muted); font-size: 11px; }
.ajuda-rodape { font-size: 10.5px; font-style: italic; }

/* Estágios de bombeamento, desenhados como faixas entre liga e desliga. */
.estagio { fill: rgba(47, 109, 210, .22); stroke: #2f6dd2; stroke-width: 1.2; }
.estagio.reserva { fill: rgba(122, 138, 132, .16); stroke: #8a968f; stroke-dasharray: 4 3; }
.cota-critica { stroke: #c0392b; stroke-width: 1.8; }
.cota-alvo { stroke: #a9601c; stroke-width: 1.3; stroke-dasharray: 7 4; }

/* Linha de conjunto: nome, reserva e as duas cotas.
 *
 * `display: block` porque `.peca-linha` é um grid de áreas NOMEADAS, feito para
 * a linha de peça — e os dois blocos da linha de conjunto caíam dentro dessas
 * áreas, embaralhando rótulo com campo. */
.conjunto-linha { display: block; }
.conjunto-linha .peca-topo { display: flex; align-items: center; gap: 8px; }
.conjunto-linha .conj-rotulo {
  width: 62px; font-weight: 600; font-size: 12px;
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: var(--surface);
}
.conjunto-linha .conj-reserva {
  display: flex; align-items: center; gap: 4px; margin-right: auto;
  font-size: 11px; color: var(--muted); white-space: nowrap;
}
.conjunto-linha .conj-reserva input { width: auto; margin: 0; }
.conjunto-linha .peca-remover { justify-self: end; }
.conjunto-linha .peca-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.conjunto-linha .peca-baixo label {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted);
}
.conjunto-linha .peca-baixo input {
  width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px;
  font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; background: var(--surface);
}

/* ─────────────────────────────────────────────── canvas de topologia ───── */

/* Entradas à ESQUERDA, canvas à direita — a composição padrão da plataforma.
 * A primeira versão trocou os dois de lado.
 *
 * A largura de página, o centramento e a escada de breakpoints vêm de
 * `.workspace`, na folha-base. Aqui só se ajusta a coluna de entrada, mais
 * larga que o padrão porque a paleta do canvas mora nela. A primeira versão
 * declarava um `.rede-workspace` solto, sem `.workspace`: a página ficava
 * colada nas duas bordas da janela enquanto todos os outros produtos
 * respiravam 24 px de cada lado. */
/* NENHUMA coluna é redeclarada aqui. A escada é da base, em
 * `shared/ep-hidrologia.css`, e ela mantém as duas colunas descendo
 * 350 → 320 → 275 → 250 → 230 px, empilhando só no último degrau.
 *
 * A primeira versão fixava 372 px e empilhava a 1180 px. Isso parecia inofensivo
 * a 1440, onde tudo cabe, e quebrava o padrão em qualquer janela de notebook:
 * a 1150 px este produto punha o canvas ABAIXO das entradas enquanto os outros
 * continuavam lado a lado, com 320 px de coluna. Entradas à esquerda e canvas à
 * direita é a composição da plataforma, e um produto que a abandona antes dos
 * outros não é responsivo — é divergente.
 */

/* O painel de resultados atravessa as duas colunas: o canvas precisa da
 * largura toda, e a tabela de trechos também. */
.rede-workspace > .results-panel { grid-column: 1 / -1; }

.canvas-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 18px; }
.canvas-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 9px;
  background: #fbfdfc; overflow: hidden;
}
.canvas-wrap svg#rede-svg { width: 100%; display: block; touch-action: none; }
.rede-grade { stroke: #e4ebe8; stroke-width: 1; }

/* O cursor diz o modo. Sem isso a ferramenta ativa vira adivinhação. */
#rede-svg[data-modo="selecionar"] { cursor: default; }
#rede-svg[data-modo="no"], #rede-svg[data-modo="consumidor"],
#rede-svg[data-modo="reservatorio"], #rede-svg[data-modo="pressao"] { cursor: crosshair; }
#rede-svg[data-modo="trecho"], #rede-svg[data-modo="aducao"] { cursor: alias; }

/* Paleta DENTRO do canvas, como manda o padrão: a ferramenta fica ao alcance
 * do desenho, e não numa barra separada que obriga a olhar para outro lugar. */
.paleta {
  position: absolute; top: 10px; left: 10px; width: 132px;
  display: grid; gap: 3px; padding: 8px;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(16, 23, 21, .07);
}
.paleta-grupo {
  margin: 4px 0 1px; font-size: 8.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.paleta-grupo:first-child { margin-top: 0; }
.paleta-item {
  display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 7px;
  padding: 5px 7px; border: 1px solid transparent; border-radius: 7px;
  background: none; cursor: pointer; font: inherit; font-size: 11px; color: var(--ink); text-align: left;
}
.paleta-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paleta-item:hover:not(:disabled) { background: #f2f6f4; }
.paleta-item.ativa { background: #eaf5f0; border-color: #087f5b; color: #087f5b; font-weight: 600; }
.paleta-item:disabled { opacity: .38; cursor: default; }

.canvas-rodape {
  position: absolute; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 14px;
  padding: 4px 9px; background: rgba(255, 255, 255, .92); border-radius: 7px;
  font-size: 11px; color: var(--muted);
}
.canvas-rodape label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.canvas-rodape input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #087f5b; }

.canvas-dica { margin: 9px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; min-height: 2.6em; }
.canvas-dica.destaque { color: #087f5b; font-weight: 600; }

.canvas-problemas {
  margin-top: 10px; padding: 10px 13px; border: 1px solid #e6b8b8; border-radius: 9px;
  background: #fdf3f3; font-size: 12px; color: #8a2b2b; line-height: 1.55;
}
.canvas-problemas ul { margin: 5px 0 0; padding-left: 18px; }

/* Elementos do desenho */
.rede-no { fill: #fff; stroke: #24302c; stroke-width: 1.8; cursor: pointer; }
.rede-no.fonte { fill: #087f5b; stroke: #065f45; }
.rede-no.seca { stroke-dasharray: 4 3; }
.rede-no.ativo { stroke: #087f5b; stroke-width: 3; }
.rede-no.problema { stroke: #df4652; stroke-width: 3; }
.rede-lamina { stroke: #b9d8ef; stroke-width: 2; }
.rede-manometro { fill: none; stroke: #cfe8dd; stroke-width: 1.8; stroke-linecap: round; }
.rede-ligando { fill: none; stroke: #087f5b; stroke-width: 2; stroke-dasharray: 5 4; }
.rede-trecho { stroke: #2f6dd2; stroke-width: 2.6; cursor: pointer; }
.rede-trecho.aducao { stroke-dasharray: 9 5; }
.rede-trecho.ativo { stroke: #087f5b; stroke-width: 4; }
.rede-seta { fill: #2f6dd2; }
.rede-seta.ativo { fill: #087f5b; }
.rede-rotulo-fundo { fill: #fbfdfc; opacity: .9; }
.rede-marca-consumo { fill: #df8a30; }

.painel-selecao { min-height: 40px; }
.selecao-titulo { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.selecao-titulo b { color: var(--ink); font-size: 13.5px; }
label.caixa { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: start; font-size: 12px; margin-top: 8px; }
label.caixa small { grid-column: 2; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.linha-critica { background: #f2f9f6; }
.criterio-forca.adotado { background: #fdf3e3; color: #8a5a0b; }

/* Vista: zoom e enquadramento. */
.canvas-zoom {
  position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 2px;
  padding: 3px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 2px 8px rgba(16, 23, 21, .06);
}
.canvas-zoom button {
  min-width: 26px; height: 24px; padding: 0 7px; border: none; border-radius: 6px;
  background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink);
}
.canvas-zoom button:hover { background: #f2f6f4; }
.canvas-zoom span { min-width: 44px; text-align: center; font-size: 11px; color: var(--muted); }
.canvas-atalho { font-size: 10.5px; opacity: .85; }

/* O cursor muda ao MIRAR o elemento, e não só ao clicar. */
#rede-svg[data-sobre="no"] { cursor: grab; }
#rede-svg[data-sobre="fonte"] { cursor: grab; }
#rede-svg[data-sobre="trecho"] { cursor: pointer; }
#rede-svg[data-modo="trecho"][data-sobre="no"],
#rede-svg[data-modo="aducao"][data-sobre="no"],
#rede-svg[data-modo="reservatorio"][data-sobre="no"],
#rede-svg[data-modo="pressao"][data-sobre="no"] { cursor: copy; }
#rede-svg.arrastando-vista { cursor: grabbing; }

/* E o elemento sob o ponteiro se destaca, para o alvo ser inequívoco. */
.sob-o-ponteiro { filter: drop-shadow(0 0 3px rgba(8, 127, 91, .55)); }
circle.sob-o-ponteiro, rect.sob-o-ponteiro { stroke-width: 3; }
line.sob-o-ponteiro { stroke-width: 4.5; }

/* Memória de cálculo. */
.mem-cap { margin-bottom: 22px; }
.mem-cap h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font-size: 15px; }
.mem-cap h4 span {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: #087f5b; color: #fff; font-size: 11px; font-weight: 600;
}
.mem-cap p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.mem-cap p b, .mem-cap p i { color: var(--ink); }
.mem-cap p i { font-style: normal; font-family: Georgia, serif; }
.mem-eq {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 9px 13px; margin-bottom: 7px; border-radius: 8px; background: #f6faf8; font-size: 12.5px;
}
.mem-eq b { font-weight: 600; color: #087f5b; }
.mem-eq > span { color: var(--ink); }
.mem-eq .mem-sub { grid-column: 2; font-size: 11.5px; color: var(--muted); }
.mem-eq strong { grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ══════════════════════════════════════════════ próprio da rede malhada ═══ */

/* Lista de fontes: a malha aceita mais de uma, e cada uma tem tipo e carga. */
.lista-fontes { display: grid; gap: 10px; }
.fonte-linha {
  display: grid; gap: 8px; padding: 11px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--chart-blue);
  border-radius: 9px; background: var(--surface);
}
.fonte-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fonte-cabeca b { color: var(--navy); font-size: 13px; }
.fonte-linha label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.fonte-linha .field-help { margin: 0; }

/* O sentido do escoamento é RESULTADO. A inversão e o encontro de duas frentes
 * são as duas coisas que a rede ramificada nunca mostra, e por isso têm cor
 * própria em vez de se confundirem com o traço comum. */
.rede-trecho.invertido { stroke-dasharray: none; }
.rede-seta.invertido { fill: #c9761f; }
.rede-seta.encontro { fill: #c9761f; }
.rede-trecho.encontro { stroke: #c9761f; }
.rede-trecho.critico { stroke-width: 4.5; }

.selecao-sentido {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500;
  color: #c9761f; letter-spacing: .01em;
}

.mem-subtitulo {
  margin: 22px 0 8px; color: var(--navy); font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
}
.lista-avisos { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.lista-avisos li + li { margin-top: 6px; }

/* A troca do nó com o exterior, no desenho. Números tabulares para as colunas
 * de sinal alinharem entre nós vizinhos — sem isso o "+" e o "−" dançam. */
.rede-troca { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Legenda do desenho, FORA do SVG. Dentro dele ela some quando o enquadramento
 * muda — a paleta cobre um canto, o controle de zoom cobre o outro. */
.canvas-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 9px 2px 0; font-size: 11px; color: var(--muted);
}
.canvas-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.canvas-legenda span::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--cor, currentColor); flex: none;
}

/* Ú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. */