/* ============================================================
   AutoInsightCX — DESIGN SYSTEM COMPARTILHADO  (sites/comum/ds.css)
   ------------------------------------------------------------
   Fonte ÚNICA de identidade visual da casa. HTML/CSS/JS puro,
   ZERO CDN. Carregue UMA linha em qualquer módulo:
       <link rel="stylesheet" href="/comum/ds.css">
       <script src="/comum/ds.js" defer></script>

   Elevação (R99): a alma turquesa da casa (identidade OdontoMais /
   tema Stitch da Faísca) vira o ACENTO oficial + CORAL como cor de
   destaque/CTA. Os NOMES de token são os MESMOS do design/tokens.css
   histórico (--acento, --fundo-*, --texto-*, --mod-*) — então incluir
   este arquivo RE-SKINA o sistema inteiro sem tocar no HTML de cada
   módulo. Componentes novos vivem no namespace .ds-* (nunca colidem
   com .mx-* do launcher nem com .c-* do shell/nav-suite).

   Temas: dark é o primário (sem atributo = dark). [data-theme="light"]
   inverte por token. Densidade: [data-density="compacto"].
   Acento por módulo: [data-modulo="..."] troca --acento.
   ============================================================ */

/* ---------- Tipografia display: fonte de sistema BEM tratada ----------
   Sem webfont de CDN (falha calada). Se um dia houver design/inter.woff2
   local, o @font-face abaixo assume; sem o arquivo, cai no stack de
   sistema sem quebrar 1px. O display usa peso alto + tracking negativo
   pra ganhar caráter editorial. */
@font-face {
  font-family: 'InterCX';
  src: url('/comum/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Primitivas geradoras — CARBONO premium (alma C6 Bank) =====
     Neutro cool com um SUSSURRO de turquesa: não é cinza chapado, mas
     também não "puxa pro teal". Carbono profundo e caro. */
  --base-h: 215;   /* matiz dos neutros: cool com viés turquesa suave */
  --base-c: 0.008; /* croma baixíssimo: carbono, não teal-gray */

  /* ===== ACENTO OFICIAL DA CASA: turquesa — GERADO por token (R99) =====
     Exigência do Andrigo: "sempre que estiver em um determinado módulo a
     cor deverá ser particular daquele módulo, como uma identidade".
     O acento é COMPUTADO de 3 primitivas:
       --acento-h  = matiz do módulo (a identidade; 1 linha por módulo abaixo)
       --acento-l/c = luminosidade/croma — quem manda é o TEMA, não o módulo
       --acento-cx = escala fina de croma (0.6–0.9 p/ tons terrosos/aço)
     Assim TODO módulo pesa igual no carbono (mesma L, mesma C) e a troca
     dark↔light recalibra os 30 módulos de uma vez. */
  --acento-h: 195;                       /* maestro = turquesa (a casa) */
  --acento-cx: 1;
  --acento-l: 0.74;  --acento-c: 0.115;  /* dark: pastel firme sobre carbono */
  --acento:        oklch(var(--acento-l) calc(var(--acento-c) * var(--acento-cx)) var(--acento-h));
  --acento-2:      oklch(calc(var(--acento-l) + 0.06) calc((var(--acento-c) - 0.01) * var(--acento-cx)) calc(var(--acento-h) - 5)); /* variação clara p/ gradiente */
  --acento-forte:  color-mix(in oklab, var(--acento) 82%, black);
  --acento-suave:  color-mix(in oklab, var(--acento) 14%, transparent);
  --acento-linha:  color-mix(in oklab, var(--acento) 40%, transparent);
  --acento-texto:  oklch(0.16 0.03 var(--acento-h));                       /* texto SOBRE o acento: escuro (AA no dark) */

  /* ===== DESTAQUE / CTA: coral (o "olha aqui" da casa) ===== */
  --destaque:       oklch(0.70 0.165 32);
  --destaque-forte: color-mix(in oklab, var(--destaque) 84%, black);
  --destaque-suave: color-mix(in oklab, var(--destaque) 16%, transparent);
  --destaque-texto: oklch(0.99 0.01 32);

  /* ===== Semânticas (separadas do acento — nunca confundir estado com marca) ===== */
  --ok:     oklch(0.72 0.15 155);
  --alerta: oklch(0.80 0.14 85);
  --erro:   oklch(0.63 0.20 25);
  --info:   oklch(0.70 0.13 230);
  --ok-suave:     color-mix(in oklab, var(--ok) 16%, transparent);
  --alerta-suave: color-mix(in oklab, var(--alerta) 18%, transparent);
  --erro-suave:   color-mix(in oklab, var(--erro) 16%, transparent);
  --info-suave:   color-mix(in oklab, var(--info) 16%, transparent);

  /* ===== Tipografia ===== */
  --fonte:         'InterCX', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-display: 'InterCX', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono:    ui-monospace, 'Cascadia Code', 'SF Mono', 'Roboto Mono', monospace;
  --fonte-xs: 11px;    --linha-xs: 16px;
  --fonte-sm: 12.5px;  --linha-sm: 18px;
  --fonte-base: 14px;  --linha-base: 20px;
  --fonte-md: 16px;    --linha-md: 24px;
  --fonte-lg: 20px;    --linha-lg: 27px;
  --fonte-xl: 28px;    --linha-xl: 33px;
  --fonte-2xl: 38px;   --linha-2xl: 42px;
  --peso-display: 800;
  --track-display: -0.02em;

  /* ===== Espaçamento (4/8) — respiro generoso estilo C6 ===== */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  --esp-9: 96px;

  /* ===== Raios — cantos suaves e caros ===== */
  --raio-sm: 8px; --raio-md: 12px; --raio-lg: 18px; --raio-xl: 26px; --raio-2xl: 34px; --raio-full: 999px;

  /* ===== Sombras (suaves, difusas) ===== */
  --sombra-1: 0 1px 2px oklch(0 0 0 / 0.12);
  --sombra-2: 0 6px 18px oklch(0 0 0 / 0.16);
  --sombra-3: 0 16px 40px oklch(0 0 0 / 0.26);
  --brilho-acento: 0 0 0 1px var(--acento-linha), 0 8px 26px color-mix(in oklab, var(--acento) 24%, transparent);

  /* ===== EFEITO 3D — profundidade tátil (R99, exigência do Andrigo) =====
     Todo clicável é um OBJETO FÍSICO levemente elevado sobre o carbono:
       • luz de topo (highlight por dentro, "a luz bate em cima")
       • lábio escuro embaixo (a borda que faz volume)
       • sombra em camadas (contato + ambiente) = elevação real
     No HOVER sobe mais; no :active AFUNDA (highlight some, vira côncavo).
     Neutro de propósito — a COR continua sendo a identidade do módulo.
     Os tokens trocam sozinhos no dark/light (light redefine abaixo). */
  --luz-topo:  inset 0 1px 0 0 oklch(1 0 0 / 0.06);
  --labio:     inset 0 -1px 0 0 oklch(0 0 0 / 0.30);
  --elev-1: 0 1px 1px oklch(0 0 0 / 0.22), 0 2px 4px oklch(0 0 0 / 0.16), 0 5px 10px oklch(0 0 0 / 0.10);
  --elev-2: 0 2px 3px oklch(0 0 0 / 0.24), 0 10px 20px oklch(0 0 0 / 0.22), 0 18px 38px oklch(0 0 0 / 0.16);
  --elev-3d-1:     var(--luz-topo), var(--labio), var(--elev-1);
  --elev-3d-2:     var(--luz-topo), var(--labio), var(--elev-2);
  --elev-3d-press: inset 0 2px 4px oklch(0 0 0 / 0.34), inset 0 1px 0 0 oklch(0 0 0 / 0.12), 0 1px 2px oklch(0 0 0 / 0.24);
  --sobe-3d: -2px;   /* deslocamento p/ cima no hover (objeto sobe) */
  --afunda-3d: 1px;  /* deslocamento p/ baixo no press (botão apertado) */

  /* ===== Movimento (curto — nunca "pesado") ===== */
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);

  /* ===== Densidade (conforto = default; alvos mobile >= 44px) ===== */
  --altura-controle: 40px;
  --altura-input: 44px;
  --altura-linha: 44px;
  --alvo-min: 44px;
  --pad-celula: var(--esp-3);

  /* ===== Shell — mais ar, menos muralha ===== */
  --topbar-alt: 62px;
  --bottomnav-alt: 62px;
  --leitura-larg: 1180px;
  --pad-conteudo: var(--esp-7);
  --ritmo-secao: var(--esp-8);   /* respiro vertical entre blocos (C6: deixa respirar) */
}

