/**
 * "Prioridades de hoje" — a aba de ação.
 *
 * Reaproveita as peças de lista da Central (`.prioridade`, `.prioridades`,
 * `.selo`) em vez de criar um segundo vocabulário visual para o mesmo
 * conceito. O que é próprio desta tela está aqui: o cartão de item da fila,
 * os selos que filtram e o estado "tudo em dia".
 *
 * Nenhuma cor literal fora dos tokens; a severidade sempre pela barra
 * lateral, nunca pintando o cartão inteiro — um painel com cinco cartões
 * vermelhos não prioriza nada.
 */

.prioridades-pagina { gap: var(--e-4); }

/* --- selos que filtram ---------------------------------------------------------- */

.prioridades-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.prioridades-resumo__selos { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.selo-filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font: inherit;
  font-size: var(--txt-sm);
  color: var(--texto-2);
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: var(--e-2) var(--e-4);
  min-height: 2.25rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.selo-filtro strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.selo-filtro:hover { border-color: var(--linha-2); background: var(--surface-2); }
.selo-filtro:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }
.selo-filtro[aria-pressed='true'] {
  border-color: var(--azul-900);
  background: var(--azul-100);
}

/* O ponto colorido carrega a severidade; o rótulo ao lado carrega o
   significado. Cor sozinha nunca é a única pista — daltonismo. */
.selo-filtro__ponto {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--neutro-300);
}
.selo-filtro--critico .selo-filtro__ponto { background: var(--crit-critica); }
.selo-filtro--alto .selo-filtro__ponto    { background: var(--crit-alta); }
.selo-filtro--medio .selo-filtro__ponto   { background: var(--crit-media); }
.selo-filtro--normal .selo-filtro__ponto  { background: var(--azul-300); }

/* --- item da fila ----------------------------------------------------------------- */

.fila-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* Cartão, não linha de tabela: cada item carrega título, contexto, métrica e
   até três botões. Espremer isso numa tabela daria a mesma listagem que
   /auditorias já faz melhor — e uma tela de ação precisa de alvo de toque,
   não de densidade. */
.fila-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  background: var(--surface);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--linha-2);
  border-radius: var(--raio);
  padding: var(--e-4);
}
.fila-item--critico { border-left-color: var(--crit-critica); }
.fila-item--alto    { border-left-color: var(--crit-alta); }
.fila-item--medio   { border-left-color: var(--crit-media); }
.fila-item--normal  { border-left-color: var(--azul-300); }

.fila-item__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }

.fila-item__topo {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.fila-item__titulo { font-weight: 600; font-size: var(--txt-md); }

/* A métrica é o número que decide a urgência ("2 dias em atraso") — em
   destaque tipográfico, não em fundo colorido: o cartão já tem a barra. */
.fila-item__metrica {
  font-size: var(--txt-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--texto-2);
}
.fila-item__metrica--critico { color: var(--crit-critica); }
.fila-item__metrica--alto    { color: var(--laranja-700); }
.fila-item__metrica--medio   { color: var(--atencao-texto); }

.fila-item__detalhe {
  margin: 0;
  font-size: var(--txt-sm);
  color: var(--texto-2);
  max-width: 72ch;
}

.fila-item__contexto {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
  margin: var(--e-1) 0 0;
  font-size: var(--txt-xs);
  color: var(--texto-3);
}
.fila-item__contexto .icone { color: var(--texto-3); }
.fila-item__separador { opacity: .5; }

.fila-item__acoes {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: stretch;
}

.prioridade--esqueleto { cursor: default; }

/* --- tudo em dia ------------------------------------------------------------------ */

/* O estado que a operação bem-sucedida VÊ. Merece voz de marca, não uma caixa
   cinza escrita "sem dados". */
.prioridades-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-3);
  padding: var(--e-7) var(--e-5);
}
.prioridades-vazio__marca {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--conforme-100);
  color: var(--conforme);
}
.prioridades-vazio .cartao__titulo { margin: 0; }
.prioridades-vazio p { margin: 0; max-width: 46ch; }

/* --- briefing, filtros, grade e coluna de apoio -------------------------------- */

.pri-brief__data { margin: 0 0 var(--e-1); font-size: var(--txt-sm); color: var(--texto-3); }
.pri-brief__frase { margin: 0; font-size: var(--txt-lg); font-weight: 400; line-height: 1.4; }
.pri-brief__alerta { color: var(--crit-critica); }

.pri-filtros { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.pri-filtros__direita { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.pri-select {
  font: inherit; font-size: var(--txt-sm); color: var(--texto);
  background: var(--surface); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: var(--e-2) var(--e-3); min-height: 2.25rem;
}
.pri-segmento { display: inline-flex; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.pri-segmento button {
  font: inherit; font-size: var(--txt-sm); color: var(--texto-2); background: var(--surface);
  border: 0; padding: var(--e-2) var(--e-4); min-height: 2.25rem; cursor: pointer;
}
.pri-segmento button + button { border-left: 1px solid var(--linha); }
.pri-segmento button[aria-pressed='true'] { background: var(--azul-100); color: var(--texto); font-weight: 600; }

.pri-grade { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--e-4); align-items: start; }
.pri-principal { display: flex; flex-direction: column; gap: var(--e-5); min-width: 0; }
.pri-lateral { display: flex; flex-direction: column; gap: var(--e-4); position: sticky; top: var(--e-4); }
.pri-lateral__cartao .cartao__titulo { font-size: var(--txt-md); }

.pri-grupo__titulo {
  display: flex; align-items: center; gap: var(--e-2);
  margin: 0 0 var(--e-3); font-size: var(--txt-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2);
}
.pri-grupo__qtd {
  font-size: var(--txt-xs); color: var(--texto); background: var(--azul-100);
  border-radius: 999px; padding: 0 var(--e-2); font-variant-numeric: tabular-nums;
}

.pri-link {
  align-self: flex-start; font: inherit; font-size: var(--txt-xs); color: var(--texto-2);
  background: none; border: 0; padding: var(--e-1) 0; cursor: pointer; text-decoration: underline;
}

.pri-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.pri-rank__linha {
  display: grid; grid-template-columns: 1fr 4rem 1.5rem; gap: var(--e-2); align-items: center; width: 100%;
  font: inherit; font-size: var(--txt-sm); color: var(--texto); background: none; border: 0;
  padding: var(--e-2) 0; cursor: pointer; text-align: left;
}
.pri-rank__linha:hover .pri-rank__nome { text-decoration: underline; }
.pri-rank__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pri-rank__barra { height: .45rem; border-radius: 999px; background: var(--azul-100); overflow: hidden; }
.pri-rank__barra > span { display: block; height: 100%; background: var(--azul-500); }

@media (max-width: 1100px) {
  .pri-grade { grid-template-columns: minmax(0, 1fr); }
  .pri-lateral { position: static; }
}

/* --- responsivo -------------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Os botões descem para baixo do texto e ocupam a largura: no celular, uma
     coluna de ações de 8rem espremeria o título em duas palavras por linha. */
  .fila-item { flex-wrap: wrap; }
  .fila-item__acoes {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: calc(20px + var(--e-3));
  }
  .fila-item__acoes .btn { flex: 1 1 8rem; }
  .fila-item__topo { flex-direction: column; gap: 2px; }
}