/* Integração Gmail → Trabalho: importar emails como tarefas */

/* Espaçamentos (estes tokens não existem no app.css: sem eles a tela ficava toda sem espaço entre os blocos). */
.gmail-tarefas {
  --esp-s: 6px; --esp-m: 12px; --esp-l: 20px; --esp-xl: 28px;
  padding: var(--esp-l);
}

.gmail-tarefas__header {
  margin-bottom: var(--esp-xl);
}

.gmail-tarefas__header h1 {
  margin: 0 0 var(--esp-s) 0;
  font-size: calc(24px * var(--fs, 1)); /* px * --fs, como o resto do hub: o tamanho de fonte das Configurações vale aqui também */
  font-weight: 600;
}

.gmail-tarefas__filtros {
  display: flex;
  gap: var(--esp-m);
  margin-bottom: var(--esp-l);
  flex-wrap: wrap;
  align-items: flex-end;
}

.gmail-tarefas__filtros .campo {
  flex: 1;
  min-width: 200px;
}

.gmail-tarefas__filtros .botao {
  flex-shrink: 0;
}

.gmail-tarefas__controles {
  display: flex;
  gap: var(--esp-m);
  margin-bottom: var(--esp-l);
  align-items: center;
}

.gmail-tarefas__controles .checkbox {
  white-space: nowrap;
}

.gmail-tarefas__controles .botao {
  margin-left: auto;
}

.gmail-tarefas__previa {
  border-top: 1px solid var(--linha);
  padding-top: var(--esp-l);
}

.gmail-tarefas__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-m);
  max-height: 60vh;
  overflow-y: auto;
}

.gmail-tarefas__item {
  display: flex;
  flex-direction: column;
  gap: var(--esp-s);
  padding: var(--esp-m);
  border: 1px solid var(--linha);
  border-radius: var(--r-card);
  background: var(--superficie);
  transition: border-color .2s ease, background-color .2s ease;
}

.gmail-tarefas__item:hover {
  border-color: var(--tinta);
  background: var(--fundo);
}

.gmail-tarefas__item input[type="checkbox"]:checked ~ .corta {
  font-weight: 600;
  color: var(--tinta);
}

.gmail-tarefas__meta {
  display: flex;
  gap: var(--esp-m);
  align-items: center;
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.5;
}

.gmail-tarefas__de {
  font-weight: 500;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.gmail-tarefas__resumo {
  margin: 0;
  padding: 0;
  font-size: calc(14px * var(--fs, 1));
  color: var(--tinta-2);
  line-height: 1.5;
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .gmail-tarefas__controles { flex-wrap: wrap; }
  .gmail-tarefas__controles .botao { margin-left: 0; }
}