/*
 * dk.css — design system no padrão DashboardKit / Datta Able
 * (openspec: remodelagem-visual-datta-able → remodelagem-integral-frontend).
 * Carregado DEPOIS de main.css (base legada + variáveis de tema, que não
 * mudam) e ANTES de tailwind.css. Só apresentação: cores vêm sempre das
 * variáveis do tema.
 */

/* ══════════════════════════════════════════════════════════════════════
   REMODELAGEM VISUAL — padrão DashboardKit / Datta Able
   (camada criada na remodelagem-visual-datta-able; a remodelagem integral
   reconstrói componentes e pode mudar o DOM, mas id, data-* e campos ficam)
   NENHUMA cor nova — tudo deriva das variáveis dos
   temas (--bg, --surface*, --border, --text*, --accent*, --green…).
   As medidas (raios, sombras, alturas, espaçamentos) seguem o template.
   Os utilitários próprios do Sabiá (.mb-8 = 8px etc.) não mudam de valor.
══════════════════════════════════════════════════════════════════════ */
:root {
  --topbar-h:  64px;
  --sidebar-w: 260px;
  --radius:    10px;
  --radius-sm: 6px;
  --dk-card-shadow: none;
  --dk-card-border: 1px solid var(--border);
  --dk-shell-shadow: 0 1px 20px 0 rgba(0, 0, 0, .25);
  --dk-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --dk-soft-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --dk-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-theme="light"] {
  --dk-card-shadow: 0 2px 6px -1px rgba(0, 0, 0, .10);
  --dk-card-border: 1px solid transparent;
  --dk-shell-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
  --dk-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --dk-soft-strong: color-mix(in srgb, var(--accent) 16%, transparent);
  --dk-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ── Tipografia: as famílias são as ORIGINAIS do main.css (DM Sans no corpo,
   Arial nos títulos, Syne nos títulos tw:font-display, Inter só em
   .formularios-skin, JetBrains Mono nos códigos). Aqui só tamanho e entrelinha. ── */
body { font-size: .875rem; line-height: 1.5; }
.page-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.2px; }
.page-subtitle { font-size: .85rem; margin-bottom: 24px; }

/* ── Shell (remodelagem integral, D6): pc-header + faixa da marca + pc-sidebar
   + page-header. Faixa da marca na cor institucional (--accent) no tema
   claro e no fundo mais escuro (--bg) no escuro — como a "brand" escura do
   template, sem cor nova. ── */
:root {
  --topbar-h: 70px;
  --dk-brand-bg: var(--bg);
  --dk-brand-fg: var(--text);
  --main-pad-y: 24px;
  --main-pad-x: 28px;
}
[data-theme="light"] { --dk-brand-bg: var(--accent); --dk-brand-fg: #fff; }

#topbar {
  background: var(--surface);
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--border);
  align-items: stretch;
  padding: env(safe-area-inset-top, 0px) 0 0;
}
.topbar-left {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--dk-brand-bg);
  padding: 0 20px; gap: 10px;
  transition: width .25s ease;
}
.topbar-left .logo { font-size: 1.05rem; letter-spacing: -.2px; color: var(--dk-brand-fg); }
.topbar-left .logo span { color: var(--dk-brand-fg); }
.logo img { width: 44px !important; height: 44px !important; }
.topbar-left .hamburger-btn { color: var(--dk-brand-fg); }
.topbar-left .hamburger-btn:hover { background: color-mix(in srgb, var(--dk-brand-fg) 14%, transparent); }

.topbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.topbar-main .topbar-right { margin-left: auto; gap: 10px; }
.topbar-icon-btn {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--text2); border-radius: var(--radius-sm);
  transition: background .2s, color .2s;
}
.topbar-icon-btn:hover { background: var(--dk-soft); color: var(--accent); }
.notif-btn.topbar-icon-btn { font-size: inherit; }
.notif-dot, .notif-count { border-color: var(--surface); }

.mode-switcher { border-radius: var(--radius-sm); padding: 3px; background: var(--surface2); }
.mode-btn { border-radius: 5px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; }

