/*
 * CONFIGURACAO EDITAVEL — INTERFACE DA PLATAFORMA BONA
 *
 * Altere somente os valores a direita de cada ":". O mockup local le este
 * arquivo automaticamente. Use cores em hexadecimal e medidas em px, rem ou %.
 *
 * Referencia visual aprovada: MODELO_TELA_PALETA_SELECIONADA_C_ROXO.png
 */

:root {
  /* UI-07 28/10: metade da altura total, sem reduzir a fonte14px. */
  --altura-rodape-tabela: 32px;
  --altura-rodape-tabela-estreito: 44.5px;
  --altura-controle-paginacao: 20px;
  --padding-rodape-tabela: 6px;
  --padding-rodape-tabela-estreito: 3px;
  --gap-rodape-tabela-estreito: 1.5px;
  /* UI-06: largura máxima do card de ferramenta; celular usa a largura disponível. */
  --largura-card-ferramenta: 320px;
  /* UI-03/07: medidas entre bordas externas (getBoundingClientRect).
     Intervalo breadcrumb.bottom → ações.top igual a barra.bottom → breadcrumb.top.
     O CSS funcional deriva ambos da calibração existente do breadcrumb.
     Tabela.top = botão.bottom + 23px.
     O conteúdo da tabela cede altura para manter a paginação no viewport.
     Limite usual = viewport - barra - ações - intervalo - folga inferior. */
  --distancia-acoes-tabela: 23px;
  --folga-inferior-tabela: 24px;
  /* UI-05: distância borda a borda entre controles adjacentes de um grupo
     de ações. Vale na horizontal e vertical; não altera ícone/texto ou layout. */
  --espacamento-botoes-acao: 9px;
  /* Avatar do usuário à direita da barra superior e largura de seu menu. */
  --tamanho-avatar-usuario: 44px;
  --recuo-avatar-usuario: 24px;
  --largura-menu-usuario: 208px;
  /* Login: largura máxima do formulário, espaço interno e cor de botões/links. */
  --largura-painel-login: 440px;
  --espaco-painel-login: 36px;
  --cor-login-destaque: #48235e;
  /* Recuos superiores calibrados pelas medições do usuário no IronMan.
     Horizontal = início do texto desde a borda esquerda de cada painel.
     Horizontal do menu expandido: mínimo 44px para acomodar ícone e intervalo. */
  /* Breadcrumb: 15px foi o valor confirmado pelo usuário como correto
     na medição visual no IronMan. Substitui a calibração anterior de 8px;
     a compensação automática da fonte existente permanece inalterada. */
  --espaco-superior-breadcrumb: 15px;
  /* UI-05/UI-07: Acoes da coluna reduzido 25%: alvo 28x24 -> 21x18px;
     Down 12x12 -> 9x9px. Somente controle de coluna, nao acoes de registro.
     Alvo menor que 24px: exige avaliar espacamento para acessibilidade. */
  --largura-botao-opcoes-coluna: 21px;
  --altura-botao-opcoes-coluna: 18px;
  --tamanho-icone-opcoes-coluna: 9px;
  --espaco-horizontal-breadcrumb: 44px;
  /* Menu lateral: 18px foi o valor confirmado pelo usuário como correto
     para a posição superior do ícone. Substitui a calibração anterior de 3px. */
  --espaco-superior-menu-lateral: 18px;
  --espaco-horizontal-menu-lateral: 44px;
  /* Informação da página ao lado do breadcrumb: ícone, área de interação e balão explicativo. */
  --tamanho-icone-info-pagina: 18px;
  /* Login, alteracao e redefinicao: icone TSQ e area clicavel de visibilidade. */
  --tamanho-icone-visibilidade-senha: 24px;
  --tamanho-botao-visibilidade-senha: 44px;
  --tamanho-botao-info-pagina: 28px;
  --largura-tooltip-pagina: 320px;
  --fundo-tooltip-pagina: #48235e;
  --texto-tooltip-pagina: #ffffff;
  /* 1. CORES DA MARCA — paleta C selecionada */
  /* UI-03/UI-05: todas as ações usam o roxo escuro aprovado. */
  --cor-marca-principal: #48235e;
  --cor-marca-escura: #3e2358;
  --cor-marca-media: #65327a;
  --cor-marca-clara: #7d4292;
  --cor-marca-suave: #f0e9f7;
  --cor-marca-selecao: #e6d8f1;
  /* UI-03 31/10: seleção normal igual hover; seleção secundária distingue outro alvo. */
  --cor-menu-hover: var(--cor-marca-suave);
  --cor-menu-selecionado-secundario: var(--cor-marca-selecao);
  --cor-barra-superior: #48235e;
  --cor-azul-institucional: #1f3456;
  --cor-azul-profundo: #073764;
  --cor-azul-link: #275fb6;

  /* 2. SUPERFICIES, TEXTO E BORDAS */
  --cor-fundo-aplicacao: #f7f7fa;
  --cor-superficie: #ffffff;
  --cor-superficie-suave: #faf9fc;
  --cor-borda: #e4e3e9;
  --cor-borda-forte: #cbc7d3;
  --cor-texto-principal: #18223b;
  --cor-texto-secundario: #62677a;
  --cor-texto-invertido: #ffffff;
  --cor-icone: #48235e;

  /* 3. CORES FUNCIONAIS — sempre acompanhadas de texto ou icone */
  --cor-sucesso: #117a4a;
  --cor-sucesso-fundo: #dbf5e7;
  --cor-alerta: #a85f00;
  --cor-alerta-fundo: #fff1cf;
  --cor-erro: #bd2c35;
  --cor-erro-fundo: #fde2e4;
  --cor-informacao: #275fb6;
  --cor-informacao-fundo: #e4edff;

  /* 4. TIPOGRAFIA */
  --fonte-principal: Roboto, Arial, sans-serif;
  --fonte-alternativa: Arial, sans-serif;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi-negrito: 600;
  --peso-negrito: 700;
  --tamanho-texto-xs: 12px;
  --tamanho-texto-sm: 14px;
  --tamanho-texto-base: 16px;
  --tamanho-titulo-secao: 20px;
  --tamanho-titulo-pagina: 30px;
  --altura-linha-xs: 16px;
  --altura-linha-sm: 20px;
  --altura-linha-base: 24px;
  --altura-linha-titulo: 36px;

  /* 5. MEDIDAS E ESPACAMENTOS */
  --largura-menu-lateral: 264px;
  /* Menu: faixa permanente de ícones; largura-menu-lateral é a largura aberta.
     A expansão sobrepõe o conteúdo, sem mudar a faixa reservada. */
  --largura-menu-recolhido: 72px;
  /* Logo: recuo do elemento de imagem na borda esquerda da barra superior.
     O arquivo oficial contém sua própria área transparente de proteção. */
  --recuo-logo-barra: 0px;
  /* UI-03, 22/09/2026: barra e logo com 72px; proporção do ativo preservada.
     Ações da página seguem a simetria dos intervalos do breadcrumb (UI-03). */
  --escala-logo-barra: 72px;
  /* UI-03: configuração comum pública/autenticada pode aplicar 1/DPR somente à barra. */
  --fator-escala-barra: 1;
  --altura-barra-superior: calc(var(--escala-logo-barra) * var(--fator-escala-barra));
  --altura-campo: 44px;
  --altura-botao: 44px;
  --largura-busca-global: 420px;
  --largura-conteudo-maxima: 1440px;
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --espaco-10: 40px;
  --espaco-12: 48px;

  /* 6. FORMAS, BORDAS E SOMBRAS */
  --raio-controle: 8px;
  --raio-cartao: 12px;
  --raio-etiqueta: 999px;
  --borda-padrao: 1px;
  --sombra-superior: 0 1px 0 rgba(24, 34, 59, 0.1), 0 4px 18px rgba(24, 34, 59, 0.08);
  --sombra-cartao: 0 1px 3px rgba(24, 34, 59, 0.07), 0 8px 24px rgba(24, 34, 59, 0.04);
  --anel-foco: 0 0 0 3px rgba(72, 35, 94, 0.28);

  /* 7. ELEMENTOS ESPECIFICOS DA TELA */
  /* UI-07: redução aprovada 14→12px CSS em cabeçalhos e células de TODAS
     as tabelas. Não altera paginação, formulários nem tamanho dos ícones.
     Nao depender da fonte herdada da pagina de origem (inclusive Logs). */
  --fonte-cabecalho-tabela: var(--fonte-principal);
  --tamanho-fonte-cabecalho-tabela: 12px;
  --tamanho-fonte-celula-tabela: 12px;
  --peso-fonte-cabecalho-tabela: var(--peso-negrito);
  --altura-linha-cabecalho-tabela: normal;
  --largura-coluna-acoes: 84px;
  /* Botoes dentro das celulas: altura; botoes somente com icone usam tambem esta largura. */
  --altura-botao-tabela: 24px;
  /* Espaco acima e abaixo do conteudo de cada celula, inclusive cabecalhos. */
  --espaco-vertical-celula-tabela: 12px;
  /* Espaco a esquerda e a direita das celulas. */
  --espaco-horizontal-celula-tabela: 16px;
  --altura-linha-tabela: 58px;
  --altura-cabecalho-tabela: 52px;
  --largura-painel-filtros-minima: 760px;
  --largura-marca: 146px;
  --largura-logo-barra: 220px;
  --altura-logo-barra: var(--altura-barra-superior);
  --tamanho-icone-menu: 20px;
  --tamanho-icone-barra: 22px;
}

