/* Certifico — Design tokens + base styles */

/* Fontes: o @import do Google Fonts que vivia aqui foi REMOVIDO em 13/07 —
   Montserrat + Inter agora são VENDORIZADAS (libs/fonts.css + libs/fonts/,
   carregadas pelo index.html). O app de campo não depende de CDN pra
   tipografia da marca. */

:root {
  /* Light palette — "Cartório Digital" */
  /* EXPERIMENTO 2026-07-02 (pedido do Orlando): tirar as linhas de contorno,
     separar por FUNDO/sombra em vez de moldura, cores um pouco mais fortes.
     Se não aprovar, reverter só este bloco :root + .dark pros valores antigos
     (comentados ao lado de cada linha alterada). */
  /* BUG 29/07 (Android nativo: "modo escuro vai mas não volta") — o app
     SEMPRE pinta explicitamente via estas variáveis (nunca delega ao SO por
     prefers-color-scheme), então declarar color-scheme aqui é só uma
     confirmação honesta pro motor de renderização: "esta página já cuida da
     própria paleta". Casa 1:1 com a classe .dark (escolha manual do
     usuário, não do sistema) — não muda NENHUMA cor de conteúdo (100%
     controlado pelas variáveis acima/abaixo); só evita que WebView/navegador
     tente "ajudar" escurecendo por cima quando o SO está em dark e o app
     está em claro (ou vice-versa). Zero efeito visual no Chrome/Safari
     (scrollbars/form controls já renderizam no claro hoje). */
  color-scheme: light;
  --bg: #F3F5F9;             /* fundo da página c/ leve frio-azulado (era #FFFFFF) — cria contraste de superfície com os cards brancos */
  --bg-2: #E8ECF2;           /* (era #ECEEF2) */
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --border: #EBEFF4;         /* quase-invisível — era #CFD6E0 (linha "riscada") */
  --border-strong: #E3E8EF;  /* era #B6BFCB — só pro pouquíssimo que precisa de um traço perceptível (ex. dashed de upload) */
  --divider: #EEF1F5;        /* divisórias de lista discretas — era #DEE4EC */
  --text: #0A0F1A;
  --text-2: #4A5568;
  --text-3: #8593A4;
  --text-on-brand: #FFFFFF;
  --r: 8px;                  /* raio padrão de botões/cards (faltava — var(--r) virava 0/quadrado) */

  --brand: #1E3A5F;
  --brand-hover: #15294A;
  --brand-tint: #E4EDF7;        /* um pouco mais rico — era #EAF0F7 */
  --brand-tint-strong: #CADCEF; /* era #D6E2F0 */

  --success: #1C7A3C;           /* levemente mais cheio — era #1F7A3D */
  --success-tint: #DFF1E6;      /* era #E5F2EA */
  --warning: #B25F0A;           /* era #B6620C */
  --warning-tint: #FAEDD8;      /* era #FBF1E0 */
  --danger: #B01B1B;            /* era #B41E1E */
  --danger-tint: #FBE4E4;       /* era #FCEAEA */

  --shadow-sm: 0 1px 2px rgba(30,58,95,0.05);   /* sombra leve substitui a borda do .card — era 0 1px 0 rgba(15,23,42,0.04) */
  --shadow-md: 0 4px 14px rgba(30,58,95,0.08);  /* era 0 4px 12px rgba(15,23,42,0.06) */

  /* U1 — curva "elástica" discreta (overshoot ~2-3%, não gelatina) usada nos
     recolhíveis/trocas de aba do desktop. Duração fica em cada regra (~.32-.38s). */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark {
  /* Ver comentário no :root acima (BUG 29/07) — mesma lógica, casando com
     a escolha manual do usuário quando o app está em escuro. */
  color-scheme: dark;
  --bg: #0B1015;
  --bg-2: #060A0F;
  --surface: #141A22;
  --surface-2: #1B232E;
  --border: #202836;         /* quase-invisível no escuro — era #354156 */
  --border-strong: #2B3444;  /* era #475873 */
  --divider: #232B39;        /* era #2A3344 */
  --text: #ECF0F5;
  --text-2: #A0AEC0;
  --text-3: #6B7990;
  --text-on-brand: #FFFFFF;

  --brand: #6F9DD4;
  --brand-hover: #87B0E0;
  --brand-tint: rgba(111,157,212,0.16);        /* era 0.14 */
  --brand-tint-strong: rgba(111,157,212,0.25); /* era 0.22 */

  --success: #37BE68;            /* HARMONIA 26/07: era #4ADE80 (S69% neon) — dessaturado p/ S55%/L48%, deixa de "gritar" no escuro sem perder legibilidade (contraste texto ainda 7.9:1) */
  --success-tint: rgba(55,190,104,0.14);   /* acompanha o novo --success */
  --warning: #E6A219;            /* HARMONIA 26/07: era #FBBF24 (S96% néon-amarelo) — dessaturado p/ S80%/L50%, tom mais "âmbar" que "post-it" */
  --warning-tint: rgba(230,162,25,0.14);   /* acompanha o novo --warning */
  --danger: #E25450;             /* HARMONIA 26/07: era #F87171 (S91%) — dessaturado p/ S72%/L60%, menos "vermelho de alarme" berrante; ganha bônus: texto branco sobre --danger sólido (botões .dk-baixa-neg) sobe de 2.77:1 p/ 3.74:1 */
  --danger-tint: rgba(226,84,80,0.14);   /* acompanha o novo --danger */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
}

/* ── App shell ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;   /* endurecimento 2026-07-05: no html TAMBÉM (não só body) — o
                                   elástico de sistema do WKWebView é do documento como um todo;
                                   ver body{position:fixed} logo abaixo pra fechar o cerco. */
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Prende o app exatamente na área visível (evita "maior que a tela" no WebView iOS).
   html E body ficam fixed+inset:0 — dobrado de propósito (endurecimento 2026-07-05):
   no WKWebView do Capacitor o "elástico" (bounce/rubber-band) é do UIScrollView por
   trás do documento; travar só o body às vezes não basta se o html ainda participa
   do cálculo de scroll do sistema. Com os dois fixos, não sobra NENHUM scroller de
   página pro dedo "puxar" — todo gesto de rolagem passa a ser absorvido pelos
   .scroll internos de cada tela (único overflow:auto do app). */
html {
  position: fixed;
  inset: 0;
}
body {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* Phone screen base */
.scr {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }

/* Type */
.font-display { font-family: 'Montserrat', sans-serif; }
.font-mono { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text); }
.label-xs { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3); }
.label-sm { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.body { font-size: 14px; color: var(--text); line-height: 1.45; }
.body-sm { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.body-xs { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.num { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
/* Spinner do splash (loader normal abaixo da logo) */
.splash-spin { width: 34px; height: 34px; border: 3px solid rgba(140,150,170,.28); border-top-color: var(--brand); border-radius: 50%; animation: spinRot .8s linear infinite; }
@keyframes spinRot { to { transform: rotate(360deg); } }

/* Status text — color + uppercase + letter-spacing, NO pills */
.status-text { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.status-text::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-pending { color: var(--warning); }
.status-done { color: var(--success); }
.status-fail { color: var(--danger); }
.status-info { color: var(--text-2); }
.status-text.no-dot::before { display: none; }

/* Buttons — rectangular, never round */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 16px; border-radius: 8px; border: none; cursor: pointer; transition: all .12s; line-height: 1; min-height: 44px; }
.btn-primary { background: var(--brand); color: var(--text-on-brand); font-family: 'Montserrat', sans-serif; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary { background: color-mix(in srgb, var(--text-3) 16%, var(--bg)); color: var(--text); border: none; }
.btn-secondary:hover { background: color-mix(in srgb, var(--text-3) 26%, var(--bg)); }
.btn-ghost { background: color-mix(in srgb, var(--text-3) 10%, var(--bg)); color: var(--text); border: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--text-3) 20%, var(--bg)); }
.btn-danger { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); color: var(--danger); border: none; }
.btn-tinted { background: var(--brand-tint); color: var(--brand); border: none; font-size: 12px; }
.btn-tinted:hover { background: var(--brand-tint-strong); }
/* Variante vermelha do tinted (mesma intensidade, cor de urgência) */
.btn-tinted-danger { background: var(--danger-tint); color: var(--danger); border: none; font-size: 12px; }
.btn-tinted-danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); }
/* Variante verde do tinted (um pouco mais forte — ação de subir mandados) */
.btn-tinted-success { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); font-size: 12px; }
.btn-tinted-success:hover { background: color-mix(in srgb, var(--success) 24%, var(--surface)); }
.btn-sm { padding: 8px 12px; font-size: 11px; min-height: 32px; border-radius: 6px; }
.btn-lg { padding: 16px 20px; font-size: 14px; min-height: 52px; }
.btn-block { width: 100%; }

/* Inputs */
.input { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; padding: 12px 12px; font-family: inherit; font-size: 16px; color: var(--text); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.input::placeholder { color: var(--text-3); }

/* iOS NÃO dá zoom no foco quando o campo tem fonte >= 16px. Forçamos 16px em
   TODO controle de formulário no mobile (vence até style inline) — mata de vez
   o "estoura a tela ao clicar no campo". Desktop pode manter tamanhos menores. */
@media (max-width: 767px) {
  input, select, textarea, .input { font-size: 16px !important; }
}
.field-label { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-2); display: block; margin-bottom: 6px; }

/* Cards — separação por fundo+sombra leve, sem moldura riscada */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.card-row { padding: 14px 16px; }
.divider { height: 2px; background: var(--divider); }
.divider-v { width: 2px; background: var(--divider); }

/* Top bar (in-screen). flex-shrink:0 explícito (endurecimento 2026-07-05 —
   .brandbar já tinha isso, .appbar não; reforço defensivo pra nunca encolher
   quando o conteúdo do .scroll ao lado cresce). */
.appbar { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 20px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.appbar h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--text); margin: 0; flex: 1; }

/* Phone chrome */
.phone-status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 28px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text); flex: 0 0 44px; background: var(--surface); }
.phone-home { height: 28px; flex: 0 0 28px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; background: var(--surface); border-top: 1px solid var(--border); }
.phone-home-bar { width: 134px; height: 5px; border-radius: 99px; background: var(--text); opacity: .85; }
.dark .phone-status { background: var(--surface); }
.dark .phone-home { background: var(--surface); }

/* Tab bar — 4 abas (Inicio, Certidoes, Modelos, Perfil) */
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--border); padding: 7px 0 calc(4px + env(safe-area-inset-bottom)); flex-shrink: 0; box-shadow: 0 -3px 12px rgba(0,0,0,0.07); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 4px 5px; color: var(--text-3); cursor: pointer; border: none; background: transparent; transition: color .15s; }
/* Refino 18/07 (Orlando: "a sombra parece um hematoma") — estado ativo SEM
   nenhum drop-shadow/box-shadow: agora é o ícone PINTADO por dentro
   (duotone navy+dourado — .tab-ic-on, ver _TAB_ICONE_ATIVO em app.js) +
   escala levemente maior. Inativo = só o traço cinza (.tab-ic-off). */
.tab.active { color: var(--brand); }
.tab svg { width: 25px; height: 25px; stroke-width: 2; transition: transform .15s; }
.tab.active svg { transform: scale(1.18) translateY(-1px); }
.tab .tab-ic, .tab .tab-ic-on { display: flex; align-items: center; justify-content: center; }
.tab .tab-ic-on { display: none; }
.tab.active .tab-ic-off { display: none; }
.tab.active .tab-ic-on { display: flex; }
.tab-label { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab.active .tab-label { font-weight: 700; }
.tab-avatar { width: 25px; height: 25px; font-size: 10px; transition: transform .15s; }
.tab.active .tab-avatar { transform: scale(1.16) translateY(-1px); }

/* Progress bars — rectangular, thick */
.progress { height: 18px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 0; overflow: hidden; position: relative; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 0; }
.progress-thick { height: 24px; }
.progress-thin { height: 8px; border: none; background: var(--divider); }

/* Bar chart */
.bar-track { background: var(--bg-2); border: 1px solid var(--border); }

/* Tinted info cards */
.tint-brand { background: var(--brand-tint); border: 1px solid var(--brand-tint-strong); }
.tint-warn { background: var(--warning-tint); border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); }
.tint-danger { background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent); }
.tint-success { background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 20%, transparent); }
/* Devolução (âmbar #B8860B) — mesma receita: cor sólida fixa (ícones/botões/selo), mas
   o PREENCHIMENTO de card usa color-mix contra o próprio --surface, então em dark vira
   um leve tingimento sobre superfície escura em vez de um creme chapado (bug 28/07:
   #fdf8e1/#fff8e1 fixos ficavam brancos no dark). Ícone circular usa contorno em vez
   de preenchimento sólido. */
.tint-dev { background: color-mix(in srgb, #B8860B 14%, var(--surface)); border: 1px solid color-mix(in srgb, #B8860B 30%, transparent); }
.tint-dev-icon { background: color-mix(in srgb, #B8860B 16%, var(--surface)); }

/* Scroll */
/* overflow-x:hidden é ESSENCIAL: com overflow-y:auto, o overflow-x "visible"
   computa como "auto" (regra do CSS) e habilita rolagem horizontal — no WKWebView
   isso vira o "estoura a tela ao manipular". Travar em hidden mata o balanço lateral.
   -webkit-overflow-scrolling:touch REMOVIDA 2026-07-05 (endurecimento do "elástico"):
   é propriedade legada (só fazia falta no iOS <13, sem momentum nativo em overflow:auto);
   em WKWebView atual ela pode brigar com overscroll-behavior:contain e produzir um
   "double bounce" (rebote dentro do próprio .scroll ao chegar perto do fim) — sintoma
   relatado como "sobe e volta, nunca alcança os botões". overscroll-behavior:contain
   sozinho já é suficiente pra impedir o encadeamento pro body/html (que agora também
   estão fixed+overflow:hidden, ver topo do arquivo). */
.scroll { overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar { display: none; }

/* Misc */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--text-3); }
.brand-text { color: var(--brand); }

/* Avatar (one of few round-allowed elements) */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: white; display: inline-flex; align-items: center; justify-content: center; font-family: 'Montserrat'; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; overflow: hidden; background-size: cover; background-position: center; }

/* Microcopy with letter-spaced caps */
.ls-caps { letter-spacing: 0.10em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; }

/* Subtle hatched placeholder (for photo/scan placeholders) */
.hatch {
  background-image:
    linear-gradient(135deg, transparent 49%, var(--border) 49% 51%, transparent 51%);
  background-size: 8px 8px;
  background-color: var(--bg-2);
}

/* Document paper look */
.paper { background: #FCFCFA; color: #1a1a1a; border: 1px solid var(--border); }
.dark .paper { background: #F2F1ED; color: #1a1a1a; }
.paper .filled { background: #FFF59C; color: #1a1a1a; padding: 0 2px; font-weight: 600; }

/* Borders / dividers utility */
.bt { border-top: 1.5px solid var(--border); }
.bb { border-bottom: 1.5px solid var(--border); }

/* Brand glyph */
.glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--brand); color: white;
  font-family: 'Montserrat'; font-weight: 800; font-size: 14px;
  letter-spacing: -0.02em;
  border-radius: 4px;
}

/* ── App shell layout (native-style mobile) ── */
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* --app-vh e definido por JS via visualViewport para altura real no WebView iOS.
     Fallback: 100% (funciona no navegador de mesa sem JS). */
  height: var(--app-vh, 100%);
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  /* subtle shadow on wide screens */
  box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
}

/* Em CELULAR de verdade (≤499px: iPhone 11→Pro Max e Androids) o app preenche
   100% da tela — sem o cap de 430px (que deixava tiras laterais no Pro Max) e
   sem a borda/sombra (que aparecia como tira fina nas bordas). A moldura de
   "phone-frame" (max-width + sombra) fica só p/ janelas largas de desktop. */
@media (max-width: 499px) {
  #app { max-width: 100%; margin: 0; box-shadow: none; }
}

/* Teclado aberto → esconde a barra de menu (o rodapé "Salvar" encosta no
   teclado e some o vinco entre menu e teclado). !important vence o style inline
   que o app.js aplica na tabbar. Volta sozinha quando o teclado fecha. */
body.kb-open .tabbar { display: none !important; }

.screen-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--bg);
}

/* Wide screen (desktop preview wrapper — phone frame) */
@media (min-width: 500px) and (max-width: 767px) {
  body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: #E8EAF0;
    min-height: 100dvh;
    padding: 20px 0;
  }
  #app {
    border-radius: 8px;
    height: calc(100dvh - 40px);
    min-height: 600px;
    max-height: 900px;
  }
}

/* ══════════════════════════════════════════════════
   TABLET LAYOUT (>= 768px)
   Shell: rail 80px esquerdo + conteúdo principal
   ══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    display: block;
    min-height: 100dvh;
  }

  /* Tablet = mobile esticado: mesma pilha vertical (telas + tabbar), largura
     cheia, sem o cap de 430px nem a moldura de celular. NÃO é mais rail+main. */
  #app {
    width: 100%;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column; /* screen-area em cima, tabbar embaixo (como no celular) */
  }
  /* Rail esquerda */
  .tablet-rail {
    width: 80px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 18px 0 14px;
    height: 100%;
    z-index: 10;
  }

  /* Logo symbol no topo da rail */
  .rail-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  /* Símbolo da marca na rail */
  .rail-glyph {
    width: 36px;
    height: 36px;
    background: var(--brand);
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }

  /* Itens da nav principal da rail */
  .rail-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    overflow: hidden;
  }

  .rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    border: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s;
    width: 100%;
    text-decoration: none;
  }

  .rail-item:hover {
    background: var(--bg);
    color: var(--text);
  }

  .rail-item.active {
    background: var(--brand-tint);
    color: var(--brand);
    border-left: 3px solid var(--brand);
  }

  .rail-item-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
  }

  /* Botão "Capturar" primário da rail */
  .rail-item-capture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 0 2px;
    margin: 8px 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
  }

  .rail-item-capture .capture-btn {
    width: 48px;
    height: 48px;
    background: var(--brand);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(30,58,95,0.25);
    transition: background .12s;
    flex-shrink: 0;
  }

  .rail-item-capture:hover .capture-btn {
    background: var(--brand-hover);
  }

  .rail-item-capture .rail-item-label {
    color: var(--text-2);
  }

  /* Rodapé da rail (Config + Perfil + avatar) */
  .rail-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px 0;
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
  }

  .rail-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    color: var(--text-3);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    border-radius: 6px;
    transition: background .12s, color .12s;
  }

  .rail-footer-item:hover {
    background: var(--bg);
    color: var(--text-2);
  }

  .rail-footer-item.active {
    color: var(--brand);
  }

  /* Coluna principal (topbar + screen-area) */
  .tablet-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  /* Top bar do tablet */
  .tablet-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }

  .tablet-topbar-title-group {
    flex: 1;
    min-width: 0;
  }

  .tablet-topbar-breadcrumb {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 2px;
  }

  .tablet-topbar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
  }

  .tablet-topbar-search {
    flex: 0 1 280px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
  }

  .tablet-topbar-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
  }

  .tablet-topbar-search input::placeholder {
    color: var(--text-3);
  }

  .tablet-topbar-trailing {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* Area de telas no tablet (sem tabbar) */
  #screen-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Tablet mantém a tab-bar inferior e o brandbar do mobile (mesma navegação).
     A tabbar volta a ocupar largura cheia. */
  .tabbar {
    display: grid;
  }

  /* Layout de duas colunas para conferência */
  .tablet-two-col {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    flex: 1;
    min-height: 0;
    background: var(--bg-2);
    overflow: hidden;
  }

  .tablet-two-col-left {
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    justify-content: center;
  }

  .tablet-two-col-right {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 20px;
  }

  /* Tabela de modelos */
  .tablet-table-head {
    display: grid;
    gap: 14px;
    padding: 10px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .tablet-table-row {
    display: grid;
    gap: 14px;
    padding: 12px 20px;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--divider);
  }

  .tablet-table-row.selected {
    background: var(--brand-tint);
    border-left: 3px solid var(--brand);
    padding-left: 17px;
  }

  /* Seção de detalhe de modelo */
  .tablet-detail-area {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-2);
    padding: 20px;
  }

  /* Grid de KPIs no painel */
  .tablet-kpi-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
  }

  .tablet-kpi-wide {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
  }

  /* Mapa hero no tablet (Diligências) */
  .tablet-map-hero {
    flex-shrink: 0;
    height: 360px;
    position: relative;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }

  /* Grid de dois cards */
  .tablet-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Card header utilitário */
  .card-header {
    display: flex;
    align-items: center;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--divider);
  }

  .card-header-text {
    flex: 1;
    min-width: 0;
  }

  .card-header-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
  }

  .card-header-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
  }

  .card-header-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Barra de métricas hero no tablet */
  .tablet-metrics-bar {
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
  }
}

/* 2026-07-03 (Orlando, via agente app.js): a faixa de tablet (768-1199px) roda
   a experiência mobile completa (mesmas window.Screens.*), mas esticar #app a
   100% da largura deixa listas/cards desproporcionais em telas de ~800-1000px.
   body.is-tablet (aplicada só pelo app.js quando 768<=largura<1200 — nunca em
   mobile real <768 nem em desktop wide >=1200) centraliza #app num container
   de largura de celular (max-width ~520px), com fundo neutro nas laterais —
   igual à técnica já usada no phone-frame de 500-767px acima. Isso preserva o
   layout de celular pixel-perfect (inclusive o mapa em tela cheia, que vive
   dentro de #screen-area normalmente) em vez de esticar. */
body.is-tablet {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #E8EAF0;
  min-height: 100dvh;
}
body.is-tablet #app {
  width: 100%;
  max-width: 520px;
  height: 100dvh;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
}


