/* Planejamento de Vendas — identidade GT Home: preto, dourado e branco.
   COMPUTADOR primeiro (decisão do Gabriel, 02/10/2026). O que isso muda de verdade:
     · barra lateral fixa em vez de abas no rodapé — o menu fica sempre visível;
     · densidade: a grade do plano mostra os 12 meses de uma vez, sem rolar;
     · tabelas largas com cabeçalho e 1ª coluna fixos, em vez de cartões empilhados;
     · o mouse existe: hover é usado como pista, mas nunca como ÚNICA pista. */

:root{
  --preto:#0B0B0C; --carvao:#141416; --grafite:#1C1C20; --linha:#2A2A30; --linha2:#3A3A42;
  --branco:#F4F2ED; --cinza:#9C978B; --cinza2:#6E6A61;
  --ouro:#C9A227; --ouro-claro:#E3C458; --ouro-fraco:#2A2213;
  --verde:#4E9C6B; --amarelo:#D9A53F; --amarelo-fraco:#2A2112; --vermelho:#C2584B;
  --raio:8px; --lateral:232px;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* O atributo `hidden` perde para QUALQUER regra de autor com `display` — lição paga no
   Caixa de Pesca (28/09/2026): a tela de login ficava por cima do app depois de entrar,
   e todo teste funcional passava mesmo assim. */
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--preto);color:var(--branco);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2}
table{border-collapse:collapse}

.marca{font-size:22px;font-weight:800;letter-spacing:-.02em}
.marca span{color:var(--ouro)}

/* ---------------------------------------------------------------- login */
.tela-login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.caixa-login{width:100%;max-width:360px}
.caixa-login h1{font-size:21px;margin:14px 0 4px}
.caixa-login .sub{color:var(--cinza);font-size:14px;margin:0 0 24px}
.caixa-login form{display:grid;gap:13px}
label{display:grid;gap:5px;font-size:12.5px;color:var(--cinza);font-weight:600}
input,select{background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:10px 11px;font-size:14.5px;width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--ouro);outline-offset:1px}
.primario{background:var(--ouro);color:#1A1405;border:0;border-radius:var(--raio);
  padding:12px;font-weight:700;cursor:pointer}
.primario:hover{background:var(--ouro-claro)}
.primario:disabled{opacity:.5;cursor:default}
.secundario{background:var(--grafite);color:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);padding:10px 14px;font-weight:600;cursor:pointer}
.secundario:hover{border-color:var(--linha2)}
.link{background:none;border:0;color:var(--ouro);cursor:pointer;padding:4px 0;font-size:13px}
.link:hover{text-decoration:underline}
.erro{color:var(--vermelho);font-size:13.5px;margin:0}

/* ---------------------------------------------------------------- moldura de computador */
.moldura{display:grid;grid-template-columns:var(--lateral) 1fr;height:100dvh}
.lateral{background:var(--carvao);border-right:1px solid var(--linha);
  padding:20px 14px;display:flex;flex-direction:column;gap:22px;overflow-y:auto}
.modulo{margin:-16px 0 0;font-size:12px;color:var(--cinza2);font-weight:600;
  letter-spacing:.03em}
.menu{display:grid;gap:3px}
.menu button{display:flex;align-items:center;gap:9px;background:none;border:0;
  border-radius:var(--raio);padding:10px 11px;color:var(--cinza);font-weight:600;
  font-size:14px;cursor:pointer;text-align:left;width:100%}
.menu button:hover{background:var(--grafite);color:var(--branco)}
.menu button.ativa{background:var(--ouro-fraco);color:var(--ouro-claro)}
.menu .ic{opacity:.7;font-size:13px}
.rodape-lateral{margin-top:auto;border-top:1px solid var(--linha);padding-top:12px;
  display:grid;gap:2px}
.quem{font-size:12.5px;color:var(--cinza2)}

.trabalho{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:20px 26px 14px;border-bottom:1px solid var(--linha)}
.cabecalho h1{font-size:21px;letter-spacing:-.01em}
.subtitulo{margin:3px 0 0;font-size:13px;color:var(--cinza)}
main{flex:1;overflow-y:auto;padding:20px 26px 48px}
.carregando{text-align:center;color:var(--cinza);padding:60px}

/* ---------------------------------------------------------------- filtros */
.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filtros select{width:auto;min-width:140px;padding:8px 10px;font-size:13.5px}
.seg{display:flex;gap:2px;padding:3px;background:var(--carvao);
  border:1px solid var(--linha);border-radius:var(--raio)}
