/*
 * AGR — Componentes do portal ERP-AGR
 * Depende de tokens.css. Use apenas var(--agr-*); nunca valores de cor literais.
 * Classes com prefixo "agr-" para não colidir com CSS do KasmVNC/noVNC.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--agr-fundo);
  color: var(--agr-texto);
  font-family: var(--agr-fonte);
  font-size: var(--agr-texto-md);
  line-height: var(--agr-altura-linha);
}
h1, h2, h3 { margin: 0 0 var(--agr-esp-3); line-height: 1.25; font-weight: var(--agr-peso-forte); }
h1 { font-size: var(--agr-texto-xl); }
h2 { font-size: var(--agr-texto-lg); }
h3 { font-size: var(--agr-texto-md); }
p { margin: 0 0 var(--agr-esp-3); }
a { color: var(--agr-marca-primaria); }
a:hover { color: var(--agr-marca-primaria-hover); }
code, kbd { font-family: var(--agr-fonte-mono); font-size: 0.9em; }
:focus-visible { outline: none; box-shadow: var(--agr-anel-foco); border-radius: var(--agr-raio-sm); }
[hidden] { display: none !important; }
.agr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout ---------- */
.agr-cabecalho {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--agr-esp-4);
  padding: var(--agr-esp-3) var(--agr-esp-4);
  background: var(--agr-superficie);
  border-bottom: 1px solid var(--agr-borda);
}
/* Faixa com o degradê 307 C -> 306 C do manual: assinatura visual discreta */
.agr-cabecalho::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--agr-marca-degrade); }

/* Logo oficial (arquivo fornecido pela AGR — nunca redesenhar). Proporção ~4,9:1.
   Área de proteção do manual: x/20 de margem em volta. */
.agr-marca { display: inline-flex; align-items: center; gap: var(--agr-esp-3); color: var(--agr-texto); text-decoration: none; font-weight: var(--agr-peso-medio); }
.agr-marca__logo {
  display: block; height: 36px; width: auto;
  padding: 2px 4px; border-radius: var(--agr-raio-sm);
  background: var(--agr-fundo-logo);
}
.agr-marca__produto { padding-left: var(--agr-esp-3); border-left: 1px solid var(--agr-borda); color: var(--agr-texto-2); font-size: var(--agr-texto-sm); }
.agr-marca__logo--grande { height: 56px; padding: 3px 6px; }
@media (max-width: 30rem) { .agr-marca__produto { display: none; } }

/* Tela de entrada: fundo com o degradê da marca e cartão claro por cima */
.agr-fundo-marca { background: var(--agr-marca-degrade); }
.agr-fundo-marca .agr-cartao { box-shadow: var(--agr-sombra-2); }
.agr-usuario { display: flex; align-items: center; gap: var(--agr-esp-3); color: var(--agr-texto-2); font-size: var(--agr-texto-sm); }
.agr-conteudo { width: 100%; max-width: var(--agr-largura-conteudo); margin: 0 auto; padding: var(--agr-esp-6) var(--agr-esp-4); }
.agr-centro { min-height: 100dvh; display: grid; place-items: center; padding: var(--agr-esp-4); }
.agr-pilha { display: flex; flex-direction: column; gap: var(--agr-esp-4); }
.agr-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--agr-esp-3); }

/* ---------- Cartão ---------- */
.agr-cartao {
  background: var(--agr-superficie);
  border: 1px solid var(--agr-borda);
  border-radius: var(--agr-raio-lg);
  box-shadow: var(--agr-sombra-1);
  padding: var(--agr-esp-5);
}
.agr-cartao--estreito { width: 100%; max-width: 26rem; }