/* ══════════════════════════════════════════════════
   DESKTOP LAYOUT (>= 1200px)
   Shell: sidenav 240px fixo + coluna principal
   ══════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  /* ═══════ DESKTOP v2 (dk-*) — shell + componentes do redesenho ═══════ */
  /* Shell ancorado na altura DINÂMICA da viewport (100dvh) — encaixa na tela
     mesmo com a dock/barra do sistema; nunca deixa a base escondida atrás dela. */
  .dk-shell { display:flex; flex-direction:column; height:100dvh; max-height:100dvh; width:100%; background:var(--bg); overflow:hidden; }
  .dk-topbar { display:flex; align-items:center; gap:20px; padding:8px 24px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
  .dk-logo { display:flex; align-items:center; flex-shrink:0; cursor:pointer; }
  .dk-logo-img { height:68px; width:auto; display:block; }
  /* Menu horizontal: palavras + risquinho vertical, sem caixas */
  .dk-nav { display:flex; align-items:center; gap:0; margin-left:8px; }
  .dk-nav-sep { color:var(--border-strong); font-weight:300; font-size:18px; padding:0 4px; user-select:none; }
  /* Hover "crescidinha" (pedido 25/07): sublinhado no hover removido —
     o item cresce (scale) em vez de sublinhar. display:inline-block dá
     transform-origin:center próprio sem empurrar os vizinhos (transform
     não afeta layout/flow). O ::after do item ATIVO (.on) fica só pra
     marcar destaque quando NÃO está dentro do trilho novo (.dk-nav-track
     já desliga esse ::after via _dskInjetarEstiloNavIndicador e usa o
     indicador deslizante vermelho no lugar) — mantido por compatibilidade
     com qualquer uso futuro fora do trilho. */
  .dk-nav-item { position:relative; display:inline-block; background:none; border:none; cursor:pointer; padding:6px 14px; font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px; color:var(--text-2); transition:color .15s, transform .14s ease-out; transform-origin:center; }
  .dk-nav-item::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
  .dk-nav-item:hover { color:var(--brand); transform:scale(1.08); }
  .dk-nav-item.on { color:var(--brand); font-weight:800; }
  .dk-nav-item.on::after { transform:scaleX(1); height:2.5px; }
  @media (prefers-reduced-motion: reduce) { .dk-nav-item:hover { transform:none; } }
  .dk-nav-report { display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; padding:7px 12px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--text-2); border-radius:8px; }
  .dk-nav-report:hover { color:var(--brand); background:var(--bg); }
  .dk-nav-report span { letter-spacing:.01em; }
  /* "Relatório" no menu, ao lado de "Painel": palavra em destaque (amarelo) + ícone download */
  .dk-nav-item.dk-nav-relatorio { display:inline-flex; align-items:center; gap:6px; color:#C8851A; font-weight:800; }
  .dk-nav-item.dk-nav-relatorio::after { background:#ECB22E; }
  .dk-nav-item.dk-nav-relatorio:hover { color:#ECB22E; }

  /* ── Operação: item destacado com sub-rótulo "INICIAL" ── */
  .dk-nav-item.dk-nav-item-home {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 22px;
    color: #fff;
    background: #1B5E3B;    /* verde institucional sólido — destaca-se de todos */
    border-radius: 4px;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(27,94,59,.35), inset 0 -1px 0 rgba(0,0,0,.15);
  }
  .dk-nav-item.dk-nav-item-home::after { display: none; }
  .dk-nav-item.dk-nav-item-home:hover  { background: #155130; filter: none; color: #fff; }
  .dk-nav-item.dk-nav-item-home.on     { background: #155130; color: #fff; }
  .dk-nav-label-main { font-family:'Montserrat',sans-serif; font-weight:800; font-size:16.5px; line-height:1; }
  .dk-nav-label-sub  { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.10em; text-transform:uppercase; opacity:.85; margin-top:2px; }
  .dk-icon-btn { position:relative; background:none; border:none; cursor:pointer; color:var(--text-2); padding:8px; display:flex; line-height:0; border-radius:8px; }
  .dk-icon-btn:hover { background:var(--bg); color:var(--brand); }

  /* ── Toggle de tema sol ↔ lua (estilo iOS, maior e bonito) ── */
  .dk-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    position: relative;
    width: 72px;
    height: 34px;
    border-radius: 17px;
    background: #E8EFF5;
    border: 1.5px solid #C8D6E3;
    cursor: pointer;
    padding: 0 4px;
    justify-content: space-between;
    transition: background .25s, border-color .25s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08);
    flex-shrink: 0;
  }
  .dark .dk-theme-toggle {
    background: #1A2535;
    border-color: #354156;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  }
  .dk-theme-toggle:hover { filter: brightness(.95); }

  .dk-theme-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    z-index: 1;
    transition: color .25s, opacity .25s;
    position: relative;
  }
  .dk-theme-sun  { color: #C8851A; opacity: 1; }
  .dk-theme-moon { color: #6F9DD4; opacity: .75; }
  .dark .dk-theme-sun  { opacity: .70; }
  .dark .dk-theme-moon { opacity: 1; }

  /* O thumb é um círculo que se move da esquerda (luz) para a direita (escuro).
     Medidas iPhone-exatas: trilho 34px - 2×1.5px borda - 2×2px inset = 27px thumb.
     translateX(36px): left=3px inicial → posição final 3+36=39px; edge = 3+27=30px ≤ 69px interno. */
  .dk-theme-thumb {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
    z-index: 2;
  }
  .dark .dk-theme-thumb {
    transform: translateX(36px);
    background: #2C3E56;
    box-shadow: 0 2px 6px rgba(0,0,0,.40);
  }
  .dk-notif-dot { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 3px; background:var(--danger); color:#fff; font-family:'Montserrat',sans-serif; font-weight:700; font-size:9.5px; border-radius:8px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }
  .dk-user { display:flex; align-items:center; gap:11px; cursor:pointer; padding:4px 6px 4px 8px; border-radius:10px; }
  .dk-user:hover { background:var(--bg); }
  .dk-avatar { width:44px; height:44px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; flex-shrink:0; background-size:cover; background-position:center; }
  .dk-body { flex:1; display:flex; min-height:0; }
  .dk-side { width:214px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:12px 0 20px; }
  .dk-side::-webkit-scrollbar { width:0; }
  .dk-side-label { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.10em; color:var(--text-3); padding:14px 18px 7px; }
  .dk-side-item { display:flex; align-items:center; gap:10px; padding:8px 16px; cursor:pointer; color:var(--text-2); font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; border-left:3px solid transparent; background:none; border-top:none; border-right:none; border-bottom:none; width:100%; text-align:left; }
  .dk-side-item:hover { background:var(--bg); color:var(--text); }
  .dk-side-item.on { background:var(--brand-tint); color:var(--brand); border-left-color:var(--brand); }
  .dk-side-item.on.danger { background:color-mix(in srgb,var(--danger) 10%,transparent); color:var(--danger); border-left-color:var(--danger); }
  .dk-side-count { margin-left:auto; font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; font-size:11px; font-weight:600; opacity:.75; }
  .dk-side-badge { margin-left:auto; font-family:'Montserrat',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.07em; color:var(--text-3); }
  .dk-side-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); flex-shrink:0; box-sizing:border-box; }
  .dk-side-item.on .dk-side-dot { border-color:currentColor; background:radial-gradient(currentColor 0 38%, transparent 42%); }
  .dk-content { flex:1; min-width:0; min-height:0; overflow-y:auto; padding:20px 26px 40px; background:var(--bg); }
  /* Home (full-width) vira coluna flex que ENCAIXA na altura: cabeçalho + IA
     fixos no topo e o grid ocupa o resto, rolando por dentro se faltar espaço. */
  .dk-content-wide { padding:14px 26px 16px; display:flex; flex-direction:column; overflow:hidden; }
  .dk-phead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-shrink:0; }
  /* Dentro da home (flex column), cabeçalho e faixa de IA não esticam */
  .dk-content-wide > .dk-phead { margin-bottom:10px; }
  .dk-content-wide > .dk-ia-strip { flex-shrink:0; margin-bottom:10px; }
  .dk-content-wide > .dk-ia-2cards { flex-shrink:0; margin-bottom:10px; }
  .dk-content-wide > .dk-ia-wrap { flex-shrink:0; margin-bottom:10px; }
  .dk-ptitle { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; color:var(--text); line-height:1.1; }
  .dk-psub { font-size:12.5px; color:var(--text-3); margin-top:4px; }
  /* Saudação personalizada vira o destaque do cabeçalho; "Operação" desce a subtítulo */
  .dk-greet { font-family:'Montserrat',sans-serif; font-weight:800; font-size:23px; color:var(--text); line-height:1.1; }
  .dk-greet span { color:var(--brand); }
  /* Contêiner da saudação — centraliza verticalmente na linha do dk-phead */
  .dk-greet-wrap { display:flex; align-items:center; flex-shrink:0; }
  /* Linha da saudação + separador vertical + widget de clima (mantido por compatibilidade) */
  .dk-greet-line { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
  .dk-greet-sep { color:var(--border-strong); font-weight:300; font-size:20px; padding:0 13px; user-select:none; line-height:1; }
  /* ITEM A — clima sem card, texto puro harmônico integrado à barra */
  .dk-weather {
    display:inline-flex; align-items:center; gap:6px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor:pointer; padding:0 0 0 4px;
    color: #0E8AB0; font-family:'Montserrat',sans-serif;
    transition: opacity .13s;
  }
  .dk-weather:hover { opacity: .8; }
  .dk-weather .dk-wx-ic { display:flex; color:#0EA5E9; }
  .dk-wx-temp { font-weight:800; font-size:13px; color:#0E8AB0; line-height:1; }
  .dk-wx-cond { font-weight:600; font-size:12px; color:var(--text-2); }
  /* "Ver previsão" — link-texto discreto */
  .dk-wx-ver {
    display: inline-flex; align-items: center; gap: 2px;
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 10px; letter-spacing: .03em;
    color: var(--text-3); opacity: .75; white-space: nowrap;
    text-decoration: underline; text-underline-offset: 2px;
    margin-left: 2px;
  }
  .dk-weather:hover .dk-wx-ver { opacity: 1; color: #0284C7; }
  /* Popover dos próximos 5 dias */
  .dk-wx-pop { position:fixed; z-index:200; background:var(--surface); border:1px solid var(--border-strong); border-radius:3px; box-shadow:0 8px 30px rgba(0,0,0,.18); min-width:320px; max-width:360px; overflow:hidden; }
  .dk-wx-pop-head { font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); padding:12px 16px 9px; border-bottom:1px solid var(--border); }
  .dk-wx-pop-body { padding:4px 0; }
  .dk-wx-day { display:grid; grid-template-columns:42px 28px 1fr auto auto; align-items:center; gap:10px; padding:8px 16px; border-bottom:1px solid var(--divider); }
  .dk-wx-day:last-child { border-bottom:none; }
  .dk-wx-day-lbl { font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; color:var(--text); }
  .dk-wx-day-ic { display:flex; justify-content:center; color:var(--brand); }
  .dk-wx-day-cond { font-size:12px; color:var(--text-2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dk-wx-day-temp { font-family:'Montserrat',sans-serif; font-size:12.5px; color:var(--text); white-space:nowrap; }
  .dk-wx-day-temp b { font-weight:800; }
  .dk-wx-day-temp i { font-style:normal; color:var(--text-3); font-weight:600; }
  .dk-wx-day-rain { display:inline-flex; align-items:center; gap:3px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:var(--text-2); white-space:nowrap; }
  .dk-wx-day.chuvaalta { background:color-mix(in srgb,var(--danger) 7%,transparent); }
  .dk-wx-day.chuvaalta .dk-wx-day-rain, .dk-wx-day.chuvaalta .dk-wx-day-ic, .dk-wx-day.chuvaalta .dk-wx-day-cond { color:var(--danger); }
  .dk-wx-pop-foot { font-size:11px; color:var(--text-3); padding:9px 16px 11px; border-top:1px solid var(--border); background:var(--bg); }
  .dk-ptitle-sub { font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.03em; color:var(--text-2); margin-top:5px; }
  /* Botão didático "Subir mandados" no canto sup. direito da Operação */
  .dk-upload-btn { display:inline-flex; align-items:center; gap:11px; background:var(--brand); color:#fff; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; flex-shrink:0; box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 32%,transparent); }
  .dk-upload-btn:hover { background:color-mix(in srgb,var(--brand) 88%,#000); }
  .dk-upload-btn span { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
  .dk-upload-btn b { font-family:'Montserrat',sans-serif; font-weight:800; font-size:13.5px; }
  .dk-upload-btn i { font-style:normal; font-size:10.5px; font-weight:600; color:rgba(255,255,255,.82); margin-top:1px; }
  /* Relatório + Subir mandados lado a lado — sem subtítulo, diferenciados por cor */
  .dk-head-actions { display:flex; align-items:stretch; gap:8px; flex-shrink:0; }
  .dk-head-actions .dk-upload-btn { padding:9px 14px; }
  .dk-upload-gold { background:#ECB22E; color:#13203a; box-shadow:0 2px 8px color-mix(in srgb,#ECB22E 40%,transparent); }
  .dk-upload-gold:hover { background:color-mix(in srgb,#ECB22E 88%,#000); }
  .dk-upload-gold b { color:#13203a; }
  /* ITEM 11 — botão Excel verde escuro */
  .dk-upload-excel { background:#1E6B32; color:#fff; box-shadow:0 2px 8px rgba(30,107,50,.35); }
  .dk-upload-excel:hover { background:#175528; }
  .dk-upload-excel b { color:#fff; }
  /* ITEM C — botões centro (Relatório + Excel): ícone+texto em inline-flex, gap uniforme.
     O SVG do Lucide vem como elemento inline — forçar display:block pra virar flex item limpo. */
  .dk-upload-btn-center { justify-content:center; align-items:center; gap:7px; }
  .dk-upload-btn-center b { font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; display:block; line-height:1; }
  .dk-upload-btn-center svg { display:block; flex-shrink:0; }
  /* Largura mínima uniforme para os 3 botões de ação do painel */
  .dk-head-actions .dk-upload-btn-center { min-width:88px; }

  /* ═══ NEWS TICKER — Notícias Oficiais de Justiça ═══ */
  /* Layout EMPILHADO: rótulo NOTÍCIAS no topo, faixa rolante abaixo */
  .dk-news-ticker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    border-left: 2px solid var(--brand);
    padding-left: 8px;
  }
  /* Linha do topo: rótulo + "ver todas" */
  .dk-news-ticker-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .dk-news-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .dk-news-scroll {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
  .dk-news-track {
    display: inline-flex;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
  }
  .dk-news-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 20px 2px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--brand);
    white-space: nowrap;
    border-right: 1px solid var(--divider);
    margin-right: 20px;
    transition: color .12s;
  }
  .dk-news-item:hover { color: var(--brand); }
  .dk-news-fonte {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
  }
  .dk-news-sep { color: var(--border-strong); font-size: 11px; }
  .dk-news-head {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
  .dk-news-loading, .dk-news-vazio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-3);
    font-family: 'Inter', sans-serif;
  }
  /* ITEM B — "ver todas" minúsculo e discreto, sem moldura pesada */
  .dk-news-ver-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 2px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .03em;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .12s;
  }
  .dk-news-ver-btn:hover { color: var(--brand); background: transparent; border-color: transparent; }

  /* ═══ PÁGINA COMPLETA DE NOTÍCIAS ═══ */
  .dk-not-wrap { max-width: 860px; padding: 0 4px 40px; }
  .dk-not-head { margin-bottom: 18px; }
  .dk-not-manchete {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 22px 24px;
    cursor: pointer;
    margin-bottom: 16px;
    transition: border-color .12s, box-shadow .12s;
  }
  .dk-not-manchete:hover { border-color: var(--brand); box-shadow: 0 4px 18px rgba(30,58,95,.10); }
  .dk-not-m-fonte {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
  }
  .dk-not-m-data { font-weight: 600; color: var(--text-3); text-transform: none; letter-spacing: 0; margin-left: 4px; }
  .dk-not-m-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 10px;
  }
  .dk-not-m-resumo { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
  .dk-not-m-ler {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand);
  }
  .dk-not-lista { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
  .dk-not-item {
    background: var(--surface);
    padding: 14px 18px;
    cursor: pointer;
    transition: background .1s;
  }
  .dk-not-item:hover { background: var(--brand-tint); }
  .dk-not-i-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .dk-not-i-fonte {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand);
  }
  .dk-not-i-data { font-size: 11px; color: var(--text-3); }
  .dk-not-i-titulo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.3; margin-bottom: 3px; }
  .dk-not-i-resumo { font-size: 12px; color: var(--text-2); line-height: 1.45; }

  /* Clima embutido no subtítulo, após "V.D. em primeiro" — menor e com barrinha (·).
     Começa oculto via style inline; _dskInitWeather mostra com display:inline-flex
     (a barrinha ::before some junto quando o widget está oculto). */
  /* ITEM A — variante sub-título: texto puro sem padding/border */
  .dk-ptitle-sub .dk-weather-sub { vertical-align:middle; padding:0 0 0 2px; transform:translateY(-1px); }
  .dk-weather-sub::before { content:'·'; display:inline-block; color:var(--text-3); margin:0 7px 0 5px; vertical-align:middle; font-weight:300; }
  .dk-weather-sub .dk-wx-temp { font-size:13px; }
  .dk-weather-sub .dk-wx-cond { font-size:11.5px; }
  .dk-weather-sub .dk-wx-ic svg { width:15px; height:15px; }
  /* Coluna BAIXA — só ícones (✓ / ✗), compacta */
  .dk-baixa-cell { width:56px; text-align:center; white-space:nowrap; padding-left:2px !important; padding-right:6px !important; }
  .dk-baixa-btn { width:22px; height:22px; padding:0; border:1px solid; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); transition:background .12s,transform .12s; }
  .dk-baixa-btn:hover { transform:translateY(-1px); }
  .dk-baixa-pos { color:#fff; border-color:var(--success); background:var(--success); }
  .dk-baixa-pos:hover { background:color-mix(in srgb,var(--success) 85%,#000); }
  .dk-baixa-neg { color:#fff; border-color:var(--danger); background:var(--danger); }
  .dk-baixa-neg:hover { background:color-mix(in srgb,var(--danger) 85%,#000); }
  .dk-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; margin-bottom:20px; }
  .dk-kpi { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow-sm); }
  .dk-kpi-lbl { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.06em; color:var(--text-3); text-transform:uppercase; }
  .dk-kpi-val { font-family:'Montserrat',sans-serif; font-weight:800; font-size:27px; line-height:1; margin-top:7px; color:var(--text); }
  .dk-kpi-sub { font-size:11.5px; color:var(--text-3); margin-top:6px; }
  .dk-sec-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--text-2); text-transform:uppercase; margin:4px 0 11px; display:flex; align-items:center; justify-content:space-between; }
  .dk-types { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
  .dk-type { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow-sm); }
  .dk-type.danger { background:color-mix(in srgb,var(--danger) 6%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 32%,transparent); }
  .dk-type-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .dk-type-name { font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px; color:var(--text); display:flex; align-items:center; gap:6px; }
  .dk-type.danger .dk-type-name { color:var(--danger); }
  .dk-type-desc { font-size:11.5px; color:var(--text-3); margin-top:3px; }
  .dk-type-num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; line-height:1; color:var(--text); flex-shrink:0; }
  .dk-type.danger .dk-type-num { color:var(--danger); }
  .dk-type-foot { display:flex; gap:20px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
  .dk-type-foot .lbl { font-family:'Montserrat',sans-serif; font-weight:700; font-size:9px; letter-spacing:.05em; color:var(--text-3); text-transform:uppercase; }
  .dk-type-foot .v { font-family:'Montserrat',sans-serif; font-weight:700; font-size:12.5px; color:var(--text); margin-top:2px; }
  .dk-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:14px; box-shadow:var(--shadow-sm); }
  .dk-card-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--text); margin-bottom:10px; }
  /* Item 1 — tabela mais compacta: menos padding, col # menor, endereço usa espaço livre */
  .dk-table { width:100%; border-collapse:collapse; table-layout:fixed; }
  .dk-table th { font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.05em; color:var(--text-3); text-transform:uppercase; text-align:left; padding:4px 8px; border-bottom:1px solid var(--border); }
  .dk-table th:first-child { width:22px; padding-left:6px; padding-right:2px; }
  .dk-table td { padding:3px 8px; border-bottom:1px solid var(--border); font-size:12.5px; vertical-align:middle; overflow:hidden; }
  .dk-table td:first-child { width:22px; padding-left:6px; padding-right:2px; }
  /* coluna Parte/Ato: nome colado no número (padding-left mínimo).
     Item #3 — alargada (172→212) para os nomes não serem cortados; isso
     empurra o endereço um pouco para a direita, como pedido. */
  .dk-table td:nth-child(2), .dk-table th:nth-child(2) { width:212px; padding-left:2px; }
  /* coluna Endereço: ocupa o resto — sem max-width fixo */
  .dk-table td:nth-child(3) .body-sm { max-width:none !important; }
  /* coluna Audiência — sempre visível por inteiro (04/07: 76px cortava a
     data "25/07 14:00"; quem cede espaço é o Endereço, que tem ellipsis) */
  .dk-table td:nth-child(4), .dk-table th:nth-child(4) { width:92px; }
  /* 5ª coluna = CERTIFICAR (botão Certificar) e 6ª/última = CUMPRIR (botão
     WA) — separadas em 04/07 a pedido: cumprir e certificar são etapas
     distintas. Larguras justas pros botões inteiros (o clip dos 56px da
     antiga coluna Baixa não pode voltar); tabela do mapa cheio tem só 4
     colunas com larguras inline — não é afetada por estas regras. */
  .dk-table td:nth-child(5), .dk-table th:nth-child(5) { width:84px; }
  .dk-table td:last-child, .dk-table th:last-child { width:60px; }
  .dk-table tbody tr:hover td { background:var(--bg); cursor:pointer; }
  .dk-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px; cursor:pointer; }
  .dk-btn:hover { background:var(--bg); }
  .dk-btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
  .dk-btn-primary:hover { filter:brightness(1.08); }
  .dk-barchart { display:flex; align-items:flex-end; gap:8px; height:120px; }
  .dk-bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%; }
  .dk-bar > i { font-style:normal; font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; color:var(--text-3); }
  .dk-bar > b { width:100%; background:var(--brand); }
  .dk-bar > u { text-decoration:none; font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; color:var(--text-3); letter-spacing:.04em; }

  /* ═══════ PAINEL (tela inicial reformada) ═══════ */
  /* ── Faixa de IA: wrapper vertical (card Análises + gaveta No radar) ── */
  /* Wrapper principal — substitui .dk-ia-2cards e .dk-ia-strip */
  .dk-ia-wrap { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; flex-shrink:0; position:relative; overflow:hidden; border-radius:12px; padding:12px 15px; background:linear-gradient(105deg, color-mix(in srgb,#2563EB 18%,var(--surface)) 0%, color-mix(in srgb,#2563EB 10%,var(--surface)) 55%, var(--surface) 100%); }
  /* Compatibilidade com código legado que ainda emite .dk-ia-2cards ou .dk-ia-strip */
  .dk-ia-2cards { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; flex-shrink:0; }
  .dk-ia-strip { display:none; }

  /* Card "Análises com IA" — ocupa linha inteira */
  .dk-ia-card-analise {
    display:flex; align-items:flex-start; gap:14px;
    background:transparent;
    border:none;
    border-radius:0; padding:0;
  }
  /* Variante full-width explícita (emitida pelo novo _dskIAStrip) */
  .dk-ia-card-full { width:100%; box-sizing:border-box; }

  /* Legado: card radar lateral (mantido caso algum código ainda o emita) */
  .dk-ia-card-radar {
    flex:0 0 310px; max-width:340px;
    display:flex; flex-direction:column;
    background:var(--surface-2);
    border:1px solid var(--border); border-top:4px solid #ECB22E;
    border-radius:3px; padding:13px 16px;
    overflow:hidden;
  }

  /* Ícone sparkles no card de análise */
  .dk-ia-icon { width:44px; height:44px; border-radius:3px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .dk-ia-main { flex:1; min-width:0; }
  .dk-ia-eyebrow { display:flex; align-items:center; gap:6px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--brand); margin-bottom:6px; }
  .dk-ia-body { font-size:13.5px; line-height:1.58; color:var(--text); }
  .dk-ia-body strong { font-weight:800; }

  /* ── Gaveta "No radar" — recolhível, independente do card Análises ── */
  .dk-ia-radar-drawer {
    background:transparent;
    border:none;
    border-radius:0; overflow:visible; margin-top:0;
  }
  /* Linha única: cabeçalho "merecem atenção" à esquerda + botão "Analisar a fundo" à direita */
  .dk-ia-rdr-topline { display:flex; align-items:center; gap:12px; }
  .dk-ia-rdr-topline .dk-ia-radar-drawer-hd { flex:1; width:auto; padding:4px 0; }
  .dk-ia-rdr-topline .dk-ia-radar-btn-inline { flex:none; margin-top:0; }
  /* Cabeçalho clicável da gaveta */
  .dk-ia-radar-drawer-hd {
    display:flex; align-items:center; gap:7px;
    width:100%; background:none; border:none; cursor:pointer;
    padding:9px 14px; text-align:left;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
    transition:background .12s;
  }
  .dk-ia-radar-drawer-hd:hover { background:transparent; }
  .dk-ia-radar-drawer-hd span:first-of-type { flex:1; }
  /* O ícone chevron roda quando aberto (curva elástica — U1) */
  .dk-ia-rdr-chev { display:inline-flex; transition:transform .32s var(--ease-spring); flex-shrink:0; }
  .dk-ia-radar-drawer[data-open="1"] .dk-ia-rdr-chev { transform:rotate(180deg); }
  /* Corpo da gaveta: recolhido via grid-rows 0fr→1fr (U1 — elástico, sem JS,
     sem medir altura). display:block/none legado removido em favor do grid. */
  .dk-ia-radar-drawer-body {
    display:grid;
    grid-template-rows:0fr;
    padding:0 14px;
    overflow:hidden;
    transition:grid-template-rows .34s var(--ease-spring), padding .34s var(--ease-spring);
  }
  .dk-ia-radar-drawer-body > * { min-height:0; overflow:hidden; }
  .dk-ia-radar-drawer[data-open="1"] .dk-ia-radar-drawer-body { grid-template-rows:1fr; padding:6px 14px 10px; }

  /* Itens do radar (usados tanto na gaveta quanto no card legado) */
  .dk-ia-radar-lbl { display:flex; align-items:center; gap:5px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; flex-shrink:0; }
  .dk-ia-radar-list { flex:1; overflow-y:auto; min-height:0; }
  .dk-ia-radar-item { display:flex; align-items:baseline; gap:9px; padding:6px 0; cursor:pointer; }
  .dk-ia-radar-item:hover .dk-ia-txt { color:var(--brand); }
  .dk-ia-tag { font-size:9.5px; font-weight:800; letter-spacing:.03em; min-width:62px; flex:none; }
  .dk-ia-txt { flex:1; font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Container da análise profunda (resultado do "Analisar a fundo") */
  .dk-ia-deep-wrap {
    margin-top:10px; padding:10px 13px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:3px; font-size:13px; line-height:1.55; color:var(--text);
    max-height:260px; overflow-y:auto;
  }
  /* Botão "Recolher" — discreto, ao lado do resultado */
  .dk-ia-recolher-btn {
    background:none; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:5px;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px;
    letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-3); padding:4px 0; margin-left:8px;
    transition:color .12s;
  }
  .dk-ia-recolher-btn:hover { color:var(--text); }

  /* VD widget (aparece no card de análise quando há VD) */
  .dk-ia-vd { display:inline-flex; align-items:center; gap:7px; cursor:pointer; margin-top:10px; padding:7px 10px; background:color-mix(in srgb,var(--danger) 9%,var(--surface)); border:1px solid color-mix(in srgb,var(--danger) 38%,transparent); border-radius:3px; }
  .dk-ia-vd-txt { display:flex; flex-direction:column; }
  .dk-ia-vd-num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:18px; color:var(--danger); line-height:1; }
  .dk-ia-vd-lbl { font-family:'Montserrat',sans-serif; font-weight:700; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--danger); margin-top:2px; }
  /* Gaveta (legacy, mantém compat com código anterior) — grid-rows elástico (U1) */
  .dk-ia-drawer { margin-top:9px; }
  .dk-ia-drawer-body {
    display:grid; grid-template-rows:0fr; max-width:600px;
    transition:grid-template-rows .34s var(--ease-spring), margin-top .34s var(--ease-spring);
  }
  .dk-ia-drawer-body > * { min-height:0; overflow:hidden; }
  .dk-ia-drawer[data-open="1"] .dk-ia-drawer-body { grid-template-rows:1fr; margin-top:7px; padding-top:3px; border-top:1px solid var(--border); }
  .dk-ia-vd-row { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); cursor:pointer; }
  .dk-ia-vd-row-num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; line-height:1; color:var(--danger); }
  .dk-ia-vd-row-lbl { flex:1; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.02em; color:var(--danger); text-transform:uppercase; }

  /* ── TELA CERTIDÕES — fonte Inter + linhas compactas (#2 + #4) ── */
  /* flex-column de altura limitada: dá referência pro .scroll interno
     (statsStrip + filterBar + tabela) rolar — sem isto a lista cresce além
     do .dk-shell (overflow:hidden) e some a barra de rolagem. */
  .dk-hist-inter { font-family:'Inter',sans-serif; display:flex; flex-direction:column; flex:1; min-height:0; }
  .dk-hist-inter .desktop-table-row { padding:7px 24px; }
  .dk-hist-inter .desktop-table-head { padding:7px 24px; }
  .dk-hist-inter .desktop-stats-strip { padding:12px 24px 8px; }
  .dk-hist-inter .desktop-stat-item .num { font-family:'Inter',sans-serif; font-size:22px; }
  .dk-hist-inter .desktop-filter-bar { padding:8px 16px; }
  .dk-hist-inter .desktop-chip { font-family:'Inter',sans-serif; }
  .dk-hist-inter .desktop-filter-count { font-family:'Inter',sans-serif; }

  /* Grid 2 colunas — ESQUERDA: mapa ocupa a coluna inteira (altura cheia,
     mescla o que antes eram os quadrantes superior+inferior-esquerdo).
     DIREITA: lista (linhas da rota) em cima + carrossel (barras/pizzas) embaixo.
     Linha 2 (carrossel) alargada 1.3fr/0.7fr → 1.15fr/0.85fr (2026-07-03):
     a foto do Street View no card "Mandado selecionado" precisa de ~200px +
     folga pro mascote Lex (reservado, ainda não integrado); tira espaço do
     mapa (coluna alta à esquerda, flexível) sem desequilibrar a lista de cima. */
  .dk-grid4 { flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.15fr 0.85fr; gap:9px; }
  .dk-card.dk-g-carousel { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
  /* Tarefa 4 — quando este card mostra o detalhe do mandado (dados + foto do
     Street View, ver _dskMostrarMandadoNosCards), o conteúdo pode ultrapassar
     a altura fixa do card (grid-row 0.85fr): liga rolagem vertical SÓ nesse
     estado, pra foto nunca ficar cortada. Scrollbar discreta (mesmo padrão
     do resto do app). */
  .dk-card.dk-g-carousel.dk-g-carousel-detalhe { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
  .dk-card.dk-g-carousel.dk-g-carousel-detalhe::-webkit-scrollbar { width:6px; }
  .dk-card.dk-g-carousel.dk-g-carousel-detalhe::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:0; }
  .dk-card.dk-g-map, .dk-card.dk-g-list { display:flex; flex-direction:column; min-height:0; }
  /* Posições fixas no grid (independe da ordem no DOM):
     ESQUERDA: mapa ocupa as 2 linhas (coluna alta) · DIREITA: lista em cima + carrossel embaixo. */
  .dk-card.dk-g-map      { grid-column:1; grid-row:1 / span 2; }
  .dk-card.dk-g-list     { grid-column:2; grid-row:1; }
  .dk-card.dk-g-carousel { grid-column:2; grid-row:2; }
  .dk-card.dk-g-list { overflow:hidden; }  /* a lista rola por dentro (.dk-list-scroll) */

  /* ── Carrossel Cumpridos ⇄ Visão geral (card inferior-direito) ── */
  .dk-carousel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; }
  .dk-carousel-viewport { flex:1; min-height:0; position:relative; overflow:hidden; }
  .dk-carousel-track { display:flex; height:100%; width:200%; transition:transform .38s cubic-bezier(.4,0,.2,1); }
  .dk-carousel-track[data-reduced="1"] { transition:none; }
  .dk-carousel-slide { flex:0 0 50%; min-width:0; height:100%; display:flex; flex-direction:column; padding:0 1px; }
  .dk-carousel-slide[hidden] { display:flex; } /* usamos transform p/ esconder, não display:none */
  .dk-carousel-controls { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; margin-top:8px; }
  .dk-carousel-arrow {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-2); cursor:pointer; border-radius:6px; flex-shrink:0;
    transition:background .13s,color .13s,border-color .13s;
  }
  .dk-carousel-arrow:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
  .dk-carousel-dots { display:inline-flex; align-items:center; gap:6px; }
  .dk-carousel-dot {
    width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
    background:var(--border-strong); transition:background .15s,transform .15s;
  }
  .dk-carousel-dot.on { background:var(--brand); transform:scale(1.25); }
  .dk-carousel-pause {
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-2); cursor:pointer; border-radius:6px; flex-shrink:0; margin-left:2px;
    transition:background .13s,color .13s,border-color .13s;
  }
  .dk-carousel-pause:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }

  /* Card barras (Cumpridos) */
  .dk-bars-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  .dk-ptabs { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .dk-ptab { background:none; border:none; cursor:pointer; padding:6px 12px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; color:var(--text-3); border-right:1px solid var(--border); }
  .dk-ptab:last-child { border-right:none; }
  .dk-ptab:hover { color:var(--text); }
  .dk-ptab.on { background:var(--brand); color:#fff; }
  /* Barras: a área toda (.dk-cbars) ocupa o espaço disponível do card (flex:1 vindo do
     slide flex-column); cada .dk-cbar-stack usa flex:1 + min-height:0 para virar a régua
     de 100% em que as barras internas (<u>) são desenhadas com height EM % (ver
     _dskBarrasHTML) — assim elas escalam sozinhas, via CSS, quando o card cresce/encolhe,
     sem precisar de JS de resize. */
  .dk-cbars { flex:1; min-height:56px; display:flex; align-items:stretch; gap:10px; padding-bottom:4px; border-bottom:1px solid var(--divider); }
  .dk-cbar { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
  .dk-cbar > i { font-style:normal; font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px; color:var(--text-2); margin-bottom:auto; flex-shrink:0; }
  .dk-cbar-stack { flex:1; min-height:0; width:60%; max-width:34px; display:flex; flex-direction:column; justify-content:flex-end; }
  /* Cada segmento <u> tem height EM % (definida inline pelo JS) — flex-shrink:0 evita que o
     flex column da .dk-cbar-stack recalcule/achate essa altura percentual. */
  .dk-cbar-stack > u { display:block; width:100%; flex-shrink:0; }
  .dk-cbar > b { font-weight:700; font-family:'Montserrat',sans-serif; font-size:10.5px; color:var(--text-3); letter-spacing:.03em; flex-shrink:0; }
  .dk-bars-leg { display:flex; gap:16px; margin-top:10px; font-size:11.5px; color:var(--text-2); font-weight:600; }
  .dk-bars-leg span { display:inline-flex; align-items:center; gap:6px; }
  .dk-vd-seal { display:flex; align-items:center; gap:12px; margin-top:13px; padding:11px 14px; background:color-mix(in srgb,var(--danger) 8%,transparent); border:1px solid color-mix(in srgb,var(--danger) 32%,transparent); border-radius:3px; }
  .dk-vd-seal-num { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; line-height:1; color:var(--danger); }
  .dk-vd-seal-lbl { font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.02em; color:var(--danger); margin-top:3px; }

  /* Card 4 pizzas — título no topo; donut À ESQUERDA e legenda À DIREITA, lado a
     lado (linha). Donut maior (136px); legenda [número] [quadradinho] [label].
     gap vertical menor para os 4 cards encaixarem bem no espaço disponível. */
  /* 4 pizzas lado a lado, dados EMBAIXO de cada uma (donut no topo, legenda abaixo) */
  /* Visão geral — 3 pizzas GRANDES lado a lado, bem ajustadas */
  /* align-content:start (era center): o center empurrava os TÍTULOS pra fora do
     topo do card e o overflow:hidden do carrossel os cortava (pedido do Orlando
     08/07). Ancorado no topo + donut reduzido só aqui p/ caber título+legenda. */
  .dk-pies-3 { flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start; padding-top:2px; }
  .dk-pies-3 .dk-donut-svg { width:clamp(80px, 9vw, 124px); height:clamp(80px, 9vw, 124px); }
  .dk-pie { display:flex; flex-direction:column; gap:7px; width:100%; min-width:0; align-items:center; }
  .dk-pie-title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text); text-align:center; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* donut no topo, legenda EMBAIXO (coluna), centralizada */
  .dk-pie-row { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; flex:1; width:100%; }
  .dk-pie-donut { display:flex; justify-content:center; align-items:center; flex-shrink:0; }
  /* ITEM E — pizza responsiva: encolhe em telas menores p/ não sobrepor "Visão geral" */
  .dk-donut-svg { width:clamp(96px, 11.5vw, 155px); height:clamp(96px, 11.5vw, 155px); }
  .dk-pie-leg-wrap { width:100%; min-width:0; display:inline-flex; flex-direction:column; gap:4px; align-items:center; justify-content:flex-start; }
  .dk-pie-leg { display:flex; align-items:center; gap:6px; padding:1px 4px 1px 0; cursor:pointer; max-width:100%; border-radius:3px; transition:background 0.12s; }
  .dk-pie-leg:hover .dk-pie-leg-lbl { color:var(--brand); }
  /* Destaque quando a legenda de categoria está ativa como filtro */
  .dk-pie-leg.on .dk-pie-leg-lbl { color:var(--brand); font-weight:800; }
  .dk-pie-leg.on .dk-pie-leg-num { color:var(--brand); }
  .dk-pie-dot { width:10px; height:10px; flex-shrink:0; display:inline-block; }
  .dk-pie-leg-num { font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; font-weight:800; font-size:13.5px; color:var(--text); min-width:18px; text-align:right; transition:color 0.12s; }
  .dk-pie-leg-lbl { font-size:12px; color:var(--text-2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color 0.12s; }

  /* Card mapa grande */
  .dk-map-filters { display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border); background:var(--surface); position:relative; z-index:2; }
  /* Filtros — cada um com cor sólida própria (clássicas, sem pastel), sem borda, inteiriços.
     Selecionado (.on) escurece + barra inferior; VD sempre vermelho. */
  .dk-mf { display:inline-flex; align-items:center; gap:6px; border:none; border-radius:6px; padding:7px 12px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; color:#fff; cursor:pointer; transition:filter .14s; }
  .dk-mf:hover { filter:brightness(1.09); }
  .dk-mf.on { filter:brightness(.92); }
  .dk-mf-vd     { background:#C0392B; }
  .dk-mf-urg    { background:#D97706; }
  .dk-mf-tipo   { background:#6D4FB0; }
  .dk-mf-bairro { background:#0F766E; }
  .dk-mf-lotes  { background:#2563A8; }
  .dk-mf-todos  { background:#5B6675; }
  .dk-map-org { display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--border); background:var(--surface); }
  /* Organizar a rota — botões sólidos e vivos (sem translúcido): urgência vermelho, proximidade navy */
  .dk-mf.dk-org { flex:1; justify-content:center; color:#fff; border:none; font-size:12px; padding:9px 11px; position:relative; overflow:hidden; }
  #dsk-org-urg.dk-org  { background:var(--danger); }
  #dsk-org-urg.dk-org:hover  { background:color-mix(in srgb,var(--danger) 86%,#000); }
  #dsk-org-prox.dk-org { background:var(--brand); }
  #dsk-org-prox.dk-org:hover { background:color-mix(in srgb,var(--brand) 86%,#000); }
  /* Shimmer (reaproveita @keyframes dkShimmer) em Por urgência / Por proximidade + Totalmente IA */
  @media (prefers-reduced-motion: no-preference) {
    .dk-mf.dk-org::after,
    .dk-gen-seg-btn.modelosia.on::after {
      content:''; position:absolute; top:0; left:0; width:40%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
      animation:dkShimmer 2.8s ease-in-out infinite; pointer-events:none;
    }
    .dk-ia-wrap::after {
      content:''; position:absolute; top:0; left:0; width:45%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
      animation:dkShimmer 4.2s ease-in-out infinite; pointer-events:none;
    }
    .dk-nav-item-home::after,
    .dk-pie::after,
    .dk-gen-wrap.modelosia-on .dk-gen-prev-card::after {
      content:''; position:absolute; top:0; left:0; width:42%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
      animation:dkShimmer 3.4s ease-in-out infinite; pointer-events:none;
    }
  }
  .dk-nav-item-home, .dk-pie { position:relative; overflow:hidden; }
  .dk-gen-prev-card { position:relative; }
  .dk-gen-seg-btn.modelosia { position:relative; overflow:hidden; }

  /* ═══ Página Parceiros (institucional Sanflux) ═══ */
  .dk-parc-intro { font-family:'Inter',sans-serif; font-size:14px; color:var(--text-2); max-width:740px; margin:0 0 18px; line-height:1.5; }
  .dk-parc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
  .dk-parc-card { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; box-shadow:var(--shadow-sm); transition:border-color .14s, box-shadow .14s; }
  .dk-parc-card:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(30,58,95,.10); }
  .dk-parc-logo { flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:118px; min-height:54px; padding:10px 18px; background:var(--brand); color:#fff; font-family:'Montserrat',sans-serif; font-weight:800; font-size:16px; letter-spacing:.01em; border-radius:8px; white-space:nowrap; text-align:center; }
  .dk-parc-body { flex:1; min-width:0; }
  .dk-parc-cat { font-family:'Montserrat',sans-serif; font-weight:700; font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:var(--text-3); }
  .dk-parc-nome { font-family:'Montserrat',sans-serif; font-weight:800; font-size:15px; color:var(--text); margin-top:1px; }
  .dk-parc-desc { font-family:'Inter',sans-serif; font-size:12px; color:var(--text-2); margin-top:3px; line-height:1.4; }
  .dk-parc-link { display:inline-flex; align-items:center; gap:5px; flex:none; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--brand); text-decoration:none; padding:8px 10px; border:1px solid var(--brand-tint-strong); border-radius:6px; background:var(--brand-tint); transition:background .14s; }
  .dk-parc-link:hover { background:var(--brand-tint-strong); }

  /* Card linhas da rota */
  .dk-list-head { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:none; }
  /* Cabeçalho da tabela da rota: azul, sem linhas, e ESTÁTICO (não rola junto) */
  .dk-list-scroll .dk-table th { color:var(--brand); border-bottom:none; position:sticky; top:0; background:var(--surface); z-index:2; }
  .dk-list-search { flex:1; display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:7px 11px; }
  .dk-list-search input { flex:1; border:none; background:none; outline:none; font:inherit; font-size:12.5px; color:var(--text); }
  .dk-list-scroll { flex:1; overflow-y:auto; }
  /* Lista mais densa — mais nomes visíveis sem rolar */
  .dk-list-scroll .dk-table td { padding:5px 12px; line-height:1.25; border-bottom:none; }
  /* linhas muito levemente arredondadas pra não destoar dos cards maiores */
  .dk-list-scroll .dk-table tbody tr:hover td:first-child { border-top-left-radius:6px; border-bottom-left-radius:6px; }
  .dk-list-scroll .dk-table tbody tr:hover td:last-child { border-top-right-radius:6px; border-bottom-right-radius:6px; }

  /* ═══════ CORES MAIS VIVAS (escopo .dk-shell — NÃO afeta o mobile) ═══════
     Orlando não gosta de translúcido: textos secundários menos apagados,
     divisórias/bordas mais presentes, realces sólidos. Vale claro e escuro. */
  .dk-shell .label-xs,
  .dk-shell .dk-kpi-lbl,
  .dk-shell .dk-sec-title { color:var(--text-2); }
  .dk-shell .body-xs,
  .dk-shell .dk-psub,
  .dk-shell .dk-kpi-sub,
  .dk-shell .dk-type-desc { color:var(--text-2); }
  /* Contadores e divisórias: opacidade cheia + linhas mais nítidas */
  .dk-shell .dk-side-count { opacity:1; color:var(--text-2); }
  .dk-shell .desktop-table-row { border-bottom:1px solid var(--divider); }
  .dk-shell .dk-cbars,
  .dk-shell .dk-type-foot { border-color:var(--border-strong); }
  /* Realces tinted: menos transparência, cor mais cheia */
  .dk-shell .dk-vd-seal { background:color-mix(in srgb,var(--danger) 13%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 48%,transparent); }
  .dk-shell .dk-type.danger { background:color-mix(in srgb,var(--danger) 10%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 46%,transparent); }
  /* Pino/legenda: número e rótulo das pizzas com tom mais firme */
  .dk-shell .dk-pie-leg-lbl { color:var(--text-2); }

  /* ═══ Item 3 — Botão expand do mapa (janela cheia) ═══ */
  .dk-map-expand-btn {
    position:absolute; top:10px; right:10px; z-index:3;
    background:var(--brand); border:1px solid var(--brand);
    border-radius:6px; padding:7px 11px; cursor:pointer;
    display:flex; align-items:center; gap:7px;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:.03em; text-transform:uppercase;
    color:#fff; transition:background .14s,transform .14s;
    box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 38%,transparent);
  }
  .dk-map-expand-btn:hover { background:color-mix(in srgb,var(--brand) 88%,#000); transform:translateY(-1px); }
  /* Estado "tudo em dia" do radar */
  .dk-ia-radar-vazio { display:flex; align-items:center; gap:8px; padding:8px 2px; font-size:12.5px; color:var(--text-2); }

  /* ── Tarefa A: Radar split (lista + detalhe) ── */
  /* Corpo da gaveta do radar em modo split */
  .dk-ia-radar-drawer-body.dk-ia-rdr-split { display:none; flex-direction:row; gap:0; padding:0; }
  .dk-ia-radar-drawer[data-open="1"] .dk-ia-radar-drawer-body.dk-ia-rdr-split { display:flex; }
  /* Lista de itens (coluna esquerda) */
  .dk-ia-rdr-lista {
    flex:0 0 55%; min-width:0;
    border-right:1px solid var(--border);
    padding:6px 12px 10px;
    overflow-y:auto; max-height:260px;
  }
  /* Detalhe do item selecionado (coluna direita) */
  .dk-ia-rdr-det {
    flex:1; min-width:0;
    padding:8px 14px 12px;
    overflow-y:auto; max-height:260px;
    background:var(--surface);
  }
  /* Item ativo na lista */
  .dk-ia-radar-item.dk-ia-rdr-ativo { background:var(--brand-tint); border-radius:2px; }
  .dk-ia-radar-item.dk-ia-rdr-ativo .dk-ia-txt { color:var(--brand); font-weight:700; }
  /* Cabeçalho do detalhe (badge urgente + botão fechar) */
  .dk-rdr-det-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:8px;
  }
  .dk-rdr-det-urg {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--danger); color:#fff; border-radius:2px;
    padding:2px 7px;
    font-family:'Montserrat',sans-serif; font-weight:800; font-size:9.5px;
    letter-spacing:.04em; text-transform:uppercase;
  }
  .dk-rdr-det-fechar {
    background:none; border:none; cursor:pointer; padding:2px;
    color:var(--text-3); display:inline-flex; align-items:center;
    border-radius:2px; transition:color .12s,background .12s;
    margin-left:auto;
  }
  .dk-rdr-det-fechar:hover { color:var(--text); background:var(--surface-2); }
  /* Linhas de info do detalhe */
  .dk-rdr-det-rows { display:flex; flex-direction:column; gap:5px; }
  .dk-rdr-det-row { display:flex; align-items:flex-start; gap:7px; font-size:12px; }
  .dk-rdr-det-ic { flex-shrink:0; margin-top:1px; }
  .dk-rdr-det-lbl {
    flex:0 0 90px; color:var(--text-3);
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px;
    letter-spacing:.02em; text-transform:uppercase; padding-top:1px;
  }
  .dk-rdr-det-val { flex:1; color:var(--text); font-size:12px; line-height:1.45; word-break:break-word; }

  /* ── Tarefa B: Mandado nos cards (Visão geral + Cumpridos) ── */
  /* Botão "Sair" dos cards */
  .dk-mand-sair {
    display:inline-flex; align-items:center; gap:5px;
    background:none; border:1px solid var(--border); border-radius:3px;
    padding:4px 10px; cursor:pointer;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:.03em; color:var(--text-2);
    transition:background .13s,color .13s,border-color .13s;
  }
  .dk-mand-sair:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
  /* Badge urgente no card de mandado */
  .dk-mand-urg-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--danger); color:#fff; border-radius:2px;
    padding:3px 9px; margin-bottom:10px;
    font-family:'Montserrat',sans-serif; font-weight:800; font-size:10px;
    letter-spacing:.05em; text-transform:uppercase;
  }
  /* Linhas de info do mandado — flex:0 0 auto (não cresce nem encolhe) para
     nunca espremer a foto do Street View abaixo; rola por dentro se faltar
     espaço (mais linhas que o card comporta). */
  .dk-mand-rows { display:flex; flex-direction:column; gap:6px; overflow-y:auto; flex:0 0 auto; max-height:100%; }
  .dk-mand-row { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; }
  .dk-mand-ic { flex-shrink:0; margin-top:2px; }
  .dk-mand-lbl {
    flex:0 0 96px; color:var(--text-3);
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px;
    letter-spacing:.02em; text-transform:uppercase; padding-top:2px;
  }
  .dk-mand-val { flex:1; color:var(--text); font-size:12.5px; line-height:1.45; word-break:break-word; }
  /* Link abrir PDF */
  .dk-mand-abrir-pdf {
    display:inline-flex; align-items:center; gap:5px;
    background:none; border:1px solid var(--brand); border-radius:3px;
    padding:4px 10px; text-decoration:none;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:.03em; color:var(--brand);
    transition:background .13s,color .13s;
  }
  .dk-mand-abrir-pdf:hover { background:var(--brand); color:#fff; }
  /* Fachada (Street View) no card "Mandado selecionado" (2026-07-03).
     min-height blinda a foto contra esmagamento pelas rows acima (que agora
     são flex:0 0 auto) — a imagem interna some com onerror, mas o SLOT em si
     nunca fica menor que isto, mesmo com o card apertado. flex-shrink:0 some
     com o corte que o Orlando reportou. margin-bottom reserva a folga extra
     pedida pro mascote Lex (SVG do robozinho — ainda NÃO integrado aqui). */
  #dsk-mand-sv-slot { flex-shrink:0; margin-top:auto; padding-bottom:14px; display:flex; flex-direction:column; min-height:0; }
  #dsk-mand-sv-slot:empty { padding-bottom:0; }
  /* Estado "sem PDF" */
  .dk-mand-sem-pdf {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; flex:1; min-height:120px; color:var(--text-3);
    font-size:13px; text-align:center;
  }
  /* PDF do mandado — overlay SOBRE o card do mapa (cobre o mapa; o mapa segue
     vivo por baixo e reaparece ao Fechar). */
  .dk-mand-pdf-overlay { position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; background:var(--surface); }
  .dk-mand-pdf-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px 9px 14px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
  .dk-mand-pdf-titulo { font-family:'Montserrat',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text); }
  .dk-mand-pdf-frame { flex:1; width:100%; border:0; background:var(--surface-2); }
  .dk-mand-pdf-x {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text-2); cursor:pointer; transition:background .13s,color .13s;
  }
  .dk-mand-pdf-x:hover { background:var(--surface-2); color:var(--text); }

  /* Tela mapa cheio (renderDesktopMapaCheio) */
  .dk-mapacheio { display:flex; flex-direction:column; height:100dvh; width:100%; background:var(--bg); overflow:hidden; }
  .dk-mapacheio-head { display:flex; align-items:center; gap:14px; padding:8px 18px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
  .dk-mapacheio-title { font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px; flex:1; white-space:nowrap; }
  /* Item #6 — busca no cabeçalho do mapa cheio (largura fixa, não estica o título) */
  .dk-mc-search { flex:0 0 320px; max-width:340px; }
  .dk-mapacheio-close { background:none; border:1px solid var(--border); border-radius:3px; padding:5px 12px; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; color:var(--text-2); transition:background .12s,color .12s; }
  .dk-mapacheio-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
  .dk-mapacheio-map { flex:3; min-height:0; background:var(--surface-2); position:relative; overflow:hidden; }
  .dk-mapacheio-list { flex:2; min-height:0; overflow-y:auto; border-top:1px solid var(--border); }

  /* ═══ Item 5 — Animações sutis e sérias ═══ */
  /* Transições nos cards */
  .dk-card { transition:box-shadow .18s,border-color .18s; }
  .dk-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); border-color:var(--border-strong); }
  /* Transições nos botões upload e filtros */
  .dk-upload-btn { transition:background .15s,filter .15s; }
  .dk-baixa-btn { transition:background .13s,filter .13s,transform .10s; }
  .dk-baixa-btn:hover { filter:brightness(1.10); transform:translateY(-1px); }
  /* Legenda de pizza hover suave */
  .dk-pie-leg { transition:background .12s; }
  .dk-pie-leg:hover { background:var(--brand-tint); }
  /* Botão icon da topbar hover */
  .dk-icon-btn { transition:background .13s,color .13s; }

  /* Animação de entrada dos donuts (stroke-dashoffset) */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes dkDonutIn { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1); } }
    .dk-donut-svg { animation:dkDonutIn .32s cubic-bezier(.2,.7,.2,1) both; }
    /* Cascata: grande entra primeiro, depois as 5 pequenas */
    .dk-pies-3 .dk-pie:nth-child(1) .dk-donut-svg { animation-delay:.05s; }
    .dk-pies-3 .dk-pie:nth-child(2) .dk-donut-svg { animation-delay:.12s; }
    .dk-pies-3 .dk-pie:nth-child(3) .dk-donut-svg { animation-delay:.19s; }
  }

  /* ═══ Item 6 — Botão radar "com cara de IA" (shimmer) ═══ */
  .dk-ia-radar-btn {
    display:inline-flex; align-items:center; gap:7px;
    background:linear-gradient(100deg, var(--brand) 0%, color-mix(in srgb,var(--brand) 80%,#1a4a8a) 100%);
    color:#fff; border:none; border-radius:6px; padding:6px 13px;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px;
    cursor:pointer; position:relative; overflow:hidden;
    transition:filter .15s,transform .12s;
    margin-top:9px;
  }
  .dk-ia-radar-btn:hover { filter:brightness(1.12); transform:translateY(-1px); }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes dkShimmer {
      0%   { transform:translateX(-100%) skewX(-18deg); }
      60%  { transform:translateX(260%)  skewX(-18deg); }
      100% { transform:translateX(260%)  skewX(-18deg); }
    }
    .dk-ia-radar-btn::after {
      content:''; position:absolute; top:0; left:0; width:40%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
      animation:dkShimmer 2.8s ease-in-out infinite;
    }
  }

  /* ═══ Item 7 — Relógio no topbar ═══ */
  #dsk-clock {
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
    color:var(--text-2); letter-spacing:.02em; white-space:nowrap;
    padding:0 6px; flex-shrink:0;
  }

  body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    display: block;
    min-height: 100dvh;
  }

  #app {
    width: 100%;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: row; /* sidenav | main */
  }

  /* ── Sidenav ── */
  .desktop-sidenav {
    width: 240px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0 0 12px;
    height: 100%;
    z-index: 10;
    overflow: hidden;
  }

  .desktop-sidenav-header {
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
  }

  .desktop-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .desktop-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .desktop-sidenav-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
  }

  .desktop-sidenav-body::-webkit-scrollbar { display: none; }

  .desktop-nav-section {
    padding: 8px 12px 10px;
  }

  .desktop-nav-section-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 6px 10px 8px;
  }

  .desktop-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    transition: background .12s, color .12s;
  }

  .desktop-nav-item:hover {
    background: var(--bg);
    color: var(--text);
  }

  .desktop-nav-item.active {
    background: var(--brand-tint);
    color: var(--brand);
    border-left-color: var(--brand);
    font-weight: 700;
    padding-left: 8px;
  }

  .desktop-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
  }

  .desktop-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-nav-count {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    opacity: 0.75;
    flex-shrink: 0;
  }

  .desktop-nav-badge {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-shrink: 0;
  }

  .desktop-sidenav-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--divider);
    flex-shrink: 0;
  }

  /* ── Coluna principal ── */
  .desktop-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  /* ── Topbar desktop ── */
  .desktop-topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }

  .desktop-topbar-title-group {
    flex: 1;
    min-width: 0;
  }

  .desktop-topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .desktop-topbar-breadcrumb .active {
    color: var(--text-2);
  }

  .desktop-topbar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
  }

  .desktop-topbar-search {
    flex: 0 1 360px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
  }

  .desktop-topbar-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
  }

  .desktop-topbar-search input::placeholder { color: var(--text-3); }

  .desktop-kbd {
    font-family: 'Montserrat', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-3);
    flex-shrink: 0;
  }

  .desktop-topbar-trailing {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .desktop-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
  }

  .desktop-notif-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .desktop-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--danger);
    border-radius: 7px;
    font-size: 9px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .desktop-theme-btn {
    padding: 7px;
    min-height: unset;
  }

  /* ── Área de telas ── */
  .desktop-screen-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
  }

  /* Ocultar tab bar e tablet rail no desktop */
  .tabbar   { display: none !important; }
  .brandbar { display: none !important; }

  /* ── KPIs ── */
  .desktop-kpi-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
  }

  .desktop-kpi-card {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px 14px;
  }

  .desktop-kpi-header {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .desktop-kpi-value {
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin-top: 6px;
  }

  .desktop-kpi-trend {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  /* ── Card header ── */
  .desktop-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--divider);
  }

  .desktop-card-header-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
  }

  /* ── Tabela desktop ── */
  .desktop-table-head {
    display: grid;
    gap: 14px;
    padding: 10px 24px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .desktop-table-row {
    display: grid;
    gap: 14px;
    padding: 12px 24px;
    align-items: center;
    border-bottom: 1px solid var(--divider);
    background: var(--surface);
    transition: background .10s;
  }

  .desktop-table-row:hover {
    background: var(--brand-tint);
  }

  .desktop-table-row.highlighted {
    border-left: 3px solid var(--brand);
    padding-left: 21px;
    background: var(--brand-tint);
  }

  /* ── Filter bar ── */
  .desktop-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .desktop-filter-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
  }

  .desktop-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
  }

  .desktop-chip.active {
    background: var(--brand-tint);
    color: var(--brand);
    border-color: var(--brand);
  }

  /* ── Stats strip (certidões) ── */
  .desktop-stats-strip {
    display: flex;
    gap: 0;
    padding: 18px 24px 12px;
    background: var(--bg);
    flex-shrink: 0;
  }

  .desktop-stat-item {
    flex: 1;
    padding: 0 24px;
  }

  .desktop-stat-item:first-child { padding-left: 0; }
  .desktop-stat-item:last-child  { border-right: none; }

  /* ── Metrics strip (diligências) ── */
  .desktop-metrics-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  /* ── Mapa (diligências) ── */
  /* FIX BUG1: o container do mapa precisa de altura explícita para o Google Maps
     não renderizar cinza. O pai do grid tem flex:1 + min-height:0, mas o panel
     dentro do grid 2fr/1fr não herda altura automaticamente — definimos aqui. */
  .desktop-map-panel {
    position: relative;
    background: var(--surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    /* Altura mínima explícita: garante que o container tenha dimensão antes do
       Google Maps inicializar, mesmo antes do primeiro repaint do grid. */
    min-height: 320px;
  }

  .desktop-map-inner {
    position: absolute;
    inset: 0;
    /* height:100% explícita para quando o pai ainda não propagou a altura via grid */
    height: 100%;
  }

  /* ── Preview panel (modelos) ── */
  .desktop-preview-panel {
    background: var(--bg-2);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── Paginação ── */
  .desktop-pagination {
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }

  /* ── Rodapé de marca (shell desktop — aparece em todas as telas) ── */
  .dk-brand-footer {
    flex-shrink: 0;
    padding: 6px 26px 7px;
    border-top: 1px solid var(--border);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--bg);
    text-align: left;
    line-height: 1.4;
    user-select: none;
  }

  /* ── Resumo da rota (distância + tempo) junto dos botões de organização ── */
  .dk-rota-resumo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    opacity: 0.88;
  }
  .dk-rota-resumo svg { flex-shrink: 0; }
}

