/* A aba Entregues: a consulta das tarefas concluídas por período.
 *
 * Mora em arquivo próprio, e não no estilo.css, de propósito: em 10/09/2026 o estilo.css
 * estava com trabalho de outra sessão em aberto, e mexer nele levaria esse trabalho junto
 * num commit que não é dele. Arquivo separado é o jeito de as duas mãos não se atropelarem.
 *
 * Tudo aqui sai de token que já existe no tema, para virar junto no claro e nos dois
 * noturnos sem uma segunda tabela de cor para manter.
 *
 * ⚠️ E ISSO ESTAVA ESCRITO AQUI SEM SER VERDADE (Carol, 11/09/2026: "no modo navy e grey
 * não dá para ler"). Os nomes usados, `--fundo-campo`, `--borda`, `--texto-fraco`,
 * `--primaria`, `--aviso-fundo` e `--aviso-texto`, NÃO EXISTEM na paleta do hub. Token que
 * não existe não falha: o navegador usa calado o valor de reserva depois da vírgula. Os dois
 * campos de data ficavam brancos com letra clara nos dois temas escuros, ilegíveis, e no
 * claro pareciam certos, que é o que fez isso passar.
 *
 * A paleta do hub é a do `estilo.css`: --navy-700 para superfície, --linha para borda,
 * --texto e --texto-suave para letra, --azul para foco. É a segunda vez que isto acontece
 * na casa; na Foxx foi igual.
 *
 * A classe .campo-periodo serve duas telas: a consulta de Entregues, no quadro de Tarefas,
 * e a barra de período do Painel Tático. Ela mora aqui, num lugar só. */

.campo-periodo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}

.campo-periodo input[type="date"] {
  font-family: var(--fonte);
  font-size: 12px;
  color: var(--texto);
  background: var(--navy-700);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 5px 8px;
}

.campo-periodo input[type="date"]:focus {
  outline: none;
  border-color: var(--azul);
}

/* O calendarinho do Chrome é desenho DELE, e não do hub: ele nasce preto sobre fundo escuro
   e some. Invertê-lo no escuro é o único jeito de ele continuar sendo um ícone. A conta é a
   mesma que o tema já faz com `color-scheme`, só que este ícone não obedece a ela. */
.campo-periodo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55);
  cursor: pointer;
}

.campo-periodo input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(1) opacity(1);
}

body.claro .campo-periodo input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(.55);
}

body.claro .campo-periodo input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: opacity(1);
}

/* A lista rola dentro dela mesma. Sem isto, um mês cheio empurra a barra de período para
 * fora da tela e a pessoa perde o controle do recorte justamente enquanto o usa. */
.lista-concluidas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  padding-right: 4px;
}

/* O cartão da entrega é mais baixo que o do quadro: aqui ele é linha de consulta, não peça
 * de um quadro que se arrasta. */
.lista-concluidas .card-tarefa {
  padding: 10px 12px;
}

.lista-concluidas .card-tarefa-titulo {
  text-decoration: none;
  opacity: 1;
}

.lista-concluidas .selo {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  /* O mesmo par que o hub usa para o amarelo de aviso, e que vira com o tema: bege fixo
     aqui era outro token inventado. */
  background: var(--fundo-amarelo);
  color: var(--amarelo-txt);
}