/* ============================================================
   Painel NIA · componentes
   Depende de tokens.css. Só usa var(--...).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* MVP (30/10): o atributo hidden precisa vencer o display dos componentes (ex.: .menu a), senão itens escondidos por perfil aparecem. Levar ao design system original. */
[hidden] { display: none !important; }
body {
  font-family: var(--fonte-texto); font-size: var(--texto-corpo); line-height: var(--altura-corpo);
  color: var(--cor-texto); background: var(--cor-moldura); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cor-selecao); }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--borda-forte) solid var(--cor-foco); outline-offset: var(--foco-distancia); border-radius: var(--raio-pequeno);
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.numeros { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fonte-dados); font-size: var(--texto-legenda); }
.sobrelinha { font-size: var(--texto-legenda); font-weight: var(--peso-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; color: var(--cor-titulo); }

/* ---- Ícone (um conjunto só, traço, cor do texto) ---- */
.icone { width: var(--icone); height: var(--icone); flex: none; fill: none; stroke: currentColor; stroke-width: var(--icone-traco); stroke-linecap: round; stroke-linejoin: round; }
.icone.pequeno { width: var(--icone-pequeno); height: var(--icone-pequeno); }
.icone.grande  { width: var(--icone-grande);  height: var(--icone-grande); }

/* ---- Estrutura do app ---- */
/* MVP (30/10): sem isto o .app não ocupa a tela toda e a moldura aparece embaixo de telas curtas. Levar ao design system original. */
html, body { height: 100%; }
.app { max-width: var(--largura-app); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; background: var(--cor-fundo); }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--espaco-8); padding: var(--espaco-12) var(--espaco-16); background: var(--cor-superficie); border-bottom: var(--borda-fina) solid var(--cor-linha); }
.topo h1 { font-size: var(--texto-titulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); letter-spacing: var(--entreletra-titulo); color: var(--cor-titulo); }
.sub { font-size: var(--texto-legenda); color: var(--cor-texto-suave); margin-top: var(--espaco-4); }
.tela { flex: 1; min-height: 0; overflow-y: auto; padding: var(--espaco-12); display: flex; flex-direction: column; gap: var(--espaco-12); }
.tela > * { flex-shrink: 0; }
.tela.com-capa { padding: 0; gap: 0; } /* sem isto, blocos com rolagem própria são espremidos */

/* ---- Bloco (cartão) ---- */
.bloco { background: var(--cor-superficie); border: var(--borda-fina) solid var(--cor-linha); border-radius: var(--raio-bloco); padding: var(--espaco-16); }
.bloco > h2, .bloco-titulo { font-size: var(--texto-subtitulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); color: var(--cor-titulo); margin-bottom: var(--espaco-8); }
.bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-8); margin-bottom: var(--espaco-8); }
.bloco-topo > h2 { margin: 0; font-size: var(--texto-subtitulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); color: var(--cor-titulo); }
.rotulo { font-size: var(--texto-legenda); color: var(--cor-texto-suave); }
.numero { font-size: var(--texto-numero); font-weight: var(--peso-forte); line-height: var(--altura-justa); letter-spacing: var(--entreletra-numero); font-variant-numeric: tabular-nums; color: var(--cor-titulo); margin: var(--espaco-4) 0; }
.destaque .numero { font-size: var(--texto-destaque); }
.det { font-size: var(--texto-legenda); color: var(--cor-texto-suave); }
.fonte, .nota { font-size: var(--texto-legenda); color: var(--cor-texto-suave); margin-top: var(--espaco-8); }
.pos { color: var(--cor-sucesso); } .neg { color: var(--cor-erro); } .atencao { color: var(--cor-alerta); }
.dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espaco-12); }