/* tema: ícones vetoriais na track e no knob (no lugar dos emojis do CSS legado) */
.theme-btn-track:has(.ico)::before, .theme-btn-track:has(.ico)::after { content: none; }
.theme-btn-track { color: var(--text3); }
.theme-btn-knob { color: #fff; }

/* ── Sidebar (pc-sidebar) ── */
#sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 0 0 24px rgba(27, 46, 94, .05);
  padding: 10px 0 24px;
  transition: transform .25s ease, var(--theme-transition);
}
[data-theme="light"] #sidebar { border-right-color: transparent; }
.sidebar-section { margin: 0 10px; }
.sidebar-label {                                /* pc-caption */
  font-size: .69rem; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); opacity: 1;
  padding: 22px 12px 8px; margin: 0;
}
.sidebar-section:first-of-type .sidebar-label,
.sidebar-mode-switcher + .sidebar-section .sidebar-label { padding-top: 10px; }
.nav-item {                                      /* pc-link */
  padding: 11px 16px; margin: 1px 0; gap: 14px;
  border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--text); box-shadow: none;
}
.nav-item .icon { width: 22px; display: inline-flex; justify-content: center; color: var(--text2); font-size: inherit; }
.nav-item .icon .ico { width: 18px; height: 18px; }
.nav-item:hover { background: var(--dk-soft); color: var(--accent); }
.nav-item:hover .icon { color: var(--accent); }
.nav-item.active,
[data-theme="light"] .nav-item.active {
  background: var(--dk-soft); color: var(--accent); font-weight: 600; box-shadow: none;
}
.nav-item.active .icon { color: var(--accent); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { border-radius: 10px; }
.sidebar-mode-switcher { margin: 6px 10px 4px; }
.sidebar-mode-switcher .mode-btn { justify-content: center; }

/* ── Conteúdo + page-header (breadcrumb) ── */
.main-content { padding: var(--main-pad-y) var(--main-pad-x); transition: margin-left .25s ease; }
#mainContent[data-crumb]::before {
  content: attr(data-crumb);
  display: block;
  margin: calc(var(--main-pad-y) * -1) calc(var(--main-pad-x) * -1) var(--main-pad-y);
  padding: 15px var(--main-pad-x);
  background: var(--surface);
  box-shadow: var(--dk-shell-shadow);
  font-size: .8rem; font-weight: 500; color: var(--text2);
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
}
.app-immersive #mainContent::before { display: none; }

/* desktop: sidebar recolhível (preferência em cc_sidebar) */
@media (min-width: 901px) {
  .hamburger-btn { display: none; }
  body.sidebar-recolhida #sidebar { transform: translateX(-100%); box-shadow: none; }
  body.sidebar-recolhida .main-content { margin-left: 0; }
  body.sidebar-recolhida .topbar-left { width: auto; }
}
@media (max-width: 900px) {
  .sidebar-collapse-btn { display: none; }
  .topbar-left { width: auto; flex: 0 1 auto; background: none; padding: 0 4px 0 12px; }
  .topbar-left .logo, .topbar-left .logo span { color: var(--accent); }
  .topbar-left .hamburger-btn { color: var(--text); }
  .topbar-left .hamburger-btn:hover { background: var(--surface2); }
  .topbar-main { padding: 0 12px 0 4px; gap: 8px; }
  #sidebar { padding-top: 12px; }
}
@media (max-width: 600px) {
  :root { --main-pad-y: 16px; --main-pad-x: 16px; }
  .topbar-left { padding-left: 8px; }
  .topbar-main { padding-right: 8px; }
  .topbar-main .topbar-right { gap: 4px; }
  .topbar-icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
  :root { --main-pad-y: 12px; --main-pad-x: 12px; }
}

/* ── Cards ── */
.card {
  border: var(--dk-card-border);
  border-radius: var(--radius);
  box-shadow: var(--dk-card-shadow);
  padding: 20px 22px;
}
.card:hover { border-color: var(--border); box-shadow: var(--dk-card-shadow); }
[data-theme="light"] .card { box-shadow: var(--dk-card-shadow); }
[data-theme="light"] .card:hover { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .12); border-color: transparent; }
.card[data-action]:hover, .card[style*="cursor:pointer"]:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.card-title { font-size: .95rem; font-weight: 600; margin-bottom: 14px; }
/* card-header: quando o título abre o card, a linha divisória ocupa a largura toda */
.card > .card-title:first-child {
  margin: -2px -22px 16px; padding: 0 22px 14px;
  border-bottom: 1px solid var(--border);
}
.stat-number { font-weight: 700; }

/* ── Badges ── */
.badge { border-radius: 6px; padding: 3px 8px; font-weight: 600; letter-spacing: .1px; }
.badge-blue, [data-theme="light"] .badge-blue { background: var(--dk-soft); color: var(--accent); }

