/* =====================================================================================================
   APP.CSS · a CASCA da area logada do BOOOT (v2 · 07/09/2026 · tarefa 205 · AREA 2 · chip S)
   Servida como /ds/app.css?v=<hash> pelo build-painel.mjs. Consumidores: /app (o Painel) · /app/videos ·
   /app/conta · /catalogo · /entrar.

   O QUE ESTA FOLHA E: a anatomia do STChat (crm.booot.com.br) escrita com os valores da casa. Menu
   lateral grafite de 15rem com o trocador de conta no topo, barra superior FIXA de 3.5rem da MESMA cor do
   menu, conteudo claro com cartoes brancos. Tema claro por padrao (html.tema-claro) e escuro pelo botao da
   barra; menu e barra ficam grafite nos DOIS temas, como no STChat.

   PRONTO (anti-tijolo): adotamos a ANATOMIA shadcn/ui que o STChat usa (sidebar + topbar + card + pill +
   dialog + empty state + sticky bar), o <dialog> NATIVO (showModal / ::backdrop / Esc / foco) no lugar de
   sheet propria, os icones Lucide (ISC) como <symbol> inline no partial, e prefers-reduced-motion. NAO
   adotamos Tailwind (a casa nao tem build de CSS) nem framework de JS: o que se CONSTROI aqui e so o glue.

   LEI DA MARCA: so COMPOE por var(--token) de _MARCA/tokens/tokens.css (importado na abertura). Zero hex,
   zero rgb()/hsl(), zero nome de letra, px so 1px (borda) e 44px (alvo de toque); o resto em rem, % ou
   token. As custom properties PROPRIAS (--sh-*) estao na lista PROPRIOS de app/auditar-app.mjs, com o
   motivo. Fonte no app: Inter em TUDO (--fonte-texto); o Archivo (display) NAO entra aqui, porque a
   manchete de display dentro do produto foi o que o dono chamou de Word.

   Divisor de painel em propriedade LOGICA (border-inline-end), nunca border-right: mesmo pixel, e nao se
   confunde com a listra decorativa que o gate anti-slop-visual barra.

   FIDELIDADE FINA (07/09 · D-PLATAFORMA-COPIA-O-STCHAT-07SET): as receitas de movimento, foco, menu,
   botao e popup daqui NAO sao gosto. Sao a transcricao, valor por valor, da marcacao e da folha que o
   PROPRIO fornecedor serve (`_MARCA/whitelabel/refs-stchat/estilo-do-fornecedor.css` + as 2 paginas
   salvas `pagina-painel.html` e `pagina-sla.html`, onde a classe de cada elemento E a especificacao).
   A transcricao completa (classe do fornecedor -> regra daqui), as 2 formas de botao dele e as 4
   divergencias declaradas vivem em `_work/produto-area-logada/app-v2/HANDOFF-F.md` §2-3; a leitura de
   cor, forma e fluxo esta em `_MARCA/whitelabel/refs-stchat/ANATOMIA-MEDIDA.md`.

   Travas: _MOTOR/_tests/app-shell.test.mjs (o partial, os 2 temas, o teto de 40 KB, a secao "fidelidade
   ao STChat") · _MOTOR/_tests/app-catalogo.test.mjs (folha so token, sabotagem, menu escuro nos 2 temas) ·
   2_CLIENTES/ongoing/painel/app/auditar-app.mjs (a bancada com navegador).
   ===================================================================================================== */
/* inline pelo build: ../tokens/tokens.css */
/* =====================================================================
   BOOOT · DESIGN TOKENS · v2.0.0 · sistema OURO
   Fonte única da verdade do sistema visual BOOOT.

   DECISÃO: D-MARCA-OURO-LARANJA-E-CREME-SAEM-16AGO (dono, 16/ago/2026 ·
   ledger _ESTADO/decisoes-copy.jsonl · contrato
   0_CENTRAL/PEDIDO-FABLE-DESIGN-SYSTEM-BOOOT.md). O acento ÚNICO é o
   OURO #D4921B no degrau 600. O laranja, o creme e a letra antiga
   MORRERAM: peça nova não os usa (os valores mortos estão listados na
   checagem de pureza do verify-tokens.mjs). As peças já aprovadas seguem
   rendendo pelo @import de legado abaixo até cada repintura receber a
   palavra do dono (§8.3 do contrato) · a ponte morre com o §8.3.

   Deploy do Portal segue seguro DURANTE a transição: as páginas do site
   consomem só nomes legados, a ponte os congela nos valores antigos, e o
   build (copyMarca) segue o @import e as fontes por recursão · o site
   renderiza idêntico ao aprovado até cada repintura do §8.3.

   Regra-mãe: o BOOOT é grafite frio e ouro. Ouro é valor conquistado:
   assinatura, número de resultado, UM botão por tela no escuro. Em
   página clara, ouro de preenchimento é PROIBIDO (dono, 16/ago: "em
   páginas brancas ou claras o certo é não ter botão ouro. Ponto final.");
   no claro o ouro vira texto/borda no degrau 800 couro.

   Todo contraste comentado abaixo foi medido (WCAG 2.x) em 16/ago/2026
   com a base declarada ao lado. Número sem base é número sem sentido.

   NÃO editar valores soltos. Mude aqui e o sistema inteiro herda.
   Paridade com tokens.json + tailwind.tokens.js: node verify-tokens.mjs
   ===================================================================== */

/* inline pelo build: legado-repintura.css */
/* =====================================================================
   BOOOT · LEGADO EM REPINTURA · a ponte que morre
   D-MARCA-OURO-LARANJA-E-CREME-SAEM-16AGO (ledger _ESTADO/decisoes-copy.jsonl)

   O QUE ISTO E: os nomes da marca ANTIGA (carvao, creme, laranja, Poppins),
   congelados nos VALORES antigos, pra que as pecas JA APROVADAS pelo dono
   continuem rendendo exatamente como ele as aprovou ate cada repintura
   receber a palavra dele (contrato 0_CENTRAL/PEDIDO-FABLE-DESIGN-SYSTEM-BOOOT.md
   §8.3: patterns/site, cards de prova, carrossel, kit social, juiz, Painel).

   O QUE ISTO NAO E: paleta permitida. O brand-check-gate le SO o tokens.css
   (a fonte nova) e este arquivo fica FORA da allowlist de proposito: peca
   NOVA com creme/laranja/Poppins reprova. Usar estes nomes em peca nova
   e proibido (manual da marca).

   MORTE: cada bloco daqui morre no mesmo movimento da repintura da peca que
   o consome (zero-residuo). Quando o §8.3 fechar inteiro, este arquivo e
   deletado e o @import sai do tokens.css.
   ===================================================================== */