/* ---------- Botões ---------- */
.agr-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--agr-esp-2);
  min-height: 2.5rem; padding: 0 var(--agr-esp-4);
  border: 1px solid transparent; border-radius: var(--agr-raio-md);
  font: inherit; font-size: var(--agr-texto-sm); font-weight: var(--agr-peso-medio);
  cursor: pointer; text-decoration: none;
  transition: background var(--agr-transicao), border-color var(--agr-transicao), color var(--agr-transicao);
}
.agr-botao--primario { background: var(--agr-marca-primaria); color: var(--agr-marca-sobre-primaria); }
.agr-botao--primario:hover { background: var(--agr-marca-primaria-hover); color: var(--agr-marca-sobre-primaria); }
.agr-botao--secundario { background: var(--agr-superficie); color: var(--agr-texto); border-color: var(--agr-borda-forte); }
.agr-botao--secundario:hover { background: var(--agr-superficie-2); }
.agr-botao--perigo { background: var(--agr-superficie); color: var(--agr-erro); border-color: var(--agr-erro); }
.agr-botao--perigo:hover { background: var(--agr-erro-suave); }
.agr-botao--fantasma { background: transparent; color: var(--agr-texto-2); }
.agr-botao--fantasma:hover { background: var(--agr-superficie-2); color: var(--agr-texto); }
.agr-botao--bloco { width: 100%; }
.agr-botao:disabled, .agr-botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Estado de sessão (badge) ---------- */
.agr-estado {
  display: inline-flex; align-items: center; gap: var(--agr-esp-2);
  padding: var(--agr-esp-1) var(--agr-esp-3);
  border-radius: var(--agr-raio-pill);
  font-size: var(--agr-texto-xs); font-weight: var(--agr-peso-medio);
  background: var(--agr-neutro-suave); color: var(--agr-neutro);
}
.agr-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.agr-estado--criando,
.agr-estado--iniciando { background: var(--agr-info-suave); color: var(--agr-info); }
.agr-estado--disponivel { background: var(--agr-sucesso-suave); color: var(--agr-sucesso); }
.agr-estado--parando,
.agr-estado--fila { background: var(--agr-aviso-suave); color: var(--agr-aviso); }
.agr-estado--parado { background: var(--agr-neutro-suave); color: var(--agr-neutro); }
.agr-estado--erro { background: var(--agr-erro-suave); color: var(--agr-erro); }
.agr-estado--criando::before,
.agr-estado--iniciando::before,
.agr-estado--parando::before { animation: agr-pulso 1.2s ease-in-out infinite; }
@keyframes agr-pulso { 50% { opacity: 0.3; } }

/* ---------- Cartão de sessão ---------- */
.agr-sessao { display: grid; grid-template-columns: 1fr auto; gap: var(--agr-esp-4); align-items: center; }
.agr-sessao__titulo { font-size: var(--agr-texto-lg); font-weight: var(--agr-peso-forte); margin: 0; }
.agr-sessao__meta { color: var(--agr-texto-3); font-size: var(--agr-texto-sm); margin: var(--agr-esp-1) 0 0; }
.agr-sessao__acoes { display: flex; gap: var(--agr-esp-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 40rem) {
  .agr-sessao { grid-template-columns: 1fr; }
  .agr-sessao__acoes { justify-content: stretch; }
  .agr-sessao__acoes .agr-botao { flex: 1; }
}

/* ---------- Alertas ---------- */
.agr-alerta {
  display: flex; gap: var(--agr-esp-3);
  padding: var(--agr-esp-3) var(--agr-esp-4);
  border-radius: var(--agr-raio-md);
  border-left: 4px solid currentColor;
  font-size: var(--agr-texto-sm);
}
.agr-alerta > div > strong { display: block; color: var(--agr-texto); margin-bottom: var(--agr-esp-1); }
.agr-alerta > div { color: var(--agr-texto-2); }
.agr-alerta--info { background: var(--agr-info-suave); color: var(--agr-info); }
.agr-alerta--sucesso { background: var(--agr-sucesso-suave); color: var(--agr-sucesso); }
.agr-alerta--aviso { background: var(--agr-aviso-suave); color: var(--agr-aviso); }
.agr-alerta--erro { background: var(--agr-erro-suave); color: var(--agr-erro); }

/* ---------- Formulários ---------- */
.agr-campo { display: flex; flex-direction: column; gap: var(--agr-esp-1); }
.agr-campo label { font-size: var(--agr-texto-sm); font-weight: var(--agr-peso-medio); }
.agr-campo input, .agr-campo select {
  min-height: 2.5rem; padding: 0 var(--agr-esp-3);
  border: 1px solid var(--agr-borda-forte); border-radius: var(--agr-raio-md);
  background: var(--agr-superficie); color: var(--agr-texto); font: inherit;
}
.agr-campo input:focus-visible, .agr-campo select:focus-visible { border-color: var(--agr-foco); }
.agr-campo__ajuda { font-size: var(--agr-texto-xs); color: var(--agr-texto-3); }
.agr-campo--erro input { border-color: var(--agr-erro); }
.agr-campo--erro .agr-campo__ajuda { color: var(--agr-erro); }

/* ---------- Progresso de preparo (etapas) ---------- */
.agr-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--agr-esp-3); }
.agr-etapas li { display: flex; align-items: center; gap: var(--agr-esp-3); color: var(--agr-texto-3); }
.agr-etapas li::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 2px solid var(--agr-borda-forte);
}
.agr-etapas li[data-estado="atual"] { color: var(--agr-texto); font-weight: var(--agr-peso-medio); }
.agr-etapas li[data-estado="atual"]::before {
  border-color: var(--agr-marca-primaria); border-right-color: transparent;
  animation: agr-giro 0.9s linear infinite;
}
.agr-etapas li[data-estado="feito"] { color: var(--agr-texto-2); }
.agr-etapas li[data-estado="feito"]::before {
  border-color: var(--agr-sucesso); background: var(--agr-sucesso);
  box-shadow: inset 0 0 0 3px var(--agr-superficie);
}
.agr-etapas li[data-estado="falhou"] { color: var(--agr-erro); }
.agr-etapas li[data-estado="falhou"]::before { border-color: var(--agr-erro); background: var(--agr-erro-suave); }
@keyframes agr-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .agr-etapas li[data-estado="atual"]::before, .agr-estado::before { animation: none; }
}

