/* DarkTask — casca (template 09/2026)
 *
 * A última folha do index.html. Reproduz a grade do protótipo
 * (darktask-app/DarkTask v2.dc.html): a tela inteira é uma grade fixa de
 * 100% da janela, sem rolagem de página —
 *
 *   ┌────────────┬──────────────────────────────┬──────────────┐
 *   │ logo  72   │ cabeçalho 72                 │ trilho 400   │
 *   │ busca 49   ├──────────────────────────────┴──────────────┤
 *   │ nav 49×n   │ conteúdo (rola por dentro)                  │
 *   │            │                                             │
 *   │ util 49×3  ├──────────────────────────────┬──────────────┤
 *   │ conta 72   │ linha do tempo / mídia       │ trilho 400   │
 *   └────────────┴──────────────────────────────┴──────────────┘
 *
 * O trilho da direita tem a MESMA largura no cabeçalho, na coluna de Clima da
 * Hoje e no rodapé (400px a partir de 1180px; 260px entre 880 e 1179px): é
 * essa coluna contínua que dá o alinhamento do protótipo.
 *
 * Por que tudo aqui leva `html body #dc-root` e !important: floating-shell.css
 * e app-polish.css prendem a casca antiga (sidebar fixed, dock fixed, margens do
 * conteúdo) com !important e seletores de peso alto. Ver a memória
 * "camada-visual-e-cascata".
 *
 * Abaixo de 880px a grade não entra ainda: o celular segue o menu atual até a
 * casca móvel do protótipo (hambúrguer no cabeçalho + gaveta) ser montada.
 */

:root {
  --casca-sidebar: 272px;
  --casca-topo: 72px;
  --casca-trilho: 400px;
}
@media (min-width: 880px) and (max-width: 1179px) {
  :root { --casca-trilho: 260px; }
}

/* --- grade da janela ------------------------------------------------------ */
@media (min-width: 880px) {
  html body #dc-root .dt-app-root {
    display: grid !important;
    grid-template-columns: var(--casca-sidebar) minmax(0, 1fr) !important;
    grid-template-rows: var(--casca-topo) minmax(0, 1fr) auto !important;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* Sidebar: coluna inteira, da borda de cima à de baixo. */
  html body #dc-root .dt-app-root > .dt-sidebar {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
  }

  /* Cabeçalho: faixa de 72px ao lado do logo. */
  html body #dc-root .dt-app-root > .dt-notice-host {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    top: auto !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
  }

  /* Conteúdo: a única região que rola. */
  html body #dc-root .dt-app-root > #dt-conteudo,
  html body #dc-root .dt-app-root > .dt-page-content {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Rodapé: linha do tempo + mídia, sempre montados embaixo. */
  html body #dc-root .dt-app-root > .dt-timeline-dock {
    grid-column: 2 !important;
    grid-row: 3 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0;
  }

  /* O rodapé de marca "DARKTASK" do fim da página não existe no protótipo. */
  html body #dc-root .dt-app-root > .dt-page-tail { display: none !important; }

  /* Trilho da direita do cabeçalho: mesma largura da coluna de Clima e do
     trilho do rodapé. */
  html body #dc-root .dt-topbar-rail { width: var(--casca-trilho); }
}

/* --- barra de rolagem do protótipo ----------------------------------------
 * 16px, trilho de papel com um fio à esquerda, polegar de 10px em tinta e
 * setas finas de uma linha. As setas são SVG embutido (o app funciona offline).
 */
:root {
  --sb-tinta: #000000;
  --sb-papel: var(--bg, #f5f5f5);
  --sb-fio: var(--line, #dcdcdc);
  --sb-hover: #e8e8e8;
  --sb-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E");
  --sb-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --sb-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E");
  --sb-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");
}
[data-dt-theme="dark"] {
  --sb-tinta: var(--text, #f5f5f5);
  --sb-hover: var(--panel-2, #17181b);
  --sb-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6 -6l6 6'/%3E%3C/svg%3E");
  --sb-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --sb-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6l6 6'/%3E%3C/svg%3E");
  --sb-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E");
}

html, body, #dc-root * { scrollbar-color: var(--sb-tinta) var(--sb-papel); }
html body ::-webkit-scrollbar { width: 16px; height: 16px; background: var(--sb-papel); border-left: 1px solid var(--sb-fio); }
html body ::-webkit-scrollbar-track { background: var(--sb-papel); border-radius: 0; }
html body ::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid var(--sb-fio); }
html body ::-webkit-scrollbar-thumb {
  background: var(--sb-tinta); border-radius: 0;
  border-left: 3px solid var(--sb-papel); border-right: 3px solid var(--sb-papel);
  background-clip: padding-box;
}
html body ::-webkit-scrollbar-thumb:horizontal {
  border-left: 0; border-right: 0;
  border-top: 3px solid var(--sb-papel); border-bottom: 3px solid var(--sb-papel);
}
html body ::-webkit-scrollbar-corner { background: var(--sb-papel); }
html body ::-webkit-scrollbar-button:single-button {
  display: block; width: 16px; height: 16px;
  background-color: var(--sb-papel); background-repeat: no-repeat;
  background-position: center; background-size: 12px 12px;
  border: 0; border-radius: 0;
}
html body ::-webkit-scrollbar-button:single-button:hover { background-color: var(--sb-hover); }
html body ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--sb-up); }
html body ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--sb-down); }
html body ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: var(--sb-left); }
html body ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: var(--sb-right); }

/* =========================================================================
   SIDEBAR — DarkTask v2.dc.html, linhas 44–114
   logo 72 · busca 49 · telas 49×5 · (espaço) · utilidades 49×3 · conta 72,
   tudo dividido por fio. As cores saem dos tokens do tema; os cinzas do
   protótipo (#333, #666, #a3a3a3, #e9e9e9…) viram misturas de tinta e papel,
   que dão o mesmo tom no Claro e o tom certo no Escuro.
   ========================================================================= */
html body #dc-root .dt-app-root .dt-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 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;
  overflow: visible !important;
}

html body #dc-root .dt-sidebar .dtc-logo {
  height: 72px; flex: none;
  display: flex; align-items: center;
  margin: 0 !important; padding: 0 20px !important;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
html body #dc-root .dt-sidebar .dtc-logo img[data-system-logo] {
  /* 140px = 200 menos 30% (pedido do dono, 17/09). O recuo de 20px da célula
     não muda, então a marca continua alinhada com o resto da barra. */
  width: 140px !important; height: auto !important; max-width: 100% !important;
  display: block; aspect-ratio: auto !important;
}
/* O logo padrão é tinta preta: no tema escuro ele inverte. Logo trocado pelo
   painel admin (outro arquivo) fica como veio. */
html[data-dt-theme="dark"] body #dc-root .dt-sidebar .dtc-logo img[src*="dark-marca"],
html[data-dt-theme="dark"] body #dc-root .dt-sidebar .dtc-logo img[src*="dark_max"] { filter: invert(1); }

html body #dc-root .dt-sidebar .dtc-busca {
  appearance: none;
  height: 49px; flex: none; width: 100%;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0 20px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent;
  color: var(--text-3);
  font: 400 13px/1 var(--font-ui);
  text-align: left; cursor: text;
}
html body #dc-root .dt-sidebar .dtc-busca svg { width: 24px; height: 24px; flex: none; color: var(--text-3); }
html body #dc-root .dt-sidebar .dtc-busca-texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #dc-root .dt-sidebar .dtc-busca-atalho {
  flex: none; font: 700 10px/1 var(--font-ui); letter-spacing: 1px;
  color: var(--text-3);
  background: none; border: 0; padding: 0;
}
html body #dc-root .dt-sidebar .dtc-busca:hover { background: var(--surface-2); }

html body #dc-root .dt-sidebar .dt-sidebar-nav {
  display: flex !important; flex-direction: column !important;
  gap: 0 !important; padding: 0 !important; margin: 0 !important;
}
html body #dc-root .dt-sidebar .dt-sidebar-spacer { flex: 1 1 auto; min-height: 0; }

html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item {
  position: relative;
  width: 100% !important; height: 49px !important; min-height: 49px !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  margin: 0 !important; padding: 0 0 0 20px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important;
  color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important;
  font: 500 14px/1 var(--font-ui) !important;
  box-shadow: none !important; transform: none !important;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item svg {
  width: 24px !important; height: 24px !important; flex: none;
  color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item:active { background: var(--surface-3) !important; }
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"],
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-pressed="true"] {
  background: color-mix(in srgb, var(--text) 5%, var(--bg)) !important;
  border-color: var(--line) !important;
  color: var(--text) !important; font-weight: 700 !important;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"] svg,
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-pressed="true"] svg { color: var(--text) !important; }
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-current="true"]::before,
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-nav-item[aria-pressed="true"]::before {
  background: color-mix(in srgb, var(--text) 40%, var(--bg)) !important;
}
/* Utilidades: fio em cima, texto um ponto menor. */
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-bottom-nav .dt-sidebar-nav-item {
  border-bottom: 0 !important; border-top: 1px solid var(--line) !important;
  font-size: 13.5px !important;
}

/* --- conta + menu que sobe ---------------------------------------------- */
html body #dc-root .dt-sidebar .dt-sidebar-footer {
  position: relative; order: 0 !important;
  display: block; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-userbox {
  height: 72px !important; min-height: 72px !important;
  display: grid !important; grid-template-columns: 36px minmax(0, 1fr) 32px !important;
  align-items: center !important; gap: 12px !important;
  margin: 0 !important; padding: 0 14px 0 20px !important;
  border: 0 !important; border-top: 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-sidebar .dt-sidebar-profile {
  width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
html body #dc-root .dt-sidebar .dt-sidebar-avatar {
  width: 36px !important; height: 36px !important; border-radius: 0 !important; overflow: hidden;
  display: flex !important; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--text) 15%, var(--bg)) !important;
  color: var(--text) !important; font: 700 13px/1 var(--font-ui) !important;
  border: 0 !important; box-shadow: none !important;
}
html body #dc-root .dt-sidebar .dt-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
html body #dc-root .dt-sidebar .dt-sidebar-profile-copy { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
html body #dc-root .dt-sidebar .dt-sidebar-profile-copy strong {
  font: 700 13px/1 var(--font-ui) !important; color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root .dt-sidebar .dt-sidebar-profile-copy small {
  font: 400 11px/1 var(--font-ui) !important; color: var(--text-3) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-settings {
  width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important;
}
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-settings svg {
  width: 20px !important; height: 20px !important;
  transform: rotate(180deg); transition: transform 160ms cubic-bezier(.22, .61, .36, 1);
}

html body #dc-root .dt-sidebar .dtc-conta-menu {
  position: absolute; left: 0; right: 0; bottom: 72px; z-index: 3;
  display: none; flex-direction: column;
  background: var(--bg);
}
html body #dc-root .dt-sidebar .dtc-conta-item {
  appearance: none;
  height: 49px; flex: none; width: 100%;
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 0 16px 0 20px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: var(--bg);
  color: color-mix(in srgb, var(--text) 60%, var(--bg));
  font: 500 13.5px/1 var(--font-ui); text-align: left; cursor: pointer;
}
html body #dc-root .dt-sidebar .dtc-conta-item span { flex: 1; min-width: 0; }
html body #dc-root .dt-sidebar .dtc-conta-item svg { width: 24px; height: 24px; flex: none; color: currentColor; }
html body #dc-root .dt-sidebar .dtc-conta-item svg:last-child { width: 20px; height: 20px; }
html body #dc-root .dt-sidebar .dtc-conta-item:hover,
html body #dc-root .dt-sidebar .dtc-conta-item:focus-visible { background: var(--text); color: var(--bg); }

/* O menu abre com o ponteiro sobre a conta, ou com o foco dentro dela (toque e
   teclado): nada de JS para abrir e fechar. */
html body #dc-root .dt-sidebar .dt-sidebar-footer:hover .dtc-conta-menu,
html body #dc-root .dt-sidebar .dt-sidebar-footer:focus-within .dtc-conta-menu { display: flex; }
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-footer:hover .dt-sidebar-userbox,
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-footer:focus-within .dt-sidebar-userbox { background: var(--surface-2) !important; }
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-footer:hover .dt-sidebar-settings svg,
html body #dc-root .dt-app-root .dt-sidebar .dt-sidebar-footer:focus-within .dt-sidebar-settings svg { transform: rotate(0deg); }

/* =========================================================================
   CABEÇALHO — DarkTask v2.dc.html, linhas 120–143
   ========================================================================= */
html body #dc-root .dt-alert-surface.dt-topbar-band { background: var(--bg) !important; }
html body #dc-root .dtc-burger {
  display: none !important;
  width: 56px !important; flex: none; 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) !important; box-shadow: none !important;
}
html body #dc-root .dtc-burger svg { width: 24px; height: 24px; }
html body #dc-root .dtc-burger:hover { background: var(--surface-2) !important; }
html body #dc-root .dt-topbar-news .dt-topbar-rss { color: color-mix(in srgb, var(--text) 60%, var(--bg)); }
html body #dc-root .dt-topbar-news .dt-topbar-newslabel { color: color-mix(in srgb, var(--text) 60%, var(--bg)); }
html body #dc-root .dt-topbar-cell { color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important; }
html body #dc-root .dt-topbar-cell:hover { color: var(--text) !important; }
html body #dc-root .dt-topbar-cell:active { background: var(--surface-3) !important; }
html body #dc-root .dt-topbar-clock { flex: 1; min-width: 0; justify-content: space-between; }
html body #dc-root .dt-topbar-date { font-size: 12px; color: var(--text-3); text-transform: none; }
@media (max-width: 1023px) {
  html body #dc-root .dt-topbar-date { display: none; }
  html body #dc-root .dt-topbar-clock { justify-content: flex-end; }
}

/* =========================================================================
   RODAPÉ — linha do tempo + mídia, sempre montados (DarkTask v2, 1027–1084)
   ========================================================================= */
html body #dc-root .dt-app-root .dt-timeline-dock {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  padding: 0 !important; border: 0 !important;
  background: var(--bg) !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
}
/* Regra do template: a linha do tempo e a mídia ficam inteiras em toda tela
   (o recolhimento fora da Hoje, de components.css N-03, sai). */
html body #dc-root .dt-timeline-dock .dt-timeline-scroll { display: block !important; }
html body #dc-root .dt-timeline-dock .dt-media-bar { display: flex !important; }
html body #dc-root .dt-timeline-dock .dt-timeline-head::after { content: none !important; }

html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-inner {
  display: flex !important; align-items: stretch !important;
  max-width: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 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;
  overflow: visible !important;
}
html body #dc-root .dt-timeline-dock .dtc-linha-corpo {
  flex: 1; min-width: 0; height: 146px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 20px 20px;
}
html body #dc-root .dt-timeline-dock .dt-timeline-head {
  display: flex !important; align-items: center !important; gap: 9px !important;
  margin: 0 !important; line-height: 1; cursor: default !important;
}
html body #dc-root .dt-timeline-dock .dtc-rotulo {
  font: 700 11px/1 var(--font-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--text);
}
html body #dc-root .dt-timeline-dock .dtc-ponto { font-size: 12px; color: color-mix(in srgb, var(--text) 20%, var(--bg)); }
html body #dc-root .dt-timeline-dock .dtc-dia { font: 400 12.5px/1 var(--font-ui); color: var(--text-2); }
html body #dc-root .dt-timeline-dock .dtc-flex { flex: 1; }
html body #dc-root .dt-timeline-dock .dtc-contagem {
  font: 600 11px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  padding: 3px 6px; border: 1px solid var(--line); color: var(--text-2);
}
html body #dc-root .dt-timeline-dock .dt-timeline-now {
  font: 400 12px/1 var(--font-ui) !important; font-variant-numeric: tabular-nums;
  color: var(--text-3) !important;
}
html body #dc-root .dt-timeline-dock .dt-timeline-scroll { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
html body #dc-root .dt-timeline-dock .dt-timeline-track {
  position: relative !important; height: 58px !important; margin: 0 !important;
}
html body #dc-root .dt-timeline-dock .dtc-marco { display: none; }
html body #dc-root .dt-timeline-dock .dtc-trilha {
  position: absolute; left: 0; right: 0; bottom: 22px; height: 3px;
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
}
html body #dc-root .dt-timeline-dock .dt-timeline-current {
  position: absolute !important; top: auto !important; bottom: 16px !important;
  width: 2px !important; height: 15px !important;
  background: var(--text) !important; box-shadow: none !important;
}
html body #dc-root .dt-timeline-dock .dt-timeline-tick-label {
  bottom: 0 !important;
  font: 400 9px/1 var(--font-ui) !important; letter-spacing: .4px;
  color: var(--text-3) !important;
}
html body #dc-root .dt-timeline-dock .dt-timeline-routine {
  border-radius: 0 !important; box-shadow: none !important; filter: none !important;
}
html body #dc-root .dt-timeline-dock .dt-alarm-timeline-marker {
  border-radius: 0 !important; box-shadow: none !important;
  background: var(--bg) !important; border: 1px solid var(--text) !important; color: var(--text) !important;
}
html body #dc-root .dt-timeline-dock .dtc-trilho {
  width: var(--casca-trilho); flex: none;
  display: flex; align-items: stretch;
  border-left: 1px solid var(--line);
}
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-action {
  flex: 1 1 0 !important; width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  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) !important;
  font: 600 13px/1 var(--font-ui) !important; box-shadow: none !important;
}
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-action:last-child { border-right: 0 !important; }
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-action svg { width: 24px !important; height: 24px !important; }
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-action:hover { background: var(--surface-2) !important; }
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-action:active { background: var(--surface-3) !important; }

/* --- mídia --------------------------------------------------------------- */
html body #dc-root .dt-app-root .dt-timeline-dock .dt-media-bar {
  align-items: stretch !important; gap: 0 !important;
  padding: 0 !important; border: 0 !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-timeline-dock .dt-media-bar > .dt-media-side:not(.dt-media-side-end) {
  flex: none; display: flex !important; align-items: center !important; gap: 16px !important;
  padding: 0 0 0 20px !important;
}
html body #dc-root .dt-timeline-dock .dt-media-eyebrow {
  font: 700 11px/1 var(--font-ui) !important; letter-spacing: 1.6px !important;
  text-transform: uppercase; color: var(--text-3) !important;
}
html body #dc-root .dt-timeline-dock .dt-media-sep { display: none !important; }
html body #dc-root .dt-timeline-dock .dt-media-station-select {
  height: 30px !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important;
}
html body #dc-root .dt-timeline-dock .dt-media-station-select > svg { display: none !important; }
html body #dc-root .dt-timeline-dock .dt-media-station-select select {
  height: 28px !important; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important;
  font: 400 12px/1 var(--font-ui) !important;
}
html body #dc-root .dt-timeline-dock .dt-media-bar > .dt-media-center {
  flex: 1 1 auto; min-width: 0;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important;
  padding: 0 20px !important;
}
html body #dc-root .dt-timeline-dock .dt-audio-spectrum span { background: color-mix(in srgb, var(--text) 40%, var(--bg)) !important; border-radius: 0 !important; }
html body #dc-root .dt-timeline-dock .dt-media-now { font: 400 12px/1 var(--font-ui) !important; color: var(--text-2) !important; }

