/* ---------------------------------------------------------------------------
   cotacoes.css - a casca comum das telas do mapa de cotacao
   ---------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE (20/08/2026)
   Cada uma das 8 telas trazia o CSS inteiro dentro do proprio HTML, e 52% disso
   era a MESMA casca escrita 8 vezes: topo, menu, botao Sair, largura do conteudo,
   tabela, cartoes. Toda mudanca visual custava 8 edicoes - e foi exatamente dai
   que sairam os tropecos: o --verde acabou com dois valores diferentes porque
   ninguem decidiu, foi copia que divergiu; e o bloco responsivo, inserido 8 vezes,
   caiu dentro do template de impressao em duas paginas e quebrou uma terceira.

   REGRA DE CONVIVENCIA: aqui mora o que e igual em todas. O que e de UMA tela fica
   no <style> dela. E quando uma tela precisa de um valor proprio (a largura do
   conteudo muda de 1000 a 1300 conforme a pagina), ela SOBRESCREVE em uma linha,
   no proprio arquivo, com o motivo escrito. Sobrescrita explicada e manutencao;
   copia inteira e deriva.

   CACHE: o nginx da Locaweb serve css com validade de dez anos e o .htaccess nao
   vence isso. Por isso as paginas citam este arquivo como cotacoes.css?v=<hash do
   conteudo>, carimbado pelo ferramentas/versionar-css.js. Mexeu aqui, rode ele
   antes de subir - senao a mudanca nao chega em quem ja abriu o site.
   --------------------------------------------------------------------------- */

/* --- Paleta ---------------------------------------------------------------- */
:root {
  --laranja:#F26414; --laranja-escuro:#d4530a;
  --preto:#101010; --cinza:#6b6b6b; --cinza-claro:#f4f4f5; --borda:#e6e6e8;
  --verde:#167c3a; --verde-bg:#e8f7ee;
  --amarelo-bg:#fff3cd;
  --azul:#1a5fb4;

  /* Raios: quatro, e cada um tem trabalho. Campo/botao, caixa pequena, caixa
     grande, pilula. Havia onze valores diferentes no sistema. */
  --raio-p:8px; --raio-m:12px; --raio-g:16px; --pill:999px;

  /* Sombras: tres. A rente desenha a borda; a de caixa da profundidade; a
     elevada e so para o que reage ao mouse. Havia doze. */
  --sombra-1: 0 1px 2px rgba(16,16,16,.04);
  --sombra-2: 0 1px 2px rgba(16,16,16,.04), 0 12px 32px rgba(16,16,16,.05);
  --sombra-3: 0 2px 4px rgba(16,16,16,.05), 0 16px 40px rgba(16,16,16,.08);
  --halo: 0 0 0 3px rgba(242,100,20,.12);

  /* Aviso: o #a67c00 sobre o fundo creme dava 3.44 de contraste, abaixo do minimo
     de 4.5 para texto normal. Escurecido ate 4.56 - medido, nao escolhido. */
  --amarelo:#8d6900;

  /* Cinza de texto secundario fraco. O #b0b0b0 que estava em uso dava 2.17: nao
     era discreto, era ilegivel. */
  --cinza-fraco:#767676;
}

* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,"Segoe UI",Roboto,sans-serif; background:#f7f8fa; color:var(--preto); }

