/* ====================================================================
   web/css/ds-v2.css — DS v2 do Newgotiator AI (Claude Design, 09/10/2026)
   GERADO de para-claude-design-revisao/entrega/ds/newgotiator/{tokens.css,
   components/bundle.css}, sem mudar valor. Diferença do original: os tokens
   valem SÓ dentro do painel v2 (#ck-painel com <html data-ck2>) e no balão do
   tour, para o chat e as outras telas não mudarem; as regras globais do bundle
   (html, body, *, button) saíram. As classes .ds-* não existem fora do painel.
   ==================================================================== */
html[data-cockpit][data-ck2] #ck-painel, html[data-ds2] .tour-balao, html[data-ds2] .tour-dica {
  --ds-ink:#0a1628; --ds-ink-2:#5b6472; --ds-ink-3:#676e7a; --ds-ink-inversa:#ffffff; --ds-borda-campo:#8a929e;
  --ds-hair:rgba(10,22,40,.08); --ds-hair-2:rgba(10,22,40,.14);
  --ds-fundo:#ffffff; --ds-fill:#f5f5f7; --ds-fill-2:#ececef; --ds-papel:#fbfaf7;
  --ds-hover:rgba(10,22,40,.045); --ds-ativo:rgba(10,22,40,.07); --ds-veu:rgba(10,22,40,.28);
  --ds-azul:#152848; --ds-azul-hover:#1d365f; --ds-azul-claro:#eef2f8; --ds-azul-linha:#c9d3e6; --ds-azul-texto:#33476b; --ds-foco:#152848;
  --ds-hipotese:#8a6405; --ds-hipotese-forte:#a87a06; --ds-hipotese-claro:#fbf4e3; --ds-hipotese-linha:#e3c77a;
  --ds-perigo:#b42318; --ds-perigo-claro:#fbeaea; --ds-novo:#1f7a4d; --ds-novo-claro:#e8f3ec;
  --ds-ouro:#c9a040; --ds-ouro-claro:#d5b96e;
  --ds-marca-profundo:#080e1c; --ds-marca-elevado:#14223f; --ds-marca-texto-2:#aab4c6; --ds-marca-linha:rgba(255,255,255,.12);
  --ds-marinho-50:#f4f7fc; --ds-marinho-100:#ecf0f8; --ds-marinho-200:#d8e0ef; --ds-marinho-300:#b6c5df; --ds-marinho-400:#8a9fc4;
  --ds-marinho-500:#617ba7; --ds-marinho-600:#415b88; --ds-marinho-700:#2b426a; --ds-marinho-800:#1a2d4e; --ds-marinho-900:#0c182d;
  --ds-ouro-50:#fdf6e8; --ds-ouro-100:#fbefd6; --ds-ouro-200:#f3ddb3; --ds-ouro-300:#e3bf76; --ds-ouro-400:#c4962b;
  --ds-ouro-500:#9b7300; --ds-ouro-600:#745501; --ds-ouro-700:#563e00; --ds-ouro-800:#3d2a00; --ds-ouro-900:#231600;
  --ds-int-1:#273c64; --ds-int-2:#077c86; --ds-int-3:#255a33; --ds-int-4:#9b548d; --ds-int-5:#7b3b1b; --ds-int-6:#5a5e65;
  --ds-e-1:4px; --ds-e-2:8px; --ds-e-3:12px; --ds-e-4:16px; --ds-e-5:24px; --ds-e-6:32px; --ds-e-7:48px;
  --ds-r-1:8px; --ds-r-2:12px; --ds-r-3:16px; --ds-r-4:24px; --ds-r-pilula:999px;
  --ds-sombra-flutua:0 0 0 1px rgba(10,22,40,.08), 0 8px 24px rgba(10,22,40,.08);
  --ds-sombra-pop:0 0 0 1px rgba(10,22,40,.06), 0 12px 32px rgba(10,22,40,.12);
  --ds-sombra-folha:0 -12px 40px rgba(10,22,40,.18);
  --ds-sombra-papel:0 1px 2px rgba(10,22,40,.06), 0 0 0 1px rgba(10,22,40,.06);
  --ds-z-grudado:10; --ds-z-painel:100; --ds-z-bandeja:200; --ds-z-veu:290; --ds-z-folha:300; --ds-z-menu:400; --ds-z-aviso:500; --ds-z-modal:600;
  --ds-alvo:44px; --ds-alvo-compacto:32px;
  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:"Source Serif 4", Georgia, "Times New Roman", serif;


  --ds-ease: cubic-bezier(.23,1,.32,1);
  --ds-d-toque: 120ms;
  --ds-d-curta: 180ms;
  --ds-d-media: 240ms;
  --ds-d-longa: 320ms;
  --ds-num: tabular-nums lining-nums;
}
@media (prefers-reduced-motion: reduce) {
  html[data-cockpit][data-ck2] #ck-painel, html[data-ds2] .tour-balao, html[data-ds2] .tour-dica { --ds-d-toque: 0ms; --ds-d-curta: 0ms; --ds-d-media: 0ms; --ds-d-longa: 0ms; }
}
/* Newgotiator AI · DS v2 — componentes (CSS puro, sem framework).
   Tokens: tokens.css (gerado de tokens.json). Aqui só o que tokens.json não carrega: movimento e componentes. */


/* ---------- base ---------- */
.ds-num, .ds-nota, .ds-tab-num { font-variant-numeric: var(--ds-num); }
.ds-serif { font-family: var(--font-serif); font-weight: 600; font-variant-numeric: var(--ds-num); }
.ds-ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ds-ico.s16 { width: 16px; height: 16px; }
.ds-ico.s15 { width: 15px; height: 15px; }
.ds-ico.s20 { width: 20px; height: 20px; }
.ds-ico.s24 { width: 24px; height: 24px; }
.ds-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-muted { color: var(--ds-ink-2); }
.ds-meta { color: var(--ds-ink-3); font-size: 12px; line-height: 17px; }
.ds-hip { color: var(--ds-hipotese); text-decoration: underline dashed var(--ds-hipotese-forte) 1px; text-underline-offset: 3px; }
/* hipótese em texto: dourado + sublinhado tracejado, sem "~" (seção Hipótese, 09/10) */
.ds-falta { color: var(--ds-perigo); }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ds-dot.novo { background: var(--ds-novo); }
.ds-dot.hip { background: var(--ds-hipotese-forte); }
.ds-dot.falta { background: var(--ds-perigo); }
.ds-dot.marca { background: var(--ds-ouro); }

/* foco de teclado: só com teclado, anel sólido 2 px afastado 2 px */
.ds-focavel:focus-visible, .ds-b:focus-visible, .is-focus { outline: 2px solid var(--ds-foco); outline-offset: 2px; }
.ds-sobre-marca .ds-b:focus-visible, .ds-sobre-marca .is-focus { outline-color: var(--ds-ouro); }