html body #dc-root .dt-timeline-dock .dt-media-bar > .dt-media-side-end {
  width: var(--casca-trilho); flex: none;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  padding: 0 !important; border-left: 1px solid var(--line);
}
html body #dc-root .dt-timeline-dock .dtc-celula {
  width: 72px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
}
html body #dc-root .dt-timeline-dock .dtc-celula:hover { background: var(--surface-2); }
html body #dc-root .dt-timeline-dock .dtc-celula:active { background: var(--surface-3); }
html body #dc-root .dt-app-root .dt-timeline-dock .dtc-celula > button {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--text) !important; box-shadow: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
html body #dc-root .dt-app-root .dt-timeline-dock .dtc-celula > button svg { width: 24px !important; height: 24px !important; }
html body #dc-root .dt-app-root .dt-timeline-dock .dtc-celula > .dt-vol-mute { width: 55px !important; height: 55px !important; color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important; }
html body #dc-root .dt-timeline-dock .dt-media-volume {
  flex: 1; min-width: 0;
  display: flex !important; align-items: center !important;
  padding: 0 20px !important; border: 0 !important; background: transparent !important;
}
html body #dc-root .dt-timeline-dock .dt-vol-steps {
  width: 100%; height: 22px !important;
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px !important;
  align-items: center !important;
}
html body #dc-root .dt-timeline-dock .dt-vol-step { height: 22px !important; align-items: center !important; }
html body #dc-root .dt-timeline-dock .dt-vol-step > i {
  height: 3px !important; border-radius: 0 !important;
  background: color-mix(in srgb, var(--text) 10%, var(--bg)) !important;
}
html body #dc-root .dt-timeline-dock .dt-vol-step[data-on="true"] > i { background: var(--text) !important; }

/* O menu da conta é chapado e cobre as três linhas de utilidade. Uma regra
   antiga de [role="menu"] dava canto, borda e respiro de caixa flutuante. */
html body #dc-root .dt-sidebar .dtc-conta-menu {
  width: auto !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !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-sidebar .dtc-conta-item {
  margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  /* O fio que separa os itens: sem o !important, uma regra antiga de menu o
     zerava e o menu do perfil abria como um bloco só. */
  border-top: 1px solid var(--line) !important;
}
/* O fio do menu NÃO escurece no hover: um tom só, sempre (17/09). */

/* =========================================================================
   BUSCA CTRL K — DarkTask Sistema.dc.html, seção Buscar ou ir para
   caixa 640 · campo 72 · grupo 40 · linha 56 (preta ao passar) · rodapé 49.
   ========================================================================= */
html body .dtc-busca-fundo {
  position: fixed; inset: 0; z-index: 99995;
  display: flex; justify-content: center; align-items: flex-start;
  padding: min(14vh, 120px) 16px 16px;
  background: rgba(0, 0, 0, .32);
  font-family: var(--font-ui);
}
html body .dtc-busca-caixa {
  width: 100%; max-width: 640px; max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg));
  background: var(--bg); color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
}
html body .dtc-busca-campo {
  height: 72px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 20px; border-bottom: 1px solid var(--line);
}
html body .dtc-busca-campo svg { width: 24px; height: 24px; flex: none; color: var(--text); }
html body .dtc-busca-campo input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0 !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font: 400 15px/1 var(--font-ui) !important;
}
html body .dtc-busca-campo input::placeholder { color: var(--text-3); }
html body .dtc-busca-dica,
html body .dtc-busca-fundo .dtc-busca-dica {
  flex: none; font: 700 10px/1 var(--font-ui); letter-spacing: 1px; white-space: nowrap;
  color: var(--text-3);
}
html body .dtc-busca-resultados { flex: 0 1 auto; max-height: 340px; overflow-y: auto; }
html body .dtc-busca-grupo-rotulo {
  height: 40px; display: flex; align-items: center; padding: 0 20px;
  border-bottom: 1px solid var(--line);
  font: 700 10px/1 var(--font-ui); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-3);
}
html body .dtc-busca-linha {
  height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  border-bottom: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer;
}
html body .dtc-busca-linha svg { width: 20px; height: 20px; flex: none; }
html body .dtc-busca-linha.is-ativa { background: var(--text); color: var(--bg); }
html body .dtc-busca-titulo {
  flex: 1; min-width: 0; font: 600 13.5px/1 var(--font-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body .dtc-busca-meta { flex: none; max-width: 45%; font: 400 11px/1 var(--font-ui); opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .dtc-busca-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 24px; border-bottom: 1px solid var(--line); text-align: center;
}
html body .dtc-busca-vazio[hidden],
html body .dtc-busca-resultados[hidden] { display: none; }
html body .dtc-busca-vazio b { font: 600 13px/1.3 var(--font-ui); }
html body .dtc-busca-vazio small { max-width: 320px; font: 400 11.5px/1.45 var(--font-ui); color: var(--text-3); text-wrap: pretty; }
html body .dtc-busca-rodape {
  height: 49px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  margin-top: -1px; border-top: 1px solid var(--line);
  font: 400 10.5px/1 var(--font-ui); color: var(--text-3);
  white-space: nowrap; overflow: hidden;
}
@media (max-width: 879px) {
  html body .dtc-busca-fundo { padding: 0; }
  html body .dtc-busca-caixa { max-height: 100dvh; height: 100dvh; border: 0; }
  html body .dtc-busca-resultados { max-height: none; flex: 1 1 auto; }
  html body .dtc-busca-rodape span:last-child { display: none; }
}

/* =========================================================================
   DIÁLOGO DE CONFIRMAÇÃO — DarkTask Sistema.dc.html, seção 3
   topo 72 (ícone + título) · corpo · rodapé 64. Única sombra do sistema.
   ========================================================================= */
html body .dt-system-dialog-backdrop {
  background: rgba(0, 0, 0, .32) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .dt-system-dialog {
  width: min(520px, 100%) !important;
  display: flex !important; flex-direction: column !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important;
  border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  animation: none !important;
}
html body .dt-system-dialog { overflow: hidden !important; }
html body .dt-system-dialog > * { margin: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
html body .dt-system-dialog .dt-system-dialog-topo {
  height: 72px !important; flex: none !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  padding: 0 20px !important; border-bottom: 1px solid var(--line) !important;
}
html body .dt-system-dialog .dt-system-dialog-topo h2 { flex: 1 1 auto !important; text-align: left !important; }
html body .dt-system-dialog .dt-system-dialog-icone { width: 22px; height: 22px; flex: none; color: var(--text); }
html body .dt-system-dialog.is-danger .dt-system-dialog-icone { color: var(--danger); }
html body .dt-system-dialog .dt-system-dialog-topo h2 {
  margin: 0 !important; font: 700 17px/1 var(--font-ui) !important; letter-spacing: -.4px !important;
}
html body .dt-system-dialog .dt-system-dialog-corpo { padding: 24px 20px; }
html body .dt-system-dialog .dt-system-dialog-message {
  margin: 0 !important; font: 400 13.5px/1.55 var(--font-ui) !important;
  color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important;
}
html body .dt-system-dialog footer {
  height: 64px; flex: none;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border-top: 1px solid var(--line);
}
html body .dt-system-dialog .dt-system-dialog-vao { flex: 1; }
html body .dt-system-dialog footer button {
  min-height: 0 !important; height: auto !important;
  display: flex; align-items: center; justify-content: center;
  padding: 0 28px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font: 600 13px/1 var(--font-ui) !important; box-shadow: none !important; flex: none !important;
}
html body .dt-system-dialog footer button:hover { background: var(--surface-2) !important; }
html body .dt-system-dialog .dt-system-dialog-confirm { background: var(--text) !important; color: var(--bg) !important; letter-spacing: .3px; }
html body .dt-system-dialog .dt-system-dialog-confirm:hover { background: color-mix(in srgb, var(--text) 87%, var(--bg)) !important; }
/* Destrutivo: a ação perigosa na ponta esquerda, em vermelho; o botão cheio é o
   de desistir. */
html body .dt-system-dialog.is-danger footer .dt-system-dialog-confirm {
  background: transparent !important; color: var(--danger) !important;
  border-left: 0 !important; border-right: 1px solid var(--line) !important; padding: 0 24px !important;
}
html body .dt-system-dialog.is-danger footer .dt-system-dialog-confirm:hover { background: var(--danger) !important; color: var(--bg) !important; }
html body .dt-system-dialog.is-danger footer .dt-system-dialog-cancel { background: var(--text) !important; color: var(--bg) !important; }
@media (max-width: 760px) {
  html body .dt-system-dialog { border-radius: 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; }
}

/* =========================================================================
   TOAST — DarkTask Sistema.dc.html, seção 4
   barra de 3px pelo tipo · ícone · texto · ação com fio · fechar em célula 49.
   ========================================================================= */
@media (min-width: 880px) {
  html body .dt-toasts { right: 25px !important; bottom: 244px !important; width: min(420px, calc(100vw - 50px)) !important; }
}
html body .dt-toast {
  min-height: 56px; padding: 0 !important; gap: 0 !important;
  align-items: stretch !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important;
  border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18) !important;
}
html body .dt-toast::before { content: ""; width: 3px; flex: none; background: var(--text); }
html body .dt-toast.is-warn::before { background: var(--text-3); }
html body .dt-toast.is-error::before { background: var(--danger); }
html body .dt-toast .dt-toast-icon { align-self: center; margin-left: 16px; width: 20px; height: 20px; color: var(--text) !important; }
html body .dt-toast.is-warn .dt-toast-icon { color: var(--text-3) !important; }
html body .dt-toast.is-error .dt-toast-icon { color: var(--danger) !important; }
html body .dt-toast .dt-toast-text { align-self: center; padding: 12px; font: 600 12.5px/1.4 var(--font-ui); }
html body .dt-toast .dt-toast-action {
  align-self: center; flex: none; min-height: 0 !important; height: 32px;
  margin-right: 16px; padding: 0 12px !important;
  border: 1px solid var(--text) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font: 600 11.5px/1 var(--font-ui) !important; white-space: nowrap;
}
html body .dt-toast .dt-toast-action:hover { background: var(--text) !important; color: var(--bg) !important; }
html body .dt-toast .dt-toast-close {
  width: 49px !important; height: auto !important; flex: none;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text-3) !important;
}
html body .dt-toast .dt-toast-close:hover { background: var(--surface-2) !important; color: var(--text) !important; }

/* =========================================================================
   PAINEL DE NOTIFICAÇÕES — DarkTask Sistema.dc.html, seção 1
   abas 56 (Todas / Não lidas) · linhas de 72 · rodapé 56. Desce do sino,
   colado no fio do cabeçalho.
   ========================================================================= */
html body #dt-notif {
  width: 400px !important; max-width: calc(100vw - 32px) !important;
  max-height: min(560px, calc(100vh - 96px)) !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-top: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
  font-family: var(--font-ui) !important; animation: none !important;
}
html body #dt-notif .dt-notif-abas { height: 56px; flex: none; display: flex; border-bottom: 1px solid var(--line); }
html body #dt-notif .dt-notif-aba {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  background: var(--bg); color: color-mix(in srgb, var(--text) 80%, var(--bg));
  font: 600 12.5px/1 var(--font-ui); cursor: pointer;
}
html body #dt-notif .dt-notif-aba:last-child { border-right: 0; }
html body #dt-notif .dt-notif-aba span { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
html body #dt-notif .dt-notif-aba.is-ativa { background: var(--text); color: var(--bg); }
html body #dt-notif .dt-notif-lista { max-height: 320px; overflow-y: auto; }
html body #dt-notif .dt-notif-item {
  min-height: 72px; display: flex; align-items: stretch; gap: 0; padding: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 2%, var(--bg));
}
html body #dt-notif .dt-notif-item.nova { background: var(--bg); }
html body #dt-notif .dt-notif-item:hover,
html body #dt-notif .dt-notif-item.acionavel:hover { background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
html body #dt-notif .dt-notif-linha { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
html body #dt-notif .dt-notif-icone { display: inline-flex; flex: none; color: var(--text); }
html body #dt-notif .dt-notif-icone svg { width: 22px; height: 22px; }
html body #dt-notif .dt-notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
html body #dt-notif .dt-notif-txt p { margin: 0; font: 500 13px/1.35 var(--font-ui); }
html body #dt-notif .dt-notif-item.nova .dt-notif-txt p { font-weight: 700; }
html body #dt-notif .dt-notif-quando { margin: 0; font: 400 10.5px/1 var(--font-ui); color: var(--text-3); letter-spacing: 0; }
html body #dt-notif .dt-notif-ponto { width: 7px; height: 7px; flex: none; margin: 0; border-radius: 50%; background: var(--text); }
html body #dt-notif .dt-notif-item:not(.nova) .dt-notif-ponto { display: none; }
html body #dt-notif .dt-notif-selo {
  margin: 0; padding: 0; border-radius: 0; background: none;
  font: 700 10px/1 var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3);
}
html body #dt-notif .dt-notif-dispensar {
  width: 49px; height: auto; flex: none; margin: 0; padding: 0;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--text-3); opacity: 1;
}
html body #dt-notif .dt-notif-dispensar svg { width: 18px; height: 18px; }
html body #dt-notif .dt-notif-dispensar:hover { background: var(--surface-2); color: var(--text); }
html body #dt-notif .dt-notif-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 44px 24px; border-bottom: 1px solid var(--line); text-align: center;
}
html body #dt-notif .dt-notif-vazio svg { width: 26px; height: 26px; color: color-mix(in srgb, var(--text) 20%, var(--bg)); }
html body #dt-notif .dt-notif-vazio b { font: 600 13px/1 var(--font-ui); color: var(--text); }
html body #dt-notif .dt-notif-vazio small { max-width: 260px; font: 400 11.5px/1.45 var(--font-ui); color: var(--text-3); }
html body #dt-notif .dt-notif-rodape { height: 56px; flex: none; display: flex; align-items: stretch; }
html body #dt-notif .dt-notif-marcar,
html body #dt-notif .dt-notif-limpar {
  display: flex; align-items: center; justify-content: center;
  margin: 0; border: 0; border-radius: 0; background: transparent;
  font: 600 12.5px/1 var(--font-ui); text-decoration: none; cursor: pointer;
}
html body #dt-notif .dt-notif-marcar { flex: 1; padding: 0; border-right: 1px solid var(--line); color: var(--text); }
html body #dt-notif .dt-notif-marcar:hover { background: var(--surface-2); }
html body #dt-notif .dt-notif-limpar { flex: none; padding: 0 22px; color: var(--danger); }
html body #dt-notif .dt-notif-limpar:hover { background: var(--danger); color: var(--bg); }

/* Rótulos de hora: o protótipo marca de 2 em 2 horas (00h, 02h … 24h). */
html body #dc-root .dt-timeline-dock .dtc-rotulos-hora { position: absolute; inset: 0; pointer-events: none; }
html body #dc-root .dt-timeline-dock .dtc-rotulos-hora > .dt-timeline-tick-label:nth-child(even) { display: none !important; }

/* O sino copia as variáveis de cor para o próprio estilo uma vez, quando nasce
   (notificacoes.js, aplicarTema). Ao trocar o tema ele guardava a tinta do
   anterior e sumia no papel. !important de folha vence o inline normal, e
   "inherit" devolve a cor do cabeçalho, que acompanha o tema. */
html body #dc-root .dt-topbar-bellslot #dt-sino {
  --bg: inherit !important; --bg-elev: inherit !important;
  --panel: inherit !important; --panel-2: inherit !important;
  --line: inherit !important; --line-2: inherit !important;
  --text: inherit !important; --muted: inherit !important; --faint: inherit !important;
  --accent: inherit !important; --accent-2: inherit !important; --accent-weak: inherit !important;
  --on-accent: inherit !important; --danger: inherit !important;
  color: color-mix(in srgb, var(--text) 60%, var(--bg)) !important;
  border-left: 0 !important; border-right: 1px solid var(--line) !important;
}
html body #dc-root .dt-topbar-bellslot #dt-sino:hover { color: var(--text) !important; background: var(--surface-2) !important; }

/* =========================================================================
   CELULAR E TABLET (< 1180px) — DarkTask v2.dc.html no modo mob
   Cabeçalho de 72px com o hambúrguer, conteúdo que rola, e embaixo a linha do
   tempo recolhida com a mídia. A barra lateral vira gaveta de 272px que entra
   pela esquerda sobre um véu; a barra de cinco botões antiga não existe no
   template.
   ========================================================================= */
/* O corte virou 1180px (17/09): no iPad deitado a barra lateral comia 272 de
   1024 e o conteúdo ficava espremido em 752. Abaixo de 1180 a barra é gaveta e
   o conteúdo ocupa a tela inteira. */