/* Poppins self-host (5 pesos · OFL) · SO pras pecas legadas. Peca nova usa
   Archivo + Inter (assets/fonts/fonts.css). Os woff2 morrem junto daqui. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/poppins-900.woff2') format('woff2'); }

:root {
  /* ---- as 5 cores antigas (mortas pra peca nova · vivas pro legado) ---- */
  --booot-carvao: #1D1D1F;
  --booot-creme: #E9DCC9;
  --booot-laranja: #FF3F02;
  --booot-cinza-claro: #E6E2DA;
  --booot-cinza-medio: #B8B4AC;
  --booot-laranja-press: color-mix(in srgb, var(--booot-laranja) 88%, var(--booot-carvao));
  --booot-laranja-tint: color-mix(in srgb, var(--booot-laranja) 10%, transparent);

  /* ---- tripletos HSL antigos ---- */
  --booot-carvao-hsl: 240 3% 12%;
  --booot-creme-hsl: 36 42% 85%;
  --booot-laranja-hsl: 15 100% 50%;
  --booot-cinza-claro-hsl: 40 19% 88%;
  --booot-cinza-medio-hsl: 40 8% 70%;
  --booot-erro-hsl: 0 79% 65%;

  /* ---- semanticos antigos ---- */
  --bg-dark: var(--booot-carvao);
  --bg-light: var(--booot-creme);
  --fg-dark: var(--booot-creme);
  --fg-light: var(--booot-carvao);
  --accent: var(--booot-laranja);
  --muted: var(--booot-cinza-medio);
  --line: color-mix(in srgb, var(--booot-carvao) 16%, transparent);

  /* ---- ladder de texto sobre carvao ---- */
  --fg-on-dark: var(--booot-creme);
  --fg-on-dark-strong: hsl(var(--booot-creme-hsl) / .92);
  --fg-on-dark-body: hsl(var(--booot-creme-hsl) / .72);
  --fg-on-dark-muted: hsl(var(--booot-creme-hsl) / .55);
  --fg-on-dark-faint: hsl(var(--booot-creme-hsl) / .42);
  --fg-on-dark-dim: hsl(var(--booot-creme-hsl) / .28);
  --surface-on-dark: hsl(var(--booot-creme-hsl) / .05);
  --hairline-on-dark: 1px solid hsl(var(--booot-creme-hsl) / .08);
  --fg-on-laranja: hsl(29 100% 96%);

  /* ---- tipografia antiga ---- */
  --font-sans: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fw-black: 900;
  --tracking-display: -0.038em;
  --tracking-tight: -0.025em;
  --tracking-caps: 0.18em;
  --cta-min-size: 1.0625rem;

  /* ---- raio antigo (o novo e --raio-*) ---- */
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* ---- superficies, linhas, sombras antigas ---- */
  --surface-dark-lift: color-mix(in srgb, var(--booot-creme) 8%, transparent);
  --surface-light-lift: color-mix(in srgb, var(--booot-carvao) 4%, transparent);
  --hairline-dark: 1px solid color-mix(in srgb, var(--booot-creme) 8%, transparent);
  --hairline-light: 1px solid color-mix(in srgb, var(--booot-carvao) 12%, transparent);
  --glow-accent-soft: 0 14px 30px -16px hsl(0 0% 0% / .5);
  --shadow-overlay: 0 16px 48px color-mix(in srgb, var(--booot-carvao) 22%, transparent);
  --focus-ring: 2px solid var(--booot-laranja);

  /* ---- app-ui v1.1 antigo (Painel, form, tabela) ---- */
  --line-on-light: color-mix(in srgb, var(--booot-carvao) 12%, transparent);
  --line-on-dark: color-mix(in srgb, var(--booot-creme) 8%, transparent);
  --text-secondary-on-light: color-mix(in srgb, var(--booot-carvao) 72%, transparent);
  --text-secondary-on-dark: var(--booot-cinza-medio);
  --state-positive: var(--booot-laranja);
  --state-attention: var(--booot-laranja);
  --state-negative: var(--booot-carvao);
  --field-bg: var(--surface-light-lift);
  --field-border: color-mix(in srgb, var(--booot-carvao) 12%, transparent);
  --field-border-focus: var(--booot-laranja);
  --field-disabled: color-mix(in srgb, var(--booot-carvao) 38%, transparent);
  --placeholder-color: color-mix(in srgb, var(--booot-carvao) 50%, transparent);
  --table-header-bg: var(--booot-carvao);
  --table-header-fg: var(--booot-creme);
  --row-stripe: var(--surface-light-lift);
  --row-hover: color-mix(in srgb, var(--booot-carvao) 6%, transparent);
}


:root {
  /* ---- OURO · a escala do acento (degrau 600 = a cor da marca) ------ */
  --booot-ouro-100: #F4EAD7;   /* areia · wash */
  --booot-ouro-200: #F3D7A5;   /* trigo · wash */
  --booot-ouro-300: #EEC377;   /* mel */
  --booot-ouro-400: #E9B353;   /* sol */
  --booot-ouro-500: #E6A93C;   /* âmbar · HOVER do ouro */
  --booot-ouro-600: #D4921B;   /* OURO · a cor da marca (7,10 s/ cinza-000 · 6,57 s/ cinza-010) */
  --booot-ouro-700: #AC7616;   /* cobre · PRESSIONADO */
  --booot-ouro-800: #835A11;   /* couro · texto e borda no tema claro (5,70 s/ cinza-900 · 6,11 s/ branco) */
  --booot-ouro-900: #5A3E0C;   /* terra */

  /* ---- NEUTROS · a fundação fria (12 degraus, todos · palavra do dono) */
  --booot-cinza-000: #0E1216;  /* a página escura */
  --booot-cinza-010: #141B1F;  /* o cartão escuro */
  --booot-cinza-100: #1E2429;  /* elevado */
  --booot-cinza-200: #232A2F;  /* flutuante escuro */
  --booot-cinza-300: #2F363C;
  --booot-cinza-400: #40484F;
  --booot-cinza-500: #5C6B7A;  /* texto 2º no claro (5,10 s/ cinza-900) · primária do whitelabel */
  --booot-cinza-550: #7A8087;  /* o cinza do ícone · como TEXTO só >=16px s/ cartão escuro (4,36 s/ 010 · 4,71 s/ 000) */
  --booot-cinza-600: #96A0A6;  /* texto 2º no escuro (6,53 s/ 010) */
  --booot-cinza-700: #BCC2C8;
  --booot-cinza-800: #E2E6E9;
  --booot-cinza-900: #F6F7F8;  /* o claro do sistema (decisão do dono) · texto 1º no escuro (16,23 s/ 010) */

  /* ---- SEMÂNTICAS · 3, não 4 (a 4ª morreu por medição: âmbar = ouro) - */
  /* sobre o cartão escuro 010: erro 5,22 · sucesso 5,24 · info 5,18 (deliberado: mesma leitura) */
  --booot-erro: #EC5D5E;       /* Radix red-10 adotado (aberto, acessível em escuro) */
  --booot-sucesso: #3C9E70;    /* derivado do vermelho */
  --booot-info: #4990D6;       /* derivado do vermelho */

  /* ---- TIPOGRAFIA · Archivo (título) + Inter (texto) ---------------- */
  --fonte-titulo: 'Archivo', 'Inter', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, sans-serif;
  /* largura do Archivo (font-stretch · eixo wdth da variável):
     62% = manchete grande (>=28px: herói, post, número de resultado · cravado pelo dono)
     92% = título de seção e componente (a condensada fecha demais no tamanho pequeno) */
  --largura-display: 62%;
  --largura-titulo: 92%;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;             /* o peso de display do Archivo (o 900 morreu com a letra antiga) */

  --lh-display: 1.05;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  /* tracking: a condensada já é compacta; o aperto forte da letra antiga esmagaria */
  --letra-display: -0.01em;    /* Archivo 62% grande */
  --letra-titulo: -0.02em;     /* Archivo 92% */
  --letra-caps: 0.14em;        /* Inter caps (eyebrow, rótulo) */

  --fs-micro: .75rem;          /* 12px fixo · legenda/rótulo de UI densa */
  --fs-eyebrow: clamp(.75rem, 1vw, .875rem);
  --fs-body: clamp(.9375rem, 1.3vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.1875rem);
  --fs-card-title: clamp(1.0625rem, 1.45vw, 1.1875rem);  /* título de card (promoção da ANATOMIA-ADOTADA) */
  --fs-h3: clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-h2: clamp(1.6rem, 3.4vw, 2.4rem);
  --fs-display: clamp(2.25rem, 6vw, 3.5rem);
  --fs-hero: clamp(3rem, 8vw, 4.5rem);                   /* manchete do Portal (Archivo 62%) */

  /* ---- SPACING (base 8 · sobrevive da v1 · +1 degrau pra UI densa) -- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* ---- MEDIDAS DE LEITURA ------------------------------------------- */
  --medida-texto: 68ch;        /* coluna de leitura confortável */
  --medida-form: 560px;        /* form / diálogo */

  /* ---- RAIO · 3 papéis + pílula · aninhado desce um degrau ---------- */
  --raio-controle: .625rem;    /* 10px · botão, campo, chip retangular */
  --raio-cartao: .875rem;      /* 14px · card, painel */
  --raio-flutuante: 1.25rem;   /* 20px · modal, popover, hero container */
  --raio-pill: 999px;

  /* ---- Z-INDEX ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- MOTION · anima só transform e opacity ------------------------ */
  --motion-fast: 180ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);

  /* ---- FORMA & A11Y ------------------------------------------------- */
  --cut-angle: 62deg;          /* corte diagonal canônico (crescimento) · a assinatura geométrica */
  --focus-offset: 2px;

  /* =====================================================================
     TOKENS SEMÂNTICOS DE TEMA · o default é o ESCURO (a casa da marca).
     O tema claro re-mapeia os MESMOS nomes no bloco .tema-claro abaixo.
     Consuma SEMPRE estes nomes em peça; primitivos são detalhe interno.
     ===================================================================== */

  /* superfícies · elevação por COR no escuro (sombra quase não lê aqui) */
  --pagina: var(--booot-cinza-000);
  --superficie: var(--booot-cinza-010);
  --superficie-2: var(--booot-cinza-100);
  --flutuante: var(--booot-cinza-200);

  /* texto · 1º 16,23 s/ superfície · 2º 6,53 · 3º 4,36 (só >=16px s/ cartão) */
  --texto: var(--booot-cinza-900);
  --texto-2: var(--booot-cinza-600);
  --texto-3: var(--booot-cinza-550);
  /* lead: o parágrafo de abertura ao lado de display. Um degrau abaixo do 1º
     (o quase-branco em massa de texto ficou duro na tela do dono, 16/ago):
     10,47 s/ página 000 · 9,69 s/ cartão 010 (medido 16/ago) */
  --texto-lead: var(--booot-cinza-700);

  --borda: color-mix(in srgb, var(--booot-cinza-900) 8%, transparent);
  --borda-forte: color-mix(in srgb, var(--booot-cinza-900) 16%, transparent);

  /* acento · estados são degraus vizinhos (500 hover · 700 press) */
  --acento: var(--booot-ouro-600);
  --acento-hover: var(--booot-ouro-500);
  --acento-press: var(--booot-ouro-700);
  --acento-texto: var(--booot-ouro-600);      /* 6,57 s/ superfície · 7,10 s/ página */
  --sobre-acento: var(--booot-cinza-000);     /* grafite s/ ouro 7,10 · o CTA branco do escuro é exceção do dono (manual) */

  /* CTA primário · escuro: ouro · claro: grafite (zero ouro de preenchimento no claro) */
  --cta-fundo: var(--booot-ouro-600);
  --cta-texto: var(--booot-cinza-000);
  --cta-hover: var(--booot-ouro-500);
  --cta-press: var(--booot-ouro-700);

  --anel-foco: 2px solid var(--booot-ouro-600);   /* 7,10 s/ página · 6,57 s/ cartão (piso 3,0 UI) */

  /* semânticas como TEXTO (no escuro as cruas passam: 5,22 · 5,24 · 5,18 s/ 010) */
  --erro-texto: var(--booot-erro);
  --sucesso-texto: var(--booot-sucesso);
  --info-texto: var(--booot-info);

  /* formulário */
  --campo-fundo: color-mix(in srgb, var(--booot-cinza-900) 4%, transparent);
  --campo-borda: color-mix(in srgb, var(--booot-cinza-900) 20%, transparent);
  --campo-borda-foco: var(--booot-ouro-600);

  --desabilitado: .45;         /* opacidade de estado desabilitado · sem trocar cor */
  --veu-foto: color-mix(in srgb, var(--booot-cinza-000) 65%, transparent);  /* texto sobre foto · janela 55-75% */

  /* sombra · escuro: só o que flutua tem sombra (elevação é por cor) */
  --sombra-cartao: none;
  --sombra-flutuante: 0 16px 48px hsl(0 0% 0% / .5);

  /* gráfico · a métrica-herói é a ÚNICA série ouro (9,69 e 3,18 s/ cartão nas neutras) */
  --serie-1: var(--booot-ouro-600);
  --serie-2: var(--booot-cinza-600);
  --serie-3: var(--booot-cinza-500);
}