/* ── Botões ── */
.btn { border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 500; line-height: 1.4; }
.btn:focus-visible { outline: none; box-shadow: var(--dk-focus); }
.btn-primary { box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); }
.btn-secondary:hover { background: var(--surface2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.btn-sm { padding: 5px 11px; font-size: .78rem; }

/* ── Campos ── */
.input { border-radius: var(--radius-sm); padding: 9px 13px; }
[data-theme="light"] .input { background: var(--surface); }
.input:focus, [data-theme="light"] .input:focus { border-color: var(--accent); box-shadow: var(--dk-focus); }
.form-label { font-weight: 500; color: var(--text2); }

/* ── Tabelas ── */
th { background: var(--surface2); color: var(--text2); font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
th:first-child { border-top-left-radius: var(--radius-sm); }
th:last-child  { border-top-right-radius: var(--radius-sm); }
td { color: var(--text); }
tr:hover td { background: var(--dk-soft); }

/* ── Abas ── */
.tabs { border-radius: var(--radius-sm); }
.tab { border-radius: 5px; }
.tab.active { box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--accent); }
.auth-tabs { border-radius: var(--radius-sm); }
.auth-tab { border-radius: 5px; }

/* ── Modais ── */
.modal { border-radius: 12px; padding: 24px 26px; }
.modal-title { font-size: 1.05rem; font-weight: 700; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.modal-close { top: 18px; right: 18px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--surface2); }

/* ── Opções de voto, avisos e afins ── */
.vote-option { border-radius: var(--radius-sm); }
.vote-option:hover { background: var(--dk-soft); }
.vote-option.selected { background: var(--dk-soft-strong); }
.vote-option.selected .vote-radio { box-shadow: 0 0 0 3px var(--dk-soft-strong); }
.announcement { background: var(--dk-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.chamado-item { border-radius: var(--radius-sm); }
.chamado-item:hover, .chamado-item.selected { background: var(--dk-soft); }
.status-pending { border-radius: var(--radius-sm); }
details { border-radius: var(--radius-sm); }

/* ── Estados ── */
.empty-state { padding: 48px 20px; }
.empty-state .icon { font-size: 2.6rem; opacity: .9; }
#toast { border-radius: var(--radius-sm); border-left-width: 4px; }

/* ── Autenticação e páginas públicas ── */
.auth-card { border-radius: 14px; border: var(--dk-card-border); box-shadow: var(--dk-card-shadow); }
[data-theme="light"] .auth-card { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .14); }

/* ── Mobile: mantém os ajustes originais com as novas medidas ── */
@media (max-width: 600px) {
  .logo img { width: 36px !important; height: 36px !important; }
  .card { padding: 16px; }
  .card > .card-title:first-child { margin: -2px -16px 14px; padding: 0 16px 12px; }
  .modal { padding: 20px 18px; }
}

/* ── Fase 2 — módulos do portal ────────────────────────────────────────── */
/* Cabeçalho de card de lista (título + ação na mesma linha): divisória de
   ponta a ponta, como o .card-header do template */
.card > .flex.justify-between:first-child:has(> .card-title) {
  margin: -4px -22px 16px; padding: 0 22px 12px;
  border-bottom: 1px solid var(--border);
}
.card > .flex.justify-between:first-child:has(> .card-title) > .card-title { margin-bottom: 0; }

/* Widget de estatística (Dashboard, Transparência, painéis): rótulo
   discreto em caixa alta, valor em destaque e faixa inferior na cor de
   destaque do tema */
.stat-label { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 600; color: var(--text2); }
.stat-number { font-size: 1.75rem; line-height: 1.2; margin-top: 6px; }
.card:has(> .stat-label:first-child) { position: relative; overflow: hidden; }
.card:has(> .stat-label:first-child)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width: 600px) {
  .card > .flex.justify-between:first-child:has(> .card-title) { margin: -4px -16px 14px; padding: 0 16px 12px; }
}

/* ── Fase 3 — módulos de gestão ────────────────────────────────────────── */
/* Item flex sem min-width cresce com o conteúdo: tabelas largas (Moradores,
   Logs…) estouravam a página. Com min-width:0 elas rolam dentro do próprio
   .table-wrap, como no template. */
.main-content { min-width: 0; }

/* ── Fase 4 — autenticação e páginas públicas ──────────────────────────── */
/* Cabeçalho das páginas públicas (/v/, /e/, verificação, ativação): título
   do condomínio em escala de cabeçalho, subtítulo em texto corrido. */
.auth-logo h2 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; }
.auth-logo p  { font-weight: 500; }
/* Links dentro do card seguem a cor de destaque do tema (antes: azul padrão) */
.auth-card a:not(.btn) { color: var(--accent); font-weight: 500; text-underline-offset: 2px; }
@media (max-width: 600px) {
  /* seletor de tema da tela de login não sobrepõe o card */
  #authScreen:has(> .auth-theme-btn) { padding-top: 68px; }
}
@media (max-width: 400px) {
  /* o botão do Google (300px fixos) cabe no card em telas de 360–400px */
  .auth-card { padding: 28px 16px; }
}
/* Banner de cookies como card flutuante (mesmo texto, botões e comportamento) */
#cookieBanner { left: 16px; right: 16px; bottom: 16px; max-width: 960px; margin: 0 auto; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--dk-card-shadow), 0 12px 32px -12px rgba(0, 0, 0, .25); }
@media (max-width: 600px) { #cookieBanner { left: 8px; right: 8px; bottom: 8px; } .cookie-banner-inner { padding: 14px 16px; gap: 14px; } }

/* ── Encerramento — responsividade a 360px ─────────────────────────────── */
/* Itens de grid não crescem além da coluna pelo conteúdo (cards de votação
   com fileira de botões estouravam 3px a 360px). */
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
@media (max-width: 600px) {
  /* Abas da Config. de E-mails (5 abas) quebram linha em vez de estourar a página */
  #emailCfgRoot > .tabs, #waCfgRoot > .tabs { flex-wrap: wrap; }
}

/* ── Ícones vetoriais (remodelagem-integral-frontend) ──────────────────────
   Sprite /icons/sprite.svg (Feather, MIT). Traço 2 e cor do texto: o mesmo
   desenho acompanha o tema claro/escuro sem cor própria. */
.ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -.15em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 14px; height: 14px; }
.ico-lg { width: 20px; height: 20px; }
.ico-xl { width: 40px; height: 40px; stroke-width: 1.5; }
/* logo sobre a faixa escura da marca: disco claro para manter o contraste */
.topbar-left .logo img { background: #fff; border-radius: 50%; padding: 2px; }
@media (min-width: 901px) {
  body.sidebar-recolhida .topbar-left .logo span { display: none; }
}

/* ── Componentes reconstruídos (remodelagem integral, D8) ──────────────── */
/* Card com cabeçalho e corpo (card-header / card-body do template) */
.card:has(> .card-header) { padding: 0; }
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.card-header .card-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.card-header .card-title .ico { color: var(--accent); }
.card-body { padding: 20px 22px; }
.card-title .ico { color: var(--accent); }

/* Widget de indicador: ícone em bloco suave + rótulo + valor */
.stat-icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--dk-soft); color: var(--accent);
}
.stat-icon .ico { width: 22px; height: 22px; }
.stat-icon.ok     { background: color-mix(in srgb, var(--green) 14%, transparent);  color: var(--green); }
.stat-icon.warn   { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.stat-icon.danger { background: color-mix(in srgb, var(--red) 14%, transparent);    color: var(--red); }
.stat-icon.info   { background: color-mix(in srgb, var(--accent2) 14%, transparent); color: var(--accent2); }

/* Botões com ícone e botão só com ícone */
.btn .ico { margin: 0 -1px; }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 30px; height: 30px; }
.mode-btn .ico, .tab .ico, .auth-tab .ico { margin-right: 2px; }
.tab { display: inline-flex; align-items: center; gap: 6px; }