/* ===== TEMA DARK — CARBONO PREMIUM (alma C6, alto contraste) =====
   Preto-grafite profundo (não cinza chapado), degraus de elevação
   sutis mas legíveis, texto alto-contraste, bordas discretas. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --fundo-0: oklch(0.155 0.007 var(--base-h));   /* base carbono quase-preto */
  --fundo-1: oklch(0.190 0.008 var(--base-h));   /* superfície de card */
  --fundo-2: oklch(0.230 0.009 var(--base-h));   /* card elevado / hover */
  --fundo-3: oklch(0.280 0.010 var(--base-h));   /* elevação máx / chips */
  --texto-1: oklch(0.975 0.004 var(--base-h));   /* alto contraste */
  --texto-2: oklch(0.780 0.008 var(--base-h));
  --texto-3: oklch(0.610 0.012 var(--base-h));
  --borda-1: oklch(0.32 var(--base-c) var(--base-h) / 0.50);
  --borda-2: oklch(0.42 var(--base-c) var(--base-h) / 0.80);
  --vidro:   oklch(0.170 0.008 var(--base-h) / 0.72);
  --scrim:   oklch(0.08 0.01 var(--base-h) / 0.66);
  --realce:  oklch(1 0 0 / 0.045);               /* luz de cima nos cards */
}

/* ===== TEMA LIGHT — CLARO TRADICIONAL, CUIDADO (não é dark invertido) =====
   Off-white cool premium, superfície de card branca pura, texto grafite
   de alto contraste, sombras suaves em vez de bordas gritantes. AA. */