/* --- Topo e menu ----------------------------------------------------------- */
.topo { background:#fff; border-bottom:3px solid var(--laranja); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.topo-esq { display:flex; align-items:center; gap:28px; }
.topo img { height:42px; }
.nav { display:flex; gap:6px; }
.nav a { text-decoration:none; font-size:14px; font-weight:600; color:var(--cinza); padding:8px 14px; border-radius:var(--raio-p); transition:all .15s; }
.nav a:hover { background:var(--cinza-claro); color:var(--preto); }
.nav a.ativo { background:var(--laranja); color:#fff; }
.topo-dir { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--cinza); }
.btn-sair { background:var(--cinza-claro); color:var(--preto); border:none; padding:7px 14px; border-radius:var(--raio-p); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-sair:hover { background:#e8e8ea; }

/* --- Corpo ----------------------------------------------------------------- */
/* 1200 e o meio-termo entre as telas; quem precisa de outra largura sobrescreve. */
.conteudo { max-width:1200px; margin:0 auto; padding:34px 32px; }
h1 { font-size:24px; letter-spacing:-.3px; margin-bottom:6px; }
.sub { color:var(--cinza); font-size:13.5px; margin-bottom:28px; }
.card { background:#fff; border:1px solid #eeeef1; border-radius:var(--raio-g); padding:26px; margin-bottom:22px; box-shadow:var(--sombra-2); }
.card h2 { font-size:15px; margin-bottom:18px; }

/* --- Formulario ------------------------------------------------------------ */
label { font-size:12px; font-weight:600; color:var(--cinza); }
label .req { color:var(--laranja); }
input { padding:9px 11px; border:1px solid var(--borda); border-radius:var(--raio-p); font-size:14px; font-family:inherit; background:#fff; }
input:focus { outline:none; border-color:var(--laranja); box-shadow:var(--halo); }
button { font-size:14px; padding:9px 18px; border-radius:var(--raio-p); border:none; cursor:pointer; font-weight:600; font-family:inherit; }
button:disabled { opacity:.5; cursor:default; }
.btn-primario { background:var(--laranja); color:#fff; }
.btn-primario:hover { background:var(--laranja-escuro); }
.btn-sec { background:var(--cinza-claro); color:var(--preto); }
.mini { padding:5px 10px; font-size:12px; }
/* Foco visivel: andar de Tab sem enxergar onde se esta e facil de errar. */
input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--laranja); outline-offset:2px; }

/* --- Tabela ---------------------------------------------------------------- */
table { border-collapse:collapse; width:100%; }
th,td { padding:14px 13px; text-align:left; font-size:13px; border-bottom:1px solid #f0f0f3; }
th { background:var(--preto); color:#fff; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.3px; }
/* Numero de largura fixa: as casas alinham entre as linhas e comparar fica direto. */
table td, table th { font-variant-numeric:tabular-nums; }
/* A linha inteira acende ao passar o mouse - tabela larga e facil de perder. */
tbody tr:hover td { background:#fffaf6; }

/* --- Avisos e vazios -------------------------------------------------------- */
.status { font-size:13px; padding:10px 14px; border-radius:var(--raio-p); margin-bottom:16px; display:none; }
.status.ok { background:rgba(242,100,20,.1); color:var(--laranja-escuro); display:block; }
.status.erro { background:#fdecea; color:#c0392b; display:block; }
.vazio { text-align:center; color:var(--cinza); padding:30px; font-size:14px; }
.tag { display:inline-block; background:rgba(242,100,20,.12); color:var(--laranja-escuro); font-size:11px; padding:2px 8px; border-radius:5px; font-weight:600; }

/* A tela so aparece depois que o login foi conferido. */
#appcontent { display:none; }

/* --- Celular e tablet -------------------------------------------------------
   Nada aqui muda o desktop: so vale abaixo de 820px. Seletor que a pagina nao tem
   fica inerte, por isso o bloco pode ser o mesmo para todas. */
@media (max-width: 820px) {
  .topo { padding:12px 16px; gap:12px; align-items:flex-start; }
  .topo-esq { flex-direction:column; align-items:flex-start; gap:10px; width:100%; }
  .topo img { height:32px; }
  .nav { flex-wrap:wrap; gap:4px; }
  .nav a { font-size:13px; padding:7px 11px; }
  .topo-dir { width:100%; justify-content:space-between; font-size:12px; }
  .conteudo { padding:18px 16px; }
  h1 { font-size:19px; }
  .cards { grid-template-columns:repeat(2,1fr); gap:12px; }
  .card-num { padding:14px 15px; }
  /* tabela larga rola dentro da caixa em vez de empurrar a pagina */
  .painel, .card { padding:14px; overflow-x:auto; }
  .barra { gap:8px; }
  .barra select, .barra input { flex:1 1 auto; min-width:0; }
  table { font-size:12px; }
  th, td { padding:8px 9px; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns:1fr; }
  .nav a { font-size:12px; padding:6px 9px; }
}

/* --- Acabamento -------------------------------------------------------------
   A camada que da a cara moderna sem mexer em layout: gradiente no fundo, luz no
   laranja, sombra em duas camadas, cantos maiores e transicao curta em tudo que
   responde ao mouse.

   O QUE NAO FIZ DE PROPOSITO: fixar o topo na rolagem. O mapa tem o cabecalho da
   tabela grudado em top:0 e os dois brigariam - a tabela passaria por baixo do
   menu. Efeito bonito que quebra a tela principal nao entra.
   -------------------------------------------------------------------------- */

/* Fundo com um respiro de cor no alto, em vez de cinza chapado. */
body {
  background:
    radial-gradient(1200px 400px at 50% -180px, rgba(242,100,20,.07), transparent 70%),
    #f7f8fa;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* A borda do topo vira um fio de luz que se apaga nas pontas. */
.topo {
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(16,16,16,.05), 0 6px 20px rgba(16,16,16,.03);
  position: relative;
}
.topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--laranja), #ff8a3d 45%, rgba(242,100,20,.15));
}

/* Item ativo do menu: pilula com brilho proprio. */
.nav a { transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav a:hover { transform: translateY(-1px); }
.nav a.ativo {
  background: linear-gradient(180deg, var(--laranja), var(--laranja-escuro));
  box-shadow: 0 2px 10px rgba(242,100,20,.35);
}

/* Caixa branca com duas camadas de sombra: uma rente, para desenhar a borda, e
   outra larga e fraca, para dar profundidade. */
.card, .painel, .card-num {
  border-radius: var(--raio-g);
  border: 1px solid rgba(16,16,16,.05);
  box-shadow: var(--sombra-2);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card-num:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
}

/* Numero grande de painel: o que a pessoa le de longe. */
.card-num .valor { letter-spacing:-.5px; font-variant-numeric: tabular-nums; }

/* Botao principal com volume e um halo do proprio laranja. */
.btn-primario {
  background: linear-gradient(180deg, var(--laranja), var(--laranja-escuro));
  box-shadow: 0 2px 10px rgba(242,100,20,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(242,100,20,.36); filter: saturate(1.05); }
.btn-primario:active { transform: translateY(0); }
.btn-sair, .btn-sec { transition: background .15s ease, transform .15s ease; }
.btn-sair:hover, .btn-sec:hover { transform: translateY(-1px); }

/* Campos: foco com halo em vez de borda dura. */
input, select { transition: border-color .15s ease, box-shadow .15s ease; }

/* Cabecalho preto da tabela: cantos arredondados na primeira e ultima coluna,
   para a tabela combinar com o cartao que a segura. */
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }

/* Etiqueta laranja com contorno tenue em vez de so fundo. */
.tag { border: 1px solid rgba(242,100,20,.2); }

/* Quem prefere menos movimento nao leva movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .nav a:hover, .card-num:hover, .btn-primario:hover, .btn-sair:hover, .btn-sec:hover { transform: none; }
}