/* Águas pluviais prediais — área, calha, condutores e extravasor.
 *
 * Herda a folha da família de saneamento. A geometria de página NÃO é
 * redeclarada — largura, margem e as duas colunas do `.workspace` são da
 * folha-base, e ela mantém a responsividade por uma escada de breakpoints
 * inteira. Aqui só entra a colocação do painel de resultados, que é do produto,
 * e o que o produto tem de próprio: a lista de áreas e o desenho.
 */
@import url("../shared/ep-hidrologia.css");
@import url("../shared/ep-como-usar.css");

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

.areas { display: grid; gap: 8px; margin-top: 8px; }
.area-linha {
  display: grid; grid-template-columns: 1fr 1.2rem; gap: 3px 8px; align-items: center;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #d7e0dc); background: #fff;
}
.area-linha > .nome { font-size: .78rem; font-weight: 600; color: var(--ink, #24302c); }
.area-linha > input.qtd {
  width: 100%; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums;
}
.area-linha > .remover {
  border: 0; background: none; color: #b02a37; cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 0;
}
.area-linha > .marcas {
  grid-column: 1 / -1; font-size: .68rem; color: var(--muted, #848f8b);
  font-variant-numeric: tabular-nums;
}
.area-linha > details { grid-column: 1 / -1; }
.area-linha .campos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  margin-top: 5px; }
.area-linha input.rotulo {
  width: 100%; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; font-size: .78rem; font-weight: 600;
}
.field-grid.quatro { grid-template-columns: repeat(4, 1fr); }
.marca { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .76rem;
  color: var(--muted, #848f8b); }
.marca input { width: auto; }
/* As curvas do gráfico de capacidades, e o corte da calha. */
.pv-vertedor { fill: none; stroke: #0e6b4f; stroke-width: 2.2; }
.pv-orificio { fill: none; stroke: #b02a37; stroke-width: 2.2; }
.pv-tubo { stroke: #1f7f8c; stroke-width: 2.0; stroke-dasharray: 7 4; fill: none; }
.pv-transicao { stroke: #a4670f; stroke-width: 1.4; stroke-dasharray: 4 3; }
.pv-telhado { stroke: #24302c; stroke-width: 2.4; fill: none; }
.pv-parede { fill: #eceee9; stroke: #24302c; stroke-width: 1.8; }
.pv-chuva { stroke: #1f7f8c; stroke-width: 1.2; fill: none; }
.pv-lamina { stroke: #1f7f8c; stroke-width: 1.8; fill: none; }
.pv-soleira { stroke: #a4670f; stroke-width: 2.2; fill: none; }
.pv-entupido { stroke: #b02a37; stroke-width: 1.8; stroke-dasharray: 6 3; fill: none; }
.pv-borda { stroke: #24302c; stroke-width: 2.2; fill: none; }
.pv-agua-cheia { fill: #dfeef4; stroke: none; }
.area-linha .campos label {
  display: grid; gap: 2px; font-size: .66rem; color: var(--muted, #848f8b);
}
.area-linha .campos input {
  width: 100%; padding: 3px 5px; border-radius: 6px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; font-size: .74rem; text-align: right; font-variant-numeric: tabular-nums;
}
.linha-adicionar {
  display: grid; gap: 4px; margin-top: 10px; font-size: .74rem; color: var(--muted, #848f8b);
}
.linha-adicionar select { font: inherit; padding: 5px 6px; border-radius: 7px;
  border: 1px solid var(--line, #d7e0dc); background: #fff; }

.constantes { display: grid; gap: 6px; margin-top: 8px; }
.constante {
  display: grid; grid-template-columns: 3.2rem 1fr 5.6rem; 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.nome { display: contents; }
.constante .rotulo { color: var(--ink, #24302c); line-height: 1.35; }
.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 > details { grid-column: 2 / -1; }
.constante small {
  display: block; margin-top: 4px; 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 */

/* A laje é REFERÊNCIA e o ramal é TUBO: desenhadas com o mesmo peso, as duas
 * linhas quase paralelas de cada pavimento viravam ruído. */
.pv-laje { stroke: #a9b4b0; stroke-width: 1.1; fill: none; }
.pv-prumo { stroke: #1f7f8c; stroke-width: 2.6; fill: none; }
.pv-acelerando { stroke: #a4670f; stroke-width: 5; fill: none; stroke-linecap: butt; }
.pv-ventilacao { stroke: #1f7f8c; stroke-width: 1.6; fill: none; stroke-dasharray: 6 4; }
.pv-ramal { stroke: #0e6b4f; stroke-width: 2; fill: none; }
.pv-coletor { stroke: #1f7f8c; stroke-width: 2.2; fill: none; }
.pv-caixa { fill: #eef5f7; stroke: #24302c; stroke-width: 1.4; }
.pv-gordura { fill: #fdf9f0; stroke: #a4670f; stroke-width: 1.8; }
.pv-terreno { stroke: #8a7f6a; stroke-width: 1.4; fill: none; }
.pv-cota { stroke: #47544f; stroke-width: .9; fill: none; }
.pv-rotulo { font-size: 11px; fill: #47544f; }
.pv-rotulo-nome { font-size: 11px; fill: #24302c; font-weight: 600; }

.pv-eixo { stroke: #24302c; stroke-width: 1.2; }
.pv-grade { stroke: #d7e0dc; stroke-width: .8; }
.pv-densidade { fill: #dfeef4; stroke: #1f7f8c; stroke-width: 1.8; }
.pv-acumulada { fill: none; stroke: #0e6b4f; stroke-width: 1.8; stroke-dasharray: 5 3; }
.pv-projeto { stroke: #0e6b4f; stroke-width: 2.0; }
.pv-media { stroke: #47544f; stroke-width: 1.4; stroke-dasharray: 4 3; }
.pv-atalho { stroke: #b02a37; stroke-width: 1.8; stroke-dasharray: 7 4; }

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

.quadro-governa tr.governa td { background: #f2f9f6; font-weight: 600; }
.quadro-governa tr.governa td:last-child { color: #0e6b4f; }

.tres-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 10px 0 14px; }
.tres-numeros > div {
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line, #d7e0dc);
  background: #fff; text-align: center;
}
.tres-numeros > div.critico { border-color: #b02a37; background: #fdf4f4; }
.tres-numeros > div.bom { border-color: #0e6b4f; background: #f4f9f7; }
.tres-numeros span { display: block; font-size: .7rem; color: var(--muted, #848f8b); }
.tres-numeros b {
  display: block; font-size: 1.3rem; margin: 4px 0 2px; font-variant-numeric: tabular-nums;
}
.tres-numeros small { font-size: .68rem; color: var(--muted, #848f8b); }

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

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

/* Os recolhíveis do painel: procedência da constante e hipótese de uso do
 * aparelho. Ficam fechados porque o que se procura ao rolar é o campo. */
.input-panel details > summary {
  cursor: pointer; font-size: .68rem; color: var(--muted, #848f8b);
  list-style: none; padding: 2px 0; user-select: none;
}
.input-panel details > summary::-webkit-details-marker { display: none; }
.input-panel details > summary::before { content: "▸ "; color: #0e6b4f; }
.input-panel details[open] > summary::before { content: "▾ "; }
.input-panel details > summary:hover { color: #0e6b4f; }
.input-panel details > summary .aviso { color: #8a5a0f; }

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