/* ---- Linha de lista ---- */
.linha { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-8); padding: var(--espaco-8) 0; border-top: var(--borda-fina) solid var(--cor-linha); }
.linha:first-child, h2 + .linha, .bloco-topo + .linha { border-top: 0; }
.linha .nome { font-weight: var(--peso-medio); }
.linha .dir { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Atalho (linha que leva a outra tela) ---- */
.atalho { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-8); min-height: var(--toque-minimo); padding: var(--espaco-8) 0; border-top: var(--borda-fina) solid var(--cor-linha); color: var(--cor-texto); }
.atalho:first-child { border-top: 0; }
.atalho:hover { text-decoration: none; color: var(--cor-primaria); }
.atalho .icone { color: var(--cor-primaria); }

/* ---- Botão ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-8);
  min-height: var(--toque-minimo); padding: 0 var(--espaco-16); border-radius: var(--raio-controle);
  border: var(--borda-fina) solid transparent; background: transparent; color: var(--cor-texto);
  font: inherit; font-size: var(--texto-corpo); font-weight: var(--peso-medio); line-height: var(--altura-justa);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva), border-color var(--duracao-rapida) var(--curva), color var(--duracao-rapida) var(--curva);
}
.botao:hover { text-decoration: none; }
.botao.primario { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.botao.primario:hover { background: var(--cor-primaria-hover); }
.botao.primario:active { background: var(--cor-primaria-pressionada); }
.botao.secundario { background: var(--cor-superficie); color: var(--cor-primaria); border-color: var(--cor-linha-campo); }
.botao.secundario:hover { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); }
.botao.perigo { background: var(--cor-erro); color: var(--cor-sobre-cor); }
.botao.perigo:hover { background: var(--cor-erro-hover); }
.botao.texto { color: var(--cor-primaria); padding: 0 var(--espaco-8); margin-left: calc(var(--espaco-8) * -1); }
.botao.texto:hover { text-decoration: underline; }
.botao.largo { width: 100%; }
.botao:disabled, .botao[aria-disabled="true"] { background: var(--cor-desativado-fundo); color: var(--cor-desativado); border-color: transparent; cursor: not-allowed; text-decoration: none; }
.botao.texto:disabled { background: transparent; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-8); }

/* ---- Campo de formulário ---- */
.campo { display: flex; flex-direction: column; gap: var(--espaco-4); }
.campo > label { font-size: var(--texto-corpo); font-weight: var(--peso-medio); color: var(--cor-texto); }
.campo input, .campo select, .campo textarea {
  min-height: var(--toque-minimo); padding: var(--espaco-8) var(--espaco-12); width: 100%;
  font: inherit; font-size: var(--texto-subtitulo); color: var(--cor-texto); background: var(--cor-superficie);
  border: var(--borda-fina) solid var(--cor-linha-campo); border-radius: var(--raio-controle);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--cor-texto-suave); }
.campo input:disabled { background: var(--cor-desativado-fundo); color: var(--cor-desativado); border-color: var(--cor-linha); }
.campo .ajuda { font-size: var(--texto-legenda); color: var(--cor-texto-suave); }
.campo .erro { display: none; align-items: flex-start; gap: var(--espaco-4); font-size: var(--texto-legenda); font-weight: var(--peso-medio); color: var(--cor-erro); }
.campo.com-erro .erro { display: flex; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--cor-erro); box-shadow: inset 0 0 0 var(--borda-fina) var(--cor-erro); }

/* ---- Tabela ---- */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-legenda); font-variant-numeric: tabular-nums; }
.tabela th { font-weight: var(--peso-medio); color: var(--cor-texto-suave); text-align: right; padding: var(--espaco-4); white-space: nowrap; }
.tabela td { padding: var(--espaco-8) var(--espaco-4); border-top: var(--borda-fina) solid var(--cor-linha); text-align: right; white-space: nowrap; }
.tabela th:first-child, .tabela td:first-child { text-align: left; white-space: normal; padding-left: 0; }
.tabela tr.total td { font-weight: var(--peso-forte); border-top: var(--borda-forte) solid var(--cor-linha-forte); }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel td { height: var(--toque-minimo); }
.tabela tr.clicavel:hover td { background: var(--cor-fundo); }
.tabela abbr { text-decoration: none; }