/* =====================================================================
   TEMA CLARO · a página é o #F6F7F8 do dono, o cartão é branco puro.
   Ouro de preenchimento NÃO existe aqui (ouro cru mede 2,47 s/ cinza-900
   e reprova até como indicador); o acento vira couro 800 em texto/borda
   e o CTA vira grafite.
   ===================================================================== */
.tema-claro {
  --pagina: var(--booot-cinza-900);
  --superficie: #FFFFFF;
  --superficie-2: #FFFFFF;
  --flutuante: #FFFFFF;

  /* texto · 1º 17,53 s/ página (18,80 s/ branco) · 2º 5,10 · 3º 8,67 */
  --texto: var(--booot-cinza-000);
  --texto-2: var(--booot-cinza-500);
  --texto-3: var(--booot-cinza-400);
  --texto-lead: var(--booot-cinza-300);   /* 11,42 s/ página 900 · 12,25 s/ branco (medido 16/ago) */

  --borda: color-mix(in srgb, var(--booot-cinza-000) 12%, transparent);
  --borda-forte: color-mix(in srgb, var(--booot-cinza-000) 20%, transparent);

  /* ⚠️ O `--acento` TAMBÉM desce pro couro aqui, e este bloco vivia sem ele.
     O cabeçalho deste arquivo já mandava ("no claro o ouro vira texto/borda no degrau
     800 couro"), mas só `--acento-texto` tinha sido remapeado: `--acento` continuava
     valendo o ouro 600 do :root e vazava ouro CRU pro tema claro por toda porta que
     usa o token de PREENCHIMENTO -- o selo "✓ SELECIONADO" do /checkout, a borda da
     aba Pix do /reserva, o disco de confirmação do /obrigado, o ponto "agora" da
     linha do tempo do /panorama, o anel de progresso do /cadastro. Um token que não
     muda com o tema é a família inteira de defeito da repintura numa linha só.
     Preenchimento de ouro segue PROIBIDO no claro (palavra do dono): quem preenche
     com `--acento` e leva TEXTO em cima (selo, badge) perde o fundo e vira
     texto+borda na sua própria regra `.tema-claro`; couro como texto/borda/ícone e
     como fundo de wash (14%) é o que este degrau autoriza. */
  --acento: var(--booot-ouro-800);            /* couro · 5,70 s/ página · 6,11 s/ branco */
  --acento-texto: var(--booot-ouro-800);      /* couro · 5,70 s/ página · 6,11 s/ branco */

  /* CTA claro = grafite (hover/press sobem degraus da escada de cinza) */
  --cta-fundo: var(--booot-cinza-000);
  --cta-texto: #FFFFFF;                       /* 18,80 s/ o fundo grafite do botão */
  --cta-hover: var(--booot-cinza-100);
  --cta-press: var(--booot-cinza-200);

  --anel-foco: 2px solid var(--booot-ouro-800);   /* 5,70 s/ página (piso 3,0 UI) */

  /* semânticas como texto corrido: mistura 70% cor + 30% grafite (medido: 5,32 · 5,23 · 5,29 s/ página) */
  --erro-texto: color-mix(in srgb, var(--booot-erro) 70%, var(--booot-cinza-000));
  --sucesso-texto: color-mix(in srgb, var(--booot-sucesso) 70%, var(--booot-cinza-000));
  --info-texto: color-mix(in srgb, var(--booot-info) 70%, var(--booot-cinza-000));

  --campo-fundo: #FFFFFF;
  --campo-borda: color-mix(in srgb, var(--booot-cinza-000) 45%, transparent);  /* 3,04 s/ branco (piso 3,0) */
  --campo-borda-foco: var(--booot-ouro-800);

  /* claro: elevação é por sombra discreta + borda (cartão branco s/ página quase-branca) */
  --sombra-cartao: 0 1px 2px hsl(210 20% 10% / .06), 0 4px 16px hsl(210 20% 10% / .06);
  --sombra-flutuante: 0 16px 48px hsl(210 20% 10% / .18);

  /* a métrica-herói também desce um degrau: `--serie-1` ficava no ouro 600 e as barras
     do /panorama e do /reuniao saíam em ouro cru sobre branco (2,47) */
  --serie-1: var(--booot-ouro-800);           /* 6,11 s/ branco */
  --serie-2: var(--booot-cinza-500);          /* 5,47 s/ branco */
  --serie-3: var(--booot-cinza-300);
}

