/* DarkTask — Produtividade (template 09/2026)
 *
 * Medidas de DarkTask v2.dc.html: topo de 98px com o trilho de botões na
 * coluna da direita (400px, 260px entre 880 e 1179), grade de ambientes com
 * moldura de 25px, cartão com faixas de 49 e 56px. O interior do ambiente usa
 * o mesmo topo, com Voltar, as ações do ambiente e o "+ Tarefa" cheio.
 *
 * Os vínculos e as funções continuam os do app; o que muda é o desenho. O
 * prefixo #dc-root vence as receitas antigas de app-polish.css e
 * floating-shell.css. Carrega depois de hoje.css e antes de casca.css.
 */

/* --- tons do metal do topo, por tema --------------------------------------- */
.dtp-cabeca {
  --dtp-metal-a: #e8e8e8;
  --dtp-metal-b: #dedede;
  --dtp-metal-c: #cfcfcf;
  --dtp-brilho: #ffffff;
}
[data-dt-theme="dark"] .dtp-cabeca {
  --dtp-metal-a: #121212;
  --dtp-metal-b: #181818;
  --dtp-metal-c: #232323;
  --dtp-brilho: #0d0d0d;
}

/* A Produtividade encosta nas bordas da área de conteúdo: a moldura é dela. */
html[data-dt-tela="produtividade"] body #dc-root #dt-conteudo {
  max-width: none !important;
  padding: 0 !important;
}

/* =========================================================================
   TOPO — 98px
   ========================================================================= */
html body #dc-root .dtp-cabeca {
  position: relative;
  height: 98px;
  flex: none;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, var(--bg) 0%, var(--bg) 32%,
      color-mix(in srgb, var(--dtp-brilho) 85%, transparent) 46%,
      color-mix(in srgb, var(--dtp-brilho) 20%, transparent) 64%, transparent 78%),
    linear-gradient(90deg, var(--dtp-metal-a) 0%, var(--dtp-metal-b) 55%, var(--dtp-metal-c) 100%);
  box-shadow: none;
  overflow: hidden;
}
html body #dc-root .dtp-cabeca::before,
html body #dc-root .dtp-cabeca::after { content: none !important; }

#dc-root .dtp-cabeca-texto {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding: 0 20px;
}
html body #dc-root .dtp-cabeca-texto h1 {
  margin: 0 !important;
  font: 700 22px/1 var(--font-ui) !important;
  letter-spacing: -.6px !important;
  color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dc-root .dtp-cabeca-texto > span {
  font: 400 11.5px/1 var(--font-ui);
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#dc-root .dtp-trilho {
  width: calc(var(--casca-trilho, 400px) - var(--dtc-barra, 0px));
  flex: none;
  display: flex;
  align-items: stretch;
}
#dc-root .dtp-trilho-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

html body #dc-root .dtp-celula {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; width: auto; height: auto; min-height: 0;
  margin: 0; padding: 0 8px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
  white-space: nowrap; cursor: pointer;
}
html body #dc-root .dtp-celula svg { width: 20px; height: 20px; flex: none; }
html body #dc-root .dtp-celula:hover { background: var(--surface-2) !important; }
html body #dc-root .dtp-celula:active { background: var(--surface-3, var(--surface-2)) !important; }
html body #dc-root .dtp-celula.e-cheia {
  background: var(--text) !important; color: var(--bg) !important; letter-spacing: .3px;
}
html body #dc-root .dtp-celula.e-cheia:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body #dc-root .dtp-celula:disabled { opacity: .4; cursor: default; }

/* Voltar, no interior do ambiente. */
html body #dc-root .dtp-voltar {
  width: 150px; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; min-height: 0; margin: 0; padding: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important;
  cursor: pointer;
}
html body #dc-root .dtp-voltar svg { width: 20px; height: 20px; flex: none; }
html body #dc-root .dtp-voltar:hover { background: var(--surface-2) !important; }

/* No interior, as ações do ambiente são células de 72px e o "+ Tarefa" ocupa
   o resto do trilho. O botão de compartilhar entra aqui por script. */