/* Linha de certidao na tela Home */
.home-cert-row {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  cursor: default;
  transition: background .10s;
}
.home-cert-row:active { background: var(--brand-tint); }

/* Chip/filter (not pill — rectangular with small radius) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip.active {
  background: var(--brand);
  color: var(--text-on-brand);
  border-color: var(--brand);
}

/* Filter strip */
.filter-strip {
  display: flex; gap: 6px; padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.filter-strip::-webkit-scrollbar { display: none; }

/* Faixa horizontal de donuts do Banco de dados (desktop) — overflow-x discreto,
   mesmo padrão do .filter-strip (scrollbar oculta, sem quebrar o layout). */
.dsk-banco-pizzas-scroll { scrollbar-width: none; }
.dsk-banco-pizzas-scroll::-webkit-scrollbar { display: none; }

/* Bloco padrão de cada gráfico da faixa do Banco de dados — TODOS do mesmo
   tamanho (largura fixa + altura), pedido do Orlando: "gráficos enfileirados,
   um do lado do outro, do mesmo tamanho, um pouco maiores, sem zig-zag".
   O .card interno (_pieCardHTML compact) ocupa o bloco (flex:1 — divide com
   a barra "pendentes × concluídos" no bloco "Por ato", que é irmã do .card);
   sem pílula, cantos retos herdados de .card. Altura fixa do bloco (não
   min-height) garante que TODOS os blocos fiquem exatamente no mesmo nível,
   mesmo que a legenda de um tenha mais itens que a de outro (overflow
   vertical vira scroll interno discreto em vez de esticar o card e
   desalinhar os vizinhos). */
.dsk-banco-pizza-bloco {
  flex: none;
  width: 264px;
  height: 168px;
  display: flex;
  flex-direction: column;
}
.dsk-banco-pizza-bloco .card {
  width: 100%;
  /* flex (não height:100% fixo): no bloco "Por ato" o .card divide a altura
     de 168px com a barra "pendentes × concluídos" (2º filho do bloco, fora
     do .card) — flex:1;min-height:0 deixa o .card crescer só até o espaço
     que sobra, sem empurrar a barra pra fora/escondida. Nos blocos sem
     barra, o .card é o único filho e ocupa os 168px inteiros normalmente. */
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Donut um pouco maior (o _pieSVG usa viewBox 36x36 — escalar via CSS não
   distorce o desenho, só aumenta o tamanho visual). */
.dsk-banco-pizza-bloco .card svg { width: 92px !important; height: 92px !important; }
/* A linha donut+legenda ocupa o espaço restante do card (abaixo do título)
   e centraliza verticalmente — mantém o donut sempre no mesmo Y em todos
   os blocos, mesmo quando a legenda tem menos linhas. */
.dsk-banco-pizza-bloco .card > div:last-child {
  flex: 1;
  min-height: 0;
  align-items: center !important;
}
.dsk-banco-pizza-bloco .card > div:last-child > div:last-child {
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.dsk-banco-pizza-bloco .card > div:last-child > div:last-child::-webkit-scrollbar { display: none; }
/* Barra "pendentes × concluídos" (bloco "Por ato") — 2º filho do bloco,
   IRMÃO do .card (fora dele) — nunca é espremida pelo flex do wrapper. */
.dsk-banco-pizza-bloco > div:not(.card) { flex-shrink: 0; }

/* Barra retangular "pendentes × concluídos" embutida no bloco "Por ato"
   (trazida do painel de mini-gráficos que ficava acima de "Estatísticas do
   banco") — cantos retos, grossa, sem pílula. */
.dsk-banco-pizza-barra-lbl {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.dsk-banco-pizza-barra {
  display: flex;
  height: 14px;
  width: 100%;
  background: var(--border);
  border-radius: 0;
  overflow: hidden;
}
.dsk-banco-pizza-barra > div { border-radius: 0; }
.dsk-banco-pizza-barra-val {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: var(--text-2);
  margin-top: 4px;
}

/* Brand bar (top of each main tab) */
.brandbar {
  display: flex; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 20px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

/* Splash screen */
.splash-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
}

/* Search bar */
.searchbar {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.searchbar input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--text); outline: none;
}
.searchbar input::placeholder { color: var(--text-3); }

/* Toggle (rectangular per design system) */
.toggle {
  width: 36px; height: 20px;
  background: var(--border-strong);
  border-radius: 4px;
  position: relative;
  padding: 2px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.toggle.on { background: var(--brand); }
.toggle-thumb {
  width: 16px; height: 16px;
  background: white;
  border-radius: 2px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .15s;
}
.toggle.on .toggle-thumb { left: 18px; }

/* ── Sheet de navegação (escolher Waze / Google / Apple) e demais
   bottom-sheets que reusam .nav-sheet__backdrop/.nav-sheet__panel
   (novidades, notificações, Quadro de Audiências/sino, painel de IA).
   Corrigido 2026-07-22: cada wrapper (#nav-sheet, #novidades-sheet,
   #notif-sheet, #aud-sheet, #ia-sheet) precisa do PRÓPRIO position:fixed
   + z-index — antes só #nav-sheet tinha a regra, então os demais IDs
   ficavam sem position:fixed (caíam no fluxo normal do documento) e o
   painel (.nav-sheet__panel, position:absolute) acabava posicionado
   atrás do conteúdo da Home (mapa/abas/cards), que tem seu próprio
   stacking context. z-index 10000 fica acima de tudo que já existe no
   app (maior valor anterior era 9999). */
#nav-sheet,
#novidades-sheet,
#notif-sheet,
#aud-sheet,
#ia-sheet {
  position: fixed; inset: 0; z-index: 10000;
}
.nav-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 15, 26, .45);
  animation: navFade .14s ease;
}
.nav-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(10, 15, 26, .18);
  animation: navUp .18s cubic-bezier(.2, .7, .2, 1);
}
.nav-sheet__panel .nav-opt { text-transform: none; letter-spacing: .01em; font-size: 14px; }
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes navUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ══════════════════════════════════════════════════
   TELA GERAR CERTIDÃO (desktop)
   dk-gen-* — grid 2 colunas: formulário + prévia
   ══════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .dk-gen-wrap {
    display: grid;
    /* T-rail (miniaturas de páginas): coluna esquerda reduzida ~13% (era 1fr)
       pra abrir espaço pro rail dentro da coluna direita sem encolher a
       folha perceptivelmente — ver .dk-gen-prev-row/.dk-gen-prev-rail. */
    grid-template-columns: .75fr 1.12fr;
    gap: 14px;
    align-items: start;
    height: 100%;
    overflow: hidden;
    /* ── R3 (09/07) — cor "ativa" dos icon-buttons do cabeçalho da prévia
       (mic + varinha, ver .dk-gen-hdr-icon abaixo). ÓRFÃ desde R6 (09/07
       noite, tiles 3D do Orlando): os ícones deixaram de ser SVG
       currentColor e viraram <img> (tile 3D próprio) — o dormente/ativo
       agora é feito via filter (grayscale/opacity vs. cor plena) na própria
       imagem, não mais via esta cor. Variável mantida sem uso (histórico/
       segurança, custo zero) — não remover sem checar se algo mais passou
       a depender dela. */
    --gen-accent: #78828F;
  }
  .dk-gen-wrap.modelosia-on { --gen-accent: #1D5FA8; }

  .dk-gen-col-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    height: 100%;
    padding-right: 2px;
    padding-bottom: 16px;
  }
  .dk-gen-col-form::-webkit-scrollbar { width: 0; }

  .dk-gen-col-prev {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* ── Rail de miniaturas de páginas (pág.1=folha + anexos) ──
     Linha que contém a folha (.dk-gen-prev-card, flex:1) e o rail estreito
     à direita dela. Só a ÁREA da folha ganha o rail ao lado — label/fmtbar/
     aviso continuam ocupando a largura toda acima, como hoje. */
  .dk-gen-prev-row {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 10px;
    align-items: stretch;
  }
  .dk-gen-prev-row .dk-gen-prev-card { flex: 1; min-width: 0; }

  .dk-gen-prev-rail {
    width: 92px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 1px 1px 4px;
  }
  .dk-gen-prev-rail::-webkit-scrollbar { width: 0; }

  .dk-gen-rail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
  }
  .dk-gen-rail-thumb {
    width: 100%;
    aspect-ratio: 74 / 100;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
  }
  .dk-gen-rail-item.on .dk-gen-rail-thumb {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  /* Miniatura estática da pág. 1 (folha) — barrinha de cabeçalho + linhas,
     sem renderizar o texto real da certidão. */
  .dk-gen-rail-thumb-folha {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 6px;
  }
  .dk-gen-rail-thumb-folha .bar {
    height: 4px;
    border-radius: 1px;
    background: #33475b;
    width: 60%;
    margin: 0 auto 3px;
  }
  .dk-gen-rail-thumb-folha .ln {
    height: 2px;
    border-radius: 1px;
    background: #d7dbe0;
    width: 100%;
  }
  .dk-gen-rail-thumb-folha .ln.short { width: 68%; }
  .dk-gen-rail-legenda {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    line-height: 1.25;
    color: var(--text-3);
    text-align: center;
  }
  .dk-gen-rail-item.on .dk-gen-rail-legenda { color: var(--brand); font-weight: 600; }

  /* Bloco-card do formulário */
  .dk-gen-block {
    background: color-mix(in srgb, var(--text-3) 6%, var(--surface));
    border: none;
    border-radius: 8px;
    padding: 12px 14px 14px;
  }

  .dk-gen-block-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 9px;
  }

  /* Campo de busca de mandados — T1: fundo branco (var(--surface)) para contrastar com o card azulado */
  .dk-gen-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-bottom: 8px;
  }
  .dk-gen-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
  }
  .dk-gen-search input::placeholder { color: var(--text-3); }

  /* Lista de paradas (antes de selecionar) */
  .dk-gen-lista {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .dk-gen-lista::-webkit-scrollbar { width: 4px; }
  .dk-gen-lista::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

  .dk-gen-parada-item {
    padding: 9px 11px;
    cursor: pointer;
    border-bottom: 1px solid var(--divider);
    background: var(--surface);
    transition: background .10s;
  }
  .dk-gen-parada-item:last-child { border-bottom: none; }
  .dk-gen-parada-item:hover { background: var(--brand-tint); }

  .dk-gen-parada-nome {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dk-gen-parada-meta {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Card de parada SELECIONADA */
  .dk-gen-selecionada {
    padding: 10px 12px;
    /* interior branco: destaca-se sobre o fundo #d8e2ef do bloco-parte */
    background: var(--surface);
    border: 1px solid #bfcfe4;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(30,58,95,.08);
  }
  .dk-gen-selecionada .dk-gen-parada-nome { color: var(--brand); }

  /* Bloco "1 · Parte" — label não deve virar violeta/azul nos modos IA */
  .dk-gen-block-parte .dk-gen-block-label { color: var(--brand) !important; }

  .dk-gen-selecionada-ato {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-top: 4px;
  }

  /* .dk-gen-trocar — substituído pelo novo estilo no bloco redesign abaixo */

  /* Botões Positiva / Negativa */
  .dk-gen-tipo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dk-gen-tipo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 12px;
    border-radius: 4px;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-2);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
  }
  .dk-gen-tipo-btn:hover { background: var(--bg); }
  .dk-gen-tipo-btn.pos:not(.on):hover { background: #f0fdf4; color: var(--success); border-color: var(--success); }
  .dk-gen-tipo-btn.neg:not(.on):hover { background: #fff1f1; color: var(--danger); border-color: var(--danger); }

  .dk-gen-tipo-btn.pos.on {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
  }
  .dk-gen-tipo-btn.neg.on {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
  }

  /* Select de cenário */
  .dk-gen-select {
    width: 100%;
    padding: 9px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238593A4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
  }
  .dk-gen-select:focus { border-color: var(--brand); }

  /* Textarea do corpo */
  .dk-gen-textarea {
    width: 100%;
    box-sizing: border-box;
    height: 160px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.55;
    resize: vertical;
    outline: none;
  }
  .dk-gen-textarea:focus { border-color: var(--brand); }

  .dk-gen-editavel-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    float: right;
    margin-top: -7px;
    margin-bottom: 4px;
  }

  /* Bloco de comprovante (upload) */
  .dk-gen-upload-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    background: var(--bg);
  }
  /* Hover sinalizado pelo pulinho + cor do ícone (não mais pela borda pontilhada,
     pedido do Orlando 08/07) — só um fundo levíssimo, borda segue sutil. */
  .dk-gen-upload-card:hover { background: var(--brand-tint); }

  .dk-gen-upload-info {
    flex: 1;
    min-width: 0;
  }
  .dk-gen-upload-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text);
  }
  .dk-gen-upload-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
  }
  .dk-gen-upload-nome {
    font-size: 11.5px;
    color: var(--success);
    font-weight: 600;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Print da conversa WhatsApp: colar/arrastar — realce durante o arraste sobre a área */
  .dk-gen-prints-card.dk-gen-drag-over {
    background: var(--brand-tint);
    border-color: var(--brand);
    border-style: dashed;
  }
  .dk-gen-prints-card:focus { outline: none; border-color: var(--brand); }
  /* Área "armada" pra colar (clicou → fica azul, pedido 2026-07-05): estado
     de selecionado bem visível — borda + anel + fundo tintados da marca. */
  .dk-gen-prints-card.dk-gen-prints-armado {
    border-color: var(--brand) !important;
    background: var(--brand-tint);
    box-shadow: 0 0 0 3px var(--brand-tint-strong);
  }
  .dk-gen-prints-card.dk-gen-prints-armado .dk-gen-upload-title,
  .dk-gen-prints-card.dk-gen-prints-armado .dk-gen-upload-sub {
    color: var(--brand) !important;
  }
  #dk-gen-prints-remove:hover { background: rgba(0,0,0,.75); }

  /* ══ Cabeçalho da prévia — REDESENHO 09/07 (R3, pedido literal do Orlando):
     3 zonas fixas em grid (esquerda = icon-buttons mic/varinha; centro =
     título+hint; direita = segmented control de modo). Nenhuma zona
     aparece/some ao trocar de modo — só a cor muda (--gen-accent, ver
     .dk-gen-wrap acima). grid (não flex+absolute) garante que as 3 zonas
     NUNCA se sobrepõem, mesmo em larguras menores de desktop — a coluna
     central (1fr) encolhe/quebra o texto com elegância antes de colidir
     com os cantos.
     AJUSTE R5 (09/07 tarde): a coluna central era `auto` entre duas laterais
     `auto` — quando a R4 alargou a zona esquerda (ícones ganharam rótulo de
     texto), o centro do grid se deslocou e o título saiu do centro REAL da
     folha. Agora as duas laterais são `minmax(0,1fr)` (elásticas e IGUAIS
     entre si) — o centro fica sempre geometricamente no meio do cabeçalho,
     não importa a largura de cada lateral. dk-gen-hdr-left/right continuam
     fazendo stretch (default de grid item) + justify/align para grudar cada
     um na borda externa correspondente (ver abaixo). */
  .dk-gen-prev-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    /* 40px→52px no refino dos tiles (46→52px, ver .dk-gen-hdr-icon abaixo) —
       sem isso o tile bate no teto da linha e desalinha o título central
       verticalmente. Recuo específico p/ 1400px logo abaixo.
       52px→70px (R8, 21/07, Bloco A): sobra pro letreiro de texto abaixo
       de cada ícone (.dk-gen-hdr-icon-wrap/-label) sem cortar nem esticar
       o tile — a coluna central (título) cresce JUNTO nessa mesma linha
       de grid e continua centralizada por align-items:center abaixo.
       70px→76px (FIX achado 1, revisor 22/07): o label "Corrigir certidão
       com IA" agora quebra em até 2 linhas (white-space:normal) em vez de
       nowrap — precisa de mais altura vertical que 1 linha só. */
    min-height: 76px;
    margin-bottom: 4px;
    flex-shrink: 0;
    /* FIX 09/07 (print no ar, pedido literal do Orlando): o cabeçalho tomava
       a largura INTEIRA de .dk-gen-col-prev, mas a folha visível
       (.dk-gen-prev-card) é mais ESTREITA — ela divide espaço com o rail
       de miniaturas (.dk-gen-prev-rail: 92px + 10px de gap, ver acima)
       dentro de .dsk-gen-editor-card (padding + borda 1.5px de cada lado,
       ver _dskGerAcoesCSS). Sem compensar essa diferença, a zona DIREITA do
       cabeçalho (o segmented control) ficava além da borda direita real da
       folha — "vazando" pra fora da página visível, parecendo cortado — e
       o título central (que fica no meio EXATO do cabeçalho) saía do centro
       geométrico real da folha. Os insets abaixo recuam o grid pra bater
       exatamente com as bordas REAIS da folha: esquerda = padding+borda do
       editor-card (igual nos dois lados); direita = esquerda + 92 (rail) +
       10 (gap). Se o rail ou o padding do card mudarem de tamanho, atualizar
       os números aqui junto (mesma lógica, só o valor muda).
       REFINO 09/07 ("folha maior" — pedido literal do Orlando): o padding do
       .dsk-gen-editor-card caiu de 8px pra 6px (sobra ~4px verticais a mais
       pra folha crescer, ver _dskGerAcoesCSS) — esquerda = 6+1.5 = 7.5px
       (era 9.5px); direita = 7.5 + 92 + 10 = 109.5px (era 111.5px). A
       largura da COLUNA (grid-template-columns, também em _dskGerAcoesCSS)
       mudou junto nesse mesmo refino, mas ela NÃO entra nesta conta — os
       insets aqui só dependem de valores em px fixos (padding/borda do
       editor-card + rail + gap), nunca da fração fr da coluna. */
    padding: 0 109.5px 0 7.5px;
  }
  .dk-gen-hdr-left,
  .dk-gen-hdr-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0; /* permite ao grid encolher em vez de vazar (ver seg abaixo) */
  }
  /* INVERSÃO DOS LADOS (22/07/2026 noite — ordem do Orlando): a coluna
     ESQUERDA (.dk-gen-hdr-left, grid col 1) passou a conter a CHAVE
     Sistema/IA Jurídica (+ atalho de orientações) — layout em coluna,
     ancorado à esquerda. A coluna DIREITA (.dk-gen-hdr-right, grid col 3)
     passou a conter os TILES mic + IA em linha, ancorados à direita
     (margin-left:auto empurra o par pro canto direito; gap 26px = respiro
     entre os tiles, herdado do layout anterior). Só trocou de lado — nenhum
     id/bind mudou. */
  .dk-gen-hdr-left { flex-direction: column; align-items: flex-start; gap: 3px; }
  .dk-gen-hdr-right { flex-direction: row; align-items: center; justify-content: flex-end; gap: 26px; margin-left: auto; }
  /* R8 (21/07, Bloco A) — wrapper flex-column por ícone: tile em cima,
     letreiro embaixo. Só um invólucro visual — o <button>/id/bind de
     dentro fica 100% intocado (nenhuma função mexida). align-items:center
     no pai (.dk-gen-hdr-left, acima) mantém o PAR de wrappers centralizado
     verticalmente na linha do grid, que cresce de altura pra caber o
     letreiro (ver min-height maior de .dk-gen-prev-label abaixo) — o
     título central (.dk-gen-hdr-center) segue centralizado nessa MESMA
     linha alta, sem quebrar alinhamento nenhum. */
  .dk-gen-hdr-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .dk-gen-hdr-icon-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: .02em;
    text-transform: none;
    /* FIX achado 2 (revisor, 22/07) — var(--text-3) reprovava WCAG AA
       (3.13:1 claro / 3.97:1 escuro; texto pequeno exige 4.5:1). text-2 é
       mais escuro nos dois temas e passa. */
    color: var(--text-2);
    /* FIX achado 1 (revisor, 22/07) — nowrap fazia "Corrigir certidão com IA"
       transbordar e sobrepor o título central em ≤1440px (o grid elástico
       só protege contra sobreposição se o CONTEÚDO da coluna esquerda tiver
       largura própria limitada; nowrap = largura infinita, furava a defesa).
       Quebra em até 2 linhas, contida na largura do tile — nunca mais larga
       que o próprio ícone (44px padrão / 36px em ≤1400px, ver max-width
       abaixo espelhando cada breakpoint). */
    white-space: normal;
    text-align: center;
    line-height: 1.15;
    max-width: 62px;
  }
  .dk-gen-hdr-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    min-width: 0;
  }
  .dk-gen-hdr-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .dk-gen-hdr-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Badges (ia-status/selo-arquivada) empilhados sob o título — sem o
     margin-left lateral que faziam sentido só na linha antiga. */
  .dk-gen-hdr-badges .dk-gen-ia-status,
  .dk-gen-hdr-badges .dk-gen-selo-arquivada { margin-left: 0; }

  /* ── Ícones do cabeçalho (mic "Voz → Certidão" + varinha "Gerar com IA")
     — R6 (09/07 noite): os SVG Lucide ícone-puro (R5) dão lugar aos TILES 3D
     enviados pelo próprio Orlando (navy+dourado, borda dourada, sombra
     própria embutida na arte — assets/brand/icon-voz-3d.png/icon-ia-3d.png,
     240×240 originais). Os tiles já "chamam atenção sozinhos" (pedido
     original: "moderno e sofisticado") — a barrinha reta (::after) + o glow
     no SVG + a respiração contínua (_dkGerMicRespira) que existiam só pra
     suprir a falta de identidade visual do ícone-linha ficam REDUNDANTES em
     cima de uma imagem com sombra/moldura própria e SAEM. Nenhum
     box-shadow/filter de destaque extra é somado em repouso — só o
     cross-fade de modo (opacity/filter, ~280ms) permanece.
     R7 (09/07, refino de espaçamento): tiles 46px→52px (área de clique
     38px→44px, mantendo a mesma folga de 8px de "sangria" da arte além da
     caixa — proporção idêntica ao tamanho antigo). Breakpoint ≤1400px segue
     o mesmo par (40→44px de arte / 32→36px de caixa). */
  .dk-gen-hdr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .dk-gen-hdr-icon img {
    width: 52px;
    height: 52px;
    display: block;
    flex-shrink: 0;
    -webkit-user-drag: none;
    user-select: none;
    transition: filter .28s ease, transform .16s ease;
  }
  /* Modo Sistema — inertes: tile dessaturado + esmaecido (comunica "existe,
     mas está dormente"); o clique segue bloqueado no próprio handler (JS),
     isto é só o visual. */
  .dk-gen-wrap.sistema-on .dk-gen-hdr-icon {
    cursor: not-allowed;
  }
  .dk-gen-wrap.sistema-on .dk-gen-hdr-icon img {
    filter: grayscale(.9) opacity(.55);
  }
  /* Modo IA Jurídica — ATIVOS: tile em cor plena (sem filtro). Hover dá um
     realce elegante e discreto (leve subida + brilho sutil) — nunca um
     fundo/moldura extra por cima da arte 3D, que já tem presença própria. */
  .dk-gen-wrap.modelosia-on .dk-gen-hdr-icon img {
    filter: none;
  }
  .dk-gen-wrap.modelosia-on .dk-gen-hdr-icon:hover img {
    transform: translateY(-1px);
    filter: brightness(1.06);
  }
  /* Estado "gravando" do mic — o tile CONTINUA visível (nunca é substituído
     por outro conteúdo); o pulso vermelho (mesmas keyframes _dkGerVozPulso
     já usadas historicamente no botão .dk-gen-voz-cert-btn.gravando, ver
     mais abaixo) vira um halo pulsante AO REDOR do tile via box-shadow —
     não preenche/cobre a arte, só emoldura. Saturação sobe um pouco pra
     reforçar "ativo" além do halo — convenção de gravação sempre visível,
     inclusive por cima do estado esmaecido (gravar só é possível em modo
     IA Jurídica, ver guard em _gerBindVozCertidao). */
  .dk-gen-hdr-icon#dk-gen-voz-cert-btn.gravando {
    cursor: pointer;
    border-radius: var(--r, 8px);
    animation: _dkGerVozPulso 1.1s ease-in-out infinite;
  }
  /* Mic REATIVO À VOZ (refino 09/07): --mic-boost é uma var CSS escrita a
     cada frame pelo RAF do medidor de nível (ver _dskVozMedirLoop em
     desktop-screens.js) — 1 (silêncio) a ~1.18 (fala forte). O JS só seta a
     variável (nunca a propriedade em si), então o "quanto" some/anima fica
     inteiramente aqui: escala o tile (transform, não mexe em layout) e
     acompanha com saturação/glow vermelho crescentes — soma por cima do
     halo pulsante (.gravando acima, que anima box-shadow no BOTÃO, não no
     img) sem conflito, os dois rodam em paralelo em elementos/propriedades
     diferentes. transition de transform é ZERADA aqui (a suavização já
     acontece via lerp no JS, quadro a quadro — uma transition CSS por cima
     do lerp deixaria o movimento com atraso duplo/borrachudo). Se o medidor
     falhar (sem permissão de mic, browser sem suporte), --mic-boost nunca é
     escrita e o img fica no valor-padrão (1) — vibração simplesmente não
     aparece, halo pulsante seguindo sozinho como sempre (fail-open). */
  .dk-gen-hdr-icon#dk-gen-voz-cert-btn.gravando img {
    transform: scale(var(--mic-boost, 1));
    filter: saturate(calc(1.35 + (var(--mic-boost, 1) - 1) * 3.6))
            drop-shadow(0 0 calc((var(--mic-boost, 1) - 1) * 38px) rgba(211, 47, 47, .6));
    transition: filter .28s ease;
  }

  /* ── Atalho de orientações de escrita — fica abaixo do segmented control,
     discreto, só visível no modo IA Jurídica (ver _setModo). Mesmos ids de
     sempre. INVERSÃO 22/07: o segmented control (e este atalho) foram pra
     ESQUERDA — o texto agora alinha à esquerda pra acompanhar a coluna. ── */
  .dk-gen-hdr-orient {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--text-3);
    text-align: left;
  }
  .dk-gen-hdr-orient-link {
    color: #1D5FA8;
    text-decoration: underline;
    cursor: pointer;
  }
  /* IA LIVRE (22/07/2026) — chavinha discreta ao lado dos tiles mic/IA (coluna
     direita do cabeçalho). Cantos retos, sem pílula; checkbox pequeno + rótulo
     em 2 linhas minúsculas (--text-3). Só visível no modo IA Jurídica (display
     alternado em _setModo). */
  .dk-gen-ia-livre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    align-self: center;
  }
  .dk-gen-ia-livre input {
    width: 14px; height: 14px; margin: 0; cursor: pointer;
    accent-color: var(--brand); flex-shrink: 0;
  }
  .dk-gen-ia-livre-txt {
    display: flex; flex-direction: column; line-height: 1.05;
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 10px; color: var(--text-2); white-space: nowrap;
  }
  .dk-gen-ia-livre-txt small {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 8.5px; color: var(--text-3); letter-spacing: .01em;
  }

  /* Cabeçalho responsivo (R3, 09/07 + R5, simplificado; R6 tiles 3D) — a
     coluna da prévia encolhe bastante em notebooks 13"/14" (≤1400px de
     janela); o grid de 3 colunas (minmax(0,1fr)/auto/minmax(0,1fr)) só
     impede sobreposição se o CONTEÚDO da coluna esquerda tiver largura
     própria limitada — colunas minmax(0,1fr) encolhem, mas não limitam a
     largura do conteúdo sozinhas (nowrap = largura infinita fura a defesa,
     ver histórico do achado 1 abaixo). Correção real está no próprio
     conteúdo: .dk-gen-hdr-icon-label tem max-width fixo + white-space:normal
     (quebra em até 2 linhas, contida na largura do tile). Este bloco só
     ajusta tamanho de tiles/fontes pra telas 13"/14" ficarem confortáveis.
     CORREÇÃO (achado 1, revisor 22/07): o comentário original deste bloco
     dizia que o grid "IMPEDE qualquer sobreposição por definição" — isso
     era FALSO para conteúdo nowrap (o label novo "Corrigir certidão com IA"
     transbordava e sobrepunha o título em ≤1440px antes do fix acima). */
  @media (max-width: 1400px) {
    .dk-gen-hdr-icon { width: 36px; height: 36px; }
    .dk-gen-hdr-icon img { width: 44px; height: 44px; }
    /* FIX achado 1 (revisor, 22/07): 2 linhas cabem em min-height maior;
       max-width acompanha o tile menor deste breakpoint. */
    .dk-gen-prev-label { min-height: 70px; }
    .dk-gen-hdr-icon-label { font-size: 8px; max-width: 54px; }
    .dk-gen-hdr-titulo { font-size: 12.5px; }
    .dk-gen-prev-hint { font-size: 10px; }
    .dk-gen-hdr-orient { font-size: 9.5px; }
    /* Item 1 (09/07) — rede de segurança: com o inset novo do cabeçalho
       (padding acima), a zona direita tem menos folga em notebooks 13"/14".
       Pedido do Orlando: "se faltar espaço, o seg compacta em vez de
       estourar" — encolhe padding/fonte do segmented control em vez de
       deixar o botão vazar (nunca esconde o rótulo, só aperta). */
    .dk-gen-seg-btn { padding: 6px 10px; font-size: 10.5px; gap: 4px; }
    .dk-gen-seg-btn svg { width: 11px; height: 11px; }
  }

  /* ── Tooltip didático dos icon-buttons do cabeçalho (mic + varinha) ──
     Some do title nativo (mantido p/ acessibilidade/leitor de tela) e some
     ao lado um tooltip PRÓPRIO — retângulo navy, cantos 6px (NUNCA pílula),
     texto branco Inter, seta discreta apontando pro botão. Único <div>
     reaproveitado pelos dois botões (criado 1x, reposicionado a cada hover
     — ver _dskGerHdrTooltipMostrar em desktop-screens.js). position:fixed
     (não fixed ao card) porque o cálculo de posição já usa
     getBoundingClientRect + clamp de viewport — sobrevive a scroll/resize
     sem recálculo extra de listener. */
  .dsk-gen-hdr-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 236px;
    background: #1E3A5F;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease;
  }
  .dsk-gen-hdr-tooltip.show {
    opacity: 1;
    transform: translateY(0);
  }
  .dsk-gen-hdr-tooltip b {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .01em;
    margin-bottom: 3px;
  }
  /* Setinha discreta apontando pro botão — --seta-x é escrita por JS
     (posição horizontal clampada dentro da largura real do tooltip). */
  .dsk-gen-hdr-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: var(--seta-x, 16px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1E3A5F;
  }

  /* Canvas da prévia (moldura + fundo) — a folha é a "página" flutuando
     centralizada aqui dentro (refino 09/07, "folha maior", pedido literal
     do Orlando). align-items/justify-content:center centralizam a folha
     nos dois eixos: na prática, na maioria das resoluções a folha ainda
     preenche quase 100% deste card (ela só tem TETO de tamanho, ver
     .dk-gen-folha abaixo) — a centralização só fica visível de verdade em
     monitores muito largos/altos, quando o teto entra em ação e sobra
     espaço nas laterais/topo-base. Padding só HORIZONTAL (16px) — dá um
     respiro lateral pra folha parecer "flutuando" sem tirar altura útil
     dela (o eixo vertical continua 100% aproveitado). */
  .dk-gen-prev-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 16px;
  }

  /* A "folha" de papel dentro da prévia — REFINO 09/07 ("folha maior",
     pedido literal do Orlando): ganhou largura própria (width:100% do
     card, até um teto de max-width) além do flex:1 de altura que já tinha
     (com o mesmo teto agora também em max-height). Combinada com o
     align-items/justify-content:center do .dk-gen-prev-card acima, essa é
     a folha que fica centralizada — nas resoluções comuns o teto não é
     atingido (ela preenche o espaço, maior que antes graças à coluna mais
     larga em _dskGerAcoesCSS) e só em telas muito grandes o teto entra em
     ação com a folha flutuando centralizada dentro do card. */
  .dk-gen-folha {
    width: 100%;
    max-width: 900px;
    flex: 1;
    max-height: 1200px;
    overflow-y: auto;
    padding: 20px 22px 16px;
    background: #fff;
    color: #111;
    font-size: 12.5px;
    line-height: 1.6;
  }
  .dk-gen-folha::-webkit-scrollbar { width: 4px; }
  .dk-gen-folha::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

  /* Visualizador de anexo (pág. 2, 3...) — ocupa o MESMO espaço da folha
     quando o oficial clica numa miniatura de anexo no rail; some ao voltar
     pra pág. 1 (ver _gerRailAbrirPagina). align-self:stretch (refino "folha
     maior" 09/07): o .dk-gen-prev-card virou align-items:center pra
     centralizar a FOLHA (que tem largura própria, ver acima) — sem isso o
     visualizador de anexo (que não tem largura própria, sempre foi
     "preencher tudo") encolheria pro tamanho do conteúdo em vez de ocupar
     o card inteiro, igual sempre foi. */
  .dk-gen-anexo-view {
    flex: 1;
    align-self: stretch;
    overflow: auto;
    background: #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  .dk-gen-anexo-view img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .dark .dk-gen-folha {
    background: #f8f8f8;
    color: #111;
  }

  .dk-gen-folha-brasao {
    width: 50px;
    height: 50px;
    background: #d0d4dc;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #888;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .dk-gen-folha-trib {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 2px;
  }

  .dk-gen-folha-sala {
    text-align: center;
    font-size: 10.5px;
    color: #444;
    margin-bottom: 8px;
  }

  .dk-gen-folha-div {
    border-top: 1px solid #ccc;
    margin: 8px 0;
  }

  .dk-gen-folha-res {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #333;
    margin-bottom: 10px;   /* respiro antes de "CERTIDÃO" — era 2px */
    padding-bottom: 2px;
  }

  .dk-gen-folha-titulo {
    /* Centrado no mesmo container que o corpo — mesma margem lateral */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #111;
    margin-top: 78px;    /* ≈ 4 linhas acima (2 originais + 2 a pedido do oficial) */
    margin-bottom: 74px; /* ≈ 4 linhas abaixo (2 originais + 2 a pedido do oficial) */
  }

  .dk-gen-folha-corpo {
    font-size: 12px;
    line-height: 1.65;
    color: #1a1a1a;
    text-align: justify;
    white-space: normal;   /* innerHTML com <br> — não pre-wrap para evitar duplas quebras */
    word-break: break-word;
  }

  .dk-gen-folha-data {
    margin-top: 14px;
    font-size: 12px;
    color: #333;
  }

  .dk-gen-folha-assin {
    margin-top: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #111;
    border-top: 1px solid #ccc;
    padding-top: 6px;
  }

  .dk-gen-folha-cota {
    text-align: right;
    font-size: 11.5px;
    color: #555;
    margin-top: 4px;
    font-style: italic;
  }
  /* Rodapé FUNJUS editável inline */
  .dk-gen-folha-cota-edit {
    outline: none;
    cursor: text;
    border-radius: 2px;
    transition: background .12s;
  }
  .dk-gen-folha-cota-edit:hover { background: rgba(30,58,95,.04); }
  .dk-gen-folha-cota-edit:focus { background: rgba(30,58,95,.06); outline: 1px dashed rgba(30,58,95,.18); outline-offset: 2px; }

  /* Affordance genérica de edição — todos os elementos da folha são clicáveis p/ editar
     (cabeçalho, sala, resultado, título CERTIDÃO, data, assinatura) */
  .dk-gen-folha-edit { cursor: text; border-radius: 2px; transition: background .12s; }
  .dk-gen-folha-edit:hover { background: rgba(30,58,95,.045); }
  .dk-gen-folha-edit:focus { background: rgba(30,58,95,.06); outline: 1px dashed rgba(30,58,95,.20); outline-offset: 2px; }

  /* Barra de ações abaixo da prévia */
  /* Footer da prévia — alinha o botão à esquerda, compacto */
  /* ITEM 1 — Barra de ação do gerador: flex wrap, todos na mesma altura */
  /* Padding vertical 8px→6px (refino "folha maior" 09/07, pedido literal do
     Orlando): essa barra é IRMÃ do .dsk-gen-editor-card (fica fora dele,
     abaixo), então encolher sua altura devolve espaço pro editor-card
     (flex:1) crescer — mais um pouco de altura útil pra folha, sem tocar
     nada relacionado ao inset do cabeçalho (que só depende do editor-card
     em si). */
  .dk-gen-prev-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }

  /* Botão principal — "Gerar, chancelar e arquivar".
     I5: fica na PONTA DIREITA da barra (ordem no HTML + margin-left:auto de
     segurança, caso o aviso encolha) e vira VERDE sólido (era azul --brand) —
     é a ação principal/de sucesso da tela. */
  .dk-gen-btn-gerar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--success, #1F9E55);
    color: #fff;
    border: none;
    border-radius: 10px; /* I3: botão grande/principal — raio maior (era 4px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    transition: filter .12s, box-shadow .12s;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(31,158,85,.30), inset 0 -1px 0 rgba(0,0,0,.15);
    flex-shrink: 0;
    margin-left: auto; /* I5: garante a ponta direita mesmo se o aviso encolher */
  }
  .dk-gen-btn-gerar:hover { filter: brightness(1.08); }
  .dk-gen-btn-gerar:disabled { opacity: .5; cursor: default; filter: none; box-shadow: none; }

  /* ITEM 1 — Botão "Visualizar certidões geradas" — navy secundário */
  .dk-gen-btn-hist-full {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    background: var(--surface);
    border: 1.5px solid var(--brand);
    border-radius: 8px; /* I3: raio maior (era 4px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    color: var(--brand);
    white-space: nowrap;
    transition: background .12s, color .12s;
    flex-shrink: 0;
  }
  .dk-gen-btn-hist-full:hover { background: var(--brand-tint); }

  /* I6: aviso estava translúcido demais (bg transparent + color --text-3 +
     ícone opacity .7) — quase ilegível. Agora tem um fundo tint sutil (mesmo
     tom institucional, sem berrar) e texto/ícone mais opacos/legíveis. */
  .dk-gen-ia-aviso-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-tint, rgba(30,58,95,.08));
    border: none;
    border-radius: 6px;
    padding: 5px 9px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--text-2);
    line-height: 1.4;
    flex: 1;
    min-width: 160px;
  }
  .dk-gen-ia-aviso-inline svg { flex-shrink: 0; opacity: .9; }

  /* Mantém o antigo .dk-gen-btn-hist para compatibilidade (ícone clock isolado) */
  .dk-gen-btn-hist {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px; /* I3: raio maior (era 4px) */
    cursor: pointer;
    color: var(--text-2);
    flex-shrink: 0;
    transition: background .12s, color .12s;
  }
  .dk-gen-btn-hist:hover { background: var(--bg); color: var(--brand); }

  /* Toast de feedback */
  .dk-gen-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    pointer-events: none;
    animation: dkGenToastIn .18s ease;
  }
  @keyframes dkGenToastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

  /* ── Painel de Configurações do Gerador ── */
  .dk-gen-block-config {
    background: #d8e2ef;
    border: 1px solid #bfcfe4;
    box-shadow: 0 1px 3px rgba(30,58,95,.08), inset 0 1px 0 rgba(255,255,255,.55);
  }
  .dk-gen-cfg-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 6px 12px; cursor: pointer; /* I3: raio maior (era 6px) */
    font-family: 'Montserrat', sans-serif; font-weight: 600;
    font-size: 11.5px; color: var(--text-2);
    transition: background .12s, color .12s, border-color .12s;
    width: 100%;
  }
  .dk-gen-cfg-btn:hover { background: var(--brand-tint); color: var(--brand); border-color: var(--brand); }
  .dk-gen-cfg-btn.danger:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }
  .dk-gen-cfg-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text);
    box-sizing: border-box;
  }
  .dk-gen-cfg-input:focus { outline: none; border-color: var(--brand); }

  /* ════════════════════════════════════════════════════
     REDESIGN GRANDE — Gerador de Certidão
     ════════════════════════════════════════════════════ */

  /* .dk-gen-block-toggle-ia + família .dk-gen-toggle-ia-* (titulo/sub/wrap/
     desc/ctrl) e as variações .sistema-on/.ia-on/.modelosia-on/.dark
     .dk-gen-block-toggle-ia — REMOVIDAS (certifico-design, 09/07): órfãs
     desde que o bloco saiu do DOM (segmented control virou #dk-gen-modo-seg
     no cabeçalho de 3 zonas, ver .dk-gen-hdr-right acima). Confirmado sem
     uso em js/index.html antes de apagar. */

  /* ── Segmented control Sistema / IA — moderno ── */
  .dk-gen-seg {
    display: inline-flex;
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
  }
  .dk-gen-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px; /* I3: raio maior (era 6px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    /* I10 — não-selecionado estava apagado demais (var(--text-3)); agora quase
       preto, igual ao selecionado ganha destaque só por fundo sólido+branco. */
    color: var(--text, #1B2430);
    background: transparent;
    cursor: pointer;
    /* R3 (09/07): 280ms alinhado ao cross-fade do cabeçalho (--gen-accent
       nos icon-buttons) — a troca de modo "parece deliberada", não um pisca. */
    transition: background .28s ease, color .28s ease, box-shadow .28s ease;
    white-space: nowrap;
  }
  .dk-gen-seg-btn:hover:not(.on) { color: var(--text); }
  /* ITEM 2 — .dk-gen-seg-splus mantido por compatibilidade mas não mais usado */
  .dk-gen-seg-splus { display: none; }
  /* Sistema ativo — verde #1F7A4D (2026-07-05: alinhado com o app mobile,
     ver _SEL_CORES em capture.js e _GDR_SEL_CORES em gerador.js — mesma cor
     em app e desktop pro mesmo modo). */
  .dk-gen-seg-btn.sistema.on {
    background: #1F7A4D;
    color: #fff;
    box-shadow: 0 1px 4px rgba(31,122,77,.30), inset 0 -1px 0 rgba(0,0,0,.12);
  }
  /* S+IA ativo — GUARDADO (sem botão no DOM hoje, ver _MODO_SIA_GUARDADO em
     desktop-screens.js). Azul claro forte (ITEM 2) mantido só como paridade
     de código; inatingível pela UI atual. */
  .dk-gen-seg-btn.ia.on {
    background: #3B82F6;
    color: #fff;
    box-shadow: 0 1px 4px rgba(59,130,246,.35), inset 0 -1px 0 rgba(0,0,0,.12);
  }
  /* IA Jurídica ativo — azul #1D5FA8 (2026-07-05: era navy #06141F do antigo
     "Totalmente IA"; alinhado com o app mobile e com o botão "Voz → Certidão"
     desta mesma tela, que já usa #1D5FA8). */
  .dk-gen-seg-btn.modelosia.on {
    background: #1D5FA8;
    color: #fff;
    box-shadow: 0 1px 4px rgba(29,95,168,.35), inset 0 -1px 0 rgba(0,0,0,.12);
  }

  /* ── Modo "IA Jurídica" (modelosia-on) — AZUL #1D5FA8 (2026-07-05: era navy
     #06141F/#1E3A5F do antigo "Totalmente IA"; realinhado com o rótulo novo
     "IA Jurídica" e com a paleta do app mobile/botão de voz da mesma tela) ── */
  .dk-gen-wrap.modelosia-on .dk-gen-prev-card {
    border: 2px solid #1D5FA8;
    box-shadow: 0 0 0 3px rgba(29,95,168,.16), 0 4px 20px rgba(29,95,168,.30);
    animation: dkModelosIaGlow 2.2s ease-in-out infinite;
  }
  @keyframes dkModelosIaGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(29,95,168,.16), 0 0 18px rgba(29,95,168,.22); }
    50%      { box-shadow: 0 0 0 3px rgba(29,95,168,.28), 0 0 36px rgba(29,95,168,.42); }
  }
  /* Badge "IA Jurídica" no rótulo — REMOVIDO em 09/07 (R3): o cabeçalho de
     3 zonas já comunica o modo IA Jurídica de sobra (segmented control
     sempre visível na zona direita + icon-buttons azuis na esquerda);
     manter o ::after aqui duplicava o sinal e, pior, com .dk-gen-prev-label
     virando grid de 3 colunas o ::after nasceria como uma 4ª célula solta
     numa linha implícita abaixo do cabeçalho — visual quebrado. O título
     central (.dk-gen-hdr-titulo) fica sempre navy neutro, sem recolorir por
     modo (evita um 3º sinal de cor concorrendo com ícones/seg. control). */
  /* Botão "IA Jurídica" no segmented — azul sólido */
  .dk-gen-wrap.modelosia-on .dk-gen-seg-btn.modelosia.on {
    background: #1D5FA8;
    box-shadow: 0 1px 8px rgba(29,95,168,.6), inset 0 -1px 0 rgba(0,0,0,.26);
  }
  /* I5: Botão Gerar fica SEMPRE verde sólido (ação principal), em qualquer
     modo — removida a sobrescrita navy escuro que havia aqui (era inconsistente
     com o pedido de "Gerar" = verde fixo). */
  /* Coluna form — SEM banho/gradiente (pedido do Orlando 08/07): o gradiente
     170deg criava uma "mancha horizontal" entre os cards no modo azul. O modo
     Sistema (verde) não tem banho na coluna e fica uniforme — igualado aqui. */
  .dk-gen-wrap.modelosia-on .dk-gen-col-form {
    background: transparent;
    border-radius: 4px;
  }
  /* Cards pick/atos/config — fundo azul mais forte (navy denso), sem borda lateral (I2) */
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config {
    border-left: none;
    background: #A9C4E4;
  }
  /* Rótulos dos blocos — navy escuro (legível sobre o azul mais forte) */
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-pick .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-atos .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config .dk-gen-block-label {
    color: #06141F;
  }
  /* Hover nos botões de resultado — navy escuro */
  .dk-gen-wrap.modelosia-on .dk-gen-res-btn.pos:not(.on):hover {
    background: linear-gradient(120deg, rgba(30,58,95,.14), #c4e2d0);
    border-color: rgba(30,58,95,.40);
  }
  .dk-gen-wrap.modelosia-on .dk-gen-res-btn.neg:not(.on):hover {
    background: linear-gradient(120deg, rgba(30,58,95,.14), #f4cccc);
    border-color: rgba(30,58,95,.40);
  }
  .dk-gen-wrap.modelosia-on .dk-gen-res-btn.dev:not(.on):hover {
    background: linear-gradient(120deg, rgba(30,58,95,.14), #efd9ad);
    border-color: rgba(30,58,95,.40);
  }
  .dk-gen-wrap.modelosia-on .dk-gen-ato-btn:hover {
    box-shadow: 0 2px 10px rgba(30,58,95,.35);
  }

  /* ITEM 6 — Meus modelos: faixas de cabeçalho de grupo mais visuais */
  /* A JS já passa style inline com a cor; aqui reforçamos padding e borda inferior */
  #dsk-modelos-area [style*="display:flex"][style*="justify-content:space-between"][style*="padding:10px 0 6px"] {
    border-bottom: 2px solid currentColor;
    padding-bottom: 4px !important;
    margin-bottom: 2px;
  }
  /* Cada item de cenário: leve faixa de cor ao hover */
  #dsk-modelos-area [style*="display:flex"][style*="align-items:center"][style*="padding:10px 14px"] {
    transition: background .12s;
  }
  #dsk-modelos-area [style*="display:flex"][style*="align-items:center"][style*="padding:10px 14px"]:hover {
    background: var(--surface-2);
  }

  /* ── Botão "Modelo por IA" na tela Meus modelos ── */
  .dsk-mod-ia-btn {
    background: var(--brand-tint, #d8e2ef);
    border: 1px solid var(--brand-tint-strong, #c5d4e8);
    color: var(--brand);
    cursor: pointer;
    padding: 5px 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
  }
  .dsk-mod-ia-btn:hover {
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
    border-color: var(--brand);
  }

  /* ── Botão "Abrir mandado" — compacto, lado a lado com Trocar parte, tom teal ── */
  .dk-gen-abrir-mandado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: #0d9488;
    color: #fff;
    border: 1.5px solid #0f766e;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, box-shadow .12s;
    box-shadow: 0 1px 3px rgba(13,148,136,.30), inset 0 -1px 0 rgba(0,0,0,.12);
  }
  .dk-gen-abrir-mandado:hover { background: #0f766e; box-shadow: 0 2px 6px rgba(13,148,136,.38); }

  /* T6: botão "Abrir em outra janela" — mesmo shape que Abrir mandado, teal mais fraco */
  .dk-gen-abrir-nova-janela {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: #5eada6;
    color: #fff;
    border: 1.5px solid #4d9490;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, box-shadow .12s;
    box-shadow: 0 1px 3px rgba(94,173,166,.28), inset 0 -1px 0 rgba(0,0,0,.10);
  }
  .dk-gen-abrir-nova-janela:hover { background: #4d9490; box-shadow: 0 2px 6px rgba(94,173,166,.36); }

  /* T5: iframe do mandado dentro da coluna de prévia */
  .dk-gen-prev-iframe-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
  }
  .dk-gen-prev-iframe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #1E3A5F;
    border-radius: 4px 4px 0 0;
    flex-shrink: 0;
  }
  .dk-gen-prev-iframe-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .dk-gen-prev-iframe-sair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: background .12s;
  }
  .dk-gen-prev-iframe-sair:hover { background: rgba(255,255,255,.28); }
  .dk-gen-prev-iframe {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: 0 0 4px 4px;
    min-height: 460px;
  }

  /* ════════ MODO S+IA — AZUL CLARO NÍTIDO (distinguível do Sistema e do Totalmente IA) ════════
     ITEM 2: ia-on usa azul claro puro (#3B82F6 / sky blue) — BEM diferente do modelosia-on escuro */
  .dk-gen-wrap.ia-on .dk-gen-prev-card {
    border: 1.5px solid #93C5FD;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10), 0 2px 12px rgba(59,130,246,.14);
  }
  /* Badge "S + IA" no rótulo — REMOVIDO em 09/07 (R3), mesma razão do
     modelosia-on acima (modo 'ia' já é legado/inatingível pela UI hoje,
     ver _MODO_SIA_GUARDADO em desktop-screens.js). */
  /* Botão S+IA do segmented — azul médio */
  .dk-gen-wrap.ia-on .dk-gen-seg-btn.ia.on {
    background: #3B82F6;
    box-shadow: 0 1px 6px rgba(59,130,246,.40), inset 0 -1px 0 rgba(0,0,0,.12);
  }
  /* I5: Botão Gerar fica SEMPRE verde sólido (ação principal) — removida a
     sobrescrita azul nítido que havia aqui. */
  /* Coluna de formulário ganha banho azul claro */
  .dk-gen-wrap.ia-on .dk-gen-col-form {
    background: linear-gradient(170deg, rgba(59,130,246,.06) 0%, transparent 60%);
    border-radius: 4px;
  }
  /* Cards pick/atos/config — fundo azul um pouco mais forte que o modo Sistema, sem borda lateral (I2) */
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config {
    border-left: none;
    background: #D6E2F0;
  }
  /* Rótulos dos blocos — azul navy */
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config .dk-gen-block-label {
    color: #1E3A5F;
  }
  /* Botões de resultado no modo S+IA — hover azul claro */
  .dk-gen-wrap.ia-on .dk-gen-res-btn.pos:not(.on):hover {
    background: linear-gradient(120deg, #DBEAFE, #c4e2d0);
    border-color: #93C5FD;
  }
  .dk-gen-wrap.ia-on .dk-gen-res-btn.neg:not(.on):hover {
    background: linear-gradient(120deg, #DBEAFE, #f4cccc);
    border-color: #93C5FD;
  }
  .dk-gen-wrap.ia-on .dk-gen-res-btn.dev:not(.on):hover {
    background: linear-gradient(120deg, #DBEAFE, #efd9ad);
    border-color: #93C5FD;
  }
  /* Botões de ato — hover azul claro */
  .dk-gen-wrap.ia-on .dk-gen-ato-btn:hover {
    box-shadow: 0 2px 8px rgba(59,130,246,.28);
  }

  /* ── Bloco 1: cabeçalho com busca inline ── */
  .dk-gen-bloco1-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .dk-gen-bloco1-header .dk-gen-block-label { margin-bottom: 0; flex-shrink: 0; }
  .dk-gen-search-inline {
    flex: 1;
    margin-bottom: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface); /* T1: branco, igual ao campo standalone */
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .dk-gen-search-inline input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    outline: none;
  }
  .dk-gen-search-inline input::placeholder { color: var(--text-3); }

  /* ── Card da parte selecionada ── */
  .dk-gen-selecionada-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .dk-gen-selecionada-info { flex: 1; min-width: 0; }

  /* Linha de botões: Trocar parte + Abrir mandado + Abrir em outra janela lado a lado.
     T6: flex-wrap para acomodar 3 botões sem overflow.
     R4 (09/07, pedido literal do Orlando): o mic SAIU daqui faz tempo (virou
     icon-button fixo no cabeçalho da prévia — ver .dk-gen-hdr-icon) e a
     fileira ficou grudada na ESQUERDA por herança do flex padrão; agora os
     3 botões alinham à DIREITA do card (justify-content:flex-end). O
     .dk-gen-voz-cert-btn (classe morta, ver _gerHtmlVozCertidaoBtn — órfã,
     não é mais renderizada aqui) mantém seu próprio margin-left:auto por
     segurança histórica, mas não afeta esta fileira: nenhum filho atual
     carrega essa classe. */
  .dk-gen-selecionada-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
  }

  /* ── Microfone "Voz → Certidão" (Tarefa 5 — redesenho / ajuste "mic de pé") ──
     Encostado no canto inferior direito do card, ao lado de "Abrir em outra
     janela". Botão RETANGULAR (var(--r), PROIBIDO 50%/999px), maior e mais
     chamativo: ícone 'mic' GRANDE em destaque vertical (28px), ocupando a
     altura toda à esquerda do botão, com o rótulo ao lado — deixa óbvio que
     é uma ação de GRAVAR (mic "de pé", não deitado na linha do texto).
     Gradiente + sombra. TEMA POR MODO — a cor de base segue o modo ativo do
     gerador (classe em .dk-gen-wrap):
       • .sistema-on   → verde  (#1F7A4D)
       • .modelosia-on → azul   (#1D5FA8)
     Hoje o botão só é injetado no DOM quando st.modo==='modelosia' (ver
     _gerHtmlVozCertidaoBtn) — o tema 'sistema-on' fica pronto no CSS para
     cobrir esse estado sem custo, caso o botão passe a existir lá também.
     Estado "gravando" continua vermelho (convenção universal de gravação,
     mais visível que seguir a cor do modo) + pulso mais forte. */
  .dk-gen-voz-cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-left: auto;
    padding: 8px 20px 8px 16px;
    min-height: 46px;
    background: linear-gradient(135deg, #1D5FA8, #123E70);
    color: #fff;
    border: 1.5px solid #123E70;
    border-radius: var(--r, 8px);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .01em;
    line-height: 1.15;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, box-shadow .12s, transform .1s;
    box-shadow: 0 3px 12px rgba(29,95,168,.38), inset 0 -1px 0 rgba(0,0,0,.16);
  }
  /* Mic GRANDE em destaque, "de pé", ocupando a altura toda à esquerda —
     ponto central do pedido: escala (28px) + área própria com leve
     separador translúcido pra ler como um bloco de ícone, não decoração. */
  .dk-gen-voz-cert-btn #dk-gen-voz-cert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    padding-right: 10px;
    margin-right: 2px;
    border-right: 1.5px solid rgba(255,255,255,.28);
  }
  .dk-gen-voz-cert-btn #dk-gen-voz-cert-icon svg { width: 28px; height: 28px; }
  .dk-gen-voz-cert-btn #dk-gen-voz-cert-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
  }
  .dk-gen-voz-cert-btn:hover {
    background: linear-gradient(135deg, #2670C4, #164E8A);
    box-shadow: 0 4px 16px rgba(29,95,168,.48);
  }
  .dk-gen-voz-cert-btn:active { transform: scale(.97); }
  .dk-gen-voz-cert-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.3);
  }
  /* Tema SISTEMA — verde (pronto para quando o botão existir nesse modo) */
  .dk-gen-wrap.sistema-on .dk-gen-voz-cert-btn:not(.gravando) {
    background: linear-gradient(135deg, #1F7A4D, #145433);
    border-color: #145433;
    box-shadow: 0 3px 12px rgba(31,122,77,.38), inset 0 -1px 0 rgba(0,0,0,.16);
  }
  .dk-gen-wrap.sistema-on .dk-gen-voz-cert-btn:not(.gravando):hover {
    background: linear-gradient(135deg, #279C61, #1A6B41);
    box-shadow: 0 4px 16px rgba(31,122,77,.48);
  }
  /* Tema IA JURÍDICA — azul (modo 'modelosia', onde o botão vive hoje) */
  .dk-gen-wrap.modelosia-on .dk-gen-voz-cert-btn:not(.gravando) {
    background: linear-gradient(135deg, #1D5FA8, #123E70);
    border-color: #123E70;
    box-shadow: 0 3px 12px rgba(29,95,168,.38), inset 0 -1px 0 rgba(0,0,0,.16);
  }
  .dk-gen-wrap.modelosia-on .dk-gen-voz-cert-btn:not(.gravando):hover {
    background: linear-gradient(135deg, #2670C4, #164E8A);
    box-shadow: 0 4px 16px rgba(29,95,168,.48);
  }

  /* Estado "gravando" — vermelho + pulso mais forte (contido no botão, sem
     crescer/deslocar o layout ao redor — só box-shadow) */
  @keyframes _dkGerVozPulso {
    0%   { box-shadow: 0 3px 12px rgba(211,47,47,.42), 0 0 0 0 rgba(211,47,47,.32); }
    50%  { box-shadow: 0 3px 12px rgba(211,47,47,.60), 0 0 0 8px rgba(211,47,47,.12); }
    100% { box-shadow: 0 3px 12px rgba(211,47,47,.42), 0 0 0 0 rgba(211,47,47,.32); }
  }
  .dk-gen-voz-cert-btn.gravando {
    background: linear-gradient(135deg, #E53935, #B71C1C);
    border-color: #B71C1C;
    animation: _dkGerVozPulso 1.1s ease-in-out infinite;
  }
  .dk-gen-voz-cert-btn.gravando:hover {
    background: linear-gradient(135deg, #EF5350, #C62828);
  }

  /* Onda discreta (3 barrinhas) que acompanha a transcrição parcial — cresce/
     encolhe em altura, cantos retos, sem pílula */
  .dk-gen-voz-onda {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 14px;
  }
  .dk-gen-voz-onda span {
    display: block;
    width: 2.5px;
    background: #fff;
    border-radius: 0;
    animation: _dkGerVozBarra .85s ease-in-out infinite;
  }
  .dk-gen-voz-onda span:nth-child(1) { height: 6px;  animation-delay: 0s; }
  .dk-gen-voz-onda span:nth-child(2) { height: 13px; animation-delay: .15s; }
  .dk-gen-voz-onda span:nth-child(3) { height: 8px;  animation-delay: .3s; }
  @keyframes _dkGerVozBarra {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
  }

  /* Painel de transcrição ao vivo + erro — aparece ABAIXO da linha de botões,
     dentro do próprio card da parte. Cantos retos, borda navy fina. */
  .dk-gen-voz-cert-painel {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-left: 3px solid #7C3AED;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.5;
  }
  .dk-gen-voz-cert-painel.erro {
    border-left-color: var(--danger, #D32F2F);
    color: var(--danger, #B71C1C);
    font-style: italic;
  }
  .dk-gen-voz-cert-painel .dk-gen-voz-cert-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7C3AED;
    margin-bottom: 5px;
  }
  .dk-gen-voz-cert-painel.erro .dk-gen-voz-cert-label { color: var(--danger, #B71C1C); }
  .dk-gen-voz-cert-painel .dk-gen-voz-cert-txt {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .dk-gen-voz-cert-painel .dk-gen-voz-cert-txt:empty::before {
    content: 'Fale — a transcrição aparece aqui em tempo real…';
    color: var(--text-3);
    font-style: italic;
  }

  /* Botão "Trocar parte" — mais destacado: borda/sombra reforçadas */
  .dk-gen-trocar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--brand-tint);
    color: var(--brand);
    border: 1.5px solid rgba(30,58,95,.28);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, box-shadow .12s;
    box-shadow: 0 1px 3px rgba(30,58,95,.14), inset 0 -1px 0 rgba(0,0,0,.09);
  }
  .dk-gen-trocar:hover { background: #d4e2f0; border-color: rgba(30,58,95,.42); box-shadow: 0 2px 6px rgba(30,58,95,.18); }

  /* ── Bloco 2: Resultado — 3 botões grandes ── */
  .dk-gen-resultado-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* Botões de resultado — fundo tint no estado normal, sólido no .on
     Sombra suave dá profundidade sem poluir */
  .dk-gen-res-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 10px 12px;
    border-radius: 10px; /* I3: botão grande — raio maior (era 4px) */
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 -1px 0 rgba(0,0,0,.10);
  }
  .dk-gen-res-btn span { font-size: 13px; font-weight: 700; line-height: 1; }
  .dk-gen-res-btn small { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 10px; line-height: 1.2; }

  /* Não-selecionado: fundo tint REFORÇADO + texto na cor + borda mais presente.
     T3: tints ligeiramente mais saturados para mais vivacidade. */
  .dk-gen-res-btn.pos { background: #6fcb9f; color: #103d24; border: none; }
  .dk-gen-res-btn.neg { background: #f28e8b; color: #7d1414; border: none; }
  .dk-gen-res-btn.con { background: #8bb4e6; color: #123150; border: none; }
  .dk-gen-res-btn.pos small { color: rgba(46,125,79,.80); }
  .dk-gen-res-btn.neg small { color: rgba(220,38,38,.80); }
  .dk-gen-res-btn.con small { color: rgba(30,58,95,.70); }

  /* Hover com elevação — leve sombra colorida + darkening. T3: tints hovere consistentes com base mais saturada. */
  .dk-gen-res-btn.pos:not(.on):hover { background: #b8d8c8; box-shadow: 0 3px 10px rgba(46,125,79,.26), inset 0 -1px 0 rgba(0,0,0,.10); transform: translateY(-1px); }
  .dk-gen-res-btn.neg:not(.on):hover { background: #f2bcbc; box-shadow: 0 3px 10px rgba(220,38,38,.22), inset 0 -1px 0 rgba(0,0,0,.10); transform: translateY(-1px); }
  .dk-gen-res-btn.con:not(.on):hover { background: #baccde; box-shadow: 0 3px 10px rgba(30,58,95,.22),  inset 0 -1px 0 rgba(0,0,0,.10); transform: translateY(-1px); }

  /* Selecionado: fundo sólido + texto branco + sombra pronunciada */
  .dk-gen-res-btn.pos.on { background: #2E7D4F; color: #fff; border: none; box-shadow: 0 2px 6px rgba(46,125,79,.35), inset 0 -2px 0 rgba(0,0,0,.18); }
  .dk-gen-res-btn.neg.on { background: var(--danger);  color: #fff; border: none; box-shadow: 0 2px 6px rgba(220,38,38,.30), inset 0 -2px 0 rgba(0,0,0,.18); }
  .dk-gen-res-btn.con.on { background: var(--brand);   color: #fff; border: none; box-shadow: 0 2px 6px rgba(30,58,95,.30),  inset 0 -2px 0 rgba(0,0,0,.18); }
  .dk-gen-res-btn.pos.on small,
  .dk-gen-res-btn.neg.on small,
  .dk-gen-res-btn.con.on small { color: rgba(255,255,255,.80); }

  /* ── Grupos de ato (bloco 3) — cor por grupo via inline style ──
     As cores são injetadas pelo JS via data-cor/data-tint em cada botão.
     O CSS define apenas estrutura, tamanho e transição. Estado .on e hover
     são aplicados via JS com style.background/color diretos (cor dinâmica).
     Grid uniforme: todos os botões mesma largura mínima, alinhados. */
  .dk-gen-grupo { margin-bottom: 14px; }
  .dk-gen-grupo:last-child { margin-bottom: 0; }
  .dk-gen-grupo-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    /* cor e border-color injetadas via style inline */
  }
  /* Grid com colunas de largura fixa — uniformidade visual */
  .dk-gen-ato-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
  }
  .dk-gen-ato-btn {
    /* largura uniforme via grid — não usa flex */
    width: 100%;
    padding: 8px 10px;
    /* background, color, border e box-shadow gerenciados via JS (cor dinâmica por grupo) */
    border-radius: 8px; /* I3: raio maior (era 4px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    transition: filter .10s, box-shadow .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    /* sombra leve base (reforçada via JS no estado .on) */
    box-shadow: 0 1px 2px rgba(0,0,0,.07);
    /* mais fraco que o sólido puro (pedido do Orlando — 2ª rodada, mais suave) */
    filter: saturate(.7) brightness(1.14);
  }
  /* .on — fundo sólido + sombra pronunciada — aplicado via JS com style direto (cor dinâmica) */

  /* ── Motivos de negativa — fundo tint no normal, sólido no .on ── */
  .dk-gen-motivo-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .dk-gen-motivo-btn {
    padding: 6px 11px;
    background: #fae4e4;                   /* T3: tint vermelho levemente mais saturado */
    border: 1px solid rgba(220,38,38,.30);
    border-radius: 8px; /* I3: raio maior (era 4px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--danger);
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.08);
  }
  .dk-gen-motivo-btn:hover { background: #f9dada; filter: none; box-shadow: 0 3px 8px rgba(220,38,38,.16), inset 0 -1px 0 rgba(0,0,0,.08); transform: translateY(-1px); }
  .dk-gen-motivo-btn.on {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 2px 6px rgba(220,38,38,.30), inset 0 -2px 0 rgba(0,0,0,.18);
  }

  /* ── Cabeçalho do bloco tipo de ato (flex com botão WhatsApp à direita) ── */
  .dk-gen-ato-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  #dk-gen-whatsapp-btn {
    padding: 6px 12px;
    border-radius: var(--r, 8px);
    border: 2px solid #25D366;
    background: transparent;
    color: #25D366;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s;
  }
  #dk-gen-whatsapp-btn:hover { background: rgba(37,211,102,.10); }
  #dk-gen-whatsapp-btn.on { background: #25D366; color: #fff; border-color: #128C7E; }
  #dk-gen-whatsapp-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* ── Campo cota FUNJUS inline ── */
  .dk-gen-of-cota-field { display: flex; align-items: center; gap: 8px; }
  .dk-gen-of-cota-field .dk-gen-oficial-lbl { white-space: nowrap; margin-bottom: 0; }

  /* ── Faixa de data/hora (enxuta, horizontal) ── */
  .dk-gen-block-datarow { padding: 8px 14px; }
  .dk-gen-datarow { display: flex; align-items: center; gap: 10px; }
  .dk-gen-datarow .dk-gen-block-label { margin-bottom: 0; flex-shrink: 0; white-space: nowrap; }
  .dk-gen-input-data { flex: 1; min-width: 120px; max-width: 150px; box-sizing: border-box; }
  .dk-gen-input-hora { width: 92px; flex-shrink: 0; box-sizing: border-box; }
  /* Cota FUNJUS na faixa de data/hora — empurrada para a direita */
  .dk-gen-datarow-cota { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
  .dk-gen-input-cota { width: 88px; flex-shrink: 0; box-sizing: border-box; text-align: right; }

  /* ── Folha corpo editável (contenteditable) — estilo Word ── */
  .dk-gen-folha-corpo-edit {
    min-height: 160px;
    outline: none;
    cursor: text;
    padding: 6px 2px;
    transition: background .12s;
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
  }
  .dk-gen-folha-corpo-edit:focus {
    background: rgba(30,58,95,.03);
    outline: 1px dashed rgba(30,58,95,.15);
    outline-offset: 2px;
  }
  .dk-gen-folha-corpo-edit:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    pointer-events: none;
  }

  /* ── Hint sob o título da prévia ── */
  /* R3 (09/07): agora vive dentro de .dk-gen-hdr-center (coluna centralizada
     do cabeçalho de 3 zonas) — deixou de precisar de width:100%/display:block
     (isso empurrava a linha inteira quando o header era um único flex-row;
     agora é só mais um item da coluna central, já centralizado pelo pai).
     ÓRFÃ desde 09/07 (refino "folha maior" — pedido literal do Orlando): o
     markup deste hint saiu do cabeçalho (ver .dk-gen-hdr-center em
     _renderDesktopGerarInner) e virou .dk-gen-folha-hint, ancorado dentro
     da própria folha (CSS em _dskGerAcoesCSS, mesma função do carimbo/selo
     "já arquivada"). Regra mantida sem uso (mesmo padrão de --gen-accent
     logo acima nesta folha de estilo) — custo zero, evita quebrar algo que
     ainda dependa dela. */
  .dk-gen-prev-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: .01em;
    text-transform: none;
    margin: 0;
    opacity: 1;
  }

  /* ── Status IA (refinando… / indisponível) na barra da prévia ── */
  .dk-gen-ia-status {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 9.5px;
    color: var(--brand);
    letter-spacing: .02em;
    text-transform: none;
    margin-left: 10px;
    padding: 1px 6px;
    background: var(--brand-tint);
    border-radius: 4px;
    animation: dk-ia-pulse 1.4s ease-in-out infinite;
  }
  @keyframes dk-ia-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
  }

  /* ── Botão Devolução de mandado (cor própria — laranja-ocre sóbrio) ── */
  .dk-gen-res-btn.dev {
    background: #efc873;
    color: #5c3906;
    border: none;
  }
  .dk-gen-res-btn.dev small { color: rgba(140,90,16,.78); }
  .dk-gen-res-btn.dev:not(.on):hover { background: #efd9ad; }
  .dk-gen-res-btn.dev.on {
    background: #8C5A10;
    color: #fff;
    border-color: #8C5A10;
    box-shadow: 0 2px 6px rgba(140,90,16,.32), inset 0 -2px 0 rgba(0,0,0,.18);
  }
  .dk-gen-res-btn.dev.on small { color: rgba(255,255,255,.80); }

  /* ── Botões de motivo da devolução — tom âmbar (análogo ao botão dev) ── */
  .dk-gen-motivo-dev-grid { display: flex; flex-wrap: wrap; gap: 6px; }
  .dk-gen-dev-btn {
    padding: 6px 12px;
    background: #fdf4e7;
    border: 1px solid rgba(140,90,16,.24);
    border-radius: 8px; /* I3: raio maior (era 4px) */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #8C5A10;
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.08);
  }
  .dk-gen-dev-btn:hover { background: #f5e4c5; }
  .dk-gen-dev-btn.on {
    background: #8C5A10;
    color: #fff;
    border-color: #8C5A10;
    box-shadow: 0 2px 5px rgba(140,90,16,.32), inset 0 -1px 0 rgba(0,0,0,.18);
  }

  /* ── Cards do formulário — fallback (sem classe de modo aplicada ainda).
       I2: fundo base = azul bem claro padrão do app, igual ao modo Sistema
       (o JS sempre aplica sistema-on/ia-on/modelosia-on ao montar, então este
       bloco raramente se vê sozinho, mas evita "flash" de outra cor). ── */
  .dk-gen-block.dk-gen-block-atos,
  .dk-gen-block.dk-gen-pick,
  .dk-gen-block.dk-gen-block-datarow,
  .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-block.dk-gen-block-config {
    background: #EAF0F7;
    border: 1px solid #D3E0EE;
    box-shadow: 0 1px 3px rgba(30,58,95,.08), inset 0 1px 0 rgba(255,255,255,.55);
  }

  /* ── Pedido Orlando (jul/02): Modo Sistema fica VERDE (era azul-claro,
     mesmo tom do fallback acima) ── */
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-datarow,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-config {
    background: #C8E3D2;
    border-color: #A9D4B8;
    box-shadow: 0 1px 3px rgba(31,81,54,.10), inset 0 1px 0 rgba(255,255,255,.55);
  }

  /* ── Pedido Orlando (jul/02): Modo S+IA intensificado um passo (era #D6E2F0) ── */
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-datarow,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config {
    background: #C4D6EC;
    border-color: #A9C2DE;
    box-shadow: 0 1px 4px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.50);
  }

  /* ── I2: Modo Totalmente IA — cards bem mais fortes (3º degrau da escada de azul) ── */
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-datarow,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config {
    background: #A9C4E4;
    border-color: #8FB0D8;
    box-shadow: 0 1px 4px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.48);
  }

  /* ── Dados do oficial ── */
  .dk-gen-oficial-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
  }
  .dk-gen-oficial-field { display: flex; flex-direction: column; gap: 3px; }
  .dk-gen-oficial-lbl {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .dk-gen-of-small { max-width: 110px; }

  /* Sub-título de seção dentro do bloco comarca/oficial */
  .dk-gen-of-secao {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  /* ── Bloco 5 "Dados do tribunal" — cabeçalho toggle em navy ── */
  #dk-gen-of-toggle {
    background: #1E3A5F;
    border-radius: 5px;
    padding: 8px 11px;
    margin: -12px -14px 0;   /* sangra até a borda do .dk-gen-block (padding 12/14) */
  }
  #dk-gen-of-toggle .dk-gen-block-label {
    color: #fff !important;
    letter-spacing: .09em;
  }
  #dk-gen-of-toggle #dk-gen-of-arr {
    color: rgba(255,255,255,.75) !important;
  }
  #dk-gen-of-toggle:hover {
    background: #26487a;
  }
  /* Gaveta "Dados do tribunal" — grid-rows elástico (U1). O JS troca
     display:none pelo estado "fechado" desta classe (sem medir altura). */
  #dk-gen-of-body {
    display: grid;
    grid-template-rows: 1fr;
    padding-top: 4px;
    overflow: hidden;
    transition: grid-template-rows .34s var(--ease-spring), padding-top .34s var(--ease-spring), opacity .28s var(--ease-spring);
  }
  #dk-gen-of-body > * { min-height: 0; overflow: hidden; }
  #dk-gen-of-body.dk-of-fechado {
    grid-template-rows: 0fr;
    padding-top: 0;
    opacity: 0;
  }
  .dark #dk-gen-of-toggle {
    background: #1E3A5F;
  }
  .dark #dk-gen-of-toggle:hover {
    background: #26487a;
  }

  .dk-gen-of-salvar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 10px 12px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .12s;
    white-space: nowrap;
  }
  .dk-gen-of-salvar-btn:hover { background: #14304f; }
  .dark .dk-gen-of-salvar-btn:hover { background: #7fa9dd; }

  /* ── Upload duo (comprovante + foto) — 2 colunas ── */
  .dk-gen-upload-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    /* REFINO 23/07 (pedido literal do Orlando, print da tela — cards em
       "escada"): align-items:start (era o default 'stretch' do grid) —
       cada coluna cresce SÓ pelo próprio conteúdo, sem esticar/achatar as
       vizinhas. Combinado com .dk-gen-upload-col abaixo (title alinhado no
       topo + card logo em seguida, sempre na mesma posição Y nas 3
       colunas), os cards ficam com TOPO sempre alinhado — a legenda/gaveta
       extra de um card cresce só ELE pra baixo, nunca desalinha os outros
       2 nem invade o espaço deles. */
    align-items: start;
  }
  .dk-gen-upload-col { display: flex; flex-direction: column; }

  /* ── Folha mais respirada: título "CERTIDÃO" desce e espaço aumenta ── */
  .dk-gen-folha-titulo {
    margin-top: 16px;  /* aumentado de 8px */
    margin-bottom: 14px; /* aumentado de 10px */
  }
  .dk-gen-folha-corpo { margin-top: 4px; }

  /* ══════════════════════════════════════════════
     DARK MODE — overrides para o gerador e shell
     As variáveis CSS já cobrem bg/surface/border/text.
     Aqui tratamos apenas os elementos com cor hardcoded.
     ══════════════════════════════════════════════ */

  /* Blocos do gerador — borda mais visível no dark */
  .dark .dk-gen-block {
    border-color: var(--border);
  }

  /* Cards com botões (atos, resultado, motivos) + data/hora + comprovante + bloco-config — fundo tintado no dark */
  .dark .dk-gen-block.dk-gen-block-atos,
  .dark .dk-gen-block.dk-gen-pick,
  .dark .dk-gen-block.dk-gen-block-datarow,
  .dark .dk-gen-block.dk-gen-bloco-comprovante,
  .dark .dk-gen-block.dk-gen-block-config {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
    border-color: var(--border-strong);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
  }
  /* Modo Sistema — dark mode: coluna form e cards em verde (pedido Orlando jul/02) */
  .dark .dk-gen-wrap.sistema-on .dk-gen-col-form {
    background: linear-gradient(170deg, rgba(46,125,79,.10) 0%, transparent 55%);
  }
  .dark .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-pick,
  .dark .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-atos,
  .dark .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-config {
    border-left: 2.5px solid rgba(46,125,79,.55);
    background: linear-gradient(92deg, rgba(46,125,79,.14) 0%, color-mix(in srgb, var(--brand) 8%, var(--surface-2)) 28%);
  }
  /* Turbo IA — dark mode: coluna form e cards (pedido jul/02: intensificado um passo) */
  .dark .dk-gen-wrap.ia-on .dk-gen-col-form {
    background: linear-gradient(170deg, rgba(122,91,224,.10) 0%, transparent 55%);
  }
  .dark .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick,
  .dark .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos,
  .dark .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config {
    border-left: 2.5px solid rgba(122,91,224,.58);
    background: linear-gradient(92deg, rgba(122,91,224,.16) 0%, color-mix(in srgb, var(--brand) 8%, var(--surface-2)) 28%);
  }

  /* Grupo-label e título dos blocos */
  .dark .dk-gen-block-label { color: var(--text-2); }
  .dark .dk-gen-grupo-label  { opacity: .90; }

  /* Botões de resultado no dark — tints mais escuros.
     HARMONIA 26/07: rgba(226,84,80,*)/(55,190,104,*) abaixo são o RGB dos novos
     --danger/--success dessaturados (acompanham a troca do token, ver :root/.dark). */
  .dark .dk-gen-res-btn.pos { background: rgba(46,125,79,.18); border-color: rgba(46,125,79,.30); }
  .dark .dk-gen-res-btn.neg { background: rgba(226,84,80,.12); border-color: rgba(226,84,80,.25); }
  .dark .dk-gen-res-btn.con { background: var(--brand-tint); border-color: rgba(111,157,212,.25); }
  .dark .dk-gen-res-btn.dev { background: rgba(140,90,16,.18); border-color: rgba(140,90,16,.30); color: #D4901A; }
  .dark .dk-gen-res-btn.pos small { color: rgba(55,190,104,.75); }
  .dark .dk-gen-res-btn.neg small { color: rgba(226,84,80,.75); }
  .dark .dk-gen-res-btn.dev small { color: rgba(212,144,26,.70); }

  /* Motivos de negativa */
  .dark .dk-gen-motivo-btn { background: rgba(226,84,80,.10); border-color: rgba(226,84,80,.22); color: var(--danger); }
  .dark .dk-gen-motivo-btn:hover { background: rgba(226,84,80,.20); }

  /* Motivos de devolução */
  .dark .dk-gen-dev-btn { background: rgba(140,90,16,.14); border-color: rgba(212,144,26,.22); color: #D4901A; }
  .dark .dk-gen-dev-btn:hover { background: rgba(140,90,16,.26); }

  /* Card de upload */
  .dark .dk-gen-upload-card {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-3);
  }
  .dark .dk-gen-upload-card:hover { background: var(--surface); }

  /* Segmented control Sistema/IA/Meus modelos */
  .dark .dk-gen-seg { background: var(--surface); border-color: var(--border); }
  .dark .dk-gen-seg-btn { color: var(--text); }
  .dark .dk-gen-seg-btn.on.sistema    { background: #2E7D4F; color: #fff; }
  .dark .dk-gen-seg-btn.on.ia         { background: var(--brand); color: #fff; }
  .dark .dk-gen-seg-btn.on.modelosia  { background: linear-gradient(120deg, #1E3A5F, #2563EB); color: #fff; }
  /* Meus modelos dark — banho azul forte na coluna + cards */
  .dark .dk-gen-wrap.modelosia-on .dk-gen-col-form {
    background: linear-gradient(170deg, rgba(37,99,235,.11) 0%, transparent 55%);
  }
  .dark .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-pick,
  .dark .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-atos,
  .dark .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config {
    border-left: 3px solid rgba(37,99,235,.60);
    background: linear-gradient(92deg, rgba(37,99,235,.15) 0%, color-mix(in srgb, var(--brand) 8%, var(--surface-2)) 32%);
  }

  /* Botão Modelo por IA — modo escuro */
  .dark .dsk-mod-ia-btn {
    background: rgba(109,93,211,.14);
    border-color: rgba(109,93,211,.30);
    color: #9B7AE8;
  }
  .dark .dsk-mod-ia-btn:hover {
    background: rgba(109,93,211,.24);
    border-color: rgba(109,93,211,.50);
  }

  /* Botão Trocar parte */
  .dark .dk-gen-trocar { background: var(--brand-tint); color: var(--brand); border-color: var(--border-strong); }
  .dark .dk-gen-trocar:hover { background: var(--brand-tint-strong); border-color: var(--brand); }

  /* Botão Abrir mandado — dark */
  .dark .dk-gen-abrir-mandado { background: #0d9488; border-color: #0f766e; color: #fff; }
  .dark .dk-gen-abrir-mandado:hover { background: #0f766e; }

  /* T6: Botão Abrir em outra janela — dark */
  .dark .dk-gen-abrir-nova-janela { background: #4d9490; border-color: #3d7a76; color: #fff; }
  .dark .dk-gen-abrir-nova-janela:hover { background: #3d7a76; }

  /* Voz → Certidão (mic, modo Totalmente IA) — dark */
  .dark .dk-gen-voz-cert-painel { background: var(--surface-2); border-color: var(--border-strong); }

  /* T5: barra do iframe — dark mode */
  .dark .dk-gen-prev-iframe-bar { background: var(--brand); }

  /* Botão Salvar (dados do oficial) — mesmo padrão sólido de .dk-btn-primary
     (background:var(--brand); color:#fff), sem override dark: o --brand claro
     do tema escuro já dá contraste suficiente com texto branco. */

  /* Campos de input */
  .dark .dk-gen-cfg-input {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
  }
  .dark .dk-gen-cfg-input:focus { border-color: var(--brand); }

  /* Folha da certidão — permanece branca (representa papel físico) mesmo no dark */
  .dark .dk-gen-folha { background: #f8f8f8; }
  .dark .dk-gen-prev-card { background: var(--surface); border-color: var(--border); }
  /* R3 (09/07): .dk-gen-prev-label virou grid de 3 zonas SEM fundo/borda
     própria (transparente, igual no light) — o `.dark .dk-gen-prev-label
     { background:var(--surface); border-color:var(--border); }` de antes
     era resíduo do cabeçalho-caixa pré-R3 (border-color já era no-op, sem
     border declarado) e pintava uma caixa só no dark que não existe no
     light (quebra de paridade). Removido pelo certifico-design. Título e
     hint agora são elementos próprios dentro da zona central
     (.dk-gen-hdr-titulo/.dk-gen-prev-hint) — não herdam mais color do
     container pai, reaplica no dark direto neles. */
  .dark .dk-gen-hdr-titulo { color: var(--text-2); }
  .dark .dk-gen-prev-actions { background: var(--surface); border-color: var(--border); }

  /* ── Modal Lote Manual ── */
  .dk-lote-manual-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.48);
    display: flex; align-items: center; justify-content: center;
  }
  .dk-lote-manual-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 680px; max-width: 92vw;
    max-height: 80vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
  }
  .dk-lote-manual-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .dk-lote-manual-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 14px; color: var(--text);
  }
  .dk-lote-manual-sub {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px; color: var(--text-3); margin-top: 3px;
  }
  .dk-lote-manual-actions-top {
    padding: 8px 18px;
    border-bottom: 1px solid var(--divider);
    display: flex; gap: 8px; align-items: center;
  }
  .dk-lote-manual-btn-sel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 11px;
    padding: 4px 10px;
    background: var(--brand-tint); color: var(--brand);
    border: 1px solid rgba(30,58,95,.15);
    border-radius: 4px; cursor: pointer;
    transition: background .12s;
  }
  .dk-lote-manual-btn-sel:hover { background: var(--brand-tint-strong); }
  .dk-lote-manual-list {
    flex: 1; overflow-y: auto; padding: 0;
  }
  .dk-lote-manual-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background .10s;
  }
  .dk-lote-manual-item:hover { background: var(--brand-tint); }
  .dk-lote-manual-item:last-child { border-bottom: none; }
  .dk-lote-manual-item input[type='checkbox'] {
    margin-top: 2px; flex-shrink: 0;
    accent-color: var(--brand);
    width: 15px; height: 15px; cursor: pointer;
  }
  .dk-lote-manual-nome {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: 12.5px; color: var(--text);
  }
  .dk-lote-manual-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px; color: var(--text-3); margin-top: 2px;
  }
  .dk-lote-manual-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  }
  .dk-lote-manual-count {
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text-3); flex: 1;
  }
  .dk-lote-manual-btn-cancelar {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px;
    padding: 7px 14px; background: transparent; color: var(--text-2);
    border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
    transition: background .12s;
  }
  .dk-lote-manual-btn-cancelar:hover { background: var(--bg); }
  .dk-lote-manual-btn-aplicar {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px;
    padding: 7px 16px; background: var(--brand); color: #fff;
    border: 1px solid var(--brand); border-radius: 4px; cursor: pointer;
    transition: background .12s; box-shadow: 0 1px 3px rgba(30,58,95,.28), inset 0 -1px 0 rgba(0,0,0,.14);
  }
  .dk-lote-manual-btn-aplicar:hover { background: var(--brand-hover); }
  .dk-lote-manual-btn-aplicar:disabled { opacity: .45; cursor: default; }

  /* ── Certidões: coluna de seleção (checkbox) ── */
  .dsk-hist-sel-col {
    display: flex; align-items: center; justify-content: center;
  }
  .dsk-hist-sel-col input[type='checkbox'] {
    accent-color: var(--brand);
    width: 14px; height: 14px; cursor: pointer;
  }
  .dk-hist-baixar-sel {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; background: var(--brand-tint); color: var(--brand);
    border: 1px solid rgba(30,58,95,.18); border-radius: 4px; cursor: pointer;
    transition: background .12s, opacity .12s;
    box-shadow: 0 1px 2px rgba(0,0,0,.07), inset 0 -1px 0 rgba(0,0,0,.08);
  }
  .dk-hist-baixar-sel:hover:not(:disabled) { background: var(--brand-tint-strong); }
  .dk-hist-baixar-sel:disabled { opacity: .38; cursor: default; }
  /* Cabeçalho de ações da tela "Certidões geradas" (botões à direita, acima da tabela) */
  .dk-hist-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 24px 0; }
  .dark .dk-lote-manual-modal { box-shadow: 0 8px 32px rgba(0,0,0,.5); }
  .dark .dk-lote-manual-item:hover { background: var(--brand-tint); }

  /* ── Lote manual: busca + urgentíssimo ── */
  .dk-lote-manual-busca-wrap {
    padding: 8px 18px;
    border-bottom: 1px solid var(--divider);
  }
  /* Campo de busca com lupa — cantos retos (sem pílula), mesmo padrão de .dk-gen-search */
  .dk-lm-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 7px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0;
  }
  .dk-lm-search:focus-within { border-color: var(--brand); }
  .dk-lm-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--text);
    outline: none;
  }
  .dk-lm-search input::placeholder { color: var(--text-3); }
  /* Contador do topo (sempre visível, ao lado de "Selecionar todos/Limpar") */
  .dk-lote-manual-actions-top #dk-lm-count-top {
    margin-left: auto;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
  }
  .dk-lote-manual-item {
    display: flex; align-items: center; gap: 10px;
  }
  .dk-lm-item-info { flex: 1; min-width: 0; }
  .dk-lm-btn-urg {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px;
    letter-spacing: .04em;
    padding: 3px 8px;
    background: transparent;
    color: var(--danger, #C81E1E);
    border: 1.5px solid var(--danger, #C81E1E);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s, color .12s;
  }
  .dk-lm-btn-urg.ativo {
    background: var(--danger, #C81E1E);
    color: #fff;
  }
  .dk-lm-btn-urg:hover:not(.ativo) { background: rgba(200,30,30,.08); }

  /* ── Linha urgentíssimo na tabela da rota ── */
  .dk-row-urgentissimo {
    background: rgba(200,30,30,.04);
  }
  .dk-row-urgentissimo td:first-child {
    border-left: 3px solid #C81E1E !important;
  }
  .dk-urg-badge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 8.5px;
    letter-spacing: .06em;
    color: #C81E1E;
    padding: 1px 4px;
    border: 1.5px solid #C81E1E;
    border-radius: 2px;
    line-height: 1.4;
    margin-left: 4px;
    vertical-align: middle;
  }
  /* Selo CONF — âmbar, discreto: mandado lido com confiança não-alta, precisa conferência */
  .dk-conf-badge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 8px;
    letter-spacing: .06em;
    color: #D97706;
    padding: 1px 3px;
    border: 1px solid #D97706;
    border-radius: 2px;
    line-height: 1.4;
    margin-left: 4px;
    vertical-align: middle;
  }

  /* ── ITEM 9 — Selos de origem como ícone gráfico (eproc / Projudi) ── */
  /* Ícone Lucide colorido, retangular compacto, sem texto, com title no HTML */
  .dk-origem-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    padding: 0 2px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
  }
  .dk-origem-selo.eproc {
    background: rgba(21,101,167,0.10);
    border: 1px solid rgba(21,101,167,0.30);
    color: #1565A7;
  }
  .dk-origem-selo.projudi {
    background: rgba(180,83,9,0.08);
    border: 1px solid rgba(180,83,9,0.25);
    color: #B45309;
  }
  /* Variante inline no card "Mandado selecionado" — ligeiramente maior */
  .dk-mand-origem-selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0 3px;
    border-radius: 2px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  .dk-mand-origem-selo.eproc {
    background: rgba(21,101,167,0.10);
    border: 1px solid rgba(21,101,167,0.30);
    color: #1565A7;
  }
  .dk-mand-origem-selo.projudi {
    background: rgba(180,83,9,0.08);
    border: 1px solid rgba(180,83,9,0.25);
    color: #B45309;
  }
  .dark .dk-origem-selo.eproc,
  .dark .dk-mand-origem-selo.eproc {
    background: rgba(21,101,167,0.20);
    border-color: rgba(21,101,167,0.40);
    color: #6BAFD6;
  }
  .dark .dk-origem-selo.projudi,
  .dark .dk-mand-origem-selo.projudi {
    background: rgba(180,83,9,0.18);
    border-color: rgba(180,83,9,0.35);
    color: #F59E0B;
  }

  /* ════════════════════════════════════════════════════
     TAREFA 3 / I2 — Cores dos cards por modo no gerador
     Escada de AZUL (sem verde): Sistema = azul bem claro
     padrão do app; Sistema+IA = azul um pouco mais forte;
     Totalmente IA = azul bem mais forte (navy denso).
     Todos os 3 modos usam `border-left: none` uniformemente
     (nenhum modo ganha borda que os outros não têm) — antes o
     modo Sistema tinha `border-left: 2.5px solid` e os outros
     dois modos tinham `border-left: none`; como box-sizing é
     border-box, essa borda "comia" 2.5px do espaço interno do
     card SÓ no modo Sistema, então trocar de modo deslocava o
     conteúdo ~2.5px pra esquerda/direita — o "corte" relatado
     no S+IA era esse salto de alinhamento em relação ao card
     anterior (modo Sistema, com borda). Corrigido eliminando a
     borda em todos os modos (a cor de fundo já basta pra marcar
     o modo — sem precisar de borda lateral). */

  /* MODO SISTEMA — VERDE institucional (pedido Orlando: substitui a versão
     azul-claro anterior). Tom um degrau mais escuro que o 1º tint testado
     (#D9EBDF) para garantir contraste com o texto verde-escuro. */
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-config,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-datarow {
    border-left: none;
    background: #C8E3D2;
    border: 1px solid #A9D4B8;
  }
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-pick .dk-gen-block-label,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-atos .dk-gen-block-label,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-config .dk-gen-block-label,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-bloco-comprovante .dk-gen-block-label,
  .dk-gen-wrap.sistema-on .dk-gen-block.dk-gen-block-datarow .dk-gen-block-label {
    color: #1F5136;
  }
  /* Hover nos botões de resultado — reforço verde no modo Sistema */
  .dk-gen-wrap.sistema-on .dk-gen-res-btn.pos:not(.on):hover {
    background: linear-gradient(120deg, #C8E3D2, #b8d8c8);
    border-color: #8FC4A4;
  }

  /* ITEM 2 — MODO S+IA (azul intensificado um passo — pedido Orlando) —
     todos os 5 blocos uniformes */
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-datarow {
    border-left: none;
    background: #C4D6EC;
    border: 1px solid #A9C2DE;
  }
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-pick .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-atos .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-config .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-bloco-comprovante .dk-gen-block-label,
  .dk-gen-wrap.ia-on .dk-gen-block.dk-gen-block-datarow .dk-gen-block-label {
    color: #1E3A5F;
  }

  /* ITEM 2 — MODO TOTALMENTE IA — azul bem mais forte (navy denso), uniforme em TODOS os 5 blocos + config */
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-pick,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-atos,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-bloco-comprovante,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-datarow {
    border-left: none;
    background: #A9C4E4;
    border: 1px solid #8FB0D8;
  }
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-pick .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-atos .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-bloco-comprovante .dk-gen-block-label,
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-datarow .dk-gen-block-label {
    color: #06141F;
  }
  /* Garante que .dk-gen-block-config no modo modelosia NÃO tenha conflito com override acima */
  .dk-gen-wrap.modelosia-on .dk-gen-block.dk-gen-block-config {
    background: #A9C4E4;
    border: 1px solid #8FB0D8;
    border-left: none;
  }

  /* ════════════════════════════════════════════════════
     Item 09/07 — Loader mini (componente único, linha Linear/Stripe):
     círculo pequeno (18px, traço 2px, navy) + rótulo Montserrat caps.
     Substitui, no gerador de certidões e na home/Operação (Linhas da
     rota), os loaders grandes/ilustrados abaixo (.cload-*, mapa 300×150,
     anel 168px, título 23px) e o van animado (.cert-loader-cart, usado
     no "mapa cheio"/tela cheia da rota) — GRANDES e destoando da linha
     visual (retangular>arredondado, hierarquia por tipografia/cor, denso).
     Reusa a keyframe spinRot já existente (spinner do splash). As classes
     .cload-*/.cert-loader-* abaixo ficam só como legado (não removidas
     por segurança — nenhum outro ponto do código as usa mais). ════ */
  .dk-miniload { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:26px 20px; }
  .dk-miniload-row { display:flex; align-items:center; gap:9px; }
  .dk-miniload-spin {
    width:18px; height:18px; flex-shrink:0; box-sizing:border-box;
    border:2px solid color-mix(in srgb,var(--brand) 20%,transparent);
    border-top-color:var(--brand); border-radius:50%;
    animation:spinRot .7s linear infinite;
  }
  .dk-miniload-label {
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:10.5px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); white-space:nowrap;
  }

  /* ════════════════════════════════════════════════════
     Loaders v2 (LEGADO — substituído pelo .dk-miniload acima)
     .cload-cert (anel + documento) · .cload-rota (mapa + traçado)
     ════════════════════════════════════════════════════ */
  .cload { display:flex; flex-direction:column; align-items:center; text-align:center; max-width:360px; margin:0 auto; }
  .cload-title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:23px; line-height:1.2; color:var(--text); margin-top:24px; }
  .cload-sub { font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.55; color:var(--text-2); margin-top:9px; max-width:310px; }
  .cload-pct { font-family:'Montserrat',sans-serif; font-weight:800; font-size:18px; margin-top:18px; }
  .cload-pct-blue { color:#2563EB; }
  .cload-pct-green { color:#1F9E55; }
  .cload-bar { width:300px; max-width:80vw; height:10px; background:color-mix(in srgb,var(--text-3) 16%,var(--bg)); border-radius:6px; overflow:hidden; margin-top:7px; }
  .cload-bar-fill { height:100%; border-radius:6px; }
  .cload-bar-blue  { background:linear-gradient(90deg,#60A5FA,#2563EB); animation:cloadFillBlue 2.4s cubic-bezier(.22,.61,.36,1) forwards; }
  .cload-bar-green { background:linear-gradient(90deg,#4ADE80,#1F9E55); animation:cloadFillGreen 2.4s cubic-bezier(.22,.61,.36,1) forwards; }
  @keyframes cloadFillBlue  { from { width:0; } to { width:65%; } }
  @keyframes cloadFillGreen { from { width:0; } to { width:57%; } }
  /* Certidão — anel de progresso girando + documento ao centro */
  .cload-ring { position:relative; width:168px; height:168px; }
  .cload-ring svg.cload-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
  .cload-ring-bg { fill:none; stroke:color-mix(in srgb,#2563EB 14%,var(--bg)); stroke-width:7; }
  .cload-ring-fg { fill:none; stroke:#2563EB; stroke-width:7; stroke-linecap:round; stroke-dasharray:326; stroke-dashoffset:96; transform-origin:60px 60px; animation:cloadSpin 1.4s linear infinite; }
  @keyframes cloadSpin { to { transform:rotate(360deg); } }
  .cload-ring-doc { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  /* Rota — mapa + traçado animado */
  .cload-map { width:300px; max-width:80vw; height:150px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#EAF6EF,#DDEEE4); }
  .cload-route-path { stroke:#1F9E55; stroke-width:3.4; fill:none; stroke-dasharray:6 7; stroke-linecap:round; animation:cloadDash 1.1s linear infinite; }
  @keyframes cloadDash { to { stroke-dashoffset:-26; } }
  .cload-chips { display:flex; gap:16px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
  .cload-chip { display:flex; flex-direction:column; align-items:center; gap:5px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:11px; color:#1F7A45; max-width:98px; line-height:1.2; }
  .cload-chip svg { color:#1F9E55; }
  /* Caixinha "Aguarde um instante" (certidão) */
  .cload-note { display:flex; align-items:center; gap:11px; text-align:left; margin-top:20px; padding:12px 16px; border-radius:10px; background:color-mix(in srgb,#2563EB 8%,var(--surface)); font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.42; color:var(--text-2); max-width:320px; }
  .cload-note svg { color:#2563EB; flex-shrink:0; }

  /* ════════════════════════════════════════════════════
     TAREFA 4 — Animações de loading (carrinho e escrita) — LEGADO
     Classes reutilizáveis: .cert-loader-cart e .cert-loader-writing
     ════════════════════════════════════════════════════ */

  .cert-loader-cart,
  .cert-loader-writing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .cert-loader-caption {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--text-3);
    text-transform: uppercase;
  }

  /* ITEM 4 — Carrinho/van elaborado com carroceria + cabine + 2 rodas girando */
  .cert-loader-cart-icon {
    width: 88px;
    height: 52px;
    position: relative;
    flex-shrink: 0;
    /* SVG inline: van com cabine arredondada, carroceria, 2 rodas claras e janela */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 52'%3E%3C!-- carroceria --%3E%3Crect x='2' y='14' width='52' height='26' rx='2' fill='%231E3A5F'/%3E%3C!-- cabine --%3E%3Cpath d='M52 14 L74 14 L80 22 L80 40 L52 40 Z' fill='%2315294A'/%3E%3C!-- janela cabine --%3E%3Cpath d='M55 17 L72 17 L77 23 L55 23 Z' fill='%23BFDBFE' opacity='.85'/%3E%3C!-- janela carroceria --%3E%3Crect x='8' y='18' width='22' height='14' rx='1' fill='%23fff' opacity='.12'/%3E%3C!-- logo CERT --%3E%3Ctext x='12' y='29' font-family='Montserrat,sans-serif' font-weight='800' font-size='7' fill='%23fff' opacity='.6'%3ECERT%3C/text%3E%3C!-- roda traseira --%3E%3Ccircle class='cert-van-roda' cx='20' cy='44' r='8' fill='%231E3A5F' stroke='%23CFD6E0' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='44' r='4' fill='%23fff' opacity='.18'/%3E%3Cline x1='20' y1='36' x2='20' y2='52' stroke='%23fff' stroke-width='1' opacity='.35'/%3E%3Cline x1='12' y1='44' x2='28' y2='44' stroke='%23fff' stroke-width='1' opacity='.35'/%3E%3C!-- roda dianteira --%3E%3Ccircle class='cert-van-roda' cx='66' cy='44' r='8' fill='%2315294A' stroke='%23CFD6E0' stroke-width='1.5'/%3E%3Ccircle cx='66' cy='44' r='4' fill='%23fff' opacity='.18'/%3E%3Cline x1='66' y1='36' x2='66' y2='52' stroke='%23fff' stroke-width='1' opacity='.35'/%3E%3Cline x1='58' y1='44' x2='74' y2='44' stroke='%23fff' stroke-width='1' opacity='.35'/%3E%3C!-- farol --%3E%3Crect x='79' y='28' width='6' height='4' rx='1' fill='%23FEF3C7' opacity='.9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes certVanGo {
      0%   { transform: translateX(-4px) translateY(0); }
      25%  { transform: translateX(0)   translateY(-2px); }
      50%  { transform: translateX(4px)  translateY(0); }
      75%  { transform: translateX(0)   translateY(-1px); }
      100% { transform: translateX(-4px) translateY(0); }
    }
    .cert-loader-cart-icon { animation: certVanGo 0.85s ease-in-out infinite; }
  }

  /* ITEM 4 — Certidão sendo escrita: folha com cabeçalho TJPR + linhas surgindo + caneta */
  .cert-loader-writing-page {
    width: 64px;
    height: 80px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #CFD6E0);
    border-radius: 2px;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }
  /* Cabeçalho TJPR simulado */
  .cert-loader-writing-page::before {
    content: 'TJPR';
    display: block;
    width: 100%;
    background: var(--brand, #1E3A5F);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 7px;
    letter-spacing: .12em;
    text-align: center;
    padding: 4px 0 3px;
    flex-shrink: 0;
  }
  .cert-loader-writing-lines {
    flex: 1;
    padding: 6px 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
  }
  .cert-loader-writing-line {
    height: 4px;
    background: var(--border-strong, #B6BFCB);
    border-radius: 0;
    transform-origin: left;
    transform: scaleX(0);
  }
  /* Caneta que corre sobre a última linha ativa */
  .cert-loader-pen {
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 4px;
    left: 6px;
    /* SVG de caneta compacta */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 9 L2 6 L7 1 L9 3 L4 8 Z' fill='%231E3A5F'/%3E%3Cpath d='M1 9 L3 8 L2 6 Z' fill='%23ECB22E'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes certLineIn {
      0%   { transform: scaleX(0); }
      55%  { transform: scaleX(1); }
      100% { transform: scaleX(1); }
    }
    @keyframes certPenMove {
      0%   { left: 6px;  bottom: 48px; }
      20%  { left: 52px; bottom: 48px; }
      25%  { left: 52px; bottom: 38px; }
      45%  { left: 6px;  bottom: 38px; }
      50%  { left: 6px;  bottom: 28px; }
      70%  { left: 45px; bottom: 28px; }
      75%  { left: 45px; bottom: 18px; }
      90%  { left: 35px; bottom: 18px; }
      100% { left: 6px;  bottom: 48px; }
    }
    .cert-loader-writing-page .cert-loader-writing-line:nth-child(1) { animation: certLineIn 1.8s ease-out infinite; animation-delay: 0s; }
    .cert-loader-writing-page .cert-loader-writing-line:nth-child(2) { animation: certLineIn 1.8s ease-out infinite; animation-delay: 0.32s; }
    .cert-loader-writing-page .cert-loader-writing-line:nth-child(3) { animation: certLineIn 1.8s ease-out infinite; animation-delay: 0.64s; width: 80%; }
    .cert-loader-writing-page .cert-loader-writing-line:nth-child(4) { animation: certLineIn 1.8s ease-out infinite; animation-delay: 0.96s; width: 60%; }
    .cert-loader-pen { animation: certPenMove 1.8s linear infinite; }
  }

  /* ════════════════════════════════════════════════════
     ITEM D — Hover POR SEGMENTO suavizado nas pizzas/donuts.
     Efeito leve: o segmento ativo sobe levemente; os outros
     caem só um pouquinho. Sem blur, sem sombra forte.
     ════════════════════════════════════════════════════ */
  .dk-donut-seg {
    transition: stroke-width .18s ease, opacity .18s ease;
    cursor: pointer;
  }
  /* Todos os segs: caem levemente para dar "foco" ao hover */
  .dk-donut-svg:hover .dk-donut-seg {
    opacity: .78;
    filter: none;
  }
  /* O segmento sob o ponteiro: sobe de volta e engrossa só 1px */
  .dk-donut-svg:hover .dk-donut-seg:hover {
    opacity: 1;
    stroke-width: 22px; /* incremento sutil — era 28px */
    filter: none;
  }
  /* Animação de entrada dos donuts (mantida) */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes dkDonutSegIn { from { opacity:0; } to { opacity:1; } }
    .dk-donut-seg { animation: dkDonutSegIn .32s ease both; }
    .dk-pies-3 .dk-pie:nth-child(1) .dk-donut-seg { animation-delay: .05s; }
    .dk-pies-3 .dk-pie:nth-child(2) .dk-donut-seg { animation-delay: .12s; }
    .dk-pies-3 .dk-pie:nth-child(3) .dk-donut-seg { animation-delay: .19s; }
  }

  /* ITEM E — telas 1200-1400px: reserva espaço pro título "Visão geral" acima das pizzas */
  @media (max-width: 1400px) {
    .dk-pies-3 { gap: 6px; align-content: flex-start; padding-top: 4px; }
    .dk-pie { gap: 5px; }
  }
  @media (max-width: 1280px) {
    .dk-donut-svg { width: 96px; height: 96px; }
    .dk-pie-title { font-size: 11px; }
    .dk-pie-leg-num { font-size: 12px; min-width: 15px; }
    .dk-pie-leg-lbl { font-size: 11px; }
    .dk-pies-3 { gap: 4px; }
  }

  /* ══ ITEM 1: RESPONSIVIDADE NOTEBOOKS (≤1280px e ≤1100px) ══
     Ajusta o grid 2×2, gráficos, filtros e textos para telas de 13".
     NÃO afeta layout ≥1281px (já aprovado). */
  @media (max-width: 1280px) {
    /* Grid: reduz gap e ajusta proporção das rows (mapa segue coluna alta à esquerda) */
    .dk-grid4 { gap: 6px; grid-template-rows: 1.2fr 0.8fr; }
    /* Filtros do mapa: textos menores, gap menor */
    .dk-map-filters { gap: 5px; padding: 8px 10px; }
    .dk-mf { font-size: 10.5px; padding: 5px 9px; gap: 4px; }
    .dk-map-org { gap: 6px; padding: 7px 10px; }
    /* Barras: título, legenda e KPIs compactos */
    .dk-bars-head { margin-bottom: 10px; gap: 8px; }
    .dk-cbars { gap: 7px; min-height: 70px; }
    .dk-cbar > i { font-size: 10px; }
    .dk-cbar > b { font-size: 9.5px; }
    .dk-bars-leg { font-size: 10.5px; gap: 10px; margin-top: 7px; }
    /* Tabs de período */
    .dk-ptab { padding: 5px 9px; font-size: 10.5px; }
    /* Card list: busca e cabeçalho compactos */
    .dk-list-head { padding: 9px 12px; gap: 8px; }
    .dk-list-search input { font-size: 11.5px; }
    /* Título dos cards */
    .dk-card-title { font-size: 12.5px; }
    /* News ticker mais compacto */
    .dk-news-ticker { padding-left: 6px; }
    .dk-news-item { font-size: 13px; }
  }
  @media (max-width: 1100px) {
    /* Grid: empilha em coluna única (notebook 11") — mapa deixa de ser coluna alta */
    .dk-grid4 {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 6px;
    }
    .dk-card.dk-g-map      { grid-column: 1; grid-row: 1 / span 1; min-height: 220px; }
    .dk-card.dk-g-list     { grid-column: 1; grid-row: 2; min-height: 160px; }
    .dk-card.dk-g-carousel { grid-column: 1; grid-row: 3; min-height: 160px; }
    /* Pizzas em linha (3 lado a lado ainda, mas menores) */
    .dk-donut-svg { width: 80px; height: 80px; }
    .dk-pies-3 { gap: 3px; padding-top: 2px; }
    .dk-pie-title { font-size: 10px; }
    /* Filtros em scroll horizontal (não quebram linha) */
    .dk-map-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .dk-map-filters::-webkit-scrollbar { display: none; }
    .dk-mf { flex-shrink: 0; font-size: 10px; padding: 5px 8px; }
    /* Topnav: labels ajustam */
    .dk-nav-item { font-size: 12px; padding: 0 6px; }
    .dk-nav-label-main { font-size: 12px; }
    .dk-nav-label-sub { font-size: 9px; }
    /* User info: oculta cargo em telas muito pequenas */
    .dk-user > div > div:last-child { display: none; }
  }

  /* ════════════════════════════════════════════════════
     TAREFA 7 / B3 — Aviso de IA no gerador (discreto)
     Parece nota de rodapé: sem border-left, sem fundo
     chamativo, fonte pequena, cor text-3.
     ════════════════════════════════════════════════════ */
  .dk-gen-ia-aviso {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 2px;
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--text-3);
    line-height: 1.4;
  }
  .dk-gen-ia-aviso svg { flex-shrink: 0; opacity: .65; }
  /* Modo ia-on: leve tom de aviso, ainda discreto */
  .dk-gen-wrap.ia-on .dk-gen-ia-aviso,
  .dk-gen-wrap.modelosia-on .dk-gen-ia-aviso {
    color: var(--text-2);
  }
  .dark .dk-gen-ia-aviso {
    color: var(--text-3);
  }
}
@keyframes iaSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════
   Mobile (global, fora de media query):
   - .route-cart  → carrinho andando na barra de rota
   - .app-ia-aviso → aviso de responsabilidade da IA no app
   ════════════════════════════════════════════════════ */
.route-cart {
  display: inline-block;
  width: 22px; height: 14px;
  flex: none;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Crect x='2' y='2' width='58' height='26' rx='3' fill='%231E3A5F'/%3E%3Crect x='14' y='6' width='28' height='16' rx='2' fill='%23fff' opacity='.18'/%3E%3Ccircle cx='14' cy='34' r='6' fill='%231E3A5F'/%3E%3Ccircle cx='14' cy='34' r='3' fill='%23fff'/%3E%3Ccircle cx='48' cy='34' r='6' fill='%231E3A5F'/%3E%3Ccircle cx='48' cy='34' r='3' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes routeCartGo { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
  .route-cart { animation: routeCartGo .8s ease-in-out infinite; }
}
.app-ia-aviso {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--warning, #E6A219) 11%, transparent);
  border-left: 3px solid var(--warning, #E6A219);
  border-radius: 4px;
  padding: 9px 11px;
}

/* ════════════════════════════════════════════════════
   DESKTOP — Novos componentes (sessão 28/jun)
   Itens 1-10 do briefing visual do Orlando.
   ════════════════════════════════════════════════════ */

/* ── ITEM 2 — Título "NOTÍCIAS" mais destacado no ticker ── */
.dk-news-title-destaque {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
  align-self: center;
}

/* Selo "NEWS" estilo jornal, ao lado de "Notícias sobre oficialato" */
.dk-news-news {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #fff;
  background: #C0392B;
  padding: 1px 7px;
  border-radius: 2px;
  margin-left: 8px;
  align-self: center;
}

/* ── ITEM 3 — Bloco "Previsão" com rótulo proeminente ── */
.dk-weather-bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  border-left: 2px solid var(--brand);
  padding-left: 12px;
  margin-left: 4px;
}
.dk-weather-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}

/* ── ITEM 4 — Chave Sistema ⟷ Captura com IA ── */
.dk-capt-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
}
.dk-capt-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
  border-radius: 0;
}
.dk-capt-opt:hover { background: var(--brand-tint); color: var(--brand); }
.dk-capt-opt.dk-capt-opt-on {
  background: var(--brand);
  color: #fff;
}
/* Divisória entre os dois botões */
.dk-capt-opt + .dk-capt-opt {
  border-left: 1.5px solid var(--border-strong);
}
.dk-capt-opt.dk-capt-opt-on + .dk-capt-opt,
.dk-capt-opt + .dk-capt-opt.dk-capt-opt-on {
  border-left-color: var(--brand-hover);
}

/* ── Toggle Captura IA no topbar (estilo espelho do dk-theme-toggle) ── */
.dk-capt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  width: 72px;
  height: 34px;
  border-radius: 17px;
  background: #E8EFF5;
  border: 1.5px solid #C8D6E3;
  cursor: pointer;
  padding: 0 4px;
  justify-content: space-between;
  transition: background .25s, border-color .25s, box-shadow .25s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08);
  flex-shrink: 0;
}
.dark .dk-capt-toggle {
  background: #1A2535;
  border-color: #354156;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
}
/* ITEM 2 — fundo azul navy quando IA está ativo */
.dk-capt-toggle[data-ia="1"] {
  background: var(--brand);
  border-color: var(--brand-hover);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15), 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent);
}
.dark .dk-capt-toggle[data-ia="1"] {
  background: #2A4F7C;
  border-color: #3A6494;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 2px 8px rgba(30,58,95,.50);
}
.dk-capt-toggle:hover { filter: brightness(.95); }
.dk-capt-toggle-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  z-index: 1;
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .03em;
  transition: color .25s, opacity .25s;
  white-space: nowrap;
}
/* S (Sistema) — lado esquerdo */
.dk-capt-lbl-s { color: var(--brand); opacity: 1; }
/* IA — lado direito */
.dk-capt-lbl-ia { color: var(--text-2); opacity: .55; display:inline-flex; align-items:center; gap:1px; }
/* Quando IA está ativo — labels ficam brancos sobre fundo azul */
.dk-capt-toggle[data-ia="1"] .dk-capt-lbl-s  { opacity: .65; color: rgba(255,255,255,.80); }
.dk-capt-toggle[data-ia="1"] .dk-capt-lbl-ia { opacity: 1; color: #fff; }
/* Thumb — medidas iPhone-exatas iguais ao dk-theme-thumb: 27px, top/left=2px/3px, translateX(36px) */
.dk-capt-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
  pointer-events: none;
}
.dk-capt-toggle[data-ia="1"] .dk-capt-toggle-thumb {
  transform: translateX(36px);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.dark .dk-capt-toggle[data-ia="1"] .dk-capt-toggle-thumb {
  background: #E8F0FA;
  box-shadow: 0 2px 8px rgba(0,0,0,.40);
}

/* ── ITEM 5 — Card "Análises com IA" compactado ── */
.dk-ia-card-compact {
  padding: 10px 14px;
}
/* Ícone maior */
.dk-ia-icon-lg {
  width: 54px;
  height: 54px;
}
/* Linha do eyebrow com botão inline à direita */
.dk-ia-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}
.dk-ia-eyebrow-row .dk-ia-eyebrow { margin-bottom: 0; }
/* Botão inline no eyebrow */
.dk-ia-radar-btn-inline {
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 10px;
}
/* Texto de análise com clamp para ocupar menos espaço vertical */
.dk-ia-body-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

/* ── ITEM 8 — Painel de estatísticas do Banco ── */
.dk-banco-stats {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.dk-banco-stats-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  padding: 16px 16px 8px;
}
.dk-banco-stats-sec {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 16px 4px;
}
.dk-banco-stats-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 16px;
  gap: 8px;
}
.dk-banco-stats-row:hover { background: var(--brand-tint); }
.dk-banco-stats-lbl {
  font-size: 12px;
  color: var(--text-2);
  flex: 1;
  min-width: 0;
}
.dk-banco-stats-val {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  flex-shrink: 0;
}
.dk-banco-stats-div {
  height: 1px;
  background: var(--divider);
  margin: 6px 12px;
}

/* ── ITEM 1 — Página de notícias portal (dk-not2-*) ── */
/* Não toca em .dk-not-* (ticker e layout antigo) */
.dk-not2-wrap {
  max-width: 1100px;
  padding: 0 4px 48px;
}
.dk-not2-head {
  margin-bottom: 22px;
}
.dk-not2-head-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dk-not2-head-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Manchete principal */
.dk-not2-manchete {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 24px;
  background: var(--surface);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.dk-not2-manchete:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 18px rgba(30,58,95,0.10);
}
/* Foto 16:9 da manchete */
.dk-not2-m-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.dk-not2-m-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.dk-not2-m-foto.dk-not2-img-fb {
  min-height: 200px;
}
/* Fallback: ícone centralizado no gradiente navy */
.dk-not2-img-fb span,
.dk-not2-card-foto.dk-not2-img-fb span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Corpo da manchete */
.dk-not2-m-corpo {
  padding: 18px 22px 20px;
}
.dk-not2-m-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dk-not2-fonte-lbl {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.dk-not2-m-data,
.dk-not2-card-data {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.dk-not2-m-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.22;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.dk-not2-m-resumo {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.58;
  margin-bottom: 14px;
  max-width: 72ch;
}
.dk-not2-m-ler {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--brand);
  text-transform: uppercase;
}

/* Grade de submanchetes — 3 colunas */
.dk-not2-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Card de submanchete */
.dk-not2-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.dk-not2-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(30,58,95,0.08);
}
/* Foto 16:9 do card */
.dk-not2-card-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dk-not2-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dk-not2-card-foto.dk-not2-img-fb {
  min-height: 90px;
}
/* Corpo do card */
.dk-not2-card-corpo {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dk-not2-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.dk-not2-card-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 5px;
  flex: 1;
}
.dk-not2-card-resumo {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Responsividade: 2 colunas abaixo de 1100px */
@media (max-width: 1100px) {
  .dk-not2-grade { grid-template-columns: repeat(2, 1fr); }
}

/* ── NOTÍCIAS — lista sem fotos (dk-nl-*) + Julgados (dk-jg-*) ──────────── */

/* Abas Notícias / Julgados */
.dk-nl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 0 0 0 0;
}
.dk-nl-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.dk-nl-tab.on {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.dk-nl-tab:hover { color: var(--brand); }

/* Corpo da aba */
.dk-nl-corpo {
  padding: 0;
}

/* Duas colunas de lista */
.dk-nl-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: none;
}
.dk-nl-col {
  display: flex;
  flex-direction: column;
}
.dk-nl-col:first-child {
  border-right: 1px solid var(--border);
}

/* Item individual da notícia — SEM foto */
.dk-nl-item {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background .12s;
  cursor: pointer;
}
.dk-nl-item:hover { background: var(--surface-2); }
.dk-nl-item-sys {
  background: color-mix(in srgb, #B45309 4%, var(--surface));
}
.dk-nl-item-sys:hover {
  background: color-mix(in srgb, #B45309 9%, var(--surface));
}

.dk-nl-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.dk-nl-fonte {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dk-nl-data {
  font-family: Inter, sans-serif;
  font-size: 10px;
  color: var(--text-3);
  margin-left: auto;
}
.dk-nl-titulo {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.dk-nl-ler {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .03em;
}

/* Responsividade notícias — 1 coluna abaixo de 900px */
@media (max-width: 900px) {
  .dk-nl-colunas { grid-template-columns: 1fr; }
  .dk-nl-col:first-child { border-right: none; }
}

/* Julgados */
.dk-jg-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
  border-bottom: 1px solid var(--border);
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: var(--text-2);
}
.dk-jg-lista {
  display: flex;
  flex-direction: column;
}
.dk-jg-item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.dk-jg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.dk-jg-tribunal {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.dk-jg-proc {
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: var(--text-3);
}
.dk-jg-data {
  font-family: Inter, sans-serif;
  font-size: 10px;
  color: var(--text-3);
  margin-left: auto;
}
.dk-jg-ementa {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 6px;
}
.dk-jg-relator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  color: var(--text-3);
}

/* ── Notícias — grade de 4 colunas para preencher a tela (esquerda 3col + direita 1col) ── */
.dk-not2-wrap-full {
  max-width: none;
  width: 100%;
}
.dk-noticias-grade4 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 0 32px;
  align-items: start;
}
.dk-noticias-col-esq {
  min-width: 0;
}
.dk-noticias-col-dir {
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
@media (max-width: 1280px) {
  .dk-noticias-grade4 { grid-template-columns: 1fr; }
  .dk-noticias-col-dir {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 24px;
    margin-top: 8px;
  }
}

/* Cards compactos de "Novidades do Certifico" — sem imagem, cantos retos */
.dk-nov-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dk-nov-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px 13px;
  background: var(--surface);
}
.dk-nov-card-meta {
  margin-bottom: 4px;
}
.dk-nov-card-data {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-3);
  text-transform: uppercase;
}
.dk-nov-card-titulo {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}

/* Botão CERTIFICAR (parada) — azul vivo, brilhoso, com brilho passando (shimmer) */
.pd-cert-shine {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(96,165,250,.65), 0 8px 22px rgba(37,99,235,.45);
}
.pd-cert-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: pdCertShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pdCertShine {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* Variante mais sutil e lenta do brilho — sem box-shadow fixo (mantém a cor/
   semântica de quem aplica), usada nos botões de MODO "Sistema + IA PRO" /
   "Total IA PRO" da tela de conferência do Certifico (capture.js). */
.pd-cert-shine-soft {
  position: relative;
  overflow: hidden;
}
.pd-cert-shine-soft::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  animation: pdCertShineSoft 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pdCertShineSoft {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

/* ════════════════════════════════════════════════════
   ITEM 3 — Tela de Segurança (rota parceiros)
   Cards com ícone + título + descrição, cantos retos,
   paleta navy. NÃO usa pílulas — só texto colorido.
   ════════════════════════════════════════════════════ */
.dk-seg-intro {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-2);
  max-width: 760px;
  margin: 0 0 22px;
  line-height: 1.55;
}
.dk-seg-section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 24px 0 10px;
}
.dk-seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.dk-seg-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  transition: border-color .14s;
}
.dk-seg-card:hover { border-color: var(--brand); }
.dk-seg-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--brand-tint);
  border-radius: 6px;
  color: var(--brand);
}
.dk-seg-icon.danger { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); }
.dk-seg-icon.success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.dk-seg-icon.purple { background: color-mix(in srgb, #7C3AED 10%, var(--surface)); color: #7C3AED; }
.dk-seg-body { flex: 1; min-width: 0; }
.dk-seg-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dk-seg-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
}
.dk-seg-status {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 5px;
}
.dk-seg-status.ok { color: var(--success); }
.dk-seg-status.parcial { color: #D97706; }
.dk-seg-gap-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 16px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.dk-seg-gap-note strong { color: var(--text); font-weight: 700; }

/* ── SEGURANÇA — cabeçalho hero e box de isolamento (Task 1) ── */
.dk-seg-hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--border);
}
.dk-seg-hero-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--brand-tint);
  border-radius: 8px;
  color: var(--brand);
}
.dk-seg-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  line-height: 1.1;
}
.dk-seg-hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--text-2);
  margin-top: 5px;
  line-height: 1.45;
}