/* ============================================================================
   PLATAFORMA · os tokens do app logado (go.booot.com.br/app) · D-PLATAFORMA-COPIA-O-STCHAT-07SET
   O dono (07/09/2026): "o objetivo é ficar mais próximo ao STChat possível, para garantir consistência
   nas 2 plataformas". Valores MEDIDOS ao vivo em crm.booot.com.br (getComputedStyle, claro e escuro) e
   registrados em _MARCA/whitelabel/refs-stchat/ANATOMIA-MEDIDA.md. O escopo é o documento que carrega a
   casca (.sh-app · app/shell.html) ou a tela de entrar (.en-caixa · entrar.html): o Portal e o resto da casa NÃO mudam. Só os SEMÂNTICOS (CSS-only)
   são revalorados aqui; os primitivos (cinza-*, ouro-*) e as medidas espelhadas (raio-*, motion-*, ease-*)
   seguem os mesmos: o verify-tokens exige paridade css/json/tw e o app usa o token mais próximo (declarado em
   _MARCA/whitelabel/refs-stchat/ANATOMIA-MEDIDA.md §5). A primária do whitelabel é o
   cinza-500 (D-WHITELABEL-CORES-OURO-16AGO); o ouro fica só no símbolo e na pill do plano.
   ============================================================================ */