/* ---- Tag e contador ---- */
.tag { display: inline-flex; align-items: center; gap: var(--espaco-4); flex: none; font-size: var(--texto-legenda); font-weight: var(--peso-medio); line-height: var(--altura-justa); padding: var(--espaco-4) var(--espaco-8); border-radius: var(--raio-pilula); background: var(--cor-superficie-alt); color: var(--cor-texto); }
.tag.sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.tag.alerta  { background: var(--cor-alerta-fundo);  color: var(--cor-alerta); }
.tag.erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro); }
.tag.info    { background: var(--cor-info-fundo);    color: var(--cor-info); }
.contador { display: inline-flex; align-items: center; justify-content: center; min-width: var(--icone); height: var(--icone); padding: 0 var(--espaco-4); border-radius: var(--raio-pilula); background: var(--cor-erro); color: var(--cor-sobre-cor); font-size: var(--texto-legenda); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

/* ---- Aviso ---- */
.aviso { --tom: var(--cor-info); --tom-fundo: var(--cor-info-fundo); display: flex; gap: var(--espaco-12); padding: var(--espaco-12) var(--espaco-16); border-radius: var(--raio-controle); background: var(--tom-fundo); color: var(--cor-texto); }
.aviso > .icone { color: var(--tom); margin-top: calc(var(--espaco-4) / 2); }
.aviso strong { display: block; color: var(--tom); font-weight: var(--peso-forte); }
.aviso .acoes { margin-top: var(--espaco-8); }
.aviso.sucesso { --tom: var(--cor-sucesso); --tom-fundo: var(--cor-sucesso-fundo); }
.aviso.alerta  { --tom: var(--cor-alerta);  --tom-fundo: var(--cor-alerta-fundo); }
.aviso.erro    { --tom: var(--cor-erro);    --tom-fundo: var(--cor-erro-fundo); }

/* ---- Menu inferior ---- */
.menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--cor-superficie); border-top: var(--borda-fina) solid var(--cor-linha); padding: var(--espaco-4) var(--espaco-4) calc(var(--espaco-4) + env(safe-area-inset-bottom)); }
.menu a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-4); min-height: var(--toque-minimo); padding: var(--espaco-4) 0; font-size: var(--texto-legenda); line-height: var(--altura-justa); color: var(--cor-texto-suave); }
.menu a:hover { text-decoration: none; color: var(--cor-texto); }
.menu a .icone { width: var(--icone-menu); height: var(--icone-menu); }
.menu a[aria-current="page"] { color: var(--cor-primaria); font-weight: var(--peso-forte); }
.menu a[aria-current="page"]::before { content: ""; position: absolute; top: calc(var(--espaco-4) * -1); left: 25%; right: 25%; height: var(--borda-forte); border-radius: var(--raio-pilula); background: var(--cor-primaria); }
.menu .contador { position: absolute; top: 0; right: 8%; }

