/*==============================================================================
AgendaZ — Card System
Um unico componente de card de indicador para o sistema inteiro. Antes cada
modulo desenhava o seu: o painel usava quadrados coloridos com borda em
`currentColor`, o extrato e os relatorios usavam `card border border-primary`
centralizado. O mesmo dado aparecia com tres aparencias diferentes.
A regra do componente e a hierarquia:
[icone] TITULO (o que e)
VALOR (o dado — o que a pessoa veio ler)
descricao (o contexto)
Cor aqui e semantica, nunca decoracao: ela aparece no icone, no valor e no
traco lateral para dizer o ESTADO do dado (positivo, negativo, pendente), e
nunca pintando o card inteiro — fundo colorido derruba o contraste do texto e
faz quatro cards disputarem a atencao ao mesmo tempo.
Uso minimo:
Saldo Atual
R$ 1.240,00
Saldo real disponivel
Os proprios `h6/h4/p` ja recebem o papel de titulo, valor e descricao — as
telas antigas nao precisaram trocar a marcacao inteira para entrar no padrao.
Quando quiser ser explicito, use `.az-stat__title`, `.az-stat__value` e
`.az-stat__desc`.
==============================================================================*/
:root {
/* Superficie */
--az-card-bg: #ffffff;
--az-card-border: rgba(15, 23, 42, 0.08);
--az-card-border-hover: rgba(74, 108, 247, 0.35);
--az-card-radius: 16px;
--az-card-padding: 20px;
/* Profundidade: presente o bastante para descolar do fundo, discreta o
bastante para nao virar fumaca sob doze cards lado a lado. */
--az-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.04);
--az-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.09);
/* Texto */
--az-card-title: #475069;
--az-card-value: #101828;
--az-card-muted: #737f99;
/* Semantica */
--az-card-primary: #4a6cf7;
--az-card-success: #0e9f6e;
--az-card-danger: #e02424;
--az-card-warning: #c27803;
--az-card-neutral: #64748b;
}
/* Tema escuro do sistema. O shell marca `data-theme="dark"` no ; a
landing usa `body.dark`. Os dois entram aqui. */
:root[data-theme='dark'],
html.dark-style,
body.dark {
--az-card-bg: #161d2b;
--az-card-border: rgba(255, 255, 255, 0.09);
--az-card-border-hover: rgba(74, 108, 247, 0.5);
--az-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.25);
--az-card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
--az-card-title: #9aa6c0;
--az-card-value: #f1f4fb;
--az-card-muted: #8794ad;
--az-card-success: #34d399;
--az-card-danger: #f87171;
--az-card-warning: #fbbf24;
--az-card-neutral: #94a3b8;
}
/*==============================================================================
BASE
==============================================================================*/
.az-stat {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: var(--az-card-padding);
/* `!important` so aqui: as telas antigas trazem utilitarios de fundo do
Bootstrap (`bg-info`, `bg-danger`) que ja vem com `!important`. Neutralizar
na raiz do componente e mais seguro do que caçar cada ocorrencia. */
background: var(--az-card-bg) !important;
background-image: none !important;
border: 1px solid var(--az-card-border) !important;
border-radius: var(--az-card-radius);
box-shadow: var(--az-card-shadow);
color: var(--az-card-value) !important;
/* Piso de altura: uma tela so com cards curtos nao pode gerar um card mais
baixo que o da tela ao lado. */
min-height: var(--az-stat-min-h, 150px);
text-align: left;
overflow: hidden;
transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms ease;
}
/* Alguns cards antigos vem com `aspect-ratio:1/1` no atributo style, o que
espremia o conteudo. A altura passa a sair do conteudo. */
.az-stat[style*='aspect-ratio'] {
aspect-ratio: auto !important;
min-height: 0 !important;
}
/*------------------------------------------------------------------------------
Titulo — icone + rotulo
------------------------------------------------------------------------------*/
.az-stat__title,
.az-stat > h6 {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: var(--az-card-title) !important;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.01em;
}
/* O icone ganha um recipiente suave em vez de flutuar solto ao lado do texto.
O tom sai do proprio icone (`color-mix` sobre o currentColor), entao um
`text-success` no ja pinta o quadrado de verde claro — sem uma classe de
fundo para cada cor. */
.az-stat__title > i,
.az-stat__title > svg,
.az-stat > h6 > i,
.az-stat > h6 > svg {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 34px;
height: 34px;
/* anula o `me-2` que as telas antigas trazem no icone */
margin: 0 !important;
border-radius: 10px;
background: color-mix(in srgb, currentColor 13%, transparent);
font-size: 0.9375rem;
transition: transform 250ms ease;
}
.az-stat__title > svg,
.az-stat > h6 > svg {
padding: 8px;
stroke-width: 1.9;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.az-stat__title > i,
.az-stat > h6 > i {
background: rgba(74, 108, 247, 0.12);
}
}
/*------------------------------------------------------------------------------
Valor e descricao
------------------------------------------------------------------------------*/
/* Sem `!important` no valor de proposito: as telas de extrato e relatorios ja
marcam o numero com `text-success`/`text-danger`/`text-warning`, que e onde a
semantica daquele dado vive. Forcar a cor aqui apagaria essa informacao. */
.az-stat__value,
.az-stat > h2,
.az-stat > h3,
.az-stat > h4,
.az-stat > h5 {
margin: 0;
color: var(--az-card-value);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
/* Valores em coluna alinham pela virgula. */
font-variant-numeric: tabular-nums;
}
/* Um valor de texto (uma data, um nome) nao pede o mesmo corpo de um numero. */
.az-stat > h5 {
font-size: 1.25rem;
}
/*------------------------------------------------------------------------------
Traducao da paleta antiga
As telas herdadas dizem o estado do dado com utilitarios do Bootstrap
(`text-success`, `text-danger`...). Em vez de reescrever cada card, o
componente traduz esses utilitarios para os tokens semanticos daqui — assim o
verde do extrato e o verde do painel sao o mesmo verde.
`primary`, `info` e `secondary` nao carregam estado: viram o tom neutro do
valor, e a cor fica reservada para quem tem o que comunicar.
------------------------------------------------------------------------------*/
.az-stat > h2.text-success, .az-stat > h3.text-success,
.az-stat > h4.text-success, .az-stat > h5.text-success { color: var(--az-card-success) !important; }
.az-stat > h2.text-danger, .az-stat > h3.text-danger,
.az-stat > h4.text-danger, .az-stat > h5.text-danger { color: var(--az-card-danger) !important; }
.az-stat > h2.text-warning, .az-stat > h3.text-warning,
.az-stat > h4.text-warning, .az-stat > h5.text-warning { color: var(--az-card-warning) !important; }
.az-stat > h2.text-primary, .az-stat > h3.text-primary,
.az-stat > h4.text-primary, .az-stat > h5.text-primary,
.az-stat > h2.text-info, .az-stat > h3.text-info,
.az-stat > h4.text-info, .az-stat > h5.text-info,
.az-stat > h2.text-secondary, .az-stat > h3.text-secondary,
.az-stat > h4.text-secondary, .az-stat > h5.text-secondary { color: var(--az-card-value) !important; }
/* Os icones seguem a mesma traducao — inclusive `primary`/`info`, que aqui sao
o azul da marca, e nao o roxo escuro do tema antigo. */
.az-stat > h6 > i.text-success,
.az-stat__title > i.text-success { color: var(--az-card-success) !important; }
.az-stat > h6 > i.text-danger,
.az-stat__title > i.text-danger { color: var(--az-card-danger) !important; }
.az-stat > h6 > i.text-warning,
.az-stat__title > i.text-warning { color: var(--az-card-warning) !important; }
.az-stat > h6 > i.text-primary,
.az-stat > h6 > i.text-info,
.az-stat__title > i.text-primary,
.az-stat__title > i.text-info { color: var(--az-card-primary) !important; }
.az-stat > h6 > i.text-secondary,
.az-stat > h6 > i.text-muted,
.az-stat__title > i.text-secondary { color: var(--az-card-neutral) !important; }
.az-stat__desc,
.az-stat > p,
.az-stat > small {
margin: 0;
color: var(--az-card-muted) !important;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
}
/* As telas antigas marcam a descricao com `text-dark`/`text-white`, que sao
utilitarios `!important`. Aqui a descricao e sempre secundaria. */
.az-stat > p.text-dark,
.az-stat > p.text-white,
.az-stat > small.text-dark,
.az-stat > small.text-white,
.az-stat .az-stat__desc.text-white {
color: var(--az-card-muted) !important;
}
/*==============================================================================
ESTADOS SEMANTICOS
O modificador pinta o icone, o valor e o traco lateral. O corpo do card
continua neutro — e o que mantem doze cards legiveis na mesma tela.
==============================================================================*/
.az-stat--primary { --az-stat-cor: var(--az-card-primary); }
.az-stat--success { --az-stat-cor: var(--az-card-success); }
.az-stat--danger { --az-stat-cor: var(--az-card-danger); }
.az-stat--warning { --az-stat-cor: var(--az-card-warning); }
.az-stat--neutral { --az-stat-cor: var(--az-card-neutral); }
.az-stat--primary .az-stat__title > i,
.az-stat--success .az-stat__title > i,
.az-stat--danger .az-stat__title > i,
.az-stat--warning .az-stat__title > i,
.az-stat--neutral .az-stat__title > i,
.az-stat--primary > h6 > i,
.az-stat--success > h6 > i,
.az-stat--danger > h6 > i,
.az-stat--warning > h6 > i,
.az-stat--neutral > h6 > i {
color: var(--az-stat-cor) !important;
}
/* Só o valor recebe a cor do estado; titulo e descricao ficam neutros. */
.az-stat--success .az-stat__value,
.az-stat--danger .az-stat__value,
.az-stat--warning .az-stat__value,
.az-stat--success > h2, .az-stat--success > h3, .az-stat--success > h4,
.az-stat--danger > h2, .az-stat--danger > h3, .az-stat--danger > h4,
.az-stat--warning > h2, .az-stat--warning > h3, .az-stat--warning > h4 {
color: var(--az-stat-cor) !important;
}
/* Traco lateral: opcional, para quando o estado precisa ser lido de longe. */
.az-stat--accent::before {
content: '';
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--az-stat-cor, var(--az-card-primary));
}
.az-stat--accent {
padding-left: calc(var(--az-card-padding) + 6px);
}
/*==============================================================================
SELO DE ESTADO
O estado nao pode depender so da cor: quem nao distingue verde de vermelho
precisa do texto. Por isso o selo carrega rotulo, e nao apenas um ponto.
==============================================================================*/
.az-stat__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--az-stat-cor, var(--az-card-neutral)) 12%, transparent);
color: var(--az-stat-cor, var(--az-card-neutral));
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
/* Encosta o selo na direita da linha do titulo. */
.az-stat__title .az-stat__badge {
margin-left: auto;
}
.az-stat__title {
width: 100%;
}
/*==============================================================================
INTERACAO
Card informativo nao se mexe. Só o que leva a algum lugar responde ao mouse —
e assim o movimento vira informacao ("isto e clicavel") em vez de enfeite.
==============================================================================*/
.az-stat--link,
a > .az-stat,
a.az-stat {
cursor: pointer;
}
.az-stat--link:hover,
a:hover > .az-stat,
a.az-stat:hover {
transform: translateY(-2px);
border-color: var(--az-card-border-hover) !important;
box-shadow: var(--az-card-shadow-hover);
}
.az-stat--link:hover .az-stat__title > i,
a:hover > .az-stat .az-stat__title > i,
a:hover > .az-stat > h6 > i {
transform: scale(1.06);
}
/* Foco visivel para quem navega por teclado: o contorno vai no card, mesmo
quando quem recebe o foco e a ancora em volta. */
a:focus-visible > .az-stat,
.az-stat--link:focus-visible,
a.az-stat:focus-visible {
outline: 2px solid var(--az-card-primary);
outline-offset: 2px;
}
/* O link em volta do card nao deve sublinhar nem recolorir o conteudo. */
a:has(> .az-stat) {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
.az-stat,
.az-stat__title > i {
transition: none;
}
.az-stat--link:hover,
a:hover > .az-stat {
transform: none;
}
}
/*==============================================================================
GRADE
`.az-stats` e a linha de cards. Existe para que altura e espacamento sejam do
conjunto, e nao negociados card a card em cada tela.
==============================================================================*/
.az-stats {
/* Medida padrao do card, em um lugar so. */
--az-stat-col: 220px;
/* Piso alto de proposito: com ele o card do painel (descricao de uma linha)
mede o mesmo que o de relatorios (descricao de quatro). O respiro que
sobra embaixo e o preco de ter uma faixa de indicadores igual em todas as
telas — e ele parece intencional, nao sobra. */
--az-stat-min-h: 172px;
display: grid;
/* `auto-fill`, nao `auto-fit`: a trilha continua existindo mesmo sem card
para ocupa-la, entao a largura do card depende so da largura da tela —
nunca de quantos cards a pagina tem. Era isso que fazia o card do extrato
(4 cards) sair maior que o do painel (5 cards) na mesma resolucao. */
grid-template-columns: repeat(auto-fill, minmax(var(--az-stat-col), 1fr));
/* Todas as linhas com a mesma altura: sem isso, uma descricao mais longa
deixa a segunda faixa de cards mais alta que a primeira. */
grid-auto-rows: 1fr;
gap: 16px;
align-items: stretch;
}
.az-stats > * {
min-width: 0;
}
.az-stats .az-stat {
height: 100%;
}
/* A variante compacta mexe no respiro e no corpo do numero — nunca na largura
da coluna. E o que garante que painel, extrato e relatorios tenham cards do
mesmo tamanho, mesmo tendo quantidades diferentes de indicadores. */
.az-stats--compact .az-stat {
--az-card-padding: 16px;
gap: 8px;
}
.az-stats--compact .az-stat__value,
.az-stats--compact .az-stat > h2,
.az-stats--compact .az-stat > h3,
.az-stats--compact .az-stat > h4,
.az-stats--compact .az-stat > h5 {
font-size: 1.5rem;
}
/*==============================================================================
RESPONSIVO
O celular nao recebe o card encolhido: o respiro diminui, o valor diminui um
degrau e a grade cai para uma coluna — o numero nunca quebra em duas linhas.
==============================================================================*/
@media (max-width: 1199.98px) {
.az-stats {
--az-stat-col: 200px;
gap: 14px;
}
}
@media (max-width: 767.98px) {
.az-stats {
--az-stat-col: 170px;
--az-stat-min-h: 148px;
}
}
@media (max-width: 575.98px) {
:root {
--az-card-padding: 16px;
--az-card-radius: 14px;
}
.az-stats,
.az-stats--compact {
--az-stat-min-h: 0;
grid-template-columns: 1fr;
gap: 12px;
}
.az-stat {
gap: 8px;
}
.az-stat__value,
.az-stat > h2,
.az-stat > h3,
.az-stat > h4,
.az-stat > h5 {
font-size: 1.5rem;
}
.az-stat__title > i,
.az-stat > h6 > i {
width: 30px;
height: 30px;
font-size: 0.875rem;
}
}
/*==============================================================================
FILA UNICA (.az-stats--linha)
O painel mostra todos os indicadores numa linha so. A quantidade varia com o
perfil e com os dados: 5 cards no caso comum, 6 com "Minha Receita", 7 quando
ha comissoes de colaboradores. Por isso a fila nao pode ser um numero fixo de
colunas — sobraria trilha vazia — nem `auto-fill`, que quebra a linha assim
que o piso de 220px nao cabe mais.
`grid-auto-flow: column` resolve os dois: as colunas nascem conforme os cards
existem e dividem a largura em partes iguais, seja 5 ou 7.
A largura que importa aqui e a do conteudo, nao a da janela: a barra lateral
recolhe e devolve ~190px para a faixa. Media query nao enxerga isso, container
query sim — por isso a fila mede o proprio contexto. O @supports abaixo cobre
navegadores sem container query com o equivalente aproximado em media query.
==============================================================================*/
.az-stats-fila {
container-type: inline-size;
container-name: azstats;
}
.az-stats--linha {
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
/* Anula o `repeat(auto-fill, ...)` herdado de `.az-stats`: sem isto as duas
regras coexistem e as trilhas explicitas voltam a mandar. */
grid-template-columns: none;
}
/* 1000px e onde seis cards ainda medem ~150px, o minimo para o valor e uma
descricao de duas linhas. Abaixo disso a fila quebra, sempre em colunas
iguais — nunca com uma trilha vazia sobrando na ponta. */
@container azstats (max-width: 1000px) {
.az-stats--linha {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Entre 1000 e 1200 as colunas ficam estreitas: o numero cede um degrau para
nao quebrar em duas linhas dentro do card. */
@container azstats (max-width: 1200px) {
.az-stats--linha .az-stat__value,
.az-stats--linha .az-stat > h2,
.az-stats--linha .az-stat > h3 {
font-size: 1.35rem;
}
}
@container azstats (max-width: 720px) {
.az-stats--linha {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container azstats (max-width: 430px) {
.az-stats--linha {
grid-template-columns: 1fr;
}
}
/* Na fila, a descricao pode ocupar duas linhas sem esticar o card: a altura
minima do conjunto ja reserva o espaco. */
.az-stats--linha .az-stat__desc {
overflow-wrap: anywhere;
}
@supports not (container-type: inline-size) {
/* Aproximacao pela janela: ~256px de barra lateral + a faixa. */
@media (max-width: 1399.98px) {
.az-stats--linha {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.az-stats--linha {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.az-stats--linha {
grid-template-columns: 1fr;
}
}
}
/*==============================================================================
PAINEIS (.card do Bootstrap: graficos, tabelas, formularios)
Nao sao cards de indicador, mas precisam falar a mesma lingua — mesmo raio,
mesma borda, mesma sombra. Sem isso o painel de grafico continua parecendo de
outro produto ao lado do indicador.
==============================================================================*/
.card {
border-radius: var(--az-card-radius);
border-color: var(--az-card-border);
box-shadow: var(--az-card-shadow);
}
/* Sobra do padrao antigo: contorno azul cheio em volta do painel. */
.card.border-primary {
border-color: var(--az-card-border) !important;
}
.card > .card-header {
border-top-left-radius: var(--az-card-radius);
border-top-right-radius: var(--az-card-radius);
}
.card > .card-footer:last-child,
.card > .table-responsive:last-child,
.card > .table:last-child {
border-bottom-left-radius: var(--az-card-radius);
border-bottom-right-radius: var(--az-card-radius);
}