/* Painel de operação (paginas/painel). Cartões em grade a partir de 360 px; números grandes e legíveis. */
.painel-periodo {
  margin-bottom: 1rem;
}

.painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.painel .cartao {
  margin: 0;
}

.painel-situacoes {
  grid-column: 1 / -1;
}

.painel-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.painel-numeros li {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-campo);
}

.painel-numero {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.painel-rotulo {
  color: var(--suave);
}

.painel-numeros li[data-situacao="rejeitado"] .painel-numero,
.painel-numeros li[data-situacao="falha_definitiva"] .painel-numero,
.painel-lista li[data-situacao="vencido"] strong {
  color: var(--atencao-texto);
}

.painel-lista {
  margin: 0;
  padding-left: 1.25rem;
}

.painel-lista li {
  margin-bottom: 0.5rem;
}

/* Alertas configuráveis: lista sem marcador, que quebra o texto em 360 px. */
.lista-de-alertas {
  list-style: none;
  padding: 0;
  margin: 0;
}

.alerta-da-lista {
  overflow-wrap: anywhere;
  padding: 0.75rem 0;
}
/* Início no template Fluxo: a pergunta e as ações grandes antes dos números do painel. */
.acoes-do-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 0 0 2.5rem; }
.acao-do-inicio {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 9.5rem;
  padding: 1.5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
}
.acao-do-inicio svg { color: var(--marca); }
.acao-do-inicio:hover { border-color: var(--marca); color: var(--texto); }
.acao-do-inicio.principal { background: var(--marca); border-color: var(--marca); color: var(--texto-sobre-a-marca); }
.acao-do-inicio.principal svg { color: var(--texto-sobre-a-marca); }
.acao-do-inicio.principal:hover { background: var(--link-ao-passar); color: var(--texto-sobre-a-marca); }
.titulo-da-acao { font-size: 1.2rem; font-weight: 800; }
.explicacao-da-acao { font-size: 0.9rem; color: var(--suave); }
.acao-do-inicio.principal .explicacao-da-acao { color: var(--texto-sobre-a-marca); opacity: 0.92; }
.titulo-do-painel { margin-top: 0; }