/* Maxve Empresas: a paleta petróleo no lugar do azul-violeta. Vale só nas páginas com data-conta="empresa" no <html>
   (o site de empresas e as páginas de e-mail e senha abertas com ?conta=empresa). As cores de estado (receita, atenção,
   perigo) não mudam; só a despesa fica um tom mais escura no tema claro, para o contraste AA.
   Os seletores usam :root[data-conta] para vencer os tokens de ../styles.css. */

/* Tokens comuns às duas cores. */
:root[data-conta="empresa"] {
  --accent-2: #0F766E;
  --accent-tinta: #FFFFFF;
  --grad-marca: linear-gradient(135deg, #0F766E 0%, #0E7490 52%, #164E63 100%);
  --grad-ok: linear-gradient(90deg, #14B8A6 0%, #0E7490 100%);
  --kpi-tom-empresa: #0E7490;
}

/* Tema claro (padrão): petróleo mais fundo para o contraste AA sobre o fundo claro. */
:root[data-conta="empresa"]:not([data-tema="escuro"]) {
  color-scheme: light;

  --bg: #F2F7F7;
  --bg-lateral: rgba(255, 255, 255, 0.55);
  --surface: rgba(255, 255, 255, 0.8);
  --surface-2: rgba(16, 62, 72, 0.045);
  --surface-3: rgba(16, 62, 72, 0.085);
  --border: rgba(16, 62, 72, 0.09);
  --border-forte: rgba(16, 62, 72, 0.17);
  --text: #0E1F24;
  --text-2: #2E4A52;
  --muted: #51686F;

  --accent: #0E7490;
  --accent-texto: #0E7490;
  --accent-suave: rgba(14, 116, 144, 0.1);
  --accent-brilho: rgba(15, 118, 110, 0.34);

  --grad-texto: linear-gradient(110deg, #0F766E 0%, #0E7490 50%, #164E63 100%);
  --grad-texto-loop: linear-gradient(110deg, #0F766E 0%, #0E7490 33%, #164E63 66%, #0F766E 100%);

  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 62, 72, 0.05), 0 18px 40px -24px rgba(15, 118, 110, 0.32);
  --sombra-hover: inset 0 1px 0 #ffffff, 0 2px 4px rgba(16, 62, 72, 0.05), 0 28px 54px -24px rgba(15, 118, 110, 0.45);
  --eixo: rgba(16, 62, 72, 0.18);

  /* Despesa um tom mais fundo que o do app de pessoas (#c2410c): sobre o cinza dos blocos (--surface-3) ele dava 4,38:1,
     abaixo do AA. Este dá 4,84:1 no pior fundo e 5,6:1 no fundo da página. */
  --despesa: #b93a0a;

  --aurora-1: rgba(45, 212, 191, 0.34);
  --aurora-2: rgba(14, 116, 144, 0.26);
  --aurora-3: rgba(103, 232, 249, 0.2);
  --aurora-4: rgba(15, 118, 110, 0.12);
  --holofote: rgba(20, 184, 166, 0.12);
  --borda-grad: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(20, 184, 166, 0.16) 42%, rgba(14, 116, 144, 0.3) 100%);

  --fundo-vidro: rgba(255, 255, 255, 0.78);
  --surface-flutuante: rgba(255, 255, 255, 0.98);
  --trilho: rgba(16, 62, 72, 0.09);
  --campo: rgba(255, 255, 255, 0.78);
  --campo-opaco: #FFFFFF;
  --tom-ajuste: #000000;
  --placeholder: #7C8E94;
}

/* Tema escuro: o destaque ciano sobre o fundo petróleo-escuro. O degradê dos botões continua petróleo, para o texto
   branco passar de 4,5:1. */
:root[data-conta="empresa"][data-tema="escuro"] {
  color-scheme: dark;

  --bg: #061418;
  --bg-lateral: rgba(6, 20, 24, 0.6);
  --surface: rgba(12, 40, 47, 0.66);
  --surface-2: rgba(255, 255, 255, 0.055);
  --surface-3: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.085);
  --border-forte: rgba(255, 255, 255, 0.16);
  --text: #E6F5F6;
  --text-2: #C0D8DC;
  --muted: #8EA9AF;

  --accent: #67E8F9;
  --accent-texto: #67E8F9;
  --accent-suave: rgba(103, 232, 249, 0.14);
  --accent-brilho: rgba(20, 184, 166, 0.45);

  --grad-texto: linear-gradient(110deg, #5EEAD4 0%, #67E8F9 48%, #A5F3FC 100%);
  --grad-texto-loop: linear-gradient(110deg, #5EEAD4 0%, #67E8F9 33%, #A5F3FC 66%, #5EEAD4 100%);

  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 48px -26px rgba(0, 0, 0, 0.75);
  --sombra-hover: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 60px -26px rgba(20, 184, 166, 0.45);
  --eixo: rgba(255, 255, 255, 0.14);

  --aurora-1: rgba(15, 118, 110, 0.4);
  --aurora-2: rgba(14, 116, 144, 0.34);
  --aurora-3: rgba(103, 232, 249, 0.12);
  --aurora-4: rgba(20, 184, 166, 0.12);
  --holofote: rgba(45, 212, 191, 0.14);
  --borda-grad: linear-gradient(150deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(45, 212, 191, 0.34) 100%);

  --fundo-vidro: rgba(6, 20, 24, 0.74);
  --surface-flutuante: rgba(10, 33, 39, 0.97);
  --trilho: rgba(255, 255, 255, 0.09);
  --campo: rgba(255, 255, 255, 0.05);
  --campo-opaco: #0A2127;
  --tom-ajuste: #ffffff;
  --placeholder: #5F7C83;
}

/* Marca: a sombra do logotipo segue o petróleo. */
:root[data-conta="empresa"] .logo-icone {
  filter: drop-shadow(0 6px 14px rgba(20, 184, 166, 0.4));
}

/* O cartão de resultado sai do índigo do Maxve; o estado negativo continua vermelho (não é cor da marca). */
:root[data-conta="empresa"] #kpi-resultado:not([data-estado="negativo"]) {
  --kpi-tom: var(--kpi-tom-empresa);
}

/* Cartão do saldo: as manchas de luz ficam em tons de petróleo e turquesa, com pouca força para o branco continuar
   legível sobre elas. */
:root[data-conta="empresa"] .kpi-hero {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 36px 64px -30px var(--accent-brilho), 0 14px 26px -18px rgba(4, 47, 46, 0.55);
}

:root[data-conta="empresa"] .kpi-hero::before {
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(46% 72% at 0% 112%, rgba(45, 212, 191, 0.14), transparent 66%),
    radial-gradient(38% 56% at 64% 124%, rgba(103, 232, 249, 0.1), transparent 70%);
}

.hero-previsao {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
}

/* O Max de gravata: o halo e a sombra dele também são petróleo. */
:root[data-conta="empresa"] .assistente-mascote,
:root[data-conta="empresa"] .bv-mascote {
  filter: drop-shadow(0 14px 22px rgba(15, 118, 110, 0.4));
}

:root[data-conta="empresa"] .assistente-mascote::before {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.34), rgba(103, 232, 249, 0.12) 50%, transparent 70%);
}