:root[data-theme="light"] {
  color-scheme: light;
  --fundo-0: oklch(0.972 0.004 var(--base-h));   /* fundo cool off-white */
  --fundo-1: oklch(1 0 0);                        /* card branco puro */
  --fundo-2: oklch(0.968 0.005 var(--base-h));   /* hover / faixa */
  --fundo-3: oklch(0.940 0.008 var(--base-h));   /* chips */
  --texto-1: oklch(0.215 0.012 var(--base-h));   /* grafite alto-contraste */
  --texto-2: oklch(0.445 0.014 var(--base-h));
  --texto-3: oklch(0.585 0.014 var(--base-h));
  --borda-1: oklch(0.905 0.006 var(--base-h));
  --borda-2: oklch(0.825 0.010 var(--base-h));
  --vidro:   oklch(1 0 0 / 0.80);
  --scrim:   oklch(0.28 0.02 var(--base-h) / 0.28);
  --realce:  oklch(1 0 0 / 0.7);
  /* no claro o acento FECHA (mais fundo, mais croma) pra ter contraste no
     branco — vale pra TODOS os módulos de uma vez, o matiz não muda */
  --acento-l: 0.60;  --acento-c: 0.13;
  --acento-texto: oklch(0.99 0.01 var(--acento-h));   /* texto claro sobre acento fechado */
  --sombra-1: 0 1px 2px oklch(0.5 0.02 var(--base-h) / 0.10);
  --sombra-2: 0 6px 20px oklch(0.5 0.02 var(--base-h) / 0.12);
  --sombra-3: 0 18px 44px oklch(0.4 0.03 var(--base-h) / 0.16);
  /* 3D no claro: luz de topo BRANCA marcada (superfície iluminada) + lábio
     suave frio; sombras coloridas de baixo croma pra não sujar o off-white */
  --luz-topo:  inset 0 1px 0 0 oklch(1 0 0 / 0.85);
  --labio:     inset 0 -1px 0 0 oklch(0.5 0.02 var(--base-h) / 0.10);
  --elev-1: 0 1px 1px oklch(0.5 0.02 var(--base-h) / 0.08), 0 2px 4px oklch(0.5 0.02 var(--base-h) / 0.09), 0 6px 14px oklch(0.5 0.02 var(--base-h) / 0.10);
  --elev-2: 0 2px 4px oklch(0.5 0.02 var(--base-h) / 0.10), 0 10px 22px oklch(0.45 0.03 var(--base-h) / 0.14), 0 20px 42px oklch(0.4 0.03 var(--base-h) / 0.14);
  --elev-3d-press: inset 0 2px 4px oklch(0.4 0.03 var(--base-h) / 0.18), inset 0 1px 0 0 oklch(0.4 0.03 var(--base-h) / 0.06), 0 1px 1px oklch(0.5 0.02 var(--base-h) / 0.06);
}

/* ============================================================
   IDENTIDADE POR MÓDULO (R99 — exigência do Andrigo)
   ------------------------------------------------------------
   "o financeiro tem determinada cor, o batemartelo outra."
   Cada módulo põe  <html data-modulo="fluicaixa">  e TODO o
   acento da tela (links, botões, focos, sparklines, chips,
   command palette) vira a cor DELE — dark E light, porque só o
   MATIZ muda; L/C são do tema (peso visual idêntico no carbono).
   --acento-cx < 1 = croma reduzido de propósito (terroso/aço).
   Módulo novo = 1 linha aqui. Aliases cobrem os dois nomes
   usuais (pasta do site e id do launcher).
   ============================================================ */
:root[data-modulo="maestro"]                                        { --acento-h: 195; }                     /* turquesa — a casa */
:root[data-modulo="huddle"]                                         { --acento-h: 183; }                     /* turquesa-claro — reunião do dia */
:root[data-modulo="pulso"], :root[data-modulo="pulsoatende"]        { --acento-h: 170; }                     /* verde-água — CX/WhatsApp */
:root[data-modulo="flui"], :root[data-modulo="fluicaixa"]           { --acento-h: 155; }                     /* esmeralda — financeiro */
:root[data-modulo="talentos"]                                       { --acento-h: 140; }                     /* verde-folha — RH */
:root[data-modulo="girada"]                                         { --acento-h: 125; }                     /* lima — estoque/patrimônio */
:root[data-modulo="equipe"]                                         { --acento-h: 112; --acento-cx: 0.85; }  /* verde-oliva — equipe 360 */
:root[data-modulo="estoque"]                                        { --acento-h: 96; }                      /* mostarda — estoque vivo */
:root[data-modulo="chancelo"]                                       { --acento-h: 85; }                      /* âmbar-ouro — jurídico */
:root[data-modulo="bancada"]                                        { --acento-h: 72; }                      /* âmbar-gesso — laboratório de próteses */
:root[data-modulo="bens"]                                           { --acento-h: 62; --acento-cx: 0.85; }   /* bronze — patrimônio */
:root[data-modulo="batemartelo"]                                    { --acento-h: 40; }                      /* coral/laranja — vendas */
:root[data-modulo="despesa"], :root[data-modulo="despesas"]         { --acento-h: 28; --acento-cx: 0.9; }    /* vermelho-terroso — despesas */
:root[data-modulo="encanta"], :root[data-modulo="useencanta"]       { --acento-h: 356; --acento-cx: 0.85; }  /* rosa-suave — NPS/reputação */
:root[data-modulo="farol"]                                          { --acento-h: 335; }                     /* magenta — marketing/ads */
:root[data-modulo="perfil"]                                         { --acento-h: 320; }                     /* ameixa — perfil de consumo */
:root[data-modulo="guardiao"], :root[data-modulo="guardiaokids"]    { --acento-h: 308; }                     /* roxo-guarda — proteção */
:root[data-modulo="cadeira"], :root[data-modulo="agenda"]           { --acento-h: 295; }                     /* violeta — clínico */
:root[data-modulo="limpanome"]                                      { --acento-h: 285; --acento-cx: 0.8; }   /* lilás-discreto — privacidade */
:root[data-modulo="contatos"]                                       { --acento-h: 276; }                     /* índigo — base de contatos */
:root[data-modulo="conciliacao"]                                    { --acento-h: 268; --acento-cx: 0.8; }   /* índigo-suave — conciliação */
:root[data-modulo="norte"]                                          { --acento-h: 258; }                     /* azul-profundo — metas/consultoria */
:root[data-modulo="batem"]                                          { --acento-h: 248; }                     /* azul-cobalto — ponto */
:root[data-modulo="cofre"]                                          { --acento-h: 240; --acento-cx: 0.5; }   /* aço — segredos */
:root[data-modulo="agora"]                                          { --acento-h: 237; }                     /* azul-céu — agenda viva */
:root[data-modulo="seguranca"]                                      { --acento-h: 225; --acento-cx: 0.6; }   /* aço-azul — postura */
:root[data-modulo="rende"]                                          { --acento-h: 215; }                     /* ciano — margem */
:root[data-modulo="meupaciente"], :root[data-modulo="meuodontomais"]{ --acento-h: 205; --acento-cx: 0.85; }  /* azul-petróleo — portal do paciente */
:root[data-modulo="mapa"]                                           { --acento-h: 200; --acento-cx: 0.6; }   /* turquesa-cinza — índice */