.seg button{background:none;border:0;border-radius:5px;padding:6px 11px;font-size:13px;
  font-weight:600;color:var(--cinza);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--branco)}
.seg button[aria-pressed="true"]{background:var(--ouro);color:#1A1405}

/* ---------------------------------------------------------------- cartões */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;
  margin:0 0 22px}
.cartao{background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:13px 15px}
.cartao .rot{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza2);
  font-weight:700}
.cartao .val{font-size:24px;font-weight:800;margin-top:4px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cartao .nota{font-size:12px;color:var(--cinza);margin-top:3px}
.cartao.destaque{border-color:var(--ouro);background:var(--ouro-fraco)}
.cartao.destaque .val{color:var(--ouro-claro)}
.cartao .val.vazio{color:var(--cinza2);font-size:19px;font-weight:700}

h2.sec{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cinza2);
  margin:26px 0 9px;font-weight:700}

/* ---------------------------------------------------------------- tabelas */
.rolo{overflow:auto;max-height:62vh;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--carvao)}
table{width:100%;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cinza2);padding:9px 11px;border-bottom:1px solid var(--linha2);white-space:nowrap;
  position:sticky;top:0;background:var(--grafite);z-index:1}
td{padding:8px 11px;border-bottom:1px solid var(--linha);white-space:nowrap}
tbody tr:hover td{background:var(--grafite)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* A 1ª coluna fica fixa ao rolar na horizontal: numa tabela de 12 meses, perder de vista o
   nome da linha é perder o sentido do número. */
td.fixa,th.fixa{position:sticky;left:0;background:var(--carvao);font-weight:600;z-index:1}
th.fixa{background:var(--grafite);z-index:3}
.pastel{color:var(--cinza2)}
.bola{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:7px}
.bola.verde{background:var(--verde)} .bola.amarelo{background:var(--amarelo)}
.bola.vermelho{background:var(--vermelho)} .bola.cinza{background:var(--cinza2)}

/* ---------------------------------------------------------------- gráfico */
.grafico{background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px}
.grafico svg{display:block;width:100%;height:auto}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--cinza);margin-top:10px}
.legenda i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;
  vertical-align:middle}
.legenda i.tracejada{background:none;border-top:2px dashed var(--ouro);height:0}

/* ---------------------------------------------------------------- grade do plano */
/* No computador os 12 meses cabem numa grade de 4 colunas: o ano inteiro de uma vez,
   sem rolar — que é a razão de ter mudado para desktop. */
.grade-plano{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:10px}
.mes-caixa{background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:11px 13px}
.mes-caixa.passado{opacity:.62}
.mes-caixa h3{font-size:13px;color:var(--branco);display:flex;justify-content:space-between;
  align-items:baseline;margin-bottom:9px}