@media (max-width: 1179px) {
  /* O hambúrguer abre a faixa, à esquerda (regras antigas o levavam ao fim). */
  html body #dc-root .dtc-burger {
    display: flex !important; order: -1 !important;
    position: static !important; inset: auto !important;
    height: auto !important; align-self: stretch !important;
  }

  html body #dc-root .dt-app-root {
    display: flex !important; flex-direction: column !important;
    height: 100vh; height: 100dvh;
    overflow: hidden !important;
    padding: 0 !important;
  }
  html body #dc-root .dt-app-root > .dt-notice-host {
    order: 1; flex: none;
    position: static !important; top: auto !important;
    width: auto !important; margin: 0 !important;
  }
  html body #dc-root .dt-app-root > #dt-conteudo,
  html body #dc-root .dt-app-root > .dt-page-content {
    order: 2; flex: 1 1 auto;
    width: auto !important; max-width: none !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow-x: hidden !important; overflow-y: auto !important;
  }
  html body #dc-root .dt-app-root > .dt-timeline-dock {
    order: 3; flex: none;
    position: static !important; inset: auto !important; bottom: auto !important;
    transform: none !important; width: auto !important; margin: 0 !important;
  }
  html body #dc-root .dt-app-root > .dt-page-tail,
  html body .dt-barra-mobile { display: none !important; }

  /* --- gaveta ------------------------------------------------------------ */
  html body #dc-root .dt-app-root > .dt-sidebar {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
    width: 272px !important; height: 100dvh !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; gap: 0 !important;
    border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
    background: var(--bg) !important;
    transform: translateX(-273px) !important;
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1), box-shadow 160ms linear;
    box-shadow: none !important;
    z-index: 90 !important;
    overflow-x: hidden; overflow-y: auto;
  }
  html body #dc-root .dt-app-root > .dt-sidebar.is-mobile-open {
    transform: none !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .26) !important;
  }
  html body #dc-root .dt-app-root > .dt-sidebar > * { order: 0 !important; }
  html body #dc-root .dt-app-root > .dt-sidebar > .dt-sidebar-nav { flex: none !important; overflow: visible !important; padding: 0 !important; }
  html body #dc-root .dt-app-root > .dt-sidebar .dt-mobile-menu-toggle:not(.dtc-burger) { display: none !important; }

  /* --- cabeçalho --------------------------------------------------------- */
  html body #dc-root .dt-topbar-rail { width: auto !important; }
  html body #dc-root .dt-topbar-clock { padding: 0 14px !important; }
  html body #dc-root .dt-topbar-news .dt-topbar-newslabel { display: none; }

  /* --- linha do tempo recolhida + mídia ------------------------------------ */
  html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-inner { flex-direction: column !important; }
  html body #dc-root .dt-timeline-dock .dtc-linha-corpo { height: auto; padding: 0 20px; gap: 14px; }
  html body #dc-root .dt-timeline-dock .dt-timeline-head {
    height: 49px; cursor: pointer !important;
  }
  html body #dc-root .dt-timeline-dock .dt-timeline-head::after {
    content: "" !important;
    width: 8px; height: 8px; margin-left: 4px; flex: none;
    border-left: 1px solid var(--text); border-top: 1px solid var(--text);
    transform: rotate(225deg) translateY(2px);
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1);
  }
  html[data-dt-dock="aberto"] body #dc-root .dt-timeline-dock .dt-timeline-head::after { transform: rotate(45deg) translateY(2px); }
  html body #dc-root .dt-timeline-dock .dtc-contagem,
  html body #dc-root .dt-timeline-dock .dtc-dia,
  html body #dc-root .dt-timeline-dock .dtc-ponto { display: none !important; }
  html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dt-timeline-scroll,
  html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dtc-trilho { display: none !important; }
  html[data-dt-dock="aberto"] body #dc-root .dt-timeline-dock .dt-timeline-scroll { display: block !important; padding-bottom: 14px !important; }
  html body #dc-root .dt-timeline-dock .dtc-trilho {
    width: auto; height: 56px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  html body #dc-root .dt-timeline-dock .dtc-rotulos-hora > .dt-timeline-tick-label:not(:nth-child(6n+1)) { display: none; }

  html body #dc-root .dt-app-root .dt-timeline-dock .dt-media-bar {
    height: 56px !important; min-height: 56px !important;
  }
  html body #dc-root .dt-timeline-dock .dt-media-bar > .dt-media-center,
  html body #dc-root .dt-timeline-dock .dt-media-eyebrow,
  html body #dc-root .dt-timeline-dock .dt-media-volume { display: none !important; }
  html body #dc-root .dt-timeline-dock .dt-media-bar > .dt-media-side:not(.dt-media-side-end) {
    flex: 1 1 auto; min-width: 0; padding: 0 0 0 16px !important;
  }
  html body #dc-root .dt-timeline-dock .dt-media-bar > .dt-media-side-end { width: auto; margin-left: auto; }
  html body #dc-root .dt-timeline-dock .dtc-celula { width: 56px; }
  html body #dc-root .dt-app-root .dt-timeline-dock .dtc-celula > .dt-vol-mute { width: 55px !important; height: 55px !important; }

  html body #dc-root .dt-toasts { left: 16px !important; right: 16px !important; bottom: 128px !important; width: auto !important; }
}

/* === A faixa de conexão ===================================================
 *
 * Mora no host de avisos, entre o topo e o conteúdo, e empurra a página. Duas
 * caras: o corte, que fica enquanto durar e usa a tinta de perigo no fio; e a
 * volta, que se despede sozinha em 4s e é só fio comum.
 *
 * Sem cor de fundo nova: o fio à esquerda faz o trabalho, como no aviso de
 * corte da colagem. */
html body #dc-root #dt-faixa-conexao,
html body #dt-faixa-conexao {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  box-sizing: border-box; width: 100%;
  min-height: 56px; padding: 10px 20px;
  border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid var(--text);
  background: var(--bg); color: var(--text);
  font-size: 12.5px; line-height: 1.35;
}
html body #dt-faixa-conexao b { font-size: 13px; font-weight: 600; }
html body #dt-faixa-conexao span { color: var(--text-2); min-width: 0; }
html body #dc-root #dt-faixa-conexao[data-dt-estado="sem-conexao"],
html body #dt-faixa-conexao[data-dt-estado="sem-conexao"] {
  /* Precisa do mesmo #dc-root da regra base: lá o atalho de dois ids vencia
     este seletor e o fio de perigo saía na cor do texto. */
  border-left-color: var(--danger-text);
}
@media (max-width: 879px) {
  html body #dt-faixa-conexao { padding: 10px 16px; font-size: 12px; }
}

/* O host de avisos ainda recebe uma paleta antiga do floating-shell.css:
   `--text: #171A1F` e companhia, um quase-preto AZULADO que a skin
   monocromática não tem mais. Aquela regra resolvia um problema real na época
   (a barra tinha variáveis escuras inline e o texto sumia no tema claro), e
   removê-la é trabalho da limpeza do CSS antigo, com verificação própria.
   Até lá, a casca devolve os tokens certos aqui dentro — é o que a barra de
   instalação e a faixa de conexão leem.
   Só o tema Claro precisa: no Escuro aquela regra não se aplica. */
html[data-dt-theme="light"] body .dt-notice-host {
  --text: #000000 !important;
  --muted: #555555 !important;
  --faint: #606060 !important;
}

/* =========================================================================
   CORREÇÕES VISUAIS (16/09) — as oito regras do CORRECOES-VISUAIS.md
   Organizado por regra, não por tela: o furo nunca era avulso.
   ========================================================================= */

/* --- Regra 1 · Raio 0 em tudo ---------------------------------------------
 * A skin não tem canto arredondado. Só três exceções, as do protótipo: rádio,
 * avatar e o interruptor. Os resíduos vinham das famílias de componente que
 * nasceram no desenho antigo (dl- Listas, sm- Social, surv- Pesquisas):
 * campo e botão com 12px, cartão com 18–20px, chip com 7px.
 *
 * Dentro da casca, a regra pega essas três famílias. Na página pública da
 * pesquisa (#surveys-standalone-root) pega TUDO, porque ali até div sem classe
 * trazia raio inline.
 *
 * O que continua redondo, de propósito: avatar, rádio (o nativo e o desenhado,
 * surv-radio-icon/dot), e as bolinhas que são marcador de dado — ponto do
 * calendário (sm-cal-ponto), ponto do histórico (surv-hist-log-dot) e o
 * círculo da contagem regressiva (sm-countdown-circle). O interruptor
 * (dtcfg-interruptor) não é dessas famílias e fica intocado. */
html body #dc-root :is([class*="dl-"], [class*="sm-"], [class*="surv-"]):not([class*="avatar"]):not([class*="radio"]):not([class*="-dot"]):not([class*="ponto"]):not([class*="circle"]),
html body #surveys-standalone-root *:not(input[type="radio"]):not([class*="avatar"]):not([class*="radio"]):not([class*="-dot"]):not([class*="ponto"]):not([class*="circle"]),
/* A raiz de boa parte dos campos arredondados: o app-polish.css põe 12px com
   !important em TODO input, textarea e select, com um seletor de três :not()
   — especificidade (0,3,1), que vencia até regras com classe. Aqui a mesma
   forma com html body na frente, (0,3,3), e o campo fica reto no app inteiro,
   inclusive nos que montam fora da casca (paleta Ctrl+K, página pública). */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body textarea,
html body select,
/* O mesmo resíduo nas camadas que só aparecem abertas — por isso não saíram
   na primeira varredura: menus, popovers, dropdowns e gavetas (14px no
   styles.css), os botões dentro deles (9px) e o balão do tooltip (8px). */
html body :is([role="menu"], [class*="popover"], [class*="dropdown"], [class*="drawer"]),
html body :is([role="menu"] > button, [class*="popover"] button, [class*="dropdown"] button),
html body [data-tooltip]::after {
  border-radius: 0 !important;
}

/* --- Regras 2, 3 e 5 · botão colado, campo na altura da banda, banda sem vão -
 * Medido contra o protótipo antes de mexer: a lista aberta ("Coisas de casa")
 * já batia no botão Adicionar (134×47, altura inteira, encostado à direita) e
 * nas alturas de filtro e busca (38px). O que não batia estava nas Pesquisas —
 * banda de abas com 46px e 12px de gap, busca de 42px recuada e terminando a
 * mais de 500px da borda, e "Tentar de novo" solto no meio do vazio — e na
 * banda de filtro da lista, com o rótulo empilhado em vez de em linha. */

/* Pesquisas: abas e busca numa banda só de 49px. As células se separam por fio,
   não por gap; a busca ocupa todo o resto e encosta na borda direita. */
html body #dc-root #surveys-container .surv-nav-row {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 49px; margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
html body #dc-root #surveys-container .surv-nav-row .surv-tabs {
  flex: none; height: 100% !important; margin: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important;
}
html body #dc-root #surveys-container .surv-nav-row .surv-tabs .dl-tab-btn { height: 100% !important; min-height: 0 !important; }
html body #dc-root #surveys-container .surv-toolbar {
  flex: 1 1 auto; min-width: 0; display: flex !important; align-items: stretch !important;
  gap: 0 !important; margin: 0 !important; padding: 0 !important;
}
html body #dc-root #surveys-container .surv-search-box {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
html body #dc-root #surveys-container .surv-search-box > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }
html body #dc-root #surveys-container .surv-search-box .surv-input {
  width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 16px 0 42px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  outline-offset: -2px;
}
html body #dc-root #surveys-container .surv-toolbar-count {
  flex: none; display: flex; align-items: center; padding: 0 16px;
  border-left: 1px solid var(--line); font-size: 12px; color: var(--text-3); white-space: nowrap;
}

/* Pesquisas: vazio e erro no molde de EstadosDeSistema — painel encostado, o
   conteúdo no corpo e a ação numa banda de rodapé de 64px, colada nas bordas,
   com a nota à esquerda e o botão como célula. */
html body #dc-root #surveys-container .surv-empty-state {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; background: var(--bg) !important;
}
html body #dc-root #surveys-container .surv-empty-corpo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 56px 25px; text-align: center;
}
html body #dc-root #surveys-container .surv-empty-corpo h3 { margin: 0; }
html body #dc-root #surveys-container .surv-empty-corpo p { margin: 0; max-width: 560px; color: var(--text-2); }
html body #dc-root #surveys-container .surv-empty-pe {
  display: flex; align-items: stretch; min-height: 64px; border-top: 1px solid var(--line);
}
html body #dc-root #surveys-container .surv-empty-nota {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 20px;
  font-size: 11.5px; color: var(--text-3);
}
html body #dc-root #surveys-container .surv-empty-action {
  flex: none; height: auto !important; min-height: 64px !important; margin: 0 !important;
  padding: 0 28px !important; gap: 9px;
  border: 0 !important; border-left: 1px solid var(--line) !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
}

/* Lista aberta: a banda de filtro é UMA linha, como no protótipo — rótulo ao
   lado dos botões, não em cima deles. */
html body #dc-root #darklist-container .sm-filter-block { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
html body #dc-root #darklist-container div:has(> .sm-filter-block) { align-items: center !important; }
/* A "caixa com margem" da regra 3: o grupo de filtros herdava padding de 4px
   de uma regra antiga de .dl-tabs, e os botões ficavam recuados 5px dentro da
   própria borda — a caixa com 48px ao lado de uma busca de 38. As células agora
   enchem a caixa, e caixa e busca têm a mesma altura. */
html body #dc-root #darklist-container .dl-filter-tabs { padding: 0 !important; align-items: stretch !important; }
/* 36 por dentro + 1px de borda em cima e embaixo = 38, a altura da busca ao
   lado. Com 38 por dentro a caixa ficava com 40 e os topos desencontravam. */
html body #dc-root #darklist-container .dl-filter-tabs .dl-filter-btn { height: 36px !important; }

/* --- Regra 4 · A página pública da pesquisa: painel, não cartão em mesa -----
 * Era o desenho antigo inteiro: cartão de 20px centrado, cada pergunta num
 * cartão flutuante de 16px separado por vão, pastilha redonda rosa atrás do
 * ícone, chip verde, aviso com fio rosa, botão em pílula centralizado — e, no
 * celular, "Enviar respostas" flutuando com margem e sombra.
 *
 * Agora, no molde da Página pública do PesquisasPanel: UM painel de 678px com
 * fio de 1px sobre o cinza do pane; a marca é a banda de topo; a cabeça traz o
 * modo (anônima/identificada), o título e os chips; cada pergunta é uma seção
 * separada por fio; e o envio é uma banda de rodapé de 64px com a nota à
 * esquerda e o botão preto colado na borda. No celular a banda de envio encosta
 * nas duas bordas e fica presa no pé da tela.
 *
 * Vale na página pública (#surveys-standalone-root) e no modo de resposta
 * dentro do app (#surveys-container). */