html body #dc-root .dt-env-open-actions .dt-env-card-action {
  width: 72px !important; min-width: 72px; height: auto !important; min-height: 0 !important; flex: none;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  color: var(--text-2) !important; cursor: pointer;
}
html body #dc-root .dt-env-open-actions .dt-env-card-action:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-env-open-actions .dt-env-card-action svg { width: 20px; height: 20px; }
html body #dc-root .dt-env-open-actions .e-tarefa { flex: 1; padding: 0 22px !important; }

@media (min-width: 880px) and (max-width: 1179px) {
  html body #dc-root .dtp-celula { font-size: 12px !important; gap: 6px; }
  html body #dc-root .dtp-celula svg { width: 17px; height: 17px; }
  html body #dc-root .dt-env-open-actions .e-tarefa span { display: none; }
}
@media (max-width: 879px) {
  #dc-root .dtp-trilho { width: auto; }
  html body #dc-root .dtp-trilho-3 .dtp-celula { padding: 0 12px !important; font-size: 12px !important; gap: 6px; }
  html body #dc-root .dtp-voltar { width: 56px; }
  html body #dc-root .dtp-voltar span { display: none; }
  html body #dc-root .dt-env-open-actions .dt-env-card-action { display: none !important; }
  html body #dc-root .dt-env-open-actions .e-tarefa { padding: 0 16px !important; }
  html body #dc-root .dt-env-open-actions .e-tarefa span { display: none; }
}

/* =========================================================================
   AMBIENTES — grade de cartões
   ========================================================================= */
#dc-root .dt-env-space { margin: 0; padding: 0; }
#dc-root .dtp-ambientes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin: 25px;
}
@media (max-width: 1179px) { #dc-root .dtp-ambientes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 879px) { #dc-root .dtp-ambientes { grid-template-columns: minmax(0, 1fr); margin: 16px; gap: 16px; } }

html body #dc-root .dtp-amb {
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  cursor: default; transform: none !important;
}
html body #dc-root .dtp-amb:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important; }

#dc-root .dtp-amb-kicker {
  height: 49px; flex: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0 20px;
  border-bottom: 1px solid var(--line);
  font: 700 10px/1 var(--font-ui); letter-spacing: 1.8px;
  color: var(--text-3);
}
#dc-root .dtp-amb-num { flex: 1; min-width: 0; font-size: 11px; letter-spacing: 1.6px; font-variant-numeric: tabular-nums; }

#dc-root .dtp-amb-corpo { flex: none; display: flex; align-items: center; gap: 14px; padding: 20px; }
#dc-root .dtp-amb-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
html body #dc-root .dtp-amb-nome h2 {
  margin: 0 !important;
  font: 700 24px/1 var(--font-ui) !important; letter-spacing: -.7px !important;
  color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dc-root .dtp-amb-nome > span { font: 400 12.5px/1 var(--font-ui); color: var(--text-2); }
html body #dc-root .dtp-amb-abrir {
  width: 40px; height: 40px; min-height: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important;
  cursor: pointer;
}
html body #dc-root .dtp-amb-abrir svg { width: 20px; height: 20px; }
html body #dc-root .dtp-amb-abrir:hover { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; }

#dc-root .dtp-amb-progresso {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 11px;
  padding: 0 20px 18px;
}
#dc-root .dtp-barra { height: 3px; background: color-mix(in srgb, var(--text) 10%, var(--bg)); }
#dc-root .dtp-barra > span { display: block; height: 100%; background: var(--text); }
#dc-root .dtp-amb-progresso strong { font: 700 12.5px/1 var(--font-ui); color: var(--text); }
#dc-root .dtp-amb-progresso > span { font: 400 11.5px/1.3 var(--font-ui); color: var(--text-3); }

