/* ===================================================================
   VCOSTAZAP Hub — overrides próprios sobre o Tabler
   Carregado DEPOIS de tabler.min.css e de vcostable-tabler.css.

   Arquivo separado de propósito: o vcostable-tabler.css é cópia da
   vcostable (a camada de identidade VCOSTA) e fica intocado, para que
   uma ressincronização futura com a origem seja uma sobrescrita limpa.
   O que é nosso mora aqui.

   Nascido na Etapa 4a (conversão de nivel-acesso). Cada regra abaixo
   vem de um achado já documentado no PROMPT_MIGRACAO_TABLER.md da
   vcostable — não são preferências, são correções medidas lá.
=================================================================== */

/* -------------------------------------------------------------------
   DataTables: o "-sm" que o plugin gera sozinho

   A integração oficial dataTables.bootstrap5 aplica form-control-sm e
   form-select-sm de fábrica na busca e no "Mostrar N". Isso bate de
   frente com a convenção "nunca classes -sm" do Tabler (que redefine o
   tamanho de fonte nessas variantes). Como a marcação é GERADA pelo
   plugin, e não escrita por nós, a correção é override escopado ao
   container do plugin — nunca editar o arquivo vendorizado.

   Especificidade calculada antes de escrever, por composição de
   classes: .dataTables_wrapper .form-control-sm = 0-2-0, vence o
   .form-control-sm do Tabler = 0-1-0. Sem usar id.
------------------------------------------------------------------- */
.dataTables_wrapper .form-control-sm,
.dataTables_wrapper .form-select-sm {
  font-size: var(--tblr-body-font-size, 1rem);
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  border-radius: var(--tblr-border-radius, 4px);
}

/* -------------------------------------------------------------------
   DataTables Buttons: o botão que estica

   O Tabler define .btn-group > .btn { flex: 1 1 auto } — pensado para
   grupos que dividem o espaço igualmente. Mas o plugin Buttons sempre
   embrulha o(s) botão(ões) num .btn-group, mesmo quando é um só, e o
   resultado é o botão de exportar ocupando a largura toda do wrapper.

   Combinador de filho, 0-2-0.
------------------------------------------------------------------- */
.dataTables_wrapper .dt-buttons.btn-group > .btn {
  flex: 0 0 auto;
}

/* Respiro para os controles do DataTables, que não trazem padding
   próprio e ficam colados na borda de qualquer container sem padding
   (o .table-responsive é um deles). */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding-top: 0.5rem;
}

/* ===========================================================================
   PLANOS SEMPRE À VISTA na tela de nova proposta (v1.7)
   ===========================================================================

   A coluna da esquerda (CNPJ, endereço, quadro societário, 8 CNAEs,
   responsável, critérios) é bem mais alta que a dos planos. Sem isto, rolar até
   os critérios de baixo tirava os planos da tela — justo quando o preço
   recalcula ao vivo.

   `position: sticky` resolve com UMA barra de rolagem só, a da página: o bloco
   rola normalmente até encostar em `top` e ali fica, enquanto a coluna da
   esquerda continua passando por baixo. É o padrão do resumo de pedido que
   acompanha o checkout.

   Descartado: `overflow-y: auto` na coluna de critérios. Criaria uma segunda
   barra dentro da primeira, e a roda do mouse moveria ora uma ora outra
   conforme a posição do cursor.

   ATENÇÃO PARA QUEM FOR MEXER: sticky morre em silêncio se QUALQUER ancestral
   tiver `overflow` diferente de `visible` — não há erro, o elemento só volta a
   rolar junto. Se um dia isto parar de funcionar, procure um `overflow` novo em
   `.page-body`, `.container-xl` ou `.row`.

   Só a partir de `lg`: abaixo disso as colunas empilham, e um bloco grudado no
   topo do celular comeria a tela em vez de ajudar. É a mesma quebra do
   `col-lg-7` que define as duas colunas.
   ---------------------------------------------------------------------------
   `top` é o respiro até o topo da janela. O cabeçalho da página rola junto
   (não é fixo), então não há altura de header a descontar — só a folga. */