:root[data-conta="empresa"] .bv-mascote {
  filter: drop-shadow(0 18px 30px rgba(15, 118, 110, 0.4));
}

:root[data-conta="empresa"] .fab::before {
  border-color: rgba(45, 212, 191, 0.75);
}

:root[data-conta="empresa"] .dialogo::backdrop {
  background: radial-gradient(70% 60% at 50% 18%, rgba(15, 118, 110, 0.34), rgba(3, 12, 14, 0.74));
}

/* Vitrine do login: as manchas do cartão de saldo também em petróleo. */
:root[data-conta="empresa"] .vitrine-cartao::before {
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(46% 72% at 0% 112%, rgba(45, 212, 191, 0.3), transparent 66%),
    radial-gradient(38% 56% at 64% 124%, rgba(103, 232, 249, 0.22), transparent 70%);
}

/* A barra de navegação do celular tem cinco seções, como no site pessoal. */
.nav-inferior {
  grid-template-columns: repeat(5, 1fr);
}

/* Telas que não têm o botão de novo lançamento. */
body[data-vista-atual="empresa"] [data-novo],
body[data-vista-atual="calcular"] [data-novo] {
  display: none !important;
}

/* ---- Painel: caixa, fluxo de caixa e faturamento ---- */

/* As colunas podem encolher até a largura da tela: a tabela do fluxo tem a própria rolagem (sem ela, a página inteira
   ganharia rolagem lateral no celular). */