#dc-root .dtp-amb-rodape { height: 56px; flex: none; display: flex; align-items: stretch; border-top: 1px solid var(--line); }
#dc-root .dtp-amb-rodape .dt-env-card-tools { display: flex; align-items: stretch; gap: 0; margin: 0; }
html body #dc-root .dtp-amb .dt-env-card-action {
  width: 56px !important; min-width: 56px; height: auto !important; min-height: 0 !important; flex: none;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important; box-shadow: none !important;
  cursor: pointer;
}
html body #dc-root .dtp-amb .dt-env-card-action svg { width: 20px; height: 20px; }
html body #dc-root .dtp-amb .dt-env-card-action:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dtp-amb .dt-env-card-action:disabled { opacity: .4; cursor: default; }
#dc-root .dtp-amb-data {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  font: 400 11px/1 var(--font-ui); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* O selo de ambiente compartilhado entra por script logo depois da etiqueta. */
html body #dc-root .dtp-amb .dt-amb-selo {
  display: flex; align-items: center; gap: 8px;
  height: 40px; margin: 0; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; font: 600 11.5px/1 var(--font-ui); color: var(--text-2);
}

/* Sem ambientes: o convite ocupa a moldura. */
html body #dc-root .dt-env-space .dt-env-empty {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 25px; padding: 64px 24px;
  border: 1px solid color-mix(in srgb, var(--text) 23%, var(--bg)) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; text-align: center;
}
html body #dc-root .dt-env-empty .dt-empty-mark { border: 0 !important; background: transparent !important; color: var(--text-3); }
html body #dc-root .dt-env-empty h3 { margin: 0 !important; font: 700 15px/1 var(--font-ui) !important; letter-spacing: -.3px; color: var(--text); }
html body #dc-root .dt-env-empty p { margin: 0; max-width: 380px; font: 400 12px/1.5 var(--font-ui); color: var(--text-3); }
html body #dc-root .dt-env-empty .dl-btn-primary {
  height: 44px; padding: 0 22px !important; margin-top: 4px;
  border: 0 !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}

/* =========================================================================
   INTERIOR DO AMBIENTE — topo, faixa de gente e a faixa "Projetos"
   ========================================================================= */
html body #dc-root .dt-env-open {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}
html body #dc-root .dt-env-open .dt-amb-gente {
  height: 56px; flex: none;
  display: flex; align-items: center; gap: 14px;
  margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
}
html body #dc-root .dt-env-open .dt-amb-gente-criador {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;
}
html body #dc-root .dt-env-open .dt-amb-gente-criador strong { font: 700 11.5px/1 var(--font-ui); color: var(--text); }
html body #dc-root .dt-env-open .dt-amb-gente-criador small {
  margin-left: 10px; font: 700 9.5px/1 var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-3);
}
html body #dc-root .dt-env-open .dt-amb-gente-vazio { font: 400 12px/1 var(--font-ui); color: var(--text-3); }

#dc-root .dtp-faixa {
  height: 49px; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 25px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
html body #dc-root .dtp-faixa h2 {
  margin: 0 !important;
  font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text) !important;
}
#dc-root .dtp-faixa > span { font: 400 11.5px/1 var(--font-ui); color: var(--text-3); }

/* Os blocos do interior ficam dentro da moldura de 25px. */
html[data-dt-tela="produtividade"] body #dc-root #dt-conteudo .dt-darktasks-container,
html[data-dt-tela="produtividade"] body #dc-root #dt-conteudo .dt-project-list,
html[data-dt-tela="produtividade"] body #dc-root #dt-conteudo .dt-empty-state {
  margin: 25px !important;
  width: auto !important;
  max-width: none !important;
}

/* =========================================================================
   PRIORITÁRIAS — caixa com cabeçalho de 56px e linhas de 72px
   A marcação é a do cartão de tarefa (os contratos prendem as classes); aqui
   ele vira a linha compacta do protótipo: código e projeto, título, quando e
   o raio. Descrição, anexos e brilho ficam para a tarefa aberta.
   ========================================================================= */
