/* ============================================================
   Simulador de Barramento — folha de estilo
   Depende de identidade/hydroai-tokens.css, que já define paleta,
   tipografia e espaçamento da marca. Nada de cor literal aqui a não
   ser dentro dos próprios gráficos.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` do HTML vale `display: none`, mas é uma regra fraca:
   qualquer `display` declarado numa classe a atropela sem aviso. Foi o que
   aconteceu com o indicador de carga sobre o mapa — `display: flex` na classe,
   `hidden` no elemento, e o aviso "traçando a bacia" ficava para sempre na
   tela depois que a simulação terminava. O painel dizia que estava pronto e o
   mapa dizia que estava trabalhando. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.pular {
  position: absolute;
  left: -999px;
  z-index: 100;
  padding: var(--hy-esp-2) var(--hy-esp-3);
  background: var(--hy-acao);
  color: var(--hy-acao-tinta);
  border-radius: var(--hy-raio-sm);
}
.pular:focus { left: var(--hy-esp-2); top: var(--hy-esp-2); }

/* ---------- Topo ---------- */

.topo {
  display: flex;
  align-items: center;
  gap: var(--hy-esp-3);
  padding: var(--hy-esp-2) var(--hy-esp-3);
  border-bottom: 1px solid var(--hy-borda);
  background: var(--hy-superficie);
  height: 60px;
}

.topo-marca { flex: none; height: 28px; width: auto; }

/* A palavra da marca dentro do logo embutido.
   As cores vêm dos tokens, e não das do arquivo original: o SVG da marca pinta
   "Hydro" em abissal (#061E2E), que sobre o painel escuro deste aplicativo
   ficava praticamente invisível. Com token, a palavra acompanha o tema e o
   contraste se mantém nos dois. */
.hy-word {
  font-family: var(--hy-font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.01em;
  fill: var(--hy-texto);
}
.hy-word-ia { fill: var(--hy-acao); }

.topo-titulo { flex: 1; min-width: 0; }

.topo-titulo h1 {
  margin: 0;
  font-size: var(--hy-escala-lg);
  letter-spacing: -0.01em;
}

.topo-titulo p {
  margin: 0;
  font-size: var(--hy-escala-sm);
  color: var(--hy-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo-acoes { display: flex; gap: var(--hy-esp-2); flex: none; }

/* ---------- Palco ---------- */

.palco {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  height: calc(100% - 60px);
}

/* ---------- Painel ---------- */

.painel {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--hy-esp-3);
  border-right: 1px solid var(--hy-borda);
  background: var(--hy-fundo);
}

.bloco {
  padding: var(--hy-esp-3) 0;
  border-bottom: 1px solid var(--hy-borda);
}
.bloco:last-child { border-bottom: 0; }

.bloco h2 {
  display: flex;
  align-items: center;
  gap: var(--hy-esp-2);
  margin: 0 0 var(--hy-esp-2);
  font-size: var(--hy-escala-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bloco h3 {
  margin: var(--hy-esp-4) 0 var(--hy-esp-2);
  font-size: var(--hy-escala-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hy-acao);
  font-family: var(--hy-font-dados);
  font-weight: 500;
}

.passo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--hy-raio-pill);
  background: var(--hy-acao);
  color: var(--hy-acao-tinta);
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  font-weight: 500;
}

.apoio {
  margin: 0 0 var(--hy-esp-3);
  font-size: var(--hy-escala-sm);
  color: var(--hy-texto-suave);
}

.estado {
  margin: var(--hy-esp-2) 0 0;
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  color: var(--hy-texto-suave);
  min-height: 1.2em;
}

/* ---------- Campos ---------- */

.campo { display: block; margin-bottom: var(--hy-esp-3); }

.campo-rotulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--hy-esp-2);
  font-size: var(--hy-escala-sm);
  font-weight: 500;
  margin-bottom: var(--hy-esp-1);
}

.campo-rotulo output {
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  color: var(--hy-acao);
  white-space: nowrap;
}

.campo-nota {
  display: block;
  margin-top: var(--hy-esp-1);
  font-size: var(--hy-escala-xs);
  line-height: 1.45;
  color: var(--hy-texto-suave);
}

.campo-inline {
  display: flex;
  align-items: center;
  gap: var(--hy-esp-2);
  font-size: var(--hy-escala-sm);
  margin-bottom: var(--hy-esp-1);
}
.campo-inline input { flex: none; }

.dupla { display: grid; gap: var(--hy-esp-1); }

input[type="range"] {
  width: 100%;
  accent-color: var(--hy-acao);
  cursor: pointer;
}