/* Modal: título com divisória, fechar como botão de ícone, rodapé de ações */
.modal-close {
  top: 14px; right: 14px; width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--surface2); }
.modal-footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  margin: 20px -26px -24px; padding: 14px 26px;
  border-top: 1px solid var(--border);
}

/* Toast: ícone por tipo + texto */
#toast { display: flex; align-items: flex-start; gap: 10px; }
#toast .ico { margin-top: 1px; color: var(--accent2); }
#toast.success .ico { color: var(--green); }
#toast.error .ico   { color: var(--red); }
#toast.warn .ico    { color: var(--yellow); }

/* Carregamento: spinner no lugar do emoji */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dk-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: dk-giro .8s linear infinite;
}
@keyframes dk-giro { to { transform: rotate(360deg); } }

/* Estado vazio com ícone vetorial */
.empty-state .icon { color: var(--text3); opacity: 1; line-height: 0; }
.empty-state .icon .ico-xl { width: 44px; height: 44px; }

/* FilterPanel: rótulo com ícone e seta vetorial */
.filter-panel-label { display: inline-flex; align-items: center; gap: 8px; }
.filter-panel-arrow { display: inline-flex; }

/* Avisos de rodapé (offline, atualização, instalar) e chips com ícone */
#offlineBanner .ico, #updateBanner .ico, #pwaInstallBtn .ico { margin-right: 6px; vertical-align: -.2em; }
.ums-chip-x { display: inline-flex; align-items: center; justify-content: center; }
.cookie-close-btn { display: inline-flex; align-items: center; }