html body #dc-root .dt-darktasks-container {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #dc-root .dt-darktasks-heading {
  height: 56px; flex: none;
  display: flex !important; align-items: center !important; gap: 12px !important;
  margin: 0 !important; padding: 0 20px !important;
  border-bottom: 1px solid var(--line);
}
html body #dc-root .dt-darktasks-heading > span:first-child { display: inline-flex; color: var(--text) !important; }
html body #dc-root .dt-darktasks-heading > span:first-child svg { width: 20px; height: 20px; }
html body #dc-root .dt-darktasks-heading h2 {
  flex: 1; min-width: 0;
  font: 700 12px/1 var(--font-ui) !important; letter-spacing: 1.8px !important; text-transform: uppercase;
  color: var(--text) !important;
}
html body #dc-root .dt-darktasks-heading > span:last-child {
  font: 400 11.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root .dt-darktasks-container .dt-task-grid {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  grid-template-columns: none !important;
}
html body #dc-root .dt-darktasks-container .dt-task-card {
  width: auto !important; max-width: none !important; min-height: 72px;
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 8px !important;
  margin: 0 !important; padding: 12px 20px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; cursor: default !important;
}
html body #dc-root .dt-darktasks-container .dt-task-card:last-child { border-bottom: 0 !important; }
html body #dc-root .dt-darktasks-container .dt-task-card:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important; }
html body #dc-root .dt-darktasks-container .dt-task-card > .dt-alert-glow,
html body #dc-root .dt-darktasks-container .dt-task-card > p,
html body #dc-root .dt-darktasks-container .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):has(.dt-assinatura, svg[width="13"]) { display: none !important; }
html body #dc-root .dt-darktasks-container .dt-task-card button[aria-label="Abrir a tarefa"] {
  font: 600 14.5px/1.2 var(--font-ui) !important; letter-spacing: -.2px; color: var(--text) !important;
}
html body #dc-root .dt-darktasks-container .dt-task-card [title="Prioritária"] { color: var(--text) !important; }

/* =========================================================================
   PROJETOS — cartão reto, cabeçalho de 56px, ações em células de 49px
   ========================================================================= */
html body #dc-root .dt-project-list { gap: 25px !important; }
html body #dc-root .dt-project-shell {
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; overflow: visible !important;
}
html body #dc-root .dt-project-header {
  min-height: 56px; height: 56px;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 0 0 20px !important;
  border: 0 !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--text) 3.5%, var(--bg)) !important;
}
html body #dc-root .dt-project-header:not(:last-child) { border-bottom: 1px solid var(--line) !important; }
html body #dc-root .dt-project-header > span:first-child { align-self: center; margin-right: 12px; color: var(--text-3) !important; }
html body #dc-root .dt-project-title {
  flex: 1; min-width: 0;
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 0 20px 0 0 !important; cursor: pointer;
}
html body #dc-root .dt-project-title .dt-project-touch-icon { display: none !important; }
html body #dc-root .dt-project-title h3 {
  font: 700 16px/1 var(--font-ui) !important; letter-spacing: -.3px !important; color: var(--text) !important;
}
html body #dc-root .dt-project-title > span:not(.dt-assinatura):not(.dt-project-env),
html body #dc-root .dt-project-title .dt-assinatura {
  display: inline-flex !important; align-items: center; gap: 7px;
  height: 24px; padding: 0 9px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-2) !important; white-space: nowrap;
}
html body #dc-root .dt-project-actions {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #dc-root .dt-project-actions .dt-acao-divisor { display: none !important; }
html body #dc-root .dt-project-actions > button,
html body #dc-root .dt-project-actions .dt-project-action {
  width: 49px !important; min-width: 49px; height: auto !important; min-height: 0 !important; flex: none;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important; box-shadow: none !important;
}
html body #dc-root .dt-project-actions > button svg { width: 18px; height: 18px; }
html body #dc-root .dt-project-actions > button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-project-actions > button[data-action="new-task"] { color: var(--text) !important; }

/* O corpo aberto: moldura de 20px e grupos com 20px entre si. */
html body #dc-root .dt-project-shell > div:not(.dt-project-header) { padding: 20px !important; animation: none !important; }
html body #dc-root .dt-project-shell [data-drop-section] { gap: 20px !important; }

/* Seção: faixa de 49px com o nome em caixa alta e as ações em células. */
html body #dc-root .dt-section-header {
  min-height: 49px;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--text) 3.5%, var(--bg)) !important; box-shadow: none !important;
}
html body #dc-root .dt-section-toggle {
  flex: 1; min-width: 0;
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--text-2) !important; text-align: left;
}
html body #dc-root .dt-section-title-stack { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 10px !important; min-width: 0; }
html body #dc-root .dt-section-title {
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.5px !important; text-transform: uppercase;
  color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root .dt-section-count { font: 400 11px/1 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root .dt-section-actions {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
html body #dc-root .dt-section-actions > button {
  width: 49px !important; min-width: 49px; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important;
}
html body #dc-root .dt-section-actions > button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-section-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; margin: 0; padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--text) 23%, var(--bg)) !important; border-radius: 0 !important;
  background: transparent !important;
  font: 400 11.5px/1 var(--font-ui); color: var(--text-3);
}