html body :is(#surveys-standalone-root, #surveys-container) .surv-public-shell { background: var(--surface-2); padding: 25px !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-public-inner { max-width: 678px !important; gap: 0 !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-public-brand {
  justify-content: flex-start !important; align-items: center; height: 56px; padding: 0 20px;
  border: 1px solid var(--line); border-bottom: 0; background: var(--bg);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-public-brand img { width: 150px !important; opacity: 1 !important; aspect-ratio: 200 / 40 !important; }
/* No escuro a marca inverte, como na barra lateral da casca. */
html[data-dt-theme="dark"] body :is(#surveys-standalone-root, #surveys-container) .surv-public-brand img { filter: invert(1); }

/* O painel. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container {
  max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; gap: 0 !important;
  border: 1px solid var(--line); background: var(--bg);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container :is(.surv-welcome-card, .surv-success-card, .surv-respondent-item) {
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
/* O cartão antigo trazia o próprio padding, e os campos começavam 47px para
   dentro do painel. As seções de dentro é que cuidam do respiro. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-painel { padding: 0 !important; }

/* Cabeça: modo, título, explicação e chips. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-cabeca { padding: 22px 20px !important; border-bottom: 1px solid var(--line) !important; text-align: left; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-modo {
  display: block; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-3);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-cabeca :is(h1, h2) {
  margin: 0 0 6px !important; font-family: var(--font-ui) !important; font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: -0.4px; line-height: 1.25; color: var(--text) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-cabeca p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5; color: var(--text-2) !important; }

/* Regra 6 nos chips: fio preto com texto preto, ou chapa com fio cinza. Nada
   de verde. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-badges-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  border: 1px solid var(--text) !important; background: transparent !important; color: var(--text) !important;
  font-size: 11.5px; font-weight: 600;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-badge-anon { border-color: var(--line) !important; background: var(--chapa) !important; }

/* O aviso da pesquisa identificada: chapa com texto escuro, sem rosa. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-aviso {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-aviso-rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 80%, var(--bg));
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-aviso p { margin: 0; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 80%, var(--bg)); }

/* Regra 3: campos e botão na mesma coluna, na mesma largura (molde Acesso). */
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-campos { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-field-label {
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase; color: var(--text-3) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container :is(.surv-input, .surv-textarea) {
  width: 100% !important; box-sizing: border-box; margin: 0 !important;
  border: 1px solid var(--line) !important; background: var(--bg) !important; box-shadow: none !important;
  font-size: 13.5px !important; color: var(--text) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-input { height: 46px !important; padding: 0 14px !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-textarea { min-height: 96px !important; padding: 12px 14px !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container :is(.surv-input, .surv-textarea):focus { border-color: var(--text) !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-dica { font-size: 12px; line-height: 1.45; color: var(--text-3); }
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-iniciar {
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 20px !important;
  justify-content: center !important; border: 0 !important; box-shadow: none !important;
  background: var(--text) !important; color: var(--bg) !important;
}

/* Perguntas: seções do mesmo painel, separadas por fio. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-respondent-item {
  padding: 20px !important; border-bottom: 1px solid var(--line) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-q-title {
  display: flex !important; align-items: baseline; gap: 10px; margin: 0 0 12px !important;
  font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.4; color: var(--text) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-num { flex: none; font-size: 10.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Regra 6: obrigatório é preto, não rosa. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-req { color: var(--text) !important; font-weight: 700; }

html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-options-group { display: flex !important; flex-direction: column !important; gap: 8px !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-option-label {
  display: flex !important; align-items: center !important; gap: 14px !important; width: 100%;
  min-height: 49px !important; margin: 0 !important; padding: 12px 16px !important;
  border: 1px solid var(--line) !important; background: var(--bg) !important; box-shadow: none !important;
  font-size: 13.5px !important; color: var(--text) !important; text-align: left;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-option-label:hover { background: var(--surface-2) !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-option-label.is-selected { border-color: var(--text) !important; }

html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-scale-row { display: flex !important; gap: 0 !important; border: 1px solid var(--line); }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-scale-btn {
  flex: 1 1 0 !important; min-width: 0 !important; min-height: 48px !important; margin: 0 !important;
  border: 0 !important; border-left: 1px solid var(--line) !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important; font-size: 13.5px !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-scale-btn:first-child { border-left: 0 !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-scale-btn.is-selected { background: var(--text) !important; color: var(--bg) !important; font-weight: 700; }

/* Regra 2: o envio é banda de rodapé de 64px, colada nas bordas. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-footer {
  position: static !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important;
  min-height: 64px; margin: 0 !important; padding: 0 !important; background: var(--bg);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-nota {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 22px;
  font-size: 11px; line-height: 1.4; color: var(--text-3);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-enviar {
  flex: none; width: auto !important; min-height: 64px !important; margin: 0 !important; padding: 0 28px !important;
  justify-content: center !important; border: 0 !important; border-left: 1px solid var(--line) !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 600 !important;
}

/* Os outros estados (não encontrada, encerrada, enviada...): o mesmo painel,
   sem pastilha atrás do ícone, com as ações numa banda de rodapé. */
html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container .surv-success-card { padding: 32px 20px 0 !important; text-align: left !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-icon-wrap {
  width: auto !important; height: auto !important; margin: 0 0 14px !important; justify-content: flex-start !important;
  background: transparent !important; color: var(--text) !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card h2 { margin: 0 0 8px !important; font-family: var(--font-ui) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--text) !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card > p { margin: 0 0 24px !important; font-size: 13px !important; line-height: 1.5; color: var(--text-2) !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card .surv-final-actions {
  display: flex !important; align-items: stretch !important; gap: 0 !important; flex-wrap: nowrap !important;
  margin: 0 -20px !important; border-top: 1px solid var(--line);
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card .surv-final-actions > button {
  flex: 1 1 0 !important; min-height: 64px !important; margin: 0 !important; padding: 0 20px !important;
  justify-content: center !important; border: 0 !important; border-left: 1px solid var(--line) !important; box-shadow: none !important;
}
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card .surv-final-actions > button:first-child { border-left: 0 !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card .surv-final-actions > .dl-btn-primary { background: var(--text) !important; color: var(--bg) !important; }
html body :is(#surveys-standalone-root, #surveys-container) .surv-success-card .surv-final-actions > .dl-btn-secondary { background: var(--bg) !important; color: var(--text) !important; }

@media (max-width: 879px) {
  html body :is(#surveys-standalone-root, #surveys-container) .surv-public-shell { padding: 0 !important; }
  html body :is(#surveys-standalone-root, #surveys-container) .surv-public-inner { max-width: 100% !important; }
  html body :is(#surveys-standalone-root, #surveys-container) .surv-public-brand { border-left: 0; border-right: 0; }
  html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-container { border-left: 0 !important; border-right: 0 !important; }
  /* A banda de envio presa ao pé da tela, encostada nas duas bordas. */
  html body :is(#surveys-standalone-root, #surveys-container) .surv-respondent-footer {
    position: sticky !important; bottom: 0; z-index: 5; border-top: 1px solid var(--line);
  }
  html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-nota { display: none; }
  html body :is(#surveys-standalone-root, #surveys-container) .surv-pub-enviar { flex: 1 1 auto; border-left: 0 !important; box-shadow: none !important; }
}

/* --- Regra 6 · Só a paleta, sem cor nova ------------------------------------
 * As folhas antigas ainda pintavam os estados do Social de verde, amarelo e
 * rosa (aprovado, em análise, ajustes), o botão "Solicitar revisão" de âmbar, o
 * aprovar de verde, o aviso de exclusão da conta de rosa e o erro do PIN de
 * rosa-claro. Nada disso aparecia numa tela parada — só no estado — e por isso
 * escapou das auditorias por captura. Agora, no molde do CHIP do SocialPanel:
 *   em produção → papel, fio, texto de apoio
 *   em análise  → chapa, fio forte, texto
 *   aprovado    → preto cheio, texto do papel
 *   ajustes     → papel, fio e texto no vermelho de perigo
 * Aviso é chapa com fio apagado e texto; o vermelho de perigo só marca a
 * palavra que pede ação.
 *
 * html:root e não html: as regras antigas do tema claro entram com
 * :is(html[data-dt-theme="light"], ...), que vale um atributo — o :root
 * empata o atributo e o body desempata. */
html:root body :is(.sm-status-pill, .sm-selo-estado, .sm-responsibility-approved, .sm-responsibility-ready, .sm-responsibility-review, .sm-responsibility-revision) {
  box-shadow: none !important;
}
html:root body :is(.sm-status-pill, .sm-selo-estado):is(.status-approved, .status-finalized),
html:root body .sm-responsibility-approved {
  background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important;
}
html:root body :is(.sm-status-pill, .sm-selo-estado):is(.status-ready, .status-review),
html:root body :is(.sm-responsibility-ready, .sm-responsibility-review) {
  background: var(--chapa) !important; color: var(--text) !important;
  border-color: var(--line) !important;
}
/* AJUSTES perdeu o vermelho (PADRAO-SOCIAL-INTERNA, 17/09): pedido de ajuste
   não é perigo, é etapa — e era o único vermelho da lista, puxando o olho como
   se fosse falha. Vale a gramática dos chips: fio preto = espera ação SUA;
   chapa = está com outra pessoa; preto cheio = terminou. O vermelho fica só
   para perigo (excluir, falhar, travar). */
html:root body :is(.sm-status-pill, .sm-selo-estado).status-revision,
html:root body .sm-responsibility-revision {
  background: var(--chapa) !important; color: var(--text) !important; border-color: var(--text) !important;
}
/* Aguardando arte: a bola voltou para quem cria — papel com fio preto. */
html:root body :is(.sm-status-pill, .sm-selo-estado).status-waiting-art {
  background: var(--bg) !important; color: var(--text) !important; border-color: var(--text) !important;
}
/* Em produção: repouso, na mão de quem escreve — papel, texto de apoio, fio fino. */
html:root body :is(.sm-status-pill, .sm-selo-estado).status-draft {
  background: var(--bg) !important; border-color: var(--line) !important;
  color: color-mix(in srgb, var(--text) 80%, var(--bg)) !important;
}
html:root body :is(.sm-status-pill, .sm-selo-estado, [class*="sm-responsibility-"]) :is(svg, strong) { color: inherit !important; }

html:root body :is(.sm-artwork-note, .sm-revisao-aviso) {
  background: var(--chapa) !important; color: var(--text) !important; border-color: var(--text-3) !important;
}
html:root body :is(.sm-artwork-note, .sm-revisao-aviso, .sm-revisao-topo) :is(svg, strong),
html:root body .sm-revisao-icone {
  color: var(--danger-text) !important;
}
html:root body .sm-revisao-icone { background: transparent !important; border-color: var(--danger-text) !important; }
html:root body .sm-accordion-card.sm-em-revisao { border-color: var(--danger-text) !important; }

html:root body :is(#socialmedia-container, .dl-modal-overlay) .dl-btn-primary.sm-btn-aprovar,
html:root body :is(#socialmedia-container, .dl-modal-overlay) .dl-btn-primary.sm-btn-aprovar:hover {
  background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important;
}
html:root body :is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) .dl-btn-secondary.sm-btn-review,
html:root body :is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) .dl-btn-secondary.sm-btn-review:hover {
  background: transparent !important; color: var(--text) !important; border: 1px solid var(--text) !important;
}
html:root body :is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) .dl-btn-secondary.sm-btn-review:hover { background: var(--dt-toque-forte) !important; }
html:root body #sm-review-overlay .dl-btn-primary { background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important; }
html:root body :is(.sm-import-avisos, .sm-import-repetido) { color: var(--text-2) !important; }

html:root body .dt-range-delete { color: var(--danger-text) !important; border-color: var(--danger-text) !important; background: transparent !important; }
html:root body .dl-btn-danger { color: var(--danger-text) !important; border-color: var(--danger-text) !important; background: transparent !important; }
html:root body .dt-priv-aviso { background: var(--chapa) !important; color: var(--text) !important; border: 1px solid var(--text-3) !important; border-radius: 0 !important; }
html:root body .dt-priv-aviso b { color: var(--danger-text) !important; }
html:root body .dt-pin-erro { color: var(--danger-text) !important; }

/* --- Regra 7 · A barra de rolagem é a do projeto, em todo contêiner rolável ---
 * A barra do projeto já estava no topo desta folha e não aparecia em lugar
 * nenhum. Motivo: desde o Chrome 121, um elemento com scrollbar-color (ou
 * scrollbar-width) diferente de auto IGNORA os ::-webkit-scrollbar — e o
 * app-polish põe scrollbar-color em *, e esta folha em #dc-root *. O Chrome
 * desenhava a barra nativa de 17px só tingida: preta sem setas na lista, e
 * pílula cinza na matriz da página pública (fora do #dc-root, onde valia o cinza
 * do app-polish).
 *
 * Onde há ::-webkit-scrollbar (Chrome, Edge, Safari), scrollbar-color volta a
 * auto e os pseudo-elementos mandam. O Firefox, que não tem o pseudo, fica com
 * o scrollbar-color preto sobre papel. As barras escondidas de propósito
 * (scrollbar-width: none + display: none) continuam escondidas.
 *
 * Os botões passam a 16×41px com o chevron encostado na ponta, e a trilha
 * recua 25px — é o que dá os 25px entre a seta e o range, como no apêndice. */
@supports selector(::-webkit-scrollbar) {
  html, html body, html body * { scrollbar-color: auto !important; }
}
@supports not selector(::-webkit-scrollbar) {
  html, html body, html body * { scrollbar-color: var(--sb-tinta) var(--sb-papel); }
}
html body ::-webkit-scrollbar-track { margin: 25px 0; }
html body ::-webkit-scrollbar-track:horizontal { margin: 0 25px; }
html body ::-webkit-scrollbar-thumb:hover { background-color: #2b2b2b; }
[data-dt-theme="dark"] body ::-webkit-scrollbar-thumb:hover { background-color: #bdbdbd; }
html body ::-webkit-scrollbar-button:single-button:vertical { width: 16px; height: 41px; }
html body ::-webkit-scrollbar-button:single-button:horizontal { width: 41px; height: 16px; }
html body ::-webkit-scrollbar-button:single-button:vertical:decrement { background-position: center 2px; }
html body ::-webkit-scrollbar-button:single-button:vertical:increment { background-position: center calc(100% - 2px); }
html body ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-position: 2px center; }
html body ::-webkit-scrollbar-button:single-button:horizontal:increment { background-position: calc(100% - 2px) center; }
/* A gaveta do menu no celular pedia a barra fina, que também desliga o pseudo. */
html body .dt-sidebar.is-mobile-open > .dt-sidebar-nav { scrollbar-width: auto !important; }

/* --- Social Media: abas e busca numa banda só, no mesmo esquema das Pesquisas ---
 * 49px, células separadas por fio, a busca ocupa todo o resto e encosta na
 * borda direita. A busca filtra os cartões da aba aberta pelo nome, tema ou
 * quem criou, e redesenha só o conteúdo — o campo não perde o foco. */
html body #dc-root #socialmedia-container .sm-nav-row {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 49px; margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
}
html body #dc-root #socialmedia-container .sm-nav-row > .dl-workspace-nav {
  flex: none; height: 100% !important; margin: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important;
}
html body #dc-root #socialmedia-container .sm-nav-row > .dl-workspace-nav .dl-tab-btn { height: 100% !important; min-height: 0 !important; }
html body #dc-root #socialmedia-container .sm-search-box {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
html body #dc-root #socialmedia-container .sm-search-box > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3); }
html body #dc-root #socialmedia-container .sm-search-box .sm-search-input {
  width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 16px 0 42px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 13px/1 var(--font-ui) !important; color: var(--text) !important;
  outline-offset: -2px;
}
html body #dc-root #socialmedia-container .sm-search-box .sm-search-input::placeholder { color: var(--text-3); }
html body #dc-root #socialmedia-container .sm-visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
html body #dc-root #socialmedia-container .sm-busca-vazia {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 25px; text-align: center;
}
html body #dc-root #socialmedia-container .sm-busca-vazia h3 { margin: 0; font: 700 16px/1.3 var(--font-ui); color: var(--text); }
html body #dc-root #socialmedia-container .sm-busca-vazia p { margin: 0 0 8px; font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-nav-row { height: auto; flex-wrap: wrap; }
  html body #dc-root #socialmedia-container .sm-nav-row > .dl-workspace-nav { flex: 1 1 100%; height: 49px !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; overflow-x: auto; }
  html body #dc-root #socialmedia-container .sm-search-box { flex: 1 1 100%; height: 49px; }
}

/* --- Listas: abas e busca numa banda só, no mesmo esquema das Pesquisas e do Social ---
 * Antes: grupo de abas com caixa própria e busca de 300px à direita, os dois
 * recuados 25px das bordas com vão entre eles. Agora a barra é a banda de 49px
 * de ponta a ponta, com fio embaixo; as abas são células separadas por fio e a
 * busca ocupa todo o resto, encostada na borda direita. */
html body #dc-root #darklist-container .dl-workspace-bar {
  flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important;
  height: 49px; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
}
html body #dc-root #darklist-container .dl-workspace-bar > .dl-workspace-nav.dl-tabs {
  flex: none; height: 100% !important; margin: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important;
}
html body #dc-root #darklist-container .dl-workspace-bar > .dl-workspace-nav .dl-tab-btn { height: 100% !important; min-height: 0 !important; }
html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas {
  position: relative; flex: 1 1 auto; width: auto !important; min-width: 0; max-width: none;
  height: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important;
  border: 0 !important; background: transparent !important;
}
html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas > svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
  width: 15px; height: 15px; color: var(--text-3);
}
html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas .dl-busca-campo {
  width: 100% !important; height: 100% !important; padding: 0 16px 0 42px !important; outline-offset: -2px;
}
html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas .dl-busca-campo::placeholder { color: var(--text-3); }
html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas .dl-busca-campo:focus-visible { outline: 2px solid var(--text); }
@media (max-width: 879px) {
  html body #dc-root #darklist-container .dl-workspace-bar { height: auto; flex-wrap: wrap !important; }
  html body #dc-root #darklist-container .dl-workspace-bar > .dl-workspace-nav.dl-tabs { flex: 1 1 100%; height: 49px !important; border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  html body #dc-root #darklist-container .dl-workspace-bar > .dl-busca-listas { flex: 1 1 100%; height: 49px !important; }
}

/* --- Ícone de busca sumindo -----------------------------------------------------
 * Uma regra de vidro antiga (floating-shell) põe backdrop-filter: blur(28px) nos
 * campos de Listas, Social, Pesquisas e dos modais delas. O filtro borra tudo o
 * que fica atrás do campo — e o ícone de busca, posicionado por cima dele, fica
 * atrás na pintura e some. A skin não tem vidro: campo sem filtro, e o ícone
 * ganha z-index para não depender disso. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) :is(input, textarea, select),
html body .dl-modal-overlay :is(input, textarea, select) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #dc-root :is(.sm-search-box, .dl-busca-listas, .surv-search-box, .dl-busca-itens) > svg { z-index: 1; }

/* --- Lista aberta: filtro de status e busca numa banda só, como Pesquisas/Social/Listas ---
 * Antes: rótulo, caixa de filtros e busca de 300px soltos, recuados 25px pela
 * moldura da aba. Agora a banda de 49px encosta nas duas bordas logo abaixo da
 * banda Itens/Participantes/Atividade: rótulo e filtros em células separadas
 * por fio, e a busca ocupando o resto, com o mesmo ícone das outras buscas. */
html body #dc-root #darklist-container .dl-filtro-banda {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 49px; margin: -25px -25px 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
html body #dc-root #darklist-container .dl-filtro-banda > .sm-filter-block {
  flex: none; height: 100%; display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important;
  border-right: 1px solid var(--line);
}
html body #dc-root #darklist-container .dl-filtro-banda .sm-group-title {
  display: flex; align-items: center; padding: 0 20px; border-right: 1px solid var(--line); white-space: nowrap;
}
html body #dc-root #darklist-container .dl-filtro-banda .dl-filter-tabs {
  height: 100%; flex-wrap: nowrap !important; border: 0 !important; border-radius: 0 !important; overflow-x: auto;
}
html body #dc-root #darklist-container .dl-filtro-banda .dl-filter-tabs .dl-filter-btn {
  height: 100% !important; padding: 0 16px !important; font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body #dc-root #darklist-container .dl-filtro-banda .dl-busca-itens {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 100%; margin: 0; padding: 0;
}
html body #dc-root #darklist-container .dl-filtro-banda .dl-busca-itens > svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-3);
}
html body #dc-root #darklist-container #dl-editor-tab-content .dl-filtro-banda input.dl-input[placeholder="Buscar item..."] {
  width: 100% !important; max-width: none; height: 100% !important; margin: 0 !important;
  padding: 0 16px 0 42px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 13px/1 var(--font-ui) !important; color: var(--text) !important; outline-offset: -2px;
}
html body #dc-root #darklist-container .dl-filtro-banda input.dl-input::placeholder { color: var(--text-3); }
@media (max-width: 879px) {
  html body #dc-root #darklist-container .dl-filtro-banda { height: auto; flex-wrap: wrap !important; margin: -16px -16px 0 !important; }
  html body #dc-root #darklist-container .dl-filtro-banda > .sm-filter-block { flex: 1 1 100%; height: 49px; min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  html body #dc-root #darklist-container .dl-filtro-banda .dl-filter-tabs { flex: 1 1 auto; min-width: 0; }
  html body #dc-root #darklist-container .dl-filtro-banda .dl-busca-itens { flex: 1 1 100%; height: 49px; }
}
/* O "+" dos botões do topo (Novo projeto, Criar lista) encolhia a 0px em larguras
   médias: o svg é item flex e cedia espaço ao texto. */
html body #dc-root :is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero-side svg { flex: none; }

/* --- Rodapé sempre recolhido ------------------------------------------------------
 * Linha do tempo e mídia começam recolhidas em toda tela e largura: fica só a
 * faixa de 49px "Linha do tempo · dia · agora" com a seta. A faixa inteira é o
 * botão (casca.js); aberta, volta o rodapé completo — trilha das 24 horas,
 * Rotina/Alarme e a barra de mídia. Seta para cima = expande; para baixo = recolhe. */
html body #dc-root .dt-timeline-dock .dt-timeline-head { cursor: pointer !important; }
html body #dc-root .dt-timeline-dock .dt-timeline-head:hover { background: var(--surface-2); }
html body #dc-root .dt-timeline-dock .dt-timeline-head:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
html body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-head::after {
  content: "" !important; display: block; flex: none;
  width: 8px; height: 8px; margin: 0 2px 0 6px;
  border-left: 1px solid var(--text); border-top: 1px solid var(--text);
  transform: translateY(2px) rotate(45deg);
  transition: transform 160ms cubic-bezier(.22, .61, .36, 1);
}
html[data-dt-dock="aberto"] body #dc-root .dt-app-root .dt-timeline-dock .dt-timeline-head::after { transform: translateY(-3px) rotate(225deg); }

html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock :is(.dt-timeline-scroll, .dtc-trilho, .dt-media-bar) { display: none !important; }
html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dtc-linha-corpo { height: auto; padding: 0; }
html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dt-timeline-head { height: 49px; padding: 0 20px; }
@media (min-width: 880px) {
  /* Aberta, a faixa continua sendo o alvo inteiro do clique, até as bordas do corpo. */
  html[data-dt-dock="aberto"] body #dc-root .dt-timeline-dock .dt-timeline-head { margin: -22px -20px 0 !important; padding: 22px 20px 12px; }
}

/* Recolhido, o rodapé esconde a mídia — mas o rádio pode estar tocando. A faixa
   ganha a célula de tocar/pausar (o mesmo toggleRadio da barra), colada antes da
   seta; aberto, ela some porque a barra de mídia completa volta. O clique nela
   não expande: o casca.js ignora cliques em botão dentro da faixa. */
html body #dc-root .dt-timeline-dock .dt-timeline-head .dtc-tocar-recolhido { display: none !important; }
html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dt-timeline-head .dtc-tocar-recolhido {
  display: flex !important; align-items: center; justify-content: center; flex: none;
  width: 49px; height: 49px; margin: 0 0 0 12px; padding: 0;
  border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--text); cursor: pointer;
}
html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dt-timeline-head .dtc-tocar-recolhido:hover { background: var(--surface-3); }
html:not([data-dt-dock="aberto"]) body #dc-root .dt-timeline-dock .dt-timeline-head .dtc-tocar-recolhido:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* Lista aberta em largura média: os botões de filtro espremiam a busca. O rótulo
   "Filtro de status" sai da vista (continua para leitor de tela) até sobrar
   espaço — a área de conteúdo passa de ~1170px a partir de 1440px de janela. */
@media (min-width: 880px) and (max-width: 1439px) {
  html body #dc-root #darklist-container .dl-filtro-banda .sm-group-title {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }
}

/* O ::after de alguns botões da mídia é ÁREA DE TOQUE (app-polish), não dica: o
   tooltips.js esconde todo [data-tooltip]::before/::after, e sem isso o alvo do
   volume encolhe para 2px de altura útil. Voltam invisíveis, só como alvo. */
html body :is(.dt-media-bar .dt-media-play-toggle, .dt-vol-step)::after {
  display: block !important; content: "" !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; color: transparent !important; font-size: 0 !important;
}

/* --- Social: a interna do projeto (PADRAO-SOCIAL-INTERNA, 17/09) -------------
 * O cabeçalho era duas linhas soltas — Voltar em cima, nome embaixo, e as
 * ações flutuando à direita com gap. Vira a banda de 98px do molde, com as
 * células coladas: Voltar (136) | nome e fatos | compartilhar (72) | ajustes
 * (72) | + Novo conteúdo, preto e colado na borda. A marcação continua a
 * mesma: os dois invólucros viram display:contents e cada peça cai na célula
 * dela por `order`. */
/* O cabeçalho carrega a trilha dentro dele: ele é a coluna, a PRIMEIRA linha é
   a banda de 98px, e a trilha segue como a banda de 56px de baixo. */
html body #dc-root #socialmedia-container .dl-editor-header {
  flex: none;
  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 #socialmedia-container .dl-editor-header > div:not(.sm-trilha):not(.sm-project-access) {
  height: 98px; flex: none;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 42%, var(--surface-2) 100%);
}
html body #dc-root #socialmedia-container .dl-editor-header > div:not(.sm-trilha):not(.sm-project-access) > div:not(.sm-interna-identidade) { display: contents !important; }
html body #dc-root #socialmedia-container .dl-editor-header .dl-back-action {
  order: 1; width: 136px !important; min-width: 0 !important; flex: none; justify-content: center !important;
  height: auto !important; min-height: 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; color: var(--text) !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #socialmedia-container .dl-editor-header .dl-back-action:hover { background: var(--surface-2) !important; }
