/* Artagius · componentes de interface (26/10/2026)
   Carregar depois de fontes/geist.css e sistema/tokens.css. Tudo usa as variáveis --ag-*; nenhum hex solto.
   Claro é o padrão; o escuro vem do aparelho ou de data-tema="escuro". Exemplos em interface/exemplo.html. */

.ag-app{font-family:var(--ag-fonte-familia);font-feature-settings:var(--ag-fonte-numeros);background:var(--ag-fundo);color:var(--ag-texto);font-size:var(--ag-tipo-corpo);line-height:1.5;-webkit-font-smoothing:antialiased}
.ag-app *{box-sizing:border-box}
.ag-app :focus-visible{outline:2px solid var(--ag-texto);outline-offset:2px;border-radius:6px}

/* texto */
.ag-manchete{font-size:var(--ag-tipo-manchete);font-weight:600;letter-spacing:-.035em;line-height:1.15;margin:0}
.ag-manchete-apoio{font-size:var(--ag-tipo-corpo);color:var(--ag-texto-2);margin-top:10px;max-width:72ch}
.ag-secao{font-size:var(--ag-tipo-secao);font-weight:600;margin:0}
.ag-rotulo{font-size:var(--ag-tipo-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ag-texto-2)}
.ag-apoio{font-size:var(--ag-tipo-apoio);color:var(--ag-texto-2)}
.ag-lucro{color:var(--ag-lucro)}   /* só lucro, ganho com + e conferido */
.ag-perda{color:var(--ag-perda)}   /* sempre com o sinal − */
.ag-link{color:var(--ag-link);font-weight:600;text-decoration:none;cursor:pointer}

/* cartões e números */
.ag-cartao{background:var(--ag-superficie);border:1px solid var(--ag-linha);border-radius:var(--ag-raio-cartao);padding:var(--ag-espaco-6)}   /* sem sombra */
.ag-kpi__rotulo{font-size:14px;color:var(--ag-texto-2)}
.ag-kpi__valor{font-size:var(--ag-tipo-numero);font-weight:600;letter-spacing:-.03em;margin:10px 0 8px;white-space:nowrap}
.ag-kpi__apoio{font-size:var(--ag-tipo-apoio);color:var(--ag-texto-2)}

/* botões: um laranja por tela */
.ag-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ag-altura-botao);padding:0 16px;border-radius:var(--ag-raio-pilula);border:0;font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;
  background:var(--ag-superficie);color:var(--ag-texto);box-shadow:inset 0 0 0 1px var(--ag-linha);transition:background var(--ag-movimento-rapido)}
.ag-botao--acao{background:var(--ag-acao);color:var(--ag-acao-texto);box-shadow:none;font-weight:600}
.ag-botao--escuro{background:var(--ag-botao-escuro);color:var(--ag-botao-escuro-texto);box-shadow:none}
.ag-botao--perda{background:var(--ag-perda);color:var(--ag-sobre-perda);box-shadow:none;font-weight:600}
.ag-botao[disabled]{opacity:.45;cursor:not-allowed}
@media (pointer:coarse){.ag-botao{min-height:var(--ag-altura-botao-celular);font-size:16px}}

/* pílulas de filtro, selos e modos */
.ag-pilula{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--ag-raio-pilula);font-size:14px;font-weight:500;background:var(--ag-superficie);color:var(--ag-texto-3);box-shadow:inset 0 0 0 1px var(--ag-linha);white-space:nowrap}
.ag-pilula--ativa{background:var(--ag-botao-escuro);color:var(--ag-botao-escuro-texto);box-shadow:none}
.ag-pilula__n{font-size:12px;opacity:.7}
.ag-selo{font-size:12px;padding:4px 10px;border-radius:var(--ag-raio-pilula);background:var(--ag-superficie-2);color:var(--ag-texto-3);white-space:nowrap}   /* "Dados de exemplo" */
.ag-modo{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--ag-raio-pilula);white-space:nowrap}
.ag-modo--decide{background:var(--ag-superficie);color:var(--ag-texto);box-shadow:inset 0 0 0 1px var(--ag-linha)}   /* "Você decide" */
.ag-modo--sombra{background:var(--ag-superficie-2);color:var(--ag-texto-3)}                                       /* "Em sombra · não grava" */
.ag-modo--auto{background:var(--ag-botao-escuro);color:var(--ag-botao-escuro-texto)}                              /* "Automático · já gravado" */

/* tabela */
.ag-tabela{width:100%;border-collapse:collapse}
.ag-tabela th{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ag-texto-2);text-align:right;padding:12px 10px;border-bottom:1px solid var(--ag-linha);white-space:nowrap}
.ag-tabela td{font-size:var(--ag-tipo-tabela);text-align:right;padding:12px 10px;border-bottom:1px solid var(--ag-linha-suave);white-space:nowrap}
.ag-tabela th:first-child,.ag-tabela td:first-child{text-align:left}

/* vidro: só na navegação (barra lateral, topo, abas do celular, barra de ações); conteúdo é sólido */
.ag-vidro{background:var(--ag-vidro);-webkit-backdrop-filter:var(--ag-vidro-desfoque);backdrop-filter:var(--ag-vidro-desfoque);border:1px solid var(--ag-vidro-borda);box-shadow:var(--ag-vidro-sombra)}
@media (prefers-reduced-transparency:reduce){.ag-vidro{background:var(--ag-superficie);-webkit-backdrop-filter:none;backdrop-filter:none}}
.ag-menu{width:var(--ag-menu-largura);border-radius:22px;padding:24px 12px}
.ag-menu__grupo{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ag-texto-2);margin:22px 12px 8px}
.ag-menu__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ag-texto-3)}
.ag-menu__item--ativo{background:var(--ag-selecao);color:var(--ag-texto);font-weight:600}