/* =========================================================================
   TAREFA NO PROJETO — cartão reto com a barra de ações de 49px no pé
   Título primeiro, depois a linha de código, projeto e quando, como no
   protótipo. A ordem visual sai por `order`; a marcação continua a mesma.
   ========================================================================= */
html body #dc-root .dt-project-shell .dt-task-grid {
  display: flex !important; flex-direction: column !important; gap: 20px !important;
  grid-template-columns: none !important;
}
html body #dc-root .dt-project-shell .dt-task-card {
  width: auto !important; max-width: none !important;
  display: flex !important; flex-direction: column !important; gap: 9px !important;
  margin: 0 !important; padding: 16px 18px 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; box-shadow: none !important; transform: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important;
}
html body #dc-root .dt-project-shell .dt-task-card:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important; }
html body #dc-root .dt-project-shell .dt-task-card > .dt-card-topo { order: 2; }
html body #dc-root .dt-project-shell .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):first-of-type { order: 1; }
html body #dc-root .dt-project-shell .dt-task-card > p { order: 3; }
html body #dc-root .dt-project-shell .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer) + div:not(.dt-task-footer) { order: 4; }
html body #dc-root .dt-project-shell .dt-task-card > .dt-task-footer { order: 9; }
html body #dc-root .dt-project-shell .dt-task-card button[aria-label="Abrir a tarefa"] {
  font: 600 14px/1.3 var(--font-ui) !important; letter-spacing: -.2px; color: var(--text) !important;
}
html body #dc-root .dt-project-shell .dt-task-card > p {
  font: 400 12.5px/1.5 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-card-topo { gap: 10px !important; align-items: center; }
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-card-topo .dt-codigo {
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
  font-variant-numeric: tabular-nums; letter-spacing: 0 !important;
}
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-card-topo .dt-codigo-projeto {
  font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-card-topo > span:last-child:not(.dt-codigo) {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root .dt-project-shell .dt-task-card > div > span[style*="border-radius:999px"] {
  border-radius: 0 !important; background: transparent !important;
}

html body #dc-root .dt-project-shell .dt-task-footer {
  order: 9;
  height: 49px; min-height: 49px;
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  margin: 7px -18px 0 !important; padding: 0 !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important;
}
html body #dc-root .dt-task-footer .dt-task-actions {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #dc-root .dt-task-footer .dt-task-actions > button {
  width: 49px !important; min-width: 49px; height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-2) !important; box-shadow: none !important;
  font: 600 12px/1 var(--font-ui) !important;
}
html body #dc-root .dt-task-footer .dt-task-actions > button svg { width: 18px; height: 18px; }
html body #dc-root .dt-task-footer .dt-task-actions > button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-task-footer .dt-task-actions > .dt-acao-rotulo { width: 98px !important; color: var(--text) !important; }
html body #dc-root .dt-task-footer .dt-supertask-toggle[aria-pressed="true"] { color: var(--text) !important; background: var(--surface-2) !important; }
html body #dc-root .dt-task-footer .dt-contagem {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
}

/* Uma regra antiga centraliza os filhos do cartão; aqui tudo encosta à
   esquerda e o pé ocupa a largura inteira. */
/* components.css deixa o cartão em flex com quebra de linha; numa coluna isso
   encolhe cada filho até o conteúdo. Sem quebra, eles ocupam a largura. */
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-task-card {
  flex-wrap: nowrap !important; align-content: stretch !important;
  align-items: stretch !important; text-align: left !important;
}
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-card-topo { justify-content: flex-start !important; width: auto !important; }
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer) {
  justify-content: space-between !important; width: auto !important; text-align: left !important;
}
html body #dc-root :is(.dt-project-shell, .dt-darktasks-container) .dt-task-card button[aria-label="Abrir a tarefa"] { text-align: left !important; }
html body #dc-root .dt-project-shell .dt-task-footer { width: auto !important; align-self: stretch !important; }
/* No protótipo as ações ficam juntas à direita, com o "Feito" ocupando duas
   células; o espaçador antigo as separava. */