/* ---- Abas ---- */
.abas { display: flex; gap: var(--espaco-4); background: var(--cor-superficie-alt); border-radius: var(--raio-controle); padding: var(--espaco-4); }
.abas button { flex: 1; min-height: var(--toque-minimo); border: 0; background: transparent; border-radius: var(--raio-pequeno); font: inherit; font-size: var(--texto-corpo); color: var(--cor-texto-suave); cursor: pointer; padding: 0 var(--espaco-8); transition: background-color var(--duracao-rapida) var(--curva); }
.abas button:hover { color: var(--cor-texto); }
.abas button[aria-selected="true"] { background: var(--cor-superficie); color: var(--cor-titulo); font-weight: var(--peso-forte); box-shadow: var(--sombra-baixa); }
/* MVP (30/10): com muitas abas (dono nos Lançamentos), a barra rola na horizontal em vez de espremer os rótulos. Levar ao design system original. */
.abas { overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { flex: 1 0 auto; white-space: nowrap; }

/* ---- Barras ---- */
.barra { height: var(--barra-altura); border-radius: var(--raio-pilula); background: var(--cor-linha); overflow: hidden; margin-top: var(--espaco-4); }
.barra > i { display: block; height: 100%; background: var(--cor-primaria); border-radius: var(--raio-pilula); }
.barra.fina { height: var(--barra-fina); background: var(--cor-superficie-alt); }
.barra.erro > i { background: var(--cor-erro); } .barra.sucesso > i { background: var(--cor-sucesso); }
.faixa { height: var(--faixa-altura); border-radius: var(--raio-controle); background: var(--cor-primaria); color: var(--cor-sobre-primaria); margin: var(--espaco-4) auto 0; display: flex; align-items: center; justify-content: center; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

/* ---- Modal ---- */
.veu { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: var(--espaco-16); background: var(--cor-veu); }
.veu[hidden] { display: none; }
.modal { width: 100%; max-width: var(--largura-modal); background: var(--cor-superficie); border-radius: var(--raio-bloco); box-shadow: var(--sombra-alta); padding: var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-16); }
.modal h2 { font-size: var(--texto-titulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); color: var(--cor-titulo); }
.modal .acoes { justify-content: flex-end; }

/* ---- Folha de baixo ---- */
.folha-veu { position: fixed; inset: 0; z-index: 10; background: var(--cor-veu); opacity: 0; pointer-events: none; transition: opacity var(--duracao-media) var(--curva); }
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-width: var(--largura-app); margin: 0 auto; background: var(--cor-superficie); border-radius: var(--raio-bloco) var(--raio-bloco) 0 0; box-shadow: var(--sombra-alta); padding: var(--espaco-12) var(--espaco-24) calc(var(--espaco-24) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--espaco-12); transform: translateY(105%); transition: transform var(--duracao-lenta) var(--curva);
  /* MVP (30/10): folha com formulário comprido rola por dentro em vez de cortar os botões. Levar ao design system original. */
  max-height: calc(100% - var(--espaco-24)); overflow-y: auto; overscroll-behavior: contain; }
.folha .alca { width: var(--alca-largura); height: var(--espaco-4); border-radius: var(--raio-pilula); background: var(--cor-linha); align-self: center; }
.folha h2 { font-size: var(--texto-titulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); color: var(--cor-titulo); }
.folha-aberta .folha { transform: none; }
.folha-aberta .folha-veu { opacity: 1; pointer-events: auto; }