:root:has(.sh-app, .en-caixa) {
  /* escuro do STChat (204 26% 7% · 204 24% 10% · 204 20% 15% · 200 18% 93% · 204 12% 64% · 204 18% 17%) */
  --pagina: #0D1316;
  --superficie: #131B20;
  --superficie-2: #1F282E;
  --texto: #EAEEF0;
  --texto-2: #98A5AE;
  --texto-3: #6F7E89;
  --texto-lead: #C4CCD2;
  --borda: color-mix(in srgb, #242D33 70%, transparent);
  --borda-forte: #2E3940;
  --campo-fundo: color-mix(in srgb, #1F282E 40%, transparent);
  --campo-borda: color-mix(in srgb, #242D33 70%, transparent);
  --campo-borda-foco: var(--booot-cinza-500);
  --cta-fundo: var(--booot-cinza-500);
  --cta-texto: #FFFFFF;
  --cta-hover: color-mix(in srgb, var(--booot-cinza-500) 90%, transparent);
  --cta-press: color-mix(in srgb, var(--booot-cinza-500) 80%, #000000);
  --anel-foco: 2px solid var(--booot-cinza-500);
  --sombra-cartao: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sombra-flutuante: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}
:root:has(.sh-app, .en-caixa).tema-claro {
  /* claro do STChat (210 20% 98% · branco · 210 20% 96% · 222 47% 11% · 215 16% 47% · 214 32% 91%) */
  --pagina: #F9FAFB;
  --superficie: #FFFFFF;
  --superficie-2: #F1F5F9;
  --texto: #0F172A;
  --texto-2: #64748B;
  --texto-3: #94A3B8;
  --texto-lead: #334155;
  --borda: color-mix(in srgb, #E1E7EF 70%, transparent);
  --borda-forte: #CBD5E1;
  --campo-fundo: color-mix(in srgb, #F1F5F9 40%, transparent);
  --campo-borda: color-mix(in srgb, #E1E7EF 70%, transparent);
  --campo-borda-foco: var(--booot-cinza-500);
  --cta-fundo: var(--booot-cinza-500);
  --cta-texto: #FFFFFF;
  --cta-hover: color-mix(in srgb, var(--booot-cinza-500) 90%, transparent);
  --cta-press: color-mix(in srgb, var(--booot-cinza-500) 80%, #000000);
  --anel-foco: 2px solid var(--booot-cinza-500);
  --sombra-cartao: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sombra-flutuante: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}


/* ═══ 0 · A RECEITA UNICA (uma definicao, reusada em tudo que reage ao ponteiro) ════════════════════ */

:root {
  /* o `.transition` do fornecedor, letra por letra (estilo-do-fornecedor.css) */
  --sh-dur: 150ms;
  --sh-ease: cubic-bezier(.4, 0, .2, 1);
  --sh-ease-saida: cubic-bezier(0, 0, .2, 1);   /* o `.ease-out`, so na ABERTURA de popup */
  --sh-transicao: color var(--sh-dur) var(--sh-ease), background-color var(--sh-dur) var(--sh-ease),
    border-color var(--sh-dur) var(--sh-ease), opacity var(--sh-dur) var(--sh-ease),
    box-shadow var(--sh-dur) var(--sh-ease), transform var(--sh-dur) var(--sh-ease);
  /* o `shadow-lg` (so o modal usa) em rem: o tokens.css nao o define e a folha nao escreve px */
  --sh-sombra-modal: 0 .625rem .9375rem -.1875rem color-mix(in srgb, var(--booot-cinza-000) 10%, transparent),
    0 .25rem .375rem -.25rem color-mix(in srgb, var(--booot-cinza-000) 10%, transparent);
  /* anel de foco DENTRO do grafite · 55% e nao os 30% do fornecedor, que medem 2,45:1 (piso 3:1) */
  --sh-anel-grafite: color-mix(in srgb, var(--booot-cinza-900) 55%, transparent);
  --sh-12: calc(var(--space-1) * 3);            /* o `px-3` dele: 12px, que a escala de 8 da casa nao tem */
}

/* ═══ 1 · BASE ══════════════════════════════════════════════════════════════════════════════════════ */

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

/* [hidden] TEM que vencer o display do componente: o `display: grid` de `.sh-menu` (autor) ganha do
   `[hidden]{display:none}` do navegador, e o menu da conta ficava ABERTO por cima do conteudo em toda
   pagina, com a suite verde (achado da bancada, 07/09). Os resets de mercado carregam a mesma linha. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--pagina);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: .875rem;
  line-height: 1.43;                 /* 14/20 · o `text-sm` do fornecedor (.875rem / 1.25rem) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

:where(h1, h2, h3, h4, p, ul, ol, figure, dl) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }

a { color: inherit; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }

:focus-visible { outline: var(--anel-foco); outline-offset: var(--focus-offset); border-radius: var(--raio-controle); }

/* so LEITOR DE TELA (o rotulo que a tela nao mostra) */
.sh-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* pular pro conteudo: o 1o Tab de toda pagina */
.sh-pular {
  position: fixed; z-index: var(--z-toast); top: var(--space-2); left: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--raio-controle);
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--booot-cinza-900); color: var(--booot-cinza-000);
  font-weight: var(--fw-semibold); text-decoration: none;
  transform: translateY(-200%);
}
.sh-pular:focus { transform: none; }

.sh-icone {
  flex: 0 0 auto; width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══ 2 · O ESQUELETO (menu fixo + barra fixa + conteudo) ═══════════════════════════════════════════ */

.sh-app {
  --sh-menu: 15rem;
  --sh-topo: 3.5rem;
  min-height: 100vh;
}
.sh-app[data-menu="recolhido"] { --sh-menu: 4.25rem; }

/* ── 2.1 · o painel lateral. Grafite nos DOIS temas (so primitivo: nada aqui muda com .tema-claro) ── */
.sh-side {
  position: fixed; inset: 0 auto 0 0; z-index: var(--z-sticky);
  display: flex; flex-direction: column;
  width: var(--sh-menu); padding: var(--space-2);
  background: var(--booot-cinza-000);
  color: var(--booot-cinza-900);
  border-inline-end: 1px solid var(--booot-cinza-300);
  overflow: hidden auto;
  transition: width var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}

/* o trocador de conta · `h-12 rounded-xl bg-sidebar-foreground/[0.08] ring-1 ring-sidebar-border
   hover:bg-sidebar-foreground/[0.14] gap-3 px-3`. O anel e box-shadow, nao borda: nao muda a caixa. */
.sh-org {
  display: flex; align-items: center; gap: var(--sh-12);
  width: 100%; min-height: 3rem; margin-bottom: var(--space-2); padding: 0 var(--sh-12);
  border: 0; border-radius: var(--raio-cartao);
  background: color-mix(in srgb, var(--booot-cinza-900) 8%, transparent); color: inherit;
  box-shadow: 0 0 0 1px var(--booot-cinza-300);
  text-align: left; cursor: pointer;
  transition: var(--sh-transicao);
}
.sh-org:hover:not(:disabled) { background: color-mix(in srgb, var(--booot-cinza-900) 14%, transparent); }
.sh-org:active:not(:disabled) { transform: scale(.97); }
.sh-org:disabled { cursor: default; }
.sh-org-logo { flex: 0 0 auto; width: 1.25rem; height: auto; }
.sh-org-nome {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-semibold); font-size: .875rem;
}
.sh-org-chevron { color: var(--booot-cinza-600); }

.sh-nav { display: grid; gap: 1px; align-content: start; }
.sh-nav-sep {
  display: block; height: 1px; margin: var(--space-2);
  background: var(--booot-cinza-300);
}

/* item do menu · a classe do fornecedor, transcrita: `h-12 rounded-xl text-sidebar-foreground/70
   transition-colors duration-150 hover:bg-sidebar-foreground/10 active:scale-[0.97] gap-3 px-3` · ativo
   `bg-sidebar-foreground/[0.16]`. O icone e `currentColor`: no STChat o ATIVO se marca pelo FUNDO, e o
   ouro que a casca de 07/09 pintava nele e o unico ouro que NAO existe no CRM. */
.sh-nav-item {
  display: flex; align-items: center; gap: var(--sh-12);
  width: 100%; min-height: 3rem; padding: 0 var(--sh-12);
  border: 0; border-radius: var(--raio-cartao);
  background: transparent; color: color-mix(in srgb, var(--booot-cinza-900) 70%, transparent);
  font-size: .875rem; font-weight: var(--fw-medium); text-align: left; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: var(--sh-transicao);
}
.sh-nav-item > span:not([class]) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-nav-item:hover { background: color-mix(in srgb, var(--booot-cinza-900) 10%, transparent); color: var(--booot-cinza-900); }
.sh-nav-item:active { transform: scale(.97); }
.sh-nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--booot-cinza-900) 16%, transparent);
  color: var(--booot-cinza-900); font-weight: var(--fw-semibold);
}
.sh-nav-item[aria-current="page"]:hover { background: color-mix(in srgb, var(--booot-cinza-900) 22%, transparent); }
.sh-nav-item .sh-icone { width: 1.25rem; height: 1.25rem; color: currentColor; }

.sh-side-rodape {
  display: grid; gap: 1px; align-content: end;
  margin-top: auto; padding-top: var(--space-2);
  border-top: 1px solid var(--booot-cinza-300);
}

/* recolhido: so o icone (o rotulo some, o title do HTML fala) */
.sh-app[data-menu="recolhido"] .sh-org-nome,
.sh-app[data-menu="recolhido"] .sh-org-chevron,
.sh-app[data-menu="recolhido"] .sh-nav-item > span,
.sh-app[data-menu="recolhido"] .sh-nav-item > small { display: none; }
.sh-app[data-menu="recolhido"] .sh-nav-item,
.sh-app[data-menu="recolhido"] .sh-org { justify-content: center; padding-inline: 0; }
.sh-app[data-menu="recolhido"] .sh-recolher .sh-icone { transform: scaleX(-1); }

/* ── 2.2 · a barra superior FIXA, da MESMA cor do painel lateral (ordem do dono, 07/09) ── */
.sh-top {
  position: fixed; z-index: var(--z-sticky); top: 0; right: 0; left: var(--sh-menu);
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--sh-topo); padding: 0 var(--space-3);
  background: var(--booot-cinza-000);
  color: var(--booot-cinza-900);
  border-bottom: 1px solid var(--booot-cinza-300);
  transition: left var(--motion-fast) var(--ease-standard);
}
.sh-top-titulo {
  flex: 0 0 auto;
  font-size: .9375rem; font-weight: var(--fw-semibold); letter-spacing: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-top-acoes { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; position: relative; }

/* icone da direita: `h-8 w-8 rounded-full ... hover:bg-white/15` no fornecedor (o botao REDONDO de 2rem
   com o icone de 1.25rem dentro), nunca um quadrado de raio 10. */
.sh-top-botao {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: var(--raio-pill);
  background: transparent; color: var(--booot-cinza-700);
  cursor: pointer;
  transition: var(--sh-transicao);
}
.sh-top-botao:hover { background: color-mix(in srgb, var(--booot-cinza-900) 15%, transparent); color: var(--booot-cinza-900); }
.sh-top-botao:active { transform: scale(.97); }
.sh-top-botao .sh-icone { width: 1.25rem; height: 1.25rem; }
/* o botao da gaveta so existe no celular. Ele carrega as DUAS classes e a especificidade e a mesma, entao
   quem vem depois no arquivo ganha: esta linha PRECISA ficar abaixo de `.sh-top-botao` (antes dela, o
   hamburguer aparecia em 1280 · visto na foto da bancada em 07/09). */
.sh-top-menu { display: none; }

.sh-avatar {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; margin-left: var(--space-1);
  border: 0; border-radius: var(--raio-pill);
  background: var(--booot-cinza-400); color: var(--booot-cinza-900);
  font-size: .75rem; font-weight: var(--fw-semibold); text-transform: uppercase;
  cursor: pointer;
  transition: var(--sh-transicao);
}
/* o fornecedor faz `hover:opacity-90`; aqui o hover troca o FUNDO, porque a regua de hover da bancada le
   cor/fundo/borda/sombra e NAO le opacity: mesma leitura na tela, e medivel. */
.sh-avatar:hover { background: var(--booot-cinza-500); }
.sh-avatar:active { transform: scale(.97); }

/* abas em pilula, dentro da barra (Tutoriais · Treinamentos · Gravacoes) */
.sh-abas { display: flex; align-items: center; gap: var(--space-1); min-width: 0; overflow: auto hidden; }
.sh-abas:empty { display: none; }
/* a pagina entrega as abas dentro de um [role=tablist] (o padrao WAI-ARIA); a caixa e a mesma */
.sh-abas > [role="tablist"] { display: flex; align-items: center; gap: var(--space-1); }
/* a aba: `rounded-full px-3 py-1 text-xs font-medium ... opacity-70 hover:bg-white/10` · ativa
   `bg-white/20 opacity-100 shadow-sm` (a classe do fornecedor, verbatim) */
.sh-aba {
  display: inline-flex; align-items: center;
  min-height: 1.5rem; padding: 0 var(--sh-12);
  border: 0; border-radius: var(--raio-pill);
  background: transparent; color: color-mix(in srgb, var(--booot-cinza-900) 70%, transparent);
  font-size: .75rem; font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: var(--sh-transicao);
}
.sh-aba:hover { background: color-mix(in srgb, var(--booot-cinza-900) 10%, transparent); color: var(--booot-cinza-900); }
.sh-aba:active { transform: scale(.97); }
.sh-aba[aria-selected="true"], .sh-aba[aria-current="page"] {
  background: color-mix(in srgb, var(--booot-cinza-900) 20%, transparent);
  color: var(--booot-cinza-900); font-weight: var(--fw-medium);
  box-shadow: var(--sombra-cartao);
}
.sh-aba[aria-selected="true"]:hover, .sh-aba[aria-current="page"]:hover {
  background: color-mix(in srgb, var(--booot-cinza-900) 26%, transparent);
}

/* foco dentro do grafite: `focus-visible:ring-2 ring-sidebar-foreground/30` no fornecedor. Aqui o mesmo
   branco em 55%: os 30% dele medem 2,45:1 e reprovam o piso 3:1 de nao-texto (DESIGN.md §11). */
.sh-side :focus-visible, .sh-top :focus-visible {
  outline: medium solid var(--sh-anel-grafite); outline-offset: var(--focus-offset);
}

/* ── 2.3 · o conteudo ── */
.sh-main {
  margin-left: var(--sh-menu);
  padding-top: var(--sh-topo);
  min-height: 100vh;
  background: var(--pagina);
  transition: margin-left var(--motion-fast) var(--ease-standard);
}
.sh-pagina {
  max-width: 75rem; margin-inline: auto;
  padding: var(--space-4) var(--space-4) var(--space-7);
  display: grid; gap: var(--space-3); align-content: start;
}

/* o veu da gaveta. O z-index e o do MENU ABERTO menos 1, nunca o da barra menos 1: com `--z-sticky - 1`
   ele ficava ABAIXO da barra (49 contra 50) e a barra seguia acesa e CLICAVEL por cima dele com a gaveta
   aberta (medido: `elementFromPoint` no canto direito devolvia o avatar). Veu que nao cobre e sombra. */
.sh-veu {
  position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1);
  background: var(--veu-foto);
  border: 0;
}

/* ═══ 3 · MENU FLUTUANTE (conta · unidades) ═════════════════════════════════════════════════════════ */

/* `rounded-xl p-2 border bg-popover shadow-md`, e a ABERTURA e `animate-in fade-in-0 zoom-in-95
   slide-in-from-top-2` em 150 ms `ease-out`: nunca aparece seco. */
.sh-menu {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-1)); right: 0;
  min-width: 13rem; padding: var(--space-2);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
  background: var(--flutuante); color: var(--texto);
  box-shadow: var(--sombra-flutuante);
  display: grid; gap: 1px;
  transform-origin: top right;
  animation: sh-entrar var(--sh-dur) var(--sh-ease-saida);
}
.sh-side > .sh-menu { top: 3.25rem; right: var(--space-2); left: var(--space-2); transform-origin: top center; }
.sh-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 2rem; padding: 0 var(--space-2);
  border: 0; border-radius: var(--raio-controle);
  background: transparent; color: inherit;
  font-size: .875rem; text-align: left; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: var(--sh-transicao);
}
/* `hover:bg-accent`, aqui como lavagem do proprio texto e nao `--superficie-2`: o flutuante do tema
   ESCURO e mais claro que a superficie-2 da Plataforma e o hover iria pro lado errado (medido). */