.mes-caixa h3 small{font-size:11px;color:var(--cinza2);font-weight:600}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tres label{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--cinza2)}
.tres input{padding:8px 4px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.barra-acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.barra-acoes .espaco{flex:1}
.total-plano{font-size:13.5px;color:var(--cinza)}
.total-plano b{color:var(--branco);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- listas e avisos */
.lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.item{background:var(--carvao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 15px;cursor:pointer;text-align:left}
.item:hover{border-color:var(--ouro)}
.item h3{font-size:15.5px}
.item .meta{color:var(--cinza);font-size:12.5px;margin-top:4px}
.item .numeros{display:flex;gap:16px;margin-top:10px;font-size:12.5px}
.item .numeros b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--grafite);
  color:var(--cinza);margin-left:6px}
.tag.ouro{background:var(--ouro-fraco);color:var(--ouro-claro)}
.vazio{text-align:center;color:var(--cinza);padding:44px 16px}
.aviso-caixa{background:var(--amarelo-fraco);border:1px solid var(--amarelo);
  border-radius:var(--raio);padding:10px 13px;font-size:13px;color:var(--amarelo);margin:0 0 16px}

/* ---------------------------------------------------------------- painel lateral (folha) */
/* No computador o formulário entra pela direita, como painel — não como gaveta de baixo. */
.folha{position:fixed;inset:0;z-index:40;display:flex;justify-content:flex-end}
.folha-fundo{position:absolute;inset:0;background:#000b}
.folha-corpo{position:relative;width:min(460px,100%);height:100%;overflow-y:auto;
  background:var(--preto);border-left:1px solid var(--linha);padding:22px 24px 32px}
.folha h2{font-size:18px;margin:0 0 4px}
.folha .sub{color:var(--cinza);font-size:13px;margin:0 0 18px}
.campos{display:grid;gap:12px}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* O botão de salvar fica no FIM, nunca grudado no meio do painel rolável — lição do Caixa de
   Pesca: sticky ali fazia a pessoa achar que o formulário tinha acabado ali. */
.acoes{margin-top:22px;padding-top:16px;border-top:1px solid var(--linha);display:grid;gap:8px}

/* O aviso nunca recebe toque/clique: no app de visitas (14/08/2026) ele cobria o botão Salvar
   e ENGOLIA o clique seguinte. */
.aviso-flutuante{position:fixed;right:26px;bottom:26px;z-index:60;pointer-events:none;
  background:var(--grafite);border:1px solid var(--linha);border-radius:var(--raio);
  padding:12px 17px;max-width:min(420px,70vw);box-shadow:0 8px 28px #000a;font-size:13.5px}
.aviso-flutuante.bom{border-color:var(--verde);color:var(--verde)}
.aviso-flutuante.ruim{border-color:var(--vermelho);color:var(--vermelho)}

/* ---------------------------------------------------------------- telas estreitas */
/* O alvo é computador, mas a tela não pode QUEBRAR num notebook pequeno ou num tablet:
   abaixo de 860px a lateral vira uma faixa horizontal no topo. */
@media (max-width:860px){
  .moldura{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lateral{flex-direction:row;align-items:center;gap:14px;padding:10px 14px;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--linha)}
  .lateral .modulo{display:none}
  .menu{grid-auto-flow:column;gap:4px}
  .menu button{white-space:nowrap;padding:8px 10px}
  .rodape-lateral{margin:0 0 0 auto;border:0;padding:0;grid-auto-flow:column;
    align-items:center;gap:10px}
  .cabecalho,main{padding-left:16px;padding-right:16px}
  .folha-corpo{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- quadro sem rolagem */
/* Pedido do Gabriel (02/10/2026): "não quero a barra de rolagem no mês a mês, deve exibir tudo
   no quadro". Então nada de `overflow:auto` aqui — a tabela encolhe para caber. O que paga a
   conta é a densidade: fonte menor, menos respiro lateral e cabeçalho abreviado (o nome inteiro
   fica no `title`, ao passar o mouse). */
.quadro{border:1px solid var(--linha);border-radius:var(--raio);background:var(--carvao);
  overflow:hidden}
.quadro table{width:100%;table-layout:fixed}
table.apertada{font-size:12px}
table.apertada th{padding:8px 4px;font-size:9.5px;letter-spacing:.03em}
table.apertada td{padding:7px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.apertada th:first-child,table.apertada td:first-child{width:62px;padding-left:10px}
table.apertada td:last-child,table.apertada th:last-child{padding-right:10px}
/* Dentro do quadro a 1ª coluna não precisa grudar: não há rolagem lateral para fugir dela. */
.quadro td.fixa,.quadro th.fixa{position:static}

/* ---------------------------------------------------------------- legenda do gráfico */
.grafico{position:relative}
.dica-grafico{position:absolute;z-index:5;pointer-events:none;
  background:var(--preto);border:1px solid var(--ouro);border-radius:var(--raio);
  padding:9px 12px;font-size:12.5px;line-height:1.5;min-width:190px;
  box-shadow:0 6px 22px #000b;display:grid;gap:2px}
.dica-grafico b{font-size:13px;color:var(--ouro-claro);margin-bottom:2px}
.dica-grafico i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px}
.dica-grafico em{font-style:normal;color:var(--cinza2);font-size:11.5px}
.dica-grafico .pastel{color:var(--cinza2);font-size:11.5px}
.faixa-mes{cursor:crosshair}
.small-ajuda{font-size:11.5px;color:var(--cinza2);font-weight:400;line-height:1.4;margin-top:2px}

/* O painel de edição cresceu (comissão, estudo, condição de pagamento) e o botão Salvar saiu
   da área visível. Aqui ele passa a ficar preso no RODAPÉ do painel.
   ⚠️ Não é a armadilha do Caixa de Pesca (28/09/2026): lá o `sticky` grudava os botões no MEIO
   do formulário, entre dois campos, porque o container de rolagem era outro. Aqui o container
   de rolagem é a própria `.folha-corpo`, então `bottom:0` prende na borda de baixo — que é
   onde o botão deve estar. O fundo é opaco de propósito: translúcido deixaria texto passando
   por trás e pareceria defeito. */
.folha-corpo .acoes{position:sticky;bottom:0;background:var(--preto);
  margin-top:22px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha);box-shadow:0 -10px 18px -10px #000}