/**
 * Primitivos do painel — as peças que todo o resto reaproveita.
 *
 * Cartão, cabeçalho de seção, pulso, herói de conexão, pareamento por QR,
 * fileira de indicadores, azulejo (o ícone squircle), linha de lista, chip,
 * botão, estado vazio e pendência. Convenção de nomes em todo o CSS de
 * componentes: .bloco, .bloco__parte, .bloco--variante; nenhum seletor depende
 * da estrutura interna de outro bloco.
 *
 * Decisões que moram aqui: a conexão reserva altura mínima para que trocar de
 * estado não empurre a página; a moldura do QR fixa aspect-ratio para não haver
 * salto antes do SVG chegar, e o QR usa shape-rendering crispEdges porque um
 * código suavizado demora bem mais para ser lido pela câmera; a grade de
 * indicadores usa gap de 1px sobre fundo de separador em vez de pseudo-elemento;
 * o valor do indicador herda a cor do significado, mas o ícone ao lado repete a
 * informação — cor nunca é o único canal; o azulejo destaque é o amarelo da
 * marca, o único com glifo escuro (14.5:1); o separador entre linhas é recuado
 * até depois do azulejo, como nas listas do iOS, e .linha__apoio fica em uma
 * linha só para que a altura da linha não varie com o texto.
 *
 * Este arquivo é o PRIMEIRO da cascata de componentes: os demais assumem que
 * estas regras já foram aplicadas e as sobrescrevem por especificidade ou por
 * ordem. Não reordene os <link> em index.html.
 */

.cartao {
  background: var(--sup-cartao);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}

.secao {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e5) var(--e1) var(--e3);
}

.secao__titulo {
  font-size: var(--t-secao);
  font-weight: var(--peso-negro);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.secao__contagem {
  margin-left: auto;
  font-size: var(--t-apoio);
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.pulso {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px var(--e3) 7px var(--e2);
  background: var(--sup-cartao);
  border: 1px solid var(--borda-cartao);
  border-radius: var(--raio-pilula);
  box-shadow: var(--sombra-cartao);
  font-size: var(--t-meta);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  white-space: nowrap;
}

.pulso__ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sem-bom);
  animation: respirar 2.4s ease-in-out infinite;
}

.pulso--parado .pulso__ponto { background: var(--tinta-3); animation: none; }

@keyframes respirar {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.75); }
}

.conexao {
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding: var(--e5) var(--e6);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-flutua);
  color: #fff;
  position: relative;
  overflow: hidden;

  min-height: 104px;
}

.conexao--bom     { background: var(--sem-bom); }
.conexao--atencao { background: var(--sem-atencao); }
.conexao--critico { background: var(--sem-critico); }

.conexao__texto { flex: 1 1 240px; min-width: 0; }

.conexao__titulo {
  font-size: 21px;
  font-weight: var(--peso-negro);
  letter-spacing: -.02em;
}

.conexao__sub  { font-size: var(--t-apoio); opacity: .95; margin-top: 2px; }
.conexao__meta { font-size: var(--t-meta); opacity: .8; margin-top: var(--e2);
                 display: inline-flex; align-items: center; gap: 6px; }

.pareamento {
  display: flex;
  gap: var(--e6);
  align-items: center;
  padding: var(--e6);
  flex-wrap: wrap;
}

.pareamento__moldura {
  width: 196px;

  aspect-ratio: 1;
  flex: none;
  padding: var(--e3);
  background: #fff;
  border-radius: var(--raio-medio);
  box-shadow: inset 0 0 0 1px var(--separador);
  display: grid;
  place-items: center;
}

.pareamento__moldura svg { width: 100%; height: 100%; shape-rendering: crispEdges; }

.pareamento__lado { flex: 1 1 260px; min-width: 0; }

.pareamento__titulo {
  font-size: 17px;
  font-weight: var(--peso-forte);
  letter-spacing: -.015em;
  margin-bottom: var(--e3);
}

.passos { display: flex; flex-direction: column; gap: 6px; counter-reset: passo; }

