/* Tema dos painéis Filament (lojista e Redbeard). Cor, tipo e forma vêm só de tokens-temporada.css. */

/* tipografia do DS: títulos em Sora, dado em mono */
.fi-header-heading, .fi-section-header-heading, .fi-simple-header-heading, .fi-modal-heading, .fi-wi-stats-overview-stat-value, .fi-sidebar-group-label {
  font-family: var(--fonte-titulo); letter-spacing: -.02em;
}
.fi-wi-stats-overview-stat-value, .fi-ta-cell-content, .rb-dado { font-variant-numeric: tabular-nums; }
.fi-wi-stats-overview-stat-value { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo-medio); font-size: var(--texto-3xl); line-height: var(--altura-apertada); letter-spacing: -.04em; }

/* superfícies: papel no claro, instrumento no escuro */
.fi-body { background: var(--cor-fundo); color: var(--cor-texto); }
.fi-sidebar, .fi-topbar, .fi-section, .fi-simple-main, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-modal-content, .fi-dropdown-panel {
  background: var(--cor-superficie); border-color: var(--cor-borda);
}
.dark .fi-body { background: var(--tp-painel-000); color: var(--tp-painel-tinta); }
.dark .fi-sidebar, .dark .fi-topbar, .dark .fi-section, .dark .fi-simple-main, .dark .fi-ta-ctn, .dark .fi-wi-stats-overview-stat, .dark .fi-modal-content, .dark .fi-dropdown-panel {
  background: var(--tp-painel-100); border-color: var(--tp-painel-300);
}
.dark .fi-section-header-description, .dark .fi-header-subheading, .dark .fi-simple-header-subheading { color: var(--tp-painel-tinta-2); }

/* marca */
.rb-marca { display: inline-flex; align-items: center; gap: .625rem; }
.rb-marca img { height: 2.25rem; width: auto; }
.rb-marca__texto { display: inline-flex; flex-direction: column; line-height: 1.1; }
.rb-marca__nome { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: 1rem; letter-spacing: -.02em; color: var(--cor-texto); }
.rb-marca__descritor { font-family: var(--fonte-corpo); font-size: var(--texto-sm); letter-spacing: 0; color: var(--cor-texto-secundario); margin-top: .2rem; }
.dark .rb-marca__nome { color: var(--tp-painel-tinta); }
.dark .rb-marca__descritor { color: var(--tp-painel-tinta-2); }
.fi-simple-layout-header .rb-marca { justify-content: center; }