select {
  width: 100%;
  padding: var(--hy-esp-2);
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-sm);
  background: var(--hy-superficie);
  color: var(--hy-texto);
  font-family: inherit;
  font-size: var(--hy-escala-sm);
}

.avancado {
  margin: var(--hy-esp-3) 0;
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-sm);
  padding: var(--hy-esp-2);
}

.avancado summary {
  cursor: pointer;
  font-size: var(--hy-escala-sm);
  font-weight: 500;
  color: var(--hy-acao);
}

.avancado[open] summary { margin-bottom: var(--hy-esp-3); }

/* ---------- Botões ---------- */

.botao {
  padding: var(--hy-esp-2) var(--hy-esp-3);
  border-radius: var(--hy-raio-sm);
  border: 1px solid var(--hy-borda);
  background: var(--hy-superficie);
  color: var(--hy-texto);
  font-family: inherit;
  font-size: var(--hy-escala-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.botao:hover:not(:disabled) { border-color: var(--hy-acao); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao:focus-visible { outline: 2px solid var(--hy-realce); outline-offset: 2px; }

.botao-acao { background: var(--hy-acao); color: var(--hy-acao-tinta); border-color: var(--hy-acao); }
.botao-fantasma { background: transparent; }

.botao-principal {
  width: 100%;
  padding: var(--hy-esp-3);
  background: var(--hy-acao);
  color: var(--hy-acao-tinta);
  border-color: var(--hy-acao);
  font-family: var(--hy-font-display);
  font-size: var(--hy-escala-md);
  letter-spacing: 0.02em;
}

.botao.ativo { background: var(--hy-acao); color: var(--hy-acao-tinta); border-color: var(--hy-acao); }

.linha-botoes { display: flex; gap: var(--hy-esp-2); align-items: center; }
.linha-botoes-quebra { flex-wrap: wrap; }

.marca-lado {
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  color: var(--hy-texto-suave);
}

/* ---------- Resultado ---------- */

.bloco-resultado { padding-bottom: var(--hy-esp-6); }

.numerao { margin-bottom: var(--hy-esp-4); }

.numero-grande {
  padding: var(--hy-esp-3);
  border-radius: var(--hy-raio-md);
  background: var(--hy-superficie);
  border: 1px solid var(--hy-borda);
  border-left: 3px solid var(--hy-acao);
  margin-bottom: var(--hy-esp-2);
}

.numero-grande strong {
  display: block;
  font-family: var(--hy-font-display);
  font-size: var(--hy-escala-2xl);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.numero-rotulo {
  display: block;
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hy-texto-suave);
  margin-bottom: var(--hy-esp-1);
}

.numero-faixa {
  display: block;
  margin-top: var(--hy-esp-1);
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  color: var(--hy-texto-suave);
}

.numero-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hy-esp-2); }

.numero-par > div {
  padding: var(--hy-esp-3);
  border-radius: var(--hy-raio-md);
  background: var(--hy-superficie);
  border: 1px solid var(--hy-borda);
}

.numero-par strong {
  font-family: var(--hy-font-display);
  font-size: var(--hy-escala-xl);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tabelas ---------- */

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hy-escala-sm);
  margin-bottom: var(--hy-esp-3);
}

.tabela th, .tabela td {
  padding: var(--hy-esp-2) 0;
  border-bottom: 1px solid var(--hy-borda);
  text-align: left;
  vertical-align: top;
}

.tabela th {
  font-weight: 400;
  color: var(--hy-texto-suave);
  width: 58%;
}

.tabela td {
  font-family: var(--hy-font-dados);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Avisos ---------- */

.aviso {
  display: flex;
  gap: var(--hy-esp-2);
  padding: var(--hy-esp-3);
  border-radius: var(--hy-raio-sm);
  margin-bottom: var(--hy-esp-2);
  font-size: var(--hy-escala-sm);
  line-height: 1.5;
  border-left: 3px solid var(--hy-borda);
  background: var(--hy-superficie);
}

.aviso-critico { border-left-color: var(--hy-coral); }
.aviso-atencao { border-left-color: var(--hy-boia); }
.aviso-nota    { border-left-color: var(--hy-laguna); }
.aviso-bom     { border-left-color: var(--hy-alga); }

.aviso strong { display: block; margin-bottom: 2px; }
.aviso-icone { flex: none; font-size: var(--hy-escala-lg); line-height: 1.2; }

.lista-criterios { margin: 0; padding-left: var(--hy-esp-3); font-size: var(--hy-escala-sm); }
.lista-criterios li { margin-bottom: var(--hy-esp-1); }

/* ---------- Gráficos ---------- */

.grafico {
  margin: 0 0 var(--hy-esp-3);
  padding: var(--hy-esp-2);
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-sm);
  background: var(--hy-superficie);
  overflow-x: auto;
}