.passos li {
  counter-increment: passo;
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  font-size: var(--t-apoio);
  color: var(--tinta-2);
}

.passos li::before {
  content: counter(passo);
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--sup-afundada);
  color: var(--tinta-1);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  display: grid; place-items: center;

  transform: translateY(3px);
}

.pareamento__nota { margin-top: var(--e3); font-size: var(--t-meta); color: var(--tinta-3); }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 1px;
  background: var(--separador);
}

.indicador {
  background: var(--sup-cartao);
  padding: var(--e4) var(--e5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.indicador__topo { display: flex; align-items: center; gap: 7px; }

.indicador__rotulo {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indicador__valor {
  font-size: var(--t-valor);
  font-weight: var(--peso-negro);
  letter-spacing: -.022em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.indicador--bom     .indicador__valor { color: var(--sem-bom); }
.indicador--critico .indicador__valor { color: var(--sem-critico); }
.indicador--atencao .indicador__valor { color: var(--sem-atencao); }

.azulejo {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-azulejo);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.azulejo--g  { width: 40px; height: 40px; }
.azulejo--m  { width: 34px; height: 34px; }
.azulejo--p  { width: 28px; height: 28px; }

.azulejo--bom      { background: var(--sem-bom); }
.azulejo--info     { background: var(--sem-info); }
.azulejo--atencao  { background: var(--sem-atencao); }
.azulejo--critico  { background: var(--sem-critico); }
.azulejo--neutro   { background: var(--sem-neutro); }

.azulejo--destaque { background: var(--sem-destaque); color: var(--marca-tinta); }
.azulejo--apagado  { background: #b3b9c2; }

.azulejo__iniciais {
  font-size: var(--t-meta);
  font-weight: var(--peso-negro);
  letter-spacing: .01em;
  position: relative;
}

.linha {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  min-height: 62px;
  position: relative;
}

.linha + .linha::before {
  content: "";
  position: absolute; top: 0; left: 68px; right: 0;
  height: 1px;
  background: var(--separador);
}

.linha--apagada { opacity: .5; }

.linha__miolo { flex: 1; min-width: 0; }

.linha__nome {
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha__apoio {
  font-size: var(--t-apoio);
  color: var(--tinta-2);
  margin-top: 1px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linha__apoio strong { font-weight: var(--peso-forte); color: var(--tinta-2); }

.linha__cauda {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}

.linha__quando { font-size: var(--t-meta); color: var(--tinta-3); white-space: nowrap; }

.linha__acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 var(--e5) var(--e4) 68px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  color: var(--tinta-2);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-negro);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--bom      { background: var(--suave-bom);      color: var(--sem-bom); }
.chip--info     { background: var(--suave-info);     color: var(--sem-info); }
.chip--atencao  { background: var(--suave-atencao);  color: var(--sem-atencao); }
.chip--critico  { background: var(--suave-critico);  color: var(--sem-critico); }
.chip--destaque { background: var(--suave-destaque); color: var(--marca-tinta); }
.chip--codigo   { font-family: var(--fonte-mono); text-transform: none; letter-spacing: 0; }

.botao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 6px 13px;
  border-radius: var(--raio-pilula);
  background: var(--sup-afundada);
  color: var(--sem-info);
  font-size: var(--t-apoio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicao), filter var(--transicao);
}

.botao:hover:not(:disabled)  { filter: brightness(.95); }
.botao:active:not(:disabled) { transform: scale(.96); }
.botao:disabled              { opacity: .5; cursor: default; }

.botao--cheio   { background: var(--sem-info); color: #fff; }
.botao--critico { color: var(--sem-critico); }

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e8) var(--e5);
  text-align: center;
}

.vazio__texto { font-size: var(--t-apoio); color: var(--tinta-2); }
.vazio__dica  { font-size: var(--t-meta); color: var(--tinta-3); }

.pendencia {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 var(--e5) var(--e3) 68px;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-medio);
  background: var(--suave-atencao);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .18);
  font-size: var(--t-apoio);
  color: var(--sem-atencao);
}

.pendencia strong { font-weight: var(--peso-forte); }