@media (max-width: 600px) {
  .card-header { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .modal-footer { margin: 16px -18px -20px; padding: 12px 18px; }
}

/* Fileiras só de botões quebram linha (os ícones aumentaram a largura dos
   botões; nada pode empurrar a página para os lados a 360/768px) */
.flex:has(> .btn):not(:has(> :not(.btn))) { flex-wrap: wrap; }

/* Ícone acompanha o tamanho do texto, como o emoji que substituiu (título
   grande → ícone grande; estado vazio → ícone grande). Classes de tamanho
   (ico-sm/lg/xl) e os ícones do shell continuam com medida fixa. */
.ico:where(:not(.ico-sm, .ico-lg, .ico-xl)) { width: 1.15em; height: 1.15em; }
.page-title .ico { color: var(--accent); margin-right: 2px; }
.empty-state .icon .ico { width: 44px; height: 44px; stroke-width: 1.5; }
.stat-number .ico { width: .9em; height: .9em; color: var(--accent); }

/* ── Fase 4 — gestão ─────────────────────────────────────────────────────
   Ponto de status (no lugar das bolinhas coloridas): a cor vem do tema. */
.dk-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; vertical-align: .08em; margin-right: 2px; flex-shrink: 0; }
.dk-dot-red    { background: var(--red); }
.dk-dot-orange { background: var(--orange); }
.dk-dot-yellow { background: var(--yellow); }
.dk-dot-green  { background: var(--green); }
.dk-dot-gray   { background: var(--text3); }
.dk-dot-light  { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text3); }
.dk-dot-accent { background: var(--accent); }
/* seta de ordenação no cabeçalho da tabela */
th .ico { vertical-align: -.2em; margin-left: 2px; color: var(--accent); }

/* ── Documentos no celular (openspec documentos-mobile) ──────────────────── */
/* Pastas: uma estrutura, duas apresentações. Desktop = fileira de fichas
   (como antes, mas o nome longo quebra linha em vez de estourar). */
.doc-pastas-toggle { display: none; }
.doc-pasta { max-width: 100%; white-space: normal; text-align: left; }
.doc-pasta-nome { overflow-wrap: anywhere; }
.doc-pasta .doc-pasta-ico { flex-shrink: 0; }
.doc-pasta-sub { font-size: .78rem; }

@media (max-width: 768px) {
  /* painel recolhível estilo explorador */
  .doc-pastas-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 12px 16px; cursor: pointer; text-align: left;
    background: var(--surface); color: var(--text); font: inherit;
    border: var(--dk-card-border); border-radius: var(--radius); box-shadow: var(--dk-card-shadow);
  }
  .doc-pastas-toggle-txt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .doc-pastas-toggle-txt > span { min-width: 0; overflow-wrap: anywhere; }
  .doc-pastas-toggle .ico { color: var(--accent); }
  .doc-pastas-seta { transition: transform .2s ease; color: var(--text3) !important; }
  #pastasNav.aberto .doc-pastas-seta { transform: rotate(180deg); }
  #pastasNav.aberto .doc-pastas-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

  .doc-pastas { display: none; }
  #pastasNav.aberto .doc-pastas {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border: var(--dk-card-border); border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--dk-card-shadow);
    padding: 6px; max-height: 60vh; overflow-y: auto;
  }
  .doc-pastas-rotulo { display: none; }
  .doc-pastas .doc-pasta {
    width: 100%; justify-content: flex-start; gap: 12px;
    background: transparent; border: none; border-radius: var(--radius-sm);
    padding: 11px 12px; font-size: .9rem; min-height: 44px; color: var(--text);
  }
  .doc-pastas .doc-pasta .doc-pasta-ico { color: var(--text2); width: 18px; height: 18px; }
  .doc-pastas .doc-pasta-sub { padding-left: 34px; font-size: .86rem; }
  .doc-pastas .doc-pasta.active { background: var(--dk-soft); color: var(--accent); font-weight: 600; }
  .doc-pastas .doc-pasta.active .doc-pasta-ico { color: var(--accent); }

  /* "Ver" em tela cheia, ajustado à largura */
  .modal-doc-fullscreen.modal-overlay { align-items: stretch; }
  .modal-doc-fullscreen .modal {
    width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: none; padding: 16px; overflow-x: hidden; overflow-y: auto;
  }
  .modal-doc-fullscreen .modal-title { padding-right: 44px; overflow-wrap: anywhere; }
  .modal-doc-fullscreen #imgViewer { width: 100%; height: auto; max-height: none !important; touch-action: pinch-zoom; cursor: default !important; }
  .modal-doc-fullscreen video { max-height: 70dvh !important; }
}