/* ---------- etiquetas de galeria (não vão ao produto) ---------- */
.ds-padrao { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ds-ink-2); background: var(--ds-fundo); border: 1px dashed var(--ds-hair-2); border-radius: var(--ds-r-pilula); padding: 2px 9px; white-space: nowrap; }
.ds-padrao b { font-weight: 600; color: var(--ds-ink); }
.ds-maquete { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--ds-ouro); }
.ds-maquete span { color: #fff; letter-spacing: 0; font-weight: 400; }
.ds-barra-maquete { height: 36px; background: var(--ds-ink); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.ds-barra-maquete .ds-padroes { display: flex; gap: 6px; }
.ds-barra-maquete .ds-padrao { background: transparent; color: var(--ds-marca-texto-2); border-color: rgba(255,255,255,.22); }
.ds-barra-maquete .ds-padrao b { color: #fff; }
.ds-estado-rot { font-size: 12px; line-height: 16px; color: var(--ds-ink-3); margin: 0 0 6px; }
.ds-grade { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-start; }
.ds-grade > * { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ds-grade.c5 > :not([style*="width"]) { flex: 1 1 170px; }
.ds-grade.c4 > :not([style*="width"]) { flex: 1 1 210px; }
.ds-grade.c3 > :not([style*="width"]) { flex: 1 1 280px; }
.ds-grade.c2 > :not([style*="width"]) { flex: 1 1 360px; }
.ds-grade > :empty { display: none; }
.ds-vitrine { padding: 20px 24px; }
.ds-vitrine h4 { margin: 0 0 12px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ds-ink-2); }
.ds-vitrine + .ds-vitrine { border-top: 1px solid var(--ds-hair); }

/* ---------- marca: símbolo do logo atual (farol) + nome "Newgotiator AI" ---------- */
.ds-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ds-ink); text-decoration: none; }
.ds-marca .simb { width: 30px; height: 30px; flex: none; display: block; }
.ds-marca .simb svg { width: 100%; height: 100%; display: block; }
.ds-marca .nome { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.ds-marca .nome i { font-style: normal; font-weight: 500; color: var(--ds-ink-2); margin-left: 3px; }
.ds-marca.grande .simb { width: 56px; height: 56px; }
.ds-marca.grande .nome { font-size: 22px; line-height: 26px; }
.ds-sobre-marca .ds-marca, .ds-marca.inversa { color: #fff; }
.ds-sobre-marca .ds-marca .nome i, .ds-marca.inversa .nome i { color: var(--ds-ouro-claro); }

/* ---------- botões ---------- */
.ds-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--ds-r-pilula); background: transparent; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--ds-ink); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--ds-d-curta) var(--ds-ease), transform var(--ds-d-toque) var(--ds-ease), color var(--ds-d-curta), box-shadow var(--ds-d-curta); -webkit-tap-highlight-color: transparent; }
.ds-b::before { content: ""; position: absolute; inset: -6px -2px; } /* área de clique até 44 */
.ds-b:active, .ds-b.is-active { transform: scale(.98); }
.ds-b[disabled], .ds-b[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.ds-b .ds-ico { width: 16px; height: 16px; }
.ds-b.toque, .ds-toque .ds-b { min-height: 44px; font-size: 15px; line-height: 22px; padding: 0 18px; }
.ds-b.toque .ds-ico, .ds-toque .ds-b .ds-ico { width: 18px; height: 18px; }
.ds-b .atalho { font-size: 12px; line-height: 16px; font-weight: 500; color: inherit; opacity: .72; margin-left: 4px; font-variant-numeric: var(--ds-num); }

/* genéricos */
.ds-b-prim { background: var(--ds-azul); color: #fff; }
.ds-b-prim:hover, .ds-b-prim.is-hover { background: var(--ds-azul-hover); }
.ds-b-sec { background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); }
.ds-b-sec:hover, .ds-b-sec.is-hover { background: var(--ds-fill); }
.ds-b-txt { color: var(--ds-ink-2); padding: 0 8px; }
.ds-b-txt:hover, .ds-b-txt.is-hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-b-dest { color: var(--ds-perigo); padding: 0 8px; }
.ds-b-dest:hover, .ds-b-dest.is-hover { background: var(--ds-perigo-claro); }
.ds-b-ico { width: 32px; padding: 0; color: var(--ds-ink-2); border-radius: var(--ds-r-1); }
.ds-b-ico:hover, .ds-b-ico.is-hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-b-ico.toque { width: 44px; min-height: 44px; }

/* os 3 que dizem para onde vão: forma de BOLHA (chat) · CAIXA (bandeja) · LINK (Ferramentas) */
.ds-b-skill { background: var(--ds-azul-claro); color: var(--ds-azul); border-radius: 16px 16px 16px 5px; padding: 0 14px 0 12px; }
.ds-b-skill:hover, .ds-b-skill.is-hover { background: #e2e9f4; }
.ds-b-corr { background: var(--ds-fundo); color: var(--ds-ink); border-radius: var(--ds-r-1); box-shadow: inset 0 0 0 1px var(--ds-hair-2); padding: 0 12px 0 10px; }
.ds-b-corr:hover, .ds-b-corr.is-hover { background: var(--ds-fill); }
.ds-b-corr.na-bandeja { background: var(--ds-azul-claro); color: var(--ds-azul); box-shadow: inset 0 0 0 1px var(--ds-azul-linha); }
.ds-b-corr.nao-e { background: var(--ds-perigo-claro); color: var(--ds-perigo); box-shadow: inset 0 0 0 1px rgba(180,35,24,.28); }
.ds-b-ferr { color: var(--ds-ink-2); padding: 0 8px; border-radius: var(--ds-r-1); }
.ds-b-ferr .onde { font-size: 12px; font-weight: 400; color: var(--ds-ink-3); }
.ds-b-ferr .seta { width: 15px; height: 15px; color: var(--ds-ink-3); }
.ds-b-ferr > span:not(.onde) { text-decoration: underline; text-decoration-color: var(--ds-hair-2); text-underline-offset: 3px; }
.ds-b-ferr:hover, .ds-b-ferr.is-hover { color: var(--ds-ink); background: var(--ds-hover); }
.ds-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* grupo de decisão: Confirmar · Não é · lápis */
.ds-decisao { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--ds-fill); border-radius: var(--ds-r-1); }
.ds-decisao .ds-b { min-height: 28px; border-radius: 6px; padding: 0 10px; font-size: 13px; color: var(--ds-ink-2); }
.ds-decisao .ds-b:hover, .ds-decisao .ds-b.is-hover { color: var(--ds-ink); background: rgba(255,255,255,.7); }
.ds-decisao .ds-b.sel { background: var(--ds-fundo); color: var(--ds-azul); box-shadow: 0 0 0 1px var(--ds-hair-2); }
.ds-decisao .ds-b.sel-nao { background: var(--ds-perigo-claro); color: var(--ds-perigo); }
.ds-decisao .ds-b-ico { width: 28px; padding: 0; }

/* atalho de teclado escrito (padrão Raycast) */
.ds-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--ds-fill); box-shadow: inset 0 0 0 1px var(--ds-hair); font-size: 12px; line-height: 16px; color: var(--ds-ink-2); font-family: var(--font-sans); justify-content: center; }

/* ---------- chips e pílulas ---------- */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; background: var(--ds-azul-claro); color: var(--ds-azul-texto); border-radius: 16px 16px 16px 5px; font-size: 15px; line-height: 22px; border: 0; cursor: pointer; }
.ds-chip:hover, .ds-chip.is-hover { background: #e2e9f4; color: var(--ds-azul); }
.ds-pil { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--ds-r-pilula); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--ds-fill); color: var(--ds-ink-2); }
.ds-pil.hip { background: var(--ds-hipotese-claro); color: var(--ds-hipotese); box-shadow: inset 0 0 0 1px var(--ds-hipotese-linha); }
.ds-pil.novo { background: var(--ds-novo-claro); color: var(--ds-novo); }
.ds-pil.agora { background: var(--ds-azul-claro); color: var(--ds-azul); font-weight: 600; }
.ds-pil.priv { background: var(--ds-fill); color: var(--ds-ink-2); }
.ds-pil.falta { background: var(--ds-perigo-claro); color: var(--ds-perigo); }
.ds-pil .ds-ico { width: 13px; height: 13px; }
.ds-int { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; flex: none; font-variant-numeric: var(--ds-num); }
.ds-int.outra { border-radius: 7px; } /* outra parte: quadrado arredondado (forma, não só cor) */
.ds-int.i1 { background: var(--ds-int-1); } .ds-int.i2 { background: var(--ds-int-2); } .ds-int.i3 { background: var(--ds-int-3); }
.ds-int.i4 { background: var(--ds-int-4); } .ds-int.i5 { background: var(--ds-int-5); } .ds-int.i6 { background: var(--ds-int-6); }
.ds-int.hip { box-shadow: 0 0 0 2px var(--ds-fundo), 0 0 0 3.5px var(--ds-hipotese-forte); }
.ds-int.vazio { background: transparent; color: var(--ds-ink-3); box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); }
.ds-fonte { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ds-ink-2); text-decoration: none; padding: 2px 8px 2px 4px; border-radius: var(--ds-r-pilula); background: var(--ds-fill); }
.ds-fonte .fav { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; }
.ds-fonte .n { font-variant-numeric: var(--ds-num); font-weight: 600; color: var(--ds-ink); }
.ds-ref { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--ds-fill); color: var(--ds-ink-2); font-size: 12px; line-height: 1; font-weight: 600; vertical-align: 2px; margin: 0 2px; font-variant-numeric: var(--ds-num); }

