/* ==========================================================================
   SGP — Fatia 41 · Fila offline de cadastro

   Camada própria, uma linha no manifesto. Duas peças visuais só: a fila do que
   veio da rua e o selo de pendências no formulário — porque a fatia é quase
   toda comportamento, e comportamento não se resolve com CSS.
   ========================================================================== */

.offline-fila { min-width: 0; height: 100%; }

.offline-fila__lista { list-style: none; margin: 0; padding: 0; }

.offline-fila__item + .offline-fila__item { margin-top: var(--esp-2); }

.offline-fila__link {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  color: inherit;
  text-decoration: none;
}

.offline-fila__link:hover { background: var(--cor-fundo-afundado); text-decoration: none; }

.offline-fila__item--aberta .offline-fila__link {
  border-color: var(--cor-acao);
  background: var(--cor-acao-suave);
}

.offline-fila__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--texto-sm);
}

.offline-fila__texto > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.offline-ficha { min-width: 0; }

.offline-ficha__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.offline-ficha__titulo { margin: 0; font-size: var(--texto-lg); }

.offline-ficha__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--esp-3);
  margin: 0;
}

.offline-ficha__dados dt {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-fraco);
}

.offline-ficha__dados dd { margin: 0; overflow-wrap: anywhere; }

.offline-ficha__json {
  margin: var(--esp-2) 0 0;
  padding: var(--esp-3);
  background: var(--cor-fundo-afundado);
  border-radius: var(--raio-sm);
  font-size: var(--texto-xs);
  /* Bloco largo rola por dentro: o esqueleto mestre não pode rolar de lado. */
  overflow-x: auto;
}

/* --- O selo de pendências, no formulário de cadastro ----------------------- */

.offline-selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.offline-selo__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--sgp-atencao, var(--cor-acao));
  color: #fff;
  font-weight: 700;
}

.offline-selo__aviso { margin: 0; }