/* =====================================================================
   Padrão visual do ERP para as telas FORA do index.html
   (Análise de Resultado, Painel de Faturamento, Perda de faturamento).

   O index.html é a referência: fonte Varta, fundo cinza-claro, vermelho
   #FF0000, cartões com canto 14px e sombra leve, botões com canto 9px,
   cabeçalho de tabela preto. Este arquivo entra DEPOIS do <style> de cada
   tela (é carregado pelo topo), então prevalece sobre ele sem precisar
   reescrever as telas.

   As variáveis das telas antigas (--red, --preto, --cinza, --borda, --fundo)
   são reapontadas para as cores do ERP — assim até o que cada tela desenha
   com var(...) passa a seguir o padrão.
   ===================================================================== */
:root{
  --red:#FF0000; --red-dark:#580000; --preto:#0F0F0F; --cinza:#8a8a8a; --borda:#e7e7ea; --fundo:#f4f4f6;
  --black:#0F0F0F; --gray-900:#222; --gray-700:#4a4a4a; --gray-500:#8a8a8a; --gray-200:#e7e7ea;
  --gray-100:#f4f4f6; --white:#fff; --red-bg:#fdecee;
}
html body{font-family:'Varta','Montserrat',system-ui,Arial,sans-serif;background:#f4f4f6;color:#222;
          -webkit-font-smoothing:antialiased;}
body input,body select,body textarea,body button{font-family:inherit;}

/* lugar reservado da barra enquanto ela carrega (páginas estáticas) */
#ltopo{height:67px;background:#fff;border-bottom:1px solid #e7e7ea;}

/* conteúdo: mesma largura e respiro do index */
body > main{max-width:1400px;margin:0 auto;padding:24px 24px 60px;}
.ltopo-titulo + .ltopo-sub + main,
.ltopo-titulo + main,
.ltopo-sub + main{padding-top:20px;}

/* títulos */
body > main h1{font-size:22px;font-weight:800;color:#0F0F0F;letter-spacing:0;}
.page-sub{color:#8a8a8a;font-size:13px;font-weight:500;}

/* cartões e indicadores */
body .card{background:#fff;border:1px solid #e7e7ea;border-radius:14px;
           box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.08);}
body .card h2,body .card h3{font-weight:800;color:#0F0F0F;}
body .kpi{border-radius:14px;border:1px solid #e7e7ea;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.08);}
body .kpi.accent{border-top:4px solid #FF0000;}

/* botões */
body .btn{border-radius:9px;font-weight:700;font-size:13px;}
body .btn.peq,body .btn-sm{border-radius:7px;font-size:12px;}

/* campos */
body input[type=text],body input[type=search],body input[type=number],body input[type=date],
body input[type=month],body input[type=email],body input[type=password],body select,body textarea{
  border-radius:9px;border-color:#e7e7ea;font-weight:600;}
body input:focus,body select:focus,body textarea:focus{outline:2px solid #FF0000;outline-offset:-1px;border-color:#e7e7ea;}

/* tabelas: cabeçalho preto como no index */
body table thead th{background:#0F0F0F;color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;
                    letter-spacing:.6px;border-bottom:0;}
body table thead th a{color:#fff;}
body table tbody tr:hover > td{background:#f4f4f6;}

/* chips selecionados no vermelho do ERP */
body .chip.ativo{background:#fde3e7;border-color:#fde3e7;color:#B4102A;}