/* origem a um toque (padrão Granola + Perplexity) */
.ds-origem { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ds-ink-3); border: 0; background: transparent; cursor: pointer; position: relative; flex: none; }
.ds-origem::before { content: ""; position: absolute; inset: -10px; }
.ds-origem:hover, .ds-origem.is-hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-origem .ds-ico { width: 15px; height: 15px; }
.ds-citacao { margin: 8px 0 0; padding: 8px 12px; background: var(--ds-fill); border-radius: var(--ds-r-1); font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-citacao q { color: var(--ds-ink); quotes: "“" "”"; }
.ds-citacao .de { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--ds-ink-3); }

/* ---------- linha de lista ---------- */
.ds-lista { list-style: none; margin: 0; padding: 0; }
.ds-linha { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--ds-hair); position: relative; text-align: left; width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; font-size: 15px; line-height: 22px; color: var(--ds-ink); }
.ds-lista > li:last-child > .ds-linha, .ds-lista > .ds-linha:last-child { border-bottom: 0; }
button.ds-linha, a.ds-linha { cursor: pointer; border-radius: 0; text-decoration: none; }
button.ds-linha:hover, a.ds-linha:hover, .ds-linha.is-hover { background: var(--ds-hover); }
.ds-linha.aberta { background: var(--ds-azul-claro); }
.ds-linha .corpo { flex: 1; min-width: 0; }
.ds-linha .tit { display: block; }
.ds-linha .sub { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-linha .sub.falta { color: var(--ds-perigo); }
.ds-linha .rot { flex: 0 0 38%; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-linha .val { flex: 1; }
.ds-linha .dir { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.ds-linha .chev { width: 16px; height: 16px; color: var(--ds-ink-3); transition: transform var(--ds-d-curta) var(--ds-ease); }
.ds-linha.aberta .chev { transform: rotate(90deg); color: var(--ds-azul); }
.ds-linha.mudou::after { content: ""; position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ds-novo); }
.ds-linha.priv .val { color: var(--ds-ink-3); }
.ds-linha .cad { width: 15px; height: 15px; color: var(--ds-ink-3); }
.ds-ver-todas { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px; font-size: 13px; font-weight: 500; color: var(--ds-azul-texto); background: none; border: 0; cursor: pointer; }
.ds-esq { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--ds-fill) 0%, var(--ds-fill-2) 50%, var(--ds-fill) 100%); background-size: 200% 100%; animation: ds-brilho 1.6s linear infinite; }
@keyframes ds-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ds-esq { animation: none; } }

/* ---------- seção recolhível ---------- */
.ds-secao { border-bottom: 1px solid var(--ds-hair); }
.ds-secao-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 0; background: none; border: 0; text-align: left; cursor: pointer; position: relative; }
.ds-secao-cab:hover .tit, .ds-secao-cab.is-hover .tit { color: var(--ds-azul); }
.ds-secao-cab .tx { flex: 1; min-width: 0; }
.ds-secao-cab .tit { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ds-ink); }
.ds-secao-cab .res { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-secao-cab .seta { width: 18px; height: 18px; color: var(--ds-ink-3); transition: transform var(--ds-d-curta) var(--ds-ease); }
.ds-secao[aria-expanded="true"] > .ds-secao-cab .seta, .ds-secao.aberta > .ds-secao-cab .seta { transform: rotate(180deg); }
.ds-secao-corpo { padding: 0 0 24px; }
.ds-secao:not(.aberta) > .ds-secao-corpo { display: none; }
.ds-entender { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--ds-ink-3); background: none; border: 0; position: relative; cursor: pointer; }
.ds-entender::before { content: ""; position: absolute; inset: -10px; }
.ds-entender:hover { color: var(--ds-ink); background: var(--ds-hover); }
.ds-sub-tit { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 6px; font-size: 13px; line-height: 19px; font-weight: 600; color: var(--ds-ink); }
.ds-sub-tit .ds-meta { font-weight: 400; }

/* ---------- card D (compacto) e ficha E (rica) ---------- */
.ds-card { position: relative; background: var(--ds-fundo); border-radius: var(--ds-r-3); box-shadow: var(--ds-sombra-flutua); padding: 16px; margin: 8px 0 12px; animation: ds-abre var(--ds-d-curta) var(--ds-ease); }
.ds-card::before { content: ""; position: absolute; top: -6px; left: var(--seta-x, 28px); width: 12px; height: 12px; background: var(--ds-fundo); transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(10,22,40,.08); }
@keyframes ds-abre { from { opacity: 0; transform: translateY(-4px); } }
.ds-card .fechar { position: absolute; top: 8px; right: 8px; }
.ds-card .cab { display: flex; gap: 12px; align-items: flex-start; padding-right: 32px; }
.ds-card .cab .tit { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0; }
.ds-card.ficha .cab .tit { font-size: 17px; line-height: 23px; letter-spacing: -.01em; }
.ds-card .estado { font-size: 12px; line-height: 17px; color: var(--ds-ink-3); margin-top: 2px; }
.ds-card p { margin: 10px 0 0; font-size: 15px; line-height: 22px; }
.ds-card .rotulos { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; line-height: 19px; }
.ds-card .rotulos dt { color: var(--ds-ink-3); }
.ds-card .rotulos dd { margin: 0; color: var(--ds-ink); }
.ds-card .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ds-hair); align-items: center; }
.ds-card .rodape-fechar { display: flex; justify-content: center; margin-top: 12px; }
.ds-fazer { display: flex; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 15px; line-height: 22px; }
.ds-fazer .r { display: block; font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.ds-sabemos { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--ds-r-2); box-shadow: inset 0 0 0 1px var(--ds-hair); font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-sabemos.parcial { box-shadow: none; outline: 1px dashed var(--ds-hipotese-linha); outline-offset: -1px; }
.ds-nota-grande { width: 64px; height: 64px; border-radius: var(--ds-r-2); display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-hair-2); flex: none; font-variant-numeric: var(--ds-num); }
.ds-nota-grande.est { box-shadow: none; outline: 1.5px dashed var(--ds-hipotese-forte); outline-offset: -1.5px; color: var(--ds-ink); }
.ds-nota-grande.nada { color: var(--ds-ink-3); outline: 1.5px dashed var(--ds-borda-campo); outline-offset: -1.5px; box-shadow: none; }
.ds-card.erro { box-shadow: var(--ds-sombra-flutua); }
.ds-card.erro .msg { display: flex; gap: 10px; align-items: center; color: var(--ds-ink); }

/* ---------- régua de notas e "quanto sabemos" ---------- */
.ds-nota { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--ds-r-pilula); background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); font-size: 13px; line-height: 1; white-space: nowrap; }
.ds-nota b { font-weight: 600; font-size: 13px; }
.ds-nota .niv { color: var(--ds-ink-2); }
.ds-nota.est { box-shadow: none; outline: 1px dashed var(--ds-hipotese-forte); outline-offset: -1px; }
.ds-nota.nada { box-shadow: none; outline: 1px dashed var(--ds-borda-campo); outline-offset: -1px; color: var(--ds-ink-3); }
.ds-sab { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.ds-sab.solido { background: var(--ds-azul); }
.ds-sab.parcial { background: linear-gradient(90deg, var(--ds-azul) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ds-azul); }
.ds-sab.nada { box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); border: 0; background: none; outline: 1px dashed var(--ds-fundo); outline-offset: -2px; }
.ds-regua { margin-top: 14px; }
.ds-regua .seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ds-regua .seg i { height: 6px; border-radius: 3px; background: var(--ds-fill-2); }
.ds-regua .seg i.at { background: var(--ds-azul); }
.ds-regua .seg i.at.est { background: repeating-linear-gradient(90deg, var(--ds-azul) 0 6px, transparent 6px 9px); }
.ds-regua .nomes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--ds-ink-3); text-align: center; }
.ds-regua .nomes span.at { color: var(--ds-ink); font-weight: 600; }
.ds-regua .faixa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 12px; color: var(--ds-ink-3); text-align: center; font-variant-numeric: var(--ds-num); }
.ds-fraco { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ds-perigo); margin: 3px auto 0; }