/* ---------- Tabela (admin) ---------- */
.agr-tabela-envelope { overflow-x: auto; border: 1px solid var(--agr-borda); border-radius: var(--agr-raio-lg); background: var(--agr-superficie); }
.agr-tabela { width: 100%; border-collapse: collapse; font-size: var(--agr-texto-sm); }
.agr-tabela th, .agr-tabela td { padding: var(--agr-esp-3) var(--agr-esp-4); text-align: left; border-bottom: 1px solid var(--agr-borda); white-space: nowrap; }
.agr-tabela th { background: var(--agr-superficie-2); color: var(--agr-texto-2); font-weight: var(--agr-peso-medio); font-size: var(--agr-texto-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.agr-tabela tr:last-child td { border-bottom: 0; }
.agr-tabela td.agr-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Métrica ---------- */
.agr-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--agr-esp-4); }
.agr-metrica { background: var(--agr-superficie); border: 1px solid var(--agr-borda); border-radius: var(--agr-raio-lg); padding: var(--agr-esp-4); }
.agr-metrica__rotulo { font-size: var(--agr-texto-xs); color: var(--agr-texto-3); text-transform: uppercase; letter-spacing: 0.04em; }
.agr-metrica__valor { font-size: var(--agr-texto-2xl); font-weight: var(--agr-peso-forte); font-variant-numeric: tabular-nums; }
.agr-metrica__detalhe { font-size: var(--agr-texto-xs); color: var(--agr-texto-2); }
.agr-medidor { height: 6px; border-radius: var(--agr-raio-pill); background: var(--agr-superficie-2); overflow: hidden; margin-top: var(--agr-esp-2); }
.agr-medidor > span { display: block; height: 100%; background: var(--agr-marca-primaria); }
.agr-medidor--aviso > span { background: var(--agr-aviso); }
.agr-medidor--erro > span { background: var(--agr-erro); }

/* ---------- Tela da sessão (desktop remoto) ---------- */
.agr-tela-sessao { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--agr-fundo-visor); }
.agr-barra-sessao {
  flex: none; height: var(--agr-altura-barra);
  display: flex; align-items: center; justify-content: space-between; gap: var(--agr-esp-3);
  padding: 0 var(--agr-esp-3);
  background: var(--agr-superficie); border-bottom: 1px solid var(--agr-borda);
  font-size: var(--agr-texto-sm);
}
.agr-barra-sessao .agr-botao { min-height: 1.875rem; padding: 0 var(--agr-esp-3); }
.agr-tela-sessao__visor { flex: 1; min-height: 0; }
.agr-tela-sessao__visor iframe { width: 100%; height: 100%; border: 0; display: block; }
.agr-tela-sessao--tela-cheia .agr-barra-sessao { display: none; }

/* ---------- Estado vazio / tela de mensagem ---------- */
.agr-mensagem { text-align: center; max-width: 30rem; }
.agr-mensagem__icone { width: 3rem; height: 3rem; margin: 0 auto var(--agr-esp-4); color: var(--agr-texto-3); }
.agr-mensagem p { color: var(--agr-texto-2); }
.agr-rodape { text-align: center; color: var(--agr-texto-3); font-size: var(--agr-texto-xs); padding: var(--agr-esp-5) var(--agr-esp-4); }

/* ---------- Utilitários do portal ---------- */
.agr-texto-apoio { color: var(--agr-texto-3); font-size: var(--agr-texto-sm); margin: 0; }
.agr-centro--interno { min-height: 60dvh; }
.agr-login__logo { align-self: center; }
.agr-marca__logo--barra { height: 26px; padding: 1px 3px; }
[data-largura] { width: 0; transition: width var(--agr-transicao); }
.agr-sessao__acoes form { display: contents; }
.agr-usuario form { margin: 0; }