/* Identidade GT Home — mesma paleta do app de visitas (/root/visitas-app/public/estilo.css).
   Reaproveitada de propósito: telas novas herdam o visual das que já existem, em vez de cada
   projeto inventar um estilo (regra 3.5 dos padrões de construção). */

:root {
  --preto: #141414;
  --preto-suave: #232323;
  --dourado: #C9A227;
  --dourado-claro: #EFC050;
  --dourado-fundo: #F7EFD5;
  --branco: #ffffff;
  --cinza-fundo: #F4F3F0;
  --cinza-borda: #E4E2DC;
  --texto-secundario: #6B6A64;
  --vermelho: #B23A2E;
  --vermelho-fundo: #FBEAE8;
  --laranja: #B5760D;
  --laranja-fundo: #FCF1DD;
  --verde: #2E7D4F;
  --verde-fundo: #E7F5EC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cinza-fundo);
  color: var(--preto);
  font-size: 15px;
  line-height: 1.5;
}

.escondido { display: none !important; }

/* ---------- Login ---------- */

.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--preto);
}

.login-caixa {
  background: var(--branco);
  border-radius: 14px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.login-caixa h1 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: .5px;
}

.login-caixa .subtitulo {
  margin: 0 0 22px;
  color: var(--texto-secundario);
  font-size: 14px;
}

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

.topo {
  background: var(--preto);
  color: var(--branco);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.topo h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
}

.topo h1 span { color: var(--dourado); }

.topo .espaco { flex: 1; }

.topo .quem {
  font-size: 13px;
  color: #BFBEB8;
}

/* ---------- Abas ---------- */

.abas {
  display: flex;
  gap: 2px;
  background: var(--preto-suave);
  padding: 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.abas button {
  background: none;
  border: none;
  color: #BFBEB8;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.abas button.ativa {
  color: var(--dourado-claro);
  border-bottom-color: var(--dourado);
  font-weight: 600;
}

/* ---------- Conteúdo ---------- */

.conteudo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 18px;
}

.cartao > h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.cartao > .ajuda {
  margin: 0 0 16px;
  color: var(--texto-secundario);
  font-size: 13px;
}

/* ---------- Indicadores ---------- */

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.indicador {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--dourado);
  border-radius: 10px;
  padding: 14px 16px;
}

.indicador .rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--texto-secundario);
  margin-bottom: 6px;
}

.indicador .valor {
  font-size: 21px;
  font-weight: 700;
  /* Números longos (R$ 159.393.012,63) não podem estourar o cartão no celular. */
  word-break: break-word;
}

.indicador .comparacao {
  font-size: 13px;
  margin-top: 4px;
  font-weight: 600;
}

.comparacao.subiu { color: var(--verde); }
.comparacao.desceu { color: var(--vermelho); }
.comparacao.igual { color: var(--texto-secundario); font-weight: 400; }

.indicador .explicacao {
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top: 6px;
}

/* Grupos de indicadores (Bruto / Pós-juros) na tela inicial. */
.grupo-indicadores { margin-bottom: 18px; }
.grupo-indicadores:last-child { margin-bottom: 0; }
.grupo-indicadores h3 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--texto-secundario);
  font-weight: 700;
}

/* ---------- Formulários ---------- */

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--branco);
  color: var(--preto);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.campo { margin-bottom: 14px; }

.campo .dica {
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top: 4px;
}

.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

button.principal {
  background: var(--dourado);
  color: var(--preto);
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

button.principal:disabled { opacity: .55; cursor: default; }

button.secundario {
  background: var(--branco);
  color: var(--preto);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.botoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.linha-estudo {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.lista-checkbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  cursor: pointer;
}

.lista-checkbox input { width: auto; margin: 0; }

/* Usado tanto na lista de checkboxes quanto nos cabeçalhos das tabelas de comparação — por isso
   é global, não escopado dentro de .lista-checkbox (bug real: escopado, o quadradinho não
   aparecia nos cabeçalhos das tabelas, só ficava um espaço vazio). */
.rotulo-cor {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  vertical-align: -1px;
}

tr.linha-diverge td:first-child { border-left: 3px solid var(--laranja); }
tr.linha-diverge { background: var(--laranja-fundo); }

/* ---------- Barra de aplicação em lote (Unidades e preços) ---------- */

.barra-lote {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--cinza-fundo);
  border: 1px solid var(--cinza-borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.barra-lote #contagem-selecionadas {
  font-size: 13px;
  color: var(--texto-secundario);
  min-width: 90px;
}

.barra-lote input, .barra-lote select {
  width: auto;
  min-width: 110px;
}

td input[type="number"].preco-pequeno { width: 110px; }
td.celula-checkbox { width: 32px; }
td.celula-checkbox input { width: auto; margin: 0; }

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

.tabela-rolagem {
  /* Tabela larga rola dentro da própria caixa — a página nunca rola de lado. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sombra na borda direita enquanto há conteúdo escondido: sem isso, no celular a tabela parece
   simplesmente cortada e ninguém descobre que dá pra arrastar. Some sozinha ao chegar no fim. */
.tabela-rolagem {
  background:
    linear-gradient(to right, var(--branco) 30%, rgba(255, 255, 255, 0)) left / 40px 100% no-repeat,
    linear-gradient(to left, var(--branco) 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat,
    linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) left / 14px 100% no-repeat,
    linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.dica-rolagem {
  display: none;
  font-size: 12px;
  color: var(--texto-secundario);
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .dica-rolagem { display: block; }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--cinza-borda);
  white-space: nowrap;
}

th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-secundario);
  background: var(--cinza-fundo);
  position: sticky;
  top: 0;
}

td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

tr.linha-base { background: var(--dourado-fundo); font-weight: 600; }

td input[type="number"] { width: 140px; }

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

.aviso {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.aviso.atencao {
  background: var(--laranja-fundo);
  border: 1px solid #E8CF9E;
  color: #6B4708;
}

.aviso.erro {
  background: var(--vermelho-fundo);
  border: 1px solid #E9C3BE;
  color: #7A241B;
}

.aviso.ok {
  background: var(--verde-fundo);
  border: 1px solid #BFE0CB;
  color: #1D5335;
}

/* Só o PRIMEIRO strong é o título do aviso (vira linha própria). Um strong no meio do texto
   continua sendo negrito na mesma linha — antes isso quebrava a frase em três pedaços. */
.aviso > strong:first-child { display: block; margin-bottom: 2px; }

/* ---------- Gráfico de fluxo (SVG desenhado à mão, sem biblioteca) ---------- */

.grafico {
  width: 100%;
  /* Altura livre: o gráfico tem dois painéis e a proporção vem do próprio viewBox. Fixar altura
     aqui achatava os painéis em telas estreitas. */
  height: auto;
  display: block;
}

.legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-secundario);
  margin-top: 8px;
}

.legenda span::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
  background: currentColor;
}

.legenda .saldo { color: var(--dourado); }
.legenda .acumulado { color: var(--preto); }
.legenda .negativo { color: var(--vermelho); }

.carregando {
  color: var(--texto-secundario);
  font-size: 14px;
  padding: 8px 0;
}

/* ---------- Celular ---------- */

@media (max-width: 640px) {
  .conteudo { padding: 14px; }
  .indicador .valor { font-size: 19px; }
  .topo h1 { font-size: 15px; }
}