/* sólidos: barra de lote e confirmação rápida (escuros nos dois modos) */
.ag-lote,.ag-toast{display:flex;align-items:center;gap:18px;background:var(--ag-solido);color:#FFFFFF;border-radius:18px;padding:14px 16px 14px 22px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ag-lote .ag-lucro,.ag-toast .ag-lucro{color:#B8F03C}   /* sobre o sólido, sempre o verde ácido */
.ag-lote .ag-botao{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 1px #3F3F46}
.ag-lote .ag-botao--acao{background:var(--ag-acao);color:var(--ag-acao-texto);box-shadow:none}

/* avisos */
.ag-aviso{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--ag-alerta-fundo);box-shadow:inset 0 0 0 1px var(--ag-alerta-linha);font-size:14px}
.ag-aviso__titulo{font-weight:600;color:var(--ag-perda)}
.ag-faixa-critica{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--ag-perda);color:var(--ag-sobre-perda);font-weight:600}   /* só: anúncio fora da venda depois de uma mudança nossa */
.ag-aviso-neutro{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:14px;background:var(--ag-superficie-2);color:var(--ag-texto-3);font-size:14px}
.ag-esqueleto{display:block;background:var(--ag-superficie-2);border-radius:var(--ag-raio-barra)}  /* carregando: o esqueleto da própria tela, sem girar ícone (quadro 10) */
.ag-esqueleto--cartao{background:var(--ag-superficie);box-shadow:inset 0 0 0 1px var(--ag-linha);border-radius:var(--ag-raio-cartao)}

/* folha lateral e diálogo */
.ag-folha{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--ag-superficie);box-shadow:-20px 0 60px rgba(0,0,0,.18);padding:32px 34px;overflow:auto}
.ag-dialogo{width:min(480px,calc(100% - 32px));background:var(--ag-superficie);border-radius:var(--ag-raio-folha);padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.ag-veu{position:fixed;inset:0;background:rgba(10,10,11,.32)}

/* campos */
.ag-campo{display:block;width:100%;height:48px;border-radius:var(--ag-raio-campo);border:0;padding:0 14px;font:inherit;font-size:16px;background:var(--ag-superficie);color:var(--ag-texto);box-shadow:inset 0 0 0 1px var(--ag-linha)}
.ag-campo:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ag-texto)}
.ag-campo--erro{box-shadow:inset 0 0 0 2px var(--ag-perda)}
.ag-campo__rotulo{display:block;font-size:13px;font-weight:500;color:var(--ag-texto-3);margin-bottom:7px}
.ag-campo__erro{font-size:13px;color:var(--ag-perda);margin-top:6px}

/* celular: abas em vidro e barra de ações */
.ag-abas{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 12px);height:64px;border-radius:var(--ag-raio-pilula);display:flex;padding:0 6px;align-items:center}
.ag-abas__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:var(--ag-raio-pilula);font-size:11px;font-weight:500;color:var(--ag-texto-2);min-height:var(--ag-toque-minimo)}
.ag-abas__item--ativa{background:var(--ag-selecao);color:var(--ag-texto);font-weight:600}
.ag-selo-n{min-width:20px;height:18px;padding:0 5px;border-radius:var(--ag-raio-pilula);background:var(--ag-perda);color:var(--ag-sobre-perda);font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.ag-barra-acoes{position:fixed;left:0;right:0;bottom:0;padding:14px 20px calc(env(safe-area-inset-bottom) + 14px);border-radius:28px 28px 0 0;display:flex;gap:8px}

/* progresso */
.ag-progresso{height:6px;border-radius:3px;background:var(--ag-superficie-2);overflow:hidden}
.ag-progresso>span{display:block;height:100%;background:var(--ag-texto)}

/* celular (até 767 px), como nas telas aprovadas (telas/celular, 28/10/2026): a manchete de resposta fica abaixo do
   título grande da aba, em 24; o número de destaque do cartão em 22, com o cartão mais justo */
@media (max-width:767px){
  .ag-manchete{font-size:24px;letter-spacing:-.03em;line-height:1.2}
  .ag-kpi__valor{font-size:22px;margin:6px 0 4px}
  .ag-kpi__rotulo{font-size:13px}
  .ag-kpi__apoio{font-size:12px;line-height:1.35}
  .ag-cartao{padding:var(--ag-espaco-4)}
}

/* barras de série curta (ex.: lucro por dia; peça nova da fase 2, 28/10/2026): altura de cada barra em --ag-barra
   (0 a 100%); a do último dia em destaque; dia de perda em carmim. Verde porque a série é de lucro (seção 3). */
.ag-barras{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:var(--ag-espaco-4)}
.ag-barras__barra{flex:1 1 0;min-width:2px;height:var(--ag-barra,0%);border-radius:3px 3px 0 0;background:var(--ag-lucro-barra)}
.ag-barras__barra--destaque{background:var(--ag-lucro)}
.ag-barras__barra--perda{background:color-mix(in srgb,var(--ag-perda) 45%,transparent)}
.ag-barras__barra--perda.ag-barras__barra--destaque{background:var(--ag-perda)}

@media (prefers-reduced-motion:reduce){.ag-app *{transition:none!important;animation:none!important}}