@media (min-width: 992px) {
  .vc-sticky-planos {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;

    /* Se um dia os planos ficarem mais altos que a janela, o bloco ganha a
       própria rolagem em vez de esconder o botão de emitir embaixo. É o único
       caso em que uma segunda barra é melhor que a alternativa — e ela só
       aparece nesse caso. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* ===========================================================================
   A TELA DE ACESSO — identidade da Exata (v1.13)
   ---------------------------------------------------------------------------
   As cores foram LIDAS do site oficial (exataatibaia.com.br), não escolhidas
   aqui: `#DA1E3D` é o vermelho que pinta os botões "Saiba Mais" e os ícones —
   o valor mais frequente no CSS do domínio (41 ocorrências) e o de maior área
   pintada na tela. `#AC293F` é o tom escuro da MESMA família, que o site usa
   como profundidade.

   Por que faixa de cor e não só uma borda superior colorida (como o card verde
   do Inspira): o logo da Exata que temos é a versão BRANCA, com transparência.
   Sobre o card branco ele simplesmente sumiria. A faixa resolve as duas coisas
   de uma vez — dá fundo ao logo e traz o vermelho da marca como bloco.

   Tudo aqui é APARÊNCIA. Nenhuma regra deste bloco altera o formulário, os
   nomes dos campos ou o botão de submit — a autenticação não sabe que esta
   folha existe.
   --------------------------------------------------------------------------- */

:root {
  --vc-marca-primaria: #DA1E3D;
  --vc-marca-escura: #AC293F;
}

/* O topo: a PLATAFORMA. Texto forte acima, logo abaixo — o molde do Inspira.

   Foi ajustado duas vezes, e as duas por observação de tela:

     1. o original empilhava um logo de 72px numa página vazia, e ele dominava;
     2. a primeira correção passou para 34px em linha, com o texto em cinza
        claro — e aí a VCOSTA sumiu, o que a comparação lado a lado com o
        Inspira deixou evidente.

   O que carrega o destaque no Inspira é o TEXTO (escuro, bold, acima), não o
   tamanho do logo. Aqui o texto voltou a ter peso e o logo ficou em 60px: mais
   que o dobro da versão apagada, ainda abaixo dos 72px que incomodavam, e com
   o "V" do brasão numa altura em que se lê como marca e não como ícone. */
.vc-login-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.vc-login-marca img {
  height: 60px;
  width: auto;
  flex: none;
}

.vc-login-marca span {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 1.35rem;
  text-transform: uppercase;
  line-height: 1;

  /* Escuro, não `text-secondary`: é o nome da plataforma que hospeda o
     sistema, e cinza-claro o rebaixava a legenda. */
  color: var(--tblr-body-color, #1d273b);
}

/* A faixa da marca do cliente, no topo do card. */
.vc-login-faixa {
  background: linear-gradient(135deg, var(--vc-marca-primaria) 0%, var(--vc-marca-escura) 100%);
  padding: 1.5rem 1rem;
  text-align: center;

  /* Acompanha o arredondamento do card. Sem isto a faixa "vaza" nos cantos
     superiores e o card fica com quinas quadradas só em cima. */
  border-top-left-radius: var(--tblr-border-radius, 4px);
  border-top-right-radius: var(--tblr-border-radius, 4px);
}

.vc-login-faixa img {
  /* O logo tem 375x133; a largura manda, e o max-width segura em telas
     estreitas para ele nunca encostar nas bordas da faixa. */
  width: 190px;
  max-width: 72%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* O botão de acessar na cor da marca.

   Sobrescreve o `.btn-primary` do Tabler apenas NESTA tela (o seletor exige o
   ancestral `.vc-login`), para não repintar botão nenhum do sistema interno. */
.vc-login .btn-primary {
  --tblr-btn-bg: var(--vc-marca-primaria);
  --tblr-btn-border-color: var(--vc-marca-primaria);
  --tblr-btn-hover-bg: var(--vc-marca-escura);
  --tblr-btn-hover-border-color: var(--vc-marca-escura);
  --tblr-btn-active-bg: var(--vc-marca-escura);
  --tblr-btn-active-border-color: var(--vc-marca-escura);

  /* O build do Tabler vendorizado aqui nem sempre expõe as variáveis de botão;
     a declaração direta garante a cor nos dois casos. */
  background-color: var(--vc-marca-primaria);
  border-color: var(--vc-marca-primaria);
}

.vc-login .btn-primary:hover,
.vc-login .btn-primary:focus,
.vc-login .btn-primary:active {
  background-color: var(--vc-marca-escura);
  border-color: var(--vc-marca-escura);
}

/* O foco nos campos também na cor da marca — senão o azul padrão do Bootstrap
   apareceria no primeiro clique e denunciaria que o tema é de outra casa. */
.vc-login .form-control:focus {
  border-color: var(--vc-marca-primaria);
  box-shadow: 0 0 0 .25rem rgba(218, 30, 61, .15);
}

/* No celular a faixa encolhe: 1.5rem de respiro em cima e embaixo comem tela
   num aparelho de 360px de largura, onde o teclado já ocupa metade. */
@media (max-width: 575.98px) {
  .vc-login-faixa { padding: 1.125rem .75rem; }
  .vc-login-faixa img { width: 160px; }
  .vc-login-marca img { height: 48px; }
  .vc-login-marca span { font-size: 1.15rem; }
}

/* ===================================================================
   Campo recém-preenchido por atalho — o "piscar" do copiou (v1.24)
   ===================================================================
   O botão "Usar como responsável" do quadro societário preenche três campos
   que estão no CARTÃO DE BAIXO. Sem sinal nenhum, o clique parecia não fazer
   nada: o efeito acontecia fora do campo de visão de quem clicou.

   A animação é de FUNDO, não de borda: borda mexe no box e empurra o layout
   por 1 pixel, e um formulário que treme ao ser preenchido lê como defeito.

   Vale para qualquer campo preenchido por atalho, não só para este — por isso
   o nome é genérico. */
@keyframes vcCampoCopiado {
  0%   { background-color: rgba(15, 163, 163, .22); }
  100% { background-color: transparent; }
}

.vc-campo-copiado {
  animation: vcCampoCopiado 1.4s ease-out;
}

/* Quem pede menos movimento recebe o mesmo resultado sem o pisca — o sinal
   permanente continua sendo o botão do sócio, que fica sólido e escrito
   "Responsável". */
@media (prefers-reduced-motion: reduce) {
  .vc-campo-copiado { animation: none; }
}

/* ===================================================================
   Barra de ações da página (v1.24)
   ===================================================================
   A regra vive no `_page_header.php`: uma ação fica no canto, duas ou mais
   viram esta barra.

   SEM margem negativa. A primeira versão puxava a barra 8px para cima para
   "encostar" no cabeçalho, e medido no Chrome ela invadia a caixa do título
   (topo da barra em 60px, base do título em 66px). O padding que o
   `.page-header` já tem embaixo é o respiro certo — apertar mais economiza
   meia linha e cria um encosto entre dois blocos que não se tocam. */

/* ===================================================================
   Cartões de estado como filtro (v1.24)
   ===================================================================
   Os contadores do acompanhamento viraram links que ligam/desligam o estado no
   recorte. O cursor e o realce no hover são o que avisa que são clicáveis —
   um cartão idêntico ao de antes, mas que agora responde ao clique, seria uma
   função escondida. */
.vc-card-filtro {
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;

  /* Todos com a MESMA altura. Os rótulos vêm do banco e têm comprimentos
     diferentes — "Emitida" ocupa uma linha, "Link de aceite gerado" ocupa
     duas —, e a fileira saía com cartões de alturas alternadas, cada número
     numa altura diferente do vizinho. `h-100` só resolve metade: iguala os
     cartões ao mais alto da linha, mas é o RÓTULO que precisa reservar o
     espaço para o número começar sempre no mesmo lugar. */
  height: 100%;
}

/* Duas linhas reservadas para o rótulo, caiba ele em uma ou em duas.
   `min-height` em `em` acompanha a fonte do próprio subheader: se algum dia
   ela mudar, a reserva muda junto — um valor em px viraria mentira no primeiro
   ajuste de tipografia. */
.vc-card-filtro .subheader {
  align-items: flex-start;
  min-height: 2.4em;
  line-height: 1.2;
}

.vc-card-filtro:hover {
  box-shadow: 0 0 0 2px rgba(15, 163, 163, .35);
  transform: translateY(-1px);
}

/* =========================================================================
   O AVISO DE "AGUARDE" (v1.25) — ver assets/js/vc-aguarde.js

   Cobre a tela inteira enquanto o servidor gera um documento. O fundo opaco
   não é estética: é o que impede o segundo clique no botão de gerar, que
   produzia o PDF duas vezes. O z-index fica acima do modal do Bootstrap
   (1055) porque a geração pode partir de dentro de um.
   ========================================================================= */
.vc-aguarde {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 36, 51, 0.72);
  backdrop-filter: blur(2px);
}

.vc-aguarde-caixa {
  background: var(--tblr-bg-surface, #fff);
  color: var(--tblr-body-color, #182433);
  border-radius: var(--tblr-border-radius, 4px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 22rem;
}

.vc-aguarde-titulo {
  font-weight: 600;
}

.vc-aguarde-nota {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary, #667382);
}

/* =============================================================================
   AS RESPOSTAS DO QUESTIONÁRIO EM DUAS COLUNAS (v1.29, item 6)

   `columns` do CSS, e não grid: as respostas têm alturas diferentes (algumas
   trazem nome, celular e e-mail dos campos filhos), e um grid de duas colunas
   deixaria buracos sempre que uma resposta longa encostasse numa curta. Com
   colunas, o texto flui e preenche.

   `break-inside: avoid` é o que impede uma resposta de ser cortada ao meio na
   virada da coluna — sem ele, a pergunta fica no pé de uma coluna e o valor no
   topo da outra, que é pior do que uma coluna só.

   Uma coluna abaixo de 768px: em telefone, duas colunas de texto viram duas
   colunas ilegíveis.
   ========================================================================== */
.vc-respostas-2col {
  columns: 2;
  column-gap: 2rem;
}

.vc-resposta-linha {
  break-inside: avoid;
  page-break-inside: avoid;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}

.vc-resposta-linha:last-child {
  border-bottom: 0;
}

@media (max-width: 767.98px) {
  .vc-respostas-2col {
    columns: 1;
  }
}

/* O painel colapsável do questionário: o <summary> nativo desenha um triângulo
   que brigaria com o ícone do cartão. */
#painelQuestionario > summary::-webkit-details-marker,
#painelQuestionario > summary::marker {
  display: none;
  content: '';
}

#painelQuestionario > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* O <details> FECHADO precisa esconder o corpo — e o navegador sozinho não
   basta aqui.

   O user-agent esconde os filhos do `<details>` fechado, mas essa regra perde
   para qualquer `display` explícito, e o `.card-body` do Tabler tem um. O
   resultado era um painel "colapsado" com as 32 respostas à vista, exatamente o
   que ele veio evitar — e o teste pegou. */
#painelQuestionario:not([open]) > .card-body {
  display: none;
}

/* =============================================================================
   A COLUNA RECOLHIDA — 64px de ícones, expande no hover (v1.30)

   O mini-sidebar voltou, e o registro da v1.24 continua valendo para o que ela
   removeu: aquele tinha estado aplicado antes do paint, regras espalhadas e
   vazava para o mobile (o menu sumia e sobrava uma coluna de 64px numa tela de
   400px). Este é outro:

     - TUDO vive dentro de `@media (min-width: 992px)`. Abaixo disso não existe
       uma regra sequer, e o menu continua sendo o off-canvas nativo do Tabler;
     - a página inteira ganha `.vc-side-mini` — uma classe só, num lugar só;
     - expandir no hover NÃO empurra o conteúdo: a coluna sobe por cima
       (`z-index`), e o `margin-left` do wrapper fica nos 64px. Empurrar faria a
       página inteira dançar a cada passagem do mouse.

   O SLIDE: `width` e `margin-left` são animados com a mesma curva e a mesma
   duração (.2s), para a coluna e o conteúdo se moverem juntos. Os rótulos
   entram com `opacity` — animar `display` não é possível, e sem a opacidade o
   texto apareceria de supetão no meio do movimento da largura.
   ========================================================================== */
@media (min-width: 992px) {
  .navbar-vertical.vc-side {
    transition: width .2s ease;
  }

  /* Recolhida: só a faixa dos ícones. */
  .vc-side-mini .navbar-vertical.vc-side {
    width: 64px;
  }

  .vc-side-mini .navbar-vertical.vc-side ~ .page-wrapper {
    margin-left: 64px;
  }

  /* Expandida no hover, POR CIMA do conteúdo. */
  .vc-side-mini .navbar-vertical.vc-side:hover {
    width: 15rem;
    z-index: 1040;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .35);
  }

  /* O conteúdo NÃO se mexe quando a coluna expande — só quando o modo muda. */
  .vc-side-mini .navbar-vertical.vc-side:hover ~ .page-wrapper {
    margin-left: 64px;
  }

  /* Os rótulos: somem quando recolhida, voltam com fade ao expandir. */
  .vc-side-mini .navbar-vertical.vc-side .nav-link-title,
  .vc-side-mini .navbar-vertical.vc-side .vc-side-grupo-nome,
  .vc-side-mini .navbar-vertical.vc-side .vc-side-grupo-seta,
  .vc-side-mini .navbar-vertical.vc-side .vc-side-cliente,
  .vc-side-mini .navbar-vertical.vc-side .vc-side-user-nome {
    opacity: 0;
    transition: opacity .12s ease;
  }

  .vc-side-mini .navbar-vertical.vc-side:hover .nav-link-title,
  .vc-side-mini .navbar-vertical.vc-side:hover .vc-side-grupo-nome,
  .vc-side-mini .navbar-vertical.vc-side:hover .vc-side-grupo-seta,
  .vc-side-mini .navbar-vertical.vc-side:hover .vc-side-cliente,
  .vc-side-mini .navbar-vertical.vc-side:hover .vc-side-user-nome {
    opacity: 1;
    /* O texto só aparece depois que a largura já abriu — senão ele nasce
       espremido e "escorrega" para o lugar. */
    transition: opacity .16s ease .1s;
  }

  /* Recolhida, nada de texto ocupa espaço nem captura clique. */
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .nav-link-title,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-grupo-nome,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-grupo-seta,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-cliente,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-user-nome {
    display: none;
  }

  /* Ícones centrados na faixa estreita. */
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .nav-link,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-grupo-toggle,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-alca {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .nav-link-icon,
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-grupo-icone {
    margin-right: 0;
  }

  /* Grupo recolhido não abre lista dentro de 64px — os itens dele só existem
     quando a coluna está expandida. Sem isto, um grupo aberto empurraria
     ícones sem rótulo, e ninguém saberia de que grupo são. */
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-grupo-itens {
    display: none;
  }

  /* O BOTÃO «: no canto do cabeçalho, discreto, e gira ao recolher. */
  .vc-side-recolher {
    position: absolute;
    top: .75rem;
    right: .5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .65);
    transition: background .15s ease, color .15s ease, transform .2s ease;
  }

  .vc-side-recolher:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
  }

  .vc-side-mini .vc-side-recolher {
    transform: rotate(180deg);
  }

  /* Recolhida e sem o mouse em cima, o botão some: ele ocuparia metade da
     faixa de 64px e disputaria espaço com o brasão. */
  .vc-side-mini .navbar-vertical.vc-side:not(:hover) .vc-side-recolher {
    opacity: 0;
    pointer-events: none;
  }
}

/* Abaixo de 992px o botão não existe — o menu é o nativo do Tabler. */
@media (max-width: 991.98px) {
  .vc-side-recolher {
    display: none !important;
  }
}

/* =============================================================================
   BADGE DE FUNDO SÓLIDO PRECISA DE TEXTO BRANCO (v1.30)

   O `.badge` do Tabler não define cor de texto — ele herda. As variantes claras
   (`bg-*-lt`) trazem a sua, e por isso sempre estiveram legíveis; as SÓLIDAS
   ficavam com o cinza herdado do corpo da página.

   Medido no "SELECIONADO" do plano: fundo `#0F2A43` (o navy da casa) com texto
   `#6B7280`. Contraste de 1.6:1 — abaixo de qualquer limite de leitura, e o
   rótulo mais importante do documento era justamente esse.

   A regra cobre os sólidos ESCUROS da paleta, e não um `.badge` genérico: as
   variantes claras (`-lt`, `yellow`, `light`) precisam continuar com texto
   escuro, e pintá-las de branco só trocaria de lado o mesmo problema.
   ========================================================================== */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-dark,
.badge.bg-navy,
.badge.bg-blue,
.badge.bg-azure,
.badge.bg-indigo,
.badge.bg-purple,
.badge.bg-pink,
.badge.bg-red,
.badge.bg-orange,
.badge.bg-green,
.badge.bg-teal,
.badge.bg-cyan {
  color: #fff;
}

/* ===================================================================
   Wordmark do produto — o lugar que na Exata tem arquivo de logo
   ===================================================================
   O hub ainda não tem marca desenhada. Em vez de herdar o logo da Exata
   (que veio junto na cópia e diria a quem entra que está no sistema
   errado), o nome é texto. Duas regras, e some a dívida de asset.

   As medidas espelham as do `img` que ocupava cada lugar, para a caixa
   não mudar de altura quando um logo de verdade chegar. */

.vc-login-faixa .vc-marca-nome {
  display: block;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
}

/* O `ZAP` em peso maior separa as duas metades do nome sem precisar de
   uma segunda cor — sobre o gradiente vermelho, cor extra vira ruído. */
.vc-login-faixa .vc-marca-nome b { font-weight: 700; }

.vc-side-cliente-texto {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}