/* ==========================================================================
   Inteligência artificial · fatia F11
   --------------------------------------------------------------------------
   Camada própria (10_*), acrescentada ao manifesto com UMA linha, para não
   disputar o meio de 03_componentes.css com as outras fatias.

   A tela de IA tem um trabalho só: dizer, em dois segundos, se a IA está
   ligada e quanto ela custou. Daí o cartão de estado com faixa colorida à
   esquerda (verde/âmbar/cinza) — a cor carrega o sentido antes da leitura,
   mas nunca sozinha: o título ao lado diz a mesma coisa em palavras.
   ========================================================================== */

.ia-painel {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .ia-painel { grid-template-columns: 1fr 1fr; }
}

/* -- Cartão de estado ---------------------------------------------------- */
.ia-estado { border-left: 4px solid var(--cor-borda-forte); }
.ia-estado--ligada    { border-left-color: var(--sgp-sucesso); }
.ia-estado--esgotada  { border-left-color: var(--sgp-atencao); }
.ia-estado--desligada { border-left-color: var(--cor-borda-forte); }

.ia-estado--ligada    .avatar { background: var(--sgp-sucesso-suave); color: var(--sgp-sucesso); }
.ia-estado--esgotada  .avatar { background: var(--sgp-atencao-suave); color: var(--sgp-atencao); }
.ia-estado--desligada .avatar { background: var(--cor-fundo-afundado); color: var(--cor-texto-suave); }

/* -- Medidor do teto do dia ---------------------------------------------- */
.ia-medidor { margin: var(--esp-4) 0; }
.ia-medidor__legenda {
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* -- Fatos da configuração (provedor, modelo, teto, custo) --------------- */
.ia-fatos { display: grid; gap: var(--esp-3); margin: 0; }

.ia-fatos__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
}
.ia-fatos__item:last-child { border-bottom: 0; padding-bottom: 0; }

.ia-fatos dt {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  white-space: nowrap;
}
.ia-fatos dd {
  margin: 0;
  text-align: right;
  /* URL de provedor e nome de modelo são longos: quebram aqui, não empurram
     a página inteira para o lado. */
  overflow-wrap: anywhere;
}
.ia-fatos code {
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  background: var(--cor-fundo-afundado);
  border-radius: var(--raio-xs);
  padding: 2px 6px;
}

/* -- Tabela dos últimos dias --------------------------------------------- */
.ia-numero { text-align: right; font-variant-numeric: tabular-nums; }

.ia-rodape {
  margin-top: var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}