/* O gerador tem estilo proprio, e nao reusa o do nivelamento.

   Dois motivos. O primeiro e o mesmo do documento separado: nao encostar no
   que esta em campo. O segundo e que as duas telas querem coisas opostas —
   a caderneta e feita para dedo em pe no sol, com alvo grande e pouca
   informacao por vez; o gerador e feito para tabela larga, sentado.

   Mas as cores sao as mesmas, de proposito: e o mesmo app. */

:root {
  --marca: #002541;
  --fundo: #ffffff;
  --fundo-fraco: #f4f6f8;
  --texto: #14202b;
  --texto-fraco: #5b6a78;
  --borda: #d8dee4;
  --borda-forte: #b4bfc9;
  --aviso: #8a5a00;
  --aviso-fundo: #fdf3e0;
  --erro: #a01414;
}

* { box-sizing: border-box; }

/* `hidden` PERDE para qualquer `display` escrito aqui.

   O `display: none` do atributo vem da folha do navegador, e regra de autor
   ganha dela. Entao `.saida-opcoes { display: grid }` deixava o bloco de
   opcoes do DXF na tela mesmo com `hidden` ligado — e os testes passavam,
   porque eles perguntavam pelo atributo, que estava certo.

   So apareceu numa foto da tela, em 16/09. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fundo-fraco);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--marca);
  color: #ffffff;
}

.topo .voltar {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-size: 1.6rem;
  text-decoration: none;
  line-height: 1;
}

.topo .nome { margin: 0; font-size: 1.05rem; font-weight: 700; }
.topo .resumo { margin: 0; font-size: 0.85rem; opacity: .8; }

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem;
}

/* ---------- soltar o arquivo ---------- */

.soltar {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  border: 3px dashed var(--borda-forte);
  border-radius: 12px;
  background: var(--fundo);
  text-align: center;
}

/* O alvo muda enquanto o arquivo esta sobre ele: sem isso ninguem sabe se
   pode soltar. */
.soltar.soltando {
  border-color: var(--marca);
  background: #eef4f9;
}

.soltar-titulo { margin: 0; font-size: 1.2rem; font-weight: 700; }
.soltar-nota { margin: 0; color: var(--texto-fraco); font-size: 0.9rem; }

/* A lista de formatos aceitos: nome e extensao, e mais nada. */
.soltar-aceitos {
  margin: 1.4rem 0 0;
  text-align: left;
}

.aceitos-titulo {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.aceitos-linha {
  margin: .2rem 0 0;
  display: flex;
  gap: .6rem;
  align-items: baseline;
}

.aceitos-nome {
  min-width: 5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto);
}

.aceitos-extensao {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9rem;
  color: var(--texto-fraco);
}

