`
oferece: os campos saem em gray-400 (invisiveis no escuro) e o realce
em gray-100.
--------------------------------------------------------------------- */
.dark .flatpickr-time input,
.dark .flatpickr-time .flatpickr-am-pm,
.dark .flatpickr-time .flatpickr-time-separator { color: var(--phoenix-body-color); }
.dark .flatpickr-time input:hover,
.dark .flatpickr-time input:focus,
.dark .flatpickr-time .flatpickr-am-pm:hover,
.dark .flatpickr-time .flatpickr-am-pm:focus {
background-color: var(--phoenix-secondary-bg) !important;
}
.dark .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--phoenix-body-color); }
.dark .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--phoenix-body-color); }
/* ---------------------------------------------------------------------
19.6 Tamanho: um calendario proporcional ao campo que ele preenche
---------------------------------------------------------------------
O tema desenha o calendario para uma tela de agenda, nao para um
popover de filtro: 322px de largura, cabecalho em 1,5625rem (25px —
mais que o dobro do texto do formulario ao lado) e celula de dia com
passo de 40px (32px + 4px de margem de cada lado). Ao lado de campos
de 31px de altura ele chega como um bloco fora de escala.
A conta abaixo e' fechada, nao arredondada no olho — se algum numero
mudar, os outros acompanham:
celula 30px + 3px de margem dos dois lados = passo de 36px
grade 7 colunas x 36px = 252px
miolo 252px + 12px de respiro lateral x2 = 276px
total 276px + 1px de borda x2 = 278px
O cabecalho cai de 25px para 16px. Isso encolhe junto o `select` de
mes — que e' `appearance:menulist` e tem a largura do nome mais
comprido ("Setembro"): de ~134px para ~90px. Com 8px de respiro lateral
sobram 260px, dos quais 52px sao as duas setas mais o vao; restam
~208px para mes+ano contra ~155px de conteudo. A folga que impede a
colisao da secao 19.1 continua de pe, agora com margem maior.
--------------------------------------------------------------------- */
.flatpickr-calendar {
width: 278px !important;
}
/* Cabecalho mais baixo e na escala do formulario. O `padding: 0 2rem` do
tema tambem sai: com o flex da 19.1 ele so' espremia a coluna do meio. */
.flatpickr-calendar .flatpickr-months {
height: 36px;
padding: 0 .5rem;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
width: 24px;
height: 24px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
width: 13px;
height: 13px;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month {
font-size: 1rem;
}
/* O peso 700 do tema, somado ao corpo menor, deixava o mes pesado demais
perto do ano. Os dois passam a ler como um par. */
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .cur-year {
font-weight: 600;
}
/* Grade: respiro do miolo e largura da area de dias (ver a conta acima). */
.flatpickr-calendar .flatpickr-innerContainer {
padding: .75rem .75rem .625rem;
}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-rContainer {
width: 252px;
min-width: 252px;
max-width: 252px;
}
/* Faixa dos dias da semana: rotulo curto nao precisa de 28px de altura. */
.flatpickr-calendar .flatpickr-weekdays {
height: 22px;
}
.flatpickr-calendar span.flatpickr-weekday {
font-size: .68rem;
letter-spacing: .02em;
}
/* Celula do dia. `flex-basis` fixo em vez dos 14,2857% do vendor: com a
largura da grade fechada em 252px, a porcentagem so' reintroduz
arredondamento e faz a ultima coluna sair do lugar. */
.flatpickr-calendar .flatpickr-day {
margin: 3px !important;
height: 30px !important;
width: 30px !important;
max-width: 30px !important;
-webkit-flex-basis: 30px;
-ms-flex-preferred-size: 30px;
flex-basis: 30px;
font-size: .8125rem;
font-weight: 600;
}
/* O intervalo (mode: range) e' pintado com uma sombra lateral que tapa a
margem entre as celulas — o tema usa 5px porque a margem era 4px. Com
3px de margem a faixa passaria 2px alem da celula em cada ponta. */
.flatpickr-calendar .flatpickr-day.inRange {
-webkit-box-shadow: -4px 0 0 var(--phoenix-flatpickr-calendar-bg),
4px 0 0 var(--phoenix-flatpickr-calendar-bg);
box-shadow: -4px 0 0 var(--phoenix-flatpickr-calendar-bg),
4px 0 0 var(--phoenix-flatpickr-calendar-bg);
}
/* =====================================================================
20. DENSIDADE DAS TABELAS DO PAINEL
=====================================================================
O Phoenix desenha a tabela como se cada linha fosse um cartao:
`padding: 1rem .5rem` com fonte de 1rem (16px) da uma linha de ~56px.
O legado (`versao_antiga`, Bootstrap 4 com `html { font-size: 14px }` e
`.table-sm`) resolvia a mesma linha em ~30px, e e' assim que a operacao
esta acostumada a ler: mais registros por tela, menos rolagem.
Aqui a grade do painel encolhe para perto disso — fonte de 13px e
~.4rem de respiro vertical, a MESMA medida que as Parciais e o dashboard
comercial (secoes das tabelas largas) ja usavam por conta propria. Elas
eram a excecao; agora sao o padrao.
O cabecalho encolhe MENOS de proposito: ele ja e' o degrau fraco da
pagina (caixa alta, cinza, 700) e derrubar o tamanho junto com o corpo
o tornaria ilegivel — a coluna deixaria de se anunciar.
Escopo `.content` = so' o painel. Portal de Carreiras e telas de login
(`x-portal-layout` / `x-guest-layout`) nao tem esse wrapper e ficam com
o desenho arejado do tema, que la' e' o certo.
===================================================================== */
.content .table {
font-size: .8125rem;
/* 1.5 do tema abre demais a celula de duas linhas (nome + login,
equipe + subequipe), que e' o formato de metade das listagens. */
line-height: 1.4;
}
/* O corpo da celula. `.table-sm` fica de fora: quem ja pediu a variante
compacta do Bootstrap (.25rem) esta MAIS apertado que este padrao —
entrar aqui seria AUMENTAR o respiro dessas tabelas. */
.content .table:not(.table-sm) > :not(caption) > * > * {
padding: .4rem .5rem;
}
/* Cabecalho: e' ROTULO, nao dado. Ele diz o que a coluna guarda e depois
sai do caminho — em caixa alta, 700 e espacado, um cabecalho no tamanho
do dado disputa a leitura com a propria tabela. Dai ele ficar um degrau
ABAIXO do corpo (11,2px contra 13px) e com menos respiro vertical que a
celula (.3rem contra .4rem): a barra encolhe ~10px e some uma linha de
rolagem por tela, sem tirar nada do que se veio ler.
O espacamento entre letras tambem cai (.045em -> .02em, secao 1): em
11px o valor antigo era desenhado para 13px e abria demais rotulos de
duas palavras ("DATA DA VENDA"), que e' o formato da maioria. */
.content .table thead th {
font-size: .7rem;
padding-top: .3rem;
padding-bottom: .3rem;
}
/* ---------------------------------------------------------------------
20.1 O que mora DENTRO da celula
---------------------------------------------------------------------
Encolher a celula sem encolher o conteudo nao compacta nada: um botao
de 35px ou uma foto de 36px continuam mandando na altura da linha. */
/* Subtitulo da celula (login, subequipe, cidade). `.small` e' relativo:
.875em de 13px daria 11,4px. Fixado em 12px para nao sumir. */
.content .table .small,
.content .table small {
font-size: .75rem;
}
/* Badge de status: `--phoenix-badge-font-size: .75em` tambem e' relativo
e cairia para ~9,7px dentro da grade. */
.content .table .badge {
--phoenix-badge-font-size: .7rem;
}
/* Acoes da linha: o `btn-sm` do tema tem .5rem de respiro vertical e
sozinho segura a linha em ~48px. */
.content .table .btn-sm,
.content .table .btn-group-sm > .btn {
--phoenix-btn-padding-y: .25rem;
--phoenix-btn-padding-x: .5rem;
--phoenix-btn-font-size: .75rem;
}
/* Campos dentro da grade (edicao em linha, selecao em massa). */
.content .table .form-control-sm,
.content .table .form-select-sm {
padding-top: .15rem;
padding-bottom: .15rem;
font-size: .75rem;
}
/* ---------------------------------------------------------------------
20.2 Excecao do celular: a linha vira cartao
---------------------------------------------------------------------
Na secao 1 o cartao do celular tem respiro proprio (`.5rem .85rem`),
maior que o da grade — la' cada celula e' uma LINHA de um cartao, nao
uma casa de uma grade, e apertar isso encosta rotulo e valor. Aquela
regra tem menos peso que a densidade acima, entao volta aqui. */
@media (max-width: 767.98px) {
.content .table.azm-dt-cards > :not(caption) > * > * {
padding: .5rem .85rem;
}
.content .table.azm-dt-cards > tbody > tr > td.azm-dt-acoes {
padding-top: .65rem;
}
}
/* =====================================================================
21. Cabecalho clicavel (classificacao) e coluna de acoes congelada
=====================================================================
Duas melhorias da mesma tabela, e as duas nascem do mesmo problema:
a listagem das Vendas Residenciais tem treze colunas, entao ela ROLA na
horizontal em qualquer tela menor que um monitor largo. Rolando, o
cabecalho fica sem indicacao de que da' para classificar, e a coluna de
acoes — a que a pessoa foi buscar — sai do campo de visao pela direita.
--------------------------------------------------------------------- */
/* ---- 21.1 O cabecalho que classifica ---- */
/* O link ocupa a celula inteira: o alvo do clique passa a ser o cabecalho,
e nao as duas palavras dentro dele. Numa barra que ocupa a largura da
tela, mirar o texto e' o tipo de precisao que ninguem quer ter. */
.azm-dt thead th.azm-th-ordenavel { padding: 0; }
.azm-dt thead th.azm-th-ordenavel .azm-th-link {
display: flex;
align-items: center;
gap: .4rem;
width: 100%;
height: 100%;
/* O MESMO respiro que a secao 20 (densidade) da' ao cabecalho — o
padding saiu do | e veio para ca', entao ele tem de ser repetido
aqui ou a barra fica desalinhada nas colunas clicaveis. */
padding: .3rem .5rem;
color: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
/* A cor do fundo responde ao mouse; a do texto, nao. Cabecalho que
muda de cor ao passar o mouse parece link de navegacao, e este leva
para a MESMA tela — so' que reordenada. */
transition: background-color .12s ease;
}
.azm-dt thead th.azm-th-ordenavel .azm-th-link:hover,
.azm-dt thead th.azm-th-ordenavel .azm-th-link:focus-visible {
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 12%, transparent);
}
.azm-dt thead th.azm-th-ordenavel .azm-th-link:focus-visible {
outline: 2px solid var(--phoenix-primary, #3874ff);
outline-offset: -2px;
}
/* A seta: solida na coluna que ordena, invisivel nas outras ate' o mouse
chegar. Acesa em todas, ela vira ruido e some com a unica informacao
que o cabecalho precisa dar — qual coluna manda. */
.azm-dt thead th .azm-th-seta {
width: 11px;
height: 11px;
stroke-width: 2.5;
flex: 0 0 auto;
margin-left: auto;
opacity: 0;
transition: opacity .12s ease;
}
.azm-dt thead th .azm-th-seta.is-ativa { opacity: 1; }
.azm-dt thead th.azm-th-ordenavel .azm-th-link:hover .azm-th-seta,
.azm-dt thead th.azm-th-ordenavel .azm-th-link:focus-visible .azm-th-seta { opacity: .55; }
.azm-dt thead th.azm-th-ordenavel .azm-th-link:hover .azm-th-seta.is-ativa,
.azm-dt thead th.azm-th-ordenavel .azm-th-link:focus-visible .azm-th-seta.is-ativa { opacity: 1; }
/* A coluna que esta ordenando fica com a tinta um degrau mais forte — e'
o que responde "por onde esta ordenado?" sem obrigar a procurar a seta
entre treze cabecalhos. */
.azm-dt thead th[aria-sort] {
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 17%, var(--phoenix-card-bg, #fff));
color: var(--phoenix-emphasis-color, #31374a);
}
/* ---- 21.2 A coluna de acoes congelada a direita ----
Ela e' o destino de quem abriu a lista: filtrar, achar a linha e clicar
no olho. Numa tabela que rola na horizontal, esse ultimo passo obrigava
a rolar ate' o fim — e, pior, a rolar de volta para conferir de que
linha era o botao.
`position: sticky` no `right: 0` resolve dentro do proprio contêiner de
rolagem (`.table-responsive`), sem JS e sem duplicar a coluna.
SO' A PARTIR DO `md`. Abaixo disso a listagem das Vendas Residenciais
mostra apenas a coluna-resumo (nao ha rolagem horizontal para congelar),
e as demais listagens viram CARTAO (`.azm-dt-cards`), onde cada celula e'
uma linha de largura total: congelar ali empurraria o botao para fora do
cartao. A media query e' o que mantem as duas leituras intactas. */
@media (min-width: 768px) {
.azm-dt thead th.azm-dt-acoes,
.azm-dt tbody td.azm-dt-acoes {
position: sticky;
right: 0;
z-index: 2;
/* Fundo OPACO, obrigatoriamente: a celula fica por cima das outras
enquanto elas passam por baixo. Com fundo transparente, o texto
das colunas roladas aparece atras dos botoes. */
background: var(--phoenix-card-bg, #fff);
/* A sombra a esquerda e' o que diz que ha conteudo escondido ali —
sem ela, a coluna parada parece um erro de alinhamento. */
box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .18);
}
/* O cabecalho da coluna congelada fica ACIMA das celulas congeladas (o
thead ja tem tinta propria) e mantem a cor do cabecalho, e nao a do
cartao — senao a ultima casa da barra fica branca no meio da faixa. */
.azm-dt thead th.azm-dt-acoes {
z-index: 3;
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 9%, var(--phoenix-card-bg, #fff));
}
/* O realce de linha do `table-hover` pinta o ` | `, e o fundo opaco
acima o cobriria justamente na coluna em que o mouse esta. Repintar
aqui devolve o destaque da linha inteira. */
.azm-dt.table-hover > tbody > tr:hover > td.azm-dt-acoes {
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 8%, var(--phoenix-card-bg, #fff));
}
}
/* No tema escuro o `--phoenix-card-bg` ja vem escuro, entao o fundo opaco
acompanha sozinho. O que nao acompanha e' a sombra: preta sobre escuro
ela some, e a coluna volta a parecer desalinhada em vez de congelada. */
@media (min-width: 768px) {
.dark .azm-dt thead th.azm-dt-acoes,
.dark .azm-dt tbody td.azm-dt-acoes {
box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .55);
}
}
/* =====================================================================
22. O "i" das datas na listagem (botao + popover)
=====================================================================
Ele mora dentro de uma linha inteiramente clicavel, entao precisa
PARECER um controle proprio — senao quem olha nao imagina que clicar
nele faz outra coisa que nao abrir a venda. Um solto (o que havia
antes) nao dava esse sinal nenhum.
--------------------------------------------------------------------- */
.azm-dt-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
margin-left: .15rem;
vertical-align: middle;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--phoenix-secondary-color, #6e7891);
opacity: .6;
cursor: pointer;
transition: opacity .12s ease, background-color .12s ease;
}
.azm-dt-info:hover,
.azm-dt-info:focus-visible {
opacity: 1;
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 18%, transparent);
}
.azm-dt-info:focus-visible {
outline: 2px solid var(--phoenix-primary, #3874ff);
outline-offset: 1px;
}
.azm-dt-info svg { width: 12px; height: 12px; stroke-width: 2.5; }
/* O conteudo do popover: rotulo a esquerda, data a direita, uma por
linha. Duas colunas em vez de "Cadastro: 01/08/2026" corrido porque as
datas ficam alinhadas entre si, e ler sete datas desalinhadas e' o que
fazia o tooltip do legado ser inutil na pratica. */
.azm-popover-datas { max-width: 280px; }
.azm-popover-datas .popover-body { padding: .5rem .75rem; font-size: .78rem; }
.azm-popover-datas .popover-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.azm-popover-data {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: .15rem 0;
white-space: nowrap;
}
.azm-popover-data + .azm-popover-data {
border-top: 1px dashed var(--phoenix-border-color, #eff2f6);
}
.azm-popover-data span { color: var(--phoenix-secondary-color, #6e7891); }
.azm-popover-data b { font-variant-numeric: tabular-nums; }
/* =====================================================================
23. As somas da venda (combo, adicionais, total)
=====================================================================
Tres linhas com rotulo a esquerda e as duas moedas (dinheiro e pontos)
alinhadas a direita, uma sobre a outra. A grade fixa e' o ponto: com os
numeros alinhados, conferir "planos + adicionais = total" e' uma olhada
na vertical; escritos em texto corrido, vira conta de cabeca.
--------------------------------------------------------------------- */
.azm-totais-venda {
border: 1px solid var(--phoenix-border-color, #e3e6ed);
border-radius: .5rem;
overflow: hidden;
}
.azm-totais-linha {
display: grid;
grid-template-columns: 1fr 9rem 7rem;
gap: .5rem;
align-items: baseline;
padding: .45rem .75rem;
font-size: .8125rem;
}
.azm-totais-linha + .azm-totais-linha {
border-top: 1px solid var(--phoenix-border-color, #eff2f6);
}
.azm-totais-linha span { color: var(--phoenix-secondary-color, #6e7891); }
/* Tabular: sem isto os digitos tem larguras diferentes e as tres linhas
deixam de alinhar justamente na casa que se esta conferindo. */
.azm-totais-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.azm-totais-linha.is-total {
background: color-mix(in srgb, var(--phoenix-secondary-color, #6e7891) 8%, transparent);
font-size: .875rem;
}
.azm-totais-linha.is-total span { color: var(--phoenix-emphasis-color, #31374a); font-weight: 600; }
/* No celular as duas colunas de numero nao cabem ao lado do rotulo. A
linha vira duas: rotulo em cima, os dois numeros embaixo. */
@media (max-width: 575.98px) {
.azm-totais-linha {
grid-template-columns: 1fr 1fr;
}
.azm-totais-linha span { grid-column: 1 / -1; }
}
/* =====================================================================
24. Itens adicionais no cadastro da venda
=====================================================================
Eles moram DENTRO da coluna do plano a que se atrelam, logo abaixo do
select. O recuo e o fio a esquerda sao o que diz isso sem legenda: o
bloco pertence ao campo de cima, e nao e' mais uma pergunta solta do
formulario.
--------------------------------------------------------------------- */
.azm-adicionais {
padding-left: .75rem;
border-left: 2px solid var(--phoenix-border-color, #e3e6ed);
}
.azm-adicionais-titulo {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--phoenix-secondary-color, #6e7891);
margin-bottom: .25rem;
}
/* Os genericos (que valem para a venda toda) nao pertencem a campo nenhum,
entao viram uma caixa em vez de um recuo. */
.azm-adicionais-gerais {
padding: .75rem;
border: 1px solid var(--phoenix-border-color, #e3e6ed);
border-left-width: 1px;
border-radius: .5rem;
}
.azm-adicional + .azm-adicional { margin-top: .2rem; }
/* Nome e preco um sobre o outro: o nome e' o que se procura, o preco e' o
que se confere depois de achar. Lado a lado, os precos de itens de nome
curto e longo ficariam desalinhados e ilegiveis em coluna estreita. */
.azm-adicional-rotulo { display: block; line-height: 1.25; cursor: pointer; }
.azm-adicional-nome { display: block; font-size: .8125rem; }
.azm-adicional-preco {
display: block;
font-size: .7rem;
color: var(--phoenix-secondary-color, #6e7891);
font-variant-numeric: tabular-nums;
}
/* O contador (itens de quantidade > 1) fica ao lado do rotulo, estreito:
sao no maximo dois digitos, e um campo de largura total ali pareceria
pedir outra coisa. */
.azm-adicional:has(.azm-adicional-qtd) {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.azm-adicional-qtd { width: 4.25rem; flex: 0 0 auto; text-align: center; }
/* =====================================================================
25. Ficha do usuario (.azm-ficha-*) — cabecalho de usuarios/show e edit
---------------------------------------------------------------------
O que havia antes: uma faixa de 120px em degrade da cor da marca, com a
foto subindo por cima dela (`margin-top: -3rem`) e os dados soltos numa
linha de icones. Tres problemas, e nenhum e' de gosto:
a) a faixa colorida NAO carregava informacao nenhuma — ocupava o topo
inteiro da tela mais consultada do cadastro para nao dizer nada, e
empurrava o dado (nome, cargo, operacao) para baixo da dobra em
tela de notebook;
b) o `margin-top` negativo obrigava tudo da linha a se alinhar pelo
RODAPE (`align-items: end`) — dai o bloco do nome, a miniatura da
foto corporativa e os botoes ficarem cada um numa altura, com
`pb-1` chumbado em cada um para disfarcar;
c) os dados vinham como icone+texto emendados: sem rotulo, "Canoas"
e "Consultor" liam-se como a mesma coisa, e um e-mail longo
quebrava a linha inteira.
A troca e' por uma FICHA: identidade em cima (foto, nome, situacao),
dados embaixo numa grade rotulada. Sem tinta de fundo — o cartao ja
separa do corpo da pagina, e o realce fica para o que e' excecao
(a etiqueta de inativo).
===================================================================== */
.azm-ficha-topo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem 1.25rem;
}
/* Foto(s) + nome. `min-width: 0` para o nome longo poder encolher em vez
de estourar a linha e empurrar os botoes para fora. */
.azm-ficha-identidade {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
/* As duas fotos LADO A LADO, e nao sobrepostas como na listagem: aqui ha
espaco, e a corporativa e' a foto do cracha — quem abre a ficha abre
justamente para confere-la.
As duas com o MESMO formato (quadrada de cantos arredondados, secao 7).
O formato ja tentou dizer qual era qual — redonda = perfil, retangulo =
corporativa —, mas era uma convencao que so' quem escreveu conhecia, e
custava a silhueta desalinhada da dupla. Qual e' qual esta no `title` de
cada uma, na ordem fixa perfil › corporativa. */
.azm-ficha-fotos { display: flex; align-items: center; gap: .5rem; }
.azm-ficha-fotos .azm-avatar-foto {
border: 2px solid var(--phoenix-card-bg, #fff);
box-shadow: 0 0 0 1px var(--azm-fio-superficie, rgba(20, 24, 36, .10));
/* A 4rem, a proporcao da secao 7 arredondaria demais: aqui o raio e'
medido, para ler como cartao e nao como pastilha. */
border-radius: .625rem;
}
.azm-ficha-nome { line-height: 1.2; }
/* Login e CPF: identificam a pessoa, mas nao sao o titulo. Um degrau
abaixo do nome e tabular no CPF, que se le digito a digito. */
.azm-ficha-chaves {
display: flex;
flex-wrap: wrap;
gap: .15rem .6rem;
margin-top: .2rem;
font-size: .8125rem;
color: var(--phoenix-secondary-color, #6e7891);
}
.azm-ficha-chaves .azm-ficha-cpf { font-variant-numeric: tabular-nums; }
.azm-ficha-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* ---------------------------------------------------------------------
A grade de dados do cabecalho
---------------------------------------------------------------------
`auto-fit` com minimo de 11rem: a mesma marcacao vira quatro colunas no
monitor, duas no tablet e uma no telefone, sem `col-md-*` chumbado e
sem sobrar coluna vazia quando um dado nao existe.
Rotulo em cima do valor (e nao ao lado): os rotulos daqui tem larguras
muito diferentes ("Cargo" x "E-mail corporativo") e, lado a lado, ou os
valores desalinhavam ou se perdia meia coluna com o rotulo mais longo.
--------------------------------------------------------------------- */
.azm-ficha-dados {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: .9rem 1.5rem;
margin: 1.1rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--azm-fio-superficie, rgba(20, 24, 36, .10));
}
.azm-ficha-dados > div { min-width: 0; }
.azm-ficha-dados dt {
font-size: .68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--phoenix-tertiary-color, #8a94ad);
margin-bottom: .1rem;
}
.azm-ficha-dados dd {
margin: 0;
line-height: 1.35;
/* E-mail corporativo nao cabe em 11rem e nao tem espaco onde quebrar:
sem isto ele estoura a celula e desalinha a grade inteira. */
overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
/* No telefone os botoes viram uma faixa propria de largura inteira —
espremidos ao lado do nome, cada um cairia numa linha. */
.azm-ficha-acoes { width: 100%; }
.azm-ficha-acoes > *,
.azm-ficha-acoes .btn { flex: 1 1 auto; }
}
/* =====================================================================
26. ANALISES — o editor de blocos e o modo "organizar" do painel
Duas superficies de arrastar e soltar, e elas nao se parecem por acaso:
- no EDITOR, arrasta-se um CAMPO da fonte para uma zona ("dimensao",
"metrica", "filtros"). E' a tabela dinamica: o que se move e' o
significado do campo, nao um pedaco de tela;
- no PAINEL, arrasta-se o BLOCO para outro lugar e puxa-se a alca para
mudar de tamanho. Aqui o que se move e' o layout.
As duas usam Pointer Events, e nao a API de drag-and-drop do HTML5: aquela
nao funciona em toque sem polyfill, nao deixa desenhar o fantasma que segue
o dedo e da' um "drop" que o iOS ignora. Pointer Events cobre mouse, dedo e
caneta com o mesmo codigo.
===================================================================== */
/* --- A moldura de tres colunas do editor -------------------------------- */
.azm-an-editor {
display: grid;
/* Campos | zonas | previa. A do meio e' a que cresce: e' onde se trabalha. */
grid-template-columns: 260px minmax(0, 1fr) minmax(0, 420px);
gap: 1rem;
align-items: start;
}
@media (max-width: 1399.98px) {
/* A previa desce para baixo das zonas — continua visivel sem rolar duas
colunas ao mesmo tempo. */
.azm-an-editor { grid-template-columns: 240px minmax(0, 1fr); }
.azm-an-previa-col { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
.azm-an-editor { grid-template-columns: minmax(0, 1fr); }
}
/* A coluna de campos acompanha a rolagem: arrastar um campo para uma zona que
saiu da tela seria arrastar as cegas. */
.azm-an-campos-col,
.azm-an-previa-col {
position: sticky;
top: 1rem;
}
@media (max-width: 1399.98px) {
.azm-an-previa-col { position: static; }
}
@media (max-width: 991.98px) {
.azm-an-campos-col { position: static; }
}
/* --- A lista de campos da fonte ---------------------------------------- */
.azm-an-campos {
max-height: 62vh;
overflow-y: auto;
}
.azm-an-campos-grupo {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--phoenix-tertiary-color, #8a94ad);
padding: .6rem .25rem .25rem;
}
.azm-an-campo {
display: flex;
align-items: center;
gap: .4rem;
width: 100%;
padding: .3rem .45rem;
border: 1px solid transparent;
border-radius: .375rem;
background: transparent;
font-size: .82rem;
line-height: 1.25;
text-align: left;
color: inherit;
/* `grab` e nao `pointer`: o cursor e' a unica pista de que isto se arrasta
antes de a pessoa tentar. */
cursor: grab;
touch-action: none;
}
.azm-an-campo:hover {
background: var(--phoenix-secondary-bg, rgba(0, 0, 0, .04));
border-color: var(--phoenix-border-color, #e3e6ed);
}
.azm-an-campo:focus-visible {
outline: 2px solid var(--phoenix-primary, #3874ff);
outline-offset: 1px;
}
.azm-an-campo.is-arrastando { opacity: .4; }
/* O simbolo do papel do campo. A cor e' encoding SECUNDARIO — a letra diz a
mesma coisa, para quem nao distingue as duas. */
.azm-an-papel {
flex: 0 0 auto;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .25rem;
font-size: .62rem;
font-weight: 700;
}
.azm-an-papel-dimensao { background: rgba(42, 120, 214, .16); color: #2a78d6; }
.azm-an-papel-metrica { background: rgba(0, 131, 0, .16); color: #0a7a0a; }
.azm-an-papel-data { background: rgba(237, 161, 0, .18); color: #a06d00; }
.dark .azm-an-papel-dimensao { background: rgba(57, 135, 229, .22); color: #7fb3f2; }
.dark .azm-an-papel-metrica { background: rgba(25, 158, 112, .22); color: #5fd0a6; }
.dark .azm-an-papel-data { background: rgba(201, 133, 0, .22); color: #e8b45c; }
.azm-an-campo-nome {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- As zonas de soltura ------------------------------------------------ */
.azm-an-zona {
border: 1.5px dashed var(--phoenix-border-color, #e3e6ed);
border-radius: .5rem;
padding: .5rem;
min-height: 3.25rem;
transition: border-color .12s ease, background-color .12s ease;
}
/* Aceita o campo que esta sendo arrastado: convite. */
.azm-an-zona.is-alvo {
border-color: var(--phoenix-primary, #3874ff);
background: color-mix(in srgb, var(--phoenix-primary, #3874ff) 8%, transparent);
}
/* NAO aceita: a zona APAGA em vez de ficar vermelha. Vermelho anuncia erro, e
arrastar uma metrica para o eixo nao e' erro — e' uma tentativa. */
.azm-an-zona.is-recusada { opacity: .45; }
.azm-an-zona-vazia {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.25rem;
font-size: .78rem;
color: var(--phoenix-tertiary-color, #8a94ad);
}
.azm-an-zona-rotulo {
display: flex;
align-items: baseline;
gap: .4rem;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--phoenix-tertiary-color, #8a94ad);
margin-bottom: .3rem;
}
.azm-an-zona-ajuda {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* --- A ficha de um campo ja atribuido (o "chip") ------------------------ */
.azm-an-ficha {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
padding: .35rem .4rem;
border: 1px solid var(--phoenix-border-color, #e3e6ed);
border-radius: .375rem;
background: var(--phoenix-body-bg, #fff);
}
.dark .azm-an-ficha { background: var(--phoenix-emphasis-bg, #1e1f24); }
.azm-an-ficha + .azm-an-ficha { margin-top: .35rem; }
.azm-an-ficha-nome {
font-size: .82rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Os controles dentro da ficha (calculo, granularidade, operador, valor) sao
os CAMPOS DE VERDADE do formulario — nao ha espelho escondido para manter em
dia. Por isso ficam pequenos, mas continuam sendo select e input comuns. */
.azm-an-ficha select,
.azm-an-ficha input {
height: auto;
padding: .12rem .4rem;
font-size: .76rem;
width: auto;
min-width: 6rem;
}
.azm-an-ficha .azm-an-ficha-valor { min-width: 8rem; flex: 1 1 8rem; }
/* O SINAL DE DIVISAO da ficha de razao, entre a coluna de cima e a de baixo.
Ele nao e' enfeite: e' o que diz QUAL DAS DUAS e' o numerador. Sem o sinal,
duas caixas iguais lado a lado se leem em qualquer ordem, e trocar as duas
da' um numero plausivel e invertido. `aria-hidden` porque o leitor de tela
ja' ouve o rotulo do select ("dividido por") — o caractere solto seria ruido. */
.azm-an-ficha-divisao {
font-size: .95rem;
font-weight: 700;
line-height: 1;
color: var(--phoenix-secondary-color, #6e7891);
}
.azm-an-ficha-remover {
margin-left: auto;
border: 0;
background: transparent;
color: var(--phoenix-tertiary-color, #8a94ad);
line-height: 1;
padding: .1rem .25rem;
border-radius: .25rem;
}
.azm-an-ficha-remover:hover { color: var(--phoenix-danger, #e5780b); }
/* --- O fantasma que segue o ponteiro ------------------------------------ */
.azm-an-fantasma {
position: fixed;
z-index: 2000;
/* Nao pode capturar o ponteiro: o `elementFromPoint` que descobre a zona
sob o dedo devolveria o proprio fantasma, e nenhuma zona jamais
acenderia. */
pointer-events: none;
padding: .25rem .5rem;
border-radius: .375rem;
font-size: .78rem;
font-weight: 600;
background: var(--phoenix-primary, #3874ff);
color: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
transform: translate(8px, 8px);
}
/* --- Os tipos de bloco, como botoes ------------------------------------- */
.azm-an-tipos {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.azm-an-tipo {
display: flex;
flex-direction: column;
align-items: center;
gap: .2rem;
min-width: 5.25rem;
padding: .5rem .35rem;
border: 1px solid var(--phoenix-border-color, #e3e6ed);
border-radius: .5rem;
background: transparent;
font-size: .7rem;
color: inherit;
}
.azm-an-tipo:hover { border-color: var(--phoenix-primary, #3874ff); }
.azm-an-tipo.is-ativo {
border-color: var(--phoenix-primary, #3874ff);
background: color-mix(in srgb, var(--phoenix-primary, #3874ff) 10%, transparent);
font-weight: 600;
}
/* =====================================================================
26.b O modo "organizar" do painel
===================================================================== */
/* Fora do modo organizar nada muda: o painel e' uma tela de leitura, e um
cartao que se mexe ao passar o mouse e' um convite a arrastar sem querer. */
.azm-an-painel.is-organizando .azm-analise-bloco {
cursor: grab;
user-select: none;
position: relative;
}
/* Os botoes do cabecalho do bloco (exportar, editar) saem de cena enquanto se
organiza: comecar um arrasto em cima de um link abriria a outra tela. */
.azm-an-painel.is-organizando .azm-analise-bloco .card-header .btn {
pointer-events: none;
opacity: .4;
}
.azm-an-painel.is-organizando .azm-analise-bloco::after {
/* A alca de tamanho, no canto — as duas dimensoes na mesma pega, como em
qualquer janela. */
content: '';
position: absolute;
right: 2px;
bottom: 2px;
width: 16px;
height: 16px;
border-right: 2px solid var(--phoenix-tertiary-color, #8a94ad);
border-bottom: 2px solid var(--phoenix-tertiary-color, #8a94ad);
border-bottom-right-radius: .25rem;
cursor: nwse-resize;
opacity: .55;
}
.azm-an-bloco-col.is-movendo { opacity: .35; }
/* O lugar onde o bloco cai, desenhado enquanto se arrasta. */
.azm-an-vaga {
border: 2px dashed var(--phoenix-primary, #3874ff);
border-radius: .5rem;
background: color-mix(in srgb, var(--phoenix-primary, #3874ff) 7%, transparent);
min-height: 6rem;
}
/* A barra do modo organizar gruda no topo: "Salvar layout" nao pode exigir
rolar ate o fim de um painel de doze blocos. */
.azm-an-barra {
position: sticky;
top: 0;
z-index: 3;
}
/* A caixa de marcacao das colunas de uma fonte.
A margem existe porque a coluna e' estreita e o Bootstrap encosta a caixa na
borda da celula: sem ela o quadradinho fica colado na linha vertical da
tabela e parece parte da moldura, nao um controle. */
.azm-an-check {
margin-left: .55rem;
}
/* O ATRIBUTO `hidden` TEM DE VENCER AS UTILITIES DE DISPLAY.
`hidden` vira `display: none` pela folha do NAVEGADOR, que perde para
qualquer regra de autor — e as utilities do Bootstrap (`d-flex`, `d-block`,
`d-grid`) sao `display: ... !important`. Um elemento com as duas coisas fica
VISIVEL, e nada na marcacao denuncia isso: o `hidden` esta la, escrito.
Foi o que aconteceu com a barra do modo organizar — `alert d-flex ... hidden`
aparecia o tempo todo, inclusive com o modo desligado.
A regra e' restrita aos elementos das Analises de proposito: uma versao
global mudaria o comportamento de qualquer lugar do painel que combine as
duas coisas, e essa varredura nao cabe aqui. */
.azm-an-barra[hidden],
[data-azm-zona-bloco][hidden] {
display: none !important;
}
/* =====================================================================
26.c O grid do painel — blocos ocupando mais de uma "linha"
Um CSS GRID de 12 colunas, e nao a `row` do Bootstrap. A row estica
todos os cartoes de uma linha ate o mais alto — e com isso um bloco
nunca ocupa "duas linhas" enquanto dois vizinhos baixos se empilham ao
lado dele. Aqui a ALTURA gravada do bloco vira `grid-row: span N` sobre
linhas finas de 8px, e o `dense` preenche os buracos: dois indicadores
baixos cabem um em cima do outro, ao lado de uma tabela alta.
A CONTA DAS LINHAS: linha de 8px + vao de 16px => cada passo vale 24px,
e N linhas medem 24N - 16. Ela vive em TRES lugares que tem de bater:
aqui (8px/16px), no show.blade.php (span inicial) e em definirAltura()
do azm-analises.js (a alca de tamanho).
As larguras continuam em "colunas de 12", agora via a variavel
`--azm-an-larg` (o col-lg-N saiu de cena: fora de uma .row, a classe
traria width em % que brigaria com a trilha do grid).
===================================================================== */
.azm-an-painel {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 8px;
grid-auto-flow: row dense;
gap: 1rem;
}
.azm-an-bloco-col {
/* No celular todo bloco vale a tela inteira, como o col-12 de antes;
a altura gravada continua valendo — grafico precisa de altura fixa
em qualquer largura. */
grid-column: 1 / -1;
grid-row: span var(--azm-an-linhas, 13);
min-width: 0;
}
@media (max-width: 991.98px) {
/* A ORDEM DO CELULAR e' a VISUAL do desktop (linha*12+coluna, calculada
no show.blade.php com o mesmo primeiro-encaixe do `dense`), e nao a do
DOM: num painel montado para empilhar, a ordem do cadastro poe o bloco
alto entre os dois baixos — e a pilha do celular sairia embaralhada. */
.azm-an-bloco-col {
order: var(--azm-an-ordem, 0);
}
}
@media (min-width: 992px) {
.azm-an-bloco-col {
grid-column: span var(--azm-an-larg, 6);
}
}
/* O cartao preenche a celula do grid (o h-100 ja' vem da classe), e o miolo
vira flex para o DESENHO ocupar a sobra: a altura agora mora na celula, e
nao mais num height fixo do canvas — e' o que deixa o mesmo bloco caber em
qualquer span sem duas verdades sobre o tamanho. Os `!important` vencem o
height/max-height inline do bloco.blade.php, que segue existindo como
fallback e para a previa do editor (que nao tem grid nenhum). */
/* O corte de sobra fica no card-body, e NAO no cartao: overflow hidden no
cartao decapitaria o menu suspenso de exportar, que e' um filho absoluto
do cabecalho. */
.azm-an-bloco-col .azm-analise-bloco > .card-body {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.azm-an-bloco-col .azm-analise-bloco .card-body > [data-azm-chart] {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.azm-an-bloco-col .azm-analise-bloco .card-body .azm-chart-canvas {
flex: 1 1 auto;
min-height: 0;
height: auto !important;
}
.azm-an-bloco-col .azm-analise-bloco .card-body > .table-responsive {
flex: 1 1 auto;
min-height: 0;
max-height: none !important;
}
/* =====================================================================
26.d O (i) dos filtros do bloco — um tooltip, nao um rodape
As frases de filtro fixo abriam o cartao inteiro de aviso; agora vivem
numa dica flutuante ancorada no (i) do cabecalho. CSS puro (hover +
focus-within): sem JS para religar a cada troca de tela do HTMX, e o
foco do teclado abre a mesma dica que o mouse.
O (i) e' MAIS APAGADO que os botoes de acao de proposito (tertiary, e
nao secondary): ele informa, nao age — um cinza igual ao do lapis
convidaria o clique esperando uma acao.
===================================================================== */
.azm-an-info {
position: relative;
display: inline-flex;
}
.azm-an-info-botao {
color: var(--phoenix-tertiary-color, #9fa6bc);
opacity: .7;
}
.azm-an-info-botao:hover,
.azm-an-info-botao:focus {
color: var(--phoenix-secondary-color, #525b75);
opacity: 1;
}
.azm-an-info-dica {
display: none;
position: absolute;
top: calc(100% + .35rem);
right: -.25rem;
/* Acima dos cartoes vizinhos do grid, que sao irmaos no empilhamento. */
z-index: 30;
min-width: 230px;
max-width: 320px;
padding: .5rem .65rem;
font-size: .78rem;
line-height: 1.5;
text-align: left;
white-space: normal;
color: var(--phoenix-body-color, #31374a);
background: var(--phoenix-body-bg, #fff);
border: 1px solid var(--phoenix-border-color, #cbd0dd);
border-radius: .375rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.azm-an-info:hover .azm-an-info-dica,
.azm-an-info:focus-within .azm-an-info-dica {
display: block;
}
/* --- A barra de paginas de um painel ------------------------------------
Itens soltos e menus suspensos, no desenho da navegacao de um relatorio.
So aparece com mais de uma pagina — uma barra de um item so' ocupa espaco
para nao informar nada. */
.azm-an-paginas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem;
border-bottom: 1px solid var(--phoenix-border-color, #e3e6ed);
padding-bottom: .25rem;
}
/* A VAGA DO ICONE, no menu suspenso das paginas e no cadastro delas.
Ela ocupa o lugar mesmo VAZIA, de proposito. Num menu em que so' metade das
paginas tem desenho, sem a vaga os nomes das outras comecariam mais a'
esquerda e a lista viraria um zigue-zague — a mesma razao pela qual um menu
de aplicativo reserva a coluna do check. */
.azm-an-icone-vaga,
.azm-an-icone-previa {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
width: 16px;
height: 16px;
color: var(--phoenix-secondary-color, #6e7891);
}
.dropdown-item.active .azm-an-icone-vaga { color: inherit; }
/* ---- O SELETOR DE ICONE (cadastro de paginas) -----------------------
Nao e' um `select`: opcao de select so' carrega TEXTO, e a lista dizia
"Barras", "Pessoas", "Movimento" — nomes que descrevem o desenho sem
mostra-lo. Aqui o botao mostra o escolhido e a grade mostra todos. */
/* O campo em si nao posiciona nada — a grade e' `fixed`. O `relative` fica
para o dia em que o botao ganhar um adorno proprio. */
.azm-an-icone-campo {
position: relative;
}
/* O botao JA' E' um `.form-select` — borda, altura, fonte, tema e a seta do
fundo vem de la'. Aqui so' entra o que o `form-select` nao preve': ele
espera um texto solto, e este tem um desenho antes do nome. */
.azm-an-icone-botao {
display: inline-flex;
align-items: center;
gap: .4rem;
width: 100%;
text-align: left;
}
/* O nome do icone escolhido. Encolhe antes do desenho e da seta: numa coluna
estreita, quem some primeiro tem de ser o texto, nao o desenho — que e' a
informacao que a pessoa veio conferir. */
.azm-an-icone-rotulo {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* A GRADE FLUTUA EM `fixed`, e o JavaScript poe as coordenadas.
Nao e' preciosismo: a tabela vive num `.table-responsive`, que e' um
`overflow: auto`, e todo `overflow` recorta o que passa das bordas. Em
`absolute` dentro da celula, a grade sairia cortada nas colunas da direita e
nas ultimas linhas — sem erro nenhum, so' com metade dos icones fora de
alcance. */
.azm-an-icone-grade {
position: fixed;
z-index: 1056; /* acima do dropdown do Bootstrap (1000) e do modal (1055) */
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: .15rem;
width: max-content;
max-width: 20rem;
padding: .4rem;
border: 1px solid var(--phoenix-border-color, #e3e6ed);
border-radius: .5rem;
background: var(--phoenix-body-bg, #fff);
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}
.dark .azm-an-icone-grade { background: var(--phoenix-emphasis-bg, #1e1f24); }
.azm-an-icone-grade[hidden] { display: none; }
.azm-an-icone-cel {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: .3rem;
background: transparent;
color: var(--phoenix-body-color, #31374a);
}
.azm-an-icone-cel:hover {
background: var(--phoenix-primary, #3874ff);
color: #fff;
}
.azm-an-pagina {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .4rem .7rem;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
border-radius: .375rem .375rem 0 0;
font-size: .85rem;
color: var(--phoenix-secondary-color, #6e7891);
text-decoration: none;
/* A margem negativa faz a borda do item cair EM CIMA da borda da barra, e
nao um pixel abaixo dela. */
margin-bottom: -.3rem;
}
.azm-an-pagina:hover {
color: var(--phoenix-emphasis-color, #141824);
background: var(--phoenix-secondary-bg, rgba(0, 0, 0, .04));
}
.azm-an-pagina.is-ativa {
color: var(--phoenix-primary, #3874ff);
border-bottom-color: var(--phoenix-primary, #3874ff);
font-weight: 600;
}
|