/* ===========================================================================
   ARAUTO — o visual novo (`/novo`, 04/11/2026)

   Pedido do dono do produto: "em um /novo reformule o visual do arauto, algo
   melhor, mais visualmente agradável". Carrega DEPOIS de estilo.css e
   novo.css, só no navegador que ligou o visual novo (`visual=novo`), e tudo
   aqui vale sob `.visual-novo`: o HTML é o mesmo de sempre.

   O que muda, e por quê:
   - superfícies em camadas (fundo, cartão, cartão elevado) com borda de luz em
     vez de linha cinza dura, cantos maiores e mais respiro;
   - o laranja da casa fica para o que é ação ou estado ativo — botão
     principal, aba atual, foco —, e nome e link voltam ao texto claro: antes
     a tela inteira competia pela atenção;
   - rótulo em caixa normal, no lugar das maiúsculas pequenas espaçadas em
     toda parte, que cansavam a leitura;
   - a faixa do topo em vidro, com as abas em pílula;
   - o quadro (kanban) com colunas leves e cards que sobem ao passar o mouse.

   A identidade fica: fundo escuro, o laranja e o cobre da casa, a
   Ethnocentric na marca, o trilho de estado de 3px no que tem situação e o
   número em fonte mono. Nada vem de fora da máquina.
   =========================================================================== */

.visual-novo {
  --v-fundo: #0b0b0c;
  --v-camada: #131315;
  --v-cartao: #17171a;
  --v-elevado: #1d1d21;
  --v-elevado-2: #24242a;
  --v-borda: rgba(255, 255, 255, .07);
  --v-borda-forte: rgba(255, 255, 255, .13);
  --v-texto: #f3f3f4;
  --v-suave: #a9a9b0;
  --v-fraco: #7f7f88;
  --v-laranja: #ff7a1f;
  --v-laranja-2: #e8610a;
  --v-laranja-fundo: rgba(255, 122, 31, .13);
  --v-laranja-borda: rgba(255, 122, 31, .35);
  --v-anel: 0 0 0 3px rgba(255, 122, 31, .22);
  --v-raio: 16px;
  --v-raio-m: 12px;
  --v-raio-p: 9px;
  --v-sombra: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -12px rgba(0, 0, 0, .7);
  --v-sombra-alta: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -16px rgba(0, 0, 0, .85);
  --v-troca: .16s ease;
}

