da página) percorre a página toda — que é o que o sticky precisa. */ @media (min-width: 768px) { /* O cabeçalho inteiro congela: identificação, resumo financeiro, faixa de detalhes e as ações do topo. ⚠ `top` ENCOSTADO na topbar (4rem = os 64px do `h-16` dela), não 4,5rem: a versão anterior usava a folga porque a barra compacta era um cartão flutuante com sombra. Agora que o congelado é uma faixa opaca, meio centímetro de folga é meio centímetro de FRESTA — medido na bancada, o conteúdo passava por trás numa tira de 8px logo abaixo da topbar. ⚠ `z-index` ABAIXO de 20, senão o cabeçalho passa por CIMA da topbar: ele vem depois dela no documento, e com z-index igual quem está depois ganha. ⚠ Fundo OPACO obrigatório: o conteúdo rola por baixo. O cartão tem fundo próprio, mas a trilha e a faixa de ações não — sem isto, os botões do topo ficam com linhas de tabela passando atrás. As cores são as do corpo do painel (zinc-50 / zinc-950), não as do cartão. */ .fi-resource-ordem-servicos .os-cab { position: sticky; top: 4rem; z-index: 10; background: #FAFAFA; padding-bottom: 0.75rem; } html.dark .fi-resource-ordem-servicos .os-cab { background: #09090B; } /* A navegação horizontal gruda encostada no cabeçalho. O `overflow-x: auto` das abas é do PRÓPRIO elemento (rolagem das abas): overflow no elemento grudento não atrapalha — o que mataria o sticky seria overflow num ANCESTRAL, e entre o body e aqui só existe `overflow-x: clip` no .fi-layout, que não cria contêiner de rolagem. ⚠ O `top` NÃO pode ser fixo aqui: a altura do cabeçalho varia de OS para OS (linha do equipamento, chip de faturada, acréscimo no resumo, e as ações do topo que dependem de permissão e estado). Quem mede é o script do header.blade.php, que escreve `--os-cab-h` no . O padrão do `var()` é a altura típica, para a tela não quebrar se o script não rodar. ⚠ `z-index` MAIOR que o do cabeçalho, e o desconto de 1rem é de propósito: as abas param dentro do `padding-bottom` do cabeçalho e o cobrem, senão sobra uma fresta transparente de 1rem — o `gap` da seção — por onde o conteúdo aparece durante a rolagem. */ .fi-resource-ordem-servicos .fi-tabs { position: sticky; top: calc(3.5rem + var(--os-cab-h, 13.5rem)); z-index: 11; /* ⚠ A PÍLULA NÃO COBRE A LARGURA, e grudada isso vira buraco: o Filament põe `mx-auto` nela, e margem automática no eixo transversal de um flex em coluna encolhe o item até o conteúdo e o centraliza. Medido na bancada: pílula de 119 a 1321 dentro de um contêiner de 80 a 1360 — 39px de cada lado por onde o formulário passava por trás, legível. Zerar a margem devolve o `stretch` do flex e a barra fica opaca de ponta a ponta. O fundo e o anel dela já existem; o que muda é a largura. */ margin-inline: 0; } /* ⚠ O anel do Filament (`ring-1`) É box-shadow: declarar só a sombra o APAGARIA, e no tema escuro a pílula é zinc-900 sobre zinc-950 — sem anel, ~1,1:1 de contraste de superfície, que é exatamente por que o anel existe. Por isso as duas sombras são compostas, não substituídas. */ .fi-resource-ordem-servicos .fi-tabs { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 6px 16px -8px rgba(15, 23, 42, 0.3); } html.dark .fi-resource-ordem-servicos .fi-tabs { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px -8px rgba(0, 0, 0, 0.5); } } /* ===================== DRE GERENCIAL (matriz 12 meses) ===================== */ /* Fonte pequena e tabular para caber os 12 meses + acumulado em colunas. Definido aqui (não via classes text-[11px]/tabular-nums no blade) porque valores arbitrários do Tailwind não existem no CSS compilado do Filament. */ .dre-tabela { font-size: 0.6875rem; /* 11px */ font-variant-numeric: tabular-nums; line-height: 1.1rem; } .dre-tabela thead th { font-size: 0.625rem; /* 10px */ } /* ================= TABELAS: CÉLULAS MAIS COMPACTAS ================= */ /* Padding horizontal das células reduzido (px-3 → 0.5rem) para as listas caberem na largura da tela sem scroll horizontal, somando-se às colunas secundárias ocultas por padrão nos Resources. */ .fi-ta-table .px-3 { padding-inline: 0.5rem; } /* Fonte 13px (padrão 14px) nas células e cabeçalhos: leitura densa e mais colunas visíveis, sem perder legibilidade. Badges acompanham. */ .fi-ta-table .fi-ta-text-item-label, .fi-ta-table .fi-ta-header-cell-label, .fi-ta-table td .fi-badge, .fi-ta-table .fi-ta-text, /* ⚠ O TRAVESSÃO DA CÉLULA VAZIA ERA A LINHA MAIS ALTA DA TABELA. O `fi-ta-placeholder` vem com `leading-6` (24px) — mais que os 18,4px do texto de verdade — e ficava de fora deste seletor. As três colunas que não informavam nada eram justamente as que esticavam a linha para 40px. */ .fi-ta-table .fi-ta-placeholder { font-size: 0.8125rem; line-height: 1.15rem; } /* Linhas mais baixas: padding vertical das células py-4 (1rem) → 0.5rem. ⚠ `th` junto com `td`: a célula do CHECKBOX de seleção é `th` mesmo no cabeçalho, e o `td` sozinho a deixava de fora — ela media 48px e, sendo a mais alta da linha, mandava na altura do cabeçalho inteiro. */ .fi-ta-table td .py-4, .fi-ta-table td .py-3, .fi-ta-table th .py-4, .fi-ta-table th .py-3 { padding-block: 0.375rem; } /* ⚠ O CABEÇALHO ESCAPAVA DA REGRA ACIMA. O `py-3.5` do Filament fica na PRÓPRIA `th` (`fi-ta-header-cell px-3 py-3.5`), e não num filho — então `td .py-4` nunca o alcançou e ele seguia com 49px enquanto as linhas desciam para 43. Medido no navegador, não deduzido. */ .fi-ta-table .fi-ta-header-cell { padding-block: 0.5rem; } /* O rótulo da coluna vira etiqueta, não texto: menor e em caixa alta, para o olho separar o que é NOME DE COLUNA do que é dado. */ .fi-ta-table .fi-ta-header-cell-label { font-size: 0.6875rem; /* 11px */ letter-spacing: 0.06em; text-transform: uppercase; } /* ⚠⚠ O SELO DE SITUAÇÃO ERA QUEM SEGURAVA A LINHA EM 43px. O texto da célula ocupa 34; o `fi-badge` tem fundo, anel, canto arredondado e 4px de respiro próprio dentro de uma célula que já tem 8 — e sozinho mede 26px. Dentro de TABELA ele vira um ponto de cor antes do texto. O ponto usa `currentColor`, então herda a cor semântica que o Filament já calculou (`text-custom-600` / `fi-color-danger` / etc.) sem mapear cor nenhuma aqui. E o texto continua escrito: quem não distingue as cores lê a situação igual. ⚠ Escopado a `td` de propósito — fora da tabela (topo de página, painéis, abas com contagem) o selo continua com a forma de sempre. */ .fi-ta-table td .fi-badge { background: transparent; box-shadow: none; padding: 0; min-width: 0; border-radius: 0; justify-content: flex-start; gap: 0.4rem; } .fi-ta-table td .fi-badge::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex: none; } /* Selo que já traz ícone não ganha ponto: o ícone é o sinal. */ .fi-ta-table td .fi-badge:has(svg)::before { display: none; } /* Número é lido em coluna, não em linha: dinheiro, data e quantidade com os dígitos de mesma largura, para as vírgulas empilharem. */ .fi-ta-table td .fi-ta-text-item-label, .fi-ta-table td .fi-ta-text { font-variant-numeric: tabular-nums; } /* ============ UMA LINHA POR REGISTRO, SEMPRE ============ */ /* Pedido do dono (20/08): nenhum conteúdo quebra em várias linhas, e o que não couber sai com reticências. ⚠ O teto é em `ch` e não em `%`: dentro de tabela, `max-width: 100%` não trunca nada — a célula simplesmente cresce e empurra a tabela. Medir em caracteres limita o texto sem depender de `table-layout: fixed`, que redistribuiria TODAS as colunas do sistema de uma vez. ⚠⚠ Toda coluna truncada precisa do texto inteiro em algum lugar. Onde o corte é esperado (descrição de cobrança, observações) o Resource declara `->tooltip()`; cortar sem isso é perder informação, não ganhar densidade. */ .fi-ta-table td .fi-ta-text-item-label { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* A descrição secundária que o Filament empilha sob o valor (`description()`) também fica numa linha só. */ .fi-ta-table td .fi-ta-text-item-description { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* =================== SIDEBAR COMPACTA + SEM SCROLLBAR =================== */ /* O menu completo (19 itens + grupos) deve caber na altura da tela sem precisar rolar: espaçamentos do Filament reduzidos (gap-y-7/py-8 são largos demais) e scrollbar escondida (a rolagem por roda do mouse continua funcionando como reserva em telas muito baixas). */ .fi-sidebar-nav { padding-block: 0.5rem; /* padrão py-8 (2rem) */ row-gap: 0.375rem; /* padrão gap-y-7 (1.75rem) */ scrollbar-width: none; /* Firefox */ } .fi-sidebar-nav::-webkit-scrollbar { display: none; /* Chrome/Edge */ } .fi-sidebar-nav-groups { row-gap: 0.375rem; /* padrão gap-y-7 (1.75rem) */ } .fi-sidebar-item-button { padding-block: 0.25rem; /* padrão py-2 (0.5rem) */ } .fi-sidebar-group-button { padding-block: 0.25rem; /* padrão py-2 (0.5rem) */ } .fi-sidebar-group-items { row-gap: 0.125rem; /* padrão gap-y-1 (0.25rem) */ } .fi-sidebar-item-icon, .fi-sidebar-group-icon { height: 1.25rem; /* padrão h-6 (1.5rem) */ width: 1.25rem; } /* Ícones do menu na MESMA posição horizontal no modo recolhido e expandido: o padrão do Filament CENTRALIZA o ícone quando recolhido (justify-center), fazendo o ícone "pular" ~8px ao expandir. Alinhando à esquerda nos dois estados, o ícone fica fixo e alinhado com o seu rótulo. (Só nos itens; os cabeçalhos de grupo mantêm o layout padrão do chevron.) */ .fi-sidebar-item-button { justify-content: flex-start; } /* ⚠⚠ O CABEÇALHO DE GRUPO RECOLHIDO É UM ESPAÇADOR: invisível, mas presente. O Filament o esconde por completo quando a barra recolhe (`x-show="$store.sidebar.isOpen"`, e o Alpine escreve `display:none` NA LINHA). Sem ele, cada grupo devolve ~36px e a coluna inteira de ícones escorrega para cima — MEDIDO em 06/09/2026: recolhida, os ícones ficavam em y=76/106/136/170; expandida, em y=112/142/172/242. Os próprios intervalos entre grupos mudavam (34px contra 70px). ▶ Pedido do dono, com as fotos na mesa: *"preserve o espaço dos títulos das categorias quando ele está recolhido, porque ao ocultar ele, os ícones se deslocam"*. ⚠⚠ AS TRÊS DECLARAÇÕES DO RÓTULO SÃO NECESSÁRIAS JUNTAS, e cada uma corresponde a um modo de falhar já observado nesta mesma regra: · `flex: 0 0 0` — sem isto o `flex-1` do Filament faz o rótulo CRESCER, e a barra recolhida foi a ~193px, *"ocupando um pedaço enorme da tela"*; · `white-space: nowrap` — com largura zero e quebra normal, "Meu Negócio" quebra em duas linhas, o cabeçalho vai a 56px e os ícones DESCEM 24px; · `overflow: hidden` — o texto transbordaria por cima dos ícones. ⚠ E o rótulo NÃO pode sair do fluxo (`display: none`): é a linha de texto dele que dá os 32px de altura. Sumindo, sobram 28px e o desvio volta menor, mas volta. ⚠ Isto só é seguro porque o grupo NÃO tem ícone na lateral. Com ícone, o Filament troca a barra recolhida por uma lista de DROPDOWNS e nada aqui vale. Ver `AdminPanelProvider::navigationGroups()`. */ aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button { display: flex !important; align-items: center; } aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-collapse-button { display: none !important; } aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label { flex: 0 0 0; width: 0; overflow: hidden; white-space: nowrap; } /* ================== SIDEBAR RETRÁTIL (espiada + pin) ================== */ /* Com sidebarCollapsibleOnDesktop(), o menu recolhe para só ícones. Dois modos: ESPIADA (hover, .winik-sidebar-peek) = expande SOBREPOSTO ao conteúdo; FIXADO (pin, menu aberto sem a classe de espiada) = EMPURRA o conteúdo. */ @media (min-width: 1024px) { /* No estado FIXADO (aberto, sem espiada) a sidebar fica `sticky` em fluxo, então o layout flex do Filament já coloca o conteúdo ao lado dela — não há sobreposição e nenhuma margem extra é necessária. A sobreposição existe SÓ na espiada, que é `fixed` (regras abaixo). */ .fi-sidebar.winik-sidebar-peek { position: fixed !important; z-index: 35; /* acima da topbar, abaixo de modais */ box-shadow: 0 20px 45px -10px rgb(0 0 0 / 0.45); } /* Reserva a largura do menu recolhido para o conteúdo não "pular" enquanto a sidebar está fora do fluxo (fixed). A largura real é medida pelo js/app-theme.js (--winik-collapsed-w); a var do Filament fica só como reserva. */ .fi-layout:has(.fi-sidebar.winik-sidebar-peek) .fi-main-ctn { margin-inline-start: var(--winik-collapsed-w, var(--collapsed-sidebar-width, 4.5rem)); } /* (A sidebar é preta e opaca nos dois temas — sobreposta ao conteúdo já tem fundo sólido por natureza.) */ } /* Ícone de PIN no cabeçalho da sidebar (injetado por app-theme.js ao lado do toggle nativo). A caixa 36×36 arredondada casa com o toggle nativo (a classe fi-icon-btn sozinha não dimensiona — o botão nativo usa utilitárias inline); a cor segue a mesma regra do toggle (fi-icon-btn da sidebar). Só aparece com o menu expandido. O `margin-inline-start:auto` empurra o pin para a direita, encostando-o imediatamente à esquerda da seta de recolher (que tem o mesmo auto); sem isto o pin ficava colado na marca, longe da seta. */ .winik-pin-icon-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-inline-start: auto; border-radius: 0.5rem; cursor: pointer; transition: background-color .15s, color .15s; } /* Sidebar preta nos dois temas: hover e cor únicos — o pin herda a cor de .fi-sidebar .fi-icon-btn, como a seta nativa ao lado. */ .winik-pin-icon-btn:hover { background: rgb(255 255 255 / 0.10); } /* Com o menu aberto, zera a margem-auto da seta nativa para que só o pin (margin-inline-start:auto) absorva o espaço livre — assim ficam colados, o pin imediatamente à esquerda da seta. */ aside.fi-sidebar.fi-sidebar-open .fi-sidebar-header .fi-icon-btn:not(.winik-pin-icon-btn) { margin-inline-start: 0; } .winik-pin-icon-btn .winik-pin-icon { /* !important porque o .fi-icon-btn svg do Filament tem a mesma peso e vem depois na cascata; sem isto o ícone sai maior que o do toggle nativo. */ width: 1.35rem !important; height: 1.35rem !important; transition: transform .15s; } /* Escondido quando recolhido (só o toggle de expandir aparece) e no mobile. */ aside.fi-sidebar:not(.fi-sidebar-open) .winik-pin-icon-btn { display: none; } @media (max-width: 1023px) { .winik-pin-icon-btn { display: none; } } /* Estado FIXADO: o ícone fica "cravado" (girado 45°). A COR segue a mesma regra da seta de recolher (herda do fi-icon-btn da sidebar), sem destaque próprio — a rotação é o indicador de fixado. Durante a espiada fica reto (não fixado). */ aside.fi-sidebar.fi-sidebar-open:not(.winik-sidebar-peek) .winik-pin-icon-btn .winik-pin-icon { transform: rotate(45deg); } /* ============================ LOGIN ============================ */ /* Escuro nos DOIS temas: é a vitrine da marca (preto + dourado), a cara das pranchas de aplicação do designer. As regras cobrem o modo claro (onde o Filament pintaria tudo branco); no escuro elas coincidem com o tema. */ .fi-simple-layout { background-color: var(--winik-preto); background-image: radial-gradient(1000px 480px at 50% -10%, rgba(221, 191, 126, 0.10), transparent 62%), radial-gradient(820px 460px at 92% 116%, rgba(221, 191, 126, 0.05), transparent 60%); } /* Card: grafite com fio dourado no topo. */ .fi-simple-main { background-color: #131316; border: 1px solid rgb(255 255 255 / 0.07); border-top: 3px solid var(--winik-dourado); box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.55); color: #D4D4D8; } /* Marca maior e CENTRALIZADA entre o topo do card e o título ("Faça login"): padding-top do card = margem inferior do logo = 2.5rem, respiro igual dos dois lados. O !important vence o height INLINE do brandLogoHeight (2.25rem, tamanho da sidebar); o "one" é texto e não escala com a altura do .fi-logo — o tamanho dele vai explícito. */ .fi-simple-layout .fi-simple-main { padding-top: 2.5rem; } .fi-simple-layout .fi-logo { height: 4rem !important; margin: 0 0 2.5rem; } .fi-simple-layout .winik-lockup-nome { margin-left: 1rem; } .fi-simple-layout .winik-lockup-one { font-size: 1.7rem; margin-left: 0.7rem; } /* Tipografia e campos claros sobre o card escuro. */ .fi-simple-main .fi-header-heading { color: #F4F4F5; } .fi-simple-main .fi-header-subheading { color: #A1A1AA; } .fi-simple-main label, .fi-simple-main .fi-fo-field-wrp-label > * { color: #E4E4E7; } .fi-simple-main .fi-input-wrp { background-color: rgb(255 255 255 / 0.05); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14); } .fi-simple-main .fi-input-wrp:focus-within { box-shadow: 0 0 0 2px rgb(221 191 126 / 0.65); } .fi-simple-main .fi-input { color: #F4F4F5; caret-color: var(--winik-dourado); } .fi-simple-main .fi-input::placeholder { color: #71717A; } .fi-simple-main .fi-input-wrp .fi-icon-btn { color: #A1A1AA; } /* Botão de entrar: o ÚNICO botão dourado do painel (CTA da marca). Os pares html.dark existem para vencer o override preto/branco dos botões primários (que no dark tem especificidade maior que esta regra clara). */ .fi-simple-main .fi-btn-color-primary, html.dark .fi-simple-main .fi-btn-color-primary { background-color: var(--winik-dourado); color: #131313; } .fi-simple-main .fi-btn-color-primary:hover, html.dark .fi-simple-main .fi-btn-color-primary:hover { background-color: #E7CD94; } /* ==================== TERMOS DO CONTRATO (infolist) ==================== O Filament v3 NÃO compila as classes de tipografia (@tailwindcss/typography 'prose' etc.), então o HTML dos termos é estilizado aqui, escopado sob .contrato-termos, para não vazar sobre o resto do painel. */ .contrato-termos { line-height: 1.6; font-size: 0.925rem; color: inherit; word-break: break-word; } .contrato-termos h2 { font-size: 1.15rem; font-weight: 700; color: #1F2937; margin: 1.1em 0 0.4em; } .contrato-termos h3 { font-size: 1.02rem; font-weight: 700; color: #374151; margin: 0.9em 0 0.35em; } html.dark .contrato-termos h2 { color: var(--winik-dourado); } html.dark .contrato-termos h3 { color: #cbd5e1; } .contrato-termos p { margin: 0.5em 0; } .contrato-termos ul, .contrato-termos ol { margin: 0.5em 0 0.5em 1.25em; padding-left: 1em; } .contrato-termos ul { list-style: disc; } .contrato-termos ol { list-style: decimal; } .contrato-termos li { margin: 0.25em 0; } .contrato-termos a { color: var(--winik-dourado-texto); text-decoration: underline; } html.dark .contrato-termos a { color: var(--winik-dourado); } .contrato-termos strong { font-weight: 700; } .contrato-termos em { font-style: italic; } .contrato-termos blockquote { margin: 0.6em 0; padding: 0.4em 0.9em; border-inline-start: 3px solid var(--winik-dourado-escuro); background: rgba(176, 141, 87, 0.06); border-radius: 6px; } .contrato-termos-vazio { color: #94a3b8; font-style: italic; } /* ==================== ANEXOS ASSINADOS (infolist) ==================== */ .contrato-anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .contrato-anexos a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--winik-dourado-texto); font-weight: 600; text-decoration: none; word-break: break-word; } .contrato-anexos a:hover { text-decoration: underline; } .contrato-anexos svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } html.dark .contrato-anexos a { color: var(--winik-dourado); } /* ==================== LISTAS DE CONTAS: LAYOUT + INDICADORES ==================== */ /* Tabela à esquerda, cards de resumo por status à direita (espaço sobrando). */ .contas-layout { display: flex; gap: 1.25rem; align-items: flex-start; } .contas-principal { flex: 1 1 0%; min-width: 0; } .contas-indicadores { flex: 0 0 232px; display: flex; flex-direction: column; gap: 0.65rem; position: sticky; top: 4.5rem; } .contas-indicadores-titulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #64748b; } html.dark .contas-indicadores-titulo { color: #94a3b8; } .contas-indicadores-periodo { font-size: 0.78rem; color: #94a3b8; margin-top: -0.45rem; } html.dark .contas-indicadores-periodo { color: #64748b; } .conta-ind-card { background: #fff; border: 1px solid rgba(3, 7, 18, 0.08); border-inline-start: 3px solid var(--ind-cor, #94a3b8); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(3, 7, 18, 0.05); padding: 0.7rem 0.9rem; } html.dark .conta-ind-card { /* Grafite NEUTRO (zinc-900), não o gray-900 azulado do Tailwind — casa com os cards nativos do Filament (gray = Zinc na paleta do painel). */ background: #18181B; border-color: rgba(255, 255, 255, 0.10); border-inline-start-color: var(--ind-cor, #9A9AA2); } .conta-ind-topo { display: flex; align-items: center; gap: 0.45rem; } .conta-ind-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--ind-cor, #94a3b8); flex-shrink: 0; } .conta-ind-rotulo { font-size: 0.8rem; font-weight: 600; color: #475569; flex: 1 1 auto; min-width: 0; } html.dark .conta-ind-rotulo { color: #cbd5e1; } .conta-ind-qtd { font-size: 0.72rem; font-weight: 700; color: #475569; background: rgba(100, 116, 139, 0.12); border-radius: 9999px; padding: 0.05rem 0.5rem; } html.dark .conta-ind-qtd { color: #cbd5e1; background: rgba(148, 163, 184, 0.15); } .conta-ind-valor { margin-top: 0.35rem; font-size: 1.05rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; } html.dark .conta-ind-valor { color: #f1f5f9; } /* Telas estreitas: cards viram uma grade compacta ACIMA da tabela. */ @media (max-width: 1150px) { .contas-layout { flex-direction: column-reverse; } .contas-indicadores { position: static; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; } .contas-indicadores-titulo, .contas-indicadores-periodo { grid-column: 1 / -1; } .contas-indicadores-periodo { margin-top: -0.35rem; } } /* ========================================================================== DASHBOARD EXECUTIVO — aproveitamento da tela larga e acabamento (redesign de 2026-07-20, a partir do print anotado pelo dono) ========================================================================== */ /* [A] LARGURA. A largura total vem do PAINEL (maxContentWidth(Full) no AdminPanelProvider) e o teto global de 1880px vive no bloco "APROVEITAMENTO DE TELA" no fim deste arquivo. Este seletor permanece pelo ajuste fino via `--dash-largura-max` e como lembrete: `.fi-dashboard-page` é DESCENDENTE de `.fi-main` (layout/index.blade.php envolve page/index.blade) — `.fi-dashboard-page .fi-main` seria seletor morto. 1880px = 4 cartões de KPI a ~445px + 3 gaps de 24px. Em 1920 com a sidebar recolhida a área útil fica abaixo disso, ou seja, o teto NÃO corta nada na tela do dono — ele só engaja em monitores acima de ~2100px. Para liberar de vez: trocar por `none`. */ .fi-dashboard-page { max-width: var(--dash-largura-max, 1880px); margin-inline: auto; } /* [I] Numerais tabulares de verdade. A classe `tabular-nums` estava escrita em 3 blades e NÃO existe no CSS compilado do Filament — estava inerte, e as colunas de dinheiro "dançavam" a cada dígito. */ .fi-wi { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* [D] ALTURA CASADA. Um widget de 5 colunas ao lado de um de 7 terminava mais curto e deixava o buraco que o dono circulou. O item do grid já estica (stretch); o que faltava era a corrente de altura chegar até o conteúdo da section. As classes REAIS do Filament 3.3 são .fi-section / .fi-section-content-ctn / .fi-section-content (`.fi-se*` é nomenclatura da v4 e entraria como no-op silencioso). */ .dash-card-cheio, .dash-card-cheio > .fi-section { display: flex; flex-direction: column; height: 100%; } .dash-card-cheio .fi-section-content-ctn { flex: 1 1 auto; display: flex; flex-direction: column; } .dash-card-cheio .fi-section-content { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.75rem; } /* O rodapé (link "Ver contas financeiras →") cola na base, alinhado com o rodapé do card vizinho. */ .dash-card-cheio .dash-rodape { margin-top: auto; padding-top: 0.75rem; } /* CHIP DA EMPRESA ATIVA na topbar, ao lado da marca. */ .winik-empresa { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.7rem 0 0.35rem; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 999px; background: rgba(15, 23, 42, 0.04); /* Teto menor desde 22/08: o chip saiu do lado da marca e passou a dividir a direita com a busca, as notificacoes e o menu do usuario. 22rem ali empurrava o resto. O nome que nao couber e cortado com reticencias pela regra de .winik-empresa-nome, e o nome inteiro segue no title e no cabecalho do menu. */ max-width: 14rem; } html.dark .winik-empresa { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); } .winik-empresa-botao { cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .winik-empresa-botao:hover { background: rgba(221, 191, 126, 0.14); border-color: rgba(176, 141, 87, 0.55); } html.dark .winik-empresa-botao:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(221, 191, 126, 0.45); } /* Inicial da empresa no dourado da marca — o toque WINIK da topbar. */ .winik-empresa-inicial { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 0.35rem; background: var(--winik-dourado); color: #131313; font-size: 0.72rem; font-weight: 700; line-height: 1; flex: 0 0 auto; } .winik-empresa-nome { font-size: 0.8125rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.dark .winik-empresa-nome { color: #E4E4E7; } .winik-empresa-seta { width: 0.9rem; height: 0.9rem; color: #64748b; flex: 0 0 auto; } /* Em telas estreitas o nome sai e fica só a inicial, para não empurrar a busca e os ícones da topbar. */ @media (max-width: 640px) { .winik-empresa-nome { display: none; } .winik-empresa { padding-inline: 0.35rem; } } /* Composição do caixa: uma barra empilhada com a cor de cada conta. */ .dash-composicao { display: flex; width: 100%; height: 0.5rem; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, 0.18); } .dash-composicao-fatia { display: block; height: 100%; } /* Projeção de caixa do período. */ .dash-projecao { border-top: 1px solid rgba(148, 163, 184, 0.22); padding-top: 0.7rem; } html.dark .dash-projecao { border-top-color: rgba(255, 255, 255, 0.10); } .dash-projecao-titulo { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin-bottom: 0.45rem; } html.dark .dash-projecao-titulo { color: #94a3b8; } .dash-projecao-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; color: #475569; padding: 0.12rem 0; } html.dark .dash-projecao-linha { color: #cbd5e1; } .dash-projecao-total { margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px dashed rgba(148, 163, 184, 0.35); font-weight: 700; color: #0f172a; } html.dark .dash-projecao-total { color: #f1f5f9; border-top-color: rgba(255, 255, 255, 0.14); } .dash-valor { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; font-weight: 600; } /* O respiro entre a linha "rótulo + valor" e a barra logo abaixo. Existe como classe própria porque `mb-1` NÃO está no CSS compilado do Filament — `mb-2` e `mb-4` estão, `mb-1` e `mb-3` não, e a ausência é só o que o Filament por acaso usou. Sem build de front aqui, utilitária que ele não gerou é no-op silencioso: o valor encostava na barra e nada acusava. */ .dash-linha-topo { margin-bottom: 0.25rem; } .dash-positivo { color: var(--winik-verde); } html.dark .dash-positivo { color: var(--winik-verde-claro); } /* Negativo/saída em VINHO (o mesmo #A85E67 dos gráficos): alerta sem o vermelho vivo, harmônico com o dourado da identidade. */ .dash-negativo { color: var(--winik-vinho); } html.dark .dash-negativo { color: var(--winik-vinho-claro); } /* Trilho do bloco "Contas a pagar": barra + marca de ritmo (bullet graph). */ .dash-trilho { position: relative; width: 100%; height: 0.625rem; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, 0.18); } .dash-trilho-preenchido { height: 100%; border-radius: 999px; } .dash-trilho-ritmo { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #475569; opacity: 0.8; border-radius: 2px; } html.dark .dash-trilho-ritmo { background: #e2e8f0; } /* Resultado do período: barra de ponta a ponta, zero no meio. */ .dash-resultado { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid rgba(148, 163, 184, 0.22); } html.dark .dash-resultado { border-top-color: rgba(255, 255, 255, 0.10); } .dash-resultado-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .dash-resultado-titulo { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; } html.dark .dash-resultado-titulo { color: #94a3b8; } /* O percentual que a barra representa, na mesma cor do preenchimento. */ .dash-resultado-percentual { font-size: 1.05rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .dash-resultado-barra { position: relative; width: 100%; height: 0.875rem; border-radius: 999px; background: rgba(148, 163, 184, 0.16); overflow: hidden; } html.dark .dash-resultado-barra { background: rgba(255, 255, 255, 0.08); } .dash-resultado-preenchido { position: absolute; top: 0; bottom: 0; border-radius: 999px; } /* Zero: a referência que dá sentido ao lado em que a barra cresce. */ .dash-resultado-zero { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #64748b; z-index: 2; } html.dark .dash-resultado-zero { background: #cbd5e1; } /* Onde o período fecha se tudo que está lançado for liquidado. */ .dash-resultado-previsto { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: repeating-linear-gradient( to bottom, currentColor 0 3px, transparent 3px 6px ); color: #475569; z-index: 3; } html.dark .dash-resultado-previsto { color: #e2e8f0; } .dash-resultado-escalas { display: flex; justify-content: space-between; margin-top: 0.3rem; font-size: 0.6875rem; font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; } .dash-resultado-valor { margin-top: 0.5rem; font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .dash-resultado-legenda { margin-top: 0.1rem; font-size: 0.6875rem; color: #94a3b8; } /* ==================== PLANO DE CONTAS (lista de categorias) ==================== */ /* Recuo da subcategoria sob a principal na tabela. Classe própria porque valores arbitrários do Tailwind (pl-[24px] etc.) não existem no CSS compilado do Filament. */ .plano-contas-sub { padding-inline-start: 1.5rem; } /* ==================== FLUXO DE CAIXA (previsto × realizado) ==================== */ /* Numerais tabulares nas duas tabelas da página: a classe `tabular-nums` não existe no CSS compilado do Filament, então a variante fica aqui, na tabela inteira, e as colunas de dinheiro não "dançam" a cada dígito. */ .fluxo-tabela { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Valores de entrada/resultado positivo no verde da marca: `text-success-*` também não é compilado pelo Filament (`text-danger-*` é, e segue no blade). No dark, o verde-claro da paleta para manter contraste sobre fundo escuro. */ .fluxo-valor-positivo { color: var(--winik-verde); } html.dark .fluxo-valor-positivo { color: var(--winik-verde-claro); } /* ==================== DRE GERENCIAL: utilitários fora do CSS compilado ==================== */ /* O CSS do Filament embarca só as classes que o painel usa; left-0, uppercase, tracking-wide, mt-4, border-l e hover:text-* não existem lá. As regras equivalentes vivem aqui, penduradas na .dre-tabela e em classes próprias. */ .dre-tabela-wrapper { margin-top: 1rem; } .dre-tabela thead tr { text-transform: uppercase; letter-spacing: 0.025em; } /* Coluna de rótulos fixa no scroll horizontal: o blade traz `sticky`/`z-10` (existem no compilado), mas o offset `left-0` não — sem ele o sticky não gruda. */ .dre-tabela th:first-child, .dre-tabela td:first-child { left: 0; } /* Separador vertical da coluna Acumulado (largura; a cor segue no blade). */ .dre-tabela .dre-col-acum { border-left-width: 1px; } /* Hover dos botões Realizado/Projetado (só o inativo recebe a classe). */ .dre-cenario-btn:hover { color: rgb(17 24 39); } html.dark .dre-cenario-btn:hover { color: #fff; } /* Fluxo de caixa: separador da linha de totais (border-t-2 não é compilado). */ .fluxo-total-row { border-top-width: 2px; } /* Conector visual da hierarquia no Plano de Contas: barra dourada à esquerda das linhas de subcategoria (classe aplicada na via recordClasses). Linhas adjacentes formam o trilho contínuo sob a principal. */ .plano-contas-sub-row > td:first-child { border-inline-start: 3px solid var(--winik-dourado-escuro); } /* ==================== CAIXA / TURNO: utilitários fora do CSS compilado ==================== */ /* A tela do turno nasceu escrita em utilities que o Filament não compila — `text-success-*`, `text-warning-*`, `sm:grid-cols-2`, `pr-4` e `mt-4` —, e classe ausente não quebra nada: só desalinha e apaga cor, em silêncio. Sem este bloco os dois números do turno sobem sem cor nenhuma e os cartões empilham. É o mesmo achado do Fluxo de Caixa e do DRE, acima. */ .caixa-valor-entrada { color: var(--winik-verde); } html.dark .caixa-valor-entrada { color: var(--winik-verde-claro); } /* ⚠ Saída do turno é ÂMBAR e não vinho: sangria e suprimento são atos normais do balcão, e gastar o vermelho neles não deixaria vermelho para a falta de caixa, logo abaixo. Mas o âmbar da marca sobre fundo branco fica em ~2:1 e some — mesma medição do `.os-cab-val-aberto` —, então o claro usa o dourado de texto e só o escuro recebe o âmbar cheio. */ .caixa-valor-saida { color: var(--winik-dourado-texto); } html.dark .caixa-valor-saida { color: var(--winik-ambar); } /* Sobra no fechamento, no mesmo verde do resto do sistema. A FALTA continua no blade com `text-danger-*`, que o Filament compila (e o `bateu` fica cinza). */ .caixa-valor-sobra { color: var(--winik-verde); } html.dark .caixa-valor-sobra { color: var(--winik-verde-claro); } /* O respiro sob os cartões e sob o aviso do fechamento cego (era `mt-4`). */ .caixa-nota { margin-top: 1rem; } /* Respiro entre as colunas dos turnos fechados (era `pr-4` em cada célula). ⚠ A última coluna fica FORA de propósito: é a da direita, alinhada à direita, e o blade nunca a paddou — incluí-la deslocaria a diferença para dentro. */ .caixa-tabela th:not(:last-child), .caixa-tabela td:not(:last-child) { padding-right: 1rem; } /* A divisória das linhas no escuro (`dark:border-gray-800` não é compilado). Sem isto a linha herda o cinza-100 do claro e vira um risco branco no dark. */ html.dark .caixa-tabela tbody tr { border-color: #1F2937; } /* A explicação de quem fechou o turno, sob a linha do turno (07/09/2026). ⚠ Existe porque `pb-2` NÃO é compilado neste projeto — o pré-portão a pegou antes de subir. Utilitária do Tailwind que o Filament não usou internamente é no-op perfeito: a tela sobe e o espaçamento simplesmente não acontece. */ .caixa-observacao { padding-bottom: 0.5rem; } /* ==================== RECEBIMENTOS POR FORMA (Fase 4) ==================== */ /* Mesma doutrina do bloco do Caixa acima: o que o Filament não compila mora aqui, com nome próprio, em vez de utility redefinida à mão. */ .rel-forma-tabela { /* Numerais tabulares: são quatro colunas de dinheiro lidas em coluna, e sem isto os dígitos "dançam" a cada linha — o mesmo motivo do .fluxo-tabela. */ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .rel-forma-tabela th:not(:last-child), .rel-forma-tabela td:not(:last-child) { padding-right: 1rem; } html.dark .rel-forma-tabela tbody tr { border-color: #1F2937; } /* A linha de total, separada por um traço mais forte. `border-t-2` não é compilado (a mesma ausência que o .fluxo-total-row cobre). */ .rel-forma-total { border-top-width: 2px; border-top-style: solid; border-color: rgb(209 213 219); } html.dark .rel-forma-total { border-color: #374151; } /* A taxa é custo: vinho, o mesmo par que o resto do sistema usa para valor negativo (.os-cab-val-negativo, .os-cab-det-val-atraso). */ .rel-forma-taxa { color: var(--winik-vinho); } html.dark .rel-forma-taxa { color: var(--winik-vinho-claro); } /* Espaço entre a tabela e a nota de rodapé (mt-4 não é compilado). */ .rel-forma-nota { margin-top: 1rem; } /* O Vale, abaixo do total e fora dele (docs/PLANO_VALE.md §5): o gasto com o crédito de devolução não é dinheiro que entrou, e a linha se lê à parte. */ .rel-forma-vale { color: #64748b; } html.dark .rel-forma-vale { color: #94a3b8; } .rel-forma-vale-rotulo { margin-left: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Os dois campos de data do filtro. O painel não compila `w-full`+`rounded-md` para input solto fora de um componente do Filament. */ .rel-forma-data { margin-top: 0.25rem; width: 100%; border: 1px solid rgb(209 213 219); border-radius: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: transparent; color: inherit; } html.dark .rel-forma-data { border-color: #374151; } /* ==================== APROVEITAMENTO DE TELA (painel inteiro) ==================== */ /* O painel declara maxContentWidth(Full) no AdminPanelProvider: o `.fi-main` troca `max-w-7xl` (1280px) por `max-w-full` e o conteúdo passa a acompanhar a largura do monitor em TODAS as páginas — em 1366/1440/1536/1920 a área útil cresce sozinha. O teto de leitura fica aqui: 1880px, o mesmo já usado pelo dashboard, para monitores ultrawide não esticarem linha de texto ao infinito. O `.fi-main` já traz `mx-auto`, então acima do teto ele centraliza. */ .fi-main { max-width: 117.5rem; /* 1880px */ } /* Exceção deliberada: CRIAR/EDITAR seguem no teto clássico de 1280px — campo de digitação esticado até 1880px piora o preenchimento (o olho viaja entre rótulo e campo). Listas, views e relatórios é que ganham a largura. A classe fica na página (descendente do .fi-main), mesmo padrão do dashboard. */ .fi-page.fi-resource-create-record-page, .fi-page.fi-resource-edit-record-page { max-width: 80rem; /* 1280px */ margin-inline: auto; } /* ==================== ALINHAMENTO DO RÓTULO INLINE ==================== Com inlineLabel o Filament faz a coluna do rótulo ser 1/3 da LARGURA DO CAMPO (sm:grid-cols-3). Um campo full-width (Nome/Descrição) fica com rótulo largo e o input começa mais à direita do que os campos de meia-largura das linhas de baixo — desalinha. Fixando a coluna do rótulo numa largura CONSTANTE, o input de todos os campos alinha na mesma posição, mais à esquerda. Só em ≥640px (abaixo disso o form empilha rótulo sobre campo). */ @media (min-width: 640px) { .fi-fo-field-wrp .grid.sm\:grid-cols-3 { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); } } /* ==================== DRE GERENCIAL: barra, cards, árvore e gráfico ==================== */ /* Estende o bloco DRE acima. Cada regra aqui existe porque o utilitário Tailwind equivalente NÃO está no CSS compilado do Filament (grade de 3 colunas, alturas por tipo de linha, recuo por nível, dropdown ancorado, valores arbitrários) — usar a classe morta no blade não pintaria nada. Cores: verde e azul da marca (--winik-*) mais um âmbar dedicado só à 3ª série do gráfico, que precisa se distinguir de verde e azul. */ /* --- Barra de topo: botões de ícone (+ e calendário) --- */ .dre-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: rgb(107 114 128); background: transparent; border: 1px solid rgb(229 231 235); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .dre-icon-btn:hover { background: rgb(243 244 246); color: rgb(31 41 55); } .dre-icon-btn svg { width: 1.15rem; height: 1.15rem; } .dre-icon-btn-ativo { color: var(--winik-dourado-texto); border-color: var(--winik-dourado-escuro); } html.dark .dre-icon-btn { color: rgb(156 163 175); border-color: rgb(255 255 255 / 0.1); } html.dark .dre-icon-btn:hover { background: rgb(255 255 255 / 0.06); color: #fff; } html.dark .dre-icon-btn-ativo { color: var(--winik-dourado); border-color: var(--winik-dourado); } /* --- Dropdown ancorado (expansão e exercício) --- */ .dre-menu { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 30; min-width: 14rem; padding: 0.375rem; background: #fff; border: 1px solid rgb(229 231 235); border-radius: 0.625rem; box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.25); } .dre-menu[x-cloak] { display: none !important; } html.dark .dre-menu { background: #18181B; border-color: rgb(255 255 255 / 0.1); } .dre-menu-titulo { padding: 0.25rem 0.5rem 0.375rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(107 114 128); } html.dark .dre-menu-titulo { color: rgb(156 163 175); } .dre-menu-item { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.375rem 0.5rem; border-radius: 0.375rem; text-align: left; font-size: 0.8125rem; color: rgb(55 65 81); background: transparent; cursor: pointer; } .dre-menu-item:hover { background: rgb(243 244 246); } .dre-menu-item-ativo { color: var(--winik-dourado-texto); font-weight: 600; } html.dark .dre-menu-item { color: rgb(209 213 219); } html.dark .dre-menu-item:hover { background: rgb(255 255 255 / 0.06); } html.dark .dre-menu-item-ativo { color: var(--winik-dourado); } .dre-menu-check { display: inline-flex; flex: none; width: 1rem; justify-content: center; color: var(--winik-dourado-texto); } html.dark .dre-menu-check { color: var(--winik-dourado); } .dre-menu-anos { max-height: 15rem; overflow-y: auto; } /* --- Cards de KPI (as classes do Tailwind não são compiladas; o grid é aqui) --- Quantas colunas cabem é decidido pelo CONTAINER, não pelo viewport: a mesma janela de 1280px dá larguras diferentes conforme a barra lateral esteja aberta, recolhida ou ausente (menu no topo), e uma media query não enxerga nada disso. Com auto-fit a fila cai sozinha de 4 para 3, 2 e 1 coluna. ⚠ O piso NÃO é um número mágico calibrado no faturamento de uma empresa: o valor de um card depende da ordem de grandeza do cliente, e "R$ 1.234.567,89" é quase 50% mais largo que "R$ 11.580,00". Quem garante a legibilidade é a regra do `.dre-card-linha` logo abaixo — o número nunca quebra, o secundário é que desce de linha. O min(...,100%) evita estouro em tela estreita. */ .dre-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; } .dre-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; } .dre-card-titulo { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(107 114 128); } html.dark .dre-card-titulo { color: rgb(156 163 175); } /* ⚠ `nowrap`: um valor monetário partido ao meio ("R$" numa linha, "11.580,00" na outra) não é um card apertado, é um card ilegível. O número é indivisível e a linha abaixo é que se acomoda. */ .dre-card-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Líquido (grande, à esquerda) e o bruto de referência (menor, à direita). Quando os dois não cabem lado a lado, o bruto DESCE para a própria linha — `margin-left: auto` o mantém encostado à direita nos dois casos. */ .dre-card-linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 0.75rem; } .dre-card-bruto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; margin-left: auto; white-space: nowrap; } .dre-card-bruto-rotulo { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(156 163 175); } html.dark .dre-card-bruto-rotulo { color: rgb(107 114 128); } .dre-card-bruto-valor { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; } .dre-card-sub { font-size: 0.6875rem; color: rgb(156 163 175); } html.dark .dre-card-sub { color: rgb(107 114 128); } .dre-tom-neutro { color: rgb(17 24 39); } .dre-tom-positivo { color: var(--winik-verde); } .dre-tom-negativo { color: var(--winik-vinho); } html.dark .dre-tom-neutro { color: #fff; } html.dark .dre-tom-positivo { color: var(--winik-verde-claro); } html.dark .dre-tom-negativo { color: var(--winik-vinho-claro); } /* --- Tabela: coluna LINHA fixa em 240px + árvore recolhível --- */ .dre-tabela th:first-child, .dre-tabela td:first-child { width: 240px; min-width: 240px; max-width: 240px; } .dre-tabela tbody td { padding-block: 0.2rem; vertical-align: middle; } .dre-linha-btn, .dre-linha-plain { display: flex; align-items: center; gap: 0.25rem; width: 100%; background: transparent; text-align: left; color: inherit; font: inherit; } .dre-linha-btn { cursor: pointer; } .dre-linha-btn:hover .dre-lin-label { text-decoration: underline; text-underline-offset: 2px; } .dre-seta { display: inline-flex; flex: none; width: 0.85rem; justify-content: center; font-size: 0.6rem; color: rgb(107 114 128); } html.dark .dre-seta { color: rgb(156 163 175); } .dre-lin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dre-lin-0 { padding-inline-start: 0; } .dre-lin-1 { padding-inline-start: 1rem; } .dre-lin-2 { padding-inline-start: 2rem; } /* Alturas e pesos por tipo de linha (do design). */ .dre-tr-receita > td { height: 38px; } .dre-tr-deducao > td { height: 34px; } .dre-tr-categoria > td { height: 32px; } .dre-tr-subcategoria > td { height: 28px; } .dre-tr-subtotal > td { height: 38px; } .dre-tr-final > td { height: 42px; } .dre-tr-receita, .dre-tr-subtotal, .dre-tr-final { font-weight: 700; } .dre-tr-deducao { font-weight: 600; } .dre-tr-categoria { font-weight: 500; } .dre-tr-subcategoria { font-weight: 400; } /* ACUM. levemente destacada nas linhas de detalhe (subtotais/final já têm realce). */ .dre-tr-receita > .dre-col-acum, .dre-tr-deducao > .dre-col-acum, .dre-tr-categoria > .dre-col-acum, .dre-tr-subcategoria > .dre-col-acum { background-color: rgb(2 6 23 / 0.035); } html.dark .dre-tr-receita > .dre-col-acum, html.dark .dre-tr-deducao > .dre-col-acum, html.dark .dre-tr-categoria > .dre-col-acum, html.dark .dre-tr-subcategoria > .dre-col-acum { background-color: rgb(255 255 255 / 0.04); } /* --- Gráfico "Evolução mensal" (SVG puro; barras em HTML + polyline na sobreposição) --- */ .dre-chart { --dre-margem: #D97706; padding: 1.25rem 1.25rem 1rem; } html.dark .dre-chart { --dre-margem: #FBBF24; } .dre-chart-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .dre-chart-titulo { font-size: 0.875rem; font-weight: 700; color: rgb(31 41 55); } html.dark .dre-chart-titulo { color: #fff; } .dre-chart-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .dre-legenda-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: rgb(75 85 99); } html.dark .dre-legenda-item { color: rgb(209 213 219); } .dre-legenda-cor { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; flex: none; } .dre-legenda-linha { display: inline-block; width: 1rem; height: 0; border-top: 2px solid var(--dre-margem); flex: none; } /* Séries do gráfico do DRE: o mesmo verde sóbrio dos demais gráficos e petróleo no lugar do azul para o resultado. */ .dre-legenda-receita { background: #4E8F72; } .dre-legenda-resultado { background: var(--winik-petroleo); } .dre-chart-scroll { overflow-x: auto; } .dre-chart-area { position: relative; min-width: 640px; } .dre-chart-plot { position: relative; height: 210px; margin-top: 1.5rem; } .dre-chart-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgb(148 163 184 / 0.6); } .dre-chart-cols { position: absolute; inset: 0; display: flex; align-items: stretch; } .dre-chart-col { position: relative; flex: 1 1 0; } .dre-chart-col-vazio { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgb(148 163 184 / 0.08) 5px, rgb(148 163 184 / 0.08) 10px); } .dre-bar { position: absolute; min-height: 1px; border-radius: 3px 3px 0 0; } .dre-bar-receita { left: 18%; width: 28%; background: #4E8F72; } .dre-bar-resultado { right: 18%; width: 28%; background: var(--winik-petroleo); } .dre-bar-neg { border-radius: 0 0 3px 3px; } .dre-bar-resultado.dre-bar-neg { background: var(--winik-vinho); } html.dark .dre-bar-resultado.dre-bar-neg { background: var(--winik-vinho-claro); } .dre-bar-rotulo { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; font-size: 0.5625rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .dre-bar-rotulo-baixo { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 2px; } .dre-bar-rotulo-rec { color: var(--winik-verde); } .dre-bar-rotulo-res { color: var(--winik-petroleo); } .dre-bar-rotulo-neg { color: var(--winik-vinho); } html.dark .dre-bar-rotulo-rec { color: var(--winik-verde-claro); } html.dark .dre-bar-rotulo-res { color: #8FB5BC; } html.dark .dre-bar-rotulo-neg { color: var(--winik-vinho-claro); } .dre-chart-linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .dre-linha-margem { fill: none; stroke: var(--dre-margem); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dre-ponto-margem { position: absolute; width: 6px; height: 6px; border-radius: 9999px; background: var(--dre-margem); transform: translate(-50%, -50%); } .dre-chart-eixo { display: flex; margin-top: 0.5rem; } .dre-chart-eixo-item { flex: 1 1 0; text-align: center; font-size: 0.625rem; color: rgb(107 114 128); } html.dark .dre-chart-eixo-item { color: rgb(156 163 175); } /* ==================== CAIXAS E BANCOS (extrato consolidado) ==================== */ .razao-busca { max-width: 26rem; } .razao-quadro { background: #fff; border: 1px solid rgba(3, 7, 18, 0.08); border-radius: 0.75rem; overflow-x: auto; } html.dark .razao-quadro { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.09); } .razao-tabela { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .razao-tabela thead th { text-align: left; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(3, 7, 18, 0.08); white-space: nowrap; } html.dark .razao-tabela thead th { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.09); } .razao-tabela tbody td { padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(3, 7, 18, 0.05); color: #334155; vertical-align: top; } html.dark .razao-tabela tbody td { color: #cbd5e1; border-bottom-color: rgba(255, 255, 255, 0.06); } .razao-tabela tbody tr:last-child td { border-bottom: 0; } .razao-tabela tbody tr:hover td { background: rgba(176, 141, 87, 0.06); } html.dark .razao-tabela tbody tr:hover td { background: rgba(255, 255, 255, 0.03); } .razao-col-data { white-space: nowrap; font-variant-numeric: tabular-nums; } .razao-col-conta, .razao-col-tipo { white-space: nowrap; } .razao-col-categoria { white-space: nowrap; max-width: 16rem; } .razao-col-valor { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; } .razao-col-acoes { text-align: right; white-space: nowrap; width: 1%; } /* Título de coluna: ordena no clique, filtra no funil. O já é uppercase/letter-spacing, então os botões só herdam. */ .razao-th { display: inline-flex; align-items: center; gap: 0.15rem; } .razao-th-direita { justify-content: flex-end; width: 100%; } .razao-ordenar { display: inline-flex; align-items: center; gap: 0.15rem; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0.1rem 0.15rem; border-radius: 0.3rem; cursor: pointer; } .razao-ordenar:hover { color: var(--winik-dourado-texto); background: rgba(176, 141, 87, 0.10); } html.dark .razao-ordenar:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); } .razao-ordenar-ativa { color: var(--winik-dourado-texto); } html.dark .razao-ordenar-ativa { color: var(--winik-dourado); } /* A seta some do fluxo visual quando a coluna não ordena, mas continua no lugar para o título não pular ao trocar de coluna. */ .razao-ordenar-icone { width: 0.85rem; height: 0.85rem; opacity: 0.35; } .razao-ordenar-ativa .razao-ordenar-icone { opacity: 1; } .razao-funil { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0.2rem; border-radius: 0.3rem; color: inherit; opacity: 0.45; cursor: pointer; } .razao-funil:hover { opacity: 1; color: var(--winik-dourado-texto); background: rgba(176, 141, 87, 0.10); } html.dark .razao-funil:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); } .razao-funil-icone { width: 0.8rem; height: 0.8rem; } /* "Principal > Subcategoria" é longo por natureza; corta com reticências em vez de esticar a coluna e empurrar o valor para fora da tela. */ .razao-categoria { display: block; overflow: hidden; text-overflow: ellipsis; } .razao-sem-categoria { display: block; color: #94a3b8; font-style: italic; } html.dark .razao-sem-categoria { color: #64748b; } /* Abertura e fechamento: fixas no topo e no rodapé, com fundo próprio para não se confundirem com movimento do extrato. */ .razao-linha-saldo td { background: rgba(176, 141, 87, 0.08); font-weight: 600; } html.dark .razao-linha-saldo td { background: rgba(176, 141, 87, 0.14); } .razao-tabela tbody tr.razao-linha-saldo:hover td { background: rgba(176, 141, 87, 0.14); } html.dark .razao-tabela tbody tr.razao-linha-saldo:hover td { background: rgba(176, 141, 87, 0.2); } /* ⚠ UMA LINHA POR MOVIMENTAÇÃO (pedido do dono, 20/08). A célula da descrição empilhava QUATRO coisas em `display: block` — descrição, cliente, "Ref. à OS" e "por Fulano" — e levava a linha a 115px. O cliente virou coluna; o resto ficou na mesma linha, e o que não couber sai com reticências (o `title` no `td` guarda o texto inteiro). */ .razao-descricao { display: inline; font-weight: 600; color: #0f172a; } html.dark .razao-descricao { color: #f1f5f9; } .razao-col-descricao { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O cliente/fornecedor, agora em coluna própria e no tom do dado, não mais em letra miúda de segunda linha. */ .razao-col-contraparte { white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; } .razao-contraparte { color: #334155; } html.dark .razao-contraparte { color: #cbd5e1; } .razao-sem-contraparte { color: #94a3b8; } html.dark .razao-sem-contraparte { color: #64748b; } .razao-etiqueta { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 9999px; background: rgba(100, 116, 139, 0.12); color: #475569; } html.dark .razao-etiqueta { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; } /* "Ref. à OS OS-0042" sob a descrição: de onde aquele dinheiro veio. Menor e mais discreto que a contraparte — é referência, não conteúdo da linha, e o olho tem de passar por ele só quando está procurando. O dourado da marca marca a versão clicável; sem permissão de OS o mesmo texto fica em cinza. */ /* Abas do extrato (Movimentações / Entradas / Saídas). Sublinhado dourado na ativa em vez de fundo preenchido: a tabela logo abaixo já é densa, e uma faixa cheia competiria com ela. */ .razao-abas { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(100, 116, 139, 0.22); } html.dark .razao-abas { border-bottom-color: rgba(255, 255, 255, 0.10); } .razao-aba { padding: 0.4rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; } .razao-aba:hover { color: #0f172a; } html.dark .razao-aba { color: #94a3b8; } html.dark .razao-aba:hover { color: #f1f5f9; } .razao-aba-ativa { color: var(--winik-dourado-texto); border-bottom-color: var(--winik-dourado-escuro); } html.dark .razao-aba-ativa { color: var(--winik-dourado); border-bottom-color: var(--winik-dourado); } /* Fichas dos filtros ativos, cada uma com o próprio X. */ .razao-fichas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } .razao-ficha { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; padding: 0.15rem 0.3rem 0.15rem 0.55rem; border-radius: 9999px; background: rgba(100, 116, 139, 0.12); color: #334155; } html.dark .razao-ficha { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; } .razao-ficha-x { line-height: 1; font-size: 0.95rem; padding: 0 0.2rem; border-radius: 9999px; color: #64748b; background: none; cursor: pointer; } .razao-ficha-x:hover { color: #b91c1c; } html.dark .razao-ficha-x:hover { color: #fca5a5; } .razao-ficha-limpar { font-size: 0.75rem; font-weight: 600; color: var(--winik-dourado-texto); background: none; cursor: pointer; text-decoration: underline; } html.dark .razao-ficha-limpar { color: var(--winik-dourado); } /* Saldos por conta, no painel lateral. */ .razao-saldos { margin-top: 0.5rem; } .razao-saldos-titulo { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; margin-bottom: 0.35rem; } html.dark .razao-saldos-titulo { color: #94a3b8; } .razao-saldos-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid rgba(100, 116, 139, 0.12); } html.dark .razao-saldos-linha { border-bottom-color: rgba(255, 255, 255, 0.07); } /* A última linha do bloco não tem traço. "Vales em aberto" tem a nota logo depois da linha, e ali `:last-child` não a alcança: a linha seguida de nota também é a última. */ .razao-saldos-linha:last-child, .razao-saldos-linha:has(+ .razao-card-nota) { border-bottom: none; } .razao-saldos-nome { font-size: 0.8125rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.dark .razao-saldos-nome { color: #cbd5e1; } .razao-saldos-valor { font-size: 0.8125rem; font-weight: 600; color: #0f172a; white-space: nowrap; } html.dark .razao-saldos-valor { color: #f1f5f9; } /* Na mesma linha da descricao, separada por um ponto medio. */ .razao-origem { display: inline; font-size: 0.6875rem; color: #94a3b8; } .razao-origem::before { content: " · "; } html.dark .razao-origem { color: #64748b; } .razao-origem-link { color: var(--winik-dourado-texto); text-decoration: none; } .razao-origem-link:hover { text-decoration: underline; } html.dark .razao-origem-link { color: var(--winik-dourado); } /* Verde/vermelho do extrato: mesmos tons do fluxo de caixa, com o par claro para o tema escuro (a estilização base é html:not(.dark)). */ .razao-entrada { color: var(--winik-verde); } .razao-saida { color: var(--winik-vinho); } html.dark .razao-entrada { color: var(--winik-verde-claro); } html.dark .razao-saida { color: var(--winik-vinho-claro); } .razao-acao { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 0.5rem; color: #64748b; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .razao-acao:hover { background: rgba(176, 141, 87, 0.12); color: var(--winik-dourado-texto); } .razao-acao-perigo:hover { background: rgba(168, 94, 103, 0.14); color: var(--winik-vinho); } html.dark .razao-acao { color: #94a3b8; } html.dark .razao-acao:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; } .razao-acao-icone { width: 1.05rem; height: 1.05rem; } .razao-vazio { text-align: center; color: #64748b; padding: 1.75rem 0.75rem; } html.dark .razao-vazio { color: #94a3b8; } /* ── Mobile (≤640px): a razão de caixa vira uma pilha de cartões. Cada vira um cartão e os empilham como "rótulo → valor" pelo data-label do blade; a rolagem lateral some. --------------------------------------------- */ @media (max-width: 640px) { .razao-quadro { background: transparent; border: 0; border-radius: 0; overflow-x: visible; } html.dark .razao-quadro { background: transparent; } .razao-tabela, .razao-tabela tbody { display: block; width: 100%; } .razao-tabela thead { display: none; } .razao-tabela tbody tr { display: block; border: 1px solid rgba(3, 7, 18, 0.1); border-radius: 0.6rem; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; background: #fff; } html.dark .razao-tabela tbody tr { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); } .razao-tabela tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: auto; max-width: none; padding: 0.16rem 0; border: 0; white-space: normal; text-align: right; } .razao-tabela tbody td::before { content: attr(data-label); font-weight: 600; color: #64748b; text-align: left; flex: 0 0 auto; } html.dark .razao-tabela tbody td::before { color: #94a3b8; } .razao-tabela tbody td:not([data-label])::before { content: none; } /* Descrição = título do cartão. */ .razao-tabela tbody td.razao-col-descricao { display: block; text-align: left; padding-bottom: 0.35rem; margin-bottom: 0.35rem; border-bottom: 1px solid rgba(3, 7, 18, 0.07); } html.dark .razao-tabela tbody td.razao-col-descricao { border-bottom-color: rgba(255, 255, 255, 0.07); } /* Ações à direita, sem rótulo. */ .razao-tabela tbody td.razao-col-acoes { justify-content: flex-end; gap: 0.4rem; padding-top: 0.45rem; } .razao-categoria { display: inline; } /* Abertura e fechamento: cartão destacado, empilhado sem rótulos. */ .razao-tabela tbody tr.razao-linha-saldo { background: rgba(176, 141, 87, 0.08); border-color: rgba(176, 141, 87, 0.3); } .razao-tabela tbody tr.razao-linha-saldo td { display: block; text-align: left; background: transparent; padding: 0.1rem 0; } .razao-tabela tbody tr.razao-linha-saldo td::before { content: none; } .razao-tabela tbody tr.razao-linha-saldo td.razao-col-valor { font-weight: 700; margin-top: 0.15rem; } .razao-tabela tbody tr.razao-linha-saldo td.razao-col-acoes { display: none; } .razao-tabela tbody td.razao-vazio { display: block; text-align: center; } } .razao-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .razao-paginacao-info { font-size: 0.78rem; color: #64748b; } html.dark .razao-paginacao-info { color: #94a3b8; } .razao-paginacao-botoes { display: inline-flex; gap: 0.4rem; } .razao-paginacao-botao { font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(3, 7, 18, 0.12); color: #475569; background: #fff; cursor: pointer; } .razao-paginacao-botao:hover:not(:disabled) { background: rgba(176, 141, 87, 0.08); } .razao-paginacao-botao:disabled { opacity: 0.45; cursor: not-allowed; } html.dark .razao-paginacao-botao { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: #cbd5e1; } /* O par claro/escuro: #94a3b8 no claro dava contraste abaixo do AA para texto de 0.7rem; no escuro ele é o tom certo. */ .razao-card-nota { margin-top: 0.3rem; font-size: 0.7rem; color: #64748b; } html.dark .razao-card-nota { color: #94a3b8; } /* ==================== DASHBOARD: CARDS DA DOBRA DE CIMA ==================== */ /* Par "valor principal + valor de apoio" (recebido × previsto), na mesma forma dos cards de KPI do DRE: o secundário é menor e alinhado pela base. */ .kpi-par { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .kpi-par-principal, .kpi-par-secundario { min-width: 0; } .kpi-par-secundario { text-align: right; } .kpi-par-valor { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } html.dark .kpi-par-valor { color: #f8fafc; } .kpi-par-valor-menor { font-size: 1.05rem; font-weight: 700; line-height: 1.2; color: #475569; font-variant-numeric: tabular-nums; } html.dark .kpi-par-valor-menor { color: #cbd5e1; } .kpi-par-rotulo { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-top: 0.15rem; } .kpi-linhas { margin-top: 0.15rem; border-top: 1px solid rgba(148, 163, 184, 0.22); padding-top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; } html.dark .kpi-linhas { border-top-color: rgba(255, 255, 255, 0.1); } .kpi-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; } .kpi-linha-rotulo { color: #64748b; } html.dark .kpi-linha-rotulo { color: #94a3b8; } .kpi-linha-valor { font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; text-align: right; } html.dark .kpi-linha-valor { color: #e2e8f0; } /* Vencidas em um card só: a pagar à esquerda, a receber à direita. */ .vencidas-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 640px) { .vencidas-par { grid-template-columns: 1fr; } } .vencidas-bloco { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(3, 7, 18, 0.08); border-radius: 0.75rem; transition: background-color 120ms ease, border-color 120ms ease; } html.dark .vencidas-bloco { border-color: rgba(255, 255, 255, 0.09); } .vencidas-bloco:hover { background: rgba(176, 141, 87, 0.07); } html.dark .vencidas-bloco:hover { background: rgba(255, 255, 255, 0.04); } /* Dourado só quando há o que cobrar; sem alerta, o card fica neutro. O destaque é o FUNDO amarelado (pedido do dono); o texto fica no padrão — escuro no claro, branco no escuro (regras logo abaixo). */ .vencidas-bloco-alerta { border-color: rgba(176, 141, 87, 0.55); background: rgba(176, 141, 87, 0.16); } html.dark .vencidas-bloco-alerta { background: rgba(176, 141, 87, 0.30); border-color: rgba(221, 191, 126, 0.40); } html.dark .vencidas-bloco-alerta .vencidas-titulo { color: rgba(255, 255, 255, 0.82); } html.dark .vencidas-bloco-alerta .vencidas-nota { color: rgba(255, 255, 255, 0.65); } .vencidas-titulo { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } html.dark .vencidas-titulo { color: #94a3b8; } .vencidas-valor { font-size: 1.35rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } html.dark .vencidas-valor { color: #f1f5f9; } .vencidas-nota { font-size: 0.75rem; color: #64748b; } html.dark .vencidas-nota { color: #94a3b8; } /* Faixa "Highlights de hoje": um bloco por sinal, com barra da severidade. */ .sinal { border-inline-start: 3px solid var(--sinal-cor, #94a3b8); padding: 0.1rem 0 0.1rem 0.7rem; } .sinal + .sinal { margin-top: 0.85rem; border-top: 0; } .sinal-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .sinal-area { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sinal-cor, #64748b); } .sinal-valor { font-size: 0.78rem; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; } html.dark .sinal-valor { color: #cbd5e1; } .sinal-titulo { font-size: 0.875rem; font-weight: 700; color: #0f172a; margin-top: 0.1rem; } html.dark .sinal-titulo { color: #f1f5f9; } .sinal-link { text-decoration: underline; text-underline-offset: 2px; } .sinal-link:hover { color: var(--winik-dourado-texto); } html.dark .sinal-link:hover { color: var(--winik-dourado); } .sinal-texto { font-size: 0.78rem; line-height: 1.45; color: #64748b; margin-top: 0.15rem; } html.dark .sinal-texto { color: #94a3b8; } .sinal-vazio-titulo { font-size: 0.875rem; font-weight: 700; color: var(--winik-verde); } html.dark .sinal-vazio-titulo { color: var(--winik-verde-claro); } /* Resultado do período centralizado no card de Execução financeira. */ .dash-resultado-valor, .dash-resultado-legenda { text-align: center; } /* ---- Correções de especificidade (revisão de 22/07) -------------------- `.razao-tabela tbody td` tem especificidade (0,1,2) e vencia as classes de cor (0,1,0) aplicadas na MESMA célula: a coluna Valor saía cinza e o estado vazio perdia o respiro. Os seletores abaixo empatam o peso na própria célula em vez de mover blocos de lugar. Mesma história para os valores dos cards do dashboard, declarados depois de `.razao-saida`. */ .razao-tabela tbody td.razao-entrada { color: var(--winik-verde); } .razao-tabela tbody td.razao-saida { color: var(--winik-vinho); } html.dark .razao-tabela tbody td.razao-entrada { color: var(--winik-verde-claro); } html.dark .razao-tabela tbody td.razao-saida { color: var(--winik-vinho-claro); } .razao-tabela tbody td.razao-vazio { text-align: center; color: #64748b; padding: 1.75rem 0.75rem; } html.dark .razao-tabela tbody td.razao-vazio { color: #94a3b8; } .kpi-linha-valor.razao-entrada, .vencidas-valor.razao-entrada { color: var(--winik-verde); } .kpi-linha-valor.razao-saida { color: var(--winik-vinho); } html.dark .kpi-linha-valor.razao-entrada, html.dark .vencidas-valor.razao-entrada { color: var(--winik-verde-claro); } html.dark .kpi-linha-valor.razao-saida { color: var(--winik-vinho-claro); } /* Blocos "A pagar/A receber vencidas": o valor herda a cor padrão do card (escuro no claro, branco no escuro) — quem marca é o fundo dourado. */ .vencidas-valor.razao-saida { color: #0f172a; } html.dark .vencidas-valor.razao-saida { color: #f1f5f9; } .conta-ind-valor.razao-saida { color: var(--winik-vinho); } html.dark .conta-ind-valor.razao-saida { color: var(--winik-vinho-claro); } /* A severidade fica na barra lateral (como nos cards de indicador); o rótulo volta ao cinza legível, com o par escuro — âmbar de 10px sobre branco dava ~2,2:1 de contraste. */ .sinal-area { color: #64748b; } html.dark .sinal-area { color: #94a3b8; } /* ---- "Highlights de hoje" em faixa cheia (revisão dos ajustes) ---------- O card nasceu como coluna estreita; ao virar faixa de 12 colunas, o `space-between` do topo jogava o rótulo numa borda e o valor na outra, com ~1400px de vazio no meio, e o texto virava uma linha de ~250 caracteres. Medida de leitura no conteúdo resolve sem mexer no grid. */ .sinal { max-width: 78ch; } .sinal-topo { justify-content: flex-start; gap: 0.6rem; } .sinal-valor { margin-inline-start: auto; } /* ---- "Highlights de hoje" em quatro colunas ---------------------------- Os sinais são blocos curtos e independentes: em lista vertical sobrava metade da faixa vazia. Em telas menores cai para duas colunas e depois para uma, senão o texto vira uma coluna de palavras soltas. A medida de leitura (max-width) sai de cena: cada coluna já é estreita. */ .sinais-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; } @media (max-width: 1279px) { .sinais-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .sinais-grade { grid-template-columns: minmax(0, 1fr); } } .sinais-grade .sinal { max-width: none; } .sinais-grade .sinal + .sinal { margin-top: 0; } /* ==================== CONFIGURAÇÕES FINANCEIRAS (hub dos cadastros) ==================== */ .cfg-fin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 68rem; margin: 0 auto; } @media (max-width: 1023px) { .cfg-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cfg-fin { grid-template-columns: minmax(0, 1fr); } } .cfg-fin-cartao { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 2rem 1.5rem 1.5rem; background: #fff; border: 1px solid rgba(3, 7, 18, 0.08); border-top: 3px solid var(--cfg-cor); border-radius: 0.9rem; box-shadow: 0 1px 2px rgba(3, 7, 18, 0.05); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .cfg-fin-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(3, 7, 18, 0.1); border-color: var(--cfg-cor); } html.dark .cfg-fin-cartao { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.09); border-top-color: var(--cfg-cor); box-shadow: none; } html.dark .cfg-fin-cartao:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); border-color: var(--cfg-cor); } .cfg-fin-icone { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--cfg-cor-fraca); color: var(--cfg-cor); } .cfg-fin-icone-svg { width: 1.75rem; height: 1.75rem; } .cfg-fin-titulo { font-size: 1.0625rem; font-weight: 700; color: #0f172a; } html.dark .cfg-fin-titulo { color: #f1f5f9; } .cfg-fin-descricao { font-size: 0.8125rem; line-height: 1.45; color: #64748b; } html.dark .cfg-fin-descricao { color: #94a3b8; } .cfg-fin-abrir { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: auto; padding-top: 0.6rem; font-size: 0.8125rem; font-weight: 700; color: var(--cfg-cor); } .cfg-fin-abrir-icone { width: 0.9rem; height: 0.9rem; } /* Retorno ao hub, no cabeçalho dos três cadastros. */ .cfg-fin-voltar { display: inline-flex; } /* ------------------------------------------------------------------ Resumo do serviço na conta a receber (05/08/2026): texto de 18+ linhas com indentação e valores que precisam ficar em coluna. ⚠ Fonte de largura fixa nos DOIS lugares (o campo do formulário e o modal da lista): em fonte proporcional "R$ 289,90" e "R$ 90,00" desencontram, e a conferência, que é uma leitura de coluna, vira leitura palavra a palavra. ------------------------------------------------------------------ */ .conta-observacoes, .conta-resumo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.55; } /* O modal não é campo: o texto é só leitura, e `pre-wrap` é o que preserva as quebras de linha e a indentação que o resumo carrega. */ .conta-resumo { white-space: pre-wrap; word-break: break-word; max-height: 60vh; overflow-y: auto; padding: .75rem .85rem; border: 1px solid rgb(228 228 231); border-radius: .5rem; background: #FAFAF9; color: #27272A; } html.dark .conta-resumo { background: #18181B; border-color: #3F3F46; color: #E4E4E7; } /* ------------------------------------------------------------------ Painel de pendências (05/08/2026): os mesmos cartões dos hubs, mais a CONTAGEM — que é a informação, e por isso vem em corpo grande, na cor do cartão, acima do título. ⚠ O cartão zerado NÃO some: sumir faria o painel mudar de forma a cada visita, e "não há nada aqui" é resposta. Ele fica apagado, para o olho pousar primeiro no que tem número. ------------------------------------------------------------------ */ .pend-numero { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--cfg-cor); font-variant-numeric: tabular-nums; } .cfg-fin-cartao.pend-zerada { opacity: .55; } .cfg-fin-cartao.pend-zerada .pend-numero { color: #94a3b8; } html.dark .cfg-fin-cartao.pend-zerada .pend-numero { color: #64748b; } /* Modais de link e termo da OS (Fase 3): endereço público e os caminhos de assinatura. */ .os-link-modal { display: flex; flex-direction: column; gap: .6rem; } .os-link-sub { font-size: .85rem; color: #6B7280; margin: 0; } .os-link-aviso { font-size: .85rem; background: #FDF6E7; border: 1px solid #E9D9AE; border-radius: .5rem; padding: .6rem .7rem; margin: 0; color: #6B5B33; } .os-link-campo { width: 100%; font-size: .85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: .55rem .6rem; border: 1px solid rgb(228 228 231); border-radius: .5rem; background: #fff; color: inherit; } /* A mensagem pronta: monoespaçada não serve aqui (é texto para pessoa, com emoji), e precisa quebrar linha como o WhatsApp vai mostrar. */ .os-link-mensagem { font-family: inherit; white-space: pre-wrap; resize: vertical; line-height: 1.45; } .os-link-botao { display: block; text-align: center; font-weight: 600; font-size: .9rem; padding: .7rem 1rem; border-radius: .5rem; border: 1px solid rgb(228 228 231); text-decoration: none; color: inherit; } .os-link-botao:hover { border-color: var(--winik-dourado-escuro); } /* Dourado pede texto ESCURO: branco sobre #B08D57 dá 3,1:1 e reprova para texto de botão. É o mesmo par do login e do modo escuro daqui. */ .os-link-botao-forte { background: var(--winik-dourado-escuro); color: var(--winik-preto); border-color: transparent; } .os-link-ok { background: #EAF3EA; border: 1px solid #C7E0C7; border-radius: .5rem; padding: .7rem .8rem; color: #234523; } .os-link-ok p { margin: 0; } .dark .os-link-campo, .dark .os-link-botao { background: rgb(39 39 42); border-color: rgb(63 63 70); } /* ⚠ DEFEITO DE ESPECIFICIDADE, e era o que o dono viu como "no modo escuro não dá para ver o texto do Enviar pelo WhatsApp": `.dark .os-link-botao` (0,2,0) vence `.os-link-botao-forte` (0,1,0) e trocava o fundo dourado por zinc-800 — mas a REGRA DO TEXTO não era sobrescrita, e o preto continuava. Preto sobre zinc-800 é 1,1:1, ou seja, botão em branco. Atingia DOIS botões, não um: o "Assinar agora (tablet do balcão)" do termo tem a mesma classe e o mesmo sintoma. Por isso o par completo (fundo E texto) no tema escuro, em vez de remendar só o caso relatado. */ .dark .os-link-botao-forte { background: var(--winik-dourado); color: var(--winik-preto); border-color: transparent; } /* O botão do WhatsApp: verde e com o desenho do aplicativo (pedido do dono, 04/08) — num modal de três botões parecidos, o que manda a mensagem tem de ser achado sem ler. Verde da paleta, não o #25D366 do aplicativo: com branco por cima o da marca dá 2,4:1 e reprova; --winik-verde dá 5,0:1. No escuro inverte para o verde claro com texto preto (9,6:1). */ .os-btn-zap { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--winik-verde); color: #fff; border-color: transparent; } .os-btn-zap:hover { background: #26674B; border-color: transparent; } .dark .os-btn-zap { background: var(--winik-verde-claro); color: var(--winik-preto); border-color: transparent; } .dark .os-btn-zap:hover { background: #8ACFB1; border-color: transparent; } .os-btn-zap-icone { width: 1.15rem; height: 1.15rem; flex: none; } .dark .os-link-aviso { background: #2A2418; border-color: #4A4028; color: #E9D9AE; } .dark .os-link-ok { background: #1B2A1B; border-color: #2F4A2F; color: #C7E0C7; } /* Assinatura do termo no modal da OS: a prova precisa ser vista por quem opera. */ .os-assinatura { width: 100%; max-height: 130px; object-fit: contain; background: #fff; border: 1px solid rgb(228 228 231); border-radius: .5rem; padding: .3rem; } .dark .os-assinatura { border-color: rgb(63 63 70); } /* ── Aba "Cliente" da OS: os três marcos do ciclo (entrada, orçamento, retirada). Cartões em linha no computador e empilhados no celular, que é onde o técnico e o atendente de rua abrem a ordem. ─────────────────────────── */ .os-marcos-envelope { display: flex; flex-direction: column; gap: .75rem; } .os-marcos-barra { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .os-marcos-legenda { font-size: .82rem; color: rgb(113 113 122); } .os-marco-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .os-marcos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .os-marco { padding: .9rem 1rem; } .os-marco-topo { display: flex; align-items: center; gap: .45rem; } .os-marco-ponto { width: .55rem; height: .55rem; border-radius: 9999px; flex: none; } .os-marco-titulo { font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: rgb(63 63 70); } .os-marco-passo { margin-inline-start: auto; font-size: .7rem; color: rgb(113 113 122); } .os-marco-resumo { margin: .5rem 0 0; font-weight: 600; font-size: .95rem; color: rgb(24 24 27); } .os-marco-detalhe { margin: .15rem 0 0; font-size: .8rem; color: rgb(113 113 122); } /* O marco que não se aplica não compete por atenção com os que pedem ação. */ .os-marco-dispensado .os-marco-resumo { font-weight: 500; color: rgb(113 113 122); } .dark .os-marco-titulo { color: rgb(212 212 216); } .dark .os-marco-resumo { color: rgb(244 244 245); } .dark .os-marco-detalhe, .dark .os-marco-passo { color: rgb(161 161 170); } .dark .os-marco-dispensado .os-marco-resumo { color: rgb(161 161 170); } @media (max-width: 900px) { .os-marcos { grid-template-columns: 1fr; } } /* ── Aba "Serviços" da OS: o trilho do ciclo + a linha do tempo do atendimento (fusão Diagnósticos+Orçamentos+Execuções, 16/08/2026). Sem build de front: toda classe usada em aba-atendimento.blade.php PRECISA existir aqui, senão é no-op silencioso. Estados do trilho usam o mesmo vocabulário de cor dos marcos da aba Cliente: verde=feito, âmbar=esperando, vinho=parado, cinza=vazio. ─────────────────────────────────────────────────────────── */ .atendimento-envelope { display: flex; flex-direction: column; gap: .9rem; } /* O trilho: quatro paradas em linha no computador, empilhadas no celular. */ .atendimento-trilho { padding: .9rem 1rem; } .atendimento-paradas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; } .atendimento-parada { min-width: 0; } .atendimento-parada-topo { display: flex; align-items: center; gap: .45rem; } .atendimento-ponto { width: .55rem; height: .55rem; border-radius: 9999px; flex: none; } .atendimento-ponto-feito { background-color: var(--winik-verde); } .atendimento-ponto-esperando { background-color: var(--winik-ambar); } .atendimento-ponto-parado { background-color: var(--winik-vinho); } .atendimento-ponto-vazio { background-color: #9CA3AF; } .atendimento-parada-titulo { font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgb(63 63 70); } .atendimento-parada-passo { margin-inline-start: auto; font-size: .68rem; color: rgb(113 113 122); } .atendimento-parada-resumo { margin: .45rem 0 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-weight: 600; font-size: .92rem; color: rgb(24 24 27); } .atendimento-parada-detalhe { margin: .15rem 0 0; font-size: .78rem; color: rgb(113 113 122); } /* O título da parada acompanha o estado, espelhando o ponto — sem classe morta no markup (achado da revisão de 16/08: as três emitidas sem regra eram no-op silencioso). Pares de TEXTO da paleta: o âmbar cru (#D9A441) dá 2,2:1 sobre branco e some — para texto sobre claro o par é o dourado-texto, como o resto da casa já faz. */ .atendimento-parada-feito .atendimento-parada-titulo { color: var(--winik-verde); } .atendimento-parada-esperando .atendimento-parada-titulo { color: var(--winik-dourado-texto); } .atendimento-parada-parado .atendimento-parada-titulo { color: var(--winik-vinho); } /* A parada sem registro não compete por atenção com as que têm história. */ .atendimento-parada-vazio .atendimento-parada-resumo { font-weight: 500; color: rgb(113 113 122); } /* Os três botões de criação, na ordem do ciclo, sob as paradas. */ .atendimento-acoes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } /* A linha do tempo: trilho vertical à esquerda, cartão à direita. */ .atendimento-linha { display: flex; flex-direction: column; gap: .75rem; position: relative; } .atendimento-cartao-par { display: flex; gap: .7rem; align-items: flex-start; position: relative; } /* O fio que liga um evento ao seguinte — some no último para a linha não apontar para o nada. */ .atendimento-cartao-par:not(:last-child)::before { content: ''; position: absolute; left: 1rem; top: 2.2rem; bottom: -0.95rem; width: 2px; background: rgba(0, 0, 0, 0.08); } .atendimento-icone { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; flex: none; position: relative; z-index: 1; } .atendimento-icone svg { width: 1.05rem; height: 1.05rem; } /* Cada tipo com a sua cor — fundo suave, ícone cheio, nos DOIS temas. */ .atendimento-icone-diagnostico { background: rgba(44, 90, 99, 0.14); color: var(--winik-petroleo); } .atendimento-icone-orcamento { background: rgba(140, 109, 63, 0.16); color: var(--winik-dourado-texto); } .atendimento-icone-execucao { background: rgba(46, 125, 91, 0.14); color: var(--winik-verde); } .atendimento-cartao { flex: 1; min-width: 0; padding: .8rem .95rem; } .atendimento-cartao-topo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .atendimento-cartao-tipo { font-weight: 700; font-size: .85rem; color: rgb(24 24 27); } .atendimento-cartao-quando { margin-inline-start: auto; font-size: .75rem; color: rgb(113 113 122); white-space: nowrap; } .atendimento-cartao-meta { margin: .25rem 0 0; display: flex; gap: .35rem; flex-wrap: wrap; font-size: .8rem; color: rgb(113 113 122); } .atendimento-cartao-texto { margin: .35rem 0 0; font-size: .88rem; line-height: 1.45; color: rgb(63 63 70); overflow-wrap: anywhere; } .atendimento-cartao-acoes { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .55rem; } /* Chips: os minutos da execução e o selo "cliente vê" (derivado — toggle E texto preenchido; a view nunca lê o toggle cru). */ .atendimento-chip { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 9999px; background: rgba(0, 0, 0, 0.06); color: rgb(63 63 70); } .atendimento-selo { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 9999px; background: rgba(46, 125, 91, 0.14); color: var(--winik-verde); } /* A aba recém-aberta: diz o que esta tela faz, no lugar de três grades vazias. */ .atendimento-vazio { padding: 2rem 1rem; text-align: center; } .atendimento-vazio-icone { width: 2.2rem; height: 2.2rem; margin: 0 auto .5rem; color: rgb(161 161 170); } .atendimento-vazio-titulo { margin: 0; font-weight: 600; color: rgb(63 63 70); } .atendimento-vazio-texto { margin: .3rem 0 0; font-size: .85rem; color: rgb(113 113 122); } /* Tema escuro: só o que o claro pintou com cor absoluta. */ .dark .atendimento-parada-titulo { color: rgb(212 212 216); } /* Os pares CLAROS da paleta para o fundo escuro (verde-claro/dourado/vinho- claro), como .dash-positivo e vizinhos já fazem. Vencem a regra neutra acima por especificidade (três classes contra duas). */ .dark .atendimento-parada-feito .atendimento-parada-titulo { color: var(--winik-verde-claro); } .dark .atendimento-parada-esperando .atendimento-parada-titulo { color: var(--winik-dourado); } .dark .atendimento-parada-parado .atendimento-parada-titulo { color: var(--winik-vinho-claro); } .dark .atendimento-parada-resumo { color: rgb(244 244 245); } .dark .atendimento-parada-detalhe, .dark .atendimento-parada-passo { color: rgb(161 161 170); } .dark .atendimento-parada-vazio .atendimento-parada-resumo { color: rgb(161 161 170); } .dark .atendimento-acoes { border-top-color: rgba(255, 255, 255, 0.08); } .dark .atendimento-cartao-par:not(:last-child)::before { background: rgba(255, 255, 255, 0.10); } .dark .atendimento-icone-diagnostico { background: rgba(44, 90, 99, 0.35); color: #9CC4CB; } .dark .atendimento-icone-orcamento { background: rgba(221, 191, 126, 0.18); color: var(--winik-dourado); } .dark .atendimento-icone-execucao { background: rgba(108, 191, 154, 0.18); color: var(--winik-verde-claro); } .dark .atendimento-cartao-tipo { color: rgb(244 244 245); } .dark .atendimento-cartao-quando, .dark .atendimento-cartao-meta { color: rgb(161 161 170); } .dark .atendimento-cartao-texto { color: rgb(212 212 216); } .dark .atendimento-chip { background: rgba(255, 255, 255, 0.10); color: rgb(212 212 216); } .dark .atendimento-selo { background: rgba(108, 191, 154, 0.16); color: var(--winik-verde-claro); } .dark .atendimento-vazio-titulo { color: rgb(212 212 216); } .dark .atendimento-vazio-texto { color: rgb(161 161 170); } @media (max-width: 900px) { .atendimento-paradas { grid-template-columns: 1fr; } } /* A miniatura da placa veicular (modelo Mercosul): faixa azul "BRASIL" e o número em fonte condensada. Ligada quando o ramo chama o identificador de "Placa" (cabeçalho da OS e cartões de Minhas OS). É um objeto físico: BRANCA nos dois temas, de propósito — só a borda respira no escuro. */ .placa-mini { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; border: 1.5px solid #18181B; border-radius: 4px; overflow: hidden; background: #fff; line-height: 1; margin-left: .15rem; } .placa-mini-faixa { background: #003399; color: #fff; font-size: 6px; font-weight: 700; letter-spacing: .22em; text-align: center; padding: 1px 4px; } .placa-mini-num { color: #18181B; font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-align: center; padding: 1px 6px 2px; white-space: nowrap; } .dark .placa-mini { border-color: #52525B; } /* ========================================================================== COPILOT — o painel lateral (App\Livewire\BarraDoCopiloto, montado em BODY_END) ⚠⚠ MUDOU EM 20/08/2026, a pedido do dono: *"painel fixo e recolhível à direita, com aba vertical Copilot; ao abrir, readequar a página sem sobrepor o conteúdo"*. Antes era um balão flutuante no canto inferior, que TAPAVA a tela — no PDV, justamente a coluna do total. O comentário antigo dizia que a barra "nunca empurra o .fi-main". Essa decisão foi REVOGADA por quem manda: agora ela empurra, e é esse o pedido. Escopo estrito em .copiloto-*, com UMA exceção nomeada: a regra do gutter abaixo, que precisa alcançar o container do painel. ========================================================================== */ /* UMA FONTE SÓ PARA A LARGURA. O painel e o gutter que o compensa são o mesmo número visto de dois lados: se divergirem, sobra ou falta faixa e nada quebra — o defeito é só visual, e nenhum teste o pega. */ :root { --copiloto-largura: 24rem; --copiloto-aba-largura: 2rem; } .copiloto-raiz { position: fixed; inset-block: 0; right: 0; z-index: 40; display: flex; align-items: stretch; font-size: 0.875rem; } /* A ABA VERTICAL. Fica sempre encostada na direita; a partir de 1024px o conteúdo reserva a largura dela no gutter abaixo, então ela não tapa nada. Abaixo disso não há faixa a ceder e ela sobrepõe mesmo — ver o gutter. */ .copiloto-aba { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: var(--copiloto-aba-largura); padding: 0; background: #0c0c0e; color: #ddbf7e; border: 1px solid #ddbf7e66; border-right: 0; border-radius: 0.5rem 0 0 0.5rem; cursor: pointer; /* O texto de pé, lido de cima para baixo. */ writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; } .copiloto-aba:hover { background: #17171a; } .copiloto-aba:focus-visible { outline: 2px solid #ddbf7e; outline-offset: -3px; } .copiloto-painel { display: flex; flex-direction: column; width: min(var(--copiloto-largura), 100vw); height: 100vh; background: #0c0c0e; color: #e4e4e7; border-left: 1px solid #ddbf7e4d; box-shadow: -8px 0 28px rgb(0 0 0 / 0.35); overflow: hidden; } /* ⚠⚠ O GUTTER — a única regra deste bloco que sai do escopo `.copiloto-*`, e ela é o pedido inteiro: "readequar a página SEM SOBREPOR o conteúdo". É MARGEM NO PRÓPRIO `.fi-main-ctn`, e o mecanismo já se paga duas vezes neste arquivo: a espiada da sidebar reserva largura assim (busque `winik-sidebar-peek`), e o modo foco do PDV zera a mesma propriedade. Em flexbox a margem é descontada do espaço livre ANTES de distribuir, então ela encolhe a caixa de verdade — o `w-screen` do vendor não atrapalha porque `flex-1` traz `flex-basis: 0%`, que governa o eixo principal. ⚠⚠ O GATILHO É CLASSE NO , ESCRITA PELO js/app-theme.js — não `:has()`. Quatro tentativas falharam antes por atacarem o lugar errado, e vale registrar qual foi o erro de cada uma: · `:has()` casa e NÃO reinvalida a partir de subárvore distante. A regra da espiada usa `:has()` e funciona porque a sidebar mora DENTRO do `.fi-layout`; a `.copiloto-raiz` é montada em BODY_END e é IRMÃ dele, fora do alcance. O seletor não era o problema — a distância era. · padding no `body` e no `.fi-layout` é engolido pelo `w-screen` do filho. · style INLINE em `.fi-main-ctn` é apagado pelo Alpine: a view de layout do vendor traz `x-bind:style`, e o Livewire aplica isso com `setAttribute('style', ...)`, que substitui o atributo inteiro. Era o "aceitou uma vez e depois ignorou". ⚠ Só a partir de 1024px. No celular não há 24rem a ceder: abaixo disso o painel volta a sobrepor, que é o comportamento correto lá. */ @media (min-width: 1024px) { html.copiloto-aberto .fi-main-ctn { margin-inline-end: var(--copiloto-largura); /* Cinto: se o `flex-1` sair da view do vendor um dia, o `w-screen` (100vw) volta a governar e a margem apenas empurraria, gerando estouro que o `overflow-x-clip` do `.fi-layout` engole — o gutter pareceria não ter feito nada, sem erro nenhum. */ max-width: 100%; } html.copiloto-recolhido .fi-main-ctn { margin-inline-end: var(--copiloto-aba-largura); max-width: 100%; } } .copiloto-topo { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid #27272a; } /* O título é o botão de RECOLHER. Ele herda tudo do cabeçalho e não parece um botão em repouso — de propósito: é o rótulo do painel, e virar um controle desenhado competiria com o × ao lado. O `text-align: left` existe porque `button` centraliza por padrão e o título é âncora à esquerda. */ .copiloto-titulo { color: #ddbf7e; font-weight: 600; flex: 1; appearance: none; background: none; border: 0; padding: 0; font-size: inherit; font-family: inherit; text-align: left; cursor: pointer; } /* O convite aparece na intenção, não antes dela. */ .copiloto-titulo:hover { color: #f0dcb0; } .copiloto-titulo:focus-visible { outline: 2px solid #ddbf7e; outline-offset: 2px; border-radius: 0.25rem; } /* O selo do modo: quem digita precisa saber para onde o texto vai. */ .copiloto-modo { font-size: 0.7rem; color: #a1a1aa; border: 1px solid #3f3f46; border-radius: 9999px; padding: 0.1rem 0.5rem; } .copiloto-fechar { background: none; border: none; color: #a1a1aa; font-size: 1.1rem; cursor: pointer; } .copiloto-conversa { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; } .copiloto-vazio { color: #71717a; line-height: 1.5; } .copiloto-turno { border-radius: 0.6rem; padding: 0.5rem 0.75rem; white-space: pre-wrap; line-height: 1.45; } .copiloto-turno--usuario { background: #ddbf7e1a; border: 1px solid #ddbf7e33; align-self: flex-end; max-width: 90%; } .copiloto-turno--copiloto { background: #18181b; border: 1px solid #27272a; align-self: flex-start; max-width: 95%; } .copiloto-turno--sistema { color: #a1a1aa; font-style: italic; align-self: center; } .copiloto-entrada { display: flex; gap: 0.5rem; padding: 0.6rem; border-top: 1px solid #27272a; } .copiloto-entrada input { flex: 1; background: #18181b; border: 1px solid #3f3f46; border-radius: 0.5rem; color: #e4e4e7; padding: 0.45rem 0.7rem; /* Piso de 16px no mobile: fonte menor faz o WebKit dar zoom ao focar e não voltar — a mesma regra que o tema já paga nos campos do painel. */ font-size: 16px; } @media (min-width: 640px) { .copiloto-entrada input { font-size: 0.875rem; } } .copiloto-entrada button { background: #ddbf7e; color: #0c0c0e; border: none; border-radius: 0.5rem; padding: 0.45rem 0.9rem; font-weight: 600; cursor: pointer; } .copiloto-entrada button[disabled] { opacity: 0.5; cursor: wait; } /* ========================================================================== PDV — a tela de balcão (docs/PLANO_VENDAS.md §5.7) ========================================================================== ⚠ Tudo aqui, e não em utilitária do Tailwind na blade: ESTE PROJETO NÃO TEM BUILD DE FRONT-END. Sem package.json/vite/tailwind.config, classe utilitária que não esteja no CSS já compilado do Filament é no-op SILENCIOSO — foi assim que `tabular-nums` ficou inerte em três blades e as colunas de dinheiro dançavam. Numa tela de números alinhados, o erro mais caro possível. Todo seletor é escopado por `.pdv-modo-foco`, a classe que a Page põe no : nada daqui vaza para as outras 40 telas do painel. ========================================================================== */ /* Modo foco: o balcão ocupa o monitor. A sidebar encolhe para os ícones e o conteúdo ganha a largura toda — quem está no caixa não navega o menu. */ .pdv-modo-foco .fi-sidebar { display: none; } .pdv-modo-foco .fi-main-ctn { margin-inline-start: 0; } .pdv-modo-foco .fi-main { max-width: none; } /* O subtítulo do Filament nasce em `text-lg` e no balcão competia com o campo do bipe, que é o que esta tela existe para destacar (pedido do dono, 11/08/2026). Escopado por `.pdv-modo-foco`: as outras 40 telas seguem com o subtítulo delas. */ .pdv-modo-foco .fi-header-subheading { font-size: 0.8rem; line-height: 1.35; margin-top: 0.35rem; opacity: 0.75; } /* -------------------------------------------------- as vendas abertas */ .pdv-vendas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgb(161 161 170 / 0.25); } .pdv-venda { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px solid rgb(161 161 170 / 0.35); border-radius: 0.5rem 0.5rem 0 0; border-bottom-width: 2px; background: transparent; color: inherit; font-size: 0.9rem; cursor: pointer; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdv-venda:hover { background: rgb(221 191 126 / 0.08); } /* A aba aberta tem a base dourada — quem olha de longe sabe em qual venda está antes de ler o nome. */ .pdv-venda-ativa { border-color: rgb(221 191 126 / 0.6); border-bottom-color: #ddbf7e; background: rgb(221 191 126 / 0.12); font-weight: 600; } .pdv-venda-itens { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: rgb(161 161 170 / 0.25); font-size: 0.7rem; font-variant-numeric: tabular-nums; } .pdv-venda-ativa .pdv-venda-itens { background: #ddbf7e; color: #0c0c0e; } .pdv-venda-nova { padding: 0.4rem 0.7rem; border: 1px dashed rgb(161 161 170 / 0.5); border-radius: 0.5rem; background: transparent; color: inherit; font-size: 0.85rem; cursor: pointer; } .pdv-venda-nova:hover { border-color: #ddbf7e; background: rgb(221 191 126 / 0.08); } .pdv-grade { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } @media (min-width: 1024px) { /* Meio a meio, e não uma coluna estreita de total: desde as três etapas o lado direito é o CARRINHO inteiro (tabela + dinheiro), e é o que o operador confere a venda toda. */ .pdv-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* `min-width: 0` não é enfeite: item de grid nasce com `min-width: auto`, e uma tabela larga (nome de produto comprido) empurraria a coluna do dinheiro para fora da tela em vez de encolher. */ .pdv-coluna-itens { min-width: 0; } .pdv-coluna-total { min-width: 0; } /* A etapa à esquerda e o carrinho à direita, com peso parecido: o carrinho é metade da tela porque é o que o operador confere o tempo todo. */ .pdv-coluna-etapa, .pdv-coluna-carrinho { min-width: 0; } /* -------------------------------------------------- as três etapas */ .pdv-abas { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .pdv-aba { flex: 1 1 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid rgb(161 161 170 / 0.35); border-radius: 0.6rem; background: transparent; color: inherit; cursor: pointer; text-align: start; transition: border-color 120ms ease, background-color 120ms ease; } .pdv-aba:hover { border-color: rgb(221 191 126 / 0.7); background: rgb(221 191 126 / 0.08); } /* A etapa aberta é a única com o dourado cheio — quem olha de longe sabe onde está sem ler. */ .pdv-aba-ativa { border-color: #ddbf7e; background: rgb(221 191 126 / 0.14); } .pdv-aba-passo { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 999px; background: rgb(221 191 126 / 0.25); font-size: 0.8rem; font-weight: 700; } .pdv-aba-ativa .pdv-aba-passo { background: #ddbf7e; color: #0c0c0e; } .pdv-aba-rotulo { font-weight: 600; font-size: 0.95rem; } /* A tecla some no celular: lá não existe Alt, e a etiqueta viraria ruído. */ .pdv-aba-tecla { margin-inline-start: auto; font-size: 0.7rem; letter-spacing: 0.04em; opacity: 0.55; display: none; } @media (min-width: 1024px) { .pdv-aba-tecla { display: inline; } } .pdv-etapa { display: flex; flex-direction: column; gap: 1rem; } /* -------------------------------------------------- campos do balcão */ .pdv-campo { display: flex; flex-direction: column; gap: 0.3rem; } .pdv-campo-rotulo { font-size: 0.85rem; font-weight: 600; } .pdv-campo-entrada { padding: 0.6rem 0.75rem; font-size: 1.05rem; border-radius: 0.5rem; border: 1px solid rgb(161 161 170 / 0.5); background: rgb(255 255 255 / 0.9); color: #0c0c0e; } html.dark .pdv-campo-entrada { background: rgb(255 255 255 / 0.06); color: #f4f4f5; border-color: rgb(255 255 255 / 0.15); } .pdv-campo-entrada:focus { outline: 2px solid #ddbf7e; outline-offset: 1px; } .pdv-campo-ajuda { font-size: 0.8rem; opacity: 0.7; } .pdv-botao-secundario { align-self: flex-start; padding: 0.55rem 0.9rem; border-radius: 0.5rem; border: 1px solid #ddbf7e; background: transparent; color: inherit; font-weight: 600; cursor: pointer; } .pdv-botao-secundario:hover { background: rgb(221 191 126 / 0.14); } .pdv-cliente-escolhido { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; border: 1px solid rgb(221 191 126 / 0.5); border-radius: 0.6rem; background: rgb(221 191 126 / 0.08); } .pdv-cliente-rotulo { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; } .pdv-cliente-nome { font-size: 1.15rem; font-weight: 700; } .pdv-cliente-nota { font-size: 0.8rem; opacity: 0.7; } .pdv-pagamento-resumo { padding: 1rem; border: 1px solid rgb(161 161 170 / 0.35); border-radius: 0.6rem; } /* -------------------------------------------------- o card do produto */ .pdv-card { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; border: 1px solid rgb(221 191 126 / 0.5); border-radius: 0.75rem; background: rgb(221 191 126 / 0.06); } @media (min-width: 640px) { .pdv-card { grid-template-columns: 11rem minmax(0, 1fr); } } /* Quadrado e com o produto INTEIRO dentro (`contain`, nunca `cover`): foto de peça cortada faz o operador conferir a embalagem errada. */ .pdv-card-imagem { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 0.6rem; background: rgb(255 255 255 / 0.85); overflow: hidden; } html.dark .pdv-card-imagem { background: rgb(255 255 255 / 0.06); } .pdv-card-imagem img { max-width: 100%; max-height: 100%; object-fit: contain; } .pdv-card-sem-foto { font-size: 0.8rem; opacity: 0.5; } .pdv-card-corpo { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .pdv-card-codigo { font-size: 0.8rem; opacity: 0.65; font-variant-numeric: tabular-nums; } .pdv-card-nome { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; } .pdv-card-preco { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pdv-card-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .pdv-card-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pdv-card-subtotal { padding-top: 0.35rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; } .pdv-card-acoes { display: flex; gap: 0.5rem; align-items: center; } /* A nota da linha do carrinho (desconto concedido, recado da peça). */ .pdv-linha-nota { display: block; font-size: 0.75rem; opacity: 0.7; } /* -------------------------------------------------- histórico do cliente */ /* A dívida vencida vem em vermelho e ANTES de qualquer sugestão de venda: vender fiado para quem já deve é a forma mais cara de vender mais. */ .pdv-alerta { padding: 0.75rem 0.9rem; border: 1px solid rgb(168 94 103 / 0.6); border-radius: 0.6rem; background: rgb(168 94 103 / 0.12); font-size: 0.9rem; } .pdv-aviso { padding: 0.6rem 0.9rem; border: 1px solid rgb(221 191 126 / 0.5); border-radius: 0.6rem; background: rgb(221 191 126 / 0.08); font-size: 0.85rem; } .pdv-historico { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.9rem 1rem; border: 1px solid rgb(161 161 170 / 0.3); border-radius: 0.6rem; } .pdv-historico-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (min-width: 640px) { .pdv-historico-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pdv-historico-item { display: flex; flex-direction: column; gap: 0.1rem; } .pdv-historico-rotulo { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; } .pdv-historico-valor { font-size: 1.05rem; font-variant-numeric: tabular-nums; } .pdv-historico-sugestoes { display: flex; flex-direction: column; gap: 0.4rem; } .pdv-historico-fichas { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pdv-ficha { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border: 1px solid rgb(221 191 126 / 0.55); border-radius: 999px; background: transparent; color: inherit; font-size: 0.85rem; cursor: pointer; } .pdv-ficha:hover { background: rgb(221 191 126 / 0.16); } .pdv-ficha-vezes { font-size: 0.7rem; opacity: 0.65; font-variant-numeric: tabular-nums; } /* Troco e falta: cores opostas de propósito. O operador lê a cor antes da palavra, e devolver dinheiro quando ainda falta é o erro que custa caixa. */ .pdv-troco { font-size: 1.35rem; color: #4e8f72; font-variant-numeric: tabular-nums; } .pdv-falta { font-size: 1.35rem; color: #a85e67; font-variant-numeric: tabular-nums; } html.dark .pdv-troco { color: #7fbf9c; } html.dark .pdv-falta { color: #d19aa2; } /* -------------------------------------------------- o carrinho, à direita */ .pdv-carrinho { position: sticky; top: 1rem; border: 1px solid rgb(161 161 170 / 0.3); border-radius: 0.75rem; overflow: hidden; } .pdv-carrinho-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 1rem; background: rgb(12 12 14 / 0.04); border-bottom: 1px solid rgb(161 161 170 / 0.25); } html.dark .pdv-carrinho-topo { background: rgb(255 255 255 / 0.04); } .pdv-carrinho-titulo { font-weight: 700; letter-spacing: 0.02em; } .pdv-carrinho-contagem { font-size: 0.8rem; opacity: 0.7; } /* -------------------------------------------------- o bipe */ .pdv-bipe { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .pdv-bipe-campo { flex: 1 1 auto; /* Grande de propósito: o operador confere o que bipou de relance, sem aproximar o rosto do monitor. */ font-size: 1.35rem; padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 2px solid #ddbf7e; background: rgb(255 255 255 / 0.9); color: #0c0c0e; } .dark .pdv-bipe-campo { background: rgb(24 24 27 / 0.9); color: #fafafa; } .pdv-bipe-campo:focus { outline: 3px solid rgb(221 191 126 / 0.45); outline-offset: 1px; } .pdv-bipe-botao { background: #0c0c0e; color: #ddbf7e; border: none; border-radius: 0.6rem; padding: 0.7rem 1.2rem; font-weight: 600; font-size: 1rem; cursor: pointer; } .dark .pdv-bipe-botao { background: #ddbf7e; color: #0c0c0e; } /* -------------------------------------------------- a busca por nome */ .pdv-busca { margin-bottom: 1rem; } .pdv-busca-rotulo { display: block; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem; } .pdv-busca-campo { width: 100%; font-size: 1rem; padding: 0.5rem 0.7rem; border-radius: 0.5rem; border: 1px solid rgb(161 161 170 / 0.5); background: transparent; color: inherit; } .pdv-sugestoes-lista { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 1px solid rgb(161 161 170 / 0.35); border-radius: 0.5rem; overflow: hidden; max-height: 15rem; overflow-y: auto; } .pdv-sugestao { display: block; width: 100%; text-align: start; padding: 0.5rem 0.7rem; background: transparent; border: none; color: inherit; cursor: pointer; font-size: 0.95rem; } .pdv-sugestao:hover { background: rgb(221 191 126 / 0.18); } .pdv-sem-resultado { margin: 0.4rem 0 0; font-size: 0.85rem; opacity: 0.7; } /* -------------------------------------------------- o carrinho */ .pdv-vazio { padding: 2.5rem 1rem; text-align: center; font-size: 1.05rem; opacity: 0.65; border: 2px dashed rgb(161 161 170 / 0.35); border-radius: 0.75rem; } .pdv-tabela { width: 100%; border-collapse: collapse; font-size: 1rem; } .pdv-tabela th { text-align: start; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; padding: 0.4rem 0.6rem; border-bottom: 1px solid rgb(161 161 170 / 0.35); } .pdv-tabela td { padding: 0.55rem 0.6rem; border-bottom: 1px solid rgb(161 161 170 / 0.18); } /* A coluna do NOME leva a folga que sobrar e quebra linha; as de número é que nunca quebram. Sem isto, o nome comprido esticaria a tabela inteira. */ .pdv-tabela .pdv-col-item { width: 100%; word-break: break-word; } /* A coluna de dinheiro alinhada à direita E com dígitos de largura fixa. É ESTA declaração que o `tabular-nums` do Tailwind não entregou por não estar no CSS compilado — aqui ela é literal e não depende de build nenhum. */ .pdv-tabela .pdv-col-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .pdv-forte { font-weight: 700; } .pdv-qtd { width: 5.5rem; text-align: end; font-variant-numeric: tabular-nums; padding: 0.3rem 0.4rem; border-radius: 0.4rem; border: 1px solid rgb(161 161 170 / 0.5); background: transparent; color: inherit; } .pdv-col-acao { width: 2.5rem; text-align: center; } .pdv-remover { background: transparent; border: none; color: #b91c1c; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; } .dark .pdv-remover { color: #fca5a5; } .pdv-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* -------------------------------------------------- o dinheiro */ /* O dinheiro fecha o carrinho, no rodapé dele. O `sticky` saiu daqui quando as três etapas chegaram: quem gruda na tela agora é `.pdv-carrinho` inteiro, e dois sticky aninhados brigariam pelo mesmo topo. */ .pdv-painel { border-top: 1px solid rgb(221 191 126 / 0.5); padding: 1rem; background: rgb(221 191 126 / 0.08); } .pdv-linha-resumo, .pdv-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-variant-numeric: tabular-nums; } .pdv-linha-resumo { font-size: 0.95rem; opacity: 0.85; } .pdv-desconto { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0.75rem 0; font-size: 0.95rem; } .pdv-desconto-campo { width: 7rem; text-align: end; font-variant-numeric: tabular-nums; padding: 0.35rem 0.5rem; border-radius: 0.4rem; border: 1px solid rgb(161 161 170 / 0.5); background: transparent; color: inherit; } .pdv-total { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 2px solid rgb(221 191 126 / 0.6); font-size: 1.15rem; } .pdv-total strong { font-size: 2rem; font-weight: 800; line-height: 1.1; } .pdv-contagem { margin: 0.75rem 0 0; font-size: 0.8rem; opacity: 0.7; } /* -------------------------------------------------- quem está levando */ .pdv-comprador { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid rgb(221 191 126 / 0.35); } .pdv-comprador-rotulo { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; } .pdv-comprador-nome { font-size: 1rem; font-weight: 700; line-height: 1.25; } .pdv-comprador-aviso { font-size: 0.75rem; opacity: 0.7; } /* O balcão guardado: discreto de propósito — é garantia, não alarme. */ .pdv-guardado { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; font-size: 0.75rem; opacity: 0.6; } .pdv-guardado-icone { width: 0.85rem; height: 0.85rem; flex: none; } /* ------------------------------------------------------------------ Extrato do vale de crédito (13/08/2026, Fase 6): o modal que explica o saldo. ⚠ O emitido em cima e o saldo embaixo, com a lista de usos entre os dois: é uma subtração, e ela só se lê como subtração se as três partes estiverem na tela ao mesmo tempo. ------------------------------------------------------------------ */ .vale-usos { font-size: .8125rem; line-height: 1.5; } .vale-usos-topo, .vale-usos-rodape { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; } .vale-usos-topo { border-bottom: 1px solid rgb(228 228 231); } .vale-usos-rodape { border-top: 1px solid rgb(228 228 231); font-size: .875rem; } html.dark .vale-usos-topo, html.dark .vale-usos-rodape { border-color: #3F3F46; } .vale-usos-lista { list-style: none; margin: 0; padding: 0; max-height: 45vh; overflow-y: auto; } .vale-usos-linha { display: flex; align-items: baseline; gap: .75rem; padding: .4rem .25rem; } .vale-usos-linha + .vale-usos-linha { border-top: 1px dashed rgb(228 228 231); } html.dark .vale-usos-linha + .vale-usos-linha { border-color: #3F3F46; } /* ⚠ A data não encolhe: em linha estreita ela é a primeira coisa que quebra, e uma data partida em duas linhas desalinha o extrato inteiro. */ .vale-usos-data { flex: none; opacity: .7; font-variant-numeric: tabular-nums; } .vale-usos-texto { flex: 1 1 auto; word-break: break-word; } /* ⚠ `tabular-nums` nos valores: é uma coluna de números para conferir, e em fonte proporcional "R$ 289,90" e "R$ 90,00" desencontram — a mesma razão do resumo da conta a receber. */ .vale-usos-valor { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; } /* O valor que VOLTOU ao vale no estorno (11/09/2026), em verde como o saldo vivo: é crédito devolvido ao cliente. Na cor do gasto, a linha se leria como um segundo uso. */ .vale-usos-devolvido { color: #15803D; } html.dark .vale-usos-devolvido { color: #4ADE80; } /* Verde só enquanto há o que gastar: vale zerado pintado de verde faria o operador prometer um crédito que não existe mais. */ .vale-usos-saldo-vivo { color: #15803D; } .vale-usos-saldo-zerado { opacity: .6; } html.dark .vale-usos-saldo-vivo { color: #4ADE80; } /* ------------------------------------------------------------------ Itens da devolução (14/08/2026, Fase 6): o modal que diz o que voltou. ⚠ O depósito de destino aparece em cada linha porque é o que distingue peça que voltou ao vendável de peça que foi para a avaria — duas devoluções de mesmo valor são indistinguíveis sem essa palavra. ------------------------------------------------------------------ */ .devol-itens { font-size: .8125rem; line-height: 1.5; } .devol-itens-lista { list-style: none; margin: 0; padding: 0; max-height: 45vh; overflow-y: auto; } .devol-itens-linha { display: flex; align-items: baseline; gap: .75rem; padding: .4rem .25rem; } .devol-itens-linha + .devol-itens-linha { border-top: 1px dashed rgb(228 228 231); } html.dark .devol-itens-linha + .devol-itens-linha { border-color: #3F3F46; } /* A quantidade não encolhe: quebrada em duas linhas, desalinha o extrato todo. */ .devol-itens-qtd { flex: none; font-variant-numeric: tabular-nums; opacity: .7; } .devol-itens-texto { flex: 1 1 auto; word-break: break-word; } /* Discreto de propósito: é qualificação do item, não outro item. */ .devol-itens-deposito { opacity: .55; font-size: .75rem; white-space: nowrap; } .devol-itens-valor { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; } .devol-itens-rodape { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; border-top: 1px solid rgb(228 228 231); font-size: .875rem; } html.dark .devol-itens-rodape { border-color: #3F3F46; } /* Quem lançou o movimento (14/08/2026). Empilhado na célula da descrição, no mesmo tom discreto da referência à OS: é informação de auditoria, não a informação principal da linha — quem lê o extrato procura valor e data. ⚠ Itálico e não negrito: precisa ser legível sem competir com a descrição. */ /* ⚠ De `block` para `inline` em 20/08: era a quarta coisa empilhada na célula e cada uma cobrava uma linha inteira da tabela. Segue no mesmo tom discreto, agora na mesma linha, depois de um ponto médio. */ .razao-autor { display: inline; font-size: 0.6875rem; color: #94a3b8; font-style: italic; } .razao-autor::before { content: " · "; } html.dark .razao-autor { color: #64748b; } /* ------------------------------------------------------------------ Duas classes que estavam ÓRFÃS (14/08/2026): o markup as usava e o CSS não as tinha. Sem build de front isso não quebra nada — só some espaçamento e alinhamento, em silêncio, e foi assim que passaram meses despercebidas. ------------------------------------------------------------------ */ /* O bloco "nada pedindo atenção" do widget de análise. O FILHO (.sinal-vazio-titulo) já tinha cor; o container não tinha nada, então a mensagem boa aparecia colada na borda, sem o respiro que o estado vazio pede. ⚠ Estado vazio é informação POSITIVA aqui — o verde é do título, e o fundo fica neutro para não parecer alerta. */ .sinal-vazio { padding: 1rem 0.9rem; border: 1px dashed rgb(228 228 231); border-radius: 0.6rem; background: #FAFAF9; } html.dark .sinal-vazio { border-color: #3F3F46; background: #18181B; } /* O RETRATO DA SAÍDA no modal do termo: o que o cliente viu quando assinou. É um

, e sem regra caía no padrão do navegador — rótulo numa linha, valor indentado na seguinte. Vira duas colunas, que é como se confere prova. ⚠ `tabular-nums` no valor: a lista mistura texto e números (quantidades, valores), e conferir foto congelada é leitura de coluna. */ .os-retrato { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0.35rem 0 0; font-size: 0.85rem; } .os-retrato dt { color: #6B7280; white-space: nowrap; } .os-retrato dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-word; } html.dark .os-retrato dt { color: #9CA3AF; } /* ------------------------------------------------------------------ O LADO ESCURO QUE FALTAVA (14/08/2026) — e o modo de falha é o pior. MEDIDO: `text-gray-500/600/700` e `dark:text-gray-400` EXISTEM no CSS compilado do Filament; `dark:text-gray-300` NÃO. Onde o par claro/escuro usa a 300, o tema escuro MANTÉM o cinza escuro do modo claro — texto escuro sobre fundo escuro. Atinge o DRE e o Fluxo de Caixa, onde o que fica ilegível é número de dinheiro. ⚠ Cobre SÓ o tema escuro, de propósito: a clara já vem do Filament e continua valendo. Redefinir `text-gray-600` à mão criaria dois donos da mesma regra no dia em que o framework passasse a compilá-la. ⚠⚠ E a `-400` foi deixada em paz: ela EXISTE. Só não parecia existir quando conferida com grep improvisado — o escape do `\:` mangueava o padrão. Quem conferir isto de novo: use o auditor, que monta o seletor literal e acerta. ------------------------------------------------------------------ */ html.dark .txt-claro-no-escuro { color: #D1D5DB; } /* ------------------------------------------------------------------ O MENU DE AÇÕES do Copilot (Fase 2, 14/08/2026) — a metade que funciona sem IA nenhuma. Empresa sem motor configurado continua com estes botões. ⚠ Classes próprias, como todo o bloco `.copiloto-*`: sem build de front, utilitária do Tailwind que não esteja no CSS compilado do Filament é no-op silencioso. ------------------------------------------------------------------ */ .copiloto-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem 0.75rem 0; } .copiloto-acao { font-size: 0.75rem; padding: 0.35rem 0.6rem; border-radius: 0.4rem; border: 1px solid rgb(228 228 231); background: transparent; color: inherit; cursor: pointer; } .copiloto-acao:hover { border-color: var(--winik-dourado); } /* ⚠ O botão que GRAVA é o único destacado: num painel de conversa, "Confirmar e gravar" precisa se distinguir de "Cancelar" sem o operador ler. */ .copiloto-acao--forte { background: var(--winik-dourado); border-color: var(--winik-dourado); color: #0C0C0E; font-weight: 600; } html.dark .copiloto-acao { border-color: #3F3F46; } .copiloto-confirmar { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem 0.75rem; border-top: 1px solid rgb(228 228 231); } html.dark .copiloto-confirmar { border-color: #3F3F46; } .copiloto-confirmar-titulo { margin: 0; font-size: 0.8rem; font-weight: 600; } .copiloto-campo { width: 100%; font-size: 0.8rem; font-family: inherit; padding: 0.4rem 0.5rem; border: 1px solid rgb(228 228 231); border-radius: 0.4rem; background: transparent; color: inherit; resize: vertical; } html.dark .copiloto-campo { border-color: #3F3F46; } /* O interruptor que manda o texto ao cliente. Discreto, mas legível: ele decide se um texto gerado aparece no documento que o cliente lê. */ .copiloto-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; opacity: 0.85; } .copiloto-confirmar-botoes { display: flex; justify-content: flex-end; gap: 0.4rem; } /* A dica acima da caixa do diagnóstico (15/08/2026): ela diz O QUE é o texto que já está ali. Sem isso, o relato do cliente seria confirmado como se fosse a constatação do técnico. Discreta, mas legível — é aviso, não decoração. */ .copiloto-dica { margin: 0; font-size: 0.7rem; opacity: 0.7; line-height: 1.35; } /* O formulário de pagamento dentro da etapa do PDV (16/08/2026): os campos que eram do modal de fechar. Respiro próprio para não colar no resumo de valores que vive logo acima. */ .pdv-pagamento-form { margin-top: 0.75rem; } /* O interruptor do leitor de código de barras (16/08/2026): discreto, acima do campo de bipe. O texto de apoio muda com o estado porque a consequência é invisível — o operador precisa saber que o cursor deixou de voltar sozinho. */ .pdv-leitor { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-bottom: 0.4rem; } .pdv-leitor small { opacity: 0.6; } /* O filtro de categoria da busca por nome. ⚠⚠ CORES EXPLÍCITAS, nunca transparent/inherit (16/08/2026, apontado pelo dono: "o campo e a letra estão na cor branca"). O `.pdv-busca-campo` usa fundo transparente e cor herdada — num sobre fundo escuro funciona, mas o dropdown NATIVO de um