/* ---------- balões "Neste turno" ---------- */
.ds-turno-cab { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.ds-turno-cab .t { font-size: 13px; font-weight: 600; color: var(--ds-ink); display: flex; gap: 8px; align-items: center; }
.ds-balao { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 14px; background: var(--ds-fill); border-radius: var(--ds-r-2); margin-bottom: 6px; font-size: 15px; line-height: 22px; transition: transform var(--ds-d-media) var(--ds-ease), opacity var(--ds-d-media); }
.ds-balao .ds-dot { margin-top: 7px; }
.ds-balao .tx { flex: 1; min-width: 0; }
.ds-balao .tx .um { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-balao .tx .mais { display: block; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); margin-top: 4px; white-space: normal; }
.ds-balao .x { margin-top: -5px; }
.ds-balao.aberto .tx .um { white-space: normal; font-weight: 500; }
.ds-balao.saindo { transform: translateX(56%); opacity: .35; }
.ds-balao.curto { flex-direction: column; gap: 6px; padding: 12px 14px; }
.ds-balao.curto q { quotes: "“" "”"; }

/* ---------- moldura do painel ---------- */
.ds-painel { background: var(--ds-fundo); display: flex; flex-direction: column; min-height: 0; position: relative; }
.ds-painel-topo { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px 24px; }
.ds-seg { display: flex; gap: 2px; padding: 3px; background: var(--ds-fill); border-radius: 10px; flex: 1; }
.ds-seg button { flex: 1; min-height: 30px; border: 0; background: none; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ds-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ds-seg button:hover { color: var(--ds-ink); }
.ds-seg button[aria-selected="true"] { background: var(--ds-fundo); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(10,22,40,.08), 0 0 0 1px rgba(10,22,40,.04); }
.ds-toque .ds-seg button { min-height: 38px; font-size: 15px; }
.ds-atalhos { display: flex; align-items: center; gap: 4px; padding: 4px 24px 10px; overflow-x: auto; scrollbar-width: none; position: relative; }
.ds-atalhos::-webkit-scrollbar { display: none; }
.ds-atalhos button { position: relative; flex: none; min-height: 30px; padding: 0 11px; border-radius: var(--ds-r-pilula); border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--ds-ink-2); cursor: pointer; }
.ds-atalhos button:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-atalhos button[aria-current="true"] { background: var(--ds-azul); color: #fff; }
.ds-atalhos button.mudou::after { content: ""; position: absolute; top: 5px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-novo); }
.ds-atalhos-wrap { position: relative; }
.ds-atalhos-wrap .seta-d { position: absolute; right: 0; top: 0; bottom: 6px; width: 56px; display: flex; justify-content: flex-end; align-items: center; padding-right: 12px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 55%); pointer-events: none; color: var(--ds-ink-3); }
.ds-atualizando { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 24px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); border-top: 1px solid var(--ds-hair); }
.ds-atualizando::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 40%; background: var(--ds-azul); animation: ds-corre 1.4s var(--ds-ease) infinite; }
@keyframes ds-corre { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ds-atualizando::before { animation: none; left: 0; width: 100%; } }
.ds-atualizado { display: flex; align-items: center; gap: 8px; padding: 6px 24px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); border-top: 1px solid var(--ds-hair); }
.ds-atualizado b { color: var(--ds-ink); font-weight: 600; }
.ds-painel-corpo { padding: 8px 24px 96px; overflow: auto; flex: 1; }
.ds-painel-cab-caso { padding: 8px 0 16px; }
.ds-painel-cab-caso .etapa { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); }
.ds-painel-cab-caso h2 { margin: 6px 0 0; font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; }
.ds-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; color: var(--ds-ink-2); font-size: 15px; line-height: 22px; }
.ds-vazio .ds-ico { color: var(--ds-ink-3); width: 24px; height: 24px; }
.ds-erro-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 15px; }
.ds-erro-bloco .l { display: flex; gap: 8px; align-items: center; color: var(--ds-ink); }
.ds-erro-bloco .l .ds-ico { color: var(--ds-perigo); }

/* ---------- Ring (bússola) ---------- */
.ds-ring { display: block; margin: 0 auto; max-width: none; }
.ds-ring .grade { fill: none; stroke: var(--ds-hair); stroke-width: 1; }
.ds-ring .eixo { stroke: var(--ds-hair); stroke-width: 1; }
.ds-ring .poli { fill: rgba(21,40,72,.08); stroke: var(--ds-azul); stroke-width: 1.75; stroke-linejoin: round; }
.ds-ring .poli-est { fill: none; stroke: var(--ds-azul); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ds-ring .arco { fill: none; stroke: var(--ds-fill-2); stroke-width: 3; stroke-linecap: round; }
.ds-ring .arco.at { stroke-width: 3; }
.ds-ring .arco.at { stroke: var(--ds-azul); }
.ds-ring .no { fill: var(--ds-fundo); stroke: var(--ds-hair-2); stroke-width: 1; }
.ds-ring .no.sel { fill: var(--ds-azul-claro); stroke: var(--ds-azul); stroke-width: 1.5; }
.ds-ring .no.nada { stroke: var(--ds-borda-campo); stroke-dasharray: 2.5 2.5; }
.ds-ring .no.est { stroke: var(--ds-hipotese-forte); stroke-dasharray: 3 2; }
.ds-ring .nt { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--ds-ink); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.ds-ring .nt.nada { fill: var(--ds-ink-3); font-weight: 400; }
.ds-ring .rot { font-family: var(--font-sans); font-size: 12px; fill: var(--ds-ink-2); dominant-baseline: central; }
.ds-ring .rot.sel { fill: var(--ds-ink); font-weight: 600; }
.ds-ring .etq { font-family: var(--font-sans); font-size: 12px; fill: var(--ds-ink-3); text-anchor: middle; }
.ds-ring .etq.at { fill: var(--ds-azul); font-weight: 600; }
.ds-ring .fraco { stroke: var(--ds-perigo); stroke-width: 2; stroke-linecap: round; }
.ds-ring .ponto { fill: var(--ds-azul); }
.ds-ring-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ds-ink-2); }
.ds-ring-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ds-trabalho .ds-linha .n { font-weight: 600; font-variant-numeric: var(--ds-num); }

/* trilho das etapas */
.ds-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 0; }
.ds-etapa { padding: 10px 10px 12px; border-radius: var(--ds-r-2); background: none; border: 0; text-align: left; cursor: pointer; position: relative; }
.ds-etapa::before { content: ""; display: block; height: 3px; border-radius: 2px; background: var(--ds-fill-2); margin-bottom: 8px; }
.ds-etapa.feita::before { background: var(--ds-marinho-300); }
.ds-etapa.agora::before { background: var(--ds-azul); }
.ds-etapa .n { display: block; font-size: 12px; line-height: 16px; color: var(--ds-ink-3); font-variant-numeric: var(--ds-num); }
.ds-etapa .t { display: block; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ds-ink-2); }
.ds-etapa.agora .t { color: var(--ds-ink); font-weight: 600; }
.ds-etapa:hover { background: var(--ds-hover); }
.ds-etapa.aberta { background: var(--ds-azul-claro); }