.sh-menu-item:hover { background: color-mix(in srgb, var(--texto) 7%, transparent); }
.sh-menu-item:active { transform: scale(.97); }
.sh-menu-item .sh-icone { color: var(--texto-3); }

/* ═══ 4 · CARTAO ════════════════════════════════════════════════════════════════════════════════════ */

.sh-card {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-3);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}
.sh-card-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
}
.sh-card-acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sh-stack { display: grid; gap: var(--space-2); }
.sh-grade { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.sh-titulo {
  font-family: var(--fonte-texto);
  font-size: .9375rem; font-weight: var(--fw-semibold); line-height: 1.35; letter-spacing: normal;
}
.sh-titulo--tela { font-size: 1.125rem; }
.sh-rotulo {
  font-size: .6875rem; font-weight: var(--fw-semibold); line-height: 1.4;
  letter-spacing: var(--letra-caps); text-transform: uppercase; color: var(--texto-2);
}
.sh-texto { font-size: .875rem; line-height: 1.45; color: var(--texto); }
.sh-texto--forte { font-weight: var(--fw-semibold); }
.sh-apoio { font-size: .8125rem; line-height: 1.4; color: var(--texto-2); }
/* o 3o degrau de texto so le a partir de 16px (o tokens.css declara a medida ao lado do token); em 12px
   o micro usa o 2o degrau, senao a linha de rodape sai em 4,48:1 (medido na bancada em 07/09) */
.sh-micro { font-size: .75rem; line-height: 1.35; color: var(--texto-2); }

/* ═══ 5 · KPI (o numero que o dono le de relance) ═══════════════════════════════════════════════════ */

.sh-kpi { display: grid; gap: var(--space-1); align-content: start; }
.sh-kpi-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sh-kpi-cabeca .sh-icone { color: var(--texto-3); }
/* `text-2xl font-bold tabular-nums leading-none` = 1.5rem/700/1. Numero de produto NAO e manchete: a aba
   Acelerar abria com "500" em 52px, e foi isso que o dono chamou de Word. O HEROI (um por tela) vai a 2rem. */
.sh-kpi-numero {
  font-size: 1.5rem; font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: var(--letra-titulo);
}
.sh-kpi-numero--heroi { font-size: 2rem; }
.sh-kpi-numero b { font-weight: inherit; }
.sh-kpi-apoio { font-size: .75rem; color: var(--texto-2); }
.sh-kpi-numero[data-valencia="bom"] { color: var(--sucesso-texto); }
.sh-kpi-numero[data-valencia="ruim"] { color: var(--erro-texto); }

/* ═══ 6 · PILL (estado sempre com ponto, nunca so cor) ══════════════════════════════════════════════ */

/* 11px/500, sem CAIXA ALTA (DESIGN.md §7). O PONTO nao e decoracao: so aparece em ESTADO VIVO (No ar ·
   Conectado · Desativada). Pill sem estado nasce sem ponto: era o anti-padrao que a §7 lista. */
.sh-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 1.5rem; padding: 0 var(--sh-12);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pill);
  background: var(--pagina); color: var(--texto-2);
  font-size: .6875rem; font-weight: var(--fw-medium); white-space: nowrap;
}
.sh-pill--sucesso::before, .sh-pill--atencao::before, .sh-pill--erro::before, .sh-pill--vivo::before {
  content: ""; width: .375rem; height: .375rem; border-radius: var(--raio-pill);
  background: currentColor; flex: 0 0 auto;
}
.sh-pill--sucesso { color: var(--sucesso-texto); border-color: color-mix(in srgb, var(--booot-sucesso) 40%, transparent); }
.sh-pill--atencao { color: var(--acento-texto); border-color: color-mix(in srgb, var(--booot-ouro-600) 40%, transparent); }
.sh-pill--erro { color: var(--erro-texto); border-color: color-mix(in srgb, var(--booot-erro) 40%, transparent); }
/* o selo do plano: o UNICO ouro do painel lateral junto com o simbolo (nunca em botao). No CONTEUDO ele
   segue o acento do tema (couro no claro: ouro cru sobre branco mede 2,47:1 e reprova); dentro do painel
   lateral e da barra, que sao sempre grafite, ele volta pro ouro-600 em primitivo. */
.sh-pill--plano {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: transparent; color: var(--acento-texto);
  min-height: 1.25rem; padding: 0 var(--space-1); font-size: .6875rem;
}
.sh-side .sh-pill--plano { border-color: color-mix(in srgb, var(--booot-ouro-600) 45%, transparent); color: var(--booot-ouro-600); }

/* ═══ 7 · BOTAO (as DUAS formas do fornecedor, medidas na marcacao dele) ════════════════════════════ */

/* ⚠️ ACHADO (HANDOFF-F §3.1): o STChat tem DUAS formas de botao, e so UMA e pilula.
     primario   -> `bg-primary hover:bg-primary/90 h-9 rounded-md px-3 text-sm font-medium` · NAO e pilula
     secundario -> `border border-input h-8 rounded-full px-3 text-xs font-medium`          · E pilula
   Fonte: a marcacao salva do fornecedor + `.rounded-md{calc(var(--radius) - 2px)}` com `--radius:.5rem`.
   As 2 fotos do dono confirmam. Pilular o primario AFASTARIA o app do CRM no botao mais visivel da tela. */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2rem; padding: 0 var(--sh-12);
  border: 1px solid transparent; border-radius: var(--raio-pill);
  background: transparent; color: var(--texto);
  font-size: .75rem; font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: var(--sh-transicao);
}
/* `disabled:opacity-50 disabled:pointer-events-none` · nunca troca de cor (DESIGN.md §7) */
.sh-btn:disabled, .sh-btn[aria-disabled="true"] { opacity: var(--desabilitado); cursor: not-allowed; pointer-events: none; }
.sh-btn:active:not(:disabled) { transform: scale(.97); }
.sh-btn .sh-icone { width: .9375rem; height: .9375rem; }