/* Box de destaque: isolamento dono-only */
.dk-seg-isolation-box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--brand-tint);
  border: 2px solid var(--brand);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.dk-seg-isolation-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--brand);
  border-radius: 6px;
  color: #fff;
}
.dk-seg-isolation-body { flex: 1; min-width: 0; }
.dk-seg-isolation-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--brand);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dk-seg-isolation-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
.dk-seg-isolation-text strong {
  color: var(--brand);
  font-weight: 700;
}

/* Box de rodapé "outros recursos" */
.dk-seg-outros-box {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.dk-seg-outros-box svg { flex-shrink: 0; margin-top: 1px; }

/* Dark mode adjustments */
.dark .dk-seg-isolation-box {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.dark .dk-seg-isolation-text { color: var(--text); }

/* ── GERADOR — bloco de motivo de NEGATIVA (harmonizado 09/07 noite, pedido
   literal do Orlando): era vermelho SÓLIDO gritante (#B41C1C pintando o
   cartão inteiro, texto branco). Vira fundo neutro com tint vermelho bem
   suave (~6-8% de mistura) + acento pontual: borda esquerda fina vermelha
   e título em vermelho — vermelho reservado a acento, não a moldura
   berrante (hierarquia por tipografia/cor, linha do Orlando). Os chips de
   motivo e o textarea "Outros" voltam ao padrão normal do app
   (.dk-gen-motivo-btn / .dk-gen-cfg-input, styles.css acima) — as variantes
   "chip branco translúcido sobre fundo vermelho" saem por não fazerem mais
   sentido com o cartão agora claro. */
.dk-gen-bloco-negativa {
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.22);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.dk-gen-bloco-negativa .dk-gen-negativa-label {
  color: var(--danger);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dark .dk-gen-bloco-negativa {
  background: rgba(226,84,80,.09);
  border-color: rgba(226,84,80,.28);
  border-left-color: var(--danger);
}
.dark .dk-gen-bloco-negativa .dk-gen-negativa-label { color: var(--danger); }

/* ════════════════════════════════════════════════════
   U1 — EFEITO ELÁSTICO nos recolhíveis/trocas do desktop
   (missão aprovada 02/jul). CSS puro, zero libs, zero peso:
   curva --ease-spring (token em :root) com overshoot discreto
   (~2-3%, "sofisticado, não gelatina"), .32-.38s. Cobre:
     · troca de aba/seção do dashboard (#screen-area > .dk-content)
     · gaveta "Dados do tribunal, comarca e do oficial" (dk-gen-of-body)
     · <details> "Tabela XI" (.dk-details-spring / .spring-in)
     · chat da carga (dkChatFadeIn, ver desktop-screens.js)
     · gavetas do radar (dk-ia-radar-drawer-body / dk-ia-drawer-body)
   Prefere animar transform/opacity; altura só nos colapsáveis pequenos
   via grid-template-rows 0fr→1fr (aceito, "num card só" — não listas).
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Conteúdo entrando ao trocar de aba/seção no desktop (Operação, Gerador,
     Certidões, Meus modelos, Banco de dados, Segurança…). O <main id="screen-
     -area"> é recriado inteiro a cada navegação (app.innerHTML), então a
     animação reinicia sozinha — sem JS, sem observar nada. */
  @keyframes dkContentIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .dk-content { animation: dkContentIn .34s var(--ease-spring) both; }

  /* Utilitária reutilizável — qualquer bloco que precise do mesmo "entra com
     leve overshoot" (ex.: conteúdo de um <details> nativo ao abrir). */
  @keyframes springIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .spring-in { animation: springIn .32s var(--ease-spring) both; }

  /* <details> nativo (ex.: Tabela XI) — o navegador não anima a altura do
     <details>/<summary> por padrão; a classe .dk-details-spring só garante
     que o filho .spring-in dispare a animação toda vez que abre (o React-like
     "remount" não existe aqui, então usamos :not([open]) pra resetar o estado
     via animation, que sempre reinicia ao alternar [open]). */
  .dk-details-spring[open] > .spring-in { animation: springIn .32s var(--ease-spring) both; }
}

/* ══════════════════════════════════════════════════════════════════════
   BOTÕES "RESINA FORTE" — home (4 quadrados + lupa) e mapa em tela cheia
   (5 botões maiores). Pedido do Orlando 2026-07-03: fundo vitrificado
   (gradiente 3 tons + sombras internas de brilho/sombra), ícones brancos
   (funil = ícone escuro p/ contraste no âmbar), SEM borda.
   Cores fixas de identidade (não usam var(--brand)/var(--danger), que mudam
   no dark mode) — mesma lógica que o WhatsApp já usava (#1B8A4B fixo).
   Estado .is-pressed (JS, touchstart/touchend) + :active (mouse/trackpad
   e fallback iOS) aplicam o MESMO efeito: fundo clareado, sombra interna
   invertida, translateY(1px) e glow externo dourado (não havia glow dourado
   de "pressed" já estabelecido no app — criado aqui e vira o padrão). ── */
.btn-resina {
  border: none;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-resina.is-disabled { opacity: .4; box-shadow: none !important; background: color-mix(in srgb, currentColor 12%, transparent) !important; }

/* WhatsApp — verde */
.btn-resina.resina-whatsapp {
  background: linear-gradient(180deg, #35B369 0%, #1B8A4B 45%, #146B39 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
/* ── Urgência/Proximidade/Filtro — refino 18/07 (Orlando, linguagem
   "pintado = ativo", a mesma da tabbar): em REPOUSO o botão é só o
   CONTORNO na cor de identidade (fundo de superfície, ícone na cor — ver
   corIcone em home.js/mapa.js); ATIVO ganha a resina vitrificada de
   sempre (ver .is-ativo abaixo). Vale na home e no mapa em tela cheia
   (mesmas classes). WhatsApp e busca não mudam. */
.btn-resina.resina-urgencia,
.btn-resina.resina-proximidade,
.btn-resina.resina-audiencia,
.btn-resina.resina-filtro {
  background: var(--surface);
  border: 1.5px solid;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.btn-resina.resina-urgencia    { border-color: #C0392B; }
.btn-resina.resina-proximidade { border-color: #1E3A5F; }
.btn-resina.resina-audiencia   { border-color: #6C4AB6; }
.btn-resina.resina-filtro      { border-color: #C98C1E; }
.dark .btn-resina.resina-proximidade { border-color: #6E93C4; }
.dark .btn-resina.resina-audiencia   { border-color: #9B7FD4; }
/* Busca (lupa) — navy chapado sólido (contexto menor, sem gradiente/resina,
   só alinha o estado apertado com os outros — pedido do Orlando). */
.btn-resina.resina-busca {
  background: #1E3A5F;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}

/* Estado ATIVO PERSISTENTE — refino 18/07 (Orlando): INVERTIDO. O ativo
   agora é o botão PINTADO com a resina vitrificada da sua cor ("ganha cor
   e parece com a resina"), levemente maior; o repouso é o contorno (acima).
   Substitui o esmaecer/encolher de 05/07 (registro no histórico). */
.btn-resina.is-ativo { transform: scale(1.04); border-color: transparent; }
.btn-resina.resina-urgencia.is-ativo {
  background: linear-gradient(180deg, #DE5644 0%, #C0392B 45%, #992A1E 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.btn-resina.resina-proximidade.is-ativo {
  background: linear-gradient(180deg, #33588A 0%, #1E3A5F 45%, #142942 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.btn-resina.resina-audiencia.is-ativo {
  background: linear-gradient(180deg, #8A6BD4 0%, #6C4AB6 45%, #52368C 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.btn-resina.resina-filtro.is-ativo {
  background: linear-gradient(180deg, #F6C25E 0%, #E8A93B 45%, #C98C1E 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
/* Toque em cima de ativo: glow dourado momentâneo sem perder a pintura */
.btn-resina.is-ativo.is-pressed,
.btn-resina.is-ativo:active {
  transform: scale(1.04) translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.3), 0 0 0 3px rgba(232,169,59,.35) !important;
}
/* Busca do mapa ABERTA (achado A2 da revisão 18/07): a inversão do
   is-ativo tirou a diferenciação dela — devolve o "pressionado" navy
   escuro (o ícone já vira X, isto é só o reforço de estado). */
.btn-resina.resina-busca.is-ativo {
  background: #0F2444;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4);
}

/* Estado apertado — pedido 2026-07-03 (ajuste pós-teste no iPhone): TRANSLÚCIDO
   (opacity ~.55) + afundado (sombra interna invertida + translateY) + glow
   dourado — troca o brightness(1.14) anterior (clareava o fundo, mas o
   Orlando pediu "translúcido" explicitamente; a combinação opacity+inset
   já deixa claro que o botão "sumiu pra dentro"). Válido em home E mapa
   (mesma classe/CSS, consistência automática entre as duas telas).
   Aplicado via classe .is-pressed (JS) E via :active nativo (mouse/trackpad);
   no iOS o :active sozinho não dispara sem um listener de toque no elemento
   — por isso o JS soma touchstart/touchend pra ligar/desligar .is-pressed
   manualmente (ver home.js/mapa.js, _bindBotoesResina). */
.btn-resina.is-pressed,
.btn-resina:active {
  opacity: .55;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 0 0 3px rgba(232,169,59,.35) !important;
  transform: translateY(1px);
}
.btn-resina.resina-busca.is-pressed,
.btn-resina.resina-busca:active {
  opacity: .55;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 0 0 3px rgba(232,169,59,.35) !important;
  transform: translateY(1px);
}
/* Desabilitado nunca fica "apertado" (sem toque útil) */
.btn-resina.is-disabled.is-pressed,
.btn-resina.is-disabled:active {
  opacity: .4;
  box-shadow: none !important;
  transform: none;
}

/* ── Variante DESKTOP do padrão resina — botão retangular com ÍCONE + RÓTULO
   (o .btn-resina original do mobile é só-ícone, quadrado). Mesma família
   visual (gradiente 3 tons + sombras internas de brilho/sombra, glow
   dourado no pressed) — usada nas orelhinhas "Todos/WhatsApp/End. inválido"
   do card "1 · Parte" do gerador PC (pedido Orlando 05/07). Reaproveita as
   classes de cor .resina-* já definidas acima (background/box-shadow) —
   aqui só o formato (padding horizontal, radius reto, texto) muda. Cantos
   SEMPRE retos (var(--r)), nunca redondos/pílula. */
.dk-gen-parte-tabs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 12px;
  flex-wrap: wrap;
}
.dk-btn-resina {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: var(--r, 6px);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #fff;
  white-space: nowrap;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dk-btn-resina svg { flex-shrink: 0; }
.dk-btn-resina-label { line-height: 1; }
.dk-btn-resina-count {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 11.5px;
  color: #fff;
  opacity: .92;
}
/* Cores — mesmos 3 gradientes do padrão resina mobile (ver .btn-resina.resina-*) */
.dk-btn-resina.resina-proximidade {
  background: linear-gradient(180deg, #33588A 0%, #1E3A5F 45%, #142942 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.dk-btn-resina.resina-whatsapp {
  background: linear-gradient(180deg, #35B369 0%, #1B8A4B 45%, #146B39 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.dk-btn-resina.resina-urgencia {
  background: linear-gradient(180deg, #DE5644 0%, #C0392B 45%, #992A1E 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.75), inset 0 -2px 3px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.25);
}
.dk-btn-resina:hover { filter: brightness(1.06); }
/* Estado ATIVO PERSISTENTE — mesma linguagem do .btn-resina.is-ativo (escurece
   + sombra interna persistente, sem glow — o glow é só do toque momentâneo) */
.dk-btn-resina.is-ativo {
  filter: brightness(.85);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.25);
}
.dk-btn-resina.is-ativo:hover { filter: brightness(.85); }
.dk-btn-resina.is-ativo:active {
  filter: brightness(.85);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), 0 0 0 3px rgba(232,169,59,.35) !important;
  transform: translateY(1px);
}
.dk-btn-resina:active {
  filter: brightness(1);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 0 0 3px rgba(232,169,59,.35) !important;
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-resina { transition: none; }
  .dk-btn-resina { transition: none; }
  .dk-content,
  .spring-in,
  .dk-details-spring[open] > .spring-in {
    animation: none !important;
  }
  #dk-gen-of-body,
  .dk-ia-radar-drawer-body,
  .dk-ia-drawer-body,
  .dk-ia-rdr-chev,
  #dk-gen-of-arr {
    transition-duration: .01ms !important;
  }
}

/* Família aurora — botões (borda aurora sobre papel, opção 2 aprovada) */
@keyframes auroraSpin { to { transform: rotate(360deg); } }

/* .btn-aurora — PRINCIPAL: borda aurora sempre animada, sem DOM extra */
.btn-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  border-radius: var(--r);
  background: transparent;
  color: #22384f;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 12px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-aurora::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: -2;
  background: conic-gradient(#2C4A6E, #FF6B4A, #EFA827, #2C4A6E);
  animation: auroraSpin 5s linear infinite;
}
.btn-aurora::after {
  content: '';
  position: absolute;
  inset: 1.6px;
  z-index: -1;
  border-radius: calc(var(--r) - 2px);
  background: rgba(255, 255, 255, .92);
}
.btn-aurora:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 74, 110, .18);
}

/* .btn-aurora-sec — SECUNDÁRIO: aurora só acorda no hover */
.btn-aurora-sec {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(44, 74, 110, .28);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .88);
  color: #22384f;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 12px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .35s ease;
}
.btn-aurora-sec::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: -2;
  background: conic-gradient(#2C4A6E, #FF6B4A, #EFA827, #2C4A6E);
  animation: auroraSpin 5s linear infinite;
  opacity: 0;
  transition: opacity .35s ease;
}
.btn-aurora-sec::after {
  content: '';
  position: absolute;
  inset: 1.6px;
  z-index: -1;
  border-radius: calc(var(--r) - 2px);
  background: rgba(255, 255, 255, .92);
}
.btn-aurora-sec:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(44, 74, 110, .18);
}
.btn-aurora-sec:hover::before { opacity: 1; }

/* .btn-aurora-ghost — DISCRETO: sem borda lateral, sem animação */
.btn-aurora-ghost {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(44, 74, 110, .25);
  border-radius: 0;
  color: #2C4A6E;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 8px 4px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.btn-aurora-ghost:hover {
  border-bottom-color: #FF6B4A;
  color: #1d2c3c;
}

/* .btn-aurora-mini — botãozinho de ação */
.btn-aurora-mini {
  background: #fff;
  border: 1px solid rgba(44, 74, 110, .25);
  border-radius: 6px;
  color: #22384f;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.btn-aurora-mini:hover {
  border-color: #FF6B4A;
  color: #993C1D;
  background: #FAECE7;
}

@media (prefers-reduced-motion: reduce) {
  .btn-aurora::before,
  .btn-aurora-sec::before { animation: none; }
}

/* ── Componente compartilhado: rótulo embutido + grid de toggles estilo
   iOS (.pf-embed-label / .pf-toggle-grid / .pf-toggle-cell / .pf-ios-switch)
   — movido de profile.js (_pfEditorialCSS, injeção runtime) para cá em
   27/07 (correção estrutural A-1, revisor): CSS estático não deve viver
   em JS — quem abrisse a Chancela (capture.js) sem ter passado pelo Perfil
   antes via os toggles INVISÍVEIS (a tag <style> só existia se profile.js
   já tivesse rodado 1x). Consumido por profile.js (card Preferências) e
   capture.js (card "Configurações da certidão" da Chancela nova).
   Byte-fiel ao CSS gerado pela função original. ── */

/* Rótulo de seção EMBUTIDO no canto do card — mesmo padrão do "rótulo
   embutido" do cadastro (_campoIn, cadastro.js 26/07): 10-11px uppercase,
   var(--text-3), colado no canto superior esquerdo, sem header próprio
   abaixo dele. Usado quando o card inteiro é "a seção" (ex.: Preferências,
   Configurações da certidão) e o sub-header antigo (ícone+título por
   linha) seria redundante. */
.pf-embed-label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  padding:12px 16px 2px;}

/* Grid 2 colunas p/ toggles de preferência (Tema escuro · Sons do app ·
   Assinatura digital · Respeitar parágrafos · e demais que caibam na
   mesma seção) — cada célula com ícone pequeno + rótulo + chavinha,
   empilhado quando a coluna aperta demais (viewport bem estreito). */
.pf-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 16px 14px;}
@media (max-width:340px){.pf-toggle-grid{grid-template-columns:1fr;}}
.pf-toggle-cell{display:flex;align-items:center;gap:8px;padding:10px 10px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-width:0;}
.pf-toggle-cell__label{flex:1;min-width:0;font-family:'Montserrat',sans-serif;
  font-weight:600;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}

/* Chavinha estilo iPhone (exceção registrada à regra "sem pílula" — ordem
   explícita do Orlando 26/07: é o desenho universal de switch iOS, não
   uma pílula de rótulo). Trilho 44×26 (proporcional ao 51×31 nativo,
   encolhido pra caber 2 por linha), bolinha branca com sombra sutil, navy
   da casa quando ligado, cinza claro quando desligado, transição suave.
   Substitui .toggle SÓ nesta seção — .toggle segue igual no resto do app. */
.pf-ios-switch{--w:44px;--h:26px;width:var(--w);height:var(--h);flex-shrink:0;
  background:var(--border-strong);border-radius:999px;position:relative;cursor:pointer;
  transition:background .2s;padding:0;}
.pf-ios-switch.on{background:var(--brand);}
.pf-ios-switch__thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.04);
  transition:left .2s;}
.pf-ios-switch.on .pf-ios-switch__thumb{left:20px;}

/* ── Redesign editorial do Perfil (10/07, mesmo dialeto da tela Segurança
   do desktop): eyebrow caps colorido por GRUPO entre blocos de cards, chip
   de ícone com tint suave na cor do grupo no cabeçalho de cada card, título
   Montserrat navy fixo. Classes exclusivas do Perfil (profile.js) — movidas
   junto no mesmo A-1 de 27/07 pra aposentar por completo a injeção runtime
   _pfEditorialCSS (agora NO-OP). Nada mudou visualmente. ── */

/* Eyebrow entre grupos de cards */
.pf-eyebrow{margin:30px 4px 12px;padding-top:16px;border-top:1px solid var(--divider);
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pf-eye-c,var(--brand));}
.pf-eyebrow--first{margin-top:2px;padding-top:0;border-top:none;}

/* Cabeçalho de card: chip de ícone + título */
.pf-card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.pf-card-head--inline{margin-bottom:0;}
.pf-card-icon{width:36px;height:36px;flex-shrink:0;border-radius:var(--r,8px);
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--pf-c,var(--brand)) 12%,var(--surface));}
.dark .pf-card-icon{background:color-mix(in srgb,var(--pf-c,var(--brand)) 26%,var(--surface));}
.pf-card-title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--brand);letter-spacing:-.005em;}

/* Micro-caption discreta (nota de sons no silencioso) */
.pf-microcaption{padding:0 16px 12px;font-family:'Inter',sans-serif;font-size:10px;
  line-height:1.4;color:var(--text-3);}

/* Expand/collapse da seção "Alterar senha" — recolhida por padrão, só o
   botão; ao abrir, revela os 3 campos + confirmar/cancelar inline no MESMO
   card (sem modal). */
.pf-senha-campos{overflow:hidden;max-height:0;transition:max-height .25s ease;}
.pf-senha-campos.aberta{max-height:420px;}

/* App Check fase 1: selo reCAPTCHA oculto (atribuição exigida está em termos.html) */
.grecaptcha-badge{visibility:hidden !important}

/* ── Telas estreitas (auditoria de responsividade 13/07) ─────────────────
   ≤400px (iPhone Pro/mini/SE, Androids compactos): reduz o respiro
   horizontal fixo que pesava proporcionalmente mais nessas larguras.
   Nada muda em 401px+ (o layout de referência continua idêntico). */
@media (max-width: 400px) {
  .appbar { padding-left: 16px; padding-right: 16px; }
  .brandbar { padding-left: 16px; padding-right: 16px; gap: 8px; }
}
/* ≤380px: economia extra — o rótulo do botão MANDADOS vira só ícone. */
@media (max-width: 380px) {
  .appbar { padding-left: 14px; padding-right: 14px; }
  .brandbar { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .brandpill-txt { display: none; }
}