/* Download: barra de progresso e estado de carregamento do botão */
.doc-download-nome { font-weight: 600; margin-bottom: 12px; overflow-wrap: anywhere; }
.doc-download-barra { height: 10px; margin-bottom: 10px; }
.doc-download-barra .progress-fill { background: var(--accent); transition: width .15s linear; }
.doc-download-barra.indeterminada .progress-fill { width: 35% !important; animation: dk-indeterminada 1.1s ease-in-out infinite; }
@keyframes dk-indeterminada { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.btn.btn-carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn.btn-carregando .ico { opacity: 0; }
.btn.btn-carregando::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent);
  animation: dk-giro .8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLA — indicador de urgência (openspec kanban-mural-arquivos-publicos)
   Transcrição de alerta-pulsante.html (referência do solicitante): ponto
   central sólido, dois halos defasados de meio ciclo, transparência
   progressiva. A cor fixa da referência dá lugar aos tokens do tema, e a
   intensidade (n1..n4) cresce com a urgência — n3 é a referência exata.
   ═══════════════════════════════════════════════════════════════════════════ */
.sla-ind {
  --sla-cor: var(--text3);
  --sla-dot: 24px;
  --sla-pulse: 54px;
  --sla-duracao: 1.8s;
  --sla-escala: 1.55;
  --sla-op: .72;
  --sla-estatico: .22;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text2); font-size: .82rem; line-height: 1.2; vertical-align: middle;
}
.sla-ind--compacto { --sla-dot: 10px; --sla-pulse: 22px; gap: 4px; font-size: .75rem; }
.sla-ind__pulse {
  position: relative; flex: none;
  width: var(--sla-pulse); height: var(--sla-pulse);
  display: grid; place-items: center; isolation: isolate;
  color: var(--sla-cor);
}
.sla-ind__dot {
  width: var(--sla-dot); height: var(--sla-dot); border-radius: 50%;
  background: var(--sla-cor);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sla-cor) 4%, transparent);
}
.sla-ind__label { white-space: nowrap; }

/* Cores por situação (tokens do tema; claro e escuro) */
.sla-ind--verde    { --sla-cor: var(--green); }
.sla-ind--amarelo  { --sla-cor: var(--yellow); }
.sla-ind--laranja  { --sla-cor: var(--orange); }
.sla-ind--vermelho { --sla-cor: var(--red); }
.sla-ind--laranja .sla-ind__label, .sla-ind--vermelho .sla-ind__label { color: var(--sla-cor); font-weight: 600; }
.sla-ind--concluida_no_prazo   { --sla-cor: var(--green); }
.sla-ind--concluida_fora_prazo { --sla-cor: var(--red); }

/* Halos: só existem com intensidade ≥ 1 (laranja e vermelho) */
.sla-ind--n1 .sla-ind__pulse::before, .sla-ind--n1 .sla-ind__pulse::after,
.sla-ind--n2 .sla-ind__pulse::before, .sla-ind--n2 .sla-ind__pulse::after,
.sla-ind--n3 .sla-ind__pulse::before, .sla-ind--n3 .sla-ind__pulse::after,
.sla-ind--n4 .sla-ind__pulse::before, .sla-ind--n4 .sla-ind__pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--sla-cor) 42%, transparent);
  z-index: -1; transform: scale(.42); opacity: 0;
  animation: sla-pulse var(--sla-duracao) ease-out infinite;
}
.sla-ind__pulse::after { animation-delay: calc(var(--sla-duracao) / 2) !important; }

/* Intensidade proporcional à urgência (design §6) */
.sla-ind--n1 { --sla-duracao: 2.6s; --sla-escala: 1.20; --sla-op: .45; --sla-estatico: .12; }
.sla-ind--n2 { --sla-duracao: 2.2s; --sla-escala: 1.38; --sla-op: .58; --sla-estatico: .16; }
.sla-ind--n3 { --sla-duracao: 1.8s; --sla-escala: 1.55; --sla-op: .72; --sla-estatico: .22; }
.sla-ind--n4 { --sla-duracao: 1.1s; --sla-escala: 1.75; --sla-op: .88; --sla-estatico: .30; }