.sh-btn--primario {
  min-height: 2.25rem; padding: 0 var(--space-3);
  border-radius: var(--raio-controle);
  background: var(--cta-fundo); color: var(--cta-texto);
  font-size: .875rem;
  box-shadow: var(--sombra-cartao);
}
/* o fornecedor faz `bg-primary/90`. Aqui o hover ESCURECE em vez de lavar com alfa: sobre um cartao branco
   o `/90` compoe em 4,19:1 com o texto branco por cima e cai abaixo do piso 4,5 (medido). Escurecer da a
   mesma leitura e sobe pra 6,3:1. */
.sh-btn--primario:hover:not(:disabled) { background: color-mix(in srgb, var(--cta-fundo) 88%, var(--booot-cinza-000)); }
.sh-btn--primario:active:not(:disabled) { background: var(--cta-press); }
.sh-btn--secundario { background: var(--superficie); border-color: var(--borda-forte); color: var(--texto); }
/* ⚠️ o hover NAO pode ser `--superficie-2`: no claro ele e branco puro, igual a `--superficie`, e o botao
   ficava sem NENHUMA mudanca sobre um cartao (medido). A lavagem do texto muda nos dois temas. */
.sh-btn--secundario:hover:not(:disabled) { background: color-mix(in srgb, var(--texto) 6%, transparent); border-color: var(--texto-3); }
.sh-btn--fantasma { color: var(--texto-2); }
.sh-btn--fantasma:hover:not(:disabled) { background: color-mix(in srgb, var(--texto) 7%, transparent); color: var(--texto); }
.sh-btn--perigo { color: var(--erro-texto); border-color: color-mix(in srgb, var(--booot-erro) 35%, transparent); }
.sh-btn--largo { width: 100%; }

/* o botao SO-ICONE do CONTEUDO (o "X" do popup): 2rem redondo, sem caixa nem borda. Irmao de
   `.sh-top-botao`, que so serve DENTRO do grafite (o hover dele e branco a 15%, invisivel num modal). */
.sh-icone-btn {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 2rem; height: 2rem;
  border: 0; border-radius: var(--raio-pill);
  background: transparent; color: var(--texto-2);
  cursor: pointer;
  transition: var(--sh-transicao);
}
.sh-icone-btn:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); color: var(--texto); }
.sh-icone-btn:active { transform: scale(.97); }
.sh-icone-btn .sh-icone { width: 1.125rem; height: 1.125rem; }

/* ═══ 8 · CAMPO ═════════════════════════════════════════════════════════════════════════════════════ */

/* `h-10 rounded-md border border-input bg-background px-3 text-sm` no fornecedor: campo e RETANGULO. A
   PILULA e da BUSCA, o unico campo redondo do CRM. Foco = `border-primary` + `ring-1` por box-shadow. */
.sh-campo {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 2.25rem; padding: 0 var(--sh-12);
  border: 1px solid var(--campo-borda); border-radius: var(--raio-controle);
  background: var(--campo-fundo); color: var(--texto);
  font-size: .875rem;
  transition: var(--sh-transicao);
}
.sh-campo:hover { border-color: var(--borda-forte); }
.sh-campo:focus-within { border-color: var(--campo-borda-foco); box-shadow: 0 0 0 1px var(--campo-borda-foco); }
.sh-campo--busca { border-radius: var(--raio-pill); }
.sh-campo[data-erro="sim"] { border-color: var(--booot-erro); }
.sh-campo[data-erro="sim"]:focus-within { box-shadow: 0 0 0 1px var(--booot-erro); }
.sh-campo .sh-icone { color: var(--texto-3); }
/* o campo inteiro e o alvo: sem o `align-self: stretch` o <input> fica com a altura NATURAL do texto (21px
   medidos) dentro de uma caixa de 36, e so a faixa do meio recebe o clique. */
.sh-campo input, .sh-campo select {
  flex: 1; min-width: 0; align-self: stretch; border: 0; background: transparent; color: inherit; font: inherit;
}
.sh-campo input:focus-visible { outline: none; }
.sh-campo input::placeholder { color: var(--texto-3); }

/* ═══ 9 · LISTA (linha de 3rem com divisor) ═════════════════════════════════════════════════════════ */

.sh-lista { display: grid; }
.sh-linha {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 3rem; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--borda);
  font-size: .875rem;
}
.sh-lista > :last-child.sh-linha, .sh-lista > :last-child > .sh-linha { border-bottom: 0; }
/* so a linha CLICAVEL reage (cartao estatico nao levanta · DESIGN.md §7 e a regra do CRM) */
a.sh-linha, button.sh-linha { transition: var(--sh-transicao); cursor: pointer; }
a.sh-linha:hover, button.sh-linha:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.sh-linha-corpo { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sh-linha-corpo b { font-weight: var(--fw-semibold); }
.sh-linha-corpo span {
  display: block; color: var(--texto-2); font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══ 10 · VAZIO · ERRO · ESQUELETO (os estados que nao sao "pronto") ═══════════════════════════════ */

/* o vazio ENSINA (regra 4 do fluxo do CRM: icone em circulo de 4rem + titulo + frase + acao). Com
   `.sh-vazio-ico` entra o icone de verdade; sem ele, o ::before desenha o circulo, nunca um vazio pelado. */
.sh-vazio {
  display: grid; justify-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-3); text-align: center;
}
.sh-vazio:not(:has(.sh-vazio-ico))::before {
  content: ""; width: 4rem; height: 4rem; border-radius: var(--raio-pill);
  background: var(--superficie-2); border: 1px solid var(--borda);
}
.sh-vazio-ico {
  display: grid; place-items: center; width: 4rem; height: 4rem;
  border-radius: var(--raio-pill); border: 1px solid var(--borda);
  background: var(--superficie-2); color: var(--texto-2);
}
.sh-vazio-ico .sh-icone { width: 1.5rem; height: 1.5rem; }
.sh-vazio > :where(p, h2, h3):first-of-type { font-size: .9375rem; font-weight: var(--fw-semibold); color: var(--texto); }
.sh-vazio > p { font-size: .8125rem; color: var(--texto-2); max-width: 34ch; }

.sh-erro {
  display: grid; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--raio-controle);
  border: 1px solid color-mix(in srgb, var(--booot-erro) 35%, transparent);
  background: color-mix(in srgb, var(--booot-erro) 8%, transparent);
}
.sh-erro-cabeca { display: flex; align-items: center; gap: var(--space-2); color: var(--erro-texto); }

/* `animate-pulse` do fornecedor, exato. Saiu o brilho que corria de lado: era invencao da casa, e o fundo
   em gradiente ainda cegava a regua de contraste da bancada. */
.sh-esqueleto-grupo { display: grid; gap: var(--space-2); }
.sh-esqueleto {
  display: block; height: .75rem; border-radius: var(--raio-controle);
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  animation: sh-pulsar 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.sh-esqueleto--titulo { height: 1.125rem; width: 40%; }
.sh-esqueleto--linha { width: 100%; }
.sh-esqueleto--linha-curta { width: 60%; }
.sh-esqueleto--cartao { height: 4rem; width: 100%; }

/* ═══ 11 · BARRA DE PROGRESSO · VIDEO ══════════════════════════════════════════════════════════════ */

.sh-barra {
  position: relative; height: .375rem; border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--texto) 10%, transparent); overflow: hidden;
}
/* PROGRESSO E NEUTRO, nunca semaforo (DESIGN.md §4; no CRM a barra usa a primaria): uma barra verde diz
   "deu certo" onde o dado so diz "3 de 6". */
.sh-barra > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--pct, 0) * 1%); border-radius: inherit;
  background: var(--cta-fundo);
}
.sh-video {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  background: var(--superficie-2); overflow: hidden;
}
.sh-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ 12 · BARRA FIXA DE SALVAR ("Alteracoes nao salvas · Salvar", como no STChat) ══════════════════ */

.sh-barra-fixa {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-cartao);
  background: var(--flutuante); color: var(--texto);
  box-shadow: var(--sombra-flutuante);
  font-size: .8125rem;
}

/* ═══ 13 · DIALOG NATIVO (a ajuda e todo tutorial · NUNCA outra pagina · ordem do dono 07/09) ═══════ */