.grafico canvas { display: block; width: 100%; height: auto; }

/* ---------- Mapa ---------- */

.mapa-caixa { position: relative; }
.mapa { position: absolute; inset: 0; }

.mapa-controles {
  position: absolute;
  top: var(--hy-esp-2);
  left: var(--hy-esp-2);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hy-esp-1);
  max-width: calc(100% - 120px);
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--hy-esp-1);
  padding: 6px 12px;
  border-radius: var(--hy-raio-pill);
  border: 1px solid var(--hy-borda);
  background: var(--hy-superficie);
  color: var(--hy-texto);
  font-family: inherit;
  font-size: var(--hy-escala-xs);
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}

.pilula[aria-pressed="true"] { background: var(--hy-acao); color: var(--hy-acao-tinta); border-color: var(--hy-acao); }
.pilula-campo { cursor: default; }
.pilula-campo input[type="range"] { width: 74px; }
.pilula-campo output { font-family: var(--hy-font-dados); min-width: 3ch; }

.mapa-dica {
  position: absolute;
  bottom: var(--hy-esp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: var(--hy-esp-2) var(--hy-esp-4);
  border-radius: var(--hy-raio-pill);
  background: var(--hy-acao);
  color: var(--hy-acao-tinta);
  font-size: var(--hy-escala-sm);
  font-weight: 500;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
  max-width: 90%;
  text-align: center;
}

.mapa-carga {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--hy-esp-2);
  padding: var(--hy-esp-3) var(--hy-esp-4);
  border-radius: var(--hy-raio-md);
  background: var(--hy-superficie);
  border: 1px solid var(--hy-borda);
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-sm);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.35);
}

.mapa-carga .hy-vivo {
  width: 10px;
  height: 10px;
  background: var(--hy-realce);
  border-radius: var(--hy-raio-pill);
  flex: none;
}

/* Pino dos vértices do eixo — herdado do estilo do VisitePB */
.pino-eixo {
  width: 14px;
  height: 14px;
  border-radius: var(--hy-raio-pill);
  background: var(--hy-realce);
  border: 2px solid var(--hy-abissal);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
  cursor: grab;
}

.maplibregl-ctrl-attrib { font-size: 10px; }

/* ---------- Ajuda ---------- */

.ajuda {
  max-width: 640px;
  width: calc(100% - 2rem);
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-md);
  background: var(--hy-superficie);
  color: var(--hy-texto);
  padding: 0;
}

.ajuda::backdrop { background: rgb(6 30 46 / 0.7); }
.ajuda article { padding: var(--hy-esp-4); }
.ajuda h2 { margin-top: 0; font-size: var(--hy-escala-xl); }
.ajuda h3 { margin: var(--hy-esp-4) 0 var(--hy-esp-2); font-size: var(--hy-escala-md); color: var(--hy-acao); }
.ajuda p, .ajuda li { font-size: var(--hy-escala-sm); line-height: 1.6; }
.ajuda ul { padding-left: var(--hy-esp-3); }
.ajuda form { margin-top: var(--hy-esp-4); }

/* ---------- Telas estreitas ---------- */

@media (max-width: 900px) {
  body { overflow: auto; }
  .palco { grid-template-columns: 1fr; height: auto; }
  .painel { border-right: 0; border-bottom: 1px solid var(--hy-borda); overflow: visible; }
  .mapa-caixa { position: sticky; top: 0; height: 70vh; order: -1; }
  .topo-titulo p { display: none; }
}

@media print {
  .painel, .topo-acoes, .mapa-controles { display: none; }
}

/* Carga de manifesto: o rótulo inteiro é o alvo do clique, e o trecho
   sublinhado existe só para o olho achar onde clicar. */
.carregar { cursor: pointer; }
.falso-link { color: var(--hy-acao); text-decoration: underline; }

/* ---------- Envio de modelo de elevação ---------- */

.envio {
  margin-bottom: var(--hy-esp-4);
  padding: var(--hy-esp-3);
  border: 1px dashed var(--hy-borda);
  border-radius: var(--hy-raio-md);
  background: var(--hy-superficie);
}

.envio .apoio { margin-bottom: var(--hy-esp-2); }

/* O rótulo inteiro é o alvo do clique: o input em si fica escondido porque o
   controle nativo de arquivo não aceita a tipografia da marca. */
.envio-botao {
  display: inline-block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  margin-bottom: var(--hy-esp-2);
}