/* BLINDAGEM contra tokens.css legado: vários módulos têm um tokens.css
   antigo que seta --acento DIRETO em [data-modulo=...] (e às vezes no combo
   com [data-theme]) — isso atropelaria o gerador. Especificidade proposital
   (0,4,0)/(0,5,0) pra o DS vencer SEMPRE que houver data-modulo. */
:root[data-modulo][data-modulo][data-modulo][data-modulo] {
  --acento:        oklch(var(--acento-l) calc(var(--acento-c) * var(--acento-cx)) var(--acento-h));
  --acento-2:      oklch(calc(var(--acento-l) + 0.06) calc((var(--acento-c) - 0.01) * var(--acento-cx)) calc(var(--acento-h) - 5));
  --acento-forte:  color-mix(in oklab, var(--acento) 82%, black);
  --acento-suave:  color-mix(in oklab, var(--acento) 14%, transparent);
  --acento-linha:  color-mix(in oklab, var(--acento) 40%, transparent);
  --acento-texto:  oklch(0.16 0.03 var(--acento-h));
}
:root[data-modulo][data-modulo][data-modulo][data-modulo][data-theme="light"] {
  --acento-texto:  oklch(0.99 0.01 var(--acento-h));
}

/* Cores fixas dos módulos (chips/ícones/tags — cada módulo tem a sua em
   QUALQUER tela; seguem o L/C do tema, então funcionam no dark e no light) */
:root {
  --mod-maestro:     oklch(var(--acento-l) var(--acento-c) 195);
  --mod-huddle:      oklch(var(--acento-l) var(--acento-c) 183);
  --mod-pulso:       oklch(var(--acento-l) var(--acento-c) 170);
  --mod-flui:        oklch(var(--acento-l) var(--acento-c) 155);
  --mod-fluicaixa:   var(--mod-flui);
  --mod-talentos:    oklch(var(--acento-l) var(--acento-c) 140);
  --mod-girada:      oklch(var(--acento-l) var(--acento-c) 125);
  --mod-equipe:      oklch(var(--acento-l) calc(var(--acento-c) * 0.85) 112);
  --mod-estoque:     oklch(var(--acento-l) var(--acento-c) 96);
  --mod-chancelo:    oklch(var(--acento-l) var(--acento-c) 85);
  --mod-bancada:     oklch(var(--acento-l) var(--acento-c) 72);
  --mod-bens:        oklch(var(--acento-l) calc(var(--acento-c) * 0.85) 62);
  --mod-batemartelo: oklch(var(--acento-l) var(--acento-c) 40);
  --mod-despesa:     oklch(var(--acento-l) calc(var(--acento-c) * 0.9) 28);
  --mod-encanta:     oklch(var(--acento-l) calc(var(--acento-c) * 0.85) 356);
  --mod-farol:       oklch(var(--acento-l) var(--acento-c) 335);
  --mod-perfil:      oklch(var(--acento-l) var(--acento-c) 320);
  --mod-guardiao:    oklch(var(--acento-l) var(--acento-c) 308);
  --mod-cadeira:     oklch(var(--acento-l) var(--acento-c) 295);
  --mod-limpanome:   oklch(var(--acento-l) calc(var(--acento-c) * 0.8) 285);
  --mod-contatos:    oklch(var(--acento-l) var(--acento-c) 276);
  --mod-conciliacao: oklch(var(--acento-l) calc(var(--acento-c) * 0.8) 268);
  --mod-norte:       oklch(var(--acento-l) var(--acento-c) 258);
  --mod-batem:       oklch(var(--acento-l) var(--acento-c) 248);
  --mod-cofre:       oklch(var(--acento-l) calc(var(--acento-c) * 0.5) 240);
  --mod-agora:       oklch(var(--acento-l) var(--acento-c) 237);
  --mod-seguranca:   oklch(var(--acento-l) calc(var(--acento-c) * 0.6) 225);
  --mod-rende:       oklch(var(--acento-l) var(--acento-c) 215);
  --mod-meupaciente: oklch(var(--acento-l) calc(var(--acento-c) * 0.85) 205);
  --mod-mapa:        oklch(var(--acento-l) calc(var(--acento-c) * 0.6) 200);
}