/* o modal do CRM: raio 16 (aqui `--raio-cartao`; DESIGN.md §5 pedia o flutuante de 20 e a fidelidade
   vence, declarada), `shadow-lg`, veu a 60%, abertura em 150 ms `ease-out` (veu `fade-in-0`, painel
   `fade-in-0 zoom-in-95 slide-in-from-top-2`). */
dialog.sh-modal {
  width: min(40rem, 100% - var(--space-4));
  max-height: min(85vh, 48rem);
  padding: 0; margin: auto;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-cartao);
  background: var(--flutuante); color: var(--texto);
  box-shadow: var(--sh-sombra-modal);
  overflow: hidden;
}
dialog.sh-modal::backdrop { background: color-mix(in srgb, var(--booot-cinza-000) 60%, transparent); }
dialog.sh-modal[open]::backdrop { animation: sh-aparecer var(--sh-dur) var(--sh-ease-saida); }
dialog.sh-modal[open] {
  display: grid; grid-template-rows: auto 1fr;
  animation: sh-entrar var(--sh-dur) var(--sh-ease-saida);
}
.sh-modal-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border-bottom: 1px solid var(--borda);
}
.sh-modal-corpo { padding: var(--space-3); overflow: auto; display: grid; gap: var(--space-3); align-content: start; }
/* ⚪ o rodape do CRM ("Cancelar" fantasma + primario a direita) NAO foi construido: nenhum popup do app
   tem acao hoje (o `.sh-modal` so serve ajuda e tutorial; os modais COM acao do Painel sao os dele). Nasce
   quando o 1o consumidor existir; caixa vazia esperando uso e o que a 5-PASSOS manda deletar. */
.sh-modal-corpo p { font-size: .875rem; color: var(--texto-2); }
.sh-modal-corpo ol { display: grid; gap: var(--space-2); counter-reset: sh-passo; }
.sh-modal-corpo ol > li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: baseline;
  font-size: .875rem;
}
.sh-modal-corpo ol > li::before {
  counter-increment: sh-passo; content: counter(sh-passo);
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border-radius: var(--raio-pill); background: var(--superficie-2); color: var(--texto-2);
  font-size: .6875rem; font-weight: var(--fw-semibold);
}

/* ═══ 14 · TOAST ════════════════════════════════════════════════════════════════════════════════════ */

.sh-toast {
  position: fixed; z-index: var(--z-toast); bottom: var(--space-4);
  inset-inline: 0; margin-inline: auto; width: fit-content;
  max-width: calc(100% - var(--space-4));
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pill);
  background: var(--flutuante); color: var(--texto);
  box-shadow: var(--sombra-flutuante);
  font-size: .8125rem;
}
.sh-toast > span { min-width: 0; }
.sh-toast[data-estado="erro"] { border-color: color-mix(in srgb, var(--booot-erro) 45%, transparent); }

/* ═══ 15 · MAQUINA DE ESTADOS (o kernel troca [data-estado]; a folha so esconde quem nao casa) ═════ */

/* SO ESCONDE quem nao casa, e nunca DECLARA display em quem casa: `display: revert` apagaria o `grid`/`flex`
   que a folha deu ao filho (uma `.sh-lista` viraria bloco). O kernel repete a regra por `hidden`, pro estado
   que esta folha nao enumera. */
[data-estado="pronto"] > [data-quando]:not([data-quando~="pronto"]),
[data-estado="vazio"] > [data-quando]:not([data-quando~="vazio"]),
[data-estado="carregando"] > [data-quando]:not([data-quando~="carregando"]),
[data-estado="erro"] > [data-quando]:not([data-quando~="erro"]),
[data-estado="sem_fonte"] > [data-quando]:not([data-quando~="sem_fonte"]),
[data-estado="sem_medida"] > [data-quando]:not([data-quando~="sem_medida"]),
[data-estado="ativo"] > [data-quando]:not([data-quando~="ativo"]) { display: none; }

/* ═══ 16 · CELULAR E TABLET ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .sh-side { transform: translateX(-100%); box-shadow: var(--sombra-flutuante); }
  /* a gaveta cobre a barra: com o mesmo z-index, a barra (que vem depois no documento) pintava por cima e
     comia o trocador de conta do topo do menu (visto na foto da bancada em 07/09). */
  .sh-app[data-menu="gaveta"] .sh-side { transform: none; z-index: var(--z-dropdown); }
  .sh-recolher { display: none; }
  .sh-app[data-menu="recolhido"] { --sh-menu: 15rem; }
  .sh-top { left: 0; }
  .sh-top-menu { display: inline-grid; }
  .sh-main { margin-left: 0; }
  .sh-pagina { padding: var(--space-3) var(--space-3) var(--space-6); }
}
@media (min-width: 901px) {
  .sh-veu { display: none; }
}

@media (max-width: 640px) {
  /* as abas ganham a PROPRIA faixa embaixo do titulo: espremidas na mesma linha das 3 acoes, so a primeira
     aparecia e as outras duas rolavam pra fora sem nenhuma pista (visto na foto da bancada em 07/09).
     A altura da barra e um token proprio, entao o `padding-top` do conteudo acompanha sozinho. */
  .sh-app { --sh-topo: 6rem; }
  .sh-top { flex-wrap: wrap; align-content: center; row-gap: var(--space-1); }
  .sh-top-titulo { flex: 1; font-size: .875rem; }
  .sh-abas { order: 3; flex-basis: 100%; }
  .sh-btn, .sh-icone-btn { min-height: 44px; }
  .sh-top-botao, .sh-avatar { width: 44px; height: 44px; }
  .sh-icone-btn { width: 44px; }
  .sh-aba { min-height: 2.25rem; padding-inline: var(--space-3); }
  .sh-campo, .sh-campo input, .sh-menu-item { min-height: 44px; }
  .sh-card { padding: var(--space-3) var(--space-2); }
  /* o dialog vira folha de baixo (o padrao de bottom sheet do celular · `slide-in-from-bottom` no CRM) */
  dialog.sh-modal {
    width: 100%; max-width: 100%; max-height: 88vh;
    margin: auto auto 0;
    border-radius: var(--raio-cartao) var(--raio-cartao) 0 0;
    border-bottom: 0;
  }
  dialog.sh-modal[open] { animation: sh-subir var(--sh-dur) var(--sh-ease-saida); }
}

/* o dedo tambem manda em tela SEM ponteiro fino (tablet, celular deitado): o alvo minimo de 44 nao pode
   depender so da largura (DESIGN.md §10) */
@media (hover: none) and (pointer: coarse) {
  .sh-btn, .sh-icone-btn, .sh-top-botao, .sh-avatar, .sh-menu-item, .sh-nav-item { min-height: 44px; }
  .sh-icone-btn, .sh-top-botao, .sh-avatar { min-width: 44px; }
}

/* ═══ 17 · O CATALOGO (a prova visual · /catalogo · os 2 temas lado a lado) ════════════════════════ */

.sh-demo { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.sh-demo > div {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-3);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-cartao);
  background: var(--pagina); color: var(--texto);
}
.sh-demo-rotulo {
  font-size: .6875rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--letra-caps); text-transform: uppercase; color: var(--texto-2);
}
.sh-demo-linha { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ═══ 18 · MOVIMENTO (os 4 quadros do fornecedor · nada aqui e invencao) ═══════════════════════════ */

/* `@keyframes enter` = opacidade 0 -> 1 + `scale3d(.95)` + `translateY(-.5rem)` · `slide-in-from-bottom`
   na folha do celular · `fade-in-0` no veu · `pulse` no carregando. */
@keyframes sh-entrar { from { opacity: 0; transform: translateY(-.5rem) scale(.95); } }
@keyframes sh-subir { from { opacity: 0; transform: translateY(100%); } }
@keyframes sh-aparecer { from { opacity: 0; } }
@keyframes sh-pulsar { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms; animation-iteration-count: 1;
    transition-duration: .01ms; scroll-behavior: auto;
  }
  /* quem afunda no clique nao afunda: `transform` sem transicao continuaria pulando de uma vez */
  .sh-btn:active, .sh-icone-btn:active, .sh-nav-item:active, .sh-aba:active,
  .sh-menu-item:active, .sh-org:active, .sh-top-botao:active, .sh-avatar:active { transform: none; }
}