/* classes das nossas views (widgets e páginas) */
.rb-grade { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.rb-grade--estreita { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.rb-titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo-medio); font-size: .95rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.rb-mudo { color: var(--cor-texto-secundario); }
.dark .rb-mudo { color: var(--tp-painel-tinta-2); }
.rb-espaco { margin-top: .75rem; }
.rb-espaco-2 { margin-top: 1.5rem; }
.rb-lista { margin: .75rem 0 0 1.25rem; padding: 0; }
.rb-link { text-decoration: underline; text-underline-offset: 2px; }
.rb-voltar { margin: 0 0 1rem; font-size: var(--texto-sm); }
.rb-forte { font-weight: var(--peso-corpo-forte); }

.rb-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rb-tabela th { text-align: left; padding: .375rem 0; font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-size: var(--texto-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-secundario); }
.rb-tabela td { padding: .5rem 0; border-top: 1px solid var(--cor-borda); vertical-align: top; }
.rb-tabela .rb-num { text-align: right; white-space: nowrap; font-family: var(--fonte-dado); font-variant-numeric: tabular-nums; padding-left: 1rem; }
.rb-tabela .rb-num--folga { padding-right: 1.5rem; }
.dark .rb-tabela th { color: var(--tp-painel-tinta-2); }
.dark .rb-tabela td { border-top-color: var(--tp-painel-300); }

.rb-dl { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
.rb-dl--larga { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.rb-dl dt { font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-size: var(--texto-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-secundario); margin-bottom: .35rem; }
.rb-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.dark .rb-dl dt { color: var(--tp-painel-tinta-2); }

/* barra de uso: <progress> nativo, estilizado */
.rb-barra { display: block; width: 100%; height: .375rem; margin-top: .375rem; border: 0; border-radius: var(--raio-pilula); overflow: hidden; background: var(--cor-borda); -webkit-appearance: none; appearance: none; }
.rb-barra::-webkit-progress-bar { background: var(--cor-borda); border-radius: var(--raio-pilula); }
.rb-barra::-webkit-progress-value { background: var(--cor-marca); border-radius: var(--raio-pilula); }
.rb-barra::-moz-progress-bar { background: var(--cor-marca); border-radius: var(--raio-pilula); }
.dark .rb-barra, .dark .rb-barra::-webkit-progress-bar { background: var(--tp-painel-300); }

/* primeiros passos */
.rb-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rb-passo { display: flex; align-items: flex-start; gap: .75rem; }
.rb-passo__icone { width: 1.5rem; height: 1.5rem; flex: none; color: var(--cor-apoio); }
.rb-passo--feito .rb-passo__icone { color: var(--cor-sucesso); }
.rb-passo__titulo { font-weight: var(--peso-corpo-forte); }
.rb-passo--feito .rb-passo__titulo { text-decoration: line-through; color: var(--cor-texto-secundario); }
.rb-passo a.rb-passo__titulo { color: var(--cor-apoio); text-decoration: none; }
.rb-passo a.rb-passo__titulo:hover { text-decoration: underline; }
.rb-passo__desc { font-size: .875rem; color: var(--cor-texto-secundario); margin: .125rem 0 0; }
.dark .rb-passo__desc, .dark .rb-passo--feito .rb-passo__titulo { color: var(--tp-painel-tinta-2); }
.dark .rb-passo__icone { color: var(--tp-azul-300-dark); }
.dark .rb-passo--feito .rb-passo__icone { color: var(--tp-sucesso-400-dark); }

/* Kit de primeiros passos (I3.1) */
.rb-kit { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.rb-kit__lista li { margin-top: .35rem; }
.rb-link { color: var(--cor-apoio); text-decoration: underline; }
.dark .rb-link { color: var(--tp-azul-300-dark); }

/* passo a passo numerado (página da chave de IA, I3.2b) */
.rb-roteiro { margin: .5rem 0 0; padding-left: 1.5rem; display: grid; gap: .5rem; list-style: decimal; }
.rb-roteiro li { line-height: 1.5; }

/* trilha de auditoria da equipe no /redbeard (B11) */
.rb-mudancas { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: var(--texto-sm); }

/* assistente de vaga: a conversa e o rascunho no modal (B12.3).
   A linguagem visual é a da conversa com a pessoa (balões, pílula), aqui em
   classes do painel. Cor só por token, nada de hex. */
.rb-assistente { display: grid; gap: 1rem; }
.rb-assistente__conversa { display: grid; gap: .875rem; max-height: 22rem; overflow-y: auto; padding-right: .25rem; }
.rb-assistente__balao { display: grid; gap: .25rem; max-width: 92%; }
.rb-assistente__balao--assistente { justify-self: start; }
.rb-assistente__balao--pessoa { justify-self: end; }
.rb-assistente__quem { font-family: var(--fonte-dado); font-size: var(--texto-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-secundario); }
.rb-assistente__balao--pessoa .rb-assistente__quem { text-align: right; }
.rb-assistente__texto { padding: .75rem 1rem; border-radius: var(--raio-card); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cor-superficie); border: 1px solid var(--cor-borda); }
.rb-assistente__balao--pessoa .rb-assistente__texto { background: var(--cor-superficie-alt); border-color: transparent; }
.dark .rb-assistente__quem { color: var(--tp-painel-tinta-2); }
.dark .rb-assistente__texto { background: var(--tp-painel-100); border-color: var(--tp-painel-300); }

.rb-assistente__perguntas { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rb-assistente__pergunta { display: grid; gap: .125rem; }
.rb-assistente__ajuda { font-size: var(--texto-sm); color: var(--cor-texto-secundario); }
.dark .rb-assistente__ajuda { color: var(--tp-painel-tinta-2); }

.rb-assistente__pilula { justify-self: center; display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .375rem 1rem; border-radius: var(--raio-pilula); background: var(--cor-apoio-fundo); color: var(--cor-apoio); font-size: var(--texto-sm); }
.rb-assistente__pilula--erro { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.rb-assistente__pontos { display: inline-flex; gap: .2rem; }
.rb-assistente__pontos i { width: .3rem; height: .3rem; border-radius: var(--raio-pilula); background: currentColor; display: inline-block; }

.rb-assistente__campo { display: grid; gap: .35rem; }
.rb-assistente__campo > span { font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-size: var(--texto-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-secundario); }
.dark .rb-assistente__campo > span { color: var(--tp-painel-tinta-2); }
.rb-assistente__campo-largo { grid-column: 1 / -1; }
.rb-assistente__campo input, .rb-assistente__campo textarea, .rb-assistente__campo select {
    width: 100%; padding: .5rem .75rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-controle);
    background: var(--cor-superficie); color: var(--cor-texto); font: inherit;
}
.dark .rb-assistente__campo input, .dark .rb-assistente__campo textarea, .dark .rb-assistente__campo select { background: var(--tp-painel-100); border-color: var(--tp-painel-300); color: var(--tp-painel-tinta); }
.rb-assistente__campo input:focus-visible, .rb-assistente__campo textarea:focus-visible, .rb-assistente__campo select:focus-visible { outline: 2px solid var(--cor-apoio); outline-offset: 1px; }

.rb-assistente__rascunho { display: grid; gap: 1rem; }
.rb-assistente__pares { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.rb-assistente__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rb-assistente__item { display: flex; align-items: flex-start; gap: .5rem; }
.rb-assistente__lacunas, .rb-assistente__avisos { margin: 0; padding: .75rem 1rem; border-radius: var(--raio-card); display: grid; gap: .35rem; }
.rb-assistente__lacunas { background: var(--cor-info-fundo); color: var(--cor-info); }
.rb-assistente__avisos { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.rb-assistente__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.rb-assistente__dica { margin-right: auto; font-size: var(--texto-sm); color: var(--cor-texto-secundario); }
.dark .rb-assistente__dica { color: var(--tp-painel-tinta-2); }
/* botões das ilhas do painel: o Filament não alcança o que o React desenha */
.rb-botao {
    display: inline-flex; align-items: center; gap: .375rem; justify-content: center; min-height: var(--botao-altura); padding: .5rem 1.25rem; border: var(--borda-fina) solid var(--cor-borda-controle);
    border-radius: var(--raio-pilula); background: var(--cor-superficie); color: var(--cor-texto); transition: background-color var(--duracao-normal) var(--easing-padrao), border-color var(--duracao-normal) var(--easing-padrao);
    font: inherit; font-weight: var(--peso-corpo-forte); cursor: pointer;
}
.rb-botao:hover:not(:disabled) { border-color: var(--cor-borda-controle); }
.rb-botao--principal { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-sobre-acao); }
.rb-botao--principal:hover:not(:disabled) { background: var(--cor-acao-toque); border-color: var(--cor-acao-toque); }
.rb-botao:disabled { opacity: .55; cursor: not-allowed; }
.rb-botao:focus-visible { outline: var(--foco-largura) solid var(--cor-foco); outline-offset: var(--foco-offset); }
.dark .rb-botao { background: var(--tp-painel-100); border-color: var(--tp-painel-500); color: var(--tp-painel-tinta); }
.dark .rb-botao--principal { background: var(--cor-acao); border-color: var(--cor-acao); color: var(--cor-sobre-acao); }

/* T5-d · tela de resultados: número grande, conta que fecha e a grade de dias cobertos (só tokens) */
.rb-numero { font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-size: var(--texto-2xl); margin: 0; }
.rb-conta { font-family: var(--fonte-dado); font-size: var(--texto-sm); margin-top: .5rem; }
.rb-dias { display: flex; flex-wrap: wrap; gap: 3px; margin: .75rem 0; }
.rb-dias i { width: .75rem; height: .75rem; border-radius: 2px; background: var(--cor-borda); display: inline-block; }
.rb-dias i.rb-dias__ok { background: var(--cor-acao); }
.dark .rb-dias i { background: var(--tp-painel-300); }
a.rb-botao { text-decoration: none; }

/* T8-c · telas simples (entrar, criar conta, recuperar senha): alvo de toque de 44 px e subtítulo legível no escuro. */
.fi-simple-page .fi-input { min-height: var(--alvo-minimo); }
.fi-simple-page a:not(.fi-simple-header-subheading a) { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
/* Link dentro da frase do subtítulo: caixa de 44 px sem mexer na linha (margem negativa compensa o preenchimento). */
.fi-simple-header-subheading a { display: inline-block; padding-block: 12px; margin-block: -12px; }

.fi-simple-page .fi-btn, .fi-simple-page .fi-icon-btn { min-height: var(--alvo-minimo); min-width: var(--alvo-minimo); }
.fi-simple-page label:has(.fi-checkbox-input) { display: flex; align-items: center; min-height: var(--alvo-minimo); }

/* T8-c (2ª rodada) · painel logado: texto de apoio legível no escuro e alvos de 44 px. */
.dark .fi-account-widget-user-name, .dark .fi-sc-text:not(.fi-color), .dark .fi-input-wrp-label { color: var(--tp-painel-tinta-2); }
.fi-body .fi-icon-btn, .fi-body .fi-user-menu-trigger, .fi-body .fi-btn { min-height: var(--alvo-minimo); min-width: var(--alvo-minimo); }
.fi-body .fi-input { min-height: var(--alvo-minimo); }
.fi-body .fi-sidebar-item-btn { min-height: var(--alvo-minimo); }
.fi-body .fi-skip-link:focus { min-height: var(--alvo-minimo); }
.fi-body a:has(> .rb-marca), .fi-body a:has(.fi-logo) { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
[data-link-disparo], [data-link-compra] { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
.fi-body .filepond--drop-label { min-height: var(--alvo-minimo) !important; }
.fi-body .filepond--drop-label label { display: inline-flex !important; align-items: center; min-height: var(--alvo-minimo); }
/* O Filament fixa a cor com !important dentro de uma camada (@layer), que vence qualquer !important nosso: troca-se o token que ele lê. */
:root.dark .filepond--drop-label, :root.dark .filepond--drop-label label { --gray-400: var(--tp-painel-tinta-2); }

/* P4 · texto dos gráficos no escuro: o Chart.js lê a cor computada deste span (ticks e legenda). No escuro o Filament usa --gray-400,
   que o tema do painel iguala ao 500 (2,8:1 no card). Regra só do span do gráfico, sem camada, então vence a do Filament e não mexe
   em nenhum outro texto. #A2B2AA sobre #18221E: 7,37:1. No claro vale o gray-500 do tema (#5B6862, 5,83:1 no branco). */
:root.dark .fi-wi-chart-text-color { color: var(--tp-painel-tinta-2); }

/* =====================================================================================================
   B4 · mesma base do site (B1/B2) e da jornada (B3), só nos painéis (.fi-*): títulos Sora com tracking
   do site, card de borda de 1 px sem sombra e raio de mídia, botão pílula, campo de 8 px com borda de
   controle, foco de 3 px, rótulo mono de 14 px, entrada curta. Só tokens; o escuro troca pelos primitivos
   porque o Filament marca o tema na classe .dark e não em prefers-color-scheme.
   ===================================================================================================== */

/* corpo e ritmo */
.fi-body { font-family: var(--fonte-corpo); font-size: var(--texto-base); line-height: var(--altura-corpo); }
.fi-main { --rb-respiro: clamp(var(--espaco-4), 2.4vw, var(--espaco-8)); }
.fi-page-main, .fi-page-content { row-gap: var(--espaco-6); }
.fi-page-content > * + * { margin-top: 0; }

/* títulos: a escala do site, uma casa abaixo (aqui a pessoa opera, não lê) */
.fi-header-heading { font-size: var(--texto-3xl); line-height: var(--altura-apertada); font-weight: var(--peso-titulo-medio); letter-spacing: var(--site-tracking-titulo); text-wrap: balance; }
.fi-simple-header-heading { font-size: var(--texto-2xl); line-height: var(--altura-apertada); font-weight: var(--peso-titulo-medio); letter-spacing: var(--site-tracking-titulo); text-wrap: balance; }
.fi-section-header-heading, .fi-modal-heading { font-size: var(--texto-xl); line-height: var(--altura-titulo); font-weight: var(--peso-titulo-medio); letter-spacing: var(--site-tracking-titulo); }
.fi-header-subheading, .fi-simple-header-subheading, .fi-section-header-description { font-size: var(--texto-base); line-height: var(--altura-corpo); color: var(--cor-texto-secundario); max-width: var(--largura-leitura); }

/* rótulo do grupo da navegação e cabeçalho de tabela: o rótulo mono do DS, no piso de 14 px */
.fi-sidebar-group-label, .fi-ta-header-cell-label {
  font-family: var(--fonte-dado); font-weight: var(--peso-dado); font-size: var(--texto-sm); letter-spacing: .08em; text-transform: uppercase;
}
.fi-sidebar-group-label { color: var(--cor-texto-secundario); }
.dark .fi-sidebar-group-label { color: var(--tp-painel-tinta-2); }

/* card: borda de 1 px, sem sombra, raio de mídia; o que mora dentro de card usa o raio de card */
.fi-section, .fi-ta-ctn, .fi-simple-main, .fi-modal-window, .fi-wi-stats-overview-stat {
  box-shadow: none;
  border: var(--borda-fina) solid var(--cor-borda); border-radius: var(--raio-midia);
}
.dark .fi-section, .dark .fi-ta-ctn, .dark .fi-simple-main, .dark .fi-modal-window, .dark .fi-wi-stats-overview-stat { border-color: var(--tp-painel-300); }
.fi-wi-stats-overview-stat { border-radius: var(--raio-card); padding: var(--espaco-5) var(--espaco-6); }
.fi-modal-window { background: var(--cor-superficie); }
.dark .fi-modal-window { background: var(--tp-painel-100); }
.fi-dropdown-panel { box-shadow: none; border: var(--borda-fina) solid var(--cor-borda); border-radius: var(--raio-card); }
.dark .fi-dropdown-panel { border-color: var(--tp-painel-300); }
.fi-section-header { padding: var(--espaco-5) var(--espaco-6) 0; }
.fi-section-content-ctn > .fi-section-content, .fi-section-content { padding: var(--espaco-5) var(--espaco-6) var(--espaco-6); }
@media (min-width: 768px) {
  .fi-section-header { padding: var(--espaco-6) var(--espaco-8) 0; }
  .fi-section-content { padding: var(--espaco-6) var(--espaco-8) var(--espaco-8); }
}
.fi-section .fi-section, .fi-section .fi-ta-ctn { border-radius: var(--raio-card); }

/* tela simples (entrar, criar conta): um card de 28 px, título à esquerda, marca com respiro */
.fi-simple-main { padding: var(--espaco-8) var(--espaco-6); }
@media (min-width: 640px) { .fi-simple-main { padding: var(--espaco-10) var(--espaco-10); } }
.fi-simple-header { align-items: flex-start; text-align: left; }
.fi-simple-header-heading, .fi-simple-header-subheading { text-align: left; }
.fi-simple-layout-header .rb-marca { justify-content: flex-start; }

/* navegação: item ativo em fundo de ação, como o chip selecionado do site */
.fi-sidebar, .fi-topbar { border-color: var(--cor-borda); box-shadow: none; }
.dark .fi-sidebar, .dark .fi-topbar { border-color: var(--tp-painel-300); }
.fi-sidebar-item-btn { border-radius: var(--raio-controle); font-weight: var(--peso-corpo-forte); transition: background-color var(--duracao-normal) var(--easing-padrao); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--cor-acao-fundo); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--cor-acao); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--tp-verde-950-dark); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label, .dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: var(--tp-verde-400-dark); }

/* botão: pílula; ação em verde, fundo muda em 200 ms (única microinteração) */
.fi-btn { border-radius: var(--raio-pilula); font-weight: var(--peso-corpo-forte); transition: background-color var(--duracao-normal) var(--easing-padrao), border-color var(--duracao-normal) var(--easing-padrao); }
.fi-btn:not(.fi-size-xs):not(.fi-size-sm) { padding-inline: var(--espaco-6); }
.fi-simple-page .fi-btn[type="submit"], .fi-simple-page .fi-btn.fi-color-primary { min-height: var(--botao-altura-site); width: 100%; }
.fi-icon-btn { border-radius: var(--raio-pilula); }

/* campo: 8 px, borda de controle de 1,5 px (a de card some no celular), foco de 3 px */
.fi-input-wrp {
  border-radius: var(--raio-controle); background: var(--cor-superficie);
  box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--cor-borda-controle);
  transition: box-shadow var(--duracao-normal) var(--easing-padrao);
}
.fi-input-wrp:focus-within { box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--cor-foco); outline: var(--foco-largura) solid var(--cor-foco); outline-offset: 0; }
.fi-input-wrp.fi-invalid { box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--cor-erro); }
.fi-input-wrp.fi-invalid:focus-within { outline-color: var(--cor-erro); }
.fi-fo-field-wrp-error-message, .fi-fo-field-wrp-error-list { color: var(--cor-erro-texto); }
.fi-fo-field-label-content { font-weight: var(--peso-corpo-forte); }
.dark .fi-input-wrp { background: var(--tp-painel-000); box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--tp-painel-500); }
.dark .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--tp-verde-400-dark); outline-color: var(--tp-verde-400-dark); }
.dark .fi-input-wrp.fi-invalid { box-shadow: inset 0 0 0 var(--borda-controle-largura) var(--tp-rb-vermelho-dark); }
.dark .fi-fo-field-wrp-error-message, .dark .fi-fo-field-wrp-error-list { color: var(--tp-rb-vermelho-dark); }