html body #dc-root #socialmedia-container .sm-interna-identidade {
  order: 2; flex: 1 1 auto; min-width: 0;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
  gap: 6px !important; padding: 0 20px !important;
}
html body #dc-root #socialmedia-container .sm-interna-identidade h2 {
  font: 700 22px/1.1 var(--font-ui) !important; letter-spacing: -.6px !important; color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html body #dc-root #socialmedia-container .sm-interna-fatos {
  font: 400 11.5px/1 var(--font-ui); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Compartilhar e ajustes: células de 72px, só ícone. */
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary {
  order: 3; width: 72px; flex: none; justify-content: center !important;
  height: auto !important; min-height: 0 !important;
  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) !important; box-shadow: none !important;
}
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary.dl-icon-button { order: 4; }
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary:hover { background: var(--surface-2) !important; }
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary > span { display: none; }
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary svg { width: 20px !important; height: 20px !important; }
/* A ação primária fecha a banda, colada na borda. */
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-primary {
  order: 5; flex: none; width: auto !important;
  height: auto !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; gap: 9px !important;
  margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-danger,
html body #dc-root #socialmedia-container .dl-editor-header .dl-status-label { order: 3; align-self: center; margin: 0 16px !important; }
/* No celular a banda vira duas faixas: [‹][nome e fatos][compartilhar][ajustes]
   de 72px, e a ação primária ocupando a faixa de 56px embaixo. */
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .dl-editor-header > div:not(.sm-trilha):not(.sm-project-access) {
    height: auto; flex-wrap: wrap !important;
  }
  html body #dc-root #socialmedia-container .dl-editor-header .dl-back-action {
    width: 56px !important; height: 72px !important; flex: none !important;
  }
  html body #dc-root #socialmedia-container .dl-editor-header .dl-back-action > span { display: none; }
  html body #dc-root #socialmedia-container .sm-interna-identidade {
    order: 2; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 72px; padding: 0 14px !important;
  }
  html body #dc-root #socialmedia-container .sm-interna-identidade h2 { font-size: 16px !important; letter-spacing: -.3px !important; }
  html body #dc-root #socialmedia-container .sm-interna-fatos { font-size: 11px; }
  html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-secondary {
    width: 56px !important; height: 72px !important; flex: none !important;
  }
  html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-primary {
    order: 6; flex: 1 1 100% !important; width: 100% !important; height: 56px !important;
    justify-content: center !important; border-top: 1px solid var(--line) !important;
  }
}

/* A linha de conteúdo nas zonas do molde (§4): miniatura de 96px, corpo em três
   andares — meta, título, status — e a seta do acordeão numa célula de 49px.
   As ações continuam dentro do acordeão: é lá que a permissão de cada uma já é
   decidida (só o revisor aprova), e repeti-las na linha duplicaria esse fluxo. */
html body #dc-root #socialmedia-container .sm-accordion-header.sm-linha {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  min-height: 96px; margin: 0 !important; padding: 0 !important;
}
html body #dc-root #socialmedia-container .sm-linha-mini {
  width: 96px; flex: none; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
  background: var(--chapa); color: var(--text-3);
}
html body #dc-root #socialmedia-container .sm-linha-mini svg { width: 22px; height: 22px; }
html body #dc-root #socialmedia-container .sm-linha-corpo {
  flex: 1 1 auto; min-width: 0;
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
  gap: 7px !important; padding: 16px 18px !important;
}
html body #dc-root #socialmedia-container .sm-linha-meta {
  display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font: 700 10px/1 var(--font-ui) !important; letter-spacing: 1.2px !important; text-transform: uppercase;
  color: var(--text-3) !important;
}
html body #dc-root #socialmedia-container .sm-linha-quando { font-variant-numeric: tabular-nums; }
html body #dc-root #socialmedia-container .sm-linha-corpo .sm-accordion-title {
  max-width: 100%;
  font: 600 14.5px/1.35 var(--font-ui) !important; letter-spacing: -.25px !important; color: var(--text) !important;
  text-wrap: pretty; white-space: normal !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body #dc-root #socialmedia-container .sm-linha-status {
  display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap;
  margin: 0 !important; padding: 0 !important;
}
html body #dc-root #socialmedia-container .sm-linha .dl-card-arrow {
  width: 49px !important; height: auto !important; flex: none;
  display: flex !important; align-items: center !important; justify-content: center !important;
  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-3) !important;
}
html body #dc-root #socialmedia-container .sm-linha .dl-card-arrow:hover { background: var(--surface-2) !important; color: var(--text) !important; }
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-accordion-header.sm-linha { min-height: 84px; }
  html body #dc-root #socialmedia-container .sm-linha-mini { width: 72px; }
  html body #dc-root #socialmedia-container .sm-linha-corpo { padding: 14px !important; }
}
/* A data da linha continua dizendo que é SUGERIDA (o contrato prende a palavra,
   e com razão: é sugestão, não data marcada). No molde a meta é "TIPO · data";
   aqui vira "TIPO · SUGERIDA 16/09", com a palavra no mesmo tom da meta. */
html body #dc-root #socialmedia-container .sm-linha-quando { display: inline-flex; align-items: center; gap: 6px; }
html body #dc-root #socialmedia-container .sm-linha-quando .sm-scheduled-rotulo { display: inline; font: inherit; color: inherit; }

/* --- Estado vazio: os três papéis (PADRAO-ESTADO-VAZIO.md, 17/09) -----------
 * A · CARTÃO DE ESTADO — a área principal não tem nada. Painel de largura
 *     cheia, fio CONTÍNUO, ícone de 34px, título, texto de até 440px e a ação
 *     numa banda de 64px colada nas duas bordas.
 * B · FAIXA DE VAZIO — a lista existe, mas o filtro não devolveu nada. Uma
 *     faixa fina, só texto, sem ícone e sem ação: o que resolve filtro vazio é
 *     o filtro, que está logo acima.
 * C · CAIXA DE SOLTAR — o único tracejado da skin, e ele quer dizer "ponha algo
 *     aqui". Por isso o tracejado SAI dos cartões de estado: tracejado que não
 *     é alvo de arrastar confunde os dois papéis.
 *
 * O que havia: ícone de 42px ou 56px em caixa com raio, título em Space
 * Grotesk, botão flutuando no meio com margem — e tracejado em Produtividade,
 * que era a variante que o próprio Design marcou como errada. */
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 14px !important; margin: 25px !important; padding: 64px 28px 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; text-align: center !important; color: var(--text-2) !important;
  animation: none !important; box-shadow: none !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) > div:first-child,
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) .dt-empty-mark {
  width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) svg {
  width: 34px !important; height: 34px !important;
  color: color-mix(in srgb, var(--text) 30%, var(--bg)) !important; stroke: currentColor !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) h3 {
  margin: 0 !important; font: 700 15px/1.3 var(--font-ui) !important; letter-spacing: -.2px; color: var(--text) !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) p {
  max-width: 440px; margin: 0 !important; font: 400 12.5px/1.55 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) strong { color: var(--text) !important; font-weight: 700 !important; }
/* A ação é banda, não botão solto: 64px, colada nas bordas, com fio em cima. */
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) > button {
  width: calc(100% + 56px) !important; min-height: 64px !important; height: auto !important;
  margin: 22px -28px 0 !important; padding: 0 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important;
  font: 600 13px/1 var(--font-ui) !important; transform: none !important;
}
html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) > button:hover {
  filter: none !important; background: color-mix(in srgb, var(--text) 88%, var(--bg)) !important;
}
/* Papel B · a faixa: texto só, sem ícone e sem ação. A altura vem da vizinhança
   — 120 na grade de cartões, 80 na lista de itens, 72 na coluna de quadro. */
html body #dc-root :is(.dl-itens-vazio, .dt-section-empty, .dtcfg-vazio, .sm-busca-vazia, .dl-busca-vazia) {
  display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
  min-height: 80px; margin: 0 !important; padding: 0 20px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
  font: 400 12.5px/1.5 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root .dt-section-empty { min-height: 72px; border-left: 0 !important; border-right: 0 !important; }
@media (max-width: 879px) {
  html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) { margin: 16px !important; padding: 44px 20px 0 !important; }
  html body #dc-root :is(.dt-vazio, .dt-env-empty, .dt-empty-state) > button { width: calc(100% + 40px) !important; margin: 20px -20px 0 !important; }
}
/* A faixa do papel B também vale para o vazio de filtro do Social, e o chip
   "Novo planejamento" deixa de ser tracejado: tracejado é caixa de soltar. */
html body #dc-root .dt-faixa-vazia {
  display: flex !important; align-items: center !important; justify-content: center !important; text-align: center;
  min-height: 120px; margin: 0 !important; padding: 0 20px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
  font: 400 12.5px/1.5 var(--font-ui) !important; color: var(--text-3) !important;
}
html body #dc-root #socialmedia-container .sm-planning-new { border-style: solid !important; }

/* --- Linha do tempo: as barras da agenda ------------------------------------
 * O que vinha do Google era barra de 11px com sombra, raio e o título dentro
 * em tamanho de texto normal: "Busy" saía cortado no meio, sobreposto ao
 * vizinho, e várias barras viravam uma mancha. Agora cada compromisso é uma
 * chapa com fio, marca preta no começo (que é a hora em que ele cai) e o nome
 * em 9px, cortado com reticências quando a barra é curta. Sem cor nova: o que
 * diferencia rotina de compromisso é o peso, não o matiz. */
html body #dc-root .dt-timeline-dock .dt-calendar-timeline-event {
  height: 12px !important; border-radius: 0 !important;
  padding: 0 4px !important; gap: 0 !important;
  background: var(--chapa) !important;
  border: 1px solid var(--line) !important;
  border-left: 2px solid var(--text) !important;
  box-shadow: none !important; opacity: 1 !important; overflow: hidden !important;
}
html body #dc-root .dt-timeline-dock .dt-calendar-timeline-event:hover { background: var(--surface-3) !important; }
html body #dc-root .dt-timeline-dock .dt-calendar-timeline-event .dtc-rotina-nome,
html body #dc-root .dt-timeline-dock .dt-calendar-timeline-event > span {
  font: 500 9px/1 var(--font-ui) !important; letter-spacing: .2px !important;
  color: var(--text-2) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
/* A rotina fica com a COR QUE A PESSOA ESCOLHEU (pedido do dono, 17/09): o
   fundo vem do estilo em linha e a folha não o repinta mais — antes eu forçava
   preto aqui, e por isso a linha do tempo ficava toda preta por mais que a cor
   fosse trocada. O nome sai em papel, que é o que lê sobre as cores fortes da
   paleta de rotina. */
html body #dc-root .dt-timeline-dock .dt-timeline-routine {
  height: 12px !important; padding: 0 5px !important;
  border: 0 !important; box-shadow: none !important; overflow: hidden !important;
}
html body #dc-root .dt-timeline-dock .dt-timeline-routine .dtc-rotina-nome {
  font: 600 9px/1 var(--font-ui) !important; letter-spacing: .2px !important; color: var(--bg) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* A barra de baixo é do desenho antigo (Hoje · Tarefas · + · Listas · Menu) e
   aparecia entre 880 e 900px, porque a folha antiga a mostra até 900 e a casca
   só a escondia até 879. No desenho novo quem serve o celular é a gaveta da
   barra lateral — a barra sai em qualquer largura, com o "+" redondo junto. */
html body .dt-barra-mobile { display: none !important; }

/* --- Um traço só para todo ícone --------------------------------------------
 * A barra lateral é a base: Tabler com traço 1, que é o que o protótipo pede.
 * Fora dela, meia dúzia de telas desenhava o ícone à mão com traço 2 ou 1,8 —
 * o mesmo símbolo aparecia gordo numa tela e fino na outra. O viewBox 24×24 é
 * o que separa ícone de gráfico (as séries do painel e a trilha da linha do
 * tempo usam outro viewBox e não entram aqui). */
html body :is(#dc-root, .dl-modal-overlay, .dt-floating-modal, .dt-master-dialog, #dt-notif, .dtc-busca-fundo) svg[viewBox="0 0 24 24"] {
  stroke-width: 1 !important;
}

/* --- Fonte única -------------------------------------------------------------
 * "Space Grotesk", "Manrope" e "JetBrains Mono" aparecem em dezenas de regras
 * antigas e em estilo em linha — e NENHUMA delas é carregada pelo app, então o
 * texto caía na fonte do sistema: a mesma tela com dois desenhos de letra. O
 * molde pede fonte única (Plus Jakarta Sans). Aqui ela vale para tudo o que o
 * app desenha; os números que precisavam do monoespaçado ganham
 * font-variant-numeric, que alinha sem trocar de letra. */
html body :is(#dc-root, .dl-modal-overlay, .dt-floating-modal, .dt-master-dialog, .dt-amb-overlay, #dt-notif, .dtc-busca-fundo, .dt-pin-fundo, #surveys-standalone-root) :is(h1, h2, h3, h4, h5, span, strong, small, b, p, div, button, input, select, textarea, label, a, li, td, th) {
  font-family: var(--font-ui) !important;
}
html body :is(#dc-root, .dl-modal-overlay, .dt-floating-modal) :is(.dt-codigo, .dl-card-total, [class*="contagem"], [class*="numero"], time) {
  font-variant-numeric: tabular-nums;
}

/* "Adicionar a primeira tarefa" e as fotos redondas ---------------------------
 * O botão de adicionar vinha tracejado com raio 16 no estilo em linha; ele não
 * é caixa de soltar, então leva fio contínuo, como o resto. E as fotos de
 * pessoa ficam quadradas em todo lugar — a do perfil já era, faltavam as das
 * assinaturas de ambiente, projeto e tarefa. */
html body #dc-root .dt-project-shell button[sc-camel-on-click][style*="dashed"],
html body #dc-root #dt-conteudo button[style*="dashed"]:not([data-dt-dropzone]) {
  border-style: solid !important; border-color: var(--line) !important; border-radius: 0 !important;
  color: var(--text-2) !important; font-family: var(--font-ui) !important;
}
html body #dc-root :is(.dt-amb-foto, .dt-assinatura-foto, .dt-amb-gente img, [class*="avatar"] img, [class*="assinatura"] img),
html body #dc-root :is([class*="avatar"], [class*="assinatura-inicial"], .dt-amb-inicial) {
  border-radius: 0 !important;
}

/* Em modo gaveta (< 1180px) a linha do tempo e a mídia SOMEM — pedido do dono,
   17/09: num aparelho médio elas comem a altura que o conteúdo precisa, e o
   rodapé recolhido ainda ocupava 49px fixos. Rotina e alarme continuam pelo
   Ctrl+K e pela própria tela da Hoje. */
@media (max-width: 1179px) {
  html body #dc-root .dt-app-root > .dt-timeline-dock,
  html body #dc-root .dt-timeline-dock { display: none !important; }
}

/* --- Social: planejamentos e filtros viram bandas (17/09) ---------------------
 * Abaixo da banda de 98px havia dois blocos do desenho antigo: a barra de
 * planejamentos com 12px de recuo e chips de 35 e 32px, e os filtros sem recuo,
 * rótulo em cima do controle, menus de 200px com borda própria e a busca caindo
 * para a linha de baixo. Nada começava na mesma coluna. Agora são duas bandas de
 * 56px, como a trilha: encostam nas duas bordas, e cada peça é uma célula
 * separada por fio. Os menus são a célula inteira (rótulo em cima, valor em
 * baixo), e a busca ocupa o que sobra até a borda direita. */
