/* Conexões por cliente (fatia 23).
   Estilos da tela "Conexões" da casca, desenhada por public/conexoes.js. Só tokens do giro-v1:
   nenhuma cor, fonte ou sombra solta. Carregar depois de ds/giro-v1/tokens.css e
   ds/giro-v1/components.css (e de casca.css, quando dentro da casca).
   Pontos de quebra do giro-v1 (ESPECIFICACAO.md, Layout responsivo): até 760 px tudo vira uma
   coluna e as ações quebram linha. */

.conexoes {
  display: grid;
  gap: var(--giro-space-5);
  min-width: 0;
}

/* ---------- cabeçalho ---------- */

.conexoes__cabecalho {
  display: grid;
  gap: var(--giro-space-1);
  min-width: 0;
}

.conexoes__nome { overflow-wrap: anywhere; }

.conexoes__titulo,
.conexoes__grupo-titulo {
  font-size: var(--giro-text-lg);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--giro-text);
}

/* ---------- topo: lado da Conexa e resumo ---------- */

.conexoes__topo {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--giro-space-4);
  align-items: start;
}

.conexoes__lado,
.conexoes__resumo {
  display: grid;
  gap: var(--giro-space-3);
}

.conexoes__lado-lista,
.conexoes__resumo-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.conexoes__lado-item {
  display: grid;
  gap: var(--giro-space-1);
  padding: var(--giro-space-3) 0;
  border-top: 1px solid var(--giro-border);
  min-width: 0;
}

.conexoes__lado-item:first-child { border-top: 0; padding-top: 0; }

.conexoes__lado-nome {
  display: flex;
  flex-wrap: wrap;
  gap: var(--giro-space-2);
  align-items: center;
}

.conexoes__lado-item .giro-help { overflow-wrap: anywhere; }
.conexoes__lado-uso { font-size: var(--giro-text-xs); }

.conexoes__resumo-lista { gap: var(--giro-space-2); }

.conexoes__resumo-item {
  display: flex;
  gap: var(--giro-space-3);
  align-items: center;
}

.conexoes__contagem {
  min-width: 2ch;
  font-size: var(--giro-text-xl);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--giro-brand-green);
}

/* ---------- grupos e cartões ---------- */

.conexoes__grupo {
  display: grid;
  gap: var(--giro-space-3);
}

.conexoes__cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--giro-space-4);
  align-items: start;
}

.conexoes__cartao {
  display: grid;
  gap: var(--giro-space-3);
  padding: var(--giro-space-4) var(--giro-space-5);
  border-left: 3px solid var(--giro-border);
}

.conexoes__cartao .giro-muted,
.conexoes__cartao .giro-help,
.conexoes__cartao .giro-error { font-size: var(--giro-text-sm); overflow-wrap: anywhere; }

/* a borda à esquerda repete o selo com as cores semânticas do giro-v1 (nunca o laranja) */
.conexoes__cartao--ligada { border-left-color: var(--giro-success); }
.conexoes__cartao--falta_conexa { border-left-color: var(--giro-info); }
.conexoes__cartao--falta_cliente { border-left-color: var(--giro-warning); }
.conexoes__cartao--falhou { border-left-color: var(--giro-danger); }
.conexoes__cartao--nunca_coletou { border-left-color: var(--giro-control-border); }
.conexoes__cartao--nao_se_aplica { border-left-color: var(--giro-border); background: var(--giro-surface-subtle); }
.conexoes__cartao--desconhecido { border-left-color: var(--giro-border); }

.conexoes__cartao-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--giro-space-2);
  align-items: flex-start;
  justify-content: space-between;
}

.conexoes__cartao-nome {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--giro-text-md);
  font-weight: 700;
}

.conexoes__estado { flex-shrink: 0; }

.conexoes__vinculo {
  display: grid;
  gap: var(--giro-space-1);
  margin: 0;
  font-size: var(--giro-text-sm);
}

.conexoes__vinculo div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--giro-space-2);
  min-width: 0;
}

.conexoes__vinculo dt { color: var(--giro-text-muted); font-weight: 600; }
.conexoes__vinculo dt::after { content: ':'; }
.conexoes__vinculo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.conexoes__falta,
.conexoes__motivo {
  display: grid;
  gap: var(--giro-space-2);
  padding: var(--giro-space-3);
  border-radius: var(--giro-radius-md);
  background: var(--giro-surface-subtle);
  font-size: var(--giro-text-sm);
}

.conexoes__cartao--nao_se_aplica .conexoes__motivo { background: var(--giro-surface); }

.conexoes__texto summary {
  display: flex;
  align-items: center;
  min-height: var(--giro-control-height);
  cursor: pointer;
  font-weight: 600;
  color: var(--giro-brand-green);
}

.conexoes__texto[open] { display: grid; gap: var(--giro-space-2); }

.conexoes__texto-corpo {
  padding: var(--giro-space-3);
  border: 1px solid var(--giro-border);
  border-radius: var(--giro-radius-md);
  background: var(--giro-surface);
  overflow-wrap: anywhere;
}

.conexoes__acoes { gap: var(--giro-space-2); }

.conexoes__acao { padding-left: var(--giro-space-3); padding-right: var(--giro-space-3); }

/* ---------- 761 a 1100 px: topo empilha, cartões seguem fluidos ---------- */

@media (max-width: 1100px) {
  .conexoes__topo { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- até 760 px: uma coluna, ações quebrando linha ---------- */

@media (max-width: 760px) {
  .conexoes { gap: var(--giro-space-4); }
  .conexoes .giro-card { padding: var(--giro-space-4); }
  .conexoes__topo { grid-template-columns: minmax(0, 1fr); }
  .conexoes__cartoes { grid-template-columns: minmax(0, 1fr); }
  .conexoes__acoes .conexoes__acao { flex: 1 1 auto; }
}