/*
 * Painel · estilos de Início, Movimento (Pagamentos) e Ocorrências — pacote A4.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* Título de seção em rótulo pequeno, como nos protótipos (Início, Movimento). */
.secao-titulo--rotulo { font: 600 13px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }

/* Esqueleto de carga: os blocos de resumo em grade, como os cartões que vão aparecer. */
.esqueleto-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-3); }

/* Início: o cartão "Devoluções aguardando você". */
.cartao-devolucoes { border: 2px solid var(--atencao-ponto); }
.cartao-devolucoes__cabeca { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }
.cartao-devolucoes__titulo { margin: 0; font: 600 20px/28px var(--font-texto); }
.cartao-devolucoes__texto { margin: 0; color: var(--texto-2); }

/* Ocorrências: o cartão de cada ocorrência (ícone, texto e ações). */
.oc-lista { display: flex; flex-direction: column; gap: var(--espaco-3); }
.oc-cartao__corpo { display: flex; gap: var(--espaco-3); align-items: flex-start; }
.oc-cartao__corpo .ui-tempo__icone { flex: none; }
.oc-cartao__texto { display: flex; flex-direction: column; gap: var(--espaco-1); min-width: 0; }
.oc-cartao__texto > strong { font: 600 17px/24px var(--font-texto); }
.oc-cartao__quando { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.oc-cartao__acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; justify-content: flex-end; }

@media (max-width: 719.98px) {
  .so-computador { display: none; }
  .cartao-devolucoes .ui-btn { width: 100%; }
  .resumos-inicio { grid-template-columns: 1fr 1fr; }
  .oc-cartao__acoes { justify-content: flex-start; }
}