/* ===== Densidade compacta ===== */
:root[data-density="compacto"] {
  --altura-controle: 34px;
  --altura-input: 38px;
  --altura-linha: 38px;
  --pad-celula: var(--esp-2);
  --fonte-base: 13px; --linha-base: 18px;
  --pad-conteudo: var(--esp-4);
}

/* ===== Acessibilidade de sistema ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --sobe-3d: 0px; --afunda-3d: 0px; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  /* 3D SEM movimento: a profundidade continua (sombra troca), mas nada
     desliza — o objeto "acende/apaga" a elevação em vez de subir/afundar. */
  .ds-card:hover, .ds-mag:hover { transform: none; }
  .ds-bottomnav__item:active svg { transform: scale(0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --vidro: var(--fundo-1); }
}

/* ============================================================
   Reset mínimo (idempotente — seguro mesmo com tokens.css junto)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--fonte-base);
  line-height: var(--linha-base);
  font-feature-settings: 'cv05', 'cv11', 'ss01';
  color: var(--texto-1);
  background: var(--fundo-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-sm); }
::placeholder { color: var(--texto-3); }
::selection { background: color-mix(in oklab, var(--acento) 30%, transparent); }

/* ============================================================
   Utilitários
   ============================================================ */
.ds-display { font-family: var(--fonte-display); font-weight: var(--peso-display); letter-spacing: var(--track-display); }
.ds-num     { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ds-t2 { color: var(--texto-2); } .ds-t3 { color: var(--texto-3); }
.ds-trunca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-xs { font-size: var(--fonte-xs); line-height: var(--linha-xs); }
.ds-sm { font-size: var(--fonte-sm); line-height: var(--linha-sm); }
.ds-md { font-size: var(--fonte-md); line-height: var(--linha-md); }
.ds-lg { font-size: var(--fonte-lg); line-height: var(--linha-lg); }
.ds-wrap { max-width: var(--leitura-larg); margin-inline: auto; padding-inline: var(--esp-5); }
.ds-hide { display: none !important; }
@media (max-width: 768px) { .ds-desktop { display: none !important; } }
@media (min-width: 769px) { .ds-mobile  { display: none !important; } }

/* ============================================================
   BOTÕES
   ============================================================ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--altura-controle); padding: 0 var(--esp-4);
  border-radius: var(--raio-md); border: 1px solid var(--borda-1);
  background: var(--fundo-2); color: var(--texto-1); font-weight: 600; font-size: var(--fonte-base);
  box-shadow: var(--elev-3d-1);
  transition: background var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-btn:hover { background: var(--fundo-3); border-color: var(--borda-2); transform: translateY(var(--sobe-3d)); box-shadow: var(--elev-3d-2); }
.ds-btn:active { transform: translateY(var(--afunda-3d)); box-shadow: var(--elev-3d-press); }
.ds-btn svg { width: 18px; height: 18px; }
.ds-btn--acento   { background: var(--acento); border-color: transparent; color: var(--acento-texto); }
.ds-btn--acento:hover { background: var(--acento-forte); }
.ds-btn--destaque { background: var(--destaque); border-color: transparent; color: var(--destaque-texto); }
.ds-btn--destaque:hover { background: var(--destaque-forte); }
.ds-btn--fantasma { background: transparent; box-shadow: none; }
.ds-btn--fantasma:hover { box-shadow: var(--elev-3d-1); }
.ds-btn--icone { padding: 0; width: var(--altura-controle); }

.ds-chip {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  height: 32px; padding: 0 var(--esp-3); border-radius: var(--raio-full);
  border: 1px solid var(--borda-1); background: var(--fundo-2); color: var(--texto-2);
  font-size: var(--fonte-sm); font-weight: 600;
  box-shadow: var(--elev-3d-1);
  transition: background var(--dur-2) var(--curva), color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-chip:hover { color: var(--texto-1); border-color: var(--borda-2); transform: translateY(var(--sobe-3d)); box-shadow: var(--elev-3d-2); }
.ds-chip:active { transform: translateY(var(--afunda-3d)); box-shadow: var(--elev-3d-press); }
.ds-chip[aria-pressed="true"], .ds-chip.is-ativo {
  background: var(--acento-suave); color: var(--acento); border-color: var(--acento-linha);
}

/* ============================================================
   STATUS / SEMÁFORO  (estado != marca)
   ============================================================ */
.ds-status { display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--fonte-sm); font-weight: 600; }
.ds-status__ponto { width: 8px; height: 8px; border-radius: var(--raio-full); background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent); }
.ds-status--ok     { color: var(--ok); }
.ds-status--alerta { color: var(--alerta); }
.ds-status--erro   { color: var(--erro); }
.ds-status--info   { color: var(--info); }
.ds-status--neutro { color: var(--texto-3); }
.ds-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--raio-full);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--fundo-3); color: var(--texto-2);
}
.ds-badge--destaque { background: var(--destaque-suave); color: var(--destaque); }
.ds-badge--acento   { background: var(--acento-suave); color: var(--acento); }

