/* ============================================================================= Tema do CMS da instituição ============================================================================= Referência visual: SDD E MVP/cms UI-UX (as duas capturas do painel Medonix). Anatomia que estamos a reproduzir: · sidebar como CARTÃO FLUTUANTE arredondado, com margem à volta · pesquisa DENTRO da sidebar, não na barra de topo · rótulos de secção em caixa normal ("Menu", "Outros"), não em maiúsculas · itens com ícone, ~44px, e o activo como PÍLULA sólida com seta à direita · cartão de utilizador no fundo da sidebar · barra de topo sem fundo nem contorno — as acções são pílulas · cartões brancos, raio 20px, contorno subtil, sem sombra · cabeçalho de tabela numa banda tingida com cantos arredondados Ficheiro estático, registado por FilamentAsset::register() no AppServiceProvider. NÃO é compilado por Tailwind — de propósito: um segundo build de Tailwind a competir com o do Inertia é uma fonte garantida de conflitos. As cores vêm todas de --cms-*, injectadas a partir da base de dados. Mudar a cor principal em /cms/aparencia/gerir-cores repinta o painel e o site ao mesmo tempo. Nenhum hexadecimal aqui é decisão de design — são neutros de estrutura e recuos para quando as definições ainda não existem. ========================================================================== */ :root { /* Raios generosos, como na referência. */ --cms-radius-cartao: 20px; --cms-radius: var(--cms-radius-md, 14px); --cms-radius-sm: 12px; --cms-radius-pilula: 999px; --cms-bg: var(--cms-color-bg-soft, #f8f8f8); --cms-sidebar: #f5f4f7; --cms-surface: var(--cms-color-surface, #ffffff); --cms-border: var(--cms-color-border, #e6eaea); --cms-text: var(--cms-color-text, #111827); --cms-muted: var(--cms-color-text-muted, #6b7280); --cms-primary: var(--cms-color-primary, #0a7f4c); --cms-primary-fg: var(--cms-color-primary-fg, #ffffff); /* Margem à volta do cartão da sidebar. É o que a faz "flutuar". */ --cms-sidebar-margem: 0.75rem; } /* ---------------------------------------------------------------- estrutura */ .fi-body { background-color: var(--cms-bg); } .fi-main { max-width: none; } .fi-main-content { padding-top: 0.5rem; padding-bottom: 2rem; } /* ============================================================================= SIDEBAR — cartão flutuante ========================================================================== */ .fi-sidebar { background-color: transparent; border: 0; } /* Recolher a sidebar. O Filament declara --collapsed-sidebar-width no mas nunca a aplica em CSS: recolhido, a barra ficava com a largura do seu conteúdo (265px) e o conteúdo nunca recuperava o espaço. Aqui fechamo-la mesmo, num carril de ícones. */ @media (min-width: 64rem) { .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) { width: var(--collapsed-sidebar-width); overflow-x: hidden; } /* Recolhida não há espaço para o rótulo de secção nem para a pesquisa. */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-label, .fi-sidebar:not(.fi-sidebar-open) .cms-sidebar-pesquisa { display: none; } .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn { justify-content: center; padding-inline: 0; } /* A seta do item activo só faz sentido quando há rótulo ao lado dela. */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::after { display: none; } /* Recolhida sobra o avatar; nome e e-mail não cabem em 76px. */ .fi-sidebar:not(.fi-sidebar-open) .cms-sidebar-perfil-texto, .fi-sidebar:not(.fi-sidebar-open) .cms-sidebar-perfil-seta { display: none; } .fi-sidebar:not(.fi-sidebar-open) .cms-sidebar-perfil-link { justify-content: center; } } /* O cartão propriamente dito. `inset` em vez de `height: 100%` para a margem ser igual em cima e em baixo sem contas com a altura da barra de topo. */ @media (min-width: 64rem) { .fi-sidebar.fi-sidebar-open { padding: var(--cms-sidebar-margem); } /* A navegação e o cartão de perfil são irmãos no DOM, mas têm de ler-se como UM cartão só: mesma cor, e o raio dividido entre os dois. */ .fi-sidebar.fi-sidebar-open .fi-sidebar-nav { background-color: var(--cms-sidebar); border-radius: var(--cms-radius-cartao) var(--cms-radius-cartao) 0 0; /* Contorno obrigatório: o fundo da página (#f6f8f8) e o do cartão (#f5f4f7) estão a três pontos um do outro. Sem traço, o cartão não se lê como cartão — lê-se como uma coluna sem forma. */ border: 1px solid var(--cms-border); border-bottom: 0; } .fi-sidebar.fi-sidebar-open .cms-sidebar-perfil { background-color: var(--cms-sidebar); border-radius: 0 0 var(--cms-radius-cartao) var(--cms-radius-cartao); border: 1px solid var(--cms-border); border-top: 1px solid color-mix(in oklab, var(--cms-text) 8%, transparent); } /* Sem perfil (sessão sem utilizador) o cartão fecha-se sozinho. */ .fi-sidebar.fi-sidebar-open .fi-sidebar-nav:last-child { border-radius: var(--cms-radius-cartao); } } .fi-sidebar-header { background-color: var(--cms-sidebar); border-bottom: 0; box-shadow: none; padding-inline: 1rem; } .fi-sidebar-nav { padding: 0.5rem 0.75rem 1rem; gap: 0.125rem; } /* O Filament põe `gap: 28px` neste contentor flex, que somaria ao espaçamento que definimos abaixo. O intervalo entre grupos vive num sítio só. */ .fi-sidebar-nav-groups { gap: 0; } /* --- rótulos de secção: "Menu", "Outros" — caixa normal, discretos -------- */ .fi-sidebar-group-label { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; /* --cms-muted puro dava 4.41:1 sobre o cartão da sidebar — abaixo dos 4.5 exigidos a 14px. Escurecido a partir do MESMO token, não de um valor novo, para continuar a seguir a cor definida no CMS. */ color: color-mix(in oklab, var(--cms-muted) 82%, var(--cms-text)); opacity: 1; padding-inline: 0.75rem; margin-bottom: 0.375rem; } .fi-sidebar-group + .fi-sidebar-group { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid color-mix(in oklab, var(--cms-text) 8%, transparent); } /* A guia vertical com pontos dos itens agrupados não existe na referência. */ .fi-sidebar-item-grouped-border, .fi-sidebar-item-grouped-border-part { display: none; } /* --- itens ---------------------------------------------------------------- */ .fi-sidebar-item-btn { position: relative; border-radius: var(--cms-radius-sm); padding-block: 0.625rem; padding-inline: 0.75rem; gap: 0.75rem; font-size: 0.9375rem; font-weight: 400; color: var(--cms-text); } .fi-sidebar-item-btn .fi-icon, .fi-sidebar-item-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; /* Contorno fino, como os ícones da referência. */ stroke-width: 1.6; } .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover { background-color: color-mix(in oklab, var(--cms-primary) 8%, transparent); color: var(--cms-primary); } /* --- item activo: pílula sólida com seta ---------------------------------- */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn { background-color: var(--cms-primary); border-radius: var(--cms-radius-pilula); font-weight: 500; padding-inline: 1rem; } /* O `*` é necessário: o Filament põe o rótulo num com cor própria, e sem isto o texto ficava da mesma cor do fundo — literalmente ilegível. */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn * { color: var(--cms-primary-fg) !important; } /* A seta à direita do item activo, como na referência. Desenhada em CSS para não depender de nenhum ficheiro nem de markup extra. */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::after { content: ''; position: absolute; inset-inline-end: 1rem; width: 0.4375rem; height: 0.4375rem; border-top: 1.75px solid currentColor; border-inline-end: 1.75px solid currentColor; transform: rotate(45deg); opacity: 0.85; } .fi-sidebar-item-badge-ctn { inset-inline-end: 2rem; } /* --- pesquisa dentro da sidebar ------------------------------------------- */ /* Fica colada ao topo: a navegação rola sozinha para mostrar o item activo, e sem isto a pesquisa desaparecia de vista logo ao entrar. */ .cms-sidebar-pesquisa { position: sticky; top: 0; z-index: 1; margin: 0 0 1.25rem; padding-block: 0.5rem; background-color: var(--cms-sidebar); } .cms-sidebar-pesquisa-btn { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.6875rem 0.875rem; border-radius: var(--cms-radius-sm); background-color: var(--cms-surface); border: 1px solid color-mix(in oklab, var(--cms-text) 8%, transparent); color: var(--cms-muted); font-size: 0.9375rem; text-align: start; cursor: pointer; transition: border-color 0.2s ease; } .cms-sidebar-pesquisa-btn:hover { border-color: color-mix(in oklab, var(--cms-primary) 40%, transparent); } .cms-sidebar-pesquisa-btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .cms-sidebar-pesquisa-texto { flex: 1; } /* As teclas do atalho, como na referência. */ .cms-sidebar-pesquisa-tecla { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; padding-inline: 0.25rem; border-radius: 0.375rem; background-color: color-mix(in oklab, var(--cms-text) 6%, transparent); font-size: 0.6875rem; font-weight: 500; color: var(--cms-muted); } /* --- cartão do utilizador, no fundo --------------------------------------- */ .cms-sidebar-perfil { padding: 0.75rem; border-top: 1px solid color-mix(in oklab, var(--cms-text) 8%, transparent); } .cms-sidebar-perfil-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: var(--cms-radius-sm); transition: background-color var(--cms-dur-rapido, 220ms) ease; } .cms-sidebar-perfil-link:hover { background-color: color-mix(in oklab, var(--cms-text) 5%, transparent); } .cms-sidebar-perfil-foto, .cms-sidebar-perfil-iniciais { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--cms-radius-pilula); object-fit: cover; } .cms-sidebar-perfil-iniciais { display: inline-flex; align-items: center; justify-content: center; background-color: color-mix(in oklab, var(--cms-primary) 14%, transparent); color: var(--cms-primary); font-size: 0.75rem; font-weight: 600; } /* `min-width: 0` para o e-mail longo poder ser cortado em vez de esticar a caixa e empurrar a seta para fora do cartão. */ .cms-sidebar-perfil-texto { display: grid; flex: 1; min-width: 0; } .cms-sidebar-perfil-nome, .cms-sidebar-perfil-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cms-sidebar-perfil-nome { font-size: 0.875rem; font-weight: 500; color: var(--cms-text); } .cms-sidebar-perfil-email { font-size: 0.75rem; color: var(--cms-muted); } .cms-sidebar-perfil-seta { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--cms-muted); } /* ============================================================================= BARRA DE TOPO — sem fundo, acções em pílula ========================================================================== */ /* Na referência não há barra de topo desenhada: o cabeçalho da página e as suas acções assentam directamente sobre o fundo. `.fi-topbar` é o próprio elemento pintado — não um `> nav` lá dentro. */ .fi-topbar, .fi-topbar > nav { background-color: transparent; border-bottom: 0; box-shadow: none; } /* A pesquisa global passou para a sidebar; no topo ficaria repetida. */ @media (min-width: 64rem) { .fi-topbar .fi-global-search { display: none; } } .fi-topbar-item-btn, .fi-topbar .fi-icon-btn { border-radius: var(--cms-radius-pilula); } /* ------------------------------------------------------- cabeçalho da página */ .fi-header { padding-bottom: 1.25rem; } .fi-header-heading { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; color: var(--cms-text); } .fi-header-subheading { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--cms-muted); } /* ============================================================================= BOTÕES — pílulas ========================================================================== */ .fi-btn, .fi-dropdown-trigger > .fi-btn { border-radius: var(--cms-radius-pilula); font-weight: 500; box-shadow: none; } .fi-btn.fi-size-md { padding-inline: 1.25rem; padding-block: 0.625rem; } /* Botão de contorno: traço na cor da marca, como o "Last Week" da referência. */ .fi-btn.fi-btn-outlined { border-color: color-mix(in oklab, var(--cms-primary) 45%, transparent); color: var(--cms-primary); } .fi-ta-actions .fi-btn, .fi-ac .fi-btn.fi-size-sm { border-radius: var(--cms-radius-pilula); } /* ============================================================================= CARTÕES E SECÇÕES ========================================================================== */ .fi-section, .fi-wi-stats-overview-stat, .fi-ta-ctn, .fi-fo-component-ctn > .fi-fieldset { background-color: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-radius-cartao); box-shadow: none; } .fi-section-content-ctn, .fi-section-header { padding-inline: 1.5rem; } .fi-section-header { padding-top: 1.375rem; padding-bottom: 0.875rem; } .fi-section-header-heading { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; } .fi-section-header-description { font-size: 0.8125rem; color: var(--cms-muted); } /* ============================================================================= ACÇÕES RÁPIDAS ============================================================================= Os três cartões do topo da referência ("Organize A Visit", "Ask For A Home Healthcare Visit", "Routine Yearly Health Inspection"): cartão branco, ícone num disco de cor, título e uma linha de apoio. ========================================================================== */ .cms-accoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 0.5rem; } .cms-accao { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; background-color: var(--cms-surface); border: 1px solid var(--cms-border); border-radius: var(--cms-radius-cartao); transition: border-color var(--cms-dur-rapido, 220ms) ease, transform var(--cms-dur-rapido, 220ms) ease; } .cms-accao:hover { border-color: color-mix(in oklab, var(--cms-primary) 40%, var(--cms-border)); transform: translateY(-2px); } /* O disco de cor. O tom vem do estado da acção, não da estética: `aviso` significa que há trabalho à espera. */ .cms-accao-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--cms-radius-pilula); background-color: color-mix(in oklab, var(--cms-primary) 12%, transparent); color: var(--cms-primary); } .cms-accao-icone svg { width: 1.375rem; height: 1.375rem; } .cms-accao[data-tom='principal'] .cms-accao-icone { background-color: var(--cms-primary); color: var(--cms-primary-fg); } .cms-accao[data-tom='aviso'] .cms-accao-icone { background-color: color-mix(in oklab, var(--cms-color-warning, #d97706) 18%, transparent); color: var(--cms-color-warning, #b45309); } .cms-accao[data-tom='destaque'] .cms-accao-icone { background-color: color-mix(in oklab, var(--cms-color-info, #4f46e5) 15%, transparent); color: var(--cms-color-info, #4338ca); } .cms-accao[data-tom='neutro'] .cms-accao-icone { background-color: color-mix(in oklab, var(--cms-text) 7%, transparent); color: var(--cms-text); } /* `min-width: 0` para o texto longo ser cortado em vez de esticar o cartão. */ .cms-accao-texto { display: grid; flex: 1; min-width: 0; gap: 0.125rem; } .cms-accao-titulo { font-size: 0.9375rem; font-weight: 500; color: var(--cms-text); } .cms-accao-descricao { font-size: 0.8125rem; color: var(--cms-muted); } .cms-accao-badge { flex-shrink: 0; min-width: 1.5rem; padding: 0.1875rem 0.5rem; border-radius: var(--cms-radius-pilula); background-color: color-mix(in oklab, var(--cms-color-warning, #d97706) 18%, transparent); color: var(--cms-color-warning, #b45309); font-size: 0.75rem; font-weight: 600; text-align: center; } /* ------------------------------------------------------- indicadores (widgets) */ .fi-wi-stats-overview-stat { padding: 1.5rem; transition: border-color 0.25s ease; /* O gráfico de fundo do indicador é desenhado à largura toda e transbordava pelo canto arredondado. */ overflow: hidden; } .fi-wi-stats-overview-stat:hover { border-color: color-mix(in oklab, var(--cms-primary) 35%, var(--cms-border)); } .fi-wi-stats-overview-stat-label { font-size: 0.9375rem; font-weight: 500; color: var(--cms-text); } /* O número grande é o herói do cartão. */ .fi-wi-stats-overview-stat-value { margin-top: 0.75rem; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.035em; color: var(--cms-text); font-variant-numeric: tabular-nums; } .fi-wi-stats-overview-stat-description { margin-top: 0.75rem; font-size: 0.8125rem; } /* ============================================================================= TABELAS ========================================================================== */ /* Densidade das linhas. O espaço vertical NÃO vem da célula (padding 0), vem do `.fi-ta-text` lá dentro, com 16px. Mexer na célula apenas soma ao que já lá está. */ .fi-ta-cell { padding-block: 0; } .fi-ta-text, .fi-ta-actions, .fi-ta-image, .fi-ta-icon { padding-block: 0.625rem; } .fi-ta-text-item-label { font-size: 0.9375rem; } .fi-ta-text-description { font-size: 0.8125rem; } /* O cabeçalho da referência é uma banda tingida com cantos arredondados, destacada do corpo da tabela. */ .fi-ta-header-row { background-color: var(--cms-bg); } .fi-ta-header-cell { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cms-muted); padding-block: 0.875rem; border-bottom: 0; } .fi-ta-header-row > :first-child { border-start-start-radius: var(--cms-radius-sm); border-end-start-radius: var(--cms-radius-sm); } .fi-ta-header-row > :last-child { border-start-end-radius: var(--cms-radius-sm); border-end-end-radius: var(--cms-radius-sm); } .fi-ta-row:hover { background-color: color-mix(in oklab, var(--cms-primary) 3%, transparent); } .fi-ta-header-ctn, .fi-ta-content-ctn { padding-inline: 1rem; } /* --- distintivos: pílulas em tons suaves ---------------------------------- */ .fi-badge { border-radius: var(--cms-radius-pilula); padding-inline: 0.75rem; padding-block: 0.3125rem; font-size: 0.75rem; font-weight: 500; border: 0; } /* ============================================================================= FORMULÁRIOS ========================================================================== */ .fi-input, .fi-select-input, .fi-fo-rich-editor .fi-fo-rich-editor-content { border-radius: var(--cms-radius-sm); } .fi-fo-field-wrp-label { font-size: 0.875rem; font-weight: 500; color: var(--cms-text); } .fi-fo-field-wrp-hint, .fi-fo-field-wrp-helper-text { font-size: 0.8125rem; color: var(--cms-muted); } /* ============================================================================= PERFIS INTERNOS, no login do painel ============================================================================= Substitui a antiga página /area-restrita do site público: quem trabalha com a a plataforma entra pelo CMS, não por um painel dentro do webfront. ========================================================================== */ .cms-perfis-internos { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--cms-border); } .cms-perfis-internos-titulo { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cms-muted); } .cms-perfis-internos-lista { margin-top: 0.875rem; display: grid; gap: 0.625rem; } .cms-perfis-internos-item { display: flex; align-items: flex-start; gap: 0.625rem; } .cms-perfis-internos-icone { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; color: var(--cms-primary); } .cms-perfis-internos-nome { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; } .cms-perfis-internos-acesso { font-size: 0.75rem; line-height: 1.45; color: var(--cms-muted); } .cms-perfis-internos-nota { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.5; color: var(--cms-muted); } .cms-perfis-internos-nota a { color: var(--cms-primary); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 40rem) { .cms-perfis-internos { margin-top: 1.5rem; padding-top: 1.25rem; } .cms-perfis-internos-acesso { display: none; } .cms-perfis-internos-lista { gap: 0.5rem; } } /* ============================================================================= MODO ESCURO ========================================================================== */ /* O Filament põe `dark` no . Ancorar em `.fi-body` deixava de fora as páginas de layout simples (login, recuperação de palavra-passe), onde os tokens recaíam nos valores claros e o texto secundário descia a 3.2:1. */ html.dark, .fi-body.dark, .dark .fi-body { --cms-surface: #16211f; --cms-bg: #0d1614; --cms-sidebar: #131e1c; --cms-border: #24332f; --cms-text: #e8edec; --cms-muted: #94a6a2; } /* O Filament usa o tom 600 da cor da marca com texto branco, o que dá 3.38:1 — abaixo dos 4.5:1 exigidos para texto de 14px. O tom 700 da MESMA escala (derivada da cor definida no CMS) sobe para ~5.4:1. */ html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) { background-color: var(--primary-700); } html.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover { background-color: var(--primary-800); } /* ============================================================================= MOBILE — a referência é de secretária; o painel tem de servir o telemóvel ============================================================================= SDD §2: mobile-first em TODO o sistema, CMS incluído. Em ecrã pequeno a sidebar deixa de ser cartão flutuante e volta a gaveta de largura total, que é o padrão que a mão espera. ========================================================================== */ @media (max-width: 63.99rem) { .fi-sidebar { --cms-sidebar-margem: 0; } .fi-sidebar-nav, .fi-sidebar-header { background-color: var(--cms-sidebar); border-radius: 0; } .fi-topbar > nav { background-color: var(--cms-bg); } .fi-header-heading { font-size: 1.5rem; } .fi-main-content { padding-inline: 1rem; } } /* ============================================================================= ACESSIBILIDADE E MOVIMENTO ============================================================================= A mesma assinatura do site público. Um painel que se move com curvas diferentes do site parece outro produto. ========================================================================== */ :root { --cms-ease-saida: cubic-bezier(0.16, 1, 0.3, 1); --cms-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1); --cms-dur-instante: 120ms; --cms-dur-rapido: 220ms; --cms-dur-medio: 400ms; } .fi-sidebar-item-btn { transition: background-color var(--cms-dur-rapido) var(--cms-ease-saida), color var(--cms-dur-rapido) var(--cms-ease-saida), transform var(--cms-dur-instante) var(--cms-ease-saida); } /* Resposta ao toque: o item afunda um pouco. */ .fi-sidebar-item-btn:active { transform: scale(0.985); } .fi-btn { transition: background-color var(--cms-dur-rapido) var(--cms-ease-saida), transform var(--cms-dur-instante) var(--cms-ease-saida); } .fi-btn:active { transform: scale(0.97); } .fi-sidebar-item-btn:focus-visible, .fi-btn:focus-visible, .cms-sidebar-pesquisa-btn:focus-visible { outline: 2px solid var(--cms-primary); outline-offset: 2px; } /* Quem pediu menos movimento não leva transições nenhumas. */ @media (prefers-reduced-motion: reduce) { .fi-sidebar-item-btn, .fi-wi-stats-overview-stat, .fi-ta-row, .fi-btn { transition: none; } .fi-sidebar-item-btn:active, .fi-btn:active { transform: none; } } /* ============================================================================= CARREGAMENTO DE FICHEIROS — rótulo em pt-AO ============================================================================= O Filament passa `app()->getLocale()` ao FilePond, e o nosso locale é `pt_AO`. O FilePond traz `pt` e `pt_BR` no pacote, mas não `pt_AO`, por isso recaía no inglês: "Drag & Drop your files or Browse". Não dá para corrigir na origem — a chamada está dentro de uma classe do vendor, não numa vista publicável. Colapsamos o texto de origem e escrevemos o nosso por cima. O