/* Tela "Agente" e a bolinha do menu.
 * Cor por significado: conectado = ok, fora e recusando = perigo,
 * mal configurado = aviso, verificando e não conectado = suave.
 */

.agente-tela { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.ag-corpo { overflow: auto; min-height: 0; padding: var(--e-5) var(--e-5) var(--e-10); display: grid; gap: var(--e-5); align-content: start; }

/* O estado, grande */
.ag-estado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e-4);
  align-items: start;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left-width: 6px;
  border-radius: var(--raio);
  padding: var(--e-5);
  box-shadow: var(--sombra-leve);
}
.ag-luz { width: 20px; height: 20px; border-radius: 50%; background: var(--borda-forte); margin-top: var(--e-1); }
.ag-rotulo { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); font-weight: 600; }
.ag-estado-nome { font-family: var(--fonte-titulo); font-size: var(--t-32); font-weight: 600; line-height: 1.1; color: var(--texto); }
.ag-estado-texto { font-size: var(--t-14); color: var(--texto); margin-top: var(--e-2); max-width: 70ch; line-height: 1.45; }
.ag-estado-desde { font-size: var(--t-13); color: var(--suave); margin-top: var(--e-2); }

.ag-estado[data-estado="conectado"] { border-left-color: var(--ok); }
.ag-estado[data-estado="conectado"] .ag-luz { background: var(--ok); }
.ag-estado[data-estado="fora"],
.ag-estado[data-estado="recusando"] { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.ag-estado[data-estado="fora"] .ag-luz,
.ag-estado[data-estado="recusando"] .ag-luz { background: var(--perigo); }
.ag-estado[data-estado="fora"] .ag-estado-nome,
.ag-estado[data-estado="recusando"] .ag-estado-nome { color: var(--perigo-texto); }
.ag-estado[data-estado="mal-configurado"] { border-left-color: var(--aviso); background: var(--aviso-fundo); }
.ag-estado[data-estado="mal-configurado"] .ag-luz { background: var(--aviso); }
.ag-estado[data-estado="mal-configurado"] .ag-estado-nome { color: var(--aviso-texto); }

/* Números de agora */
.ag-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e-3); }
.ag-numero {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-1);
  align-content: start;
  box-shadow: var(--sombra-leve);
}
.ag-numero.alerta { border-color: var(--aviso); }
.ag-numero-rotulo { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); font-weight: 600; }
.ag-numero-valor { font-family: var(--fonte-titulo); font-size: var(--t-24); font-weight: 600; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.ag-numero-detalhe { font-size: var(--t-12); color: var(--suave); }
.ag-numero.alerta .ag-numero-detalhe { color: var(--aviso-texto); }

/* Histórico das trocas */
.ag-quadro { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e-4); box-shadow: var(--sombra-leve); }
.ag-quadro-titulo { font-family: var(--fonte-titulo); font-size: var(--t-16); font-weight: 600; margin-bottom: var(--e-3); }
.ag-historico { display: grid; gap: var(--e-2); list-style: none; }
.ag-troca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: var(--e-2) 0; border-top: 1px solid var(--borda); }
.ag-troca:first-child { border-top: 0; }
.ag-troca-texto { font-size: var(--t-14); }
.ag-troca-hora { font-size: var(--t-13); color: var(--suave); font-variant-numeric: tabular-nums; }
.ag-troca-luz { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); }
.ag-troca-luz[data-estado="conectado"] { background: var(--ok); }
.ag-troca-luz[data-estado="fora"],
.ag-troca-luz[data-estado="recusando"] { background: var(--perigo); }
.ag-troca-luz[data-estado="mal-configurado"] { background: var(--aviso); }
.ag-quadro .vazio { padding: var(--e-2) 0; text-align: left; font-size: var(--t-14); }

/* A bolinha do item "Agente" no menu */
.menu-luz { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-left: auto; background: transparent; }
.menu-luz[data-estado="conectado"] { background: var(--ok); }
.menu-luz[data-estado="fora"],
.menu-luz[data-estado="recusando"] { background: var(--perigo); }
.menu-luz[data-estado="mal-configurado"] { background: var(--aviso); }
.menu-luz[data-estado="verificando"],
.menu-luz[data-estado="nao-conectado"] { background: var(--texto-invertido-suave); }

@media (max-width: 767px) {
  .ag-corpo { padding: var(--e-3) var(--e-3) var(--e-8); }
  .ag-estado-nome { font-size: var(--t-24); }
  .ag-troca { grid-template-columns: auto minmax(0, 1fr); }
  .ag-troca-hora { grid-column: 2; }
  .menu-luz { margin: 0; width: 6px; height: 6px; }
}