.botao-grande {
  display: inline-block;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 2px solid var(--marca);
  border-radius: 8px;
  background: var(--marca);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- o que foi lido ---------- */

.resumo-caixa,
.tabela-caixa {
  margin-top: 1rem;
  padding: 0.9rem;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
}

.resumo-arquivo { margin: 0; font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.resumo-linha { margin: .15rem 0 0; color: var(--texto-fraco); font-size: .95rem; }

.resumo-tipo {
  margin: .6rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--marca);
}

.resumo-explica { margin: .1rem 0 0; color: var(--texto-fraco); font-size: .9rem; }

.aviso {
  margin: .7rem 0 0;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: var(--aviso-fundo);
  color: var(--aviso);
  font-weight: 600;
  font-size: .95rem;
}

.erro {
  margin: 0;
  padding: .7rem;
  border-radius: 8px;
  background: #f7e9e9;
  color: var(--erro);
  font-weight: 700;
}

/* ---------- a tabela ---------- */

/* Rola dentro da caixa, e nao empurra a pagina: em tela estreita a tabela
   e mais larga que o telefone, e o resto da tela nao pode ir junto. */
.tabela-caixa { overflow-x: auto; padding: 0; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.tabela th,
.tabela td {
  padding: .45rem .7rem;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  white-space: nowrap;
}

.tabela th {
  position: sticky;
  top: 0;
  background: var(--fundo-fraco);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--texto-fraco);
}

/* Numero alinhado a direita e com digito de largura fixa: coluna de
   coordenada so se confere de relance se os digitos ficam um sob o outro. */
.tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela .nome { font-weight: 700; }

/* Nome que a locacao vai gravar, e nao o que esta no app. Marcado porque
   a coluna passa a mostrar outra coisa, e a pessoa precisa perceber. */
.tabela .nome[data-gerado="sim"] { color: var(--marca); }

/* O nome e um botao: tocar abre o campo para renomear aquele ponto so. Fica
   com cara de texto sublinhado, e nao de botao cheio, porque a tabela tem
   dezenas deles e e para conferir antes de ser para mexer. */
.nome-ponto {
  padding: 0.15rem 0;
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Renomeado a mao: destacado, para a pessoa achar os que mudou. */
.tabela .nome[data-manual="sim"] .nome-ponto {
  border-bottom-style: solid;
  background: #fff4e0;
}

.nome-ponto-campo {
  width: 100%;
  min-width: 6rem;
  padding: 0.3rem 0.4rem;
  border: 2px solid var(--marca);
  border-radius: 6px;
  font: inherit;
}
.tabela tr:last-child td { border-bottom: 0; }

/* ---------- gerar ---------- */

.saida-caixa {
  margin-top: 1rem;
  padding: .9rem;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
}

.saida-titulo { margin: 0 0 .7rem; font-size: 1.1rem; font-weight: 700; }

.saida-opcoes {
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
}

/* O prefixo e o numero moram numa caixa propria desde 07/10, e a caixa do
   formato vem logo depois: sem isto os campos das duas grudavam. */
#saida-opcoes-nome + .saida-opcoes { margin-top: .7rem; }

.saida-campo { display: grid; gap: .2rem; }
.saida-rotulo { font-size: .85rem; font-weight: 700; color: var(--texto-fraco); }

.saida-select {
  min-height: 2.8rem;
  padding: .4rem .6rem;
  border: 2px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font-size: 1rem;
}

/* A cota fica sozinha na linha porque as tres opcoes dela tem nome longo, e
   em telefone elas quebrariam dentro do seletor. */
.saida-campo-largo { margin-bottom: .8rem; }

/* ---------- a ordem das coordenadas ---------- */

/* EM DESTAQUE, e nao num seletor como as outras opcoes.

   Trocar Este com Norte espelha a locacao inteira, e o erro e silencioso:
   as distancias batem e a escala bate. So quem for cravar estaca descobre.
   Uma opcao dessas escondida num seletor com valor marcado e uma opcao que
   ninguem le. */
.ordem {
  grid-column: 1 / -1;
  margin-bottom: .9rem;
  padding: .8rem;
  border: 2px solid var(--borda-forte);
  border-radius: 10px;
}

.ordem-titulo {
  margin: 0 0 .5rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.ordem-botoes { display: flex; gap: .5rem; }

.ordem-botao {
  flex: 1 1 0;
  min-height: 3rem;
  padding: .5rem;
  border: 2px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* Escolhido fica CHEIO, e nao so com a borda mudada: a diferenca entre os
   dois precisa ser visivel de relance, no sol, na tela do celular. */
.ordem-botao[data-escolhido="sim"] {
  border-color: var(--marca);
  background: var(--marca);
  color: #ffffff;
}


.saida-entrada {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.8rem;
  padding: .4rem .6rem;
  border: 2px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--fundo);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
}

.saida-estrago {
  margin: .7rem 0 0;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: var(--aviso-fundo);
  color: var(--aviso);
  font-weight: 600;
  font-size: .95rem;
}

/* A amostra e a linha que vai sair, do jeito que vai sair. Monoespacada e
   com o espaco preservado: com separador espaco ou tabulacao, a diferenca
   entre os dois so aparece se o espaco em branco for respeitado. */
/* A CAIXA DE MARCAR, de volta em 02/10.

   Ela existiu, saiu em 28/09 junto com as saidas antigas que a usavam, e
   voltou com o cabecalho e a coluna de codigo do CSV. Sem esta regra, o
   quadradinho fica EM CIMA do texto em vez de ao lado, porque o label vira
   um bloco comum.

   Os 74 testes de tela passaram assim mesmo: nenhum deles pergunta onde o
   quadradinho esta. Quem pegou foi a foto, pela terceira vez no projeto. */
.saida-campo-caixa {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: end;
  min-height: 2.8rem;
}

.saida-campo-caixa input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; }

.saida-amostra {
  margin: .7rem 0 0;
  padding: .6rem .7rem;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-fraco);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .95rem;
  white-space: pre;
  overflow-x: auto;
}

/* QUANDO E RECADO, E NAO ARQUIVO, o monoespacado sai.

   A mesma caixa mostra a previa do arquivo e a frase que diz o que falta
   escolher. Previa precisa de monoespacado e de nao quebrar linha, para as
   colunas baterem; frase precisa do contrario, senao ela sai da tela pela
   direita e a pessoa le metade. */
.saida-amostra[data-recado="sim"] {
  font-family: inherit;
  white-space: normal;
  overflow-x: visible;
}

.saida-baixar { margin-top: .9rem; }
.saida-baixar:disabled { opacity: .5; cursor: not-allowed; }

/* A versao que esta rodando. Discreta de proposito: ela nao e para quem
   esta trabalhando, e para quando eu precisar saber qual codigo esta no
   aparelho sem adivinhar de longe. */
.versao {
  margin: 1.5rem 0 0;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- tela larga ---------- */

@media (min-width: 48rem) {
  main { padding: 1.5rem; }
  .soltar { padding: 3.5rem 2rem; }
  .tabela { font-size: 1rem; }
  .saida-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* O gerador travado pelo so leitura, desenhado pela `porta.mjs`. */
.travado-aviso {
  margin: 1.2rem 0;
  font-weight: 700;
}