/* foco visível em todo o resto: o anel do site (3 px, 2 px de folga) */
.fi-body :is(a, button, summary, [role="button"], [tabindex]):focus-visible,
.fi-simple-layout :is(a, button, summary, [role="button"], [tabindex]):focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco); outline-offset: var(--foco-offset);
}
.dark.fi-body :is(a, button, summary, [role="button"], [tabindex]):focus-visible,
.dark .fi-body :is(a, button, summary, [role="button"], [tabindex]):focus-visible,
.dark .fi-simple-layout :is(a, button, summary, [role="button"], [tabindex]):focus-visible { outline-color: var(--tp-verde-400-dark); }

/* tabela: linhas de 52 px, divisor de 1 px, número tabular */
.fi-ta-table { border-collapse: collapse; }
.fi-ta-header-cell { padding-block: var(--espaco-3); }
.fi-ta-row > .fi-ta-cell { height: var(--tabela-linha-altura); border-top: var(--borda-fina) solid var(--cor-borda); }
.dark .fi-ta-row > .fi-ta-cell { border-top-color: var(--tp-painel-300); }
.fi-ta-cell { font-size: var(--texto-sm); }
.fi-ta-text-item-label, .fi-ta-text { font-size: var(--texto-sm); }

/* selo (badge): pílula, rótulo legível */
.fi-badge { border-radius: var(--raio-pilula); font-weight: var(--peso-corpo-forte); font-size: var(--texto-sm); }