html body #dc-root .dt-project-shell .dt-task-footer > span[style*="flex:1"],
html body #dc-root .dt-project-shell .dt-task-footer > span[style*="flex: 1"] { display: none !important; }
html body #dc-root .dt-project-actions { align-self: stretch !important; height: auto !important; }
html body #dc-root .dt-project-shell [data-drop-section] > button { justify-content: flex-start !important; }

/* Vazios do interior. */
html body #dc-root .dt-project-shell button[sc-camel-on-click],
html body #dc-root .dt-empty-state { border-radius: 0 !important; }
html body #dc-root #dt-conteudo .dt-empty-state {
  border: 1px solid color-mix(in srgb, var(--text) 23%, var(--bg)) !important;
  background: transparent !important; backdrop-filter: none !important;
}

@media (max-width: 879px) {
  html body #dc-root .dt-project-header { height: auto; min-height: 56px; }
  html body #dc-root .dt-project-title > span:not(.dt-assinatura):not(.dt-project-env),
  html body #dc-root .dt-project-title .dt-assinatura { display: none !important; }
  html body #dc-root .dt-project-actions > button,
  html body #dc-root .dt-project-actions .dt-project-action,
  html body #dc-root .dt-section-actions > button,
  html body #dc-root .dt-task-footer .dt-task-actions > button { width: 40px !important; min-width: 40px; }
  html body #dc-root .dt-task-footer .dt-task-actions > .dt-acao-rotulo { width: 80px !important; }
  html body #dc-root .dt-project-shell > div:not(.dt-project-header) { padding: 16px !important; }
}

/* =========================================================================
   TAREFA EM POST-IT (ProdExtras, mudança de 16/09) — quadrado de 200×200
   Antes: linha de largura cheia com quatro células de ação no pé. Agora um
   quadrado em grade que reflui, sem botão nenhum além da caixa de concluir:
   o quadrado inteiro abre a tarefa, e é na janela da tarefa que vivem as
   ações (prioridade, editar, excluir, arquivar, concluir).

     ┌──────────────────────┐
     │ #141          ⚡  ●  │  36px · código, prioridade, quem criou
     ├──────────────────────┤
     │ título em até 4      │  corpo
     │ linhas, cortado      │
     ├────┬─────────────────┤
     │ ☐  │ hoje 10:16  📎3 │  44px · concluir, quando, anexos
     └────┴─────────────────┘

   A marcação é a mesma: o cartão vira grade e os invólucros (topo, linha do
   título, linha de autor, pé) viram display:contents, de modo que cada peça
   cai na sua célula. O botão do título estica um ::after por cima do
   quadrado inteiro; a caixa de concluir fica acima dele e não abre a tarefa.
   Vale só dentro do projeto — o resumo "Prioritárias" continua em linhas.
   ========================================================================= */
html body #dc-root .dt-project-shell .dt-task-grid {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: flex-start !important; gap: 14px !important; padding: 0 !important;
}
html body #dc-root .dt-project-shell .dt-task-card {
  position: relative !important;
  width: 200px !important; height: 200px !important; min-width: 200px !important; max-width: 200px !important; flex: none !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto auto !important;
  grid-template-rows: 36px minmax(0, 1fr) 44px !important;
  gap: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; overflow: hidden !important;
  cursor: pointer !important;
}
html body #dc-root .dt-project-shell .dt-task-card:hover { background: var(--surface-2) !important; border-color: var(--text) !important; }
html body #dc-root .dt-project-shell .dt-task-card:active { background: var(--surface-3) !important; }
/* Os dois fios internos: debaixo da faixa de cima e em cima do pé. */
html body #dc-root .dt-project-shell .dt-task-card::before,
html body #dc-root .dt-project-shell .dt-task-card::after {
  content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; height: 1px !important;
  background: var(--line) !important; pointer-events: none !important; z-index: 2 !important;
}
html body #dc-root .dt-project-shell .dt-task-card::before { top: 35px !important; }
html body #dc-root .dt-project-shell .dt-task-card::after { bottom: 44px !important; }