/* ---------- Construção do acordo (o momento uau) ---------- */
.ds-constr { display: grid; gap: 16px; }
.ds-constr.larga { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
.ds-lados { display: grid; gap: 4px; }
.ds-lado-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; font-weight: 600; margin: 4px 0 2px; }
.ds-lado-cab .ds-meta { font-weight: 400; }
.ds-interesse { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 8px 8px 4px; border-radius: var(--ds-r-2); width: 100%; border: 0; background: none; text-align: left; cursor: pointer; transition: background var(--ds-d-curta), opacity var(--ds-d-curta); font-size: 15px; line-height: 21px; color: var(--ds-ink); }
.ds-interesse:hover, .ds-interesse.is-hover { background: var(--ds-hover); }
.ds-interesse .tx { flex: 1; min-width: 0; }
.ds-interesse .sub { display: block; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); }
.ds-interesse .sub.falta { color: var(--ds-perigo); }
.ds-peso { display: inline-grid; grid-template-columns: repeat(3, 4px); gap: 2px; align-items: end; height: 14px; flex: none; }
.ds-peso i { background: var(--ds-fill-2); border-radius: 1px; }
.ds-peso i:nth-child(1) { height: 6px; } .ds-peso i:nth-child(2) { height: 10px; } .ds-peso i:nth-child(3) { height: 14px; }
.ds-peso.p1 i:nth-child(1), .ds-peso.p2 i:nth-child(-n+2), .ds-peso.p3 i { background: var(--ds-ink-2); }
.ds-constr.realce .ds-interesse:not(.liga), .ds-constr.realce .ds-opcao:not(.liga) { opacity: .38; }
.ds-constr.realce .ds-interesse.liga { background: var(--ds-azul-claro); }

