/* Rampas e faixa adicional de subida.
 *
 * Herda a folha da família. A geometria de página NÃO é redeclarada; só a
 * colocação do painel de resultados, que é do produto.
 */
@import url("../estabilidade-taludes/styles.css");
@import url("../shared/ep-como-usar.css");

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

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

/* A nota de fonte: primeira coisa a ler. Era caixa vermelha enquanto o produto
 * não tinha o IPR-706 e precisava avisar que nenhum critério tinha respaldo;
 * com a fonte, virou citação e a cor tem de dizer isso. */
.sem-fonte {
  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;
}
.sem-fonte b { color: #0e6b4f; }
.sem-fonte + .como-lancar { margin-top: 0; }

/* A ressalva que o PRÓPRIO manual faz sobre a curva de desempenho do caminhão
 * brasileiro. Fica em âmbar dentro da caixa verde: não é falta de fonte, é a
 * fonte declarando o que ela não resolve — e é isso que sustenta o produto
 * integrar a equação de movimento em vez de ler tabela. */
.sem-fonte .ressalva-do-manual {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 8px;
  border-left: 3px solid #a4670f; background: #fdf9f0; color: #6b4a12;
  font-size: .74rem; line-height: 1.55;
}

/* A nota de fonte dentro da memória de cálculo. */
.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 braços do critério do item 7.2, na tela. */
.criterio-braco {
  display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 2px 8px; align-items: baseline;
  padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line, #d7e0dc); background: #fff;
  font-size: .76rem; margin-top: 6px;
}
.criterio-braco.atende { border-color: #0e6b4f; background: #f2f9f6; }
.criterio-braco.nao-avaliavel { border-color: #d9a441; background: #fdf9f0; }
.criterio-braco .marca { font-weight: 700; text-align: center; }
.criterio-braco.atende .marca { color: #0e6b4f; }
.criterio-braco.nao-avaliavel .marca { color: #a4670f; }
.criterio-braco b { font-variant-numeric: tabular-nums; }
.criterio-braco small { grid-column: 2 / -1; color: var(--muted, #848f8b); line-height: 1.45; }

/* A tabela de rampas do trecho, editável linha a linha. */
.tabela-rampas { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .76rem; }
.tabela-rampas th {
  text-align: left; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted, #848f8b); font-weight: 600; padding: 0 6px 4px;
}
.tabela-rampas td { padding: 2px 4px; }
.tabela-rampas input {
  width: 100%; padding: 5px 7px; border-radius: 7px; border: 1px solid var(--line, #d7e0dc);
  font: inherit; text-align: right; font-variant-numeric: tabular-nums; background: #fff;
}
.tabela-rampas .icon-button {
  width: 26px; height: 26px; padding: 0; border-radius: 7px; line-height: 1;
  border: 1px solid var(--line, #d7e0dc); background: #fff; color: var(--muted, #848f8b);
  cursor: pointer;
}
.tabela-rampas .icon-button:hover { border-color: #b02a37; color: #b02a37; }
.rampas-acoes { display: flex; gap: 8px; margin-top: 8px; }

/* As constantes importadas. */
.constantes { display: grid; gap: 6px; margin-top: 8px; }
.constante {
  display: grid; grid-template-columns: 3.4rem 1fr 5.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;
}
.preset-editado {
  margin-top: 6px; font-size: .72rem; color: #a4670f; font-weight: 600;
}

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

.ra-cota, .ra-hachura { pointer-events: none; }
.ra-perfil { fill: none; stroke: #0e6b4f; stroke-width: 2.6; }
.ra-limite { stroke: #b02a37; stroke-width: 1.4; stroke-dasharray: 8 4; }
.ra-equilibrio { stroke: #1f7f8c; stroke-width: 1.2; stroke-dasharray: 4 4; }
.ra-faixa { fill: #fbf1dd; stroke: none; }
.ra-grade { stroke: #e4ebe8; stroke-width: 1; }
.ra-eixo { stroke: #cfd8d5; stroke-width: 1.2; }
/* O perfil longitudinal: a linha do greide e o corpo da estrada abaixo dela.
 * Substitui o diagrama de barras — a barra dizia o número, o perfil diz o que
 * o motorista encontra. */
.ra-greide { fill: none; stroke: #848f8b; stroke-width: 2; }
.ra-pista-corpo { fill: #6b756f; fill-opacity: 0.45; stroke: none; }
.ra-rampa { fill: none; stroke: #848f8b; stroke-width: 2; }
.ra-divisa { stroke: #cfd8d5; stroke-width: 1; stroke-dasharray: 3 3; }
.ra-ponto { fill: #fff; stroke: #0e6b4f; stroke-width: 2; }
.ra-ponto-critico { fill: #fff; stroke: #b02a37; stroke-width: 2; }
.ra-ponto-lento { fill: #a4670f; stroke: #fff; stroke-width: 1.5; }

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

.quadro-rampas { font-variant-numeric: tabular-nums; }
.quadro-rampas tr.critica td { font-weight: 600; background: #fdf4f4; }
.quadro-perfil { font-variant-numeric: tabular-nums; }
.quadro-perfil tr.marco td { font-weight: 600; background: #eef6f2; }
.quadro-constantes td.simbolo { font-weight: 600; width: 4.5rem; }

/* A conclusão do critério do item 7.2. Três estados, e o do meio importa: uma
 * conclusão indefinida não pode parecer negativa. */
.criterio-nota { margin: 10px 0 4px; font-size: .78rem; color: var(--muted, #848f8b); line-height: 1.5; }
.criterio-nota.aviso {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  border-left: 3px solid #a4670f; background: #fdf9f0; color: #6b4a12; font-size: .74rem;
}
.criterio-conclusao {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 9px;
  font-size: .82rem; line-height: 1.55; border: 1px solid var(--line, #d7e0dc);
}
.criterio-conclusao.sim { border-color: #0e6b4f; background: #f2f9f6; color: #14503c; }
.criterio-conclusao.talvez { border-color: #d9a441; background: #fdf9f0; color: #6b4a12; }
.criterio-conclusao.nao { background: #f7f9f8; color: #47544f; }

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