/* Filtro anaeróbio e leito fixo.
 *
 * Herda a folha da família de saneamento. A geometria de página NÃO é
 * redeclarada; só a colocação do painel de resultados, que é do produto.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

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

/* --------------------------------------------------------------- entrada */

.fonte-normativa {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7;
  font-size: .78rem; line-height: 1.6; color: #2f4c42;
}
.fonte-normativa b { color: #0e6b4f; }

/* O fator de volume em destaque, ao lado da escolha do meio: é a informação
 * central do produto, e ela muda quando o meio muda. */
.destaque-fator {
  margin: 8px 0 4px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid #0e6b4f; background: #f4f9f7;
  font-size: .78rem; line-height: 1.5; color: #2f4c42;
}
.destaque-fator .numero {
  display: block; font-size: 1.5rem; font-weight: 600; color: #0e6b4f;
  font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.destaque-fator .conta { font-variant-numeric: tabular-nums; }
.destaque-fator.diverge { border-color: #d9a441; background: #fdf9f0; color: #5c4718; }
.destaque-fator.diverge .numero { color: #a4670f; }

.constantes { display: grid; gap: 6px; margin-top: 8px; }
.constante {
  display: grid; grid-template-columns: 3.8rem 1fr 6.4rem; gap: 2px 8px; align-items: center;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #d7e0dc); background: #fff;
  font-size: .76rem;
}
.constante > .simbolo {
  font-weight: 600; color: var(--ink, #24302c); font-size: .82rem; text-align: center;
}
.constante > label { display: contents; }
.constante input {
  width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; text-align: right; font-variant-numeric: tabular-nums; background: #fff;
}
.constante > small {
  grid-column: 2 / -1; color: var(--muted, #848f8b); line-height: 1.45; font-size: .7rem;
}
.constante.fora-da-faixa { border-color: #d9a441; background: #fdf9f0; }
.constante .aviso { color: #8a5a0f; }

/* ---------------------------------------------------------------- desenho */

.fa-tanque { fill: none; stroke: #24302c; stroke-width: 2.2; }
.fa-leito { fill: #eef0e8; stroke: #6b7a4f; stroke-width: 1.4; }
.fa-liquido { fill: #e6f1f5; stroke: #1f7f8c; stroke-width: 1.2; }
.fa-fundo-falso { fill: #f3f1ec; stroke: #848f8b; stroke-width: 1.4; }
.fa-na { stroke: #1f7f8c; stroke-width: 1.4; }
.fa-corrente { stroke: #24302c; stroke-width: 1.8; }
.fa-gas { fill: none; stroke: #a4670f; stroke-width: 1.6; stroke-dasharray: 6 3; }
.fa-lodo { stroke: #a4670f; stroke-width: 1.8; }
.fa-ponto { fill: #0e6b4f; }
.fa-rotulo { font-size: 11px; fill: #47544f; }
.fa-rotulo-nome { font-size: 11px; fill: #24302c; font-weight: 600; }

/* O gráfico do volume por meio: é o 1,60 visualizado. */
.fa-barra-adotado { fill: #0e6b4f; }
.fa-barra-outro { fill: #cfe0d8; }
.fa-formula { stroke: #b02a37; stroke-width: 1.6; stroke-dasharray: 7 4; }
.fa-eixo { stroke: #24302c; stroke-width: 1.2; }
.fa-grade { stroke: #d7e0dc; stroke-width: .8; }

.canvas-legenda {
  margin: 8px 2px 0; font-size: .78rem; line-height: 1.55; color: var(--muted, #848f8b);
}
.canvas-legenda b { color: var(--ink, #24302c); }

/* ------------------------------------------------------- quadros das abas */

.dois-limites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 14px; }
.dois-limites > div {
  padding: 11px 13px; border-radius: 10px; border: 1px dashed var(--line, #d7e0dc); background: #fff;
}
.dois-limites > div.adotado { border-style: solid; border-color: #0e6b4f; background: #f4f9f7; }
.dois-limites h4 { margin: 0 0 4px; font-size: .82rem; }
.dois-limites .base { font-size: .68rem; color: var(--muted, #848f8b); }
.dois-limites .numero {
  display: block; font-size: 1.35rem; margin: 8px 0 2px; font-variant-numeric: tabular-nums;
}
.dois-limites .unidade { font-size: .7rem; color: var(--muted, #848f8b); }
.dois-limites .marca {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: .66rem; background: #0e6b4f; color: #fff;
}

.avisos { display: grid; gap: 8px; margin: 12px 0 16px; }
.aviso-caixa {
  padding: 10px 13px; border-radius: 10px; border: 1px solid #e2d3ae;
  border-left: 3px solid #d9a441; background: #fdf9f0;
  font-size: .78rem; line-height: 1.55; color: #5c4718;
}
.aviso-caixa.chave { border-color: #cfe0d8; border-left-color: #0e6b4f; background: #f4f9f7;
  color: #2f4c42; }
.aviso-caixa.grave { border-color: #e0b4b8; border-left-color: #b02a37; background: #fdf4f4;
  color: #6b2028; }

.conama {
  margin: 12px 0 16px; padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--line, #d7e0dc); background: #fff;
}
.conama.sim { border-color: #0e6b4f; background: #f4f9f7; }
.conama.nao { border-color: #b02a37; background: #fdf4f4; }
.conama h4 { margin: 0 0 10px; font-size: .84rem; }
.conama p { margin: 8px 0 0; font-size: .8rem; line-height: 1.55; }
.conama-caminhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conama-caminhos > div {
  padding: 9px 11px; border-radius: 8px; border: 1px dashed var(--line, #d7e0dc);
  background: #fff; text-align: center;
}
.conama-caminhos > div.vale { border-style: solid; border-color: #0e6b4f; background: #eef6f2; }
.conama-caminhos span { display: block; font-size: .7rem; color: var(--muted, #848f8b); }
.conama-caminhos b {
  display: block; font-size: 1.05rem; margin: 3px 0 1px; font-variant-numeric: tabular-nums;
}
.conama-caminhos small { font-size: .68rem; color: var(--muted, #848f8b); }
.conama-literal {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: #f7f9f8;
  font-size: .74rem; font-style: italic; color: #47544f;
}

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

.mem-fonte {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #cfe0d8; border-left: 3px solid #0e6b4f; background: #f4f9f7;
  font-size: .8rem; line-height: 1.6; color: #2f4c42;
}
.mem-fonte b { color: #0e6b4f; }

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