@keyframes sla-pulse {
  0%   { transform: scale(.42); opacity: var(--sla-op); }
  75%  { opacity: calc(var(--sla-op) / 6); }
  100% { transform: scale(var(--sla-escala)); opacity: 0; }
}

/* Movimento reduzido: halo estático, mais opaco quanto maior a urgência */
@media (prefers-reduced-motion: reduce) {
  .sla-ind .sla-ind__pulse::before, .sla-ind .sla-ind__pulse::after {
    animation: none !important; transform: scale(1); opacity: var(--sla-estatico);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Kanban (openspec kanban-mural-arquivos-publicos) — cards, colunas e modais
   do padrão existente; só a grade do quadro e o arrastar são novos.
   ═══════════════════════════════════════════════════════════════════════════ */
.kb-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.kb-area-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kb-area-encerrada { opacity: .82; }
.kb-area-desc { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kb-area-contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kb-area-contagem > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-sm); background: var(--surface2); text-align: center; }
.kb-area-num { font-family: 'Arial', sans-serif; font-weight: 700; font-size: 1.15rem; }
.kb-area-acoes { flex-wrap: wrap; margin-top: auto; }
.kb-area-ordem { margin: 0; }
.kb-area-ordem .input { padding-top: 6px; padding-bottom: 6px; font-size: .82rem; }

.kb-tabs { display: none; margin-bottom: 16px; }
.kb-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kb-col { background: var(--surface2); border: var(--dk-card-border); border-radius: var(--radius); padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-col-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; }
.kb-col-qtd { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface3); color: var(--text2); font-size: .72rem; text-align: center; }
.tab .kb-col-qtd { margin-left: 4px; }
.kb-cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.kb-col-vazia { padding: 16px 4px; text-align: center; }