html body #dc-root #socialmedia-container .sm-planning-bar {
  display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important;
  height: 56px; margin: 0 !important; padding: 0 !important; overflow-x: auto;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; scrollbar-width: none;
}
html body #dc-root #socialmedia-container .sm-planning-bar::-webkit-scrollbar { display: none; }
html body #dc-root #socialmedia-container .sm-planning-label,
html body #dc-root #socialmedia-container .sm-toolbar .sm-group-title {
  display: flex !important; align-items: center; flex: none; margin: 0 !important; padding: 0 20px !important;
  font: 600 10px/1 var(--font-ui) !important; letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--text-3) !important; white-space: nowrap;
}
html body #dc-root #socialmedia-container .sm-planning-label { border-right: 1px solid var(--line); }
html body #dc-root #socialmedia-container .sm-planning-chip {
  flex: none; display: flex !important; align-items: center !important; gap: 10px !important;
  height: 100% !important; margin: 0 !important; padding: 0 20px !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;
  font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body #dc-root #socialmedia-container .sm-planning-chip:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-planning-chip.active { background: var(--chapa) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-planning-chip:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -2px; }
html body #dc-root #socialmedia-container .sm-planning-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
  font: 600 10.5px/1 var(--font-ui) !important; font-variant-numeric: tabular-nums; color: var(--text-2) !important;
}
html body #dc-root #socialmedia-container .sm-planning-edit {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: -6px;
  padding: 0 !important; border-radius: 0 !important; color: var(--text) !important;
}
html body #dc-root #socialmedia-container .sm-planning-edit:hover { background: var(--bg) !important; }
html body #dc-root #socialmedia-container .sm-planning-edit svg { width: 15px; height: 15px; }
html body #dc-root #socialmedia-container .sm-planning-new { color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-planning-new svg { flex: none; }

html body #dc-root #socialmedia-container .sm-toolbar {
  display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important;
  height: 56px; margin: 0 0 25px !important; padding: 0 !important;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
html body #dc-root #socialmedia-container .sm-filter-sets {
  display: flex !important; align-items: stretch !important; flex: none !important; flex-wrap: nowrap !important; gap: 0 !important;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block {
  position: relative; flex: none; display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 0 !important; height: 100%; margin: 0 !important; border-right: 1px solid var(--line);
}
/* As três telas dispensam legenda (são navegação, com nome próprio): o rótulo
   sai da vista e continua para leitor de tela. */
html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> .sm-view-group) > .sm-group-title {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group {
  display: flex !important; align-items: stretch !important; gap: 0 !important; height: 100%;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn {
  flex: none; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 20px !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;
  font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn:last-child { border-right: 0 !important; }
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn.active { background: var(--chapa) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -2px; }
/* Menu = a célula inteira: o rótulo fica no alto, por cima, e o próprio select
   ocupa a altura toda, com o valor embaixo — clicar em qualquer ponto abre. */
html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> select) > .sm-group-title {
  position: absolute; top: 13px; left: 0; z-index: 1; pointer-events: none;
}
html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop {
  width: 180px !important; min-width: 0 !important; height: 100% !important; margin: 0 !important;
  padding: 18px 40px 0 20px !important;
  border: 0 !important; border-radius: 0 !important; background-color: transparent !important;
  background-position: right 20px center !important;
  font: 500 13px/1 var(--font-ui) !important; color: var(--text) !important;
}
html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop:hover { background-color: var(--surface-2) !important; }
html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -2px; }
html body #dc-root #socialmedia-container .sm-toolbar .sm-toolbar-end {
  flex: 1 1 auto !important; min-width: 0; display: flex !important; align-items: stretch !important;
  gap: 0 !important; margin: 0 !important; padding: 0 !important;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-search-field {
  position: relative !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important;
  height: 100%; margin: 0 !important;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-search-field > svg { left: 20px !important; color: var(--text-3) !important; }
html body #dc-root #socialmedia-container .sm-toolbar .sm-search-field .dl-input {
  width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 20px 0 46px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 13px/1 var(--font-ui) !important; color: var(--text) !important; outline-offset: -2px;
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-search-field .dl-input::placeholder { color: var(--text-3); }
/* A faixa de vazio abaixo da banda respeita o recuo de 25px do conteúdo. */
html body #dc-root #socialmedia-container .sm-toolbar ~ .dt-faixa-vazia { margin: 0 25px 25px !important; }
@media (max-width: 879px) { html body #dc-root #socialmedia-container .sm-toolbar ~ .dt-faixa-vazia { margin: 0 16px 16px !important; } }
/* Médio: os menus encolhem antes de a busca sumir. */
@media (max-width: 1279px) {
  html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop { width: 150px !important; }
}
@media (min-width: 880px) and (max-width: 1023px) {
  html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop { width: 124px !important; padding-left: 16px !important; padding-right: 30px !important; background-position: right 12px center !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> select) > .sm-group-title { padding: 0 16px !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn { padding: 0 16px !important; }
}
/* Celular: a banda empilha em faixas de 56px — telas, depois os menus em
   partes iguais, depois a busca inteira. A barra de planejamentos rola. */
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-toolbar { height: auto; flex-wrap: wrap !important; margin-bottom: 16px !important; }
  html body #dc-root #socialmedia-container .sm-filter-sets { flex: 1 1 100% !important; flex-wrap: wrap !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block { flex: 1 1 0 !important; min-width: 0; height: 56px; border-bottom: 1px solid var(--line); }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:last-child { border-right: 0; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> .sm-view-group) { flex: 1 1 100% !important; border-right: 0; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group { flex: 1 1 auto; width: 100%; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn { flex: 1 1 0 !important; justify-content: center; padding: 0 10px !important; }
  html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop { width: 100% !important; padding-left: 16px !important; padding-right: 32px !important; background-position: right 12px center !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> select) > .sm-group-title { padding: 0 16px !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-toolbar-end { flex: 1 1 100% !important; height: 56px; }
  html body #dc-root #socialmedia-container .sm-planning-label { display: none !important; }
}

/* --- Social: rodapé dos diálogos em banda (17/09) -----------------------------
 * Configurar projeto, Planejamento e Encerrar acesso terminavam em botões
 * soltos de 44px, com vão entre eles e margem até a borda; o Configurar ainda
 * era todo estilo inline, com raio de 22px. Agora o rodapé é a banda de 64px
 * do molde: encosta nas duas bordas e no fundo, as ações são células separadas
 * por fio e a primária, preta, fecha o canto. */
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions {
  display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  height: 64px; margin: 16px -20px -24px !important; padding: 0 !important;
  border-top: 1px solid var(--line);
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button {
  flex: 1 1 0 !important; min-width: 0; width: auto !important; height: 100% !important; min-height: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important;
  font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button:first-child { border-left: 0 !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button:hover { background: var(--surface-2) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .dl-btn-danger { color: var(--danger-text) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .dl-btn-primary { background: var(--text) !important; color: var(--bg) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .dl-btn-primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -3px; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button svg { flex: none; }
/* A nota que às vezes acompanha a ação (por que não dá para excluir) vira a
   primeira célula, à esquerda, e a ação continua no canto. */
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .sm-field-hint {
  order: -1; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; align-self: stretch !important;
  margin: 0 !important; padding: 0 20px; border-right: 1px solid var(--line);
  font: 400 12px/1.4 var(--font-ui) !important; color: var(--text-3) !important;
}
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .sm-field-hint ~ button { flex: 0 0 auto !important; padding: 0 28px !important; }
/* Dica embaixo de um campo não pode colar no rótulo do campo seguinte. */
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .sm-modal-form > .sm-field-hint + .dl-label.dl-label { margin-top: 14px !important; }
@media (max-width: 460px) {
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions { flex-direction: column !important; height: auto; }
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button { flex: none !important; height: 56px !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > :first-child { border-top: 0 !important; }
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .dl-btn-primary { order: -2; border-top: 0 !important; }
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .dl-btn-danger { order: 1; }
  html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > .sm-field-hint { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* --- Boas-vindas: o assistente de três passos no molde (17/09) ----------------
 * O que havia: a barra de progresso num grid de duas colunas (o terceiro
 * segmento caía para baixo e os passos pareciam dois), campo com borda dupla
 * (a caixa e o input dentro dela), três peças no tom #8c8c8c, retrato redondo
 * numa caixa de raio 20px, e botões de 38 e 44px soltos no rodapé. Agora:
 * progresso em três segmentos colados ao topo, campo = uma caixa de 48px com a
 * célula do ícone separada por fio, retrato quadrado na caixa de soltar (o
 * único tracejado da skin), e o rodapé é a banda de 64px colada nas bordas,
 * com a ação principal preta no canto. */
html body .dt-onboarding-overlay .dt-onboarding-card {
  width: min(100%, 860px) !important; max-height: calc(100dvh - 32px); overflow: auto;
  padding: 0 !important; gap: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html body .dt-onboarding-overlay .dt-onboarding-progress {
  display: flex !important; grid-template-columns: none !important; gap: 2px !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
}
html body .dt-onboarding-overlay .dt-onboarding-progress > i {
  flex: 1 1 0 !important; width: auto !important; height: 4px !important; margin: 0 !important;
  border-radius: 0 !important; background: var(--line) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-progress > :is(.is-active, .is-done) { background: var(--text) !important; }
html body .dt-onboarding-overlay .dt-onboarding-content { padding: 40px 40px 0 !important; }
html body .dt-onboarding-overlay .dt-onboarding-card h1 { margin: 10px 0 8px !important; font-size: 34px !important; line-height: 1.1 !important; letter-spacing: -1px !important; }
html body .dt-onboarding-overlay .dt-onboarding-lead { max-width: 600px; margin: 0 0 32px !important; color: var(--text-2) !important; }
html body .dt-onboarding-overlay .dt-onboarding-kicker { margin: 0 !important; color: var(--text-3) !important; }

/* Retrato: caixa de soltar quadrada, com a prévia quadrada dentro. */
html body .dt-onboarding-overlay .dt-onboarding-profile-grid {
  display: grid !important; grid-template-columns: 200px minmax(0, 1fr) !important; gap: 24px !important; align-items: stretch !important;
}
html body .dt-onboarding-overlay .dt-onboarding-photo {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  min-height: 200px; margin: 0 !important; padding: 20px 16px !important;
  border: 1px dashed color-mix(in srgb, var(--text) 23%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; cursor: pointer;
}
html body .dt-onboarding-overlay .dt-onboarding-photo:hover { background: var(--surface-2) !important; }
html body .dt-onboarding-overlay .dt-onboarding-photo:focus-within { outline: 2px solid var(--text); outline-offset: -2px; }
html body .dt-onboarding-overlay .dt-onboarding-avatar {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 88px !important; height: 88px !important; margin: 0 0 8px !important; overflow: hidden;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--chapa) !important; color: var(--text) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
html body .dt-onboarding-overlay .dt-onboarding-avatar svg { width: 24px !important; height: 24px !important; }
html body .dt-onboarding-overlay .dt-onboarding-photo strong { font: 600 13px/1.2 var(--font-ui) !important; color: var(--text) !important; }
html body .dt-onboarding-overlay .dt-onboarding-photo small { font: 400 11.5px/1.3 var(--font-ui) !important; color: var(--text-3) !important; }

/* Campo: UMA caixa. O ícone é uma célula de 48px separada por fio; o input
   não tem borda própria e ocupa o resto. */
html body .dt-onboarding-overlay .dt-onboarding-fields { display: flex !important; flex-direction: column !important; gap: 20px !important; justify-content: center; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > span { font: 500 12px/1 var(--font-ui) !important; color: var(--text-2) !important; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 48px !important; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div:focus-within { border-color: var(--text) !important; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div > svg {
  flex: none; box-sizing: content-box; width: 17px !important; height: 17px !important; align-self: center;
  padding: 0 15px !important; margin: 0 !important; color: var(--text-2) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div > svg + input { border-left: 1px solid var(--line) !important; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div > input {
  flex: 1 1 auto; min-width: 0; width: auto !important; height: 100% !important; margin: 0 !important; padding: 0 16px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  font: 400 14px/1 var(--font-ui) !important; color: var(--text) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div > input::placeholder { color: var(--text-3); }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div:has(> input[readonly]) { background: var(--chapa) !important; }
html body .dt-onboarding-overlay .dt-onboarding-fields > label > div > input[readonly] { color: var(--text-2) !important; }

/* Tema: dois cartões quadrados colados; o escolhido é preto. */
/* Três temas desde 19/09/2026 (Escuro, Claro, Colorido): três colunas. */
html body .dt-onboarding-overlay .dt-onboarding-themes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 0 28px !important; }
html body .dt-onboarding-overlay .dt-onboarding-theme {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  margin: 0 !important; padding: 12px !important; position: relative;
  border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; text-align: left;
}
html body .dt-onboarding-overlay .dt-onboarding-theme + .dt-onboarding-theme { border-left: 0 !important; }
html body .dt-onboarding-overlay .dt-onboarding-theme.is-selected { border-color: var(--text) !important; }
html body .dt-onboarding-overlay .dt-onboarding-theme .dt-onboarding-demo { border-radius: 0 !important; }
html body .dt-onboarding-overlay .dt-onboarding-theme-check {
  position: absolute; right: 12px; bottom: 12px;
  display: flex !important; align-items: center; justify-content: center;
  width: 22px !important; height: 22px !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  font-size: 0 !important; color: transparent !important; background: transparent !important;
}
html body .dt-onboarding-overlay .dt-onboarding-theme.is-selected .dt-onboarding-theme-check { border-color: var(--bg) !important; font-size: 13px !important; color: var(--bg) !important; }
html body .dt-onboarding-overlay .dt-onboarding-theme-copy strong { font: 600 13px/1.2 var(--font-ui) !important; }
/* A descrição herda a tinta do cartão: com --faint fixo e opacity .7 ela media
   3,4:1 no escuro e 2,1:1 dentro do cartão escolhido (que inverte as cores). */
html body .dt-onboarding-overlay .dt-onboarding-theme-copy small { font: 400 11.5px/1.3 var(--font-ui) !important; color: inherit !important; opacity: .8; white-space: normal !important; }

/* Cor de destaque: dez células coladas numa régua só, da largura do conteúdo. */
html body .dt-onboarding-overlay .dt-onboarding-accent-label { margin: 0 0 8px !important; font: 500 12px/1 var(--font-ui) !important; color: var(--text-2) !important; }
html body .dt-onboarding-overlay [data-onboarding-accents] {
  display: grid !important; grid-template-columns: repeat(10, minmax(0, 1fr)) !important; gap: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body .dt-onboarding-overlay [data-onboarding-accents] > button {
  position: relative; width: auto !important; height: 48px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; outline: 0;
  background: transparent !important; cursor: pointer;
}
html body .dt-onboarding-overlay [data-onboarding-accents] > button:last-child { border-right: 0 !important; }
html body .dt-onboarding-overlay [data-onboarding-accents] > button::before {
  content: ""; position: absolute; inset: 12px; background: var(--dt-swatch);
}
html body .dt-onboarding-overlay [data-onboarding-accents] > button:hover { background: var(--surface-2) !important; }
html body .dt-onboarding-overlay [data-onboarding-accents] > button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--text) !important; }
html body .dt-onboarding-overlay [data-onboarding-accents] > button:focus-visible { box-shadow: inset 0 0 0 2px var(--text) !important; }

html body .dt-onboarding-overlay .dt-onboarding-error { margin: 16px 0 0 !important; font: 500 12.5px/1.4 var(--font-ui) !important; }
html body .dt-onboarding-overlay .dt-onboarding-error[hidden] { display: none !important; }

/* Rodapé: banda de 64px, colada nas bordas e no fundo. Voltar e Pular são
   células com fio; a ação principal fecha o canto, preta. */
html body .dt-onboarding-overlay .dt-onboarding-footer {
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  height: 64px !important; margin: 40px -40px 0 !important; padding: 0 !important;
  border: 0 !important; border-top: 1px solid var(--line) !important;
}
html body .dt-onboarding-overlay .dt-onboarding-footer > button {
  flex: none; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
  height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 28px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important;
  font: 600 13px/1 var(--font-ui) !important; white-space: nowrap;
}
html body .dt-onboarding-overlay .dt-onboarding-footer > button.is-skip-all { color: var(--text-2) !important; font-weight: 500 !important; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button:hover { background: var(--surface-2) !important; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button:last-child { min-width: 180px; background: var(--text) !important; color: var(--bg) !important; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button:last-child:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -3px; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button:disabled { opacity: .55; cursor: progress; }
html body .dt-onboarding-overlay .dt-onboarding-footer > button svg { flex: none; width: 16px !important; height: 16px !important; }

/* Celular: o conteúdo recua 20px, o retrato vai para cima dos campos e o
   rodapé empilha — a ação principal em cima, inteira. */
@media (max-width: 640px) {
  html body .dt-onboarding-overlay .dt-onboarding-card { max-height: 100dvh; }
  html body .dt-onboarding-overlay .dt-onboarding-content { padding: 28px 20px 0 !important; }
  html body .dt-onboarding-overlay .dt-onboarding-card h1 { font-size: 26px !important; }
  html body .dt-onboarding-overlay .dt-onboarding-lead { margin-bottom: 24px !important; }
  html body .dt-onboarding-overlay .dt-onboarding-profile-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  html body .dt-onboarding-overlay .dt-onboarding-photo { min-height: 0; flex-direction: row !important; justify-content: flex-start !important; gap: 14px !important; padding: 14px !important; text-align: left; }
  html body .dt-onboarding-overlay .dt-onboarding-avatar { width: 56px !important; height: 56px !important; margin: 0 !important; }
  html body .dt-onboarding-overlay .dt-onboarding-themes { grid-template-columns: 1fr !important; }
  html body .dt-onboarding-overlay .dt-onboarding-theme + .dt-onboarding-theme { border-left: 1px solid var(--line) !important; border-top: 0 !important; }
  html body .dt-onboarding-overlay .dt-onboarding-theme .dt-onboarding-demo { display: none !important; }
  html body .dt-onboarding-overlay [data-onboarding-accents] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  html body .dt-onboarding-overlay [data-onboarding-accents] > button:nth-child(5) { border-right: 0 !important; }
  html body .dt-onboarding-overlay [data-onboarding-accents] > button:nth-child(-n+5) { border-bottom: 1px solid var(--line) !important; }
  html body .dt-onboarding-overlay .dt-onboarding-footer { flex-direction: column !important; height: auto !important; margin: 28px -20px 0 !important; }
  html body .dt-onboarding-overlay .dt-onboarding-footer > button { height: 56px !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  html body .dt-onboarding-overlay .dt-onboarding-footer > button:first-child { border-top: 0 !important; }
  html body .dt-onboarding-overlay .dt-onboarding-footer > button:last-child { order: -1; border-top: 0 !important; }
}

/* --- Diálogos flutuantes: nada mais largo que a caixa (17/09) -----------------
 * O campo "Nome da rotina" traz width:100% inline e a skin dá 20px de margem
 * de cada lado: ele saía 40px mais largo que o diálogo. Com o foco automático
 * nele, o navegador ROLAVA a caixa 20px para o lado — todo o conteúdo colava na
 * borda esquerda, e o cabeçalho e o rodapé paravam 20px antes da direita (Nova
 * e Editar rotina). Regra geral: filho direto de diálogo flutuante mede a
 * caixa menos as margens, e campo solto idem. */
html body #dc-root .dt-floating-modal:not(.dtm) > :not(:first-child):not(:last-child:has(> button)) { box-sizing: border-box !important; max-width: calc(100% - 40px) !important; }
/* O ícone do topo é só o traço, sem caixinha em volta: a célula já é a moldura. */
html body #dc-root .dt-floating-modal:not(.dtm) > :first-child span:is([style*="width:36px"], [style*="width: 36px"]):has(> svg) {
  border: 0 !important; background: transparent !important; color: var(--text) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm) > :is(input, select, textarea) { width: calc(100% - 40px) !important; }
html body #dc-root .dt-floating-modal:not(.dtm) > .dt-range-foot { max-width: none !important; }

/* Rotina: rótulos no tom de apoio; início e fim em duas colunas iguais sem vão
   a mais; dias em sete células iguais; áudio em três; cor numa régua. */
html body #dc-root .dt-floating-modal:has(.dt-range-days) > label { font: 500 12px/1 var(--font-ui) !important; color: var(--text-2) !important; margin-bottom: 8px !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(input[type="time"], input[name="name"]) { height: 48px !important; padding: 0 14px !important; font: 400 14px/1 var(--font-ui) !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> div > input[type="time"]) { gap: 16px !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(.dt-range-days, .dt-range-ambients) {
  display: flex !important; flex-wrap: nowrap !important; gap: 0 !important;
}
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(.dt-range-days, .dt-range-ambients) > button {
  flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 44px !important; margin: 0 !important; padding: 0 6px !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--bg) !important; color: var(--text-2) !important;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(.dt-range-days, .dt-range-ambients) > button + button { margin-left: -1px !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(.dt-range-days, .dt-range-ambients) > button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) :is(.dt-range-days, .dt-range-ambients) > button[aria-pressed="true"] {
  position: relative; z-index: 1; background: var(--text) !important; border-color: var(--text) !important; color: var(--bg) !important;
}
/* Cor: a régua das cores. A cor é o fundo inline do botão: ele fica, recortado
   para dentro da célula de 44px; a escolhida (sombra inline de 4px) ganha moldura. */
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) {
  display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 !important;
  border: 1px solid var(--line) !important;
}
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) > button[data-color] {
  width: auto !important; height: 44px !important; margin: 0 !important; padding: 11px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  background-clip: content-box !important; box-shadow: none !important; outline: 0 !important; transform: none !important;
}
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) > button[data-color]:last-child { border-right: 0 !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) > button[data-color]:hover { padding: 9px !important; }
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) > button[data-color][style*="0 0 0 4px"],
html body #dc-root .dt-floating-modal:has(.dt-range-days) > div:has(> button[data-color]) > button[data-color]:focus-visible { box-shadow: inset 0 0 0 2px var(--text), inset 0 0 0 6px var(--bg) !important; padding: 6px !important; }

/* --- Modo foco: células coladas e a banda até a borda (17/09) -----------------
 * "Iniciar foco" tem width:100% inline e parava 20px antes da borda direita
 * (a regra de largura dos filhos do diálogo o alcançava). As fileiras
 * Pomodoro/Personalizado e 25/05/15 tinham 4px de recuo e vão entre os botões,
 * com a escolhida num contorno escuro. Agora: cada fileira é uma régua com
 * células coladas nas bordas, fio claro de 1px entre elas, e a escolhida em
 * chapa. O pé (Iniciar, ou Pausar/Parar, ou Retomar) é banda de 64px colada
 * nas bordas e no fundo. */
/* A classe vem repetida de propósito (19/09): a regra que limita os filhos do
   diálogo a calc(100% - 40px) pesa (1,4,3) por causa do :not(:last-child:has(> button)),
   e vencia este max-width:none — a banda parava 40px antes da borda direita. */
html body #dc-root .dt-floating-modal.dt-floating-modal.dt-floating-modal:not(.dtm) > button:last-child,
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) {
  max-width: none !important; width: 100% !important; box-sizing: border-box !important; margin: 24px 0 0 !important;
}
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) {
  display: flex !important; gap: 0 !important; min-height: 64px; border-top: 1px solid var(--line) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) > button {
  flex: 1 1 0 !important; min-height: 64px !important; margin: 0 !important; padding: 0 16px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important; font: 600 13.5px/1 var(--font-ui) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) > button:first-child { border-left: 0 !important; }
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) > button:hover { background: var(--surface-2) !important; }
html body #dc-root .dt-floating-modal:not(.dtm):has(.dt-focus-mode-tabs) > div:last-child:has(> button) > button:is([aria-label^="Retomar"], :not([aria-label])):first-child {
  background: var(--text) !important; color: var(--bg) !important;
}

html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) {
  display: flex !important; gap: 0 !important; padding: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) > button {
  flex: 1 1 0 !important; min-width: 0; margin: 0 !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important;
  outline: 0; box-shadow: none !important; background: var(--bg) !important; color: var(--text-2) !important;
  font-family: var(--font-ui) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) > button:last-child { border-right: 0 !important; }
html body #dc-root .dt-floating-modal:not(.dtm) .dt-focus-mode-tabs > button { height: 44px !important; padding: 0 12px !important; font-weight: 600 !important; font-size: 13px !important; }
html body #dc-root .dt-floating-modal:not(.dtm) .dt-focus-preset-tabs > button { min-height: 64px !important; padding: 10px 6px !important; }
html body #dc-root .dt-floating-modal:not(.dtm) .dt-focus-preset-tabs > button span { font-family: var(--font-ui) !important; color: inherit !important; }
html body #dc-root .dt-floating-modal:not(.dtm) .dt-focus-preset-tabs > button span:first-child { font-size: 20px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) > button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
/* A escolhida: chapa e tinta cheia. O estilo inline de cada botão pinta a
   escolhida com contorno e fundo próprios; é ele que se reconhece aqui. */
html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) > button:is([style*="var(--accent)"], [style*="--text)"], [aria-pressed="true"], [aria-selected="true"], .is-active, .active) {
  background: var(--chapa) !important; color: var(--text) !important;
}
html body #dc-root .dt-floating-modal:not(.dtm) :is(.dt-focus-mode-tabs, .dt-focus-preset-tabs) > button:focus-visible { outline: 2px solid var(--text) !important; outline-offset: -2px; }

/* Foco rodando: o fundo respira. O desfoque sobe e desce devagar enquanto o
   relógio corre (o botão de pausar só existe nesse estado) e para quando a
   pessoa pausa. Quem pediu menos movimento ao sistema fica com o fundo fixo. */
@keyframes dt-foco-respira {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
/* O desfoque fica numa camada própria (::before) porque o fundo do diálogo
   tem backdrop-filter: none com !important em outra folha, e !important vence
   animação. A camada tem o desfoque fixo; o que pulsa é a opacidade dela. */
html body #dc-root .dt-modal-backdrop.dt-modal-backdrop:has(.dt-focus-mode-tabs):has([aria-label="Pausar foco"])::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  backdrop-filter: blur(16px) brightness(.85); -webkit-backdrop-filter: blur(16px) brightness(.85);
  animation: dt-foco-respira 4s ease-in-out infinite;
}
html body #dc-root .dt-modal-backdrop:has(.dt-focus-mode-tabs) > .dt-floating-modal { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html body #dc-root .dt-modal-backdrop.dt-modal-backdrop:has(.dt-focus-mode-tabs):has([aria-label="Pausar foco"])::before { animation: none; opacity: .7; }
}

/* --- Minhas ideias: lista, texto, voz e renomear no molde (17/09) -------------
 * Nova ideia em texto e Gravar Insight eram o desenho antigo inteiro: ícone em
 * caixa redonda, fechar redondo, campos com raio 12 e botões soltos no pé. A
 * lista tinha cartões de raio 16, etiquetas em pílula, ações em pílulas com
 * vão e um Excluir rosa. Agora os dois diálogos seguem o molde — topo de 72px
 * com o fechar numa célula, corpo de 20px, pé em banda de 64px — e o cartão da
 * ideia é reto, com as ações numa faixa de células coladas no pé dele. */

/* Diálogos de texto e voz */
html body #dc-root :is(.dt-ideia-dialogo, .dt-audio-note-dialog) {
  width: min(100%, 540px) !important; max-height: calc(100dvh - 40px); overflow: auto;
  margin: 0 !important; padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--text) 19%, var(--bg)) !important; border-radius: 0 !important;
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important; animation: none !important;
  font-family: var(--font-ui) !important;
}
html body #dc-root :is(.dt-text-idea-overlay, .dt-audio-note-overlay) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body #dc-root :is(.dt-ideia-dialogo-topo, .dt-audio-note-dialog > header) {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  min-height: 72px; margin: 0 !important; padding: 0 !important;
  border-bottom: 1px solid var(--line) !important; background: var(--bg) !important;
}
html body #dc-root :is(.dt-ideia-dialogo-icone, .dt-audio-note-icon) {
  flex: none; display: flex !important; align-items: center !important; justify-content: center !important;
  width: 72px !important; height: auto !important; 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) !important;
}
html body #dc-root :is(.dt-ideia-dialogo-icone, .dt-audio-note-icon) svg { width: 20px !important; height: 20px !important; stroke-width: 1 !important; }
html body #dc-root :is(.dt-ideia-dialogo-nome, .dt-audio-note-dialog > header > div) {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 20px;
}
html body #dc-root :is(.dt-ideia-dialogo-nome h3, .dt-audio-note-dialog h2) { margin: 0 !important; font: 700 17px/1.1 var(--font-ui) !important; letter-spacing: -.4px !important; color: var(--text) !important; }
html body #dc-root :is(.dt-ideia-dialogo-nome p, .dt-audio-note-dialog > header p) { margin: 0 !important; font: 400 12px/1.3 var(--font-ui) !important; color: var(--text-2) !important; }
html body #dc-root :is(.dt-ideia-dialogo-fechar, .dt-audio-note-dialog [data-audio-note-close]) {
  flex: none; display: flex !important; align-items: center !important; justify-content: center !important;
  width: 72px !important; height: auto !important; min-height: 0 !important; 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) !important; font-size: 18px !important; cursor: pointer;
}
html body #dc-root :is(.dt-ideia-dialogo-fechar, .dt-audio-note-dialog [data-audio-note-close]):hover { background: var(--surface-2) !important; }

html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-body) { display: flex; flex-direction: column; padding: 20px !important; }
html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-title-step) label {
  display: block; margin: 0 0 8px !important; font: 500 12px/1 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root .dt-ideia-dialogo-corpo input + label { margin-top: 18px !important; }
html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-title-step) :is(input, textarea) {
  width: 100% !important; box-sizing: border-box; margin: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--bg) !important; color: var(--text) !important; font: 400 14px/1.5 var(--font-ui) !important; outline: none;
}
html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-title-step) input { height: 48px !important; min-height: 0 !important; padding: 0 14px !important; }
html body #dc-root .dt-ideia-dialogo-corpo textarea { min-height: 140px; padding: 12px 14px !important; resize: vertical; }
html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-title-step) :is(input, textarea):focus { border-color: var(--text) !important; }
html body #dc-root :is(.dt-ideia-dialogo-corpo, .dt-audio-note-title-step) :is(input, textarea)::placeholder { color: var(--text-3); }
html body #dc-root .dt-text-idea-error { margin-top: 8px; font: 500 12.5px/1.4 var(--font-ui); color: var(--danger-text); }
html body #dc-root .dt-text-idea-error:empty { display: none; }