/* ============================================================
   TOPBAR — consistente em TODA tela.  ⌂ Maestro sempre no mesmo canto.
   ============================================================ */
.ds-topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-alt);
  display: flex; align-items: center; gap: var(--esp-3);
  padding: 0 var(--esp-4);
  padding-top: env(safe-area-inset-top);
  background: var(--vidro); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--borda-1);
}
.ds-topbar__home {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  height: 40px; padding: 0 var(--esp-3); border-radius: var(--raio-md);
  border: 1px solid var(--borda-1); background: var(--fundo-1); color: var(--texto-1);
  font-weight: 700; flex: none;
  box-shadow: var(--elev-3d-1);
  transition: border-color var(--dur-2) var(--curva), background var(--dur-2) var(--curva), transform var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-topbar__home:hover { border-color: var(--acento-linha); background: var(--fundo-2); transform: translateY(var(--sobe-3d)); box-shadow: var(--elev-3d-2); }
.ds-topbar__home:active { transform: translateY(var(--afunda-3d)); box-shadow: var(--elev-3d-press); }
.ds-topbar__home svg { width: 18px; height: 18px; color: var(--acento); }
.ds-topbar__marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 800; letter-spacing: -0.01em; }
.ds-topbar__marca-ponto { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(140deg, var(--acento-2), var(--acento)); box-shadow: 0 0 12px var(--acento-linha); }
.ds-topbar__busca {
  flex: 1 1 auto; max-width: 460px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--esp-2);
  height: 40px; padding: 0 var(--esp-3); border-radius: var(--raio-full);
  border: 1px solid var(--borda-1); background: var(--fundo-1); color: var(--texto-3);
  cursor: text; transition: border-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-topbar__busca:hover { border-color: var(--borda-2); }
.ds-topbar__busca:focus-within { border-color: var(--acento-linha); box-shadow: var(--brilho-acento); }
.ds-topbar__busca svg { width: 17px; height: 17px; flex: none; }
.ds-topbar__busca input { flex: 1; border: 0; background: none; outline: none; color: var(--texto-1); min-width: 0; }
.ds-topbar__busca kbd {
  font-family: var(--fonte-mono); font-size: 10.5px; color: var(--texto-3);
  border: 1px solid var(--borda-1); border-radius: 6px; padding: 1px 6px; background: var(--fundo-2); flex: none;
}
.ds-topbar__dir { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
@media (max-width: 768px) {
  .ds-topbar__busca kbd { display: none; }
  .ds-topbar__marca span { display: none; }
}

/* ============================================================
   MENU PRINCIPAL ENXUTO -> SUBMENUS-FILHOS  (acordeão limpo)
   Primeira visão: só os grupos principais. O resto revela ao clicar.
   ============================================================ */
.ds-menu { display: flex; flex-direction: column; gap: var(--esp-3); }
.ds-acc { border: 1px solid var(--borda-1); border-radius: var(--raio-lg); background: var(--fundo-1); overflow: clip; }
.ds-acc + .ds-acc { margin-top: 0; }
.ds-acc__cab {
  width: 100%; display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-4); min-height: var(--alvo-min); text-align: left;
  transition: background var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-acc__cab:hover { background: var(--fundo-2); box-shadow: var(--luz-topo); }
.ds-acc__cab:active { background: var(--fundo-2); box-shadow: var(--elev-3d-press); }
.ds-acc__ic {
  width: 38px; height: 38px; border-radius: var(--raio-md); flex: none;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--_c, var(--acento)) 16%, transparent); color: var(--_c, var(--acento));
}
.ds-acc__ic svg { width: 20px; height: 20px; }
.ds-acc__txt { flex: 1; min-width: 0; }
.ds-acc__tit { display: block; font-weight: 700; font-size: var(--fonte-md); letter-spacing: -0.01em; }
.ds-acc__sub { display: block; font-size: var(--fonte-sm); color: var(--texto-3); margin-top: 1px; }
.ds-acc__meta { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
.ds-acc__chevron { width: 20px; height: 20px; color: var(--texto-3); transition: transform var(--dur-2) var(--curva); }
.ds-acc[aria-expanded="true"] > .ds-acc__cab .ds-acc__chevron { transform: rotate(180deg); }
/* corpo do acordeão: grid-rows truque p/ animar altura sem JS medir */
.ds-acc__corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--curva); }
.ds-acc[aria-expanded="true"] > .ds-acc__corpo { grid-template-rows: 1fr; }
.ds-acc__corpo > div { overflow: hidden; }
.ds-acc__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--esp-3);
  padding: 0 var(--esp-4) var(--esp-4);
}

/* ============================================================
   CARD de MÓDULO / AÇÃO  — ícone + label curta + 1 indicador vivo
   Interativo PARECE interativo. Nada de rótulo explicativo longo.
   ============================================================ */