/* ---- Capa (topo navy da tela, com o número principal) ---- */
.capa { background: var(--cor-capa); color: var(--cor-capa-texto); padding: var(--espaco-16) var(--espaco-24) var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-16); }
.capa-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-8); color: var(--cor-capa-suave); }
.capa h1 { font-size: var(--texto-titulo); font-weight: var(--peso-forte); line-height: var(--altura-justa); letter-spacing: var(--entreletra-titulo); }
.capa .sobrelinha { color: var(--cor-prata); font-weight: var(--peso-medio); }
.capa .det { color: var(--cor-capa-suave); font-size: var(--texto-corpo); margin-top: var(--espaco-8); }
.capa .det b, .capa .neg { color: var(--cor-capa-erro); font-weight: var(--peso-medio); }
.capa .pos { color: var(--cor-capa-sucesso); font-weight: var(--peso-medio); }
.selo { font-size: var(--texto-legenda); font-weight: var(--peso-medio); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; white-space: nowrap; color: var(--cor-prata); border: var(--borda-fina) solid var(--cor-capa-linha); border-radius: var(--raio-pequeno); padding: var(--espaco-4) var(--espaco-8); }
.periodo { position: relative; display: flex; gap: var(--espaco-24); border-bottom: var(--borda-fina) solid var(--cor-capa-linha); }
.periodo button { min-height: var(--toque-minimo); padding: 0; border: 0; background: none; font: inherit; color: var(--cor-capa-suave); cursor: pointer; transition: color var(--duracao-rapida) var(--curva); }
.periodo button:hover, .periodo button[aria-selected="true"] { color: var(--cor-capa-texto); }
.periodo button[aria-selected="true"] { font-weight: var(--peso-medio); }
.periodo .sublinha { position: absolute; left: 0; bottom: calc(var(--borda-fina) * -1); height: var(--borda-forte); background: var(--cor-capa-texto); transition: transform var(--duracao-media) var(--curva), width var(--duracao-media) var(--curva); }
.gigante-linha { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--espaco-16); margin-top: var(--espaco-8); }
.gigante small { font-size: var(--texto-titulo); font-weight: var(--peso-medio); letter-spacing: 0; margin: 0 var(--espaco-4); }
.gigante small:first-child { margin-left: 0; }
.gigante { font-size: var(--texto-gigante); font-weight: var(--peso-forte); line-height: var(--altura-gigante); letter-spacing: var(--entreletra-gigante); font-variant-numeric: tabular-nums; }
.comparo { text-align: right; color: var(--cor-capa-suave); padding-bottom: var(--espaco-4); display: flex; flex-direction: column; gap: var(--espaco-4); }
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--espaco-4); align-items: end; height: var(--colunas-altura); margin-top: var(--espaco-8); }
.colunas i { display: block; height: var(--h); background: var(--cor-capa-barra); border-radius: var(--borda-forte) var(--borda-forte) 0 0; transform-origin: bottom; }
.colunas i:last-child { background: var(--cor-capa-texto); }
.eixo-capa { display: flex; justify-content: space-between; color: var(--cor-capa-suave); border-top: var(--borda-fina) solid var(--cor-capa-linha); padding-top: var(--espaco-8); }

/* ---- Posição dos dados (fica âmbar quando passa de 24h) ---- */
.posicao { display: inline-flex; align-items: center; gap: var(--espaco-4); font-family: var(--fonte-dados); font-size: var(--texto-legenda); color: var(--cor-texto-suave); }
.posicao .icone { display: none; }
.posicao.antiga { color: var(--cor-alerta); font-weight: var(--peso-medio); }
.posicao.antiga .icone { display: block; }
.capa .posicao { color: var(--cor-capa-suave); }
.capa .posicao.antiga { color: var(--cor-capa-alerta); }

/* ---- Seção (abaixo da capa) ---- */
.secao { padding: var(--espaco-24) var(--espaco-16) 0; display: flex; flex-direction: column; gap: var(--espaco-12); }
.secao:last-child { padding-bottom: var(--espaco-24); }
.secao-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espaco-8); padding: 0 var(--espaco-4); }
.secao-cab h2 { font-size: var(--texto-legenda); font-weight: var(--peso-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; color: var(--cor-titulo); }
.secao-cab .mono { color: var(--cor-texto-suave); }

/* ---- Razão (grade de 2 a 4 números) ---- */
.razao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--cor-superficie); border: var(--borda-fina) solid var(--cor-linha); border-radius: var(--raio-bloco); overflow: hidden; }
.razao > div { padding: var(--espaco-16); display: flex; flex-direction: column; gap: var(--espaco-4); border-top: var(--borda-fina) solid var(--cor-linha); min-width: 0; }
.razao > div:nth-child(-n+2) { border-top: 0; }
.razao > div:nth-child(odd) { border-right: var(--borda-fina) solid var(--cor-linha); }
.razao .valor { font-size: var(--texto-numero); font-weight: var(--peso-forte); line-height: var(--altura-justa); letter-spacing: var(--entreletra-numero); font-variant-numeric: tabular-nums; color: var(--cor-titulo); white-space: nowrap; }
.razao .valor.neg { color: var(--cor-erro); }