/* entrada curta ao abrir a tela: opacidade + 12 px, desligada sem movimento */
@keyframes rb-entrada { from { opacity: 0; transform: translateY(var(--entrada-distancia)); } to { opacity: 1; transform: none; } }
.fi-page-main, .fi-simple-main { animation: rb-entrada var(--duracao-moderada) var(--easing-entrada) both; }
@media (prefers-reduced-motion: reduce) {
  .fi-body *, .fi-body *::before, .fi-body *::after, .fi-simple-layout * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================================================
   B4 (correção) · o tema do painel não segue o sistema operacional: segue a classe .dark do Filament.
   tokens-temporada.css troca os semânticos por prefers-color-scheme, o que deixava o painel claro com
   fundo escuro quando o SO é escuro (texto do Filament escuro sobre fundo escuro). Dentro dos painéis,
   claro = painel sem .dark, escuro = painel com .dark, qualquer que seja o SO. Só referência a tokens.
   ===================================================================================================== */
:root:not(.dark) {
  --cor-fundo: var(--tp-neutro-025); --cor-superficie: var(--tp-neutro-000); --cor-superficie-alt: var(--tp-neutro-075);
  --cor-borda: var(--tp-neutro-150); --cor-borda-controle: var(--tp-neutro-400);
  --cor-texto: var(--tp-neutro-900); --cor-texto-secundario: var(--tp-neutro-600);
  --cor-acao: var(--tp-verde-700); --cor-acao-toque: var(--tp-verde-800); --cor-acao-fundo: var(--tp-verde-050); --cor-sobre-acao: var(--tp-neutro-000);
  --cor-apoio: var(--tp-azul-700); --cor-apoio-fundo: var(--tp-azul-050); --cor-sobre-apoio: var(--tp-neutro-000);
  --cor-marca: var(--tp-rb-vermelho);
  --cor-sucesso: var(--tp-sucesso-700); --cor-sucesso-fundo: var(--tp-sucesso-050);
  --cor-alerta: var(--tp-alerta-700); --cor-alerta-fundo: var(--tp-alerta-050);
  --cor-erro: var(--tp-rb-vermelho); --cor-erro-texto: var(--tp-rb-vermelho-texto); --cor-erro-fundo: var(--tp-rb-vermelho-050);
  --cor-info: var(--cor-apoio); --cor-info-fundo: var(--cor-apoio-fundo);
  --cor-foco: var(--tp-verde-700); --cor-foco-halo: var(--tp-neutro-000);
  color-scheme: light;
}
:root.dark {
  --cor-fundo: var(--tp-painel-000); --cor-superficie: var(--tp-painel-100); --cor-superficie-alt: var(--tp-painel-200);
  --cor-borda: var(--tp-painel-300); --cor-borda-controle: var(--tp-painel-500);
  --cor-texto: var(--tp-painel-tinta); --cor-texto-secundario: var(--tp-painel-tinta-2);
  --cor-acao: var(--tp-verde-400-dark); --cor-acao-toque: var(--tp-verde-300-dark); --cor-acao-fundo: var(--tp-verde-950-dark); --cor-sobre-acao: var(--tp-painel-ink);
  --cor-apoio: var(--tp-azul-300-dark); --cor-apoio-fundo: var(--tp-azul-950-dark); --cor-sobre-apoio: var(--tp-painel-ink);
  --cor-marca: var(--tp-rb-vermelho-dark);
  --cor-sucesso: var(--tp-sucesso-400-dark); --cor-sucesso-fundo: var(--tp-sucesso-950-dark);
  --cor-alerta: var(--tp-alerta-400-dark); --cor-alerta-fundo: var(--tp-alerta-950-dark);
  --cor-erro: var(--tp-rb-vermelho-dark); --cor-erro-texto: var(--tp-rb-vermelho-dark); --cor-erro-fundo: var(--tp-rb-vermelho-950-dark);
  --cor-info: var(--tp-azul-300-dark); --cor-info-fundo: var(--tp-azul-950-dark);
  --cor-foco: var(--tp-verde-400-dark); --cor-foco-halo: var(--tp-painel-000);
  color-scheme: dark;
}

/* hover do botão de ação: o verde de toque do DS (o Filament clareia o hover; o DS escurece) */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover { background-color: var(--tp-verde-800); }

/* ação em forma de link (ex.: "Configurar"): alvo de 44 px; link dentro de frase segue como estava */
.fi-body :is(button, a).fi-link:not(.fi-simple-header-subheading a) { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
.fi-body button.fi-link { min-width: var(--alvo-minimo); justify-content: center; }

/* asterisco de obrigatório: cor de texto de erro (AA) e 14 px */
.fi-fo-field-label-required-mark { color: var(--cor-erro-texto); font-size: var(--texto-sm); line-height: 0; }

/* caixa de seleção e botão de rádio também mostram o foco do teclado */
.fi-body :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.fi-simple-layout :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: var(--foco-largura) solid var(--cor-foco); outline-offset: var(--foco-offset); }

/* T3 · telas de tabela do lojista (banco de talentos, pedidos do titular): alvos de 44 px nos controles que o Filament desenha
   (ordenar coluna, itens por página, paginação, breadcrumb) e texto de apoio legível no escuro. */
.fi-body .fi-ta-header-cell-sort-btn { min-height: var(--alvo-minimo); min-width: var(--alvo-minimo); }
.fi-body .fi-pagination .fi-select-input, .fi-body .fi-ta-ctn select.fi-select-input { min-height: var(--alvo-minimo); }
.fi-body .fi-pagination-item-btn { min-height: var(--alvo-minimo); min-width: var(--alvo-minimo); }
.fi-body a.fi-breadcrumbs-item-label { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); }
.dark .fi-breadcrumbs-item-label, .dark .fi-modal-description, .dark .fi-ta-empty-state-description { color: var(--tp-painel-tinta-2); }
/* Celular de 320 px: respiro lateral menor nas células da tabela, para nome e as duas ações caberem sem rolagem interna. */
@media (max-width: 400px) {
  .fi-body .fi-ta-header-cell, .fi-body .fi-ta-cell { padding-inline: var(--espaco-2); }
  .fi-body .fi-ta-text, .fi-body .fi-ta-col-wrp { padding-inline: var(--espaco-1); }
}
/* "Remover filtro" dentro do selo de filtro ativo: caixa de 44 px o selo cresce para acomodá-la. */
.fi-body .fi-badge-delete-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo-minimo); min-height: var(--alvo-minimo); }
/* Botão de perigo no escuro: o Filament usa o vermelho vivo claro, que reprova com texto branco (4,34:1); o do papel dá 4,95:1. */
.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-disabled):not([disabled]) { background-color: var(--tp-rb-vermelho); }
.dark .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover { background-color: var(--tp-rb-vermelho-texto); }