.painel-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.painel-colunas > *,
.contas-colunas > * {
  min-width: 0;
}

@media (min-width: 860px) {
  .painel-colunas {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: start;
  }
}

.fluxo-tabela-caixa {
  margin: 4px -4px 0;
  padding: 0 4px;
  overflow-x: auto;
}

.fluxo-tabela {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
}

.fluxo-tabela th,
.fluxo-tabela td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}

.fluxo-tabela th:first-child {
  text-align: left;
}

.fluxo-tabela thead th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.fluxo-tabela tbody th {
  color: var(--text-2);
  font-weight: 600;
  text-align: left;
}

.fluxo-tabela td {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fluxo-entrada {
  color: var(--receita);
}

.fluxo-saida {
  color: var(--despesa);
}

.fluxo-saldo {
  color: var(--text);
}

.fluxo-negativo {
  color: var(--perigo);
}

.fluxo-negativo .icone {
  margin-right: 4px;
  font-size: 0.7rem;
}

.fluxo-este-mes {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.faturamento-periodo {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
}

.limite-mei {
  margin-top: 18px;
}

.mei-nota {
  margin: 6px 0 0;
  font-size: 0.8rem;
}

.valor-negativo {
  color: var(--perigo);
}

/* ---- Pagar e receber: as contas do mês dos dois lados ---- */

.contas-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contas-numeros {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .contas-numeros {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 860px) {
  .contas-colunas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.contas-totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.contas-totais > div {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.contas-totais dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.contas-totais dd {
  margin: 4px 0 0;
  font-family: var(--fonte-display);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.contas-medidor {
  margin: 0 0 12px;
}

/* ---- Lançamentos: os filtros do extrato (mês, categoria e tipo) ---- */

.filtros-empresa #filtro-tipo {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .filtros-empresa {
    grid-template-columns: minmax(0, 1fr) 160px 180px 160px auto;
  }

  .filtros-empresa #filtro-tipo {
    grid-column: auto;
  }
}

/* ---- Empresa (ajustes): formulários e dados da conta ---- */

.form-empresa {
  display: grid;
  gap: 2px;
}

.form-empresa .btn-primary {
  justify-self: start;
  min-width: 180px;
}

.ajuste-texto {
  margin: -6px 0 16px;
  font-size: 0.88rem;
}

.ajuste-texto a {
  font-weight: 700;
}

.conta-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

:root[data-conta="empresa"] .campos-duplos {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 519px) {
  :root[data-conta="empresa"] .campos-duplos {
    grid-template-columns: 1fr;
  }
}

/* Os textos de apoio dos formulários da empresa (abertura e CNPJ opcionais). */
.rotulo-opcional {
  font-weight: 500;
}

/* ---- Primeiro acesso: a janela do Max de gravata ---- */

.dialogo-boas-vindas .bv-topo {
  margin-bottom: 4px;
}

.dialogo-boas-vindas .bv-nota {
  margin: 0 0 14px;
}