.envio-cabeca {
  display: flex;
  align-items: flex-start;
  gap: var(--hy-esp-2);
  margin-bottom: var(--hy-esp-3);
}
.envio-cabeca > div { flex: 1; min-width: 0; }
.envio-cabeca strong { display: block; word-break: break-all; font-size: var(--hy-escala-sm); }
.envio-cabeca .botao { flex: none; }
.envio-icone { font-size: var(--hy-escala-xl); line-height: 1; flex: none; }

.tabela-compacta { font-size: var(--hy-escala-xs); margin-bottom: var(--hy-esp-2); }
.tabela-compacta th, .tabela-compacta td { padding: 3px 0; }

.envio-cheio .aviso { padding: var(--hy-esp-2); font-size: var(--hy-escala-xs); }

/* ---------- Figuras do laudo, pré-visualizadas na tela ---------- */

.figuras { display: grid; gap: var(--hy-esp-2); margin-bottom: var(--hy-esp-3); }

.figura {
  margin: 0;
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-sm);
  background: var(--hy-superficie);
  overflow: hidden;
}
.figura img, .figura canvas { display: block; width: 100%; height: auto; }
.figura figcaption {
  padding: var(--hy-esp-2);
  font-size: var(--hy-escala-xs);
  color: var(--hy-texto-suave);
  border-top: 1px solid var(--hy-borda);
}

/* ============================================================
   Abertura

   Cobre a tela enquanto o trabalhador liga, a tipografia chega e o mapa monta.
   Sai sozinha por tempo limite: ela nunca pode ser o motivo de a aplicação
   parecer travada.
   ============================================================ */

.abertura {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 18%, #0A3149 0%, #061E2E 62%, #03131D 100%);
  opacity: 1;
  transition: opacity 520ms ease;
}

/* A saída é por opacidade e não por `display`, para o corte não ser seco. O
   `pointer-events` some antes, senão o painel fica bloqueado durante a saída. */
.abertura-saindo { opacity: 0; pointer-events: none; }

.abertura-marca { text-align: center; padding: var(--hy-esp-4); max-width: 90vw; }

.abertura-simbolo {
  width: clamp(88px, 17vw, 148px);
  height: auto;
  display: block;
  margin: 0 auto var(--hy-esp-3);
  filter: drop-shadow(0 10px 34px rgb(33 199 224 / 0.28));
}

/* A gota sobe um fio e volta: é o que dá vida sem virar salto. */
.abertura-gota {
  transform-box: view-box;
  transform-origin: 32px 30px;
  animation: abertura-gota 3.2s ease-in-out infinite;
}
@keyframes abertura-gota {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.2px) scale(1.015); }
}

/* Os ecos acendem de dentro para fora, como um pulso de sonar voltando do
   leito. A ordem no HTML é do maior para o menor, então o atraso é invertido. */
.abertura-eco {
  transform-box: view-box;
  transform-origin: 32px 52px;
  opacity: 0.16;
  animation: abertura-eco 1.9s ease-out infinite;
}
.abertura-eco-3 { animation-delay: 0ms; }
.abertura-eco-2 { animation-delay: 170ms; }
.abertura-eco-1 { animation-delay: 340ms; }

@keyframes abertura-eco {
  0%        { opacity: 0.16; transform: scale(0.96); }
  14%       { opacity: 1;    transform: scale(1.03); }
  46%, 100% { opacity: 0.16; transform: scale(0.96); }
}

.abertura-leito {
  transform-box: view-box;
  transform-origin: 32px 52px;
  animation: abertura-leito 1.9s ease-out infinite;
}
@keyframes abertura-leito {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  10%      { transform: scale(1.45); opacity: 1; }
}

