/* Estabilidade de taludes.
 *
 * Herda a folha do produto de rede de incêndio, que já carrega o workspace, os
 * cartões, as abas, o canvas, a paleta e os avisos. Aqui ficam só o que é do
 * talude: o seletor duplo de condição, a lista de camadas e as classes do
 * corte. A geometria de página NÃO é redeclarada — a escada de breakpoints é
 * da folha-base, e um produto que fixa a própria coluna empilha antes dos
 * outros e fica divergente, não responsivo.
 */
@import url("../rede-incendio/styles.css");
@import url("../shared/ep-como-usar.css");

/* --------------------------------------------------------- seletor de par */

.seletor-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.seletor-duplo button {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--line, #d7e0dc); border-radius: 9px; background: #fff;
  padding: 8px 10px; font: inherit; cursor: pointer; text-align: left;
}
.seletor-duplo button strong { font-size: .84rem; color: var(--ink, #24302c); font-weight: 600; }
.seletor-duplo button small { font-size: .72rem; color: var(--muted, #848f8b); line-height: 1.25; }
.seletor-duplo button[aria-pressed="true"] { border-color: #0e6b4f; background: #f2f8f5; box-shadow: inset 0 0 0 1px #0e6b4f; }
.seletor-duplo button[aria-pressed="true"] strong { color: #0e6b4f; }

/* ------------------------------------------------------- lista de camadas */

.lista-camadas { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.camada-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 1px solid var(--line, #d7e0dc); border-radius: 9px; background: #fff;
  padding: 7px 9px; font: inherit; cursor: pointer; text-align: left;
}
.camada-item:hover { border-color: #b6c7c0; }
.camada-item.ativa { border-color: #0e6b4f; box-shadow: inset 0 0 0 1px #0e6b4f; }
.camada-cor {
  width: 15px; height: 26px; border-radius: 3px; flex: 0 0 auto;
  background: var(--cor, #e8ddc6); border: 1px solid #a6997c;
}
.camada-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.camada-item strong { font-size: .82rem; font-weight: 600; color: var(--ink, #24302c); }
.camada-item small { font-size: .72rem; color: var(--muted, #848f8b); }
.camada-apagar {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 50%; color: var(--muted, #848f8b); font-size: 1rem;
}
.camada-apagar:hover { background: #fdeaea; color: #c0392b; }

/* --------------------------------------------------------------- inspetor */

.selecao-cabecalho { display: flex; flex-direction: column; gap: 1px; margin-bottom: 9px; }
.selecao-cabecalho span {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #848f8b);
}
.selecao-cabecalho strong { font-size: .95rem; color: var(--cor, #24302c); font-weight: 600; }

/* O painel de resultados ATRAVESSA as duas colunas. Sem esta regra ele cai na
 * coluna estreita das entradas, os seis cartões se espremem em três colunas de
 * 100 px e os números vazam por cima uns dos outros. É o mesmo defeito que já
 * apareceu em `/rede-distribuicao/`, e ele voltou pela cópia do esqueleto: a
 * geometria da PÁGINA é da folha-base, mas a colocação deste painel é do
 * produto, e tem de vir junto. */
.talude-workspace > .results-panel { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ corte */

.talude-malha, .talude-fatia, .talude-mapa-ponto, .talude-camada { pointer-events: none; }
.talude-camada { pointer-events: auto; cursor: pointer; }
.talude-terreno, .talude-na, .talude-impenetravel, .talude-critica, .talude-sobrecarga { pointer-events: none; }
.talude-ponto { cursor: grab; }
.talude-ponto.ativo { cursor: grabbing; }
#talude-svg.pronto-para-mover { cursor: grab; }
#talude-svg.arrastando-vista { cursor: grabbing; }

/* ---------------------------------------------------- tabelas e resultados */

.verification-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.verification-table th {
  text-align: left; font-weight: 600; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted, #848f8b);
  border-bottom: 1px solid var(--line, #d7e0dc); padding: 7px 8px;
}
.verification-table td { padding: 9px 8px; border-bottom: 1px solid #eef2f0; vertical-align: top; }
.verification-table strong { display: block; font-weight: 600; }
.verification-table small { display: block; font-size: .7rem; color: var(--muted, #848f8b); margin-top: 1px; }
.verification-table p { margin: 5px 0 0; font-size: .76rem; color: #4d5b56; line-height: 1.45; max-width: 46em; }
.verification-status {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2f8f5b; margin-top: 4px;
}
.verification-row.fail .verification-status { background: #df4652; }
.verification-row.fail strong { color: #b02a37; }
.verification-guidance { font-size: .76rem; color: #4d5b56; max-width: 22em; }

.data-table tr.destaque { background: #f2f8f5; }
.data-table tr.destaque strong { color: #0e6b4f; }
.nota { margin: 10px 2px 0; font-size: .78rem; color: var(--muted, #848f8b); line-height: 1.5; }

.divergencias { display: grid; gap: 10px; margin-top: 14px; }
.divergencias article {
  border: 1px solid var(--line, #d7e0dc); border-radius: 10px; padding: 11px 13px; background: #fbfdfc;
}
.divergencias h4 { margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--ink, #24302c); }
.divergencias p { margin: 3px 0; font-size: .77rem; color: #4d5b56; line-height: 1.5; }
.divergencias b { color: var(--ink, #24302c); font-weight: 600; }
.talude-massa, .talude-submerso, .talude-rotacao { pointer-events: none; }

/* ------------------------------------------- lançamento: como e onde digitar */

.como-lancar {
  margin: 0 0 16px; padding: 11px 14px 11px 30px; list-style: decimal;
  background: #f3f8f5; border: 1px solid #cfe3d8; border-radius: 10px;
  font-size: .78rem; line-height: 1.6; color: #3c4b45;
}
.como-lancar b { color: #0e6b4f; font-weight: 600; }

.linha-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.linha-chip {
  border: 1px solid var(--line, #d7e0dc); border-left: 4px solid var(--cor, #8a6d3b);
  background: #fff; border-radius: 7px; padding: 4px 9px; font: inherit; font-size: .74rem;
  color: var(--muted, #848f8b); cursor: pointer;
}
.linha-chip.ativa { border-color: #0e6b4f; border-left-color: var(--cor, #8a6d3b); color: var(--ink, #24302c); font-weight: 600; background: #f2f8f5; }

.pontos-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.pontos-table th {
  text-align: left; font-weight: 600; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #848f8b); padding: 3px 5px; border-bottom: 1px solid var(--line, #d7e0dc);
}
.pontos-table td { padding: 2px 3px; }
.pontos-table td:first-child { width: 22px; color: var(--muted, #848f8b); text-align: right; padding-right: 6px; }
.pontos-table td:last-child { width: 22px; }
.pontos-table input {
  /* `height: auto` é obrigatório: a folha-base fixa 42 px em todo `input`, e
   * numa tabela de lançamento isso vira uma linha de 50 px por ponto. */
  width: 100%; height: auto; margin: 0;
  border: 1px solid var(--line, #d7e0dc); border-radius: 6px;
  padding: 5px 7px; font: inherit; font-size: .78rem; font-variant-numeric: tabular-nums;
}
.pontos-table tr.ativa input { border-color: #0e6b4f; background: #f7fbf9; }
.ponto-apagar {
  border: 0; background: none; color: var(--muted, #848f8b); font-size: .95rem;
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1;
}
.ponto-apagar:hover { background: #fdeaea; color: #c0392b; }
.linha-acoes { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.linha-dica { font-size: .72rem; color: var(--muted, #848f8b); line-height: 1.4; flex: 1 1 160px; }

.chave-linha { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: .82rem; }
.chave-linha input { margin-top: 1px; }
#campos-grade.desativado { opacity: .45; }
.campo-espessura { margin-top: 10px; }
.talude-rotulo-linha { pointer-events: none; }

/* Subscrito. `line-height: 0` sozinho abre um vão antes do índice em algumas
 * fontes; a forma robusta é posicionar em relação à linha de base. */
sub {
  font-size: .72em; line-height: 0; position: relative;
  vertical-align: baseline; bottom: -0.22em; margin-left: -0.04em;
}
.result-card sub, .canvas-legenda sub { font-size: .78em; }

/* A unidade acompanha o número dentro do <strong>; a nota fica no <small>, que
 * é onde os outros produtos a põem e onde o contraste do cartão escuro vale. */
.result-card strong i { font-style: normal; font-size: .38em; font-weight: 500; margin-left: 5px; opacity: .8; }

/* ═══════════════ verificações e memorial — padrão da família ═══════════════
 *
 * Cartão de verificação e layout de memória de cálculo não são de um produto:
 * são o mesmo componente em todos. Estavam escritos só na folha do produto de
 * sondagem, e o produto seguinte nasceu sem eles — emitindo `check-card` e
 * `conta`, nomes que folha nenhuma definia, e portanto sem formatação alguma.
 * Subiram para cá, que é a folha que a família inteira importa.
 */

.verif-resumo {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  padding: 9px 13px; border-radius: 10px; background: #f2f8f5; border: 1px solid #cfe3d8;
}
.verif-resumo.fail { background: #fdf1f1; border-color: #efc9c9; }
.verif-resumo strong { font-size: 1.05rem; color: #0e6b4f; }
.verif-resumo.fail strong { color: #b02a37; }
.verif-resumo span { font-size: .8rem; color: #4d5b56; }

.verif-cartoes { display: grid; gap: 10px; }
.verif {
  border: 1px solid var(--line, #d7e0dc); border-left: 4px solid #2f8f5b; border-radius: 11px;
  padding: 12px 14px; background: #fff;
}
.verif.fail { border-left-color: #df4652; }
.verif header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.verif-fonte {
  display: block; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted, #848f8b);
}
.verif h4 { margin: 2px 0 0; font-size: .92rem; font-weight: 600; color: var(--ink, #24302c); }
.verif-selo {
  flex: 0 0 auto; font-size: .68rem; letter-spacing: .08em; padding: 3px 9px; border-radius: 20px;
  background: #e7f4ed; color: #0e6b4f;
}
.verif.fail .verif-selo { background: #fdeaea; color: #b02a37; }
.verif-numeros { display: flex; flex-wrap: wrap; gap: 22px; margin: 10px 0 8px; }
.verif-numeros > div { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.verif-numeros span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #848f8b); }
.verif-numeros b { font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.verif-util { flex: 1 1 160px; }
.verif-util i { display: block; height: 5px; border-radius: 3px; background: #e6ecea; margin-top: 4px; overflow: hidden; }
.verif-util u { display: block; height: 100%; background: #2f8f5b; text-decoration: none; }
.verif.fail .verif-util u { background: #df4652; }
.verif-detalhe { margin: 0; font-size: .79rem; line-height: 1.55; color: #4d5b56; max-width: 62em; }
.verif-acao { margin: 7px 0 0; font-size: .78rem; color: #b02a37; }

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

.memorial { font-size: .82rem; color: #3c4b45; }
.mem-cabeca { border-bottom: 2px solid var(--ink, #24302c); padding-bottom: 8px; margin-bottom: 14px; }
.mem-titulo { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--ink, #24302c); }
.mem-sub-titulo { margin: 2px 0 0; font-size: .8rem; color: var(--muted, #848f8b); }
.mem-ressalva {
  border: 1px solid #e0b070; background: #fdf8f0; border-radius: 10px; padding: 11px 13px; margin-bottom: 16px;
}
.mem-ressalva p { margin: 0; font-size: .79rem; line-height: 1.6; color: #6b4c14; }
.mem-secao { margin-bottom: 20px; }
.mem-secao h3 {
  margin: 0 0 8px; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: #0e6b4f; font-weight: 700; border-bottom: 1px solid #d9e6e0; padding-bottom: 4px;
}
.mem-secao > p { margin: 0 0 9px; line-height: 1.6; max-width: 64em; }

.mem-conta {
  border-left: 3px solid #cfe3d8; padding: 6px 0 6px 12px; margin: 9px 0;
  font-variant-numeric: tabular-nums;
}
.mem-conta p { margin: 1px 0; }
.mem-eq { font-size: .86rem; font-weight: 600; color: var(--ink, #24302c); }
.mem-sub { font-size: .8rem; color: #55635e; }
.mem-res { font-size: .86rem; color: #0e6b4f; }
.mem-onde { font-weight: 400; font-size: .74rem; color: var(--muted, #848f8b); margin-left: 6px; }
.mem-conta-linha { border-left-color: #e3eae7; margin: 5px 0; padding-left: 10px; }
.mem-autor { float: right; font-weight: 400; font-size: .74rem; color: var(--muted, #848f8b); }
.mem-nota { margin: 6px 0 0; font-size: .76rem; color: var(--muted, #848f8b); }

.mem-tabela { width: 100%; border-collapse: collapse; font-size: .76rem; margin-top: 8px; }
.mem-tabela th {
  text-align: left; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #848f8b); border-bottom: 1px solid var(--line, #d7e0dc); padding: 5px 7px;
}
.mem-tabela td { padding: 5px 7px; border-bottom: 1px solid #f0f4f2; font-variant-numeric: tabular-nums; }
.mem-tabela.mem-compacta td, .mem-tabela.mem-compacta th { padding: 3px 7px; }

.mem-camada { border: 1px solid var(--line, #d7e0dc); border-radius: 10px; padding: 11px 13px; margin-bottom: 11px; }
.mem-camada-titulo { margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink, #24302c); }
.mem-camada-titulo span { float: right; font-weight: 400; font-size: .74rem; color: var(--muted, #848f8b); }
.mem-camada-resumo { margin: 4px 0 10px; font-size: .76rem; color: var(--muted, #848f8b); }
.mem-grandeza { margin-top: 10px; }
.mem-grandeza-titulo {
  margin: 0; font-size: .78rem; font-weight: 600; color: #0e6b4f;
  display: flex; justify-content: space-between; gap: 8px;
}
.mem-grandeza-titulo span { font-weight: 400; font-size: .72rem; color: var(--muted, #848f8b); }
.mem-grandeza-titulo span.alta { color: #a4670f; font-weight: 600; }
.mem-adotado {
  margin: 7px 0 0; padding: 6px 9px; border-radius: 7px; background: #f2f8f5;
  font-size: .78rem; color: #2c4a3d;
}
.mem-avisos { margin: 0; padding-left: 18px; }
.mem-avisos li { margin-bottom: 6px; font-size: .78rem; line-height: 1.55; }

/* Três peças que todo painel técnico usa e que estavam definidas em folha de
 * um produto só — ou em nenhuma. `.avisos` existia apenas na folha do
 * rede-incêndio, e o bloco de avisos do produto de sondagem saía sem estilo. */

.painel-nota {
  margin: 0 0 12px; font-size: .79rem; line-height: 1.6; color: #4d5b56; max-width: 68em;
}
.painel-nota code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
  background: #f2f6f4; border: 1px solid #e0e8e5; border-radius: 4px; padding: 1px 5px;
}

.avisos { display: grid; gap: 7px; margin-top: 14px; }
.avisos p {
  margin: 0; padding: 8px 11px; border-radius: 8px;
  border: 1px solid #e6d3a8; border-left: 3px solid #d9a441; background: #fdf9f0;
  font-size: .78rem; line-height: 1.55; color: #6b4c14;
}

.data-table tr.linha-total td { border-top: 2px solid var(--ink, #24302c); font-weight: 600; }

/* Mais três que a família usa e ninguém definia. `.selecao-vazia` e
 * `.icon-button` estavam sendo emitidas sem regra em mais de um produto. */

.bloco-titulo {
  /* Título de bloco encostava na tabela anterior em todo produto que o usa
   * depois de conteúdo. A folga vai aqui, e some quando ele abre o painel. */
  margin: 22px 0 7px; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #848f8b); font-weight: 600;
}
.bloco-titulo:first-child { margin-top: 0; }

.selecao-vazia {
  margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted, #848f8b);
}
.selecao-vazia b { color: var(--ink, #24302c); font-weight: 600; }

.icon-button {
  display: grid; width: 22px; height: 22px; padding: 0; place-items: center;
  border: 1px solid #e5cfcf; border-radius: 5px; background: #fff;
  color: #b02a37; font-size: .9rem; line-height: 1; cursor: pointer;
}
.icon-button:hover { background: #fdeaea; border-color: #dbb0b0; }

/* Célula de tabela que carrega uma ressalva — a razão entre duas fontes que
 * discordam, um valor interpolado em vez de tabelado. Estava definida só na
 * folha do pavimento, e o produto seguinte a emitiu sem regra. */
.data-table td.celula-ressalva, td.celula-ressalva { color: #a4670f; font-weight: 600; }

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