.ds-card {
  position: relative; display: flex; flex-direction: column; gap: var(--esp-2);
  padding: var(--esp-4); min-height: 96px;
  border: 1px solid var(--borda-1); border-radius: var(--raio-lg);
  background:
    linear-gradient(180deg, var(--realce), transparent 40%),
    var(--fundo-1);
  color: var(--texto-1); text-align: left; overflow: hidden;
  box-shadow: var(--elev-3d-1);
  transition: transform var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva), background var(--dur-2) var(--curva);
}
.ds-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--_c, var(--acento)); opacity: 0; transition: opacity var(--dur-2) var(--curva); }
.ds-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--_c, var(--acento)) 55%, var(--borda-2)); box-shadow: var(--elev-3d-2); background: linear-gradient(180deg, var(--realce), transparent 40%), var(--fundo-2); }
.ds-card:hover::before { opacity: 1; }
.ds-card:active { transform: translateY(var(--afunda-3d)); box-shadow: var(--elev-3d-press); }
.ds-card:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: var(--elev-3d-2); }
.ds-card__topo { display: flex; align-items: center; gap: var(--esp-3); }
.ds-card__ic {
  width: 40px; height: 40px; border-radius: var(--raio-md); flex: none; display: grid; place-items: center;
  background: color-mix(in oklab, var(--_c, var(--acento)) 18%, transparent); color: var(--_c, var(--acento));
}
.ds-card__ic svg { width: 21px; height: 21px; }
.ds-card__nome { font-weight: 700; font-size: var(--fonte-md); letter-spacing: -0.01em; line-height: 1.15; }
.ds-card__tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); }
.ds-card__vivo { margin-top: auto; display: flex; align-items: baseline; gap: var(--esp-2); }
.ds-card__num { font-family: var(--fonte-display); font-weight: 800; font-size: var(--fonte-lg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texto-1); }
.ds-card__leg { font-size: var(--fonte-sm); color: var(--texto-3); }
.ds-card__seta { position: absolute; top: var(--esp-4); right: var(--esp-4); color: var(--texto-3); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-2), transform var(--dur-2); }
.ds-card:hover .ds-card__seta { opacity: 1; transform: none; }

/* ============================================================
   BOTÕES MÁGICOS — ação rápida numa fileira só
   ============================================================ */
.ds-magica {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-3);
}
.ds-mag {
  position: relative; display: flex; flex-direction: column; gap: var(--esp-2); align-items: flex-start;
  padding: var(--esp-4); min-height: 108px; text-align: left; overflow: hidden;
  border: 1px solid var(--borda-1); border-radius: var(--raio-lg);
  background: linear-gradient(180deg, var(--realce), transparent 45%), var(--fundo-1); color: var(--texto-1);
  box-shadow: var(--elev-3d-1);
  transition: transform var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.ds-mag:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--_c, var(--acento)) 60%, transparent); box-shadow: var(--elev-3d-2); }
.ds-mag:active { transform: translateY(var(--afunda-3d)); box-shadow: var(--elev-3d-press); }
.ds-mag:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; box-shadow: var(--elev-3d-2); }
.ds-mag__ic {
  width: 42px; height: 42px; border-radius: var(--raio-md); display: grid; place-items: center; flex: none;
  background: color-mix(in oklab, var(--_c, var(--acento)) 20%, transparent); color: var(--_c, var(--acento));
}
.ds-mag__ic svg { width: 22px; height: 22px; }
.ds-mag__rot { font-weight: 700; font-size: var(--fonte-base); line-height: 1.2; letter-spacing: -0.01em; }
.ds-mag__dica { font-size: 11.5px; line-height: 1.35; color: var(--texto-3); }
.ds-mag__tag { position: absolute; top: var(--esp-3); right: var(--esp-3); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-3); opacity: 0.8; }

/* ============================================================
   KPI VIVO — o número que importa (não texto explicativo)
   ============================================================ */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--esp-3); }
.ds-kpi {
  display: flex; flex-direction: column; gap: 4px; padding: var(--esp-4);
  border: 1px solid var(--borda-1); border-radius: var(--raio-lg); background: var(--fundo-1); text-align: left;
  transition: border-color var(--dur-2) var(--curva), background var(--dur-2) var(--curva);
}
.ds-kpi:hover { border-color: var(--borda-2); background: var(--fundo-2); }
.ds-kpi__rot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.ds-kpi__num { font-family: var(--fonte-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 26px); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-kpi__extra { font-size: 11.5px; color: var(--texto-3); }
.ds-kpi--destaque { background: linear-gradient(150deg, var(--acento-suave), transparent 70%), var(--fundo-1); border-color: var(--acento-linha); }
.ds-kpi__delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; }
.ds-kpi__delta--sobe { color: var(--ok); }
.ds-kpi__delta--desce { color: var(--erro); }

/* ============================================================
   SPARKLINE (Stripe: linha limpa + fill suave + endpoint destacado)
   ============================================================ */
