*/
.input-group-date {
display: flex;
border-radius: 0.75rem;
border: 1px solid var(--color-border-primary);
overflow: hidden;
transition: all var(--transition-fast) ease;
}
.input-group-date:focus-within {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.input-group-date .input-group-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
background: var(--color-bg-tertiary);
border-right: 1px solid var(--color-border-primary);
}
.input-group-date .input-date {
flex: 1;
padding: 0.75rem 1rem;
background: var(--color-bg-primary);
border: none;
color: var(--color-text-primary);
font-size: 0.9375rem;
}
.input-group-date .input-date:focus {
outline: none;
}
/* Esconder o ícone nativo do navegador nos inputs dentro de input-group-date */
.input-group-date input[type="date"]::-webkit-calendar-picker-indicator,
.input-group-date input[type="time"]::-webkit-calendar-picker-indicator,
.input-group-date input[type="datetime-local"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
/* Para Firefox */
.input-group-date input[type="date"],
.input-group-date input[type="time"],
.input-group-date input[type="datetime-local"] {
-moz-appearance: textfield;
}
/* Corrigir cor do ícone do calendário/relógio no dark mode (para inputs sem ícone customizado) */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
/* Select customizado */
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
padding-right: 2.5rem;
appearance: none;
}
.dark select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
/* ========== Tables ========== */
/* ========== Badges ========== */
/* ========== Pagination ========== */
/* ========== Toast Notifications ========== */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ========== Modal ========== */
/*
* Modais devem ser renderizados diretamente no body para evitar problemas
* de z-index e posicionamento. Use o bloco {% block modals %} no template.
*/
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9999; /* Z-index alto para garantir que fique acima de tudo */
opacity: 1;
visibility: visible;
transition: opacity var(--transition-normal) ease;
}
/* Estado oculto - hidden do Tailwind ou classe hidden */
.modal-overlay.hidden,
.modal-overlay:not(.open):not(.flex):not([style*="display"]) {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Estado aberto */
.modal-overlay.open,
.modal-overlay.flex {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Conteúdo do modal com animação */
.modal-content {
transition: transform var(--transition-normal) ease, opacity var(--transition-normal) ease;
}
.modal-content.scale-95 {
transform: scale(0.95);
}
.modal-content.scale-100 {
transform: scale(1);
}
.modal-content.opacity-0 {
opacity: 0;
}
.modal-content.opacity-100 {
opacity: 1;
}
/*
* Modal que existe para um campo só.
*
* "Alterar Categoria" reaproveita a modal de edição escondendo sete dos oito
* campos, e o que sobra é um cabeçalho e um seletor — a caixa encolhia até ficar
* menor que a lista de categorias que ela abre sozinha ao aparecer, e o painel
* parecia vazar de uma janela que não o comportava.
*
* A altura mora aqui, e não numa classe Tailwind aplicada pelo JS, porque o
* extrator do Tailwind lê os arquivos como texto: classe que só existe dentro de
* uma string JS nunca é gerada, e seria aplicada sem efeito nenhum.
*/
@media (min-width: 640px) {
.modal-content[data-modo="categoria"] {
min-height: 26rem;
}
}
/* ========== Empty State ========== */
/* ========== Loading ========== */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ========== Skeleton Loading ========== */
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ========== Animations ========== */
.fade-in {
animation: fadeIn var(--transition-normal) ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========== Utilities para Alto Contraste ========== */
/* Textos com contraste garantido */
/* Links com contraste adequado */
/*
* `-text` e não `--color-info`: o token base é #0284c7 (sky-600), que dá 4,1:1
* sobre o branco do card e 3,91:1 sobre o cinza da página — abaixo dos 4,5:1
* que a WCAG AA pede para texto normal, e link é o texto que mais se lê. A
* variante existe justamente para isso e vale 7,56:1. No tema escuro as duas
* são o mesmo #38bdf8, então lá nada muda.
*/
/*
* Dentro de `@layer base`, e isso é o que faz a regra ser um **padrão** em vez
* de um decreto.
*
* O Tailwind v4 declara `@layer theme, base, components, utilities`, e põe todo
* utilitário em `utilities`. Declaração **fora** de camada vence declaração em
* camada, seja qual for a especificidade — então esta regra, solta como estava,
* derrotava a cor escrita na classe de **todo** link do app. A barra inferior
* dizia `dark:text-zinc-400` e pintava `#38bdf8`; escapavam só os links com
* alguma classe `bg-`, por causa do `:not` abaixo.
*
* Em `base` ela perde para `utilities`, que é a ordem certa: link sem cor
* declarada fica azul de link, e link que declarou a sua fica com a sua. Não dá
* para resolver com `:not([class*="text-"])` — `text-sm` casaria e tiraria a cor
* de todo link que só define tamanho.
*/
@layer base {
a:not(.btn):not([class*="bg-"]) {
color: var(--color-info-text);
text-decoration-color: transparent;
transition: text-decoration-color var(--transition-fast);
}
a:not(.btn):not([class*="bg-"]):hover {
text-decoration-color: currentColor;
}
}
/* Focus visible para acessibilidade */
*:focus-visible {
outline: 2px solid var(--color-info);
outline-offset: 2px;
}
/* ========== Correções específicas para Tailwind ========== */
/* Garantir contraste em textos zinc no tema claro */
.text-zinc-500 {
color: #52525b !important; /* Contraste 5.74:1 */
}
.text-zinc-400 {
color: #71717a !important;
}
/* Melhorar contraste de textos no tema escuro */
.dark .text-zinc-400 {
color: #a1a1aa !important;
}
/* Bordas mais visíveis */
.border-zinc-200 {
border-color: #cbd5e1 !important;
}
/* Backgrounds com melhor separação */
/* Divisores mais visíveis */
/* ========== Estilos para ícones de ação ========== */
/* ========== Melhorias de hover states ========== */
/* ========== Mobile Responsive Styles ========== */
/*
* Área segura, o par obrigatório do `viewport-fit=cover` do `base.html`.
*
* Aquele atributo é o que faz `env(safe-area-inset-*)` deixar de ser zero no
* iOS — e é também o que estende a página para **debaixo** do entalhe e da
* barra de gestos. Um sem o outro troca um defeito por outro.
*
* Só o topo mora aqui, e só em modo standalone. O `manifest.json` declara
* `orientation: portrait-primary`, e em retrato os insets laterais são zero —
* escrevê-los custaria uma regra que vence as classes do Tailwind por
* especificidade de `id` e desalinharia `#barra-fixa` do `` no desktop,
* para consertar uma orientação que o app não oferece. O inset de baixo
* continua inline em `components/nav_inferior.html`, junto de quem depende dele.
*
* `display-mode: standalone` é o recorte certo: dentro do navegador a barra de
* status é do navegador, e o padding aqui abriria uma faixa vazia no topo.
*/
@media (display-mode: standalone) {
#barra-fixa {
padding-top: env(safe-area-inset-top);
}
}
@media (max-width: 1023px) {
button,
a.btn,
input[type="submit"],
input[type="button"],
.btn {
min-height: 44px;
min-width: 44px;
}
/*
* Aqui houve `.flex.gap-2 > * { min-height: 44px }`, com o rótulo de
* "espaçamento entre elementos clicáveis". Ele não olhava se o filho era
* clicável: alcançava selo, chip e `` de qualquer linha que por acaso
* usasse `gap-2`, esticando-os a 44px de altura. O alvo de toque legítimo
* já está nas regras de `button`, `a.btn`, `input` e `select` acima, que
* dizem quem é alvo em vez de adivinhar pelo espaçamento do pai.
*/
/* Ajustar inputs e selects para touch */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
min-height: 44px;
font-size: 16px; /* Previne zoom automático no iOS */
}
}
/* Scroll horizontal suave para tabelas em mobile */
@media (max-width: 767px) {
.overflow-x-auto {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
/*
* Aqui houve um gradiente `::after` como "indicador de scroll horizontal".
* Ele errava de duas formas ao mesmo tempo, e as duas só aparecem no
* aparelho: aparecia em **todo** `.overflow-x-auto`, houvesse ou não o que
* rolar — o breadcrumb cabe inteiro e ganhava a faixa mesmo assim —, e o
* `:not(:hover)` que deveria escondê-lo nunca deixa de valer numa tela de
* toque, onde não há hover. O resultado era uma mancha cinza fixa no canto
* direito da trilha e por cima do texto da última aba.
*
* A pista de que há aba além da borda continua sendo a barra de rolagem
* visível, que é o que `components/abas.html` documenta e escolheu.
*/
}
/*
* Itens do FlatSelect (app/web/static/js/flatselect.js).
*
* Moram aqui, e não em classes utilitárias montadas pelo JS, por duas razões: o
* extrator do Tailwind lê os arquivos como texto e nunca geraria uma classe que
* só existe dentro de uma string; e o realce do item ativo era azul em duas
* telas e verde-azulado numa terceira, porque cada cópia do componente escolheu
* a sua. Com uma regra só, a diferença deixa de ser possível.
*/
.flatselect-item {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
cursor: pointer;
color: var(--color-text-primary);
}
.flatselect-item:hover {
background-color: var(--color-bg-tertiary);
}
/* O item que o Enter escolhe — o primeiro da lista, ou onde as setas pararam. */
.flatselect-item.flatselect-ativo {
background-color: color-mix(in srgb, var(--color-info) 14%, transparent);
}
/* O que já estava selecionado antes de a lista abrir. */
.flatselect-item.flatselect-escolhido {
font-weight: 600;
color: var(--color-info-text);
}
/*
* Aqui havia um `* { transform: translateZ(0) }` abaixo de 1024px, com o rótulo
* de "melhorar performance de animações em mobile". Ele fazia o contrário, e
* quebrava coisas visíveis:
*
* - promovia **todo** elemento da página a camada de composição própria. O truque
* vale para o punhado de elementos que de fato animam; aplicado ao universo,
* multiplica o consumo de memória de vídeo e é justamente o que trava a
* rolagem em aparelho modesto;
* - `transform` em qualquer valor diferente de `none` faz do elemento o bloco
* contenedor dos descendentes `position: fixed`. Com a regra valendo para `*`,
* **nenhum `fixed` escapava do pai** em tablet e celular — é o que impedia
* qualquer dropdown de sair de dentro de um card ou de um modal, e o que
* tornava impossível corrigir o recorte trocando `absolute` por `fixed`;
* - `position: sticky` sofre o mesmo: a barra de título e abas (`#barra-fixa`)
* depende dela.
*
* O que sobrou é a parte que era mesmo sobre animação.
*/
@media (max-width: 1023px) {
/* Reduzir animações complexas em mobile para melhor performance */
.animate-fade-in-up {
animation-duration: 0.3s;
}
}
/* Ajustar modais para mobile */
@media (max-width: 767px) {
.modal-content {
margin: 1rem;
max-height: calc(100vh - 2rem);
overflow-y: auto;
}
}
/* Melhorar legibilidade de textos em mobile */
@media (max-width: 767px) {
body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/*
* Aqui houve `h1/h2/h3 { font-size: … }` abaixo de 768px, para reduzir
* título no celular. Parecia inofensivo — seletor de elemento perde para
* classe — e não era: o Tailwind v4 envolve **tudo** em `@layer`, e este
* arquivo não usa camada nenhuma. Declaração fora de camada vence
* declaração em camada, qualquer que seja a especificidade. Um `h1` cru
* daqui derrotava `text-lg`, `text-xl` e `sm:text-2xl` escritos no
* template, e o sintoma era o título que não encolhia — em `base.html`,
* passando por baixo dos botões da barra.
*
* O tamanho do título é do template, que é onde se vê qual é.
*/
}
/*
* Aqui houve um bloco que redefinia `.p-6`, `.gap-6` e `.space-y-6` abaixo de
* 768px, para apertar o espaçamento no celular. Ele fazia isso e mais uma coisa
* que ninguém pedia: como este arquivo carrega **depois** do `tailwind.css`, as
* três regras venciam **por camada**: o Tailwind v4 põe todo utilitário em
* `@layer utilities`, este arquivo não usa camada, e declaração fora de camada
* vence declaração em camada qualquer que seja a especificidade. Com elas no
* lugar, `sm:p-6` e `md:p-6` escritos num template não faziam efeito nenhum, e
* quem escrevesse o ajuste não tinha como suspeitar de um arquivo que não
* estava editando.
*
* O espaçamento hoje é declarado onde se lê: `p-4 md:p-6` no template, que diz
* a mesma coisa e é local. `tests/test_layout_mobile.py` barra a volta do
* padrão — redefinir utilitário do Tailwind aqui é a armadilha mais cara do
* arquivo, e a única cujo sintoma aparece noutro lugar.
*/
/* ========== Números tabulares ==========
Alinhamento de coluna de valores. Estava declarado dentro de um `