/**
 * Analytics — cartões dos provedores de IA.
 *
 * Combinam com .ana-tile (definido em analytics.css) e por isso este arquivo
 * precisa vir depois dele na cascata: aqui só entram o layout interno do cartão
 * e as variantes de sombra por estado de saúde.
 *
 * A grade tem margin-top próprio para se separar visualmente do grupo de tiles
 * de cima sem mexer no gap padrão das vistas, que vale para outras telas
 * também. O ponto de status ganha halo quando está bom; o cartão não configurado
 * fica esmaecido. Números usam tabular-nums porque a coluna da direita é lida em
 * varredura vertical.
 */

.ana-llm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;

  margin-top: var(--e3);
}

.ana-llm > .ana-tile { padding: var(--e4); display: flex; flex-direction: column; gap: 6px; }

.ana-llm__tile--bom     { box-shadow: 6px 6px 0 var(--sem-bom); }
.ana-llm__tile--critico { box-shadow: 6px 6px 0 var(--sem-critico); }
.ana-llm__tile--atencao { box-shadow: 6px 6px 0 var(--sem-atencao); }
.ana-llm__tile--apagado { box-shadow: 6px 6px 0 var(--tinta-3); opacity: .7; }

.ana-llm__cabeca { display: flex; align-items: center; gap: var(--e2); margin-bottom: 2px; }

.ana-llm__logo {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sup-cartao);
  border: 1px solid var(--borda-cartao);
  display: grid; place-items: center;
}

.ana-llm__logo img { width: 100%; height: 100%; object-fit: cover; }

.ana-llm__meio { flex: 1; min-width: 0; }

.ana-llm__nome {
  font-weight: var(--peso-brutal);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--t-apoio);
  line-height: 1.1;
}

.ana-llm__modelo {
  font-size: var(--t-meta);
  color: var(--tinta-3);
  font-family: var(--fonte-mono, ui-monospace, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ana-llm__ponto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tinta-3);
  flex: none;
}
.ana-llm__ponto--bom     { background: var(--sem-bom);
                           box-shadow: 0 0 0 4px color-mix(in srgb, var(--sem-bom) 22%, transparent); }
.ana-llm__ponto--critico { background: var(--sem-critico); }
.ana-llm__ponto--atencao { background: var(--sem-atencao); }
.ana-llm__ponto--apagado { background: var(--tinta-3); }

.ana-llm__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  font-size: var(--t-meta);
}

.ana-llm__linha--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--separador);
}

.ana-llm__rotulo {
  color: var(--tinta-3);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ana-llm__val { color: var(--tinta-1); font-variant-numeric: tabular-nums; font-weight: var(--peso-forte); }
.ana-llm__val--ok   { color: var(--sem-bom); }
.ana-llm__val--ruim { color: var(--sem-critico); }

.ana-llm__agente {
  display: flex; justify-content: space-between; gap: var(--e2);
  font-size: var(--t-etiqueta); color: var(--tinta-2);
}

.ana-llm__ag-nome { text-transform: uppercase; letter-spacing: .04em; }

.ana-llm__ag-val { font-variant-numeric: tabular-nums; }

.ana-llm__gasto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--separador);
}

.ana-llm__usd {
  font-weight: var(--peso-brutal);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-1);
}

.ana-llm__tarifa {
  font-size: var(--t-etiqueta);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}