.abertura-nome {
  margin: 0;
  font-family: var(--hy-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #EAF3F7;
  animation: abertura-entra 620ms 120ms ease-out both;
}
.abertura-ia { color: #21C7E0; }

.abertura-produto {
  margin: var(--hy-esp-2) 0 0;
  font-family: var(--hy-font-texto);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  color: #9DBACB;
  animation: abertura-entra 620ms 260ms ease-out both;
}

.abertura-lema {
  margin: var(--hy-esp-1) 0 0;
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  letter-spacing: 0.1em;
  color: #0E7C9C;
  animation: abertura-entra 620ms 400ms ease-out both;
}

@keyframes abertura-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* A barra mostra progresso REAL das etapas de partida, e não um tempo
   inventado: cada etapa que termina empurra a largura. Barra falsa é a forma
   mais fácil de mentir para quem espera. */
.abertura-barra {
  width: min(280px, 60vw);
  height: 3px;
  margin: var(--hy-esp-4) auto var(--hy-esp-2);
  border-radius: var(--hy-raio-pill);
  background: rgb(234 243 247 / 0.12);
  overflow: hidden;
}
.abertura-barra span {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0E7C9C, #21C7E0);
  transition: width 420ms ease;
}

.abertura-estado {
  margin: 0;
  font-family: var(--hy-font-dados);
  font-size: var(--hy-escala-xs);
  color: #6E90A6;
  min-height: 1.3em;
}

.abertura-pular {
  margin-top: var(--hy-esp-4);
  padding: 7px 18px;
  border-radius: var(--hy-raio-pill);
  border: 1px solid rgb(234 243 247 / 0.22);
  background: transparent;
  color: #9DBACB;
  font: inherit;
  font-size: var(--hy-escala-xs);
  cursor: pointer;
  opacity: 0;
  animation: abertura-entra 500ms 1.5s ease-out forwards;
}
.abertura-pular:hover { border-color: #21C7E0; color: #EAF3F7; }
.abertura-pular:focus-visible { outline: 2px solid #21C7E0; outline-offset: 2px; }

/* Quem pede menos movimento recebe a marca parada. A abertura continua, porque
   o que ela comunica é o estado do carregamento, não a animação. */
@media (prefers-reduced-motion: reduce) {
  .abertura-gota, .abertura-eco, .abertura-leito,
  .abertura-nome, .abertura-produto, .abertura-lema, .abertura-pular {
    animation: none;
  }
  .abertura-eco { opacity: 0.85; }
  .abertura-pular { opacity: 1; }
  .abertura { transition: none; }
}

/* ---------- Arrastar o arquivo para dentro ---------- */

.envio-arrastar {
  display: block;
  margin-top: 3px;
  font-size: var(--hy-escala-xs);
  font-weight: 400;
  opacity: 0.8;
}

/* O realce so aparece quando um arquivo esta sobre a area. Sem ele, nada na
   tela diz que arrastar e uma opcao, e a pessoa nunca descobre. */
.envio-recebendo {
  outline: 2px dashed var(--hy-realce);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--hy-realce) 22%, var(--hy-acao));
}

/* ---------- Aviso de que a area mudou ---------- */

.recalcular {
  display: flex;
  align-items: center;
  gap: var(--hy-esp-2);
  margin-top: var(--hy-esp-2);
  padding: var(--hy-esp-2) var(--hy-esp-3);
  border-radius: var(--hy-raio-sm);
  border-left: 3px solid var(--hy-boia);
  background: var(--hy-superficie);
  font-size: var(--hy-escala-xs);
  line-height: 1.45;
}

/* ---------- Botao que se parece com um link ---------- */

/* Existe porque a acao e secundaria e mora dentro de uma frase: um botao com
   moldura ali dentro quebraria a leitura e disputaria com o botao principal. */
.botao-texto {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hy-acao);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.botao-texto:hover { color: var(--hy-acao-forte); }
.botao-texto:focus-visible { outline: 2px solid var(--hy-realce); outline-offset: 2px; }

/* ---------- A pilha de cotas ---------- */

/* Desenhada como escada, e nao como tabela, porque a relacao entre as tres
   cotas e vertical: o que importa e ver que a agua para ANTES da crista, e o
   quanto ela para antes. */
.cotas {
  margin: var(--hy-esp-3) 0 0;
  padding: var(--hy-esp-2) var(--hy-esp-3);
  border: 1px solid var(--hy-borda);
  border-radius: var(--hy-raio-sm);
  background: var(--hy-superficie);
}
.cota-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hy-esp-2);
  padding: 2px 0;
  font-size: var(--hy-escala-sm);
}
.cota-nome { color: var(--hy-texto-suave); }
.cota-valor {
  font-family: var(--hy-font-dados);
  font-variant-numeric: tabular-nums;
  color: var(--hy-texto);
}
/* As folgas sao recuadas e menores: elas nao sao cotas, sao as distancias
   entre cotas. */
.cota-folga {
  padding-left: var(--hy-esp-3);
  font-size: var(--hy-escala-xs);
  opacity: 0.8;
}
.cota-folga .cota-valor { color: var(--hy-texto-suave); }
.cota-agua {
  margin-top: 2px;
  padding-top: var(--hy-esp-2);
  border-top: 1px solid var(--hy-borda);
  font-weight: 600;
}
.cota-agua .cota-nome,
.cota-agua .cota-valor { color: var(--hy-acao); }
.cotas .campo-nota { margin: var(--hy-esp-2) 0 0; }