body.visual-novo {
  background:
    radial-gradient(1200px 520px at 70% -10%, rgba(255, 122, 31, .07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(160, 85, 38, .06), transparent 60%),
    var(--v-fundo);
  color: var(--v-texto);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
.visual-novo ::selection { background: rgba(255, 122, 31, .35); }
.visual-novo ::-webkit-scrollbar-thumb { background: #3a3a40; border-radius: 6px; }
.visual-novo ::-webkit-scrollbar-thumb:hover { background: #55555c; }

/* ------------------------------------------------------------ a faixa ----- */

.visual-novo .topo-areas {
  background: rgba(15, 15, 17, .78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--v-borda);
  gap: 8px;
}
.visual-novo .abas-areas { align-self: center; gap: 4px; padding: 4px; }
.visual-novo .aba-area {
  padding: 7px 14px;
  border-radius: 999px;
  border-bottom: 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--v-suave);
}
.visual-novo .aba-area:hover { color: var(--v-texto); background: rgba(255, 255, 255, .06); }
.visual-novo .aba-area[aria-current="true"] {
  color: #fff;
  background: var(--v-laranja-fundo);
  box-shadow: inset 0 0 0 1px var(--v-laranja-borda);
}
.visual-novo .alterna-rail {
  border-radius: 999px; border-color: var(--v-borda-forte); color: var(--v-suave); background: transparent;
}
.visual-novo .usuario-card {
  background: var(--v-cartao); border: 1px solid var(--v-borda); border-radius: 999px;
  padding: 3px 4px 3px 3px;
}
.visual-novo .usuario-card:hover { border-color: var(--v-borda-forte); }
.visual-novo .usuario-papel {
  color: var(--v-laranja); background: var(--v-laranja-fundo);
  text-transform: none; letter-spacing: .2px; font-size: 10.5px; border-radius: 999px; padding: 0 7px;
}
.visual-novo button.link.sair-btn { border-radius: 999px; border-color: var(--v-borda-forte); }
.visual-novo .painel-perfil {
  background: var(--v-elevado); border: 1px solid var(--v-borda-forte); border-radius: var(--v-raio);
}

/* ------------------------------------------------------------ a rail ------ */

.visual-novo .rail {
  background: linear-gradient(180deg, rgba(19, 19, 21, .9), rgba(14, 14, 16, .9));
  border-right: 1px solid var(--v-borda);
  padding: 20px 16px;
  gap: 22px;
}
.visual-novo .rail-titulo {
  font-size: 12px; letter-spacing: .1px; text-transform: none; font-weight: 700;
  color: var(--v-suave);
}
.visual-novo .rail-titulo::after { background: var(--v-borda); }
.visual-novo .tile {
  background: linear-gradient(160deg, var(--v-elevado), var(--v-cartao));
  border: 1px solid var(--v-borda);
  border-radius: var(--v-raio-m);
  padding: 12px 13px 11px;
  box-shadow: var(--v-sombra);
}
.visual-novo a.tile:hover { border-color: var(--v-laranja-borda); background: linear-gradient(160deg, var(--v-elevado-2), var(--v-elevado)); }
.visual-novo .tile .rotulo {
  font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--v-suave); font-weight: 600;
}
.visual-novo .tile .numero { font-size: 28px; color: var(--v-laranja); }
.visual-novo .tile .numero.ok { color: #5fc187; }
.visual-novo .tile .numero.pendente { color: #e3bd45; }
.visual-novo .distribuicao .rotulo { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--v-suave); }
.visual-novo .faixa { height: 8px; gap: 3px; }
.visual-novo .faixa span { border-radius: 4px; }
.visual-novo .legenda-linha { font-size: 12px; }
.visual-novo .alerta-linha {
  background: var(--v-cartao); border: 1px solid var(--v-borda); border-left: var(--trilho) solid var(--v-laranja);
  border-radius: 0 10px 10px 0; padding: 7px 10px;
}
.visual-novo .ajuste-rail::after { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------ o painel ---- */

.visual-novo main.painel { padding: 28px 36px 64px 40px; }
.visual-novo h1 {
  font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: var(--v-texto); margin-bottom: 18px;
}
.visual-novo h1 .etiqueta { vertical-align: middle; }
.visual-novo h2 {
  font-size: 13px; letter-spacing: .1px; text-transform: none; font-weight: 700; color: var(--v-suave);
}
.visual-novo h2::after { background: var(--v-borda); }
.visual-novo h3 { font-size: 16px; font-weight: 700; color: var(--v-texto); }
.visual-novo a { color: var(--v-laranja); transition: color var(--v-troca), background-color var(--v-troca); }
.visual-novo a:hover { color: #ffa264; }
.visual-novo .explica, .visual-novo .explica-linha { color: var(--v-suave); }
.visual-novo .rotulo, .visual-novo label, .visual-novo .criar-rapido label, .visual-novo .dados-card dt,
.visual-novo dt {
  font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--v-suave);
}

/* Cartões, blocos e janelas: a mesma superfície em toda tela. */
.visual-novo .cartao,
.visual-novo .ajustes-relatorio,
.visual-novo .filtros,
.visual-novo .rolavel,
.visual-novo .rel-cartao,
.visual-novo .rel-info {
  background: var(--v-cartao);
  border: 1px solid var(--v-borda);
  border-radius: var(--v-raio);
  box-shadow: var(--v-sombra);
}
.visual-novo .cartao:hover, .visual-novo .rel-cartao:hover { border-color: var(--v-borda-forte); }
.visual-novo .cartao { padding: 20px 22px; margin-bottom: 18px; }
.visual-novo .cartao .rolavel { box-shadow: none; border: 0; background: none; }
.visual-novo .cartao.atraso, .visual-novo .cartao.sugestoes, .visual-novo .cartao.rolavel { border-left-width: var(--trilho); }

.visual-novo .somas > div {
  background: linear-gradient(160deg, var(--v-elevado), var(--v-cartao));
  border: 1px solid var(--v-borda); border-radius: var(--v-raio-m); box-shadow: var(--v-sombra);
}
.visual-novo .somas > div:hover { border-color: var(--v-laranja-borda); }

/* ------------------------------------------------------------ campos ------ */

.visual-novo input, .visual-novo select, .visual-novo textarea {
  background-color: #0f0f11;
  border: 1px solid var(--v-borda-forte);
  border-radius: var(--v-raio-p);
  color: var(--v-texto);
  padding: 9px 12px;
  transition: border-color var(--v-troca), box-shadow var(--v-troca), background-color var(--v-troca);
}
.visual-novo input:hover, .visual-novo select:hover, .visual-novo textarea:hover { border-color: rgba(255, 255, 255, .2); }
.visual-novo input:focus, .visual-novo select:focus, .visual-novo textarea:focus {
  border-color: var(--v-laranja); box-shadow: var(--v-anel); outline: none; background-color: #121214;
}
.visual-novo input[type="checkbox"], .visual-novo input[type="radio"] { accent-color: var(--v-laranja); }
.visual-novo .marcacoes, .visual-novo fieldset { border-color: var(--v-borda); border-radius: var(--v-raio-m); }
.visual-novo .marcacoes .marca {
  border-radius: 999px; border-color: var(--v-borda-forte); background: #111113;
}
.visual-novo .marcacoes .marca:has(input:checked) {
  border-color: var(--v-laranja-borda); background: var(--v-laranja-fundo); color: #fff;
}

/* ------------------------------------------------------------ botões ------ */

.visual-novo button, .visual-novo .botao-fino {
  border-radius: var(--v-raio-p);
  background: var(--v-elevado);
  border: 1px solid var(--v-borda-forte);
  color: var(--v-texto);
  transition: background-color var(--v-troca), border-color var(--v-troca), color var(--v-troca),
              transform var(--v-troca), box-shadow var(--v-troca);
}
.visual-novo button:hover, .visual-novo .botao-fino:hover {
  background: var(--v-elevado-2); border-color: rgba(255, 255, 255, .22); color: #fff;
}
.visual-novo button.principal,
.visual-novo .criar-rapido-dobra > summary {
  background: linear-gradient(180deg, var(--v-laranja), var(--v-laranja-2));
  border: 1px solid rgba(255, 160, 100, .35);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 18px -6px rgba(255, 106, 0, .55);
  border-radius: 10px;
}
.visual-novo button.principal:hover,
.visual-novo .criar-rapido-dobra > summary:hover,
.visual-novo .criar-rapido-dobra[open] > summary {
  background: linear-gradient(180deg, #ff8a38, var(--v-laranja));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px -8px rgba(255, 106, 0, .65);
  transform: translateY(-1px);
}
.visual-novo .criar-rapido-dobra.discreta > summary,
.visual-novo .criar-rapido-dobra.completar > summary {
  background: transparent; box-shadow: none; transform: none;
}
.visual-novo .criar-rapido-dobra.discreta > summary { border-color: var(--v-borda-forte); color: var(--v-texto); }
.visual-novo .criar-rapido-dobra.discreta > summary:hover,
.visual-novo .criar-rapido-dobra.discreta[open] > summary { background: var(--v-elevado); border-color: var(--v-laranja-borda); }
.visual-novo .criar-rapido-dobra.completar > summary { border-color: rgba(227, 189, 69, .45); color: #e3bd45; }
.visual-novo button.perigo, .visual-novo .botao-fino.perigo {
  background: rgba(220, 105, 80, .1); border-color: rgba(220, 105, 80, .32); color: #ee8f78;
}
.visual-novo button.perigo:hover, .visual-novo .botao-fino.perigo:hover {
  background: rgba(220, 105, 80, .22); border-color: #dc6950; color: #fff;
}
.visual-novo button.link, .visual-novo .fechar-janela { background: none; border-color: transparent; }
.visual-novo button.link:hover { background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------ etiquetas --- */

.visual-novo .etiqueta, .visual-novo .card .sinal, .visual-novo .tipos .tipo,
.visual-novo .fora-base, .visual-novo .escada-follow .degrau {
  border-radius: 999px; letter-spacing: .3px; font-size: 10.5px; font-weight: 700; padding: 2px 9px;
}
.visual-novo .tipos .tipo, .visual-novo .etiqueta.origem-moni, .visual-novo h1 .etiqueta,
.visual-novo .etiqueta.papel-gestor {
  background: var(--v-laranja-fundo); color: #ff9a55;
}

/* ------------------------------------------------------------ tabelas ----- */

.visual-novo table { border-collapse: separate; border-spacing: 0; }
.visual-novo thead th {
  background: transparent;
  font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--v-suave);
  border-bottom: 1px solid var(--v-borda);
  padding: 12px 14px;
}
.visual-novo td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.visual-novo tbody tr:last-child td { border-bottom: 0; }
.visual-novo tbody tr { transition: background-color var(--v-troca); }
.visual-novo tbody tr:hover td { background: rgba(255, 255, 255, .035); }
/* O nome na tabela é texto, não um mar de laranja: o link acende ao passar. */
.visual-novo td a, .visual-novo .card a.cli, .visual-novo .rel-cartao td a {
  color: var(--v-texto); font-weight: 600;
}
.visual-novo td a:hover, .visual-novo .card a.cli:hover { color: var(--v-laranja); }

/* ------------------------------------------------------------ o quadro ---- */

.visual-novo .funil { gap: 14px; }
.visual-novo .coluna {
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--v-borda);
  border-radius: var(--v-raio);
  box-shadow: none;
}
.visual-novo .coluna:hover { border-color: var(--v-borda-forte); }
.visual-novo .coluna.e-hoje {
  border-color: var(--v-laranja-borda);
  background: linear-gradient(180deg, rgba(255, 122, 31, .07), rgba(255, 255, 255, .02) 40%);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 31, .18);
}
.visual-novo .coluna h2 {
  font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--v-texto);
  padding: 14px 14px 12px; border-bottom: 1px solid var(--v-borda);
}
.visual-novo .coluna h2 span {
  background: rgba(255, 255, 255, .07); color: var(--v-suave); border-radius: 999px; font-weight: 700;
}
.visual-novo .coluna h2 b { color: var(--v-suave); font-weight: 600; }
.visual-novo .coluna .pilha { gap: 9px; padding: 8px 9px 10px; }
.visual-novo .coluna .vazio { color: var(--v-fraco); font-size: 13px; }
.visual-novo .card {
  background: linear-gradient(170deg, var(--v-elevado), var(--v-cartao));
  border: 1px solid var(--v-borda);
  border-left-width: var(--trilho); border-left-style: solid;
  border-radius: var(--v-raio-m);
  box-shadow: var(--v-sombra);
  padding: 12px 13px;
}
.visual-novo .card:hover {
  background: linear-gradient(170deg, var(--v-elevado-2), var(--v-elevado));
  border-top-color: var(--v-borda-forte); border-right-color: var(--v-borda-forte); border-bottom-color: var(--v-borda-forte);
  box-shadow: var(--v-sombra-alta);
  transform: translateY(-2px);
}
.visual-novo .card .situacao { letter-spacing: .3px; font-weight: 700; }
.visual-novo .card .cli { font-size: 14px; }
.visual-novo .card .titulo { color: var(--v-suave); }
.visual-novo .card .meta { border-top-color: var(--v-borda); }
.visual-novo .card .acao-face { border-radius: 999px; }
.visual-novo .legenda-idade { color: var(--v-suave); }

/* Controles de semana, mês e recorte. */
.visual-novo .controle-semana, .visual-novo .navega-datas a, .visual-novo .navega-datas .desativado,
.visual-novo .troca-funil a, .visual-novo .filtros-agenda a, .visual-novo .faixa-resumo .recorte,
.visual-novo .ficha {
  border-radius: 999px; border-color: var(--v-borda-forte); background: var(--v-cartao);
}
.visual-novo .controle-semana { padding: 3px; }
.visual-novo .controle-semana .passo { border-radius: 999px; }
.visual-novo .troca-funil a.ativo, .visual-novo .filtros-agenda a.ativo, .visual-novo .faixa-resumo .recorte.ativo {
  background: var(--v-laranja-fundo); border-color: var(--v-laranja-borda); color: #fff;
}

/* ------------------------------------------------------------ janelas ----- */

.visual-novo .janela-card,
.visual-novo .criar-rapido-dobra .criar-rapido {
  background: var(--v-elevado);
  border: 1px solid var(--v-borda-forte);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03);
}
.visual-novo .criar-rapido-dobra[open]::before,
.visual-novo .card-janela[open]::before { background: rgba(5, 5, 7, .66); }
.visual-novo .janela-topo h3 { font-size: 19px; }

.visual-novo .aviso {
  border-radius: var(--v-raio-m); background: var(--v-laranja-fundo);
  border: 1px solid var(--v-laranja-borda); border-left: var(--trilho) solid var(--v-laranja); color: #ffc49a;
}
.visual-novo .aviso.erro { background: rgba(220, 105, 80, .1); border-color: rgba(220, 105, 80, .32); border-left-color: #dc6950; color: #f2b3a4; }

/* ------------------------------------------------------------ o agente ---- */

.visual-novo .agente { background: var(--v-elevado); border-color: var(--v-borda-forte); border-radius: 20px; }
.visual-novo .agente-resposta { background: var(--v-cartao); border-color: var(--v-borda); }
.visual-novo .balao-agente {
  background: linear-gradient(180deg, var(--v-laranja), var(--v-laranja-2));
  box-shadow: 0 12px 30px -8px rgba(255, 106, 0, .6), 0 0 0 1px rgba(255, 170, 110, .35) inset;
}

/* ------------------------------------------------------------ entrada ----- */

.visual-novo.tela-entrada {
  background:
    radial-gradient(800px 420px at 50% 30%, rgba(255, 122, 31, .14), transparent 70%),
    radial-gradient(600px 360px at 50% 80%, rgba(160, 85, 38, .12), transparent 70%),
    var(--v-fundo);
}
.visual-novo .cartao-entrada {
  background: rgba(23, 23, 26, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--v-borda-forte);
  border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06) inset;
  padding: 38px 32px 30px;
}

@media (prefers-reduced-motion: reduce) {
  .visual-novo .card:hover, .visual-novo button.principal:hover,
  .visual-novo .criar-rapido-dobra > summary:hover { transform: none; }
}
@media (max-width: 960px) {
  .visual-novo main.painel { padding: 18px 14px 48px; }
  .visual-novo h1 { font-size: 23px; }
}

/* O card do quadro é o próprio link: herda o texto, não o laranja do link. */
.visual-novo a.card, .visual-novo a.card:hover { color: var(--v-texto); }
.visual-novo a.card:hover .cli { color: #ffa264; }
/* Tabela não tem situação: sem o trilho grosso à esquerda. */
.visual-novo .cartao.rolavel { border-left-width: 1px; padding: 6px 8px; }
.visual-novo .marcacoes legend, .visual-novo legend {
  font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--v-suave);
}

/* Rótulo em caixa normal em toda parte (as etiquetas de estado — situação,
   sinal, tipo — continuam compactas em maiúsculas, que é o papel delas). */
.visual-novo .rel-info-rotulo, .visual-novo .rel-tabela th, .visual-novo .rel-colunas legend,
.visual-novo .rel-secao-rotulo, .visual-novo .apagar-dobra summary, .visual-novo .log-detalhe summary,
.visual-novo .secao-janela h4, .visual-novo .marcacoes, .visual-novo .por-mes, .visual-novo .dados-card dt,
.visual-novo .janela-topo .situacao, .visual-novo .cartao-entrada .sub {
  text-transform: none; letter-spacing: 0;
}
.visual-novo .rel-info-rotulo, .visual-novo .rel-secao-rotulo { font-size: 12.5px; color: var(--v-suave); }
.visual-novo .rel-tabela th { font-size: 12px; color: var(--v-suave); font-weight: 700; }
.visual-novo .apagar-dobra summary, .visual-novo .log-detalhe summary { font-size: 13px; color: var(--v-suave); }
.visual-novo .apagar-dobra summary:hover, .visual-novo .log-detalhe summary:hover { color: var(--v-texto); }
.visual-novo .rel-icone { border-radius: 12px; }
.visual-novo .rel-cartao-cabeca { border-bottom-color: var(--v-borda); }

/* Dinheiro não quebra no meio ("R$" numa linha, o número na outra). */
.visual-novo td.n, .visual-novo th.n, .visual-novo .valor, .visual-novo .mono { white-space: nowrap; }

/* A página de erro (403, 404, 500): um cartão no meio da tela. */
body.visual-novo > main.estreito {
  max-width: 520px; margin: 14vh auto 0; padding: 32px 34px 26px;
  background: var(--v-cartao); border: 1px solid var(--v-borda-forte); border-radius: 20px;
  box-shadow: var(--v-sombra-alta);
}
body.visual-novo > main.estreito h1 { font-size: 40px; color: var(--v-laranja); margin-bottom: 8px; }
body.visual-novo > main.estreito p { color: var(--v-suave); }
body.visual-novo > main.estreito a {
  display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 10px;
  background: var(--v-laranja-fundo); border: 1px solid var(--v-laranja-borda); color: #fff; font-weight: 600;
}

/* No celular, as abas rolam de lado entre o logo e quem entrou, sem passar por
   baixo do cartão do usuário (o defeito vinha do visual de antes). */
@media (max-width: 720px) {
  .visual-novo .topo-areas { padding: 0 10px; gap: 6px; }
  .visual-novo .nome-app { display: none; }
  .visual-novo .identidade-topo { flex: 0 0 auto; margin-right: 0; }
  .visual-novo .abas-areas { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .visual-novo .abas-areas::-webkit-scrollbar { display: none; }
  .visual-novo .topo-direita { flex: 0 0 auto; gap: 6px; }
  .visual-novo .aba-area { padding: 6px 11px; font-size: 13px; }
}