/* Estilo das telas internas: login, converter e gestão. A página do cliente tem o seu, próprio e inteiro,
   porque ela é o documento — esta folha é só ferramenta de balcão. */

@font-face{font-family:'Bebas Neue';src:url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --azul:#0D1F3C; --laranja:#F07A1A; --texto:#1A2233; --suave:#5C6678; --fraco:#8A93A3;
  --linha:#DFDBD3; --papel:#F4F2EE; --vermelho:#B3261E; --verde:#1E6B45; --ambar:#8A5A00;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--papel);color:var(--texto);
  font:400 15px/1.55 'DM Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
a{color:var(--azul)}

.folha{max-width:860px;margin:0 auto;background:#fff;min-height:100vh}
.folha.larga{max-width:1180px}
header{background:var(--azul);color:#fff;padding:18px 16px 14px}
header img{width:150px;max-width:55%;display:block}
header h1{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:26px;letter-spacing:.6px;
  margin:28px 0 0}                                  /* 28px = 1X: área de proteção do logotipo */
header .quem{margin:6px 0 0;font-size:13px;color:var(--fraco)}
header .quem a{color:var(--fraco)}
.filete{height:5px;background:var(--laranja)}
.pad{padding:18px 16px}

nav.abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
/* 10px de padding fecha 44px de alvo de toque: o consultor usa isto de celular, com o polegar. */
nav.abas a{padding:10px 12px;border:1px solid var(--linha);border-radius:3px;text-decoration:none;
  font-size:14px;font-weight:500;background:#fff;white-space:nowrap}
nav.abas a.atual{background:var(--azul);color:#fff;border-color:var(--azul)}
nav.abas a .n{color:var(--suave);font-weight:400}
nav.abas a.atual .n{color:#C6CEDC}
/* Segunda linha: os filtros por estado, que só existem na tela de orçamentos */
nav.abas.filtros{margin-top:-8px;padding-left:2px}
nav.abas.filtros a{padding:9px 14px;font-size:13px;border-radius:20px}

label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);margin-bottom:6px}
input[type=url],input[type=text],input[type=password],input[type=search]{width:100%;padding:13px;
  border:1.5px solid var(--linha);border-radius:4px;font:inherit;font-size:15px;background:#fff}
input:focus{outline:2px solid var(--azul);border-color:var(--azul)}
button{width:100%;margin-top:12px;padding:14px;border:0;border-radius:4px;background:var(--azul);color:#fff;
  font:700 16px 'DM Sans',Arial,sans-serif;cursor:pointer}
.botao-link{display:block;margin-top:12px;padding:14px;border-radius:4px;background:#fff;color:var(--azul);
  border:1.5px solid var(--azul);text-align:center;text-decoration:none;font-weight:700;font-size:16px}
.mini{width:auto;margin:0;padding:11px 14px;font-size:14px}
.mini.laranja{background:var(--laranja);color:var(--azul)}   /* azul sobre laranja: 5,87:1 */

.erro{background:#FBE9E7;border-left:4px solid var(--vermelho);padding:11px 13px;border-radius:3px;
  margin-bottom:14px;font-size:14px}
.ok{border:1px solid var(--linha);border-radius:4px;padding:14px;background:var(--papel);margin-top:18px}
.ok h2{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:20px;margin:0 0 4px;color:var(--azul)}
.ok p{margin:0 0 10px;font-size:13.5px;color:var(--suave)}
.resumo{font-size:13.5px;color:var(--suave);margin-top:12px;border-top:1px solid var(--linha);padding-top:10px}
.resumo b{color:var(--texto)}

.qr-linha{display:flex;gap:12px;align-items:center;margin-top:14px;border-top:1px solid var(--linha);padding-top:12px}
.qr-linha svg{width:104px;height:104px;display:block;background:#fff;padding:5px;border:1px solid var(--linha);border-radius:3px}
.qr-linha p{margin:0;font-size:13px;color:var(--suave)}

.previa{margin-top:18px;border:1px solid var(--linha);border-radius:4px;overflow:hidden}
.previa-topo{background:var(--azul);color:#fff;padding:9px 12px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;font-size:14px;font-weight:500}
#quadro{width:100%;height:78vh;min-height:460px;border:0;display:block;background:#fff}

/* Selo de estado — a cor é forma, o texto carrega o sentido */
.selo{display:inline-block;padding:3px 9px;border-radius:3px;font-size:12.5px;font-weight:700;
  white-space:nowrap;border:1px solid}
.selo-aguardando{background:#FFF4E5;color:var(--ambar);border-color:#E8D5AE}
.selo-autorizado{background:#E8F3EC;color:var(--verde);border-color:#BFDCC9}
.selo-parcial{background:#EAEFF7;color:var(--azul);border-color:#C3CFE2}
.selo-recusado{background:#FBE9E7;color:var(--vermelho);border-color:#EEC9C4}
.selo-atualizado{background:#FDECD9;color:#A14D00;border-color:#EFCFA8}   /* #A14D00 sobre #FDECD9: 5,4:1 */
.venceu{font-size:12px;font-weight:700;color:var(--vermelho)}
.no-sistema{font-size:12px;font-weight:700;color:var(--verde)}
/* Cliente abriu o link e não assinou: sinal de follow-up, não de erro — laranja da marca, e o
   #A14D00 da mesma família do selo-atualizado, que passa contraste sobre branco. */
.abriu{font-size:12px;font-weight:700;color:#A14D00}

table.grade{width:100%;border-collapse:collapse;font-size:14px}
table.grade th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);
  border-bottom:1.5px solid var(--linha);padding:7px 8px;font-weight:500;white-space:nowrap}
table.grade td{border-bottom:1px solid var(--linha);padding:9px 8px;vertical-align:top}
table.grade tr:hover td{background:var(--papel)}
table.grade .num{text-align:right;white-space:nowrap}
table.grade .acoes{white-space:nowrap;text-align:right}
/* Abrir, copiar, WhatsApp, lançar e reenviar são as ações do dia do consultor, e ele usa isto de
   celular: o padding vertical existe para o alvo de toque fechar 40px, não para afastar texto. O
   margin negativo devolve a altura à linha, para a tabela não crescer 20px por linha. */
table.grade .acoes a,table.grade button.como-link{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
table.grade .acoes a{display:inline-block;margin-left:7px;font-size:13px;font-weight:500;text-decoration:none}
/* Ação que grava (reenviar) é um form, mas na linha tem de parecer com os outros links */
table.grade .acoes form{display:inline}
button.como-link{width:auto;margin:0;padding:0 0 0 7px;background:none;border:0;color:var(--azul);
  font:500 13px 'DM Sans',Arial,sans-serif;cursor:pointer}
button.como-link:disabled{color:var(--fraco);cursor:default}
.vazio{padding:34px 12px;text-align:center;color:var(--suave)}
.rolar{overflow-x:auto}
/* Celular: a tabela de orçamentos enviados cabe na tela em vez de rolar para o lado. Some o que o
   consultor lê no orçamento aberto (data, veículo, valores, quem vendeu) e fica o que ele usa na
   lista: número, cliente, estado e as ações. Sem isto, "copiar" e "WhatsApp" nasciam fora da tela. */
@media(max-width:560px){
  table.grade .so-largo{display:none}
  /* Com quatro colunas ainda não cabia: as ações em linha pediam 238px e o selo, 179px de nowrap.
     No celular as ações viram lista e o selo pode quebrar em duas linhas — aí a tabela fecha na
     largura da tela, e "copiar" e "WhatsApp" ficam onde o dedo alcança. */
  table.grade .acoes{white-space:normal;text-align:left}
  table.grade .acoes a,table.grade .acoes button.como-link{display:block;margin-left:0;text-align:left}
  table.grade .selo{white-space:normal}
}
.buscar{display:flex;gap:8px;margin-bottom:14px}
.buscar input{flex:1}
.buscar button{width:auto;margin:0;padding:0 18px}

/* Painel — os quatro números do dia, depois a tabela dos períodos */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.cartao{border:1px solid var(--linha);border-radius:4px;padding:11px 13px;background:var(--papel)}
.cartao dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);margin:0}
.cartao dd{margin:3px 0 0;font-family:'Bebas Neue',Impact,sans-serif;font-size:27px;line-height:1.1;
  letter-spacing:.5px;color:var(--azul)}
.aberto{margin:16px 0 0}
.aberto a{text-decoration:none;font-size:14px;color:var(--suave)}
.aberto a b{color:var(--texto)}

/* Gráficos do painel — barras em HTML, uma série só, sem legenda: o título diz o que é.
   #C85F00 é o laranja escurecido que passa 3:1 sobre o papel; o da marca fica no toque. */
.grafico{margin:0 0 20px;padding:0}
.grafico figcaption{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--suave);
  margin-bottom:8px}
.barras{display:flex;align-items:flex-end;gap:2px;height:150px;border-bottom:1.5px solid var(--linha)}
.barras .col{flex:1 1 0;min-width:0;height:100%;position:relative}
.barras .barra{position:absolute;left:0;right:0;bottom:0;display:block;
  background:#C85F00;border-radius:3px 3px 0 0;transition:background .12s}
.barras .col:hover .barra{background:var(--laranja)}
/* Período sem aprovação: um traço neutro. Laranja aqui leria como dado, e é ausência de dado. */
.barras .barra.sem-dado,.barras .col:hover .barra.sem-dado{background:var(--linha)}
.barras .rotulo-valor{position:absolute;left:-6px;right:-6px;text-align:center;font-size:11px;
  font-weight:700;color:var(--texto);white-space:nowrap}
/* Nas pontas o rótulo se alinha para dentro, senão sai do gráfico */
.barras .col:first-child .rotulo-valor{left:0;text-align:left}
.barras .col:last-child .rotulo-valor{right:0;text-align:right}
.rotulos{display:flex;gap:2px;margin-top:5px}
.rotulos span{flex:1 1 0;min-width:0;font-size:11px;color:var(--suave);text-align:center;
  white-space:nowrap}
.grafico details{margin-top:6px;font-size:13px}
.grafico details summary{cursor:pointer;color:var(--azul)}
.grafico details table{margin-top:6px;max-width:340px}
.grafico details td{padding:5px 8px}
@media(max-width:620px){
  /* 14 rótulos de dia não cabem em 390px: some um sim, um não — e o último, que é hoje, fica */
  .rotulos span:nth-child(odd){visibility:hidden}
  .barras .rotulo-valor{font-size:10px}
}

/* Usuários — a linha da tabela é um formulário; o cadastro novo, uma grade que quebra no celular */
select{padding:12px;border:1.5px solid var(--linha);border-radius:4px;font:inherit;font-size:15px;background:#fff}
select:focus{outline:2px solid var(--azul);border-color:var(--azul)}
table.grade form{display:flex;gap:6px;align-items:center;margin:0;flex-wrap:wrap}
table.grade form input,table.grade form select{width:auto;padding:10px 9px;font-size:13.5px;border-radius:3px}
table.grade form input[type=password]{max-width:155px}
.mini.vermelho{background:var(--vermelho);color:#fff}
.titulo-secao{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;font-size:20px;letter-spacing:.6px;
  color:var(--azul);margin:24px 0 10px}
form.novo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 12px;align-items:end}
form.novo label{margin-bottom:4px}
form.novo select{width:100%}
form.novo button{grid-column:1/-1;justify-self:start}

/* Gestão — a lista é dos últimos 90 dias; o resto fica atrás desta caixinha */
.antigos{margin:-6px 0 14px;font-size:13.5px;color:var(--suave)}
.antigos label{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;
  font-size:13.5px;color:var(--suave);margin:0;cursor:pointer}
.antigos input{width:16px;height:16px;accent-color:var(--azul)}
.instalar{margin:0 0 14px;font-size:14px;color:var(--suave);line-height:1.5}