/* TuNF · Painel do cliente v2 · ajustes visuais sobre o Filament v3.3 (SPEC-0026 F2) * * Regras: * - Tudo escopado em .fi-panel-app (classe que o Filament põe no do painel * /painel). O painel admin não é tocado (ADR-0007). * - Só lê variáveis de tokens.css; nenhum valor de cor novo aqui. * - Um bloco por componente, comentado. Se um update do Filament mudar um .fi-*, * o bloco correspondente só deixa de aplicar: o visual volta ao padrão, sem perda * de função (SPEC-0026 §6). * - Sem @apply nem utilitárias: o painel usa o CSS pré-compilado do Filament. */ /* ---------------------------------------------------------------- base */ .fi-body.fi-panel-app { /* primária no claro = emerald-700 (contraste 5,5:1 com branco — SPEC §4.4). A escala do Filament é "r, g, b" (lida com rgba(var(--c-600), 1)); o botão usa 600 e o hover, 500. */ --primary-500: 5, 150, 105; --primary-600: 4, 120, 87; --primary-700: 6, 95, 70; background: var(--tn-bg); color: var(--tn-text); font-family: var(--tn-font); } .dark .fi-body.fi-panel-app { /* primária no escuro = emerald-400 (#34d399), hover emerald-300 */ --primary-400: 110, 231, 183; --primary-500: 52, 211, 153; } /* valores e datas alinham melhor com algarismos tabulares */ .fi-body.fi-panel-app .fi-ta-text, .fi-body.fi-panel-app .fi-badge, .fi-body.fi-panel-app .fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; } .fi-body.fi-panel-app :focus-visible { outline: 2px solid var(--tn-primary); outline-offset: 2px; } /* ---------------------------------------------------------------- sidebar */ .fi-body.fi-panel-app .fi-sidebar { background: var(--tn-sidebar-bg); border-inline-end: 1px solid var(--tn-border); } .fi-body.fi-panel-app .fi-sidebar-header { background: var(--tn-sidebar-bg); box-shadow: none; border-bottom: 1px solid var(--tn-border); } .fi-body.fi-panel-app .fi-sidebar-nav { row-gap: var(--tn-s-4); } .fi-body.fi-panel-app .fi-sidebar-nav-groups { row-gap: var(--tn-s-4); } .fi-body.fi-panel-app .fi-sidebar-group-label { font-size: var(--tn-fs-xs); font-weight: var(--tn-fw-medium); color: var(--tn-text-3); } .fi-body.fi-panel-app .fi-sidebar-item-button { min-height: var(--tn-nav-item-h); padding-block: 0; padding-inline: 10px; border-radius: var(--tn-r-sm); column-gap: 10px; } .fi-body.fi-panel-app .fi-sidebar-item-button:hover { background: var(--tn-hover); } .fi-body.fi-panel-app .fi-sidebar-item-icon { width: 18px; height: 18px; } .fi-body.fi-panel-app .fi-sidebar-item-label { font-size: var(--tn-fs-base); font-weight: var(--tn-fw-medium); color: var(--tn-text-2); } .fi-body.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-button { background: var(--tn-surface-3); } .fi-body.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label { font-weight: var(--tn-fw-semibold); color: var(--tn-text); } .fi-body.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon { color: var(--tn-primary-soft-fg); } /* seletor de empresa: botão com borda, raio 10 */ .fi-body.fi-panel-app .fi-sidebar-nav-tenant-menu-ctn .fi-tenant-menu-trigger { border: 1px solid var(--tn-border); border-radius: var(--tn-r-control); padding: var(--tn-s-2) 10px; background: var(--tn-surface); } /* ---------------------------------------------------------------- topbar */ .fi-body.fi-panel-app .fi-topbar > nav { background: var(--tn-bg); box-shadow: none; border-bottom: 1px solid var(--tn-border); } /* ---------------------------------------------------------------- cabeçalho da página */ .fi-body.fi-panel-app .fi-header-heading { font-size: var(--tn-fs-2xl); font-weight: var(--tn-fw-semibold); letter-spacing: var(--tn-tracking-tight); color: var(--tn-text); } .fi-body.fi-panel-app .fi-header-subheading { font-size: var(--tn-fs-base); color: var(--tn-text-3); } /* ---------------------------------------------------------------- botões */ .fi-body.fi-panel-app .fi-btn { border-radius: var(--tn-r-control); } /* no escuro, texto da primária é a tinta escura da marca (#022c22), não branco */ .dark .fi-body.fi-panel-app .fi-btn.fi-color-primary:not(.fi-btn-outlined), .dark .fi-body.fi-panel-app .fi-btn.fi-color-primary:not(.fi-btn-outlined) .fi-btn-icon { color: var(--tn-primary-fg); } /* ---------------------------------------------------------------- cards (seções e tabelas) */ .fi-body.fi-panel-app .fi-section, .fi-body.fi-panel-app .fi-ta-ctn, .fi-body.fi-panel-app .fi-wi-stats-overview-stat { background: var(--tn-surface); border-radius: var(--tn-r-lg); box-shadow: var(--tn-shadow-sm); --tw-ring-color: var(--tn-border); } .fi-body.fi-panel-app .fi-ta-record { background: var(--tn-surface); } .fi-body.fi-panel-app .fi-ta-record:hover { background: var(--tn-hover); } /* ---------------------------------------------------------------- abas em pílula */ .fi-body.fi-panel-app .fi-tabs:not(.fi-contained) { background: transparent; box-shadow: none; --tw-ring-color: transparent; padding: 0; gap: var(--tn-s-1); margin-inline: 0; } .fi-body.fi-panel-app .fi-tabs:not(.fi-contained) .fi-tabs-item { min-height: 34px; padding-block: 0; padding-inline: var(--tn-s-3); border: 1px solid transparent; border-radius: var(--tn-r-pill); font-size: var(--tn-fs-sm); } .fi-body.fi-panel-app .fi-tabs:not(.fi-contained) .fi-tabs-item-label { color: var(--tn-text-2); } .fi-body.fi-panel-app .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active { background: var(--tn-surface); border-color: var(--tn-border-strong); box-shadow: var(--tn-shadow-sm); } .fi-body.fi-panel-app .fi-tabs:not(.fi-contained) .fi-tabs-item.fi-active .fi-tabs-item-label { color: var(--tn-text); } /* ---------------------------------------------------------------- badges */ .fi-body.fi-panel-app .fi-badge { border-radius: var(--tn-r-pill); } /* ---------------------------------------------------------------- menus (dropdown "⋯") */ .fi-body.fi-panel-app .fi-dropdown-panel { border-radius: var(--tn-r-md); box-shadow: var(--tn-shadow-lg); } /* ---------------------------------------------------------------- lista de notas (T3) * No modo layout (Split) o Filament não alinha colunas entre linhas: cada coluna * ganha a largura do conteúdo. As classes tn-col-* (NotaFiscalResource) fixam a * grade a partir de md. Larguras um pouco menores que as do handoff (100·104·136· * 112·124) porque os botões do Filament são mais largos que os do protótipo: a * coluna de ações precisa de 164 px ("Ver erro" + "⋯") e, assim, o cliente ainda * fica com ~125 px em 1280 sem scroll horizontal. No celular (cartão) nada disso * se aplica. */ @media (min-width: 768px) { .fi-body.fi-panel-app .tn-col-numero { width: 88px; } .fi-body.fi-panel-app .tn-col-mes { width: 96px; } .fi-body.fi-panel-app .tn-col-emitida { width: 120px; } .fi-body.fi-panel-app .tn-col-valor { width: 104px; } .fi-body.fi-panel-app .tn-col-situacao { width: 112px; } .fi-body.fi-panel-app .fi-resource-notas .fi-ta-actions { width: 164px; justify-content: flex-end; } } .fi-body.fi-panel-app .tn-col-valor { font-weight: var(--tn-fw-medium); } /* rótulo acima do valor (description position=above) em 12/text-3 */ .fi-body.fi-panel-app .fi-resource-notas .fi-ta-text > p { font-size: var(--tn-fs-xs); color: var(--tn-text-3); } /* ---------------------------------------------------------------- detalhe da nota (F3) * Slide-over de 480 px (--tn-drawer-w). No celular vira folha de baixo para cima, * largura total, a partir de 56 px do topo e com raio 20 no alto (handoff §T3). */ .fi-body.fi-panel-app .fi-modal-slide-over-window.tn-detalhe { max-width: var(--tn-drawer-w); background: var(--tn-surface); } @media (max-width: 767px) { .fi-body.fi-panel-app .fi-modal-slide-over-window.tn-detalhe { max-width: none; margin-top: 56px; height: calc(100dvh - 56px); border-radius: 20px 20px 0 0; } } .fi-body.fi-panel-app .tn-detalhe .fi-modal-heading { font-size: var(--tn-fs-xl); font-weight: var(--tn-fw-semibold); font-variant-numeric: tabular-nums; } .fi-body.fi-panel-app .tn-detalhe .fi-section { box-shadow: none; border-radius: var(--tn-r-md); } /* bloco de erro (danger-soft) e de fila (info-soft) */ .fi-body.fi-panel-app .tn-bloco { display: flex; gap: var(--tn-s-3); padding: var(--tn-s-4); border-radius: var(--tn-r-md); font-size: var(--tn-fs-sm); line-height: var(--tn-lh); } .fi-body.fi-panel-app .tn-bloco-erro { background: var(--tn-danger-soft); color: var(--tn-danger-fg); } .fi-body.fi-panel-app .tn-bloco-info { background: var(--tn-info-soft); color: var(--tn-info-fg); } .fi-body.fi-panel-app .tn-bloco-icone { flex: none; width: 20px; height: 20px; margin-top: 2px; } .fi-body.fi-panel-app .tn-bloco-corpo { display: flex; flex-direction: column; gap: var(--tn-s-3); min-width: 0; } .fi-body.fi-panel-app .tn-bloco-titulo { font-size: var(--tn-fs-base); font-weight: var(--tn-fw-semibold); } .fi-body.fi-panel-app .tn-bloco-texto { color: var(--tn-text); } .fi-body.fi-panel-app .tn-bloco-item { display: flex; flex-direction: column; gap: var(--tn-s-1); } .fi-body.fi-panel-app .tn-bloco-original summary { cursor: pointer; font-weight: var(--tn-fw-medium); } .fi-body.fi-panel-app .tn-bloco-original p { margin-top: var(--tn-s-1); color: var(--tn-text-2); overflow-wrap: anywhere; } .fi-body.fi-panel-app .tn-bloco-codigo { font-size: var(--tn-fs-xs); color: var(--tn-text-3); } /* linha do tempo: pontos de 10 px ligados por linha de 2 px */ .fi-body.fi-panel-app .tn-timeline { list-style: none; margin: 0; padding: 0; } .fi-body.fi-panel-app .tn-timeline-item { position: relative; display: flex; gap: var(--tn-s-3); padding-bottom: var(--tn-s-4); font-size: var(--tn-fs-sm); } .fi-body.fi-panel-app .tn-timeline-item:last-child { padding-bottom: 0; } .fi-body.fi-panel-app .tn-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 2px; background: var(--tn-border); } .fi-body.fi-panel-app .tn-timeline-ponto { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: var(--tn-r-pill); background: var(--tn-neutral); } .fi-body.fi-panel-app .tn-tom-success .tn-timeline-ponto { background: var(--tn-success); } .fi-body.fi-panel-app .tn-tom-danger .tn-timeline-ponto { background: var(--tn-danger); } .fi-body.fi-panel-app .tn-tom-warning .tn-timeline-ponto { background: var(--tn-warning); } .fi-body.fi-panel-app .tn-tom-info .tn-timeline-ponto { background: var(--tn-info); } .fi-body.fi-panel-app .tn-timeline-titulo { font-weight: var(--tn-fw-medium); color: var(--tn-text); } .fi-body.fi-panel-app .tn-timeline-detalhe { color: var(--tn-text-2); } .fi-body.fi-panel-app .tn-timeline-quando { font-size: var(--tn-fs-xs); color: var(--tn-text-3); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- Painel (F4) */ /* círculo tonal com ícone (atenção, convite) */ .fi-body.fi-panel-app .tn-circulo { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--tn-r-pill); background: var(--tn-neutral-soft); color: var(--tn-neutral-fg); } .fi-body.fi-panel-app .tn-circulo-lg { width: 44px; height: 44px; } .fi-body.fi-panel-app .tn-circulo-icone { width: 18px; height: 18px; } .fi-body.fi-panel-app .tn-circulo-lg .tn-circulo-icone { width: 22px; height: 22px; } .fi-body.fi-panel-app .tn-circulo-success { background: var(--tn-success-soft); color: var(--tn-success-fg); } .fi-body.fi-panel-app .tn-circulo-danger { background: var(--tn-danger-soft); color: var(--tn-danger-fg); } .fi-body.fi-panel-app .tn-circulo-warning { background: var(--tn-warning-soft); color: var(--tn-warning-fg); } .fi-body.fi-panel-app .tn-circulo-info { background: var(--tn-info-soft); color: var(--tn-info-fg); } .fi-body.fi-panel-app .tn-circulo-primary { background: var(--tn-primary-soft); color: var(--tn-primary-soft-fg); } /* atenção: "tudo certo" e lista de itens */ .fi-body.fi-panel-app .tn-atencao-ok { display: flex; align-items: flex-start; gap: var(--tn-s-4); } .fi-body.fi-panel-app .tn-atencao-titulo { font-size: var(--tn-fs-lg); font-weight: var(--tn-fw-semibold); color: var(--tn-text); } .fi-body.fi-panel-app .tn-atencao-checks { display: flex; flex-wrap: wrap; gap: var(--tn-s-1) var(--tn-s-5); margin-top: var(--tn-s-2); font-size: var(--tn-fs-sm); color: var(--tn-text-2); } .fi-body.fi-panel-app .tn-atencao-checks li { display: flex; align-items: center; gap: 6px; } .fi-body.fi-panel-app .tn-atencao-check { width: 16px; height: 16px; color: var(--tn-success); } .fi-body.fi-panel-app .tn-atencao-cabecalho { display: flex; align-items: center; gap: var(--tn-s-2); margin-bottom: var(--tn-s-2); } .fi-body.fi-panel-app .tn-atencao-item { display: flex; align-items: center; gap: var(--tn-s-3); padding-block: var(--tn-s-3); } .fi-body.fi-panel-app .tn-atencao-item + .tn-atencao-item { border-top: 1px solid var(--tn-border); } .fi-body.fi-panel-app .tn-atencao-texto { flex: 1; min-width: 0; } .fi-body.fi-panel-app .tn-atencao-item-titulo { font-size: var(--tn-fs-base); font-weight: var(--tn-fw-semibold); color: var(--tn-text); } .fi-body.fi-panel-app .tn-atencao-item-sub { font-size: var(--tn-fs-sm); color: var(--tn-text-2); } /* números do mês: 3 números sem caixa, 26/600 tabulares */ .fi-body.fi-panel-app .tn-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tn-s-4); margin: 0; } .fi-body.fi-panel-app .tn-numero-rotulo { font-size: var(--tn-fs-sm); color: var(--tn-text-3); } .fi-body.fi-panel-app .tn-numero-valor { margin: 2px 0 0; font-size: var(--tn-fs-num); font-weight: var(--tn-fw-semibold); letter-spacing: var(--tn-tracking-tight); line-height: var(--tn-lh-tight); color: var(--tn-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .fi-body.fi-panel-app .tn-numero-variacao { margin: var(--tn-s-1) 0 0; font-size: var(--tn-fs-xs); color: var(--tn-text-3); } .fi-body.fi-panel-app .tn-variacao-sobe { color: var(--tn-success-fg); } @media (max-width: 639px) { .fi-body.fi-panel-app .tn-numeros { grid-template-columns: minmax(0, 1fr); } } /* gráfico de 12 barras: mês atual na primária, demais em --tn-chart */ .fi-body.fi-panel-app .tn-grafico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: var(--tn-s-6) 0 0; } .fi-body.fi-panel-app .tn-grafico-coluna { display: grid; grid-template-rows: 16px 124px 16px; justify-items: center; row-gap: 4px; min-width: 0; } .fi-body.fi-panel-app .tn-grafico-valor { font-size: 11px; font-weight: var(--tn-fw-semibold); color: var(--tn-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .fi-body.fi-panel-app .tn-grafico-barra { align-self: end; width: 100%; max-width: 32px; border-radius: 6px 6px 3px 3px; background: var(--tn-chart); } .fi-body.fi-panel-app .tn-grafico-barra-atual { background: var(--tn-primary); } .fi-body.fi-panel-app .tn-grafico-mes { font-size: 11px; color: var(--tn-text-3); } /* agenda: pendente em âmbar */ .fi-body.fi-panel-app .fi-ta-record.tn-linha-pendente { background: var(--tn-warning-soft); } /* convite (plano sem recorrência) */ .fi-body.fi-panel-app .tn-convite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--tn-s-3); } .fi-body.fi-panel-app .tn-convite-texto { font-size: var(--tn-fs-sm); color: var(--tn-text-2); } /* ---------------------------------------------------------------- celular (F5) * Abaixo de lg (1024 px): barra inferior de 68 px (Painel · Notas · [+] · Agenda · * Menu), drawer de 304 px com itens de 44 px, atalhos do Painel em blocos e * cartão compacto na lista de notas. A partir de lg nada disso se aplica. */ .fi-body.fi-panel-app .tn-barra-inferior { display: none; } @media (max-width: 1023px) { .fi-body.fi-panel-app { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } .fi-body.fi-panel-app .tn-barra-inferior { position: fixed; inset: auto 0 0 0; z-index: 20; /* abaixo do drawer, do overlay e dos modais */ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; height: calc(68px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--tn-surface); border-top: 1px solid var(--tn-border); } .fi-body.fi-panel-app .tn-barra-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tn-control-h-touch); font-size: 11px; font-weight: var(--tn-fw-medium); color: var(--tn-text-3); } .fi-body.fi-panel-app .tn-barra-item-ativo { color: var(--tn-primary-soft-fg); } .fi-body.fi-panel-app .tn-barra-icone { width: 22px; height: 22px; } /* "+" central: 52 px, esmeralda, borda na cor do fundo, sobe 20 px */ .fi-body.fi-panel-app .tn-barra-nova { justify-self: center; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -20px; border: 4px solid var(--tn-surface); border-radius: var(--tn-r-pill); background: var(--tn-primary); color: var(--tn-primary-fg); box-shadow: var(--tn-shadow-md); } .fi-body.fi-panel-app .tn-barra-nova-icone { width: 24px; height: 24px; } /* drawer da sidebar: 304 px, itens de 44 px */ .fi-body.fi-panel-app .fi-sidebar { width: 304px; } .fi-body.fi-panel-app .fi-sidebar-item-button { min-height: var(--tn-control-h-touch); } } @media (max-width: 639px) { /* atalhos do Painel: "Nova nota" na largura toda (48 px) + tiles de 72 px */ .fi-body.fi-panel-app .fi-dashboard-page .fi-header > div:last-child { width: 100%; } .fi-body.fi-panel-app .fi-dashboard-page .fi-header .fi-ac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tn-s-2); width: 100%; } .fi-body.fi-panel-app .fi-dashboard-page .fi-header .fi-ac > .fi-btn:first-child { grid-column: 1 / -1; min-height: 48px; } .fi-body.fi-panel-app .fi-dashboard-page .fi-header .fi-ac > .fi-btn:not(:first-child) { display: flex; flex-direction: column; gap: var(--tn-s-1); min-height: 72px; padding: var(--tn-s-2); font-size: var(--tn-fs-xs); text-align: center; line-height: var(--tn-lh-tight); } .fi-body.fi-panel-app .fi-dashboard-page .fi-header .fi-ac > .fi-btn:not(:first-child) .fi-btn-label { white-space: normal; } } @media (max-width: 767px) { /* cartão da nota: cliente | valor / situação | emitida em — a ordem das colunas do Split é Cliente, Nº (oculta), Mês (oculta), Emitida em, Valor, Situação */ .fi-body.fi-panel-app .fi-resource-notas .fi-ta-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--tn-s-2) var(--tn-s-3); } .fi-body.fi-panel-app .fi-resource-notas .fi-ta-split > :nth-child(1) { grid-area: 1 / 1; } .fi-body.fi-panel-app .fi-resource-notas .fi-ta-split > :nth-child(5) { grid-area: 1 / 2; } .fi-body.fi-panel-app .fi-resource-notas .fi-ta-split > :nth-child(6) { grid-area: 2 / 1; } .fi-body.fi-panel-app .fi-resource-notas .fi-ta-split > :nth-child(4) { grid-area: 2 / 2; } .fi-body.fi-panel-app .fi-resource-notas .tn-col-emitida { display: flex; gap: var(--tn-s-1); align-items: baseline; justify-content: flex-end; font-size: var(--tn-fs-xs); } .fi-body.fi-panel-app .fi-resource-notas .tn-col-valor { font-weight: var(--tn-fw-semibold); } /* ações do cartão alinhadas à direita, com espaço para o rótulo inteiro */ .fi-body.fi-panel-app .fi-resource-notas .fi-ta-actions { width: 100%; justify-content: flex-end; } /* abas rolam de lado no celular, sem barra de rolagem aparente */ .fi-body.fi-panel-app .fi-tabs { scrollbar-width: none; } } /* ---------------------------------------------------------------- Configurações (F6) */ /* item fixo no rodapé da sidebar, com borda superior (handoff T2) */ .fi-body.fi-panel-app .tn-sidebar-rodape { padding: var(--tn-s-3) var(--tn-s-4); border-top: 1px solid var(--tn-border); } .fi-body.fi-panel-app .tn-sidebar-config { display: flex; align-items: center; gap: 10px; min-height: var(--tn-nav-item-h); padding-inline: 10px; border-radius: var(--tn-r-sm); font-size: var(--tn-fs-base); font-weight: var(--tn-fw-medium); color: var(--tn-text-2); } .fi-body.fi-panel-app .tn-sidebar-config:hover { background: var(--tn-hover); } .fi-body.fi-panel-app .tn-sidebar-config-ativo { background: var(--tn-surface-3); font-weight: var(--tn-fw-semibold); color: var(--tn-text); } .fi-body.fi-panel-app .tn-sidebar-config-icone-ctn { position: relative; display: flex; } .fi-body.fi-panel-app .tn-sidebar-config-icone { width: 18px; height: 18px; color: var(--tn-text-3); } .fi-body.fi-panel-app .tn-sidebar-config-ativo .tn-sidebar-config-icone { color: var(--tn-primary-soft-fg); } /* ponto âmbar de 8 px: certificado vencendo */ .fi-body.fi-panel-app .tn-ponto-ambar { position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border: 1.5px solid var(--tn-sidebar-bg); border-radius: var(--tn-r-pill); background: var(--tn-warning); } @media (max-width: 1023px) { .fi-body.fi-panel-app .tn-sidebar-config { min-height: var(--tn-control-h-touch); } } /* hub: cartões de link */ .fi-body.fi-panel-app .tn-config-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--tn-s-4); } .fi-body.fi-panel-app .tn-config-cartao { display: flex; align-items: flex-start; gap: var(--tn-s-3); padding: var(--tn-s-5); border: 1px solid var(--tn-border); border-radius: var(--tn-r-lg); background: var(--tn-surface); box-shadow: var(--tn-shadow-sm); transition: border-color 75ms; } .fi-body.fi-panel-app .tn-config-cartao:hover { border-color: var(--tn-border-strong); } .fi-body.fi-panel-app .tn-config-corpo { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .fi-body.fi-panel-app .tn-config-titulo { font-size: var(--tn-fs-md); font-weight: var(--tn-fw-semibold); color: var(--tn-text); } .fi-body.fi-panel-app .tn-config-texto { font-size: var(--tn-fs-sm); color: var(--tn-text-2); } .fi-body.fi-panel-app .tn-config-aviso { align-self: flex-start; margin-top: var(--tn-s-2); padding: 2px var(--tn-s-2); border-radius: var(--tn-r-pill); font-size: var(--tn-fs-xs); font-weight: var(--tn-fw-medium); background: var(--tn-neutral-soft); color: var(--tn-neutral-fg); } .fi-body.fi-panel-app .tn-config-aviso-warning { background: var(--tn-warning-soft); color: var(--tn-warning-fg); } .fi-body.fi-panel-app .tn-config-aviso-danger { background: var(--tn-danger-soft); color: var(--tn-danger-fg); } .fi-body.fi-panel-app .tn-config-seta { flex: none; width: 18px; height: 18px; margin-top: 8px; color: var(--tn-text-3); }