.ds-heroi { position: relative; background: var(--ds-marca-elevado); color: #fff; border-radius: var(--ds-r-3); padding: 20px 20px 18px; overflow: hidden; }
.ds-heroi .sobre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 17px; color: var(--ds-marca-texto-2); }
.ds-heroi .sobre .ds-pil.hip { background: transparent; color: var(--ds-ouro-claro); box-shadow: inset 0 0 0 1px rgba(201,160,64,.6); }
.ds-heroi .sobre .ds-pil.novo { background: rgba(255,255,255,.1); color: #fff; }
.ds-heroi h3 { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 27px; letter-spacing: -.005em; color: #fff; }
.ds-heroi .por { margin: 8px 0 0; font-size: 13px; line-height: 19px; color: var(--ds-marca-texto-2); }
.ds-heroi .encaixe { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ds-marca-linha); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-heroi .encaixe .l { font-size: 12px; line-height: 16px; color: var(--ds-marca-texto-2); margin-bottom: 6px; }
.ds-heroi .encaixe .ints { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-heroi .ds-int { box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.ds-heroi .ds-int.fora { background: transparent; color: var(--ds-marca-texto-2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.ds-heroi .medidor { display: flex; align-items: baseline; gap: 6px; }
.ds-heroi .medidor b { font-family: var(--font-serif); font-size: 28px; line-height: 1; font-weight: 600; color: #fff; font-variant-numeric: var(--ds-num); }
.ds-heroi .medidor span { font-size: 12px; color: var(--ds-marca-texto-2); }
.ds-heroi .acoes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ds-heroi .ds-b-skill { background: rgba(255,255,255,.12); color: #fff; }
.ds-heroi .ds-b-skill:hover { background: rgba(255,255,255,.18); }
.ds-heroi .ds-b-corr { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.ds-heroi .ds-b-corr:hover { background: rgba(255,255,255,.08); }
.ds-heroi .ds-b:focus-visible { outline-color: var(--ds-ouro); }
.ds-heroi .anel { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201,160,64,.22), 0 0 0 22px rgba(255,255,255,.025); pointer-events: none; }
.ds-opcao { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; border-bottom: 1px solid var(--ds-hair); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; transition: opacity var(--ds-d-curta), background var(--ds-d-curta); }
.ds-opcao:hover, .ds-opcao.is-hover { background: var(--ds-hover); }
.ds-opcao .tx { flex: 1; min-width: 0; font-size: 15px; line-height: 21px; }
.ds-opcao .ints { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.ds-opcao .ints .ds-int { width: 20px; height: 20px; font-size: 12px; }
.ds-opcao .ints .ds-meta { margin-left: 4px; }
.ds-concessoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-concessoes .col { padding: 12px 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); font-size: 13px; line-height: 19px; }
.ds-concessoes .col b { display: block; font-size: 12px; font-weight: 600; color: var(--ds-ink-2); margin-bottom: 4px; }
.ds-concessoes ul { margin: 0; padding-left: 16px; }

/* ---------- Poder e plano B ---------- */
.ds-cadeiras { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.ds-cadeira { padding: 14px; border-radius: var(--ds-r-2); background: var(--ds-fill); }
.ds-cadeira .q { font-size: 12px; color: var(--ds-ink-3); }
.ds-cadeira .n { margin-top: 2px; font-size: 15px; font-weight: 600; }
.ds-cadeira .b { margin-top: 10px; font-size: 13px; line-height: 19px; color: var(--ds-ink-2); display: flex; gap: 6px; }
.ds-cadeiras .vs { align-self: center; font-size: 12px; color: var(--ds-ink-3); }

/* ---------- composer pequeno ---------- */
.ds-composer { margin-top: 10px; }
.ds-composer label { display: block; font-size: 12px; line-height: 17px; color: var(--ds-ink-2); margin-bottom: 6px; }
.ds-composer label b { color: var(--ds-ink); font-weight: 600; }
.ds-campo { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--ds-r-2); border: 1px solid var(--ds-borda-campo); font: inherit; font-size: 15px; line-height: 22px; color: var(--ds-ink); background: var(--ds-fundo); resize: none; }
.ds-campo::placeholder { color: var(--ds-ink-3); }
.ds-campo:focus, .ds-campo.is-focus { outline: 2px solid var(--ds-foco); outline-offset: 1px; border-color: var(--ds-azul); }
.ds-campo.erro { border-color: var(--ds-perigo); }
.ds-composer .pe { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.ds-composer .pe .dica { margin-right: auto; font-size: 12px; color: var(--ds-ink-3); display: flex; gap: 4px; align-items: center; }
.ds-erro-inline { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--ds-perigo); }

/* ---------- aviso ---------- */
.ds-aviso { display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px; background: var(--ds-fundo); border-radius: var(--ds-r-2); box-shadow: var(--ds-sombra-pop); font-size: 15px; line-height: 22px; max-width: 520px; }
.ds-aviso.inline { box-shadow: inset 0 0 0 1px var(--ds-hair-2); }
.ds-aviso .ic { margin-top: 2px; }
.ds-aviso .ic.ok { color: var(--ds-novo); } .ds-aviso .ic.at { color: var(--ds-hipotese); } .ds-aviso .ic.er { color: var(--ds-perigo); }
.ds-aviso .tx { flex: 1; min-width: 0; padding-top: 0; }
.ds-aviso .acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ds-aviso .ds-b-txt.desfazer { color: var(--ds-azul); font-weight: 600; }
.ds-aviso .x { margin-top: -5px; }
.ds-aviso .tempo { display: block; height: 2px; margin-top: 10px; border-radius: 1px; background: var(--ds-fill-2); overflow: hidden; }
.ds-aviso .tempo i { display: block; height: 100%; width: 60%; background: var(--ds-ink-3); }
.ds-aviso.pausado .tempo i { background: var(--ds-azul); }
.ds-aviso.erro .ic { color: var(--ds-perigo); }

/* ---------- bandeja "Enviar ao Ring" (padrão Cursor) ---------- */
.ds-bandeja { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; background: var(--ds-ink); color: #fff; min-height: 60px; }
.ds-bandeja .num { min-width: 26px; height: 26px; border-radius: 13px; background: var(--ds-ouro); color: var(--ds-ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; font-variant-numeric: var(--ds-num); padding: 0 7px; }
.ds-bandeja .tx { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; }
.ds-bandeja .tx small { display: block; font-size: 12px; line-height: 17px; color: var(--ds-marca-texto-2); }
.ds-bandeja .ds-b-txt { color: var(--ds-marca-texto-2); }
.ds-bandeja .ds-b-txt:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-bandeja .ds-b-prim { background: #fff; color: var(--ds-ink); }
.ds-bandeja .ds-b-prim:hover { background: var(--ds-azul-claro); }
.ds-bandeja .ds-b:focus-visible { outline-color: var(--ds-ouro); }
.ds-bandeja.descartada, .ds-bandeja.enviando { background: var(--ds-ink); }
.ds-bandeja-pilula { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border-radius: var(--ds-r-pilula); background: var(--ds-ink); color: #fff; box-shadow: var(--ds-sombra-pop); font-size: 15px; }
.ds-bandeja-pilula .num { min-width: 24px; height: 24px; border-radius: 12px; background: var(--ds-ouro); color: var(--ds-ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; padding: 0 6px; }
.ds-bandeja-pilula .ds-b-prim { background: #fff; color: var(--ds-ink); min-height: 36px; }
.ds-folha { background: var(--ds-fundo); border-radius: var(--ds-r-4) var(--ds-r-4) 0 0; box-shadow: var(--ds-sombra-folha); padding: 8px 20px 0; position: relative; }
.ds-folha .alca { width: 36px; height: 5px; border-radius: 3px; background: var(--ds-fill-2); margin: 0 auto 8px; }
.ds-folha .cab { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; }
.ds-folha .cab h3 { margin: 0; flex: 1; font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; }
.ds-folha .grupo { font-size: 12px; line-height: 17px; color: var(--ds-ink-3); margin: 14px 0 2px; display: flex; justify-content: space-between; }
.ds-rev { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ds-hair); }
.ds-rev .tipo { flex: none; margin-top: 1px; }
.ds-rev .tx { flex: 1; min-width: 0; font-size: 15px; line-height: 21px; }
.ds-rev .tx small { display: block; font-size: 12px; line-height: 17px; color: var(--ds-ink-3); }
.ds-rev .ac { display: flex; gap: 0; flex: none; margin-top: -5px; }
.ds-rev.erro .tx small { color: var(--ds-perigo); }
.ds-rev.removido { opacity: .45; }
.ds-rev.removido .tx { text-decoration: line-through; text-decoration-color: var(--ds-ink-3); }
.ds-folha .pe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 16px; background: var(--ds-fundo); border-top: 1px solid var(--ds-hair); margin-top: 8px; }
.ds-folha .pe .tot { margin-right: auto; flex: 1 1 auto; font-size: 13px; color: var(--ds-ink-2); }

/* ---------- conversa ---------- */
.ds-chat { max-width: 720px; margin: 0 auto; padding: 24px 24px 0; }
.ds-msg-eu { display: flex; justify-content: flex-end; margin: 0 0 20px; }
.ds-msg-eu .bolha { max-width: 78%; background: var(--ds-fill); border-radius: 20px 20px 6px 20px; padding: 10px 16px; font-size: 16px; line-height: 25px; }
.ds-msg-eu .acoes-msg { display: flex; justify-content: flex-end; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity var(--ds-d-curta); }
.ds-msg-eu:hover .acoes-msg, .ds-msg-eu.is-hover .acoes-msg { opacity: 1; }
.ds-msg-eu .col { display: flex; flex-direction: column; align-items: flex-end; max-width: 78%; }
.ds-msg-eu .col .bolha { max-width: 100%; }
.ds-anexo { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--ds-r-2); background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2); min-width: 240px; margin-bottom: 6px; }
.ds-anexo .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--ds-azul-claro); color: var(--ds-azul); display: grid; place-items: center; flex: none; }
.ds-anexo .n { font-size: 13px; font-weight: 600; line-height: 18px; }
.ds-anexo .m { font-size: 12px; line-height: 16px; color: var(--ds-ink-3); }
.ds-anexo.recusa { box-shadow: inset 0 0 0 1px rgba(180,35,24,.35); }
.ds-anexo.recusa .ic { background: var(--ds-perigo-claro); color: var(--ds-perigo); }
.ds-audio { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--ds-fill); border-radius: 20px 20px 6px 20px; min-width: 260px; }
.ds-audio .play { width: 36px; height: 36px; border-radius: 50%; background: var(--ds-azul); color: #fff; display: grid; place-items: center; border: 0; flex: none; }
.ds-onda { display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; }
.ds-onda i { width: 3px; border-radius: 2px; background: var(--ds-ink-3); }
.ds-onda i.ouvido { background: var(--ds-azul); }
.ds-audio .t { font-size: 12px; color: var(--ds-ink-2); font-variant-numeric: var(--ds-num); }
.ds-transcricao { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); margin-top: 6px; text-align: right; max-width: 100%; }
.ds-resp { margin: 0 0 24px; font-size: 16px; line-height: 25px; }
.ds-resp p { margin: 0 0 12px; }
.ds-resp strong { font-weight: 600; }
.ds-pensou { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px 0 4px; margin: 0 0 6px -4px; border-radius: 8px; border: 0; background: none; font-size: 13px; color: var(--ds-ink-3); cursor: pointer; }
.ds-pensou:hover { background: var(--ds-hover); color: var(--ds-ink-2); }
.ds-pensou .ds-ico { width: 14px; height: 14px; }
.ds-pensando { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ds-ink-2); }
.ds-pensando .pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-azul); animation: ds-pulso 1.2s ease-in-out infinite; }
@keyframes ds-pulso { 50% { transform: scale(.6); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ds-pensando .pulso { animation: none; } }
.ds-raciocinio { margin: 4px 0 12px; padding: 4px 0 4px 14px; border-left: 2px solid var(--ds-fill-2); font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-mesa { margin: 16px 0; padding: 14px 16px; border-radius: var(--ds-r-2); background: var(--ds-fill); }
.ds-mesa .cab { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ds-ink); margin-bottom: 6px; }
.ds-mesa blockquote { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 17px; line-height: 25px; color: var(--ds-ink); }
.ds-ideia { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--ds-r-pilula); background: var(--ds-fill); font-size: 13px; color: var(--ds-ink-2); border: 0; cursor: pointer; }
.ds-ideia .ds-ico { width: 14px; height: 14px; color: var(--ds-ink-2); }
.ds-atencao { margin: 12px 0; padding: 12px 14px; border-radius: var(--ds-r-2); box-shadow: inset 0 0 0 1px var(--ds-hair-2); font-size: 15px; line-height: 22px; }
.ds-atencao .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ds-atencao .t .ds-ico { color: var(--ds-perigo); width: 16px; height: 16px; }
.ds-acoes-resp { display: flex; gap: 2px; margin-top: 4px; }
.ds-aprofundar { margin-top: 8px; border-top: 1px solid var(--ds-hair); }
.ds-aprofundar .ds-secao-cab { min-height: 44px; padding: 8px 0; }

/* cartão de perguntas em carrossel */
.ds-perguntas { max-width: 560px; border-radius: var(--ds-r-3); box-shadow: inset 0 0 0 1px var(--ds-hair-2); padding: 16px; background: var(--ds-fundo); }
.ds-perguntas .topo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-ink-3); min-height: 24px; }
.ds-perguntas .topo .prog { margin-left: auto; display: flex; gap: 4px; }
.ds-perguntas .topo .prog i { width: 18px; height: 3px; border-radius: 2px; background: var(--ds-fill-2); }
.ds-perguntas .topo .prog i.f { background: var(--ds-azul); }
.ds-perguntas h4 { margin: 6px 0 12px; font-size: 16px; line-height: 23px; font-weight: 600; }
.ds-opcao-p { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--ds-r-2); border: 0; background: var(--ds-fill); text-align: left; font-size: 15px; line-height: 21px; cursor: pointer; color: var(--ds-ink); }
.ds-opcao-p:hover, .ds-opcao-p.is-hover { background: var(--ds-fill-2); }
.ds-opcao-p .radio { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); flex: none; display: grid; place-items: center; background: #fff; }
.ds-opcao-p.marcada { background: var(--ds-azul-claro); box-shadow: inset 0 0 0 1px var(--ds-azul-linha); }
.ds-opcao-p.marcada .radio { box-shadow: none; background: var(--ds-azul); color: #fff; }
.ds-perguntas .pe { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }

/* campo do chat + microfone com o gesto do WhatsApp */
.ds-campo-chat { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 8px; border-radius: var(--ds-r-4); background: var(--ds-fundo); box-shadow: inset 0 0 0 1px var(--ds-hair-2), 0 2px 12px rgba(10,22,40,.05); min-height: 56px; }
.ds-campo-chat.foco { box-shadow: inset 0 0 0 1.5px var(--ds-azul), 0 2px 12px rgba(10,22,40,.06); }
.ds-campo-chat .entrada { flex: 1; min-height: 40px; padding: 9px 6px; font-size: 16px; line-height: 22px; color: var(--ds-ink); }
.ds-campo-chat .entrada.ph { color: var(--ds-ink-3); }
.ds-campo-chat .ds-b-ico { width: 40px; min-height: 40px; border-radius: 20px; }
.ds-enviar { width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--ds-azul); color: #fff; display: grid; place-items: center; flex: none; cursor: pointer; }
.ds-enviar[disabled] { background: var(--ds-fill-2); color: var(--ds-ink-3); }
.ds-enviar.parar { background: var(--ds-ink); }
.ds-mic { width: 40px; height: 40px; border-radius: 20px; border: 0; background: transparent; color: var(--ds-ink-2); display: grid; place-items: center; flex: none; cursor: pointer; position: relative; transition: transform var(--ds-d-curta) var(--ds-ease), background var(--ds-d-curta); }
.ds-mic:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-mic.segurando { background: var(--ds-azul); color: #fff; transform: scale(1.35); box-shadow: 0 0 0 8px rgba(21,40,72,.10); }
.ds-gravando { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 40px; padding: 0 6px; font-size: 15px; }
.ds-gravando .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-perigo); animation: ds-pulso 1.2s ease-in-out infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .ds-gravando .rec { animation: none; } }
.ds-gravando .t { font-variant-numeric: var(--ds-num); font-weight: 600; white-space: nowrap; }
.ds-gravando .cancelar { display: flex; align-items: center; gap: 4px; color: var(--ds-ink-2); font-size: 13px; margin-left: auto; margin-right: 8px; }
.ds-gravando .cancelar.armado { color: var(--ds-perigo); font-weight: 600; }
.ds-trava { position: absolute; right: 8px; bottom: 64px; width: 40px; padding: 10px 0 8px; border-radius: 20px; background: var(--ds-fundo); box-shadow: var(--ds-sombra-pop); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ds-ink-2); }
.ds-trava .ds-ico { width: 16px; height: 16px; }
.ds-trava.armada { color: var(--ds-azul); }
.ds-menu { background: var(--ds-fundo); border-radius: var(--ds-r-2); box-shadow: var(--ds-sombra-pop); padding: 6px; min-width: 240px; }
.ds-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; background: none; border-radius: 8px; font-size: 15px; color: var(--ds-ink); text-align: left; cursor: pointer; }
.ds-menu button:hover, .ds-menu button.is-hover { background: var(--ds-hover); }
.ds-menu button .ds-ico { color: var(--ds-ink-2); }
.ds-menu button .k { margin-left: auto; }
.ds-menu hr { border: 0; border-top: 1px solid var(--ds-hair); margin: 6px 4px; }
.ds-menu .dest { color: var(--ds-perigo); }
.ds-menu .dest .ds-ico { color: var(--ds-perigo); }