/* Pé em banda: Descartar | Salvar, a principal preta no canto. */
html body #dc-root :is(.dt-ideia-dialogo-pe, .dt-audio-note-footer) {
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  min-height: 64px; margin: 0 !important; padding: 0 !important;
  border-top: 1px solid var(--line) !important; background: var(--bg) !important;
}
html body #dc-root .dt-audio-note-footer[hidden] { display: none !important; }
html body #dc-root :is(.dt-ideia-dialogo-pe, .dt-audio-note-footer) > button {
  flex: none; min-width: 150px; min-height: 64px !important; height: auto !important; margin: 0 !important; padding: 0 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important; font: 600 13.5px/1 var(--font-ui) !important; cursor: pointer;
}
html body #dc-root :is(.dt-ideia-dialogo-pe, .dt-audio-note-footer) > button:hover { background: var(--surface-2) !important; }
html body #dc-root :is(.dt-ideia-dialogo-pe > .e-principal, .dt-audio-note-footer > .dt-audio-note-save) {
  min-width: 180px; background: var(--text) !important; color: var(--bg) !important;
}
html body #dc-root :is(.dt-ideia-dialogo-pe > .e-principal, .dt-audio-note-footer > .dt-audio-note-save):hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }

/* Gravação: o relógio na chapa, a barra de nível reta, e "Concluir gravação"
   vira a banda preta colada no pé do diálogo. */
html body #dc-root .dt-audio-note-body:has(> .dt-audio-note-recording:not([hidden])) { padding-bottom: 0 !important; }
html body #dc-root .dt-audio-note-recording { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
html body #dc-root .dt-audio-note-recording[hidden] { display: none !important; }
html body #dc-root .dt-audio-note-recording strong { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-ui) !important; color: var(--text) !important; }
html body #dc-root .dt-audio-rec-dot { width: 8px !important; height: 8px !important; border-radius: 0 !important; background: var(--danger-text) !important; }
html body #dc-root .dt-audio-note-recording time {
  align-self: stretch; margin: 16px 0 14px !important; padding: 26px 0 !important;
  border: 1px solid var(--line); background: var(--chapa);
  font: 700 46px/1 var(--font-ui) !important; letter-spacing: -1.5px !important; font-variant-numeric: tabular-nums; color: var(--text) !important;
}
html body #dc-root .dt-audio-level { align-self: stretch; height: 4px !important; border-radius: 0 !important; background: var(--line) !important; overflow: hidden; }
html body #dc-root .dt-audio-level i { height: 100% !important; border-radius: 0 !important; background: var(--text) !important; }
html body #dc-root .dt-audio-note-recording p { margin: 14px 0 20px !important; font: 400 12.5px/1.5 var(--font-ui) !important; color: var(--text-2) !important; }
html body #dc-root .dt-audio-note-stop {
  align-self: stretch; width: auto !important; min-height: 64px !important; margin: 0 -20px !important; padding: 0 !important;
  border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--text) !important; color: var(--bg) !important; font: 600 13.5px/1 var(--font-ui) !important;
}
html body #dc-root .dt-audio-note-stop:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
html body #dc-root .dt-audio-note-title-step small { margin: 8px 0 16px !important; font: 400 11.5px/1.4 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root .dt-audio-note-title-step audio { width: 100%; border-radius: 0; }

/* Lista: cabeçalho sem caixa no ícone e com a contagem numa linha só. */
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) { max-width: 720px !important; border-radius: 0 !important; }
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child { flex-wrap: nowrap !important; }
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child > span:first-child {
  width: 72px !important; height: auto !important; align-self: stretch; margin: 0 0 0 -20px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; color: var(--text) !important;
}
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child > div:nth-child(2) {
  flex: 1 1 auto !important; min-width: 0 !important; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start !important; text-align: left !important;
}
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child > div:nth-child(2) h3 { font: 700 17px/1.1 var(--font-ui) !important; white-space: nowrap; }
html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child > div:nth-child(2) > div { white-space: nowrap; font: 400 12px/1.3 var(--font-ui) !important; color: var(--text-2) !important; margin-top: 5px !important; }

/* Corpo e cartão */
html body #dc-root .dt-ideias-corpo { margin: 0 !important; max-width: none !important; padding: 20px !important; gap: 12px !important; }
html body #dc-root .dt-ideia {
  margin: 0 !important; padding: 18px 20px 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
}
html body #dc-root .dt-ideia-titulo { font: 700 15px/1.3 var(--font-ui) !important; letter-spacing: -.2px; color: var(--text) !important; }
html body #dc-root .dt-ideia-data { font: 400 11.5px/1 var(--font-ui) !important; color: var(--text-3) !important; }
html body #dc-root .dt-ideia :is(div, span) { border-radius: 0 !important; }
html body #dc-root .dt-ideia-etiquetas { gap: 0 !important; margin-top: 12px !important; }
html body #dc-root .dt-ideia-etiquetas > span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px !important; margin: 0 !important;
  border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--bg) !important;
  font: 500 11.5px/1 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root .dt-ideia-etiquetas > span + span { margin-left: -1px !important; }
html body #dc-root .dt-ideia-etiquetas > .dt-ideia-categoria { background: var(--chapa) !important; color: var(--text) !important; font-weight: 600 !important; }
html body #dc-root .dt-ideia-audio { padding: 12px 14px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: var(--chapa) !important; }
html body #dc-root .dt-ideia-audio button { border-radius: 0 !important; background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root .dt-ideia-audio [sc-camel-on-click] > div,
html body #dc-root .dt-ideia-audio div[style*="height:6px"] > div { border-radius: 0 !important; background: var(--text) !important; }

/* As ações do cartão: faixa de células coladas no pé, até as bordas do cartão. */
html body #dc-root .dt-ideia .dt-insight-actions {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 48px; margin: 16px -20px 0 !important; padding: 0 !important;
  border-top: 1px solid var(--line) !important;
}
html body #dc-root .dt-ideia .dt-insight-actions > button {
  display: flex !important; align-items: center !important; gap: 8px !important;
  height: 100% !important; margin: 0 !important; padding: 0 20px !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important; font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root .dt-ideia .dt-insight-actions > button:hover { background: var(--surface-2) !important; }
html body #dc-root .dt-ideia .dt-insight-actions > .dt-insight-delete { border-right: 0 !important; border-left: 1px solid var(--line) !important; color: var(--danger-text) !important; }
html body #dc-root .dt-ideia .dt-insight-actions > button svg { flex: none; }

