/*
 * Checklist ESEN — reforma visual (DESIGN.md, versão aprovada em 16/10/2026)
 * Camada de componentes carregada DEPOIS das telas: aplica as regras do DESIGN.md sobre o design system
 * existente sem mudar a marcação. Só usa tokens de base.css.
 *  - Painéis brancos sem contorno; badges sem borda; bordas só para separar registros.
 *  - Uma cor de ação (azul); amarelo da marca só no logotipo e no marcador do menu ativo.
 *  - Foco: contorno azul + anel; alvos de 44 px no toque; touch-action e overscroll nos modais.
 */

/* ---------- Base ---------- */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: fine) { html { overscroll-behavior: none; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .titulo-pagina, .pagina-cab__titulo, .painel__titulo { text-wrap: balance; }
.titulo-pagina, .pagina-cab__titulo { letter-spacing: -0.015em; }
::selection { background: var(--cor-destaque-fundo); color: var(--cor-texto); }

/* ---------- Botões ---------- */
.btn { font-weight: var(--peso-medio); transition: background-color var(--dur-rapida) var(--curva-padrao), border-color var(--dur-rapida) var(--curva-padrao), color var(--dur-rapida) var(--curva-padrao), transform var(--dur-rapida) var(--curva-padrao); }
.btn, .btn--secundario { background: var(--cor-campo); border-color: var(--cor-borda-botao); }
.btn:hover, .btn--secundario:hover { background: var(--cor-superficie-2); }
.btn:active, .btn--secundario:active { background: var(--cor-superficie-3); transform: translateY(1px); }
.btn--primario { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.btn--primario:hover { background: var(--cor-destaque-hover); border-color: var(--cor-destaque-hover); }
.btn--primario:active { background: var(--cor-destaque-pressionado); border-color: var(--cor-destaque-pressionado); }
.btn--fantasma { background: transparent; border-color: transparent; }
.btn--fantasma:hover { background: var(--cor-superficie-2); }
.btn--perigo { background: var(--cor-campo); border-color: var(--cor-perigo-borda); color: var(--cor-perigo-texto); }
.btn--perigo:hover { background: var(--cor-perigo-fundo); }
.btn:focus-visible, .chip:focus-visible, .filtro:focus-visible, .aba:focus-visible, .nav-item:focus-visible, .link:focus-visible, .link-codigo:focus-visible, .link-seta:focus-visible {
  outline: var(--borda-foco) solid var(--cor-foco); outline-offset: 2px;
}

/* ---------- Links ---------- */
.link { color: var(--cor-destaque-texto); }
.link-codigo { color: var(--cor-texto-2); text-decoration: none; }
.link-codigo:hover { color: var(--cor-destaque-texto); text-decoration: underline; text-underline-offset: 3px; }
.link-seta { color: var(--cor-destaque-texto); }
.link-seta .icone { color: currentColor; }

/* ---------- Campos ---------- */
.entrada { background: var(--cor-campo); }
.entrada:focus, .entrada:focus-visible { outline: none; border-color: var(--cor-foco); box-shadow: var(--anel-foco); }
.campo--erro .entrada, .entrada[aria-invalid="true"] { box-shadow: none; }
.campo--erro .entrada:focus, .entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(196, 50, 31, 0.2); }
.entrada:disabled, .entrada[readonly] { background: var(--cor-superficie-2); border-color: var(--cor-borda); }
.marcar__caixa, .radio__circulo { background: var(--cor-campo); }
.campo__rotulo { font-weight: var(--peso-medio); color: var(--cor-texto-2); }

/* ---------- Chips, filtros, abas ---------- */
.chip, .filtro { border-color: var(--cor-borda-botao); background: var(--cor-campo); border-radius: 999px; }
.chip:hover, .filtro:hover { background: var(--cor-superficie-2); }
.chip[aria-pressed="true"], .chip--selecionado, .filtro--ativo { background: var(--cor-destaque-fundo); border-color: transparent; color: var(--cor-destaque-texto); }
.filtro--ativo .filtro__valor, .filtro--ativo .filtro__rotulo, .filtro--ativo .icone { color: var(--cor-destaque-texto); }
.filtro[aria-expanded="true"] { border-color: var(--cor-destaque); }
.abas { border-bottom-color: var(--cor-borda-sutil); }
.aba[aria-selected="true"] { color: var(--cor-texto); }
.aba__contagem { background: var(--cor-superficie-2); }

/* ---------- Badges (sem borda) ---------- */
.badge { border-color: transparent; border-radius: var(--raio-1); font-weight: var(--peso-medio); }
.badge--sucesso, .badge--perigo, .badge--processo, .badge--neutro { border-color: transparent; }
.badge--atencao { color: var(--cor-atencao-texto); background: var(--cor-atencao-fundo); border-color: transparent; }
.badge--nc { border-color: transparent; }

/* ---------- Selo e faixa "Dados demonstrativos" ---------- */
.selo-demo { border: 0; background: var(--cor-atencao-fundo); color: var(--cor-atencao-texto); font-weight: var(--peso-medio); }
.faixa-demo { background: var(--cor-atencao-fundo); color: var(--cor-atencao-texto); border-bottom: 0; }

/* ---------- Painéis, tabelas, listas ---------- */
.painel { border: 0; }
.painel__cab { border-bottom: 0; padding-top: var(--esp-4); padding-bottom: var(--esp-2); }
.painel__cab + .painel__corpo { padding-top: var(--esp-2); }
.painel__titulo { font-size: 16px; line-height: 24px; }
.painel__rodape { border-top-color: var(--cor-borda-sutil); }
.tabela thead th { background: var(--cor-superficie-2); border-bottom: 0; font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-medio); color: var(--cor-texto-2); }
.tabela tbody tr:hover { background: #FAFBFC; }
.tabela__principal { font-weight: var(--peso-medio); }
.lista-toque > li > .linha, .lista-toque > .linha { border-bottom-color: var(--cor-borda-sutil); }
.linha__meta .codigo, .linha__meta .mono { color: var(--cor-texto-2); }

/* ---------- Indicadores (KPIs em cartões brancos, sem grade de bordas) ---------- */
.indicadores { gap: var(--esp-3); background: transparent; border: 0; border-radius: 0; overflow: visible; }
.indicador { border-radius: var(--raio-3); }
.indicador__rotulo { font-weight: var(--peso-medio); }
.indicador__rotulo .icone { display: none; }
.indicador__valor { font-size: 28px; line-height: 36px; }

/* ---------- Navegação ---------- */
.lateral { border-right-color: var(--cor-borda-sutil); }
.lateral__marca { border-bottom: 0; }
.lateral__rodape { border-top-color: var(--cor-borda-sutil); }
.lateral__grupo-rotulo { font-weight: var(--peso-medio); }
.nav-item { color: var(--cor-texto-2); font-weight: var(--peso-medio); }
.nav-item:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.nav-item[aria-current="page"] { background: var(--cor-destaque-fundo); color: var(--cor-destaque-texto); font-weight: var(--peso-medio); }
.nav-item[aria-current="page"] > .icone { color: currentColor; }
.nav-item[aria-current="page"]::before { background: var(--marca-forma); }
.barra-superior { background: var(--cor-superficie-1); }
.nav-inferior { background: var(--cor-superficie-1); }

/* ---------- Camadas: menus, modais, folhas, toasts ---------- */
.menu, .seletor__lista { background: var(--cor-superficie-1); border-color: var(--cor-borda-sutil); }
.modal, .folha, .gaveta { background: var(--cor-superficie-1); border-color: transparent; overscroll-behavior: contain; }
.modal__corpo, .folha__corpo, .gaveta__corpo, .camada, .lightbox { overscroll-behavior: contain; }
.toast { background: var(--cor-superficie-1); border-color: transparent; }

/* ---------- Alvos de toque (44 px mínimo) ---------- */
@media (max-width: 1023px) {
  .btn, .entrada, .filtro, .chip { min-height: 44px; }
  .link-codigo, .link { min-height: 44px; display: inline-flex; align-items: center; }
  .btn--compacto, .acoes-tabela .btn { min-width: 44px; }
}

/* ---------- Tema escuro da execução: devolve as regras do tema antigo ---------- */
.tema-escuro .indicador__rotulo .icone { display: inline-block; }
.tema-escuro .tabela tbody tr:hover { background: var(--cor-superficie-2); }

/* ---------- Tela: login ---------- */
@media (min-width: 1024px) {
  .login__principal { background: var(--cor-superficie-1); border-radius: var(--raio-3); padding: var(--esp-8); }
  .login__moldura--dupla > .login__demo { border-left: 0; padding-left: var(--esp-8); }
}
.login-demo { background: var(--cor-superficie-1); border-color: var(--cor-borda-sutil); }
.login-demo:hover { background: var(--cor-superficie-1); border-color: var(--cor-destaque); }
.login-demo .avatar, .login-demo [class*="avatar"] { background: var(--cor-destaque-fundo); color: var(--cor-destaque-texto); }
.login kbd { background: var(--cor-superficie-2); border-color: transparent; }

/* ---------- Tela: execução ---------- */
.exec-rotulo, .exec-indice__grupo { text-transform: none; letter-spacing: 0; font-weight: var(--peso-medio); }
.exec-chip { border-color: transparent; background: var(--cor-superficie-2); font-weight: var(--peso-medio); }
.exec-chip--perfil-E { background: var(--cor-atencao-fundo); color: var(--cor-atencao-texto); }
.exec-chip--perfil-A { background: var(--cor-processo-fundo); color: var(--cor-processo-texto); }
.exec-chip--perfil-R { background: var(--cor-destaque-fundo); color: var(--cor-destaque-texto); }
.exec-detalhes { border-color: var(--cor-borda-sutil); background: var(--cor-superficie-1); }

/* ---------- Pendências: atenção por padrão; vermelho só para risco ---------- */
.pendencia > .icone:first-child { color: var(--cor-atencao-texto); }
.pendencia--perigo > .icone:first-child { color: var(--cor-perigo-texto); }
.pendencia--atencao > .icone:first-child { color: var(--cor-processo-texto); }
.pendencia > .icone:last-child { color: var(--cor-texto-3); }

/* ---------- Tela: painel/início ---------- */
.painel-op-cont__item > .badge, .painel-op-conc__rodape > .badge { align-self: flex-start; }
.ranking__barra > span { background: var(--cor-destaque); opacity: .55; }

/* ---------- Seletor com busca: aviso de lista limitada ---------- */
.seletor__refinar { padding: var(--esp-2) var(--esp-3); font-size: var(--fs-legenda); line-height: var(--lh-legenda); color: var(--cor-texto-3); border-top: var(--borda-largura) solid var(--cor-borda-sutil); }

/* ---------- Link "pular para o conteúdo" com alvo de 44 px ---------- */
.pular-conteudo { min-height: 44px; display: inline-flex; align-items: center; }