/* ---------- casca ---------- */
.ds-app { display: grid; grid-template-columns: 264px minmax(0,1fr); height: 100%; min-height: 0; background: var(--ds-fundo); }
.ds-app.com-painel { grid-template-columns: 264px minmax(0,1fr) var(--painel-w, 480px); }
.ds-app.com-painel.recolhida { grid-template-columns: 64px minmax(0,1fr) var(--painel-w, 480px); }
.ds-barra { background: var(--ds-fill); display: flex; flex-direction: column; padding: 14px 12px 12px; min-height: 0; }
.ds-barra .topo { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px 6px; }
.ds-barra .nav { display: grid; gap: 2px; }
.ds-barra .item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 15px; line-height: 20px; color: var(--ds-ink-2); text-decoration: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-barra .item:hover { background: var(--ds-hover); color: var(--ds-ink); }
.ds-barra .item[aria-current="page"] { background: var(--ds-fundo); color: var(--ds-ink); box-shadow: 0 1px 2px rgba(10,22,40,.06); }
.ds-barra .item .ds-ico { color: var(--ds-ink-3); }
.ds-barra .grupo { margin: 18px 0 4px; padding: 0 10px; font-size: 12px; line-height: 16px; color: var(--ds-ink-3); }
.ds-barra .lista { display: grid; gap: 1px; overflow: auto; }
.ds-barra .lista .item { font-size: 13px; min-height: 34px; display: block; line-height: 34px; }
.ds-barra .lista .item .q { margin-left: auto; color: var(--ds-ink-3); font-size: 12px; }
.ds-barra .pe { margin-top: auto; padding-top: 10px; display: grid; gap: 2px; }
.ds-conta { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.ds-conta:hover { background: var(--ds-hover); }
.ds-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ds-marinho-200); color: var(--ds-azul); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.ds-conta .n { font-size: 13px; line-height: 18px; font-weight: 500; }
.ds-conta .e { font-size: 12px; line-height: 16px; color: var(--ds-ink-3); }
.ds-colchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.ds-cab-neg { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 20px; }
.ds-cab-neg .tit { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; margin-left: -8px; border-radius: 8px; font-size: 15px; font-weight: 600; border: 0; background: none; cursor: pointer; }
.ds-cab-neg .tit:hover { background: var(--ds-hover); }
.ds-cab-neg .tit .ds-ico { width: 15px; height: 15px; color: var(--ds-ink-3); }
.ds-cab-neg .dir { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.ds-btn-painel { position: relative; }
.ds-btn-painel .ponto { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-novo); box-shadow: 0 0 0 2px var(--ds-fundo); }
.ds-rolagem { flex: 1; overflow: auto; min-height: 0; }
.ds-pe-chat { padding: 8px 24px 16px; max-width: 768px; width: 100%; margin: 0 auto; }
.ds-pe-chat .nota-pe { text-align: center; font-size: 12px; color: var(--ds-ink-3); margin-top: 8px; }
.ds-painel-col { border-left: 1px solid var(--ds-hair); display: flex; flex-direction: column; min-height: 0; position: relative; }

/* tela inicial */
.ds-inicio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 20px; }
.ds-inicio h1 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -.01em; text-align: center; }
.ds-inicio > .sub { margin: -8px 0 0; font-size: 15px; color: var(--ds-ink-2); text-align: center; max-width: 520px; }
.ds-inicio .campo-wrap { width: 100%; max-width: 720px; }
.ds-inicio .atalhos-ini { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ds-recentes { width: 100%; max-width: 720px; margin-top: 8px; }
.ds-recentes .r { font-size: 12px; color: var(--ds-ink-3); margin: 0 0 4px 4px; }

/* aba Ferramentas */
.ds-ferr { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 4px; border-bottom: 1px solid var(--ds-hair); }
.ds-ferr .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ds-fill); color: var(--ds-azul); display: grid; place-items: center; flex: none; }
.ds-ferr .tx { flex: 1; min-width: 0; }
.ds-ferr .t { font-size: 15px; font-weight: 600; line-height: 21px; display: flex; gap: 8px; align-items: center; }
.ds-ferr .d { font-size: 13px; line-height: 19px; color: var(--ds-ink-2); }
.ds-ferr .d .ds-meta { margin-left: 2px; }