html body #dc-root .dt-project-shell .dt-task-card > :is(.dt-card-topo, .dt-task-footer),
html body #dc-root .dt-project-shell .dt-task-card > .dt-task-footer > .dt-acoes-feito,
html body #dc-root .dt-project-shell .dt-task-card > div:has(> button[aria-label="Abrir a tarefa"]),
html body #dc-root .dt-project-shell .dt-task-card > div:has(> .dt-assinatura),
html body #dc-root .dt-project-shell .dt-task-card > div:has(> span > svg[width="13"]) { display: contents !important; }
html body #dc-root .dt-project-shell .dt-task-card > :is(p, .dt-alert-glow),
html body #dc-root .dt-project-shell .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):not(:has(> button[aria-label="Abrir a tarefa"])):not(:has(> .dt-assinatura)):not(:has(> span > svg[width="13"])),
html body #dc-root .dt-project-shell .dt-task-card .dt-card-topo > :is(.dt-card-editada, .dt-codigo-projeto),
html body #dc-root .dt-project-shell .dt-task-card .dt-assinatura-nome,
html body #dc-root .dt-project-shell .dt-task-footer > span,
html body #dc-root .dt-project-shell .dt-task-footer > .dt-task-actions:not(.dt-acoes-feito),
html body #dc-root .dt-project-shell .dt-task-footer > .dt-acoes-feito > button:not(.dt-acao-rotulo) { display: none !important; }

/* Faixa de cima, 36px. */
html body #dc-root .dt-project-shell .dt-task-card .dt-card-topo > .dt-codigo {
  grid-area: 1 / 1 / 2 / 3 !important; align-self: center !important; min-width: 0 !important; padding: 0 12px !important;
  font: 700 10.5px/1 var(--font-ui) !important; letter-spacing: 1.2px !important; color: var(--text-3) !important;
  white-space: nowrap !important; overflow: hidden !important;
}
html body #dc-root .dt-project-shell .dt-task-card [title="Prioritária"] {
  grid-area: 1 / 3 / 2 / 4 !important; align-self: center !important; display: flex !important; padding: 0 4px !important; color: var(--text) !important;
}
html body #dc-root .dt-project-shell .dt-task-card .dt-assinatura {
  grid-area: 1 / 4 / 2 / 5 !important; align-self: center !important; display: flex !important; padding: 0 12px 0 4px !important;
  gap: 0 !important; border: 0 !important; background: none !important;
}

/* Corpo: o título em até quatro linhas. */
html body #dc-root .dt-project-shell .dt-task-card button[aria-label="Abrir a tarefa"] {
  grid-area: 2 / 1 / 3 / -1 !important; align-self: stretch !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; min-width: 0 !important;
  margin: 0 !important; padding: 14px 12px !important; border: 0 !important; background: none !important;
  text-align: left !important; overflow: hidden !important;
  font: 600 14px/1.3 var(--font-ui) !important; letter-spacing: -.2px !important; color: var(--text) !important;
  cursor: pointer !important;
}
html body #dc-root .dt-project-shell .dt-task-card button[aria-label="Abrir a tarefa"] > span {
  display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; overflow-wrap: anywhere !important;
}
/* O quadrado inteiro é o alvo do título. */
html body #dc-root .dt-project-shell .dt-task-card button[aria-label="Abrir a tarefa"]::after {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important;
}
html body #dc-root .dt-project-shell .dt-task-card button[aria-label="Abrir a tarefa"]:focus-visible { outline: none !important; }
html body #dc-root .dt-project-shell .dt-task-card:has(button[aria-label="Abrir a tarefa"]:focus-visible) { outline: 2px solid var(--text) !important; outline-offset: 2px !important; }