.kb-card { background: var(--surface); border: var(--dk-card-border); border-radius: var(--radius-sm); box-shadow: var(--dk-card-shadow); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kb-board:not(.kb-board-leitura) .kb-card { cursor: grab; }
.kb-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.kb-card-abrir { all: unset; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.kb-card-abrir:focus-visible { outline: none; box-shadow: var(--dk-focus); border-radius: 4px; }
.kb-card-titulo { font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; }
.kb-card-resumo { font-size: .8rem; color: var(--text2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card-meta, .kb-card-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .75rem; color: var(--text2); }
.kb-card-rodape { justify-content: space-between; }
.kb-card-sub, .kb-card-prazo, .kb-card-resp { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.kb-card-resp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.kb-card .btn-sm.kb-mover { padding: 4px 6px; }

/* Concluída: texto rasurado */
.kb-concluida .kb-card-titulo, .kb-concluida .kb-card-resumo,
.kb-sub.kb-concluida .kb-sub-titulo { text-decoration: line-through; color: var(--text2); }

/* Arrastar */
.kb-marcador { border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-sm); background: var(--dk-soft); }
.kb-arrastando { display: none !important; }
.kb-fantasma { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; opacity: .92; box-shadow: 0 12px 28px -8px rgba(0,0,0,.35); transform-origin: 0 0; }
body.kb-dragging, body.kb-dragging * { cursor: grabbing !important; user-select: none; }
.kb-mover-lista { display: grid; gap: 8px; }
.kb-mover-lista .btn { justify-content: flex-start; }

/* Detalhe da tarefa */
.kb-det-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.kb-det-sla { margin-bottom: 14px; }
.kb-det-aviso { margin-bottom: 14px; }
.kb-det-secao { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.kb-det-secao-titulo { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.kb-subs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kb-sub { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kb-sub-check { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.kb-sub-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-sub-titulo { font-size: .88rem; overflow-wrap: anywhere; cursor: pointer; }
.kb-sub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kb-sub-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.kb-config-amostra { margin-top: 8px; }
.kb-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kb-hist-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px; }
.kb-hist-mudancas { margin: 4px 0 0; padding-left: 18px; overflow-wrap: anywhere; }

@media (max-width: 1100px) and (min-width: 769px) {
  .kb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kb-areas { grid-template-columns: 1fr; }
  .kb-tabs { display: flex; overflow-x: auto; }
  .kb-board { grid-template-columns: 1fr; }
  .kb-col { display: none; background: transparent; border: none; padding: 0; }
  .kb-col.kb-col-ativa { display: flex; }
  .kb-col-head { display: none; }
  .kb-area-contagem { grid-template-columns: repeat(2, 1fr); }
  .kb-card-resp { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mural Público (openspec kanban-mural-arquivos-publicos) — mesma identidade:
   faixa da marca como a topbar do app, cards, abas, badges e o indicador de
   SLA compartilhados; navegação simplificada para moradores.
   ═══════════════════════════════════════════════════════════════════════════ */
.mural-body { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.mural-topo {
  position: sticky; top: 0; z-index: 100;
  background: var(--dk-brand-bg); color: var(--dk-brand-fg);
  box-shadow: 0 1px 0 0 var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}
.mural-topo-inner { max-width: 1200px; margin: 0 auto; height: var(--topbar-h); padding: 0 var(--main-pad-x); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mural-marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.mural-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 50%; flex: none; }
.mural-marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mural-marca-texto strong { font-family: 'Arial', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.2px; }
.mural-marca-texto span { font-size: .78rem; opacity: .85; }
.mural-main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--main-pad-y) var(--main-pad-x); outline: none; }
.mural-rodape { max-width: 1200px; margin: 0 auto; padding: 16px var(--main-pad-x) 24px; text-align: center; }
.mural-abas { margin-bottom: 20px; }
.mural-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 14px 16px; margin-bottom: 16px; }
.mural-filtros > .form-group:first-child { min-width: 220px; }
.mural-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mural-area-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.mural-contagem { margin: 0 0 10px; }
.mural-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.mural-tarefa { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mural-tarefa-area { display: flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.mural-mais { display: flex; justify-content: center; margin-top: 16px; }
.mural-det-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin: 12px 0; }
.mural-det-dados dt { font-size: .72rem; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.mural-det-dados dd { margin: 2px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.mural-det-resumo { margin: 0 0 4px; overflow-wrap: anywhere; }
.mural-det-desc { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: .9rem; }
.mural-sub-marca { display: inline-flex; margin-top: 2px; color: var(--text2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
  .mural-topo-inner { padding: 0 16px; }
  .mural-main { padding: 16px; }
  .mural-grade { grid-template-columns: 1fr; }
  .mural-filtros > .form-group:first-child { min-width: 0; width: 100%; }
  .mural-marca-texto strong { font-size: .95rem; }
}

/* Mural: "Como ler os prazos e as cores" (details nativo, acessível sem JS) */
.mural-como-ler { padding: 0; margin-bottom: 16px; }
.mural-como-ler > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 8px; list-style: none; }
.mural-como-ler > summary::-webkit-details-marker { display: none; }
.mural-como-ler > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--text2); border-bottom: 2px solid var(--text2); transform: rotate(45deg); transition: transform .2s; }
.mural-como-ler[open] > summary::after { transform: rotate(-135deg); }
.mural-como-ler-corpo { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; color: var(--text2); line-height: 1.55; }
.mural-como-ler-corpo p { margin: 0; }
.mural-como-ler-corpo strong { color: var(--text); }
.mural-como-ler-cores { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mural-como-ler-cores li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-ajuda-prazo { display: flex; gap: 6px; align-items: flex-start; margin: -4px 0 12px; line-height: 1.5; }
.kb-ajuda-prazo .ico { flex: none; margin-top: 2px; }
.kb-aviso-estimativa { display: inline-flex; color: var(--orange); }

/* Mural: seções e atraso (openspec mural-ordenacao-tarefas) */
.mural-secao { display: flex; align-items: center; gap: 8px; font-family: 'Arial', sans-serif; font-size: .95rem; font-weight: 600; margin: 18px 0 10px; color: var(--text); }
.mural-secao:first-of-type { margin-top: 4px; }
.mural-atraso { display: flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; }

/* Mural: resumo expansível no cartão */
.mural-tarefa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mural-resumo { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mural-resumo[hidden] { display: none; }
.mural-resumo-desc { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--text2); }
.mural-resumo-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mural-resumo-etapas li { display: flex; align-items: center; gap: 8px; font-size: .84rem; min-width: 0; }
.mural-resumo-etapas .kb-sub-titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: default; }
.mural-resumo-etapas li.kb-concluida .kb-sub-titulo { text-decoration: line-through; color: var(--text2); }
/* Etapa no mural: mesmo formato da linha de subtarefa da gestão, com um
   marcador visual (não interativo) no lugar do checkbox */
.mural-etapas { margin-top: 2px; }
.mural-etapa-marca {
  flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px;
  border: 1.5px solid var(--border); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.mural-etapa-marca.feita { background: var(--accent); border-color: var(--accent); }
.mural-etapa-marca .ico { width: 12px; height: 12px; stroke-width: 3; }
.mural-etapa .kb-sub-titulo { cursor: default; }