@media (max-width: 560px) {
  html body #dc-root :is(.dt-ideia-dialogo-pe, .dt-audio-note-footer) > button { flex: 1 1 0; min-width: 0; padding: 0 12px !important; }
  html body #dc-root .dt-floating-modal:has(.dt-ideias-corpo) > :first-child { flex-wrap: wrap !important; }
  html body #dc-root .dt-ideias-corpo { padding: 16px !important; }
  html body #dc-root .dt-ideia .dt-insight-actions > button { flex: 1 1 auto; justify-content: center; padding: 0 10px !important; }
}
html body #dc-root .dt-audio-note-recording .dt-audio-level { width: 100% !important; }
/* O ponto de "gravando" é irmão do texto; na coluna ele caía numa linha só dele. */
html body #dc-root .dt-audio-note-recording { display: grid !important; grid-template-columns: 1fr auto auto 1fr; column-gap: 8px; align-items: center; }
html body #dc-root .dt-audio-note-recording > .dt-audio-rec-dot { grid-column: 2; grid-row: 1; }
html body #dc-root .dt-audio-note-recording > strong { grid-column: 3; grid-row: 1; }
html body #dc-root .dt-audio-note-recording > :not(.dt-audio-rec-dot):not(strong) { grid-column: 1 / -1; }

/* --- Notícia em vídeo: toca dentro da leitura (17/09) --------------------------
 * O player ocupa o lugar da capa, em 16:9, sem moldura própria. Na lista, a
 * miniatura de uma notícia em vídeo leva o quadrado de play no centro. */
html body #dc-root .dtn-leitura-arte.is-video { aspect-ratio: 16 / 9; height: auto !important; background: #000 !important; overflow: hidden; }
html body #dc-root .dtn-leitura-arte .dtf-leitura-video {
  display: block; width: 100% !important; height: 100% !important; aspect-ratio: 16 / 9;
  margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: #000;
}
html body #dc-root .dth-art-foto { position: relative; }
html body #dc-root .dth-art-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--text); color: var(--bg); pointer-events: none;
}
html body #dc-root .dth-art-play svg { width: 16px; height: 16px; margin-left: 2px; }

/* --- Social: revisores e PIN na banda (17/09) ---------------------------------
 * A regra da banda de 98px pegava toda div do cabeçalho: a linha "Revisores
 * com acesso" virava outra banda de 98px, com degradê, e o miolo dela se
 * desmontava. O PIN entrava como botão solto de 42px antes do Voltar. Agora os
 * revisores são uma banda de 56px no padrão da de planejamentos — rótulo numa
 * célula, cada revisor numa célula com o "x" colado — e o PIN é uma célula de
 * 72px ao lado de Compartilhar, como as outras ações do topo. */
html body #dc-root #socialmedia-container .dl-editor-header > .sm-project-access {
  display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 0 !important;
  height: 56px; margin: 0 !important; padding: 0 !important; overflow-x: auto;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--bg) !important; scrollbar-width: none;
}
html body #dc-root #socialmedia-container .sm-project-access > span:first-child {
  flex: none; display: flex !important; align-items: center !important; gap: 10px !important;
  margin: 0 !important; padding: 0 20px !important; border-right: 1px solid var(--line);
  font: 600 10px/1 var(--font-ui) !important; letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--text-3) !important; white-space: nowrap;
}
html body #dc-root #socialmedia-container .sm-project-access > span:first-child svg { width: 16px !important; height: 16px !important; color: var(--text-2); }
html body #dc-root #socialmedia-container .sm-project-access > div { display: flex !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; }
html body #dc-root #socialmedia-container .sm-project-access small {
  display: flex; align-items: center; padding: 0 20px; font: 400 12.5px/1 var(--font-ui) !important; color: var(--text-2) !important;
}
html body #dc-root #socialmedia-container .sm-reviewer-chip {
  flex: none; display: flex !important; align-items: stretch !important; gap: 0 !important;
  height: 100% !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;
}
html body #dc-root #socialmedia-container .sm-reviewer-chip-nome {
  display: flex; align-items: center; padding: 0 16px 0 20px; font: 600 13px/1 var(--font-ui) !important; color: var(--text) !important;
}
html body #dc-root #socialmedia-container .sm-reviewer-chip.is-revogado .sm-reviewer-chip-nome { color: var(--text-3) !important; text-decoration: line-through; }
html body #dc-root #socialmedia-container .sm-reviewer-chip :is(.sm-reviewer-revoke, .sm-reviewer-restore) {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; height: 100% !important; 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 #socialmedia-container .sm-reviewer-chip :is(.sm-reviewer-revoke, .sm-reviewer-restore):hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-reviewer-chip :is(.sm-reviewer-revoke, .sm-reviewer-restore) svg { width: 16px !important; height: 16px !important; }

html body #dc-root #socialmedia-container .dl-editor-header .dt-pin-botao {
  order: 3; flex: none; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  width: 72px !important; height: auto !important; min-height: 0 !important; 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) !important; box-shadow: none !important;
  font: 600 10px/1 var(--font-ui) !important; letter-spacing: .12em; text-transform: uppercase;
}
html body #dc-root #socialmedia-container .dl-editor-header .dt-pin-botao:hover { background: var(--surface-2) !important; }
html body #dc-root #socialmedia-container .dl-editor-header .dt-pin-botao.esta-trancado { background: var(--chapa) !important; }
html body #dc-root #socialmedia-container .dl-editor-header .dt-pin-botao svg { width: 20px !important; height: 20px !important; }
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .dl-editor-header .dt-pin-botao { width: 56px !important; height: 72px !important; }
  html body #dc-root #socialmedia-container .sm-project-access > span:first-child { padding: 0 16px !important; }
}

/* --- Social: a trilha no idioma das bandas, e o conteúdo com recuo (17/09) ----
 * A trilha eram pílulas de 30px com setas e vão, soltas na banda de 56px —
 * a única faixa da tela que não era feita de células, e por isso nada nela
 * alinhava com as bandas de baixo. Agora: rótulo numa célula, e as cinco
 * etapas dividem a largura em células iguais, com fio claro entre elas; a
 * etapa em curso é preta. Continua sem rolar nem quebrar (abaixo de 1180px
 * fica ícone + contagem, como antes). A lista de conteúdos, que vinha colada
 * na borda, ganha os 25px de recuo dos vazios. */
html body #dc-root #socialmedia-container .sm-trilha {
  align-items: stretch !important; gap: 0 !important; padding: 0 !important; justify-content: flex-start !important;
}
html body #dc-root #socialmedia-container .sm-trilha-titulo {
  display: flex !important; align-items: center; padding: 0 20px; border-right: 1px solid var(--line);
  font: 600 10px/1 var(--font-ui) !important; letter-spacing: .12em !important; color: var(--text-3) !important;
}
html body #dc-root #socialmedia-container .sm-trilha-passo { flex: 1 1 0 !important; min-width: 0; display: flex !important; align-items: stretch !important; gap: 0 !important; }
html body #dc-root #socialmedia-container .sm-trilha-seta { display: none !important; }
html body #dc-root #socialmedia-container .sm-trilha-no {
  flex: 1 1 auto; min-width: 0; height: auto !important; justify-content: center; gap: 10px !important;
  margin: 0 !important; padding: 0 12px !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;
  font: 600 12.5px/1 var(--font-ui) !important;
}
html body #dc-root #socialmedia-container .sm-trilha-passo:last-child .sm-trilha-no { border-right: 0 !important; }
html body #dc-root #socialmedia-container button.sm-trilha-no:hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body #dc-root #socialmedia-container .sm-trilha-no.e-ativo { background: var(--text) !important; color: var(--bg) !important; }
html body #dc-root #socialmedia-container .sm-trilha-no.e-devolvido:not(.e-ativo) { box-shadow: inset 0 -2px 0 var(--danger-text) !important; }
html body #dc-root #socialmedia-container .sm-trilha-conta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px;
  border: 1px solid currentColor; opacity: .55; font: 600 10.5px/1 var(--font-ui) !important;
}
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-trilha-no { gap: 6px !important; padding: 0 4px !important; }
  html body #dc-root #socialmedia-container .sm-trilha-conta { min-width: 0; padding: 0 4px; }
}
html body #dc-root #socialmedia-container > .sm-toolbar ~ :not(.dt-faixa-vazia):not(.dt-vazio):not(.dt-empty-state) {
  margin-left: 25px !important; margin-right: 25px !important; margin-bottom: 25px !important;
}
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container > .sm-toolbar ~ :not(.dt-faixa-vazia):not(.dt-vazio):not(.dt-empty-state) { margin-left: 16px !important; margin-right: 16px !important; }
}
/* Os rótulos das três bandas (fluxo, revisores, planejamentos) têm a mesma
   largura: a primeira célula de conteúdo começa no mesmo x nas três. */
html body #dc-root #socialmedia-container :is(.sm-trilha-titulo, .sm-project-access > span:first-child, .sm-planning-label) {
  width: 210px !important; flex: none !important; box-sizing: border-box;
}
@media (max-width: 1179px) {
  html body #dc-root #socialmedia-container :is(.sm-project-access > span:first-child, .sm-planning-label) { width: auto !important; }
}
@media (max-width: 1179px) {
  html body #dc-root #socialmedia-container .sm-trilha-titulo { display: none !important; }
}
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-project-access > span:first-child {
    width: 56px !important; justify-content: center; padding: 0 !important; font-size: 0 !important; letter-spacing: 0 !important;
  }
}

/* --- Social: excluir, finalizar e a contagem no molde (17/09) ------------------
 * Eram os últimos diálogos do Social feitos à mão: raio 22, título vermelho,
 * três botões empilhados com vão, e a contagem numa bola. Agora usam a mesma
 * estrutura dos outros (topo, corpo de 20px, banda de 64px no pé com a ação
 * principal preta no canto). O aviso é uma faixa com fio, na chapa; quando é
 * perigo, só o texto leva a tinta de perigo. */
html body #dc-root .sm-system-dialog .sm-dialogo-aviso,
html body .sm-system-dialog .sm-dialogo-aviso {
  margin: 4px 0 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0; background: var(--chapa);
  font: 400 12.5px/1.5 var(--font-ui); color: var(--text);
}
html body .sm-system-dialog .sm-dialogo-aviso.is-perigo { color: var(--danger-text); }
html body .sm-system-dialog .sm-dialogo-aviso strong { font-weight: 700; color: inherit; }
html body .sm-system-dialog .sm-contagem {
  display: flex; align-items: center; justify-content: center; padding: 26px 0; margin: 0 0 6px;
  border: 1px solid var(--line); background: var(--chapa);
  font: 700 46px/1 var(--font-ui); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; color: var(--text);
}
/* Três ações no pé: a principal leva mais largura, para o rótulo inteiro caber. */
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button.dl-btn-primary:not(:only-child) { flex: 1.7 1 0 !important; }
html body :is(#dc-root .dl-modal-overlay, .dl-modal-overlay) .sm-system-dialog .dl-system-modal-body > .sm-modal-actions > button:has(> span) > span { white-space: nowrap; }

/* --- Social: uma grade só (17/09) ----------------------------------------------
 * Cada faixa tinha as próprias medidas, e nada se encaixava: as faixas de 56px
 * escorregavam 7px por linha contra as linhas de 49px da barra lateral, as
 * divisórias de planejamentos e de filtros caíam em lugares diferentes, e as
 * ações do topo não ficavam sob as células do trilho de cima. Agora:
 *
 *   linhas   — o cabeçalho tem 98px (2 × 49) e cada faixa tem 49px: toda
 *              linha horizontal continua uma linha da barra lateral;
 *   colunas  — a primeira coluna tem 210px (Voltar e todos os rótulos) e as
 *              células seguintes têm 160px, as mesmas em todas as faixas;
 *   direita  — Compartilhar, Ajustes e Novo conteúdo somam o trilho do topo
 *              (--casca-trilho): cada um cai sob a célula de cima; o PIN
 *              encosta à esquerda desse bloco.
 *
 * Onde a largura não comporta a grade inteira, as faixas voltam a ser
 * fluidas — alinhamento que empurra a busca para 0px não serve. */
#socialmedia-container { --sm-rotulo: 210px; --sm-celula: 160px; --sm-linha: 49px; }

html body #dc-root #socialmedia-container :is(.sm-trilha, .dl-editor-header > .sm-project-access, .sm-planning-bar) {
  height: var(--sm-linha) !important;
}
@media (min-width: 880px) {
  html body #dc-root #socialmedia-container .sm-toolbar { height: var(--sm-linha) !important; }
}
@media (max-width: 879px) {
  html body #dc-root #socialmedia-container .sm-toolbar :is(.sm-filter-block, .sm-toolbar-end) { height: var(--sm-linha) !important; }
}
@media (min-width: 880px) {
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block,
  html body #dc-root #socialmedia-container .sm-toolbar .sm-toolbar-end { height: 100% !important; }
}
html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> select) > .sm-group-title { top: 9px !important; }
html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop { padding-top: 16px !important; }

@media (min-width: 1180px) {
  html body #dc-root #socialmedia-container .dl-editor-header .dl-back-action { width: var(--sm-rotulo) !important; }
  /* O bloco da direita tem a largura do trilho do topo: 72 + 72 + o resto. */
  html body #dc-root #socialmedia-container .dl-editor-header .dl-btn-primary {
    width: calc(var(--casca-trilho, 400px) - 144px) !important; justify-content: center !important; padding: 0 16px !important;
  }
  /* Planejamentos e revisores: células de 160px depois do rótulo. */
  html body #dc-root #socialmedia-container .sm-planning-chip {
    width: var(--sm-celula) !important; min-width: 0; padding: 0 14px 0 20px !important; justify-content: space-between !important; overflow: hidden;
  }
  html body #dc-root #socialmedia-container .sm-planning-chip > :first-child { min-width: 0; }
  html body #dc-root #socialmedia-container .sm-planning-chip.sm-planning-new { justify-content: flex-start !important; gap: 8px !important; }
  html body #dc-root #socialmedia-container .sm-reviewer-chip { width: var(--sm-celula) !important; }
  html body #dc-root #socialmedia-container .sm-reviewer-chip-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; line-height: var(--sm-linha) !important; }
}
/* A barra de filtros entra na grade quando cabem rótulo + seis células + uma
   busca de pelo menos 240px: ganha a coluna de rótulo ("Visualização") e cada
   tela e cada menu viram uma célula de 160px, sob as de planejamento. */
@media (min-width: 1700px) {
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> .sm-view-group) > .sm-group-title {
    position: static !important; width: var(--sm-rotulo) !important; height: 100% !important; margin: 0 !important; clip: auto !important; overflow: visible !important;
    display: flex !important; align-items: center; padding: 0 20px !important; border-right: 1px solid var(--line) !important; box-sizing: border-box;
  }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> .sm-view-group) { flex-direction: row !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn { width: var(--sm-celula) !important; flex: none !important; justify-content: flex-start !important; padding: 0 20px !important; border-right: 1px solid var(--line) !important; }
  html body #dc-root #socialmedia-container .sm-toolbar select.sm-drop { width: var(--sm-celula) !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> select) { width: var(--sm-celula); }
}
/* A trilha: com espaço para duas células por etapa (320px), cada etapa ocupa
   exatamente duas colunas da grade; com menos, as cinco dividem a largura. */
@media (min-width: 2100px) {
  html body #dc-root #socialmedia-container .sm-trilha-passo { flex: 0 0 calc(var(--sm-celula) * 2) !important; }
  html body #dc-root #socialmedia-container .sm-trilha-passo:last-child .sm-trilha-no { border-right: 1px solid var(--line) !important; }
}
/* Acertos de 1px na grade: o bloco dos revisores trazia 16px de recuo de uma
   folha antiga, e a última tela da barra de filtros usava o fio do bloco, que
   cai 1px fora da coluna. */
html body #dc-root #socialmedia-container .sm-project-access > div { padding: 0 !important; }
@media (min-width: 1700px) {
  html body #dc-root #socialmedia-container .sm-toolbar .sm-filter-block:has(> .sm-view-group) { border-right: 0 !important; }
  html body #dc-root #socialmedia-container .sm-toolbar .sm-view-group .dl-filter-btn:last-child { border-right: 1px solid var(--line) !important; }
}
/* O revisor usa a classe dl-status-label, e a regra do cabeçalho dá 16px de
   margem a ela (é o selo "Compartilhado por…" da banda de 98px). */
html body #dc-root #socialmedia-container .dl-editor-header .sm-project-access .sm-reviewer-chip { margin: 0 !important; order: 0 !important; align-self: stretch !important; }

/* --- Tarefa aberta: corpo sem cartão e pé em células (17/09) --------------------
 * A tarefa ficava num cartão com 25px de margem dentro do diálogo: a borda dele
 * não coincidia com nada (nem com o fechar do topo), e a barra de rolagem
 * corria entre o cartão e a borda. O pé tinha botões de 34px soltos numa
 * faixa de 64px, em dois grupos. Agora o corpo encosta nas bordas, e o pé é a
 * banda de 64px com as ações em células coladas: raio, Editar, Excluir,
 * Arquivar e, no canto, Feito em preto. */
html body #dc-root .dt-view-modal .dt-view-main {
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 20px 20px 0 !important; background: var(--bg) !important;
}
html body #dc-root .dt-view-modal .dt-view-actions {
  display: flex !important; align-items: stretch !important; justify-content: flex-end !important; gap: 0 !important;
  height: 64px !important; margin: 0 !important; padding: 0 !important; flex-wrap: nowrap !important;
}
html body #dc-root .dt-view-modal .dt-view-actions > .dt-task-actions { display: contents !important; }
html body #dc-root .dt-view-modal .dt-view-actions button {
  flex: none; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  height: 100% !important; min-height: 0 !important; min-width: 64px; margin: 0 !important; padding: 0 22px !important;
  border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--text) !important; font: 600 13px/1 var(--font-ui) !important;
}
html body #dc-root .dt-view-modal .dt-view-actions button:hover { background: var(--surface-2) !important; }
html body #dc-root .dt-view-modal .dt-view-actions .dt-supertask-toggle { order: 1; }
html body #dc-root .dt-view-modal .dt-view-actions .dt-task-actions:not(.dt-acoes-feito) > .dt-acao-rotulo { order: 2; }
html body #dc-root .dt-view-modal .dt-view-actions .scpb { order: 3; }
html body #dc-root .dt-view-modal .dt-view-actions .dt-acoes-feito > .dt-acao-rotulo:not(.dt-acao-concluir) { order: 4; }
html body #dc-root .dt-view-modal .dt-view-actions .dt-acao-concluir {
  order: 5; min-width: 160px; background: var(--text) !important; color: var(--bg) !important;
}
html body #dc-root .dt-view-modal .dt-view-actions .dt-acao-concluir:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)) !important; }
@media (max-width: 560px) {
  html body #dc-root .dt-view-modal .dt-view-actions button { flex: 1 1 auto; min-width: 0; padding: 0 10px !important; }
  html body #dc-root .dt-view-modal .dt-view-actions .dt-acao-concluir { min-width: 0; }
}