/* Plano de Voo como folha de papel (toque clássico) */
.ds-mesa-papel { background: var(--ds-fill); padding: 24px; }
.ds-papel { background: var(--ds-papel); box-shadow: var(--ds-sombra-papel); border-radius: 4px; padding: 40px 48px 28px; max-width: 760px; margin: 0 auto; position: relative; }
.ds-papel .cab-doc { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ds-hair-2); }
.ds-papel .rot-doc { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-2); }
.ds-papel h1 { margin: 6px 0 0; font-family: var(--font-serif); font-size: 26px; line-height: 32px; font-weight: 600; }
.ds-papel .sub-doc { font-size: 13px; color: var(--ds-ink-2); margin-top: 2px; }
.ds-papel h2 { margin: 24px 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-2); padding-bottom: 6px; border-bottom: 1px solid var(--ds-hair); }
.ds-papel p, .ds-papel li { font-size: 15px; line-height: 23px; }
.ds-papel ol { padding-left: 20px; margin: 0; }
.ds-papel .tab { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; }
.ds-papel .tab th { text-align: left; font-weight: 600; color: var(--ds-ink-2); font-size: 12px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--ds-hair-2); }
.ds-papel .tab td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--ds-hair); vertical-align: top; }
.ds-papel .tab .n { text-align: right; font-variant-numeric: var(--ds-num); white-space: nowrap; }
.ds-papel .assina { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--ds-hair-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; line-height: 17px; color: var(--ds-ink-2); }
.ds-selo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--ds-ink-2); }
.ds-selo .s { width: 24px; height: 24px; display: block; color: var(--ds-ink-2); flex: none; }
.ds-selo .s svg { width: 100%; height: 100%; display: block; }
.ds-sobre-marca .ds-selo, .ds-selo.inverso { color: var(--ds-marca-texto-2); }
.ds-sobre-marca .ds-selo .s, .ds-selo.inverso .s { color: var(--ds-marca-texto-2); }
.ds-veu-priv { position: relative; }
.ds-veu-priv .borrado { filter: blur(5px); user-select: none; }
.ds-veu-priv .msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--ds-ink-2); }
.ds-revisei { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.ds-check { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ds-borda-campo); display: grid; place-items: center; flex: none; background: #fff; }
.ds-check.on { background: var(--ds-azul); box-shadow: none; color: #fff; }

/* documentos */
.ds-doc { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--ds-hair); }
.ds-doc .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--ds-fill); display: grid; place-items: center; color: var(--ds-ink-2); flex: none; font-size: 12px; font-weight: 700; }
.ds-doc .tx { flex: 1; min-width: 0; }
.ds-doc .n { font-size: 15px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-doc .m { font-size: 12px; line-height: 17px; color: var(--ds-ink-3); display: flex; gap: 6px; align-items: center; }
.ds-doc .m.er { color: var(--ds-perigo); }
.ds-interruptor { width: 40px; height: 24px; border-radius: 12px; background: var(--ds-borda-campo); position: relative; flex: none; border: 0; cursor: pointer; }
.ds-interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--ds-d-curta) var(--ds-ease); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ds-interruptor[aria-checked="true"] { background: var(--ds-azul); }
.ds-interruptor[aria-checked="true"]::after { left: 19px; }
.ds-soltar { border-radius: var(--ds-r-3); outline: 1.5px dashed var(--ds-borda-campo); outline-offset: -1.5px; padding: 20px; text-align: center; font-size: 15px; color: var(--ds-ink-2); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ds-soltar.sobre { outline-color: var(--ds-azul); background: var(--ds-azul-claro); color: var(--ds-azul); }

/* login */
.ds-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; }
.ds-login .lado-marca { background: var(--ds-marca-profundo); color: #fff; padding: 48px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.ds-login .lado-marca .frase { margin-top: auto; font-family: var(--font-serif); font-weight: 600; font-size: 34px; line-height: 42px; letter-spacing: -.01em; max-width: 460px; }
.ds-login .lado-marca .apoio { margin-top: 14px; font-size: 15px; line-height: 23px; color: var(--ds-marca-texto-2); max-width: 440px; }
.ds-login .lado-marca .selo-pe { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ds-marca-linha); }
.ds-login .lado-form { display: flex; align-items: center; justify-content: center; padding: 48px; }
.ds-login form { width: 100%; max-width: 360px; }
.ds-login h1 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 34px; }
.ds-login .camp { margin-top: 16px; }
.ds-login .camp label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.ds-login .ds-b-prim { width: 100%; margin-top: 20px; }
.ds-raios { position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; pointer-events: none; }
.ds-raios circle { fill: none; stroke: rgba(201,160,64,.16); stroke-width: 1; }

/* celular */
.ds-cel { width: 390px; height: 844px; background: var(--ds-fundo); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.ds-cel .status { height: 44px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; font-size: 15px; font-weight: 600; }
.ds-cel-cab { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px; flex: none; }
.ds-cel-cab .tit { flex: 1; font-size: 17px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-voltar { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--ds-azul-texto); font-size: 17px; cursor: pointer; }
.ds-cel .corpo { flex: 1; overflow: hidden; padding: 0 16px; }
.ds-painel-cel { position: absolute; left: 0; right: 0; bottom: 0; top: 52px; background: var(--ds-fundo); border-radius: var(--ds-r-4) var(--ds-r-4) 0 0; box-shadow: var(--ds-sombra-folha); display: flex; flex-direction: column; }
.ds-painel-cel .alca { width: 36px; height: 5px; border-radius: 3px; background: var(--ds-fill-2); margin: 8px auto 4px; flex: none; }
.ds-linha-tempo { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ds-ink-3); }
.ds-fixados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-fixado { background: var(--ds-fill); border-radius: var(--ds-r-3); padding: 12px; min-height: 128px; display: flex; flex-direction: column; gap: 6px; border: 0; text-align: left; cursor: pointer; }
.ds-fixado.largo { grid-column: span 2; min-height: 0; }
.ds-fixado .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ds-fixado .t .ds-ico { color: var(--ds-ink-2); width: 16px; height: 16px; }
.ds-fixado .t .chev { margin-left: auto; color: var(--ds-ink-3); }
.ds-fixado .big { font-size: 22px; line-height: 26px; font-weight: 600; font-variant-numeric: var(--ds-num); }
.ds-fixado .big.serif { font-family: var(--font-serif); }
.ds-fixado .s { font-size: 12px; line-height: 17px; color: var(--ds-ink-2); }
.ds-fixado.editando { outline: 1.5px dashed var(--ds-borda-campo); outline-offset: -1.5px; background: var(--ds-fundo); }
.ds-rotulo-sec { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 8px; font-size: 13px; font-weight: 600; color: var(--ds-ink); }
.ds-rotulo-sec .ds-meta { font-weight: 400; }

/* telas de galeria */
.ds-tela { display: flex; flex-direction: column; height: 100%; background: var(--ds-fundo); }
.ds-tela > .ds-app, .ds-tela > .ds-login { flex: 1; min-height: 0; }
.ds-par-cel { display: flex; gap: 32px; padding: 24px; background: var(--ds-fill); align-items: flex-start; }
.ds-par-cel .cap { font-size: 13px; color: var(--ds-ink-2); margin: 0 0 8px; }
.ds-par-cel .moldura { border-radius: 36px; overflow: hidden; box-shadow: 0 0 0 8px var(--ds-ink), 0 20px 40px rgba(10,22,40,.18); }

@media (pointer: coarse) {
  .ds-b { min-height: 44px; }
  .ds-b-ico { width: 44px; }
}
.ds-constr.larga > .ds-constr-pe { grid-column: 1 / -1; }
.ds-constr.larga .ds-concessoes { grid-template-columns: 1fr 1fr; }

.ds-toque .ds-folha .pe .tot { flex-basis: 100%; }

/* ---------- Ring: estados aprovados em 09/10 (revisão do painel) ---------- */
/* evidência = nó azul cheio · hipótese = tracejado dourado (.est) · sem nota = tracejado cinza (.nada) · fora da etapa = cinza cheio */
.ds-ring .no.ev { fill: var(--ds-azul); stroke: none; }
.ds-ring .nt.ev { fill: #fff; }
.ds-ring .no.fora { fill: var(--ds-fill-2); stroke: transparent; }
.ds-ring .nt.fora { fill: var(--ds-ink-2); font-weight: 500; }
.ds-ring .rot.fora { fill: var(--ds-ink-3); }
.ds-ring .rot.dentro { fill: var(--ds-ink); font-weight: 500; }
.ds-ring .arco.feita { stroke: var(--ds-marinho-300); }
.ds-ring .no.est.hover, .ds-ring .no.est.sel { fill: var(--ds-hipotese-claro); stroke: var(--ds-hipotese-forte); stroke-width: 2.5; stroke-dasharray: 4 2; }