/* Pé de 44px: concluir, quando, anexos. */
html body #dc-root .dt-project-shell .dt-task-card .dt-card-topo > .dt-quando,
html body #dc-root .dt-project-shell .dt-task-card .dt-card-topo > span:last-child:not(.dt-codigo) {
  grid-area: 3 / 2 / 4 / -1 !important; align-self: center !important; min-width: 0 !important; margin: 0 !important; padding: 0 44px 0 12px !important;
  display: block !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-3) !important; font-variant-numeric: tabular-nums !important;
}
html body #dc-root .dt-project-shell .dt-task-card .dt-card-topo > .dt-quando svg { display: none !important; }
html body #dc-root .dt-project-shell .dt-task-card > div > span:has(> svg[width="13"]) {
  grid-area: 3 / 2 / 4 / -1 !important; justify-self: end !important; align-self: center !important; display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 0 12px 0 0 !important; border: 0 !important; background: none !important;
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-rotulo {
  grid-area: 3 / 1 / 4 / 2 !important; position: relative !important; z-index: 3 !important;
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font-size: 0 !important; color: var(--text) !important;
}
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-rotulo:hover { background: var(--surface-3) !important; }
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-concluir svg { display: none !important; }
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-concluir::before {
  content: "" !important; display: block !important; position: static !important; left: auto !important; bottom: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; z-index: auto !important; width: 18px !important; height: 18px !important; box-sizing: border-box !important; border: 1px solid var(--text-3) !important; background: var(--bg) !important;
}
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-concluir:hover::before { border-color: var(--text) !important; }
html body #dc-root .dt-project-shell .dt-task-footer .dt-acoes-feito > .dt-acao-seguir svg { width: 16px !important; height: 16px !important; }

/* Contagens (concluindo, excluindo): tomam o pé inteiro, acima do alvo. */
html body #dc-root .dt-project-shell .dt-task-footer > div:not(.dt-task-actions) {
  grid-area: 3 / 1 / 4 / -1 !important; position: relative !important; z-index: 3 !important;
  display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 0 0 12px !important;
  background: var(--surface-2) !important; border: 0 !important; border-radius: 0 !important;
}
html body #dc-root .dt-project-shell .dt-task-footer > div:not(.dt-task-actions) > span:first-child {
  flex: none !important; font: 700 12px/1 var(--font-ui) !important; font-variant-numeric: tabular-nums !important; color: var(--text) !important;
  width: auto !important; height: auto !important; border: 0 !important; background: none !important;
}
html body #dc-root .dt-project-shell .dt-task-footer > div:not(.dt-task-actions) > span:nth-child(2) {
  flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  font: 400 10.5px/1 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root .dt-project-shell .dt-task-footer > div:not(.dt-task-actions) > button {
  flex: none !important; align-self: stretch !important; height: auto !important; margin: 0 !important; padding: 0 12px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 11px/1 var(--font-ui) !important; filter: none !important;
}
html body #dc-root .dt-project-shell .dt-task-footer > div:not(.dt-task-actions) > button svg { display: none !important; }

/* O último quadrado da seção é o "+ tarefa nesta seção": mesmo tamanho, fio
   mais forte, e fica onde o olho já está. */
html body #dc-root .dt-project-shell .dt-task-grid > .dt-task-novo {
  width: 200px !important; height: 200px !important; flex: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-3) !important; box-shadow: none !important;
  font: 600 12.5px/1 var(--font-ui) !important; cursor: pointer;
}
html body #dc-root .dt-project-shell .dt-task-grid > .dt-task-novo:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--text) !important; }
html body #dc-root .dt-project-shell .dt-task-grid > .dt-task-novo:active { background: var(--surface-3) !important; }

/* As ações do ambiente são CÉLULAS COLADAS, divididas por fio: o grupo tinha
   8px de gap e cada vão aparecia como uma tira de papel entre os ícones — e o
   "+ Tarefa", empurrado pelos gaps, saía pela direita. Sem gap, e o grupo
   ocupa o trilho do cabeçalho, como as outras telas. */
html body #dc-root .dt-env-open-actions {
  gap: 0 !important; flex: none !important; width: var(--casca-trilho, 400px) !important;
  min-width: 0 !important; padding: 0 !important; margin: 0 !important;
}
html body #dc-root .dt-env-open-actions .e-tarefa { min-width: 0 !important; }