/*
 * MAPA DE APLICACAO DAS VARIAVEIS
 *
 * Cores da marca:
 * --cor-marca-principal: botao principal, aba ativa e pagina atual.
 * --cor-marca-escura: estado hover do botao principal.
 * --cor-marca-media: tom de apoio para eventuais fundos e componentes roxos.
 * --cor-marca-clara: tom de apoio para estados roxos menos intensos.
 * --cor-marca-suave: destaque de linha ao passar o mouse na tabela.
 * --cor-marca-selecao: item ativo do menu lateral e avatar do usuario.
 * --cor-barra-superior: cor sólida exclusiva da barra superior, sem degradê.
 * --cor-azul-institucional: icones, acoes por registro e detalhes informativos.
 * --cor-azul-profundo: reserva para alto contraste e aplicacoes especiais.
 * --cor-azul-link: links, quando a tela precisar de links textuais.
 *
 * Superficies, texto e bordas:
 * --cor-fundo-aplicacao: fundo geral atras do conteudo.
 * --cor-superficie: menu lateral, cartoes, tabela, campos e botoes secundarios.
 * --cor-superficie-suave: cabecalho da tabela e estados de hover suaves.
 * --cor-borda: linhas da tabela, divisorias e contorno de cartoes.
 * --cor-borda-forte: contorno de campos, selects e botoes secundarios.
 * --cor-texto-principal: titulos, nomes, cabecalhos da tabela e textos importantes.
 * --cor-texto-secundario: descricoes, breadcrumb, campos e textos de apoio.
 * --cor-texto-invertido: texto e icones dentro da barra superior e botoes principais.
 * --cor-icone: icones neutros do menu lateral.
 *
 * Estados funcionais:
 * --cor-sucesso e --cor-sucesso-fundo: etiqueta de status Ativo.
 * --cor-alerta e --cor-alerta-fundo: etiqueta de status Em negociação.
 * --cor-erro e --cor-erro-fundo: etiqueta de status Inativo.
 * --cor-informacao e --cor-informacao-fundo: etiqueta de status Prospect.
 *
 * Tipografia:
 * --fonte-principal: todos os textos da interface.
 * --fonte-alternativa: alternativa compatível para documentos ou contingência.
 * --peso-regular: textos corridos, dados de tabela e campos.
 * --peso-medio: itens de menu e abas inativas.
 * --peso-semi-negrito: botoes, etiquetas e filtros.
 * --peso-fonte-cabecalho-tabela: cabecalhos e controles de coluna; padrao negrito 700.
 * --peso-negrito: titulo da plataforma, abas ativas e avatar.
 * --tamanho-texto-xs: rotulos de filtros, etiquetas, rodape e nota do mockup.
 * --tamanho-texto-sm: tamanho-base do menu, tabela e maioria dos controles.
 * --tamanho-texto-base: texto explicativo e abas.
 * --tamanho-titulo-secao: identificacao Plataforma Bona na barra superior.
 * --tamanho-titulo-pagina: titulo Clientes, ou o titulo principal de cada pagina.
 * --altura-linha-xs, --altura-linha-sm e --altura-linha-base: leitura dos textos correspondentes.
 * --altura-linha-titulo: altura do titulo principal da pagina.
 *
 * Medidas e espacamentos:
 * --largura-menu-lateral: painel de navegacao a esquerda, fixo abaixo da barra superior durante a rolagem da pagina.
 * --escala-logo-barra: escala vertical usada para apresentar o logo na barra superior.
 * --altura-barra-superior: base do logo vezes fator runtime1/DPR opcional; offsets usam a altura efetiva.
 * --altura-campo: busca global, filtros, selects e campos de data.
 * --altura-botao: botoes Filtrar, Limpar, Exportar e Novo cliente.
 * --largura-busca-global: campo de busca na barra superior.
 * --largura-conteudo-maxima: largura maxima do bloco de conteudo da pagina.
 * --espaco-1 a --espaco-12: afastamentos internos e externos em menu, botoes, tabelas, filtros e cabecalhos.
 *
 * Formas, bordas e sombras:
 * --raio-controle: campos, botoes, itens do menu e busca global.
 * --raio-cartao: barra de filtros e cartao da tabela.
 * --raio-etiqueta: etiquetas de status arredondadas.
 * --borda-padrao: espessura das divisorias e contornos.
 * --sombra-superior: separacao visual da barra superior.
 * --sombra-cartao: profundidade dos filtros e tabela principal.
 * --anel-foco: destaque de acessibilidade ao navegar por teclado em campos e botoes.
 *
 * Elementos especificos:
 * --largura-coluna-acoes: ultima coluna da tabela, com o menu de tres pontos.
 * --altura-linha-tabela: cada linha de registro da tabela principal.
 * --altura-cabecalho-tabela: linha de titulos das colunas ordenaveis.
 * --largura-painel-filtros-minima: largura minima da barra de filtros antes da adaptacao responsiva.
 * --largura-marca: reserva de compatibilidade; usar para marca em menus alternativos.
 * --largura-logo-barra: largura do logo oficial Bona Capital ao lado do botao de recolher.
 * --altura-logo-barra: deriva da escala do logo e iguala a altura visual reservada ao logo com a da barra superior.
 * --tamanho-icone-menu: icones da navegacao lateral.
 * --tamanho-icone-barra: icones da barra superior, como menu, ajuda e notificacoes.
 */