.ds-spark { display: block; width: 100%; height: 34px; overflow: visible; }
.ds-spark__area { fill: var(--_c, var(--acento)); opacity: 0.12; }
.ds-spark__linha { fill: none; stroke: var(--_c, var(--acento)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-spark__ponta { fill: var(--_c, var(--acento)); stroke: var(--fundo-1); stroke-width: 2.5; }
.ds-spark__brilho { fill: var(--_c, var(--acento)); opacity: 0.25; }

/* ============================================================
   COMMAND PALETTE — o atalho do leigo ("o que você quer fazer?")
   ============================================================ */
.ds-cmd { position: fixed; inset: 0; z-index: 200; display: none; }
.ds-cmd.is-aberta { display: block; }
.ds-cmd__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); animation: ds-fade var(--dur-2) var(--curva); }
.ds-cmd__caixa {
  position: relative; width: min(640px, calc(100vw - 32px)); margin: 12vh auto 0;
  background: var(--fundo-1); border: 1px solid var(--borda-2); border-radius: var(--raio-xl);
  box-shadow: var(--sombra-3); overflow: hidden; animation: ds-pop var(--dur-3) var(--curva);
}
.ds-cmd__campo { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--borda-1); }
.ds-cmd__campo svg { width: 20px; height: 20px; color: var(--acento); flex: none; }
.ds-cmd__campo input { flex: 1; border: 0; background: none; outline: none; color: var(--texto-1); font-size: var(--fonte-md); }
.ds-cmd__lista { max-height: 52vh; overflow-y: auto; padding: var(--esp-2); }
.ds-cmd__grupo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); padding: var(--esp-3) var(--esp-3) var(--esp-1); }
.ds-cmd__item {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; text-align: left;
  padding: var(--esp-3); border-radius: var(--raio-md); color: var(--texto-1); min-height: var(--alvo-min);
  transition: background var(--dur-2) var(--curva), box-shadow var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.ds-cmd__item[aria-selected="true"], .ds-cmd__item:hover { background: var(--acento-suave); }
.ds-cmd__item:active { box-shadow: var(--elev-3d-press); transform: translateY(var(--afunda-3d)); }
.ds-cmd__item-ic { width: 30px; height: 30px; border-radius: var(--raio-sm); flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--_c, var(--acento)) 16%, transparent); color: var(--_c, var(--acento)); }
.ds-cmd__item-ic svg { width: 17px; height: 17px; }
.ds-cmd__item-txt { flex: 1; min-width: 0; }
.ds-cmd__item-tit { display: block; font-weight: 600; }
.ds-cmd__item-sub { display: block; font-size: var(--fonte-sm); color: var(--texto-3); }
.ds-cmd__item-tag { font-size: 10.5px; color: var(--texto-3); flex: none; }
.ds-cmd__vazio { padding: var(--esp-6); text-align: center; color: var(--texto-3); }
.ds-cmd__rodape { display: flex; gap: var(--esp-4); padding: var(--esp-2) var(--esp-5); border-top: 1px solid var(--borda-1); font-size: 11px; color: var(--texto-3); }
.ds-cmd__rodape kbd { font-family: var(--fonte-mono); border: 1px solid var(--borda-1); border-radius: 5px; padding: 0 5px; background: var(--fundo-2); }

/* ============================================================
   BOTTOM-NAV (mobile) — 4 itens + "Mais"
   ============================================================ */
.ds-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--bottomnav-alt) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--vidro); backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--borda-1);
}
.ds-bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--texto-3); font-size: 10.5px; font-weight: 600; min-height: var(--alvo-min);
  transition: color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva);
}
.ds-bottomnav__item svg { width: 22px; height: 22px; transition: transform var(--dur-1) var(--curva); }
.ds-bottomnav__item.is-ativo { color: var(--acento); }
.ds-bottomnav__item:active svg { transform: translateY(var(--afunda-3d)) scale(0.94); }
@media (max-width: 768px) {
  .ds-bottomnav { display: grid; }
  body.ds-tem-bottomnav { padding-bottom: calc(var(--bottomnav-alt) + env(safe-area-inset-bottom)); }
}

/* ============================================================
   ESTADOS — vazio (amigável+ação), carregando (skeleton)
   ============================================================ */
.ds-vazio { display: grid; place-items: center; gap: var(--esp-3); padding: var(--esp-7) var(--esp-4); text-align: center; color: var(--texto-3); }
.ds-vazio__ic { width: 52px; height: 52px; color: var(--texto-3); opacity: 0.7; }
.ds-vazio__tit { font-weight: 700; color: var(--texto-2); font-size: var(--fonte-md); }
.ds-skel { position: relative; overflow: hidden; background: var(--fundo-2); border-radius: var(--raio-sm); }
.ds-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--realce), transparent); transform: translateX(-100%); animation: ds-shimmer 1.3s infinite; }
.ds-skel--linha { height: 12px; margin: 6px 0; }
.ds-skel--card { height: 96px; }

/* ============================================================
   SEÇÃO / cabeçalho de bloco
   ============================================================ */
.ds-secao { margin-top: var(--esp-6); }
.ds-secao__cab { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.ds-secao__tit { font-family: var(--fonte-display); font-weight: 800; font-size: var(--fonte-md); letter-spacing: -0.01em; }
.ds-secao__sub { font-size: var(--fonte-sm); color: var(--texto-3); }

/* ============================================================
   Animações
   ============================================================ */
@keyframes ds-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pop    { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ds-shimmer{ to { transform: translateX(100%); } }