/* ---- Lista (pendência e agenda) ---- */
.lista { background: var(--cor-superficie); border: var(--borda-fina) solid var(--cor-linha); border-radius: var(--raio-bloco); overflow: hidden; }
.pend, .agenda { width: 100%; display: grid; grid-template-columns: var(--coluna-quantidade) minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-12); min-height: var(--linha-lista); padding: var(--espaco-12) var(--espaco-16); border: 0; border-top: var(--borda-fina) solid var(--cor-linha); background: none; font: inherit; color: inherit; text-align: left; }
.lista > :first-child { border-top: 0; }
.pend { cursor: pointer; transition: background-color var(--duracao-rapida) var(--curva); }
.pend:hover { background: var(--cor-fundo); }
.pend .qtd { font-size: var(--texto-numero); font-weight: var(--peso-forte); letter-spacing: var(--entreletra-numero); font-variant-numeric: tabular-nums; line-height: var(--altura-gigante); }
.pend > .icone { color: var(--cor-texto-suave); }
.nivel { display: block; font-size: var(--texto-legenda); font-weight: var(--peso-forte); letter-spacing: var(--entreletra-rotulo); text-transform: uppercase; margin-bottom: var(--espaco-4); }
.nivel.erro, .qtd.erro { color: var(--cor-erro); } .nivel.alerta, .qtd.alerta { color: var(--cor-alerta); }
.agenda { min-height: var(--toque-minimo); }
.agenda > .mono { color: var(--cor-texto-suave); }
.agenda > .numeros { white-space: nowrap; }

/* ---- Menu escuro (com capa) ---- */
.menu.escuro { background: var(--cor-capa); border-top: 0; }
.menu.escuro a { color: var(--cor-capa-suave); }
.menu.escuro a:hover, .menu.escuro a[aria-current="page"] { color: var(--cor-capa-texto); }
.menu.escuro a[aria-current="page"]::before { background: var(--cor-capa-texto); }
.menu.escuro .contador { background: var(--cor-capa-erro); color: var(--cor-capa); }

/* ---- Entrada em sequência ---- */
.animar .entra { animation: surgir var(--duracao-lenta) var(--curva) both; animation-delay: calc(var(--i, 0) * var(--atraso-passo)); }
.animar .colunas i { animation: subir 600ms var(--curva) both; animation-delay: calc(120ms + var(--i, 0) * 25ms); }
.animar .barra > i { transform-origin: left; animation: crescer 700ms var(--curva) both; animation-delay: 300ms; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } }
@keyframes subir { from { transform: scaleY(0); } }
@keyframes crescer { from { transform: scaleX(0); } }

/* ---- Estado vazio ---- */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--espaco-8); padding: var(--espaco-32) var(--espaco-16); color: var(--cor-texto-suave); }
.vazio strong { font-size: var(--texto-subtitulo); color: var(--cor-texto); }
.vazio .acoes { margin-top: var(--espaco-8); justify-content: center; }
.vazio.compacto { flex-direction: row; text-align: left; padding: var(--espaco-8) 0; gap: var(--espaco-8); }

/* ---- Carregando ---- */
.carregando { display: flex; flex-direction: column; gap: var(--espaco-8); }
.carregando-texto { display: flex; align-items: center; gap: var(--espaco-8); font-size: var(--texto-legenda); color: var(--cor-texto-suave); }
.esqueleto { height: var(--espaco-12); border-radius: var(--raio-pequeno); background: var(--cor-superficie-alt); animation: pulso 1.2s var(--curva) infinite alternate; }
.esqueleto.grande { height: var(--espaco-32); width: 40%; }
.esqueleto.curto { width: 60%; }
.girar { animation: girar 0.9s linear infinite; }
@keyframes pulso { to { opacity: 0.45; } }
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}