/* Gerado por build/build.mjs a partir de tokens/gruppy.tokens.json. Nao edite. */
/* Design System da Gruppy v4.0.0 */

/* Gerado por build/build.mjs a partir de tokens/gruppy.tokens.json. Nao edite. */

:root {

  /* cor */
  --g-indigo-50: #F5F6FE;
  --g-indigo-100: #E9ECFB;
  --g-indigo-200: #D5DBF6;
  --g-indigo-300: #BAC1EC;
  --g-indigo-400: #98A2DC;
  --g-indigo-500: #7983C8;
  --g-indigo-600: #5E67B0;  /* passa no branco e reprova sobre fundo tingido. Para texto em indigo use o 700. */
  --g-indigo-700: #454B92;
  --g-indigo-800: #272A62;
  --g-indigo-900: #191C4A;
  --g-indigo-950: #11102F;
  --g-lilas-50: #F8F7FF;
  --g-lilas-100: #F0EDFF;
  --g-lilas-200: #E1DCFF;
  --g-lilas-300: #CEC5FE;
  --g-lilas-400: #B1A9FC;
  --g-lilas-500: #9694FE;
  --g-lilas-600: #7B76EE;
  --g-lilas-700: #645ECC;  /* passa no branco e reprova sobre fundo tingido. Para texto em lilas use o 800. */
  --g-lilas-800: #4E48A5;
  --g-lilas-900: #39347E;
  --g-lilas-950: #211E4E;
  --g-lima-50: #F8FCE7;
  --g-lima-100: #EFF7CE;
  --g-lima-200: #E6F1B9;
  --g-lima-300: #DBEAA5;
  --g-lima-400: #C2D57D;
  --g-lima-500: #A7BD58;
  --g-lima-600: #8AA13E;
  --g-lima-700: #6D8130;  /* reprova como texto nos dois fundos. Preenchimento e borda apenas; para texto em lima use o 800. */
  --g-lima-800: #556624;
  --g-lima-900: #414E1B;
  --g-lima-950: #262E0C;
  --g-neutro-0: #FFFFFF;
  --g-neutro-50: #F9F9F9;
  --g-neutro-100: #ECECF1;
  --g-neutro-200: #E6E6F0;
  --g-neutro-300: #D2D2E1;
  --g-neutro-400: #9D9CAF;  /* 2,69:1 no branco. Nunca para texto que carregue informacao. Placeholder, divisoria e icone decorativo apenas. */
  --g-neutro-500: #6E6892;  /* passa no branco e reprova sobre fundo tingido. Texto secundario usa o 600. */
  --g-neutro-600: #555370;
  --g-neutro-700: #3D3D54;
  --g-neutro-800: #2B2C3F;
  --g-neutro-900: #1C1C2C;
  --g-neutro-950: #0F0F1C;
  --g-sucesso-ink: #067647;
  --g-sucesso: #067647;
  --g-sucesso-bg: #ECFDF5;
  --g-sucesso-borda: #DCFCE7;
  --g-perigo-ink: #B91C1C;
  --g-perigo: #DC2626;  /* preenchimento. Para texto use o ink. */
  --g-perigo-bg: #FEF2F2;
  --g-perigo-borda: #FEE2E2;
  --g-atencao-ink: #93370D;
  --g-atencao: #B54708;  /* preenchimento. Para texto use o ink. */
  --g-atencao-bg: #FFFBEB;
  --g-atencao-borda: #FEF3C7;
  --g-info-ink: #1D4ED8;
  --g-info: #2563EB;  /* preenchimento. Para texto use o ink. */
  --g-info-bg: #EFF6FF;
  --g-info-borda: #DBEAFE;
  --g-esquema-papel-fundo: #FFFFFF;
  --g-esquema-papel-texto: #191C4A;
  --g-esquema-papel-suave: #555370;
  --g-esquema-papel-borda: rgba(25, 28, 74, 0.14);
  --g-esquema-papel-selecionado: #F0EDFF;
  --g-esquema-papel-selecionado-texto: #191C4A;
  --g-esquema-lilas-suave-fundo: #F0EDFF;
  --g-esquema-lilas-suave-texto: #191C4A;
  --g-esquema-lilas-suave-suave: #4E48A5;
  --g-esquema-lilas-suave-borda: rgba(25, 28, 74, 0.18);
  --g-esquema-lilas-suave-selecionado: #FFFFFF;
  --g-esquema-lilas-suave-selecionado-texto: #191C4A;
  --g-esquema-lilas-fundo: #CEC5FE;
  --g-esquema-lilas-texto: #191C4A;
  --g-esquema-lilas-suave: #39347E;
  --g-esquema-lilas-borda: rgba(25, 28, 74, 0.22);
  --g-esquema-lilas-selecionado: #FFFFFF;
  --g-esquema-lilas-selecionado-texto: #191C4A;
  --g-esquema-indigo-fundo: #191C4A;
  --g-esquema-indigo-texto: #F5F6FE;
  --g-esquema-indigo-suave: #D5DBF6;
  --g-esquema-indigo-borda: rgba(206, 197, 254, 0.26);
  --g-esquema-indigo-selecionado: #CEC5FE;
  --g-esquema-indigo-selecionado-texto: #191C4A;
  --g-primaria: #191C4A;
  --g-primaria-hover: #272A62;
  --g-primaria-sobre: #FFFFFF;
  --g-primaria-ink: #4E48A5;
  --g-primaria-suave: #F8F7FF;
  --g-secundaria: #556624;
  --g-terciaria: #454B92;
  --g-acento: #CEC5FE;
  --g-acento-ink: #191C4A;
  --g-destaque: #DBEAA5;
  --g-destaque-ink: #191C4A;
  --g-fundo: #F9F9F9;
  --g-superficie: #FFFFFF;
  --g-superficie-alt: #ECECF1;
  --g-borda: #E6E6F0;
  --g-borda-forte: #D2D2E1;
  --g-titulo: #1C1C2C;
  --g-texto: #3D3D54;
  --g-texto-suave: #555370;
  --g-texto-tenue: #9D9CAF;  /* decorativo, nunca informativo, nos dois temas */
  --g-veu: rgba(17, 16, 47, 0.55);
  --g-veu-leve: rgba(17, 16, 47, 0.10);
  --g-sobre-preenchimento: #FFFFFF;
  --g-postit: #FFFDF7;
  --g-fita: rgba(255, 255, 255, 0.60);

  /* tipografia */
  --g-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --g-font-marca: 'Parkinsans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --g-font-marca-texto: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --g-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --g-fs-3xs: 0.625rem;  /* rotulo micro em caixa alta */
  --g-fs-2xs: 0.6875rem;  /* meta, legenda, unidade */
  --g-fs-xs: 0.75rem;  /* corpo denso, celula de tabela */
  --g-fs-sm: 0.8125rem;  /* corpo em tela densa */
  --g-fs-md: 0.875rem;  /* corpo padrao */
  --g-fs-lg: 1rem;  /* titulo de secao */
  --g-fs-xl: 1.375rem;  /* valor de KPI */
  --g-fs-2xl: 1.75rem;  /* numero heroi, um por tela */
  --g-fs-3xl: 2.25rem;  /* titulo de capa ou landing */
  --g-fw-normal: 400;
  --g-fw-medio: 500;
  --g-fw-semi: 600;
  --g-fw-forte: 700;
  --g-lh-justa: 1.2;
  --g-lh-base: 1.45;
  --g-lh-solta: 1.6;
  --g-ls-caps: 0.06em;
  --g-ls-justo: -0.01em;

  /* espaco */
  --g-sp-1: 0.25rem;
  --g-sp-2: 0.5rem;
  --g-sp-3: 0.75rem;
  --g-sp-4: 1rem;
  --g-sp-5: 1.25rem;
  --g-sp-6: 1.5rem;
  --g-sp-8: 2rem;
  --g-sp-10: 2.5rem;
  --g-sp-12: 3rem;
  --g-sp-05: 0.125rem;

  /* forma */
  --g-radius-sm: 4px;
  --g-radius: 6px;
  --g-radius-md: 10px;
  --g-radius-lg: 14px;
  --g-radius-pill: 999px;

  /* elevacao */
  --g-shadow-sm: 0 1px 2px rgba(17, 16, 47, 0.05);
  --g-shadow: 0 1px 3px rgba(17, 16, 47, 0.10), 0 1px 2px rgba(17, 16, 47, 0.06);
  --g-shadow-md: 0 8px 24px rgba(17, 16, 47, 0.12);
  --g-shadow-lg: 0 20px 50px rgba(17, 16, 47, 0.22);
  --g-shadow-marca: 0 4px 14px rgba(123, 118, 238, 0.18);

  /* camada */
  --g-z-base: 1;
  --g-z-sticky: 100;
  --g-z-dropdown: 400;
  --g-z-overlay: 1000;
  --g-z-modal: 1050;
  --g-z-popover: 1100;
  --g-z-tooltip: 1200;
  --g-z-toast: 1300;

  /* layout */
  --g-tabela-altura: none;  /* altura maxima da regiao que rola da tabela. So a aplicacao sabe quanto de tela sobra; na tela de referencia e calc(100vh - 140px). Sem altura, a regiao cresce e o cabecalho grudento perde a funcao. */

  /* foco */
  --g-focus-ring: 0 0 0 3px rgba(123, 118, 238, 0.45);
  --g-focus-offset: 2px;

  /* movimento */
  --g-dur-rapido: 120ms;
  --g-dur-base: 200ms;
  --g-dur-lento: 320ms;
  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --g-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);  /* a mola do chip de reacao: passa do alvo e volta. So em elemento que a pessoa acabou de clicar, e nunca em movimento reduzido. */

  /* alias do weblinked, ver build/build.mjs */
  --g-purple-50: var(--g-lilas-50);
  --g-purple-100: var(--g-lilas-100);
  --g-purple-200: var(--g-lilas-200);
  --g-purple: var(--g-indigo-900);
  --g-purple-600: var(--g-indigo-800);
  --g-purple-700: var(--g-indigo-950);
  --g-blue: var(--g-indigo-700);
  --g-blue-600: var(--g-indigo-800);
  --g-pink: var(--g-lilas-600);
  --g-pink-50: var(--g-lilas-50);
  --g-slate-50: var(--g-neutro-50);
  --g-slate-100: var(--g-neutro-50);
  --g-slate-200: var(--g-neutro-200);
  --g-slate-300: var(--g-neutro-300);
  --g-slate-400: var(--g-neutro-400);
  --g-slate-500: var(--g-neutro-500);
  --g-slate-600: var(--g-neutro-500);
  --g-slate-700: var(--g-neutro-700);
  --g-slate-800: var(--g-neutro-800);
  --g-slate-900: var(--g-neutro-900);
  --g-ink: var(--g-titulo);
  --g-ink-2: var(--g-neutro-800);
  --g-text: var(--g-texto);
  --g-muted: var(--g-texto-suave);
  --g-muted-2: var(--g-texto-suave);
  --g-faint: var(--g-texto-tenue);
  --g-bg: var(--g-fundo);
  --g-surface: var(--g-superficie);
  --g-border: var(--g-borda);
  --g-border-strong: var(--g-borda-forte);
  --g-success-ink: var(--g-sucesso-ink);
  --g-success: var(--g-sucesso);
  --g-success-bg: var(--g-sucesso-bg);
  --g-success-100: var(--g-sucesso-borda);
  --g-danger-ink: var(--g-perigo-ink);
  --g-danger: var(--g-perigo);
  --g-danger-bg: var(--g-perigo-bg);
  --g-danger-100: var(--g-perigo-borda);
  --g-warning-ink: var(--g-atencao-ink);
  --g-warning: var(--g-atencao);
  --g-warning-bg: var(--g-atencao-bg);
  --g-warning-100: var(--g-atencao-borda);
  --g-info-50: var(--g-info-bg);
  --g-info-100: var(--g-info-borda);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --g-sucesso-ink: #6EE7B7;
    --g-sucesso-bg: #022C22;
    --g-sucesso-borda: #065F46;
    --g-perigo-ink: #FCA5A5;
    --g-perigo-bg: #450A0A;
    --g-perigo-borda: #7F1D1D;
    --g-atencao-ink: #FCD34D;
    --g-atencao-bg: #451A03;
    --g-atencao-borda: #78350F;
    --g-info-ink: #93C5FD;
    --g-info-bg: #172554;
    --g-info-borda: #1E3A8A;
    --g-esquema-papel-fundo: #1D2050;
    --g-esquema-papel-texto: #E9E7FA;
    --g-esquema-papel-suave: #A29DC8;
    --g-esquema-papel-borda: rgba(206, 197, 254, 0.16);
    --g-esquema-papel-selecionado: #262B60;
    --g-esquema-papel-selecionado-texto: #F0EEFF;
    --g-esquema-lilas-suave-fundo: #2A2F6A;
    --g-esquema-lilas-suave-texto: #F0EEFF;
    --g-esquema-lilas-suave-suave: #B9B4E4;
    --g-esquema-lilas-suave-borda: rgba(206, 197, 254, 0.22);
    --g-esquema-lilas-suave-selecionado: #373D82;
    --g-esquema-lilas-suave-selecionado-texto: #F0EEFF;
    --g-esquema-lilas-fundo: #373D82;
    --g-esquema-lilas-texto: #F2F0FF;
    --g-esquema-lilas-suave: #C3BFEC;
    --g-esquema-lilas-borda: rgba(206, 197, 254, 0.28);
    --g-esquema-lilas-selecionado: #464C9A;
    --g-esquema-lilas-selecionado-texto: #F2F0FF;
    --g-esquema-indigo-fundo: #11102F;
    --g-esquema-indigo-texto: #F0EEFF;
    --g-esquema-indigo-suave: #A8A3D0;
    --g-esquema-indigo-borda: rgba(206, 197, 254, 0.20);
    --g-esquema-indigo-selecionado: #CEC5FE;
    --g-esquema-indigo-selecionado-texto: #191C4A;
    --g-primaria: #CEC5FE;
    --g-primaria-hover: #B1A9FC;
    --g-primaria-sobre: #191C4A;
    --g-primaria-ink: #CEC5FE;
    --g-primaria-suave: #272A62;
    --g-secundaria: #DBEAA5;
    --g-terciaria: #BAC1EC;
    --g-fundo: #11102F;
    --g-superficie: #191C4A;
    --g-superficie-alt: #272A62;
    --g-borda: #454B92;
    --g-borda-forte: #5E67B0;
    --g-titulo: #F9F9F9;
    --g-texto: #E6E6F0;
    --g-texto-suave: #9D9CAF;
    --g-texto-tenue: #6E6892;
    --g-veu: rgba(8, 8, 22, 0.72);
    --g-veu-leve: rgba(8, 8, 22, 0.45);
    --g-postit: #211E4E;
    --g-fita: rgba(206, 197, 254, 0.22);
    --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --g-shadow: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
    --g-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.60);
    --g-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.70);
    --g-shadow-marca: 0 4px 14px rgba(206, 197, 254, 0.22);
    --g-focus-ring: 0 0 0 3px rgba(206, 197, 254, 0.50);
  }
}

:root[data-tema="escuro"] {
  --g-sucesso-ink: #6EE7B7;
  --g-sucesso-bg: #022C22;
  --g-sucesso-borda: #065F46;
  --g-perigo-ink: #FCA5A5;
  --g-perigo-bg: #450A0A;
  --g-perigo-borda: #7F1D1D;
  --g-atencao-ink: #FCD34D;
  --g-atencao-bg: #451A03;
  --g-atencao-borda: #78350F;
  --g-info-ink: #93C5FD;
  --g-info-bg: #172554;
  --g-info-borda: #1E3A8A;
  --g-esquema-papel-fundo: #1D2050;
  --g-esquema-papel-texto: #E9E7FA;
  --g-esquema-papel-suave: #A29DC8;
  --g-esquema-papel-borda: rgba(206, 197, 254, 0.16);
  --g-esquema-papel-selecionado: #262B60;
  --g-esquema-papel-selecionado-texto: #F0EEFF;
  --g-esquema-lilas-suave-fundo: #2A2F6A;
  --g-esquema-lilas-suave-texto: #F0EEFF;
  --g-esquema-lilas-suave-suave: #B9B4E4;
  --g-esquema-lilas-suave-borda: rgba(206, 197, 254, 0.22);
  --g-esquema-lilas-suave-selecionado: #373D82;
  --g-esquema-lilas-suave-selecionado-texto: #F0EEFF;
  --g-esquema-lilas-fundo: #373D82;
  --g-esquema-lilas-texto: #F2F0FF;
  --g-esquema-lilas-suave: #C3BFEC;
  --g-esquema-lilas-borda: rgba(206, 197, 254, 0.28);
  --g-esquema-lilas-selecionado: #464C9A;
  --g-esquema-lilas-selecionado-texto: #F2F0FF;
  --g-esquema-indigo-fundo: #11102F;
  --g-esquema-indigo-texto: #F0EEFF;
  --g-esquema-indigo-suave: #A8A3D0;
  --g-esquema-indigo-borda: rgba(206, 197, 254, 0.20);
  --g-esquema-indigo-selecionado: #CEC5FE;
  --g-esquema-indigo-selecionado-texto: #191C4A;
  --g-primaria: #CEC5FE;
  --g-primaria-hover: #B1A9FC;
  --g-primaria-sobre: #191C4A;
  --g-primaria-ink: #CEC5FE;
  --g-primaria-suave: #272A62;
  --g-secundaria: #DBEAA5;
  --g-terciaria: #BAC1EC;
  --g-fundo: #11102F;
  --g-superficie: #191C4A;
  --g-superficie-alt: #272A62;
  --g-borda: #454B92;
  --g-borda-forte: #5E67B0;
  --g-titulo: #F9F9F9;
  --g-texto: #E6E6F0;
  --g-texto-suave: #9D9CAF;
  --g-texto-tenue: #6E6892;
  --g-veu: rgba(8, 8, 22, 0.72);
  --g-veu-leve: rgba(8, 8, 22, 0.45);
  --g-postit: #211E4E;
  --g-fita: rgba(206, 197, 254, 0.22);
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --g-shadow: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --g-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.60);
  --g-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.70);
  --g-shadow-marca: 0 4px 14px rgba(206, 197, 254, 0.22);
  --g-focus-ring: 0 0 0 3px rgba(206, 197, 254, 0.50);
}

/* Diz ao browser qual e o esquema em vigor, para que barra de rolagem,
   campo de formulario nativo e autofill acompanhem o tema. Sem isto o
   input nativo continua branco no escuro. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } }
:root[data-tema="escuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }

/* ==========================================================================
   BASE
   Reset minimo e primitivas. Escopo em .g-shell de proposito: o DS entra em
   telas que ja carregam Bootstrap 3 (weblinked), Argon, Kartik e Tailwind, e
   um reset global brigaria com todos eles. O servico envolve a tela em
   .g-shell e so o que esta dentro adota o sistema.

   A excecao sao os tokens, que moram em :root. Bloco renderizado com teleport
   para o body sai do escopo do wrapper, var() deixa de resolver e o browser cai
   no valor nativo. Foi assim que o weblinked ganhou um segundo roxo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTES AUTO-HOSPEDADAS
   Parkinsans (a fonte de marca, --g-font-marca) e Hanken Grotesk (o texto da
   marca, --g-font-marca-texto), sob a SIL Open Font License (src/fonts/OFL.txt).
   Os arquivos viajam em dist/fonts junto com o CSS, e a URL e relativa:
   nenhuma requisicao externa sai da tela, que e a regra do sistema. So latin e
   latin-ext, porque e o que o portugues precisa; os 14 arquivos somam 156 kB e
   o browser so baixa o subconjunto que a pagina usa, e so se algum elemento
   pedir a familia: declarar o @font-face nao custa rede.

   `font-display: swap` porque texto invisivel esperando download e pior que
   texto na fonte de reserva por um instante.

   NADA aqui troca a fonte da interface. O padrao continua sendo a pilha do
   sistema (--g-font-sans). Quem quer a cara do Plano 360 poe
   data-fonte="marca" no .g-shell, regra logo abaixo do .g-shell.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-grotesk-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-grotesk-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-grotesk-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-grotesk-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-grotesk-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-grotesk-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/hanken-grotesk-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/hanken-grotesk-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/parkinsans-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/parkinsans-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/parkinsans-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/parkinsans-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/parkinsans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Parkinsans'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/parkinsans-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.g-shell {
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-md);
  line-height: var(--g-lh-base);
  color: var(--g-texto);
  background: var(--g-superficie);
  -webkit-font-smoothing: antialiased;
}

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

/* OPT-IN DA FONTE DA MARCA (3.1.0)
   `data-fonte="marca"` no .g-shell troca o corpo para Hanken Grotesk e poe
   Parkinsans onde a marca poe peso: titulo de pagina e de secao, botao, valor
   de indicador e o titulo dos componentes de conversa. O h4 e o corpo ficam
   de fora de proposito, porque e onde titulo e rotulo se encontram. Sem o
   atributo nada muda, e e assim que a 3.0.x segue funcionando. Vale dentro do
   .g-shell: bloco levado para o body com teleport sai do escopo e volta ao
   padrao, como acontece com qualquer regra daqui. */
.g-shell[data-fonte="marca"] { --g-font-sans: var(--g-font-marca-texto); }
.g-shell[data-fonte="marca"] h1,
.g-shell[data-fonte="marca"] h2,
.g-shell[data-fonte="marca"] h3,
.g-shell[data-fonte="marca"] .g-btn,
.g-shell[data-fonte="marca"] .g-appbar__marca,
.g-shell[data-fonte="marca"] .g-topnav--barra .g-topnav__item,
.g-shell[data-fonte="marca"] .g-stat__valor,
.g-shell[data-fonte="marca"] .g-avatar,
.g-shell[data-fonte="marca"] .g-balao__nome,
.g-shell[data-fonte="marca"] .g-reacao--destaque,
.g-shell[data-fonte="marca"] .g-postit__titulo,
.g-shell[data-fonte="marca"] .g-enquete__pergunta,
.g-shell[data-fonte="marca"] .g-drawer__titulo,
.g-shell[data-fonte="marca"] .g-agenda__titulo,
.g-shell[data-fonte="marca"] .g-painel__titulo { font-family: var(--g-font-marca); }

.g-shell h1, .g-shell h2, .g-shell h3, .g-shell h4 {
  margin: 0;
  color: var(--g-titulo);
  font-weight: var(--g-fw-semi);
  line-height: var(--g-lh-justa);
  letter-spacing: var(--g-ls-justo);
}
.g-shell h1 { font-size: var(--g-fs-xl); }
.g-shell h2 { font-size: var(--g-fs-lg); }
.g-shell h3 { font-size: var(--g-fs-md); }
.g-shell h4 { font-size: var(--g-fs-sm); }
.g-shell p  { margin: 0 0 var(--g-sp-3); }

/* LINK DE CONTEUDO E LINK DE COMPONENTE SAO COISAS DIFERENTES
   `.g-shell a` tem especificidade (0,1,1) e ganha de qualquer classe de
   componente, que e (0,1,0). Estilizar `a` direto sobrescrevia todo componente
   ancorado: o item de navegacao saia com o roxo da marca em vez do
   `--g-texto` do proprio componente, e sublinhava no hover, ou seja, o menu
   nao parecia uma lista de links, ele estava estilizado como uma.

   Regra: link COM classe e componente e manda na propria cor e decoracao. Link
   SEM classe e conteudo. Quem quer aparencia de link dentro de componente usa
   `.g-link` de proposito. */
.g-shell a { text-decoration: none; }
.g-shell a:not([class]),
.g-shell .g-link { color: var(--g-primaria-ink); }
.g-shell a:not([class]):hover,
.g-shell .g-link:hover { text-decoration: underline; }

/* Foco visivel e requisito, nao enfeite. Na tela de brick do weblinked havia 17
   `outline: none` e um unico `:focus-visible`: 20 dos 24 elementos focaveis nao
   mostravam foco nenhum. Aqui o anel e um so e nunca some. */
.g-shell :focus-visible {
  outline: 2px solid var(--g-primaria-ink);
  outline-offset: var(--g-focus-offset);
  border-radius: var(--g-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .g-shell *, .g-shell *::before, .g-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   PRIMITIVAS DE TEXTO
   -------------------------------------------------------------------------- */

/* Rotulo micro em caixa alta. Caixa alta pede tracking, por isso o ls-caps. */
.g-rotulo {
  font-size: var(--g-fs-3xs);
  font-weight: var(--g-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--g-ls-caps);
  color: var(--g-texto-suave);
}
/* Pilula, e nao texto solto: e assim na tela Brick Insights, que e a
   referencia. O fundo tingido separa a categoria do titulo sem precisar de
   mais um degrau de tamanho. */
.g-eyebrow {
  display: inline-block;
  font-size: var(--g-fs-3xs);
  font-weight: var(--g-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--g-ls-caps);
  color: var(--g-primaria-ink);
  background: var(--g-primaria-suave);
  padding: 3px var(--g-sp-2);
  border-radius: 3px;
}
.g-meta  { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-hint  { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-erro  { font-size: var(--g-fs-2xs); color: var(--g-perigo-ink); }

/* Todo numero de dinheiro, quantidade ou percentual usa .g-numerico. Sem
   tabular-nums a coluna de valores dança entre as linhas, e comparar
   verticalmente é justamente o que a pessoa está fazendo nessas telas. */
.g-numerico { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Marcador: o numero ou a palavra em destaque dentro de um texto corrido, no
   lima da marca. Superficie clara com a tinta indigo, pelo mesmo motivo do
   .g-destaque: branco sobre lima da 1,29:1. Nao troca de tema, entao dentro de
   uma bolha escura ou clara ele continua legivel. `box-decoration-break: clone`
   fecha o fundo em cada linha quando o trecho quebra. Um ou dois por
   paragrafo; marcar tudo e nao marcar nada. */
.g-marcador {
  background: var(--g-destaque); color: var(--g-destaque-ink);
  padding: 0 var(--g-sp-1); border-radius: var(--g-sp-05);
  font-weight: var(--g-fw-semi);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.g-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   TROCA DE TEMA
   A troca de tema nao anima, e nao e por gosto. As transicoes do sistema
   existem para hover e foco, e trocam propriedades cujo valor vem de var().
   Quando quem muda e a custom property herdada, e nao a propriedade do
   elemento, o Chrome dispara a transicao e o elemento fica PRESO no valor do
   tema anterior, ate um reload: depois de trocar para o escuro, o botao
   primario continuava com o preenchimento do tema claro, enquanto o avatar,
   que nao tem transicao, trocava certo. Apareceu na 3.0.0 porque ali os dois
   valores do preenchimento primario passaram a ser opostos, mas o defeito e
   mais velho que ela.

   O alternador do servico marca este atributo na raiz, troca o tema e tira o
   atributo no frame seguinte. Ver "Alternador de tema" no catalogo.
   -------------------------------------------------------------------------- */
:root[data-tema-trocando] *,
:root[data-tema-trocando] *::before,
:root[data-tema-trocando] *::after {
  transition: none !important;
}

/* ==========================================================================
   COMPONENTES
   Classes puras, sem framework. Renderizam igual em .php do Yii2, .erb do
   Rails, .cshtml do Razor, template Jinja e JSX, porque o front da plataforma
   e as quatro coisas ao mesmo tempo.

   Convencao de nome: bloco `.g-x`, elemento `.g-x__parte`, variante `.g-x--tom`.
   O HTML canonico de cada componente esta em components/<nome>.md e e o que a
   skill de agente le. Se o HTML aqui e o de la divergirem, o de la vence, e
   este arquivo esta com defeito.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGINA, o esqueleto da tela inteira
   Barra de aplicacao em cima, na largura toda, e embaixo dela o menu lateral a
   esquerda e a regiao que rola a direita. Existe porque sem ele cada servico
   inventava o seu: o proprio showcase tinha uma casca particular com quatro
   classes fora do sistema, e o agente que le a skill nunca via como uma tela e
   por dentro, so componentes soltos.

   Ate a 3.x o menu lateral ocupava a altura toda e a barra so a largura do
   conteudo. O Journey teve de reescrever a barra por fora do sistema (marca,
   secoes, busca e usuario numa faixa unica) porque o esqueleto era outro. Na
   4.0.0 a barra sobe para filha direta de `.g-pagina`, e o menu entra em
   `.g-pagina__corpo`, ao lado do conteudo.

   A regiao que rola e a do conteudo, nunca a pagina. Barra e menu ficam
   parados, e e o que faz o cabecalho grudento da tabela ter funcao.
   -------------------------------------------------------------------------- */
.g-pagina {
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  background: var(--g-fundo);
}
.g-pagina__corpo { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: row; }
.g-pagina__conteudo {
  flex: 1; min-height: 0; min-width: 0; overflow-y: auto;
  padding: var(--g-sp-5);
  background: var(--g-fundo);
}
/* Tela que e uma tabela de ponta a ponta, ou um wizard que desenha o proprio
   respiro, nao quer o respiro de fora. */
.g-pagina__conteudo--zero { padding: 0; }

/* --------------------------------------------------------------------------
   TRILHA, o caminho ate a tela
   Marcacao de lista de proposito: e o que o leitor de tela anuncia como
   "lista de 3 itens", e o separador desenhado no CSS nao entra na leitura.
   Separador em marcacao vira "Redes barra Rede Exemplo barra Lojas".
   -------------------------------------------------------------------------- */
.g-trilha { min-width: 0; font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-trilha ol {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 var(--g-sp-2);
  list-style: none; margin: 0; padding: 0;
}
.g-trilha li { display: inline-flex; align-items: center; gap: var(--g-sp-2); min-width: 0; }
.g-trilha li + li::before {
  content: '/'; color: var(--g-texto-tenue);
}
.g-trilha a { color: var(--g-texto-suave); text-decoration: none; border-radius: var(--g-radius-sm); }
.g-trilha a:hover { color: var(--g-primaria-ink); text-decoration: underline; }
.g-trilha [aria-current='page'] { color: var(--g-texto); font-weight: var(--g-fw-medio); }
/* O nome longo encolhe no meio da trilha em vez de empurrar a barra. */
.g-trilha__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   MASTHEAD, o cabecalho da tela ou de um recorte
   Com `h1` e o cabecalho da tela: primeiro bloco do conteudo, com a trilha
   acima do titulo e a acao primaria em `__slot`. Com `h2` e o cabecalho de um
   recorte dentro da tela. O nome da tela aparece uma vez so, aqui, e nao mais
   na barra. Ver "Pagina" no catalogo.
   -------------------------------------------------------------------------- */
.g-masthead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--g-sp-4);
  padding: var(--g-sp-5) var(--g-sp-4) var(--g-sp-4);
  border-bottom: 1px solid var(--g-borda);
}
.g-masthead h1, .g-masthead h2 { font-size: var(--g-fs-lg); margin: 0; }
.g-masthead .g-trilha { margin-bottom: var(--g-sp-1); }
.g-masthead__meta { margin-top: var(--g-sp-1); font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-masthead__slot { display: flex; align-items: center; gap: var(--g-sp-2); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   BOTAO
   Altura fixa por tamanho para que botao e input alinhem na mesma linha.
   -------------------------------------------------------------------------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g-sp-2);
  height: 34px; padding: 0 var(--g-sp-4);
  font-family: inherit; font-size: var(--g-fs-sm); font-weight: var(--g-fw-semi);
  line-height: 1; white-space: nowrap;
  /* 34px de altura, folga de 16px, peso 600 e raio 4px sao as medidas da tela
     Brick Insights, conferidas no computed style e nao no olho. */
  border: 1px solid transparent; border-radius: var(--g-radius-sm);
  background: var(--g-superficie); color: var(--g-texto);
  cursor: pointer; text-decoration: none;
  transition: background var(--g-dur-rapido) var(--g-ease), border-color var(--g-dur-rapido) var(--g-ease);
}
.g-btn:hover { text-decoration: none; }
.g-btn:disabled, .g-btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

.g-btn--primaria   { background: var(--g-primaria); color: var(--g-primaria-sobre); }
.g-btn--primaria:hover:not(:disabled) { background: var(--g-primaria-hover); }
.g-btn--secundaria { background: var(--g-superficie); color: var(--g-texto); border-color: var(--g-borda-forte); }
.g-btn--secundaria:hover:not(:disabled) { background: var(--g-fundo); }
.g-btn--ghost      { background: transparent; color: var(--g-texto-suave); }
.g-btn--ghost:hover:not(:disabled) { background: var(--g-fundo); color: var(--g-texto); }
/* Acao destrutiva usa o preenchimento, nunca o -ink: o -ink existe para texto
   sobre fundo claro e fica escuro demais como fundo de botao. */
.g-btn--perigo     { background: var(--g-perigo); color: var(--g-sobre-preenchimento); }
.g-btn--perigo:hover:not(:disabled) { background: var(--g-perigo-ink); }

.g-btn--sm { height: 28px; padding: 0 var(--g-sp-3); font-size: var(--g-fs-xs); }
.g-btn--lg { height: 40px; padding: 0 var(--g-sp-5); font-size: var(--g-fs-md); }
.g-btn--bloco { width: 100%; }

.g-actions { display: flex; align-items: center; gap: var(--g-sp-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   CARTAO
   Borda separa, sombra destaca. Cartao comum nao leva sombra: se tudo tem
   profundidade, profundidade deixa de significar hierarquia.
   -------------------------------------------------------------------------- */
.g-card {
  background: var(--g-superficie);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  padding: var(--g-sp-4);
}
.g-card--destaque { box-shadow: var(--g-shadow-marca); border-color: var(--g-primaria-ink); }
.g-card__titulo { font-size: var(--g-fs-md); font-weight: var(--g-fw-semi); color: var(--g-titulo); margin-bottom: var(--g-sp-2); }
.g-card__rodape { margin-top: var(--g-sp-3); padding-top: var(--g-sp-3); border-top: 1px solid var(--g-borda); }
.g-grid { display: grid; gap: var(--g-sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* --------------------------------------------------------------------------
   KPI
   Quatro colunas e o maximo confortavel, regra herdada do sistema de
   apresentacao e que vale igual na tela.
   -------------------------------------------------------------------------- */
.g-stats { display: grid; gap: var(--g-sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* O bloco existe sozinho de proposito. Combinar com .g-card e opcional: dentro de
   uma tabela ou de um cabecalho o indicador aparece sem caixa. */
.g-stat { min-width: 0; }
.g-stat__label { font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi); text-transform: uppercase; letter-spacing: var(--g-ls-caps); color: var(--g-texto-suave); }
.g-stat__valor { font-size: var(--g-fs-xl); font-weight: var(--g-fw-forte); color: var(--g-titulo); line-height: var(--g-lh-justa); font-variant-numeric: tabular-nums; margin-top: var(--g-sp-1); }
.g-stat__nota  { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); margin-top: var(--g-sp-05); }
.g-stat--positivo .g-stat__valor { color: var(--g-sucesso-ink); }
.g-stat--negativo .g-stat__valor { color: var(--g-perigo-ink); }

/* --------------------------------------------------------------------------
   TABELA
   Alta densidade e o caso mais frequente da plataforma, entao e o padrao e nao
   uma variante. Os valores sao os da tela Brick Insights, lidos das regras dela.

   Nunca use negrito em th nem em td. O cabecalho ja e caixa alta em cinza
   secundario com peso 500; negrito em cima disso so polui.
   -------------------------------------------------------------------------- */
.g-table-scroll {
  /* Rola nos dois eixos. A altura vem da aplicacao pela variavel, porque so ela
     sabe quanto de tela sobra: na referencia e `calc(100vh - 140px)`. Sem
     altura, a regiao cresce e o cabecalho grudento perde a funcao. */
  max-height: var(--g-tabela-altura);
  min-height: 120px;
  overflow: auto; -webkit-overflow-scrolling: touch;
}
.g-table { width: 100%; border-collapse: collapse; font-size: var(--g-fs-xs); }

.g-table thead th {
  padding: var(--g-sp-2) var(--g-sp-3); text-align: left;
  font-size: var(--g-fs-2xs); font-weight: var(--g-fw-medio);
  text-transform: uppercase; letter-spacing: var(--g-ls-caps);
  color: var(--g-texto-suave); background: var(--g-fundo);
  border-bottom: 1px solid var(--g-borda); white-space: nowrap;
}
/* Cabecalho grudento e o padrao dentro da regiao que rola, e nao um modificador:
   tabela densa sem cabecalho fixo perde o nome da coluna na primeira rolagem. */
.g-table-scroll .g-table thead th { position: sticky; top: 0; z-index: var(--g-z-sticky); }

.g-table tbody td {
  padding: var(--g-sp-2) var(--g-sp-3);
  border-bottom: 1px solid var(--g-borda);
  vertical-align: middle; color: var(--g-texto); font-weight: var(--g-fw-normal);
}
/* Realce e selecao usam o tingido da marca, nao o cinza: numa tabela cheia o
   cinza se confunde com a listra e com o estado de linha. */
.g-table tbody tr:hover td { background: var(--g-primaria-suave); }
.g-table tbody tr[aria-selected='true'] td { background: var(--g-primaria-suave); }

/* Coluna de numero: monoespacada, tabular e na cor de titulo. Monoespacada
   porque a comparacao vertical de valor e o que a pessoa esta fazendo, e a
   largura constante do digito e o que alinha a virgula. */
.g-table__num {
  font-family: var(--g-font-mono); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--g-titulo); white-space: nowrap;
}

/* Primeira coluna fixa. Em tabela larga, rolar na horizontal sem ela faz a
   pessoa perder de que produto e a linha. */
.g-table__col-fixa { position: sticky; left: 0; background: var(--g-superficie); z-index: 1; }
.g-table tbody tr:hover .g-table__col-fixa,
.g-table tbody tr[aria-selected='true'] .g-table__col-fixa { background: var(--g-primaria-suave); }
.g-table thead .g-table__col-fixa { background: var(--g-fundo); z-index: calc(var(--g-z-sticky) + 1); }

/* Faixa de agrupamento: primeira linha do cabecalho, agrupando colunas. A
   segunda linha gruda logo abaixo dela. */
.g-table__banda th {
  top: 0; text-align: center;
  font-size: var(--g-fs-3xs); color: var(--g-texto-suave);
  background: var(--g-superficie-alt);
  border-bottom: 1px solid var(--g-borda);
  padding-block: var(--g-sp-1);
}
.g-table__banda th + th { border-left: 1px solid var(--g-borda); }
.g-table-scroll .g-table thead .g-table__banda ~ tr th { top: 22px; }

/* Celula de pessoa: o avatar abre a linha e o nome vem depois. Ao contrario da
   barra de aplicacao, onde o avatar fecha o bloco do lado da borda da tela: numa
   coluna, o disco na frente e o que deixa a lista escaneavel de cima a baixo. */
.g-table__pessoa { display: inline-flex; align-items: center; gap: var(--g-sp-2); min-width: 0; }
.g-table__pessoa .g-avatar { width: 26px; height: 26px; font-size: var(--g-fs-3xs); }

/* Coluna de selecao */
.g-table__sel { width: 36px; text-align: center; }

/* Cor nunca e o unico portador de significado: a linha marcada leva o fundo e
   o motivo escrito em alguma coluna. */
.g-table tr.g-linha--perigo td  { background: var(--g-perigo-bg); }
.g-table tr.g-linha--atencao td { background: var(--g-atencao-bg); }

/* --------------------------------------------------------------------------
   CAIXA DE SELECAO
   Input nativo com aparencia propria, e nao um `<span>` fingindo. O nativo
   entra na ordem de tabulacao, aceita espaco, envia no formulario e e
   anunciado pelo leitor de tela sem nenhum ARIA.
   -------------------------------------------------------------------------- */
.g-check {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0; margin: 0;
  border: 1.5px solid var(--g-borda-forte); border-radius: 3px;
  background: var(--g-superficie); cursor: pointer; position: relative;
  vertical-align: middle;
  transition: background var(--g-dur-rapido) var(--g-ease), border-color var(--g-dur-rapido) var(--g-ease);
}
.g-check:hover:not(:disabled) { border-color: var(--g-primaria); }
.g-check:checked, .g-check:indeterminate { background: var(--g-primaria); border-color: var(--g-primaria); }
.g-check:checked::after {
  content: ''; position: absolute; top: 1px; left: 4px; width: 4px; height: 8px;
  border: solid var(--g-primaria-sobre); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Indeterminado e o estado do "selecionar tudo" quando so parte esta marcada.
   Sem ele o cabecalho mente: mostra vazio com linhas selecionadas embaixo. */
.g-check:indeterminate::after {
  content: ''; position: absolute; top: 6px; left: 3px; width: 8px; height: 2px;
  background: var(--g-primaria-sobre);
}
.g-check:disabled { background: var(--g-fundo); border-color: var(--g-borda); cursor: not-allowed; }

/* Caixa com rotulo ao lado, alvo de clique inteiro */
.g-check-campo { display: inline-flex; align-items: center; gap: var(--g-sp-2); cursor: pointer; font-size: var(--g-fs-sm); color: var(--g-texto); }
.g-check-campo:has(.g-check:disabled) { color: var(--g-texto-suave); cursor: not-allowed; }

/* Resumo da selecao, para a barra de acoes da tabela */
.g-selecao {
  display: inline-flex; align-items: center; gap: var(--g-sp-2);
  font-size: var(--g-fs-2xs); color: var(--g-texto);
  font-family: var(--g-font-mono); font-variant-numeric: tabular-nums;
}
.g-selecao strong { color: var(--g-primaria-ink); font-weight: var(--g-fw-semi); }

/* --------------------------------------------------------------------------
   CHIP e BADGE
   -------------------------------------------------------------------------- */
.g-chip {
  display: inline-flex; align-items: center; gap: var(--g-sp-1);
  padding: 2px var(--g-sp-2); border-radius: var(--g-radius-pill);
  font-size: var(--g-fs-2xs); font-weight: var(--g-fw-medio);
  background: var(--g-fundo); color: var(--g-texto); border: 1px solid var(--g-borda);
}
.g-chip--sucesso { background: var(--g-sucesso-bg); color: var(--g-sucesso-ink); border-color: var(--g-sucesso-borda); }
.g-chip--perigo  { background: var(--g-perigo-bg);  color: var(--g-perigo-ink);  border-color: var(--g-perigo-borda); }
.g-chip--atencao { background: var(--g-atencao-bg); color: var(--g-atencao-ink); border-color: var(--g-atencao-borda); }
.g-chip--info    { background: var(--g-info-bg);    color: var(--g-info-ink);    border-color: var(--g-info-borda); }
.g-chip--marca   { background: var(--g-primaria-suave); color: var(--g-primaria-ink); border-color: var(--g-primaria-ink); }

/* --------------------------------------------------------------------------
   FORMULARIO
   -------------------------------------------------------------------------- */
.g-field { display: flex; flex-direction: column; gap: var(--g-sp-1); margin-bottom: var(--g-sp-3); }
.g-label { font-size: var(--g-fs-2xs); font-weight: var(--g-fw-medio); color: var(--g-texto); }
.g-label__obrig { color: var(--g-perigo-ink); }
.g-input, .g-select, .g-textarea {
  width: 100%; height: 34px; padding: 0 var(--g-sp-3);
  font-family: inherit; font-size: var(--g-fs-sm); color: var(--g-texto);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda-forte); border-radius: var(--g-radius);
}
.g-textarea { height: auto; min-height: 80px; padding: var(--g-sp-2) var(--g-sp-3); line-height: var(--g-lh-base); }
.g-input::placeholder, .g-textarea::placeholder { color: var(--g-texto-tenue); }
.g-input:disabled, .g-select:disabled { background: var(--g-fundo); color: var(--g-texto-suave); cursor: not-allowed; }
.g-field--erro .g-input, .g-field--erro .g-select, .g-field--erro .g-textarea { border-color: var(--g-perigo); }

/* --------------------------------------------------------------------------
   ALERTA
   -------------------------------------------------------------------------- */
.g-alert {
  display: flex; gap: var(--g-sp-3); align-items: flex-start;
  padding: var(--g-sp-3); border-radius: var(--g-radius);
  border: 1px solid var(--g-borda); background: var(--g-fundo);
  font-size: var(--g-fs-sm); color: var(--g-texto);
}
.g-alert__titulo { font-weight: var(--g-fw-semi); margin-bottom: var(--g-sp-05); }
.g-alert--sucesso { background: var(--g-sucesso-bg); border-color: var(--g-sucesso-borda); color: var(--g-sucesso-ink); }
.g-alert--perigo  { background: var(--g-perigo-bg);  border-color: var(--g-perigo-borda);  color: var(--g-perigo-ink); }
.g-alert--atencao { background: var(--g-atencao-bg); border-color: var(--g-atencao-borda); color: var(--g-atencao-ink); }
.g-alert--info    { background: var(--g-info-bg);    border-color: var(--g-info-borda);    color: var(--g-info-ink); }

/* --------------------------------------------------------------------------
   ESTADO VAZIO, ESQUELETO, PAGINACAO
   -------------------------------------------------------------------------- */
.g-empty { text-align: center; padding: var(--g-sp-10) var(--g-sp-4); color: var(--g-texto-suave); }
.g-empty__titulo { font-size: var(--g-fs-md); font-weight: var(--g-fw-semi); color: var(--g-titulo); margin-bottom: var(--g-sp-1); }
.g-empty__acao { margin-top: var(--g-sp-4); }

.g-skeleton {
  background: linear-gradient(90deg, var(--g-borda) 25%, var(--g-superficie-alt) 37%, var(--g-borda) 63%);
  background-size: 400% 100%; border-radius: var(--g-radius-sm);
  animation: g-shimmer 1.4s ease infinite;
}
.g-skeleton--linha { height: 12px; margin-bottom: var(--g-sp-2); }
.g-skeleton--bloco { height: 80px; }
@keyframes g-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   PAGINACAO
   Botao por pagina, e nao so anterior e proxima. Em tabela densa a pessoa pula
   para uma pagina especifica o tempo todo, e "proxima" doze vezes nao e
   navegacao.
   -------------------------------------------------------------------------- */
.g-pager { display: flex; align-items: center; gap: var(--g-sp-1); flex-wrap: wrap; }
.g-pager__info { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); font-variant-numeric: tabular-nums; }
.g-pager__btn {
  min-width: 32px; padding: var(--g-sp-1) var(--g-sp-2);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-sm);
  background: var(--g-superficie); color: var(--g-texto);
  font-family: inherit; font-size: var(--g-fs-xs);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.g-pager__btn:hover:not(:disabled) { background: var(--g-primaria-suave); border-color: var(--g-primaria); }
.g-pager__btn[aria-current='page'] { background: var(--g-primaria); border-color: var(--g-primaria); color: var(--g-primaria-sobre); }
.g-pager__btn:disabled { background: var(--g-superficie-alt); color: var(--g-texto-suave); cursor: not-allowed; }
.g-pager__reticencias { padding: 0 var(--g-sp-1); color: var(--g-texto-tenue); }

/* --------------------------------------------------------------------------
   TOGGLE
   Alterna entre modos excludentes do MESMO conteudo, como a sugestao de pedido
   por potencial ou por quantidade minima. Nao confundir com `.g-tabs`, que
   troca o conteudo, nem com `.g-topnav`, que troca de secao.

   Pilula com borda e botoes rentes por dentro, sem espaco entre eles: e o
   desenho de `bi-modo-btns` na tela de referencia. O ativo preenche de ponta a
   ponta, entao o `overflow: hidden` no container e o que arredonda as pontas.

   Medidas arredondadas para a escala do sistema: a referencia usa 31px de
   altura, 14px de folga e raio 9px, que estao fora da escala de 4px. Aqui e
   32px, 12px e o raio md. A diferenca nao e perceptivel e a escala fica inteira.
   -------------------------------------------------------------------------- */
.g-toggle {
  display: inline-flex; flex-shrink: 0;
  background: var(--g-superficie);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  overflow: hidden;
}
.g-toggle__item {
  height: 32px; padding: 0 var(--g-sp-3);
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--g-fs-xs); font-weight: var(--g-fw-semi);
  color: var(--g-texto-suave); white-space: nowrap;
  transition: background var(--g-dur-rapido) var(--g-ease), color var(--g-dur-rapido) var(--g-ease);
}
.g-toggle__item:hover:not(.g-toggle__item--ativo):not(:disabled) { background: var(--g-fundo); color: var(--g-titulo); }
.g-toggle__item--ativo { background: var(--g-primaria); color: var(--g-primaria-sobre); }
.g-toggle__item:disabled { color: var(--g-texto-tenue); cursor: not-allowed; }
.g-toggle--sm .g-toggle__item { height: 26px; font-size: var(--g-fs-2xs); padding: 0 var(--g-sp-2); }

/* --------------------------------------------------------------------------
   LISTA DE DEFINICAO
   Substitui o DetailView do Kartik nas telas do weblinked.
   -------------------------------------------------------------------------- */
.g-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--g-sp-2) var(--g-sp-4); font-size: var(--g-fs-sm); }
.g-dl dt { color: var(--g-texto-suave); font-size: var(--g-fs-2xs); text-transform: uppercase; letter-spacing: var(--g-ls-caps); align-self: center; }
.g-dl dd { margin: 0; color: var(--g-texto); }

/* --------------------------------------------------------------------------
   DIALOGO
   -------------------------------------------------------------------------- */
.g-overlay { position: fixed; inset: 0; background: var(--g-veu); z-index: var(--g-z-overlay); }
.g-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: var(--g-z-modal); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  overflow: auto; background: var(--g-superficie);
  border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-lg); padding: var(--g-sp-5);
}
.g-dialog__titulo { font-size: var(--g-fs-lg); font-weight: var(--g-fw-semi); color: var(--g-titulo); margin-bottom: var(--g-sp-3); }
.g-dialog__acoes { display: flex; justify-content: flex-end; gap: var(--g-sp-2); margin-top: var(--g-sp-5); }

/* --------------------------------------------------------------------------
   RESPONSIVO
   Tabela larga rola dentro do proprio container. A pagina nunca rola na
   horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .g-masthead { flex-direction: column; }
  .g-masthead__slot { width: 100%; }
  .g-dl { grid-template-columns: 1fr; gap: var(--g-sp-1); }
  .g-dl dd { margin-bottom: var(--g-sp-2); }
}

/* ==========================================================================
   COMPONENTES DE APLICACAO
   Wizard, navegacao lateral, barra de aplicacao e selecao de data. Vieram de
   necessidade real: o wizard de campanhas do TradeSphere, a sidebar do mesmo
   produto e o cabecalho com menu de usuario do Management.Client.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WIZARD
   O passo tem rotulo, e isso e a diferenca em relacao ao que existe hoje. O
   stepper do TradeSphere desenha oito circulos numerados sem nenhum texto, e
   com oito passos a pessoa nao tem como saber o que e o passo 6 antes de
   chegar nele.

   A ordem vem da marcacao, nao do numero. No produto real a lista de passos
   muda conforme a categoria da campanha e a numeracao interna nao e
   sequencial, entao o componente nunca assume 1 a N.
   -------------------------------------------------------------------------- */
.g-wizard { display: flex; align-items: flex-start; }
.g-wizard__passo {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--g-sp-2);
  text-align: center;
}
/* O trilho e desenhado pelo proprio passo, para a linha acompanhar a largura
   real da coluna em qualquer quantidade de passos. */
.g-wizard__passo::before,
.g-wizard__passo::after {
  content: ''; position: absolute; top: 13px; height: 2px;
  background: var(--g-borda); z-index: var(--g-z-base);
}
.g-wizard__passo::before { left: 0; right: 50%; margin-right: 18px; }
.g-wizard__passo::after  { left: 50%; right: 0; margin-left: 18px; }
.g-wizard__passo:first-child::before,
.g-wizard__passo:last-child::after { content: none; }

.g-wizard__marca {
  position: relative; z-index: 2;
  width: 28px; height: 28px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--g-radius-pill);
  border: 2px solid var(--g-borda-forte);
  background: var(--g-superficie);
  font-size: var(--g-fs-2xs); font-weight: var(--g-fw-semi);
  color: var(--g-texto-tenue);
  font-variant-numeric: tabular-nums;
}
.g-wizard__rotulo {
  font-size: var(--g-fs-2xs); color: var(--g-texto-suave);
  line-height: var(--g-lh-justa); padding: 0 var(--g-sp-1);
}

/* Concluido: preenchimento da marca e trilho de tras ja percorrido. */
.g-wizard__passo--feito .g-wizard__marca { background: var(--g-primaria); border-color: var(--g-primaria-ink); color: var(--g-primaria-sobre); }
.g-wizard__passo--feito::before,
.g-wizard__passo--atual::before { background: var(--g-primaria); }
.g-wizard__passo--feito::after { background: var(--g-primaria); }
.g-wizard__passo--feito .g-wizard__rotulo { color: var(--g-texto); }

/* Atual: contorno na cor da marca e anel, sem preenchimento. Preencher igual
   ao concluido apagaria a diferenca entre onde a pessoa esta e onde ja passou,
   que e a unica informacao que o componente precisa dar. */
.g-wizard__passo--atual .g-wizard__marca {
  border-color: var(--g-primaria-ink); color: var(--g-primaria-ink);
  box-shadow: var(--g-focus-ring);
}
.g-wizard__passo--atual .g-wizard__rotulo { color: var(--g-titulo); font-weight: var(--g-fw-semi); }

/* Navegavel: so em edicao, quando qualquer passo pode ser alcancado. Em
   criacao os passos nao sao botao, porque pular validacao a frente e o que
   produz rascunho invalido. */
.g-wizard--navegavel .g-wizard__marca { cursor: pointer; }
.g-wizard--navegavel .g-wizard__passo:not(.g-wizard__passo--atual) .g-wizard__marca:hover {
  border-color: var(--g-primaria-ink); color: var(--g-primaria-ink);
}
.g-wizard__passo--bloqueado .g-wizard__marca { cursor: not-allowed; opacity: 0.6; }

.g-wizard-corpo { padding: var(--g-sp-5) 0; }
.g-wizard-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-3);
  padding-top: var(--g-sp-4); border-top: 1px solid var(--g-borda);
}

@media (max-width: 720px) {
  /* Em tela estreita oito rotulos nao cabem. Some o rotulo dos passos que nao
     sao o atual, e o atual vira a legenda do conjunto. */
  .g-wizard__passo:not(.g-wizard__passo--atual) .g-wizard__rotulo { display: none; }
  .g-wizard__passo--atual .g-wizard__rotulo { position: absolute; top: 34px; width: 160px; }
  .g-wizard { padding-bottom: var(--g-sp-6); }
}

/* --------------------------------------------------------------------------
   NAVEGACAO LATERAL
   Navegacao de aplicacao, nao uma lista de links. O que ela precisa dar conta:
   grupo que fecha, item aninhado, filtro, contagem, indicador de novidade,
   rodape fixo e o modo trilho de icone.

   Recolher para icone e o que falta hoje: no TradeSphere o estado recolhido
   esconde a barra inteira, entao a navegacao desaparece em vez de ficar
   compacta. Aqui o recolhimento e uma classe no proprio elemento, sem media
   query, porque quem decide e a pessoa e a escolha dela vale nas outras telas.

   Tres estados, todos por classe no proprio elemento, e quem alterna e a
   stack: expandido (264px), `--recolhido` (trilho de icone, 60px) e `--oculto`
   (some por inteiro e sobra uma faixa de 20px com a alca, como gaveta). Na
   4.0.0 a marca saiu do menu e foi para a barra, e o controle de recolher
   virou um item do rodape do proprio menu.
   -------------------------------------------------------------------------- */
.g-sidenav {
  position: relative;
  width: 264px; flex-shrink: 0;
  /* min-width e min-height explicitos porque como item de flex os dois herdam
     `auto`, que resolve para o tamanho do conteudo: sem isso um rotulo longo
     ou uma lista alta empurram a barra em vez de truncar e rolar. */
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--g-superficie);
  border-right: 1px solid var(--g-borda);
  transition: width var(--g-dur-base) var(--g-ease);
}
.g-sidenav--recolhido { width: 60px; }

/* ---- marca ----
   A marcacao canonica da 4.0.0 poe a marca na barra (`.g-appbar__marca`). Estas
   regras ficam para quem ja usa a marca dentro do menu. */
.g-sidenav__marca {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: 0 var(--g-sp-3);
  border-bottom: 1px solid var(--g-borda);
  overflow: hidden;
}
.g-sidenav__logo {
  width: 32px; height: 32px; flex-shrink: 0;
  display: block;
  /* Ate a 1.4.1 isto era um quadrado com gradiente, porque nao existia
     logotipo vetorial e a marca antiga tinha tres acentos que precisavam
     conviver em algum lugar. Agora existe simbolo: o bloco e o simbolo. */
}
.g-sidenav__nome { min-width: 0; line-height: var(--g-lh-justa); flex: 1; }
.g-sidenav__nome strong { display: block; font-size: var(--g-fs-sm); color: var(--g-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sidenav__nome span { display: block; font-size: var(--g-fs-3xs); color: var(--g-texto-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- filtro ---- */
.g-sidenav__busca { padding: var(--g-sp-3) var(--g-sp-3) var(--g-sp-1); position: relative; }
.g-sidenav__busca-campo {
  width: 100%; height: 30px; padding: 0 var(--g-sp-2) 0 28px;
  font-family: inherit; font-size: var(--g-fs-2xs); color: var(--g-texto);
  background: var(--g-fundo);
  border: 1px solid transparent; border-radius: var(--g-radius);
}
.g-sidenav__busca-campo::placeholder { color: var(--g-texto-tenue); }
.g-sidenav__busca-campo:focus { background: var(--g-superficie); border-color: var(--g-borda-forte); }
.g-sidenav__busca-icone {
  position: absolute; left: calc(var(--g-sp-3) + var(--g-sp-2)); top: 50%; transform: translateY(-40%);
  color: var(--g-texto-tenue); pointer-events: none; display: inline-flex;
}

/* ---- corpo e grupo ---- */
.g-sidenav__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--g-sp-2) var(--g-sp-2) var(--g-sp-4); }
.g-sidenav__grupo + .g-sidenav__grupo { margin-top: var(--g-sp-3); }

.g-sidenav__grupo-cabeca {
  display: flex; align-items: center; gap: var(--g-sp-2); width: 100%;
  padding: var(--g-sp-1) var(--g-sp-2);
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left; border-radius: var(--g-radius-sm);
}
.g-sidenav__grupo-cabeca:hover { background: var(--g-fundo); }
.g-sidenav__grupo-rotulo {
  flex: 1; min-width: 0;
  font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi);
  text-transform: uppercase; letter-spacing: var(--g-ls-caps);
  color: var(--g-texto-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-sidenav__seta { color: var(--g-texto-tenue); transition: transform var(--g-dur-rapido) var(--g-ease); }
.g-sidenav__grupo--fechado .g-sidenav__seta { transform: rotate(-90deg); }
.g-sidenav__grupo--fechado .g-sidenav__itens { display: none; }
.g-sidenav__itens { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }

/* ---- item ---- */
.g-sidenav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: var(--g-sp-2); border-radius: var(--g-radius);
  font-size: var(--g-fs-sm); color: var(--g-texto);
  text-decoration: none; white-space: nowrap;
  /* O item serve tambem como `button` (o "Recolher menu" do rodape): o resto
     zera o que o navegador poe num botao e nao muda nada para o `<a>`. */
  width: 100%; border: 0; background: transparent;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: background var(--g-dur-rapido) var(--g-ease), color var(--g-dur-rapido) var(--g-ease);
}
.g-sidenav__item:hover { background: var(--g-fundo); text-decoration: none; color: var(--g-titulo); }
.g-sidenav__item:hover .g-sidenav__icone { color: var(--g-texto); }

/* Item ativo tem tres sinais, nao um: tarja de acento a esquerda, fundo tingido
   e icone na cor da marca. Só o fundo tingido e fraco demais em tela clara, e
   quem nao distingue as cores fica sem o indicador. */
.g-sidenav__item--ativo { background: var(--g-primaria-suave); color: var(--g-primaria-ink); font-weight: var(--g-fw-medio); }
.g-sidenav__item--ativo::before {
  content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--g-primaria);
}
.g-sidenav__item--ativo .g-sidenav__icone { color: var(--g-primaria-ink); }

.g-sidenav__icone {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--g-texto-suave);
  transition: color var(--g-dur-rapido) var(--g-ease);
}
.g-sidenav__texto { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }

.g-sidenav__contagem {
  flex-shrink: 0;
  font-size: var(--g-fs-3xs); font-variant-numeric: tabular-nums;
  background: var(--g-fundo); color: var(--g-texto-suave);
  border-radius: var(--g-radius-pill); padding: 1px var(--g-sp-2);
}
.g-sidenav__item--ativo .g-sidenav__contagem { background: var(--g-superficie); color: var(--g-primaria-ink); }
.g-sidenav__contagem--alerta { background: var(--g-perigo-bg); color: var(--g-perigo-ink); }

/* Ponto de novidade. Cor nunca e o unico portador de significado, entao o item
   que usa o ponto precisa dizer no title o que mudou. */
.g-sidenav__ponto { width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--g-radius-pill); background: var(--g-primaria); }

/* ---- item aninhado ---- */
.g-sidenav__sub { position: relative; margin: 1px 0 1px 18px; padding-left: var(--g-sp-3); display: flex; flex-direction: column; gap: 1px; }
.g-sidenav__sub::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--g-borda); }
.g-sidenav__item--sub { font-size: var(--g-fs-2xs); padding: var(--g-sp-1) var(--g-sp-2); color: var(--g-texto-suave); }
.g-sidenav__item--sub:hover { color: var(--g-texto); }
.g-sidenav__item--sub.g-sidenav__item--ativo { color: var(--g-primaria-ink); background: var(--g-primaria-suave); }
.g-sidenav__item--sub.g-sidenav__item--ativo::before { left: calc(-1 * var(--g-sp-3)); height: 14px; }

/* ---- rodape ---- */
.g-sidenav__rodape {
  flex-shrink: 0; padding: var(--g-sp-2);
  border-top: 1px solid var(--g-borda);
}
.g-sidenav__versao { padding: var(--g-sp-1) var(--g-sp-2); font-size: var(--g-fs-3xs); color: var(--g-texto-tenue); font-variant-numeric: tabular-nums; }

/* ---- trilho de icone ----
   O rotulo nao sai do DOM: o leitor de tela continua anunciando o destino, e
   o texto visivel vira a dica flutuante abaixo. Por isso o `title` deixou de
   ser obrigatorio no trilho; use so quando ele diz mais que o rotulo
   ("Pagamentos, 3 pendencias"). `title` igual ao rotulo duplica a dica. */
.g-sidenav--recolhido .g-sidenav__nome,
.g-sidenav--recolhido .g-sidenav__contagem,
.g-sidenav--recolhido .g-sidenav__grupo-rotulo,
.g-sidenav--recolhido .g-sidenav__seta,
.g-sidenav--recolhido .g-sidenav__versao {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
/* Dica do trilho. O rotulo nao sai do DOM: vira uma pilula flutuante ao lado
   do icone, que aparece no hover e no foco. `position: fixed` sem offset e de
   proposito: o elemento fica na posicao estatica, ao lado do icone, e escapa
   do overflow do corpo, que rola e recortaria qualquer coisa posicionada para
   fora dos 60px. Tooltip posicionada por JS continua sendo escolha da stack. */
.g-sidenav--recolhido .g-sidenav__texto {
  position: fixed;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  transform: translateX(calc(50% + 38px));
  padding: var(--g-sp-1) var(--g-sp-3);
  border-radius: var(--g-radius);
  background: var(--g-titulo); color: var(--g-superficie);
  font-size: var(--g-fs-2xs); font-weight: var(--g-fw-medio); white-space: nowrap;
  box-shadow: var(--g-shadow-md); z-index: var(--g-z-tooltip);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--g-dur-rapido) var(--g-ease), visibility var(--g-dur-rapido) var(--g-ease);
}
.g-sidenav--recolhido .g-sidenav__item:hover .g-sidenav__texto,
.g-sidenav--recolhido .g-sidenav__item:focus-visible .g-sidenav__texto { opacity: 1; visibility: visible; }
.g-sidenav--recolhido .g-sidenav__busca,
.g-sidenav--recolhido .g-sidenav__sub { display: none; }
.g-sidenav--recolhido .g-sidenav__grupo-cabeca { display: none; }
.g-sidenav--recolhido .g-sidenav__item { justify-content: center; padding: var(--g-sp-2) 0; }
.g-sidenav--recolhido .g-sidenav__item--ativo::before { left: 0; height: 100%; border-radius: 0 2px 2px 0; }
.g-sidenav--recolhido .g-sidenav__grupo--fechado .g-sidenav__itens { display: flex; }
.g-sidenav--recolhido .g-sidenav__grupo + .g-sidenav__grupo { margin-top: var(--g-sp-2); padding-top: var(--g-sp-2); border-top: 1px solid var(--g-borda); }
.g-sidenav--recolhido .g-sidenav__ponto { position: absolute; top: 6px; right: 12px; }

/* ---- oculto, a gaveta ----
   O menu some por inteiro e sobra uma faixa de 20px so com a alca, para trazer
   de volta. Diferente do trilho, que ainda navega. */
.g-sidenav--oculto { width: var(--g-sp-5); }
.g-sidenav--oculto > :not(.g-sidenav__alca) { display: none; }

/* ---- alca ----
   Botao na borda direita do menu, centrado na vertical e meio para fora. So
   aparece quando o mouse passa sobre o menu ou quando recebe foco, para nao
   poluir; no oculto fica sempre visivel, porque e a unica saida. O chevron
   aponta para a esquerda ("Esconder menu") e, no oculto, para a direita. */
.g-sidenav__alca {
  position: absolute; top: 50%; right: -11px; transform: translateY(-50%);
  width: 22px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-pill);
  background: var(--g-superficie); color: var(--g-texto-suave);
  box-shadow: var(--g-shadow-sm); cursor: pointer; z-index: 1;
  opacity: 0;
  transition: opacity var(--g-dur-rapido) var(--g-ease), color var(--g-dur-rapido) var(--g-ease);
}
.g-sidenav:hover .g-sidenav__alca, .g-sidenav__alca:focus-visible, .g-sidenav--oculto .g-sidenav__alca { opacity: 1; }
.g-sidenav__alca:hover { color: var(--g-titulo); border-color: var(--g-borda-forte); }
.g-sidenav__alca .g-ic { transform: rotate(90deg); }
.g-sidenav--oculto .g-sidenav__alca .g-ic { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   BARRA DE APLICACAO
   Nomeia a aplicacao, nao a tela. Filha direta de `.g-pagina`, na largura
   toda, na ordem: marca, secoes (`.g-topnav--barra`), busca centralizada e o
   grupo do fim (toggles de icone, sino com contagem, usuario). O nome da tela
   mora no masthead, no topo do conteudo. Ate a 3.x a barra so cobria o
   conteudo e carregava trilha e nome da tela; na 4.0.0 isso saiu.
   -------------------------------------------------------------------------- */
.g-appbar {
  height: 56px; flex-shrink: 0;
  width: 100%; min-width: 0;
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: 0 var(--g-sp-4);
  background: var(--g-superficie);
  border-bottom: 1px solid var(--g-borda);
}
.g-appbar__marca {
  display: flex; align-items: center; gap: var(--g-sp-2); flex-shrink: 0;
  text-decoration: none; color: var(--g-titulo);
  font-size: var(--g-fs-md); font-weight: var(--g-fw-semi);
  border-radius: var(--g-radius);
}
.g-appbar__marca:hover { text-decoration: none; }
.g-appbar__logo { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.g-appbar__nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A busca e um botao: abre a paleta ou foca o campo, quem decide e a stack. O
   `kbd` dentro e so indicacao do atalho. As margens automaticas dos dois lados
   a centralizam, e o grupo do fim continua encostado a direita. */
.g-appbar__busca {
  margin-left: auto; margin-right: auto; flex: 0 1 400px; min-width: 0;
  display: flex; align-items: center; gap: var(--g-sp-2);
  height: 36px; padding: 0 var(--g-sp-3) 0 var(--g-sp-4);
  border-radius: var(--g-radius-pill);
  background: var(--g-fundo); border: 1px solid var(--g-borda);
  color: var(--g-texto-suave);
  font-family: inherit; font-size: var(--g-fs-sm); cursor: text; text-align: left;
}
.g-appbar__busca:hover { border-color: var(--g-borda-forte); }
.g-appbar__busca > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-appbar__busca .g-kbd { background: transparent; }
.g-appbar__toggle {
  position: relative;
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius);
  background: transparent; color: var(--g-texto-suave); cursor: pointer;
}
.g-appbar__toggle:hover { background: var(--g-fundo); color: var(--g-texto); }
/* Contagem do sino: pilula lima no canto superior direito do botao. */
.g-appbar__contagem {
  position: absolute; top: 2px; right: 0;
  min-width: 16px; height: 16px; padding: 0 var(--g-sp-1);
  border-radius: var(--g-radius-pill);
  background: var(--g-destaque); color: var(--g-destaque-ink);
  font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi); line-height: 1;
  display: grid; place-items: center; pointer-events: none;
}
/* A marcacao canonica da 4.0.0 nao usa `__id`, `__titulo` nem a trilha dentro
   da barra: o nome da tela foi para o masthead. Ficam para quem ja usa. */
/* O bloco que identifica a tela: trilha em cima, nome embaixo. Precisa de
   min-width: 0 proprio, senao o filho com ellipsis nunca encolhe e a barra
   empurra o menu do usuario para fora. */
.g-appbar__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.g-appbar__titulo { font-size: var(--g-fs-md); font-weight: var(--g-fw-semi); color: var(--g-titulo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
/* Na barra a trilha e uma linha so: ela situa, nao pode roubar altura do nome. */
.g-appbar .g-trilha ol { flex-wrap: nowrap; }
.g-appbar .g-trilha { overflow: hidden; }
.g-appbar__fim { margin-left: auto; display: flex; align-items: center; gap: var(--g-sp-2); }
@media (max-width: 900px) {
  .g-appbar { padding: 0 var(--g-sp-3); gap: var(--g-sp-2); }
  .g-appbar .g-usuario__id, .g-appbar__busca .g-kbd, .g-appbar__nome { display: none; }
  .g-appbar__busca { flex: 1 1 auto; }
}

.g-avatar {
  position: relative;
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--g-radius-pill);
  background: var(--g-primaria); color: var(--g-primaria-sobre);
  font-size: var(--g-fs-2xs); font-weight: var(--g-fw-semi);
  overflow: hidden;
}
.g-avatar img { width: 100%; height: 100%; object-fit: cover; }
.g-avatar--lg { width: 40px; height: 40px; font-size: var(--g-fs-sm); }
/* Tamanhos para quem esta ao lado da mensagem (sm) e para a fileira de quem
   leu ou votou (xs). */
.g-avatar--sm { width: 24px; height: 24px; font-size: var(--g-fs-3xs); }
.g-avatar--xs { width: 20px; height: 20px; font-size: var(--g-fs-3xs); }

/* Presenca: ponto no canto e anel na cor do estado, dentro do proprio avatar.
   O ponto e filho, entao o avatar deixa de recortar (`overflow: visible`) so
   quando o tem, e a imagem passa a recortar a si mesma. Cor nunca e o unico
   portador de significado: o ponto leva `title` com o estado por extenso, e o
   offline e tracejado, o que o distingue sem depender da cor. */
.g-avatar:has(.g-avatar__presenca) { overflow: visible; }
.g-avatar:has(.g-avatar__presenca) img { border-radius: inherit; }
.g-avatar__presenca {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: var(--g-radius-pill);
  background: var(--g-texto-tenue);
  box-shadow: 0 0 0 2px var(--g-superficie);
}
.g-avatar--lg .g-avatar__presenca { width: 12px; height: 12px; }
.g-avatar--sm .g-avatar__presenca, .g-avatar--xs .g-avatar__presenca { width: 8px; height: 8px; right: -1px; bottom: -1px; }
.g-avatar__presenca--online  { background: var(--g-sucesso); }
.g-avatar__presenca--ausente { background: var(--g-atencao); }
.g-avatar__presenca--ocupado { background: var(--g-perigo); }
.g-avatar__presenca--offline { background: var(--g-superficie); box-shadow: 0 0 0 2px var(--g-superficie), inset 0 0 0 2px var(--g-borda-forte); }
.g-avatar:has(.g-avatar__presenca--online)  { outline: 2px solid var(--g-sucesso); outline-offset: 2px; }
.g-avatar:has(.g-avatar__presenca--ausente) { outline: 2px solid var(--g-atencao); outline-offset: 2px; }
.g-avatar:has(.g-avatar__presenca--ocupado) { outline: 2px solid var(--g-perigo); outline-offset: 2px; }
.g-avatar:has(.g-avatar__presenca--offline) { outline: 2px dashed var(--g-borda-forte); outline-offset: 2px; }

.g-usuario {
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: var(--g-sp-1) var(--g-sp-2);
  border: 0; border-radius: var(--g-radius);
  background: transparent; cursor: pointer; font-family: inherit;
}
.g-usuario:hover { background: var(--g-fundo); }
/* `text-align: right` porque o avatar vem DEPOIS do nome: o texto encosta nele
   em vez de deixar folga no meio do bloco. */
.g-usuario__id { flex: 1; min-width: 0; text-align: right; line-height: var(--g-lh-justa); }
.g-usuario__nome, .g-usuario__papel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-usuario__nome { font-size: var(--g-fs-2xs); font-weight: var(--g-fw-medio); color: var(--g-titulo); }
.g-usuario__papel { font-size: var(--g-fs-3xs); color: var(--g-texto-suave); }

/* Menu suspenso, usado pelo menu de usuario e por qualquer acao agrupada. */
.g-menu {
  min-width: 200px; padding: var(--g-sp-1);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md); z-index: var(--g-z-dropdown);
}
.g-menu__rotulo {
  padding: var(--g-sp-2); font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi);
  text-transform: uppercase; letter-spacing: var(--g-ls-caps); color: var(--g-texto-tenue);
}
.g-menu__item {
  display: flex; align-items: center; gap: var(--g-sp-2); width: 100%;
  padding: var(--g-sp-2); border: 0; border-radius: var(--g-radius);
  background: transparent; text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--g-fs-sm); color: var(--g-texto); text-decoration: none;
}
.g-menu__item:hover { background: var(--g-fundo); text-decoration: none; }
.g-menu__item--perigo { color: var(--g-perigo-ink); }
.g-menu__item--perigo:hover { background: var(--g-perigo-bg); }
.g-menu__sep { height: 1px; margin: var(--g-sp-1) 0; background: var(--g-borda); }

/* --------------------------------------------------------------------------
   SELECAO DE DATA
   Um componente, dois modos: data unica e intervalo. Os atalhos existem porque
   quase toda consulta destas telas e "hoje" ou "ultimos 30 dias", e obrigar a
   navegar o calendario para isso e trabalho a mais em cima do caso comum.
   -------------------------------------------------------------------------- */
.g-data { position: relative; display: inline-flex; flex-direction: column; gap: var(--g-sp-1); }
.g-data__campo {
  display: inline-flex; align-items: center; gap: var(--g-sp-2);
  height: 34px; padding: 0 var(--g-sp-3);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda-forte); border-radius: var(--g-radius);
  font-size: var(--g-fs-sm); color: var(--g-texto);
  cursor: pointer; font-family: inherit;
}
.g-data__campo:hover { border-color: var(--g-texto-tenue); }
.g-data__valor { font-variant-numeric: tabular-nums; }
.g-data__valor--vazio { color: var(--g-texto-tenue); }
.g-data__icone { color: var(--g-texto-suave); display: inline-flex; }

.g-data__pop {
  position: absolute; top: calc(100% + 4px); left: 0;
  display: flex; gap: var(--g-sp-3); padding: var(--g-sp-3);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md); z-index: var(--g-z-popover);
}
.g-data__atalhos { display: flex; flex-direction: column; gap: 2px; min-width: 132px; padding-right: var(--g-sp-3); border-right: 1px solid var(--g-borda); }
.g-data__atalho {
  padding: var(--g-sp-1) var(--g-sp-2); border: 0; border-radius: var(--g-radius-sm);
  background: transparent; text-align: left; cursor: pointer;
  font-family: inherit; font-size: var(--g-fs-2xs); color: var(--g-texto);
}
.g-data__atalho:hover { background: var(--g-fundo); }
.g-data__atalho--ativo { background: var(--g-primaria-suave); color: var(--g-primaria-ink); font-weight: var(--g-fw-medio); }
.g-data__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-3); margin-top: var(--g-sp-3); padding-top: var(--g-sp-3); border-top: 1px solid var(--g-borda); }

.g-cal { width: 232px; }
.g-cal__cabeca { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--g-sp-2); }
.g-cal__mes { font-size: var(--g-fs-2xs); font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.g-cal__nav {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius-sm); background: transparent;
  color: var(--g-texto-suave); cursor: pointer;
}
.g-cal__nav:hover { background: var(--g-fundo); color: var(--g-texto); }
.g-cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.g-cal__dow {
  text-align: center; padding: var(--g-sp-1) 0;
  font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi);
  text-transform: uppercase; color: var(--g-texto-tenue);
}
.g-cal__dia {
  aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--g-fs-2xs); color: var(--g-texto);
  border-radius: var(--g-radius-sm); font-variant-numeric: tabular-nums;
}
.g-cal__dia:hover { background: var(--g-fundo); }
.g-cal__dia--fora { color: var(--g-texto-tenue); }
/* Hoje e marcado por contorno, nao por preenchimento: preenchimento e reservado
   para selecao, e usar o mesmo tratamento nos dois faz a pessoa achar que hoje
   ja esta escolhido. */
.g-cal__dia--hoje { box-shadow: inset 0 0 0 1px var(--g-primaria); color: var(--g-primaria-ink); font-weight: var(--g-fw-semi); }
.g-cal__dia--sel { background: var(--g-primaria); color: var(--g-primaria-sobre); font-weight: var(--g-fw-semi); }
.g-cal__dia--sel:hover { background: var(--g-primaria-hover); }
/* Intervalo: extremos preenchidos, meio tingido. O radius dos extremos aponta
   para dentro, para a faixa ler como uma faixa. */
.g-cal__dia--faixa { background: var(--g-primaria-suave); color: var(--g-primaria-ink); border-radius: 0; }
.g-cal__dia--inicio { background: var(--g-primaria); color: var(--g-primaria-sobre); font-weight: var(--g-fw-semi); border-radius: var(--g-radius-sm) 0 0 var(--g-radius-sm); }
.g-cal__dia--fim    { background: var(--g-primaria); color: var(--g-primaria-sobre); font-weight: var(--g-fw-semi); border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0; }
.g-cal__dia:disabled { color: var(--g-texto-tenue); cursor: not-allowed; background: transparent; }

/* --------------------------------------------------------------------------
   ICONE
   Tracado 24x24 na cor do texto, servido pelo sprite dist/icones.svg. Inline
   de proposito: nao existe biblioteca de icone que atenda as cinco stacks da
   plataforma ao mesmo tempo, e lucide resolveria so os fronts React.

   Inline o sprite uma vez no layout da aplicacao, depois referencie:
     <svg class="g-ic"><use href="#i-tabela"/></svg>

   O `fill` e o `stroke` vem daqui e nao de atributo de apresentacao, porque
   CSS ganha de atributo: o traco herda a cor do elemento que contem o icone,
   entao item ativo, texto de perigo e texto suave acertam a cor sozinhos.
   -------------------------------------------------------------------------- */
.g-ic {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.g-ic .solido { fill: currentColor; stroke: none; }
.g-ic--sm { width: 14px; height: 14px; }
.g-ic--lg { width: 20px; height: 20px; stroke-width: 1.6; }
.g-ic--xl { width: 32px; height: 32px; stroke-width: 1.5; }
/* Icone de tipo de arquivo (i-arq-*): a tarja e preenchida pela cor da familia
   e a sigla e <text> em branco, que nao troca de tema como a tarja tambem nao
   troca. Os dois saem do traco. */
.g-ic .tarja { stroke: none; }
.g-ic .sigla { fill: var(--g-sobre-preenchimento); stroke: none; font-family: var(--g-font-sans); font-weight: var(--g-fw-forte); }

/* --------------------------------------------------------------------------
   MENU SUPERIOR
   Complementa a barra de aplicacao: entra como segunda linha embaixo dela, ou
   como grupo segmentado dentro dela.

   Tres colocacoes porque as tres existem no produto. A partir da 4.0.0 o
   padrao e dentro da barra (`--barra`, pilulas); a linha embaixo fica para a
   aplicacao com mais secoes do que cabe na barra. A linha tem
   tarja embaixo do item ativo, que amarra visualmente com o conteudo logo
   abaixo. O `--segmentado` e o grupo de pilulas com fundo tingido e o ativo
   elevado em branco, que e o desenho do cabecalho do Management.Client e cabe
   dentro da propria barra.

   NAO DESAPARECE EM TELA ESTREITA. O cabecalho do Management.Client e
   `hidden lg:flex`: abaixo de lg a navegacao inteira sai da tela. Aqui a lista
   rola na horizontal, que resolve sem JS e sem esconder destino nenhum.
   -------------------------------------------------------------------------- */
.g-topnav {
  position: relative;
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: 0 var(--g-sp-4);
  background: var(--g-superficie);
  border-bottom: 1px solid var(--g-borda);
}
.g-topnav__lista {
  display: flex; align-items: center; gap: var(--g-sp-1);
  min-width: 0; overflow-x: auto;
  /* Barra de rolagem escondida de proposito: a linha e curta e a barra visivel
     roubaria altura do cabecalho. O gesto e o teclado continuam funcionando. */
  scrollbar-width: none;
}
.g-topnav__lista::-webkit-scrollbar { display: none; }

/* O MENU SUSPENSO NAO PODE MORAR DENTRO DA LISTA
   A lista rola na horizontal, e container que rola recorta tudo que e
   posicionado fora dele. Rolagem e menu nao recortado sao excludentes no mesmo
   elemento: `overflow-x: auto` sempre implica recorte no eixo vertical tambem.

   Escolhemos manter a rolagem, porque ela e o conserto do defeito que o
   componente veio corrigir, e o menu sai da lista. Ele vira filho direto do
   `.g-topnav`, ou vai para o body pela stack, do mesmo jeito que o dialogo. O
   deslocamento horizontal e a stack que calcula, alinhando com o gatilho. */
.g-topnav > .g-menu { position: absolute; top: 100%; margin-top: 2px; }

.g-topnav__item {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: var(--g-sp-2);
  height: 40px; padding: 0 var(--g-sp-3);
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: var(--g-fs-sm); color: var(--g-texto-suave);
  white-space: nowrap; text-decoration: none;
  border-radius: var(--g-radius) var(--g-radius) 0 0;
  transition: color var(--g-dur-rapido) var(--g-ease), background var(--g-dur-rapido) var(--g-ease);
}
.g-topnav__item:hover { color: var(--g-titulo); background: var(--g-fundo); text-decoration: none; }

/* Item ativo: tarja embaixo, na borda do container, mais cor e peso. A tarja
   sozinha e discreta demais quando a linha tem muitos itens. */
.g-topnav__item--ativo { color: var(--g-primaria-ink); font-weight: var(--g-fw-medio); }
.g-topnav__item--ativo::after {
  content: ''; position: absolute; left: var(--g-sp-2); right: var(--g-sp-2); bottom: -1px;
  height: 2px; background: var(--g-primaria); border-radius: 2px 2px 0 0;
}

.g-topnav__fim { margin-left: auto; display: flex; align-items: center; gap: var(--g-sp-2); flex-shrink: 0; }
.g-topnav__sep { width: 1px; height: 20px; background: var(--g-borda); flex-shrink: 0; }

/* ---- variante segmentada, para dentro da propria barra ---- */
.g-topnav--segmentado { padding: 0; border-bottom: 0; background: transparent; }
.g-topnav--segmentado .g-topnav__lista {
  background: var(--g-fundo); border-radius: var(--g-radius-md);
  padding: 3px; gap: 2px;
}
.g-topnav--segmentado .g-topnav__item {
  height: 28px; padding: 0 var(--g-sp-3);
  font-size: var(--g-fs-2xs); border-radius: var(--g-radius);
}
.g-topnav--segmentado .g-topnav__item:hover { background: var(--g-superficie); }
.g-topnav--segmentado .g-topnav__item--ativo {
  background: var(--g-superficie); box-shadow: var(--g-shadow-sm); color: var(--g-primaria-ink);
}
.g-topnav--segmentado .g-topnav__item--ativo::after { content: none; }

/* ---- dentro da barra, pilulas ----
   E a colocacao padrao a partir da 4.0.0: as secoes moram na `.g-appbar`, ao
   lado da marca. A linha embaixo da barra fica para quando nao cabe. */
.g-topnav--barra { padding: 0; border-bottom: 0; background: transparent; flex-shrink: 1; min-width: 0; }
.g-topnav--barra .g-topnav__item {
  height: 34px; padding: 0 var(--g-sp-3);
  border-radius: var(--g-radius-pill);
  font-weight: var(--g-fw-medio); color: var(--g-texto-suave);
}
.g-topnav--barra .g-topnav__item:hover { background: var(--g-fundo); color: var(--g-titulo); }
.g-topnav--barra .g-topnav__item--ativo,
.g-topnav--barra .g-topnav__item--ativo:hover { background: var(--g-primaria); color: var(--g-primaria-sobre); }
.g-topnav--barra .g-topnav__item--ativo::after { content: none; }

/* --------------------------------------------------------------------------
   ABAS
   Trocam o conteudo dentro da MESMA tela. Nao confundir com `.g-topnav`, que
   troca de secao da aplicacao, nem com `.g-topnav--segmentado`, que alterna o
   recorte de um mesmo conteudo.

   Desenho de pasta, copiado da tela Brick Insights e conferido no computed
   style: a aba ativa sobe para a cor do painel, cobre a linha do container com
   a propria borda de baixo e recebe uma tarja no TOPO. As inativas ficam num
   degrau tingido, como se estivessem atras.

   A tarja e no topo de proposito. Embaixo ela brigaria com a linha do
   container, que e justamente o que a aba ativa precisa romper para parecer
   contigua ao painel.
   -------------------------------------------------------------------------- */
.g-tabs {
  display: flex; gap: var(--g-sp-1);
  padding: var(--g-sp-2) var(--g-sp-5) 0;
  background: var(--g-superficie);
  border-bottom: 1px solid var(--g-borda);
  overflow-x: auto; scrollbar-width: none;
}
.g-tabs::-webkit-scrollbar { display: none; }

/* As DUAS abas tem borda em cima, esquerda e direita, e as duas sobem 1px com
   `margin-bottom: -1px`. E isso que faz o conjunto ler como pasta em vez de
   fileira de chip: cada aba e uma caixa delineada que encosta na linha do
   container. A diferenca entre os estados esta na borda de BAIXO. */
.g-tabs__item {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 var(--g-sp-4);
  margin-bottom: -1px;
  border: 1px solid var(--g-borda); border-bottom: 0;
  border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0;
  background: var(--g-fundo); color: var(--g-texto-suave);
  font-family: inherit; font-size: var(--g-fs-xs); font-weight: var(--g-fw-semi);
  text-transform: uppercase; letter-spacing: var(--g-ls-caps);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.g-tabs__item:hover { color: var(--g-titulo); text-decoration: none; }

.g-tabs__item--ativo {
  /* A borda de baixo na cor da superficie e o que rompe a linha do container.
     Sem ela a aba ativa fica separada do painel por um traco e deixa de ler
     como contigua. */
  background: var(--g-superficie);
  border-bottom: 1px solid var(--g-superficie);
  color: var(--g-primaria-ink);
  font-size: var(--g-fs-sm);
  box-shadow: inset 0 2px 0 0 var(--g-primaria);
}
.g-tabs__item:disabled { color: var(--g-texto-tenue); cursor: not-allowed; }

.g-tabs__painel { background: var(--g-superficie); padding: var(--g-sp-4) var(--g-sp-5); }

/* --------------------------------------------------------------------------
   COMBOBOX
   Campo de busca com lista, para escolher UM item de um conjunto grande demais
   para um `<select>`: loja, distribuidor, produto. Medido no `.loja-picker` da
   tela Brick Insights.

   Nao substitui o `.g-select`. A regra e o tamanho do conjunto: ate umas quinze
   opcoes o nativo e melhor, porque ja tem teclado, busca por digitacao e
   comportamento de sistema no celular. Acima disso a pessoa precisa filtrar, e
   ai entra este.

   Uma diferenca deliberada em relacao a referencia: la o valor escolhido mora
   no `placeholder` do input, com uma regra que o pinta de cor de texto enquanto
   o campo nao tem foco. Fica igual na tela e errado para quem usa leitor de
   tela, que anuncia placeholder como dica e nao como valor. Aqui o valor e
   texto de verdade e o input so aparece na busca.
   -------------------------------------------------------------------------- */
.g-combo { position: relative; display: inline-block; min-width: 280px; }

.g-combo__campo {
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: var(--g-sp-1) var(--g-sp-2) var(--g-sp-1) var(--g-sp-3);
  min-height: 44px;
  background: var(--g-superficie);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-sm);
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit;
}
.g-combo__campo:hover { border-color: var(--g-borda-forte); }
.g-combo__icone { color: var(--g-texto-suave); flex-shrink: 0; display: inline-flex; }
.g-combo__corpo { flex: 1; min-width: 0; }

/* O rotulo fica DENTRO do campo, e nao acima. Numa barra de cabecalho cheia,
   rotulo externo gasta uma linha inteira de altura que a tela nao tem. */
.g-combo__rotulo {
  display: block;
  font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi);
  text-transform: uppercase; letter-spacing: var(--g-ls-caps);
  color: var(--g-texto-suave); line-height: var(--g-lh-justa);
}
.g-combo__valor {
  display: block; font-size: var(--g-fs-sm); font-weight: var(--g-fw-medio);
  color: var(--g-titulo); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-combo__valor--vazio { color: var(--g-texto-suave); font-weight: var(--g-fw-normal); }

/* Entrada de busca: aparece no lugar do valor quando a lista abre. Sem borda
   propria, porque a borda ja e a do campo. */
.g-combo__entrada {
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: transparent; font-family: inherit;
  font-size: var(--g-fs-sm); color: var(--g-titulo); line-height: 1.4;
}
.g-combo__entrada:focus { outline: none; }
.g-combo__campo:focus-within { border-color: var(--g-primaria); box-shadow: var(--g-focus-ring); }

.g-combo__lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: var(--g-sp-1); list-style: none;
  background: var(--g-superficie);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-sm);
  box-shadow: var(--g-shadow);
  max-height: 320px; overflow-y: auto; z-index: var(--g-z-dropdown);
}
.g-combo__opcao {
  padding: var(--g-sp-2) var(--g-sp-2); border-radius: 3px; cursor: pointer;
  transition: background var(--g-dur-rapido) var(--g-ease);
}
.g-combo__opcao:hover,
.g-combo__opcao[aria-selected='true'] { background: var(--g-primaria-suave); }
.g-combo__nome { font-size: var(--g-fs-sm); font-weight: var(--g-fw-medio); color: var(--g-titulo); margin-bottom: 2px; }
/* A segunda linha e monoespacada porque quase sempre e CNPJ, EAN ou ID, e
   documento em largura constante e conferido de relance. */
.g-combo__meta { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); font-family: var(--g-font-mono); }

.g-combo__opcao--alerta { background: var(--g-perigo-bg); }
.g-combo__opcao--alerta:hover { background: var(--g-perigo-borda); }
.g-combo__opcao--alerta .g-combo__nome { color: var(--g-perigo-ink); }

.g-combo__vazio { padding: var(--g-sp-4) var(--g-sp-2); text-align: center; font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }

/* --------------------------------------------------------------------------
   TECLA
   Dica de atalho. Vive no combobox e em qualquer campo com atalho de foco.
   -------------------------------------------------------------------------- */
.g-kbd {
  font-family: var(--g-font-mono); font-size: var(--g-fs-3xs);
  color: var(--g-texto-suave); background: var(--g-fundo);
  border: 1px solid var(--g-borda); border-radius: 3px;
  padding: 1px 5px; flex-shrink: 0; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BARRA DE PROGRESSO
   Progresso determinado, quando existe um total conhecido. Quando nao existe,
   use o girador: barra que enche sozinha sem saber o total mente sobre o
   quanto falta.
   -------------------------------------------------------------------------- */
.g-progresso { display: block; }
.g-progresso__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-sp-3); margin-bottom: var(--g-sp-1); }
.g-progresso__rotulo { font-size: var(--g-fs-2xs); color: var(--g-texto); }
.g-progresso__valor { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); font-variant-numeric: tabular-nums; }
.g-progresso__trilho {
  height: 6px; border-radius: var(--g-radius-pill);
  background: var(--g-superficie-alt); overflow: hidden;
}
.g-progresso__barra {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--g-primaria);
  transition: width var(--g-dur-lento) var(--g-ease);
}
.g-progresso--sucesso .g-progresso__barra { background: var(--g-sucesso); }
.g-progresso--perigo  .g-progresso__barra { background: var(--g-perigo); }
.g-progresso--atencao .g-progresso__barra { background: var(--g-atencao); }
.g-progresso--lg .g-progresso__trilho { height: 10px; }
.g-progresso--sm .g-progresso__trilho { height: 4px; }

/* Indeterminado: nao sabe a porcentagem, so que ainda esta acontecendo. */
.g-progresso--indeterminado .g-progresso__barra {
  width: 35%; transition: none;
  animation: g-progresso-corre 1.3s ease-in-out infinite;
}
@keyframes g-progresso-corre {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* --------------------------------------------------------------------------
   GIRADOR E CARREGAMENTO
   -------------------------------------------------------------------------- */
.g-girador {
  width: 24px; height: 24px; flex-shrink: 0;
  border: 2.5px solid var(--g-borda);
  border-top-color: var(--g-primaria);
  border-radius: var(--g-radius-pill);
  animation: g-girar 0.7s linear infinite;
}
.g-girador--sm { width: 16px; height: 16px; border-width: 2px; }
.g-girador--lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes g-girar { to { transform: rotate(360deg); } }

/* O reset de movimento reduzido do base.css zera a duracao de toda animacao.
   Num girador isso e pior que nao ter: ele congela e a tela parece travada.
   Aqui ele continua girando, so que devagar. */
@media (prefers-reduced-motion: reduce) {
  .g-shell .g-girador { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
  .g-shell .g-progresso--indeterminado .g-progresso__barra { animation-duration: 3s !important; animation-iteration-count: infinite !important; }
}

/* Cartao de carregamento sobre a tela. O fundo desfoca em vez de escurecer:
   a pessoa continua reconhecendo onde estava, e fica claro que o conteudo
   volta, nao que abriu outra coisa. */
.g-carregando {
  position: fixed; inset: 0; z-index: var(--g-z-overlay);
  display: flex; align-items: center; justify-content: center;
  background: var(--g-veu-leve);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.g-carregando__cartao {
  display: flex; align-items: center; gap: var(--g-sp-4);
  padding: var(--g-sp-5) var(--g-sp-6);
  background: var(--g-superficie);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md);
  max-width: min(420px, calc(100vw - 32px));
}
.g-carregando__titulo { font-size: var(--g-fs-md); font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.g-carregando__nota { font-size: var(--g-fs-sm); color: var(--g-texto-suave); margin-top: 2px; }

/* --------------------------------------------------------------------------
   MODAL
   Estruturado, com cabecalho, corpo que rola e rodape. Nao confundir com
   `.g-dialog`, que e a confirmacao curta de uma frase e dois botoes.
   -------------------------------------------------------------------------- */
.g-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: var(--g-z-modal);
  display: flex; flex-direction: column;
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--g-superficie);
  border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow-lg);
  overflow: hidden;
}
.g-modal--sm { width: min(480px, calc(100vw - 32px)); }
.g-modal--lg { width: min(1200px, calc(100vw - 32px)); }

.g-modal__cabeca {
  display: flex; align-items: flex-start; gap: var(--g-sp-3);
  padding: var(--g-sp-5); border-bottom: 1px solid var(--g-borda);
}
.g-modal__icone {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--g-radius-md);
  background: var(--g-atencao-bg); color: var(--g-atencao-ink);
}
.g-modal__texto { flex: 1; min-width: 0; }
.g-modal__titulo { font-size: var(--g-fs-lg); font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.g-modal__sub { font-size: var(--g-fs-sm); color: var(--g-texto-suave); margin-top: 2px; }
/* Espaco para indicador no cabecalho, como o par de KPIs do modal de
   oportunidades. */
.g-modal__slot { display: flex; align-items: center; gap: var(--g-sp-2); flex-shrink: 0; }
.g-modal__fechar {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius); background: transparent;
  color: var(--g-texto-suave); cursor: pointer;
}
.g-modal__fechar:hover { background: var(--g-fundo); color: var(--g-titulo); }

.g-modal__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--g-sp-5); }
.g-modal__corpo--zero { padding: 0; }
.g-modal__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-3);
  padding: var(--g-sp-4) var(--g-sp-5); border-top: 1px solid var(--g-borda);
  background: var(--g-fundo);
}

/* --------------------------------------------------------------------------
   TOAST
   Aviso curto que aparece, informa e some sozinho. Nao use para erro que exige
   decisao: isso e `.g-alert` na tela, que fica ate a pessoa resolver.
   -------------------------------------------------------------------------- */
.g-toasts {
  position: fixed; bottom: var(--g-sp-5); right: var(--g-sp-5);
  z-index: var(--g-z-toast);
  display: flex; flex-direction: column-reverse; gap: var(--g-sp-2);
  max-width: min(400px, calc(100vw - 32px));
}
.g-toast {
  display: flex; align-items: flex-start; gap: var(--g-sp-3);
  padding: var(--g-sp-3) var(--g-sp-4);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda); border-left: 3px solid var(--g-texto-suave);
  border-radius: var(--g-radius); box-shadow: var(--g-shadow-md);
  /* A entrada anima SO o deslocamento, nunca a opacidade. Aviso que depende de
     uma animacao terminar para ficar visivel some de vez se a animacao nao
     rodar, e a pessoa nunca fica sabendo do que foi avisada. Com deslocamento
     puro, o pior caso e o toast aparecer 16px fora do lugar. */
  animation: g-toast-entra var(--g-dur-base) var(--g-ease);
}
@keyframes g-toast-entra {
  from { transform: translateX(16px); }
  to   { transform: translateX(0); }
}
.g-toast__icone { flex-shrink: 0; margin-top: 1px; color: var(--g-texto-suave); }
.g-toast__corpo { flex: 1; min-width: 0; }
.g-toast__titulo { font-size: var(--g-fs-sm); font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.g-toast__nota { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); margin-top: 2px; }
.g-toast__fechar {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius-sm); background: transparent;
  color: var(--g-texto-tenue); cursor: pointer;
}
.g-toast__fechar:hover { background: var(--g-fundo); color: var(--g-texto); }

.g-toast--sucesso { border-left-color: var(--g-sucesso); }
.g-toast--sucesso .g-toast__icone { color: var(--g-sucesso-ink); }
.g-toast--perigo  { border-left-color: var(--g-perigo); }
.g-toast--perigo .g-toast__icone { color: var(--g-perigo-ink); }
.g-toast--atencao { border-left-color: var(--g-atencao); }
.g-toast--atencao .g-toast__icone { color: var(--g-atencao-ink); }
.g-toast--info    { border-left-color: var(--g-info); }
.g-toast--info .g-toast__icone { color: var(--g-info-ink); }

/* --------------------------------------------------------------------------
   CEZITO
   O assistente da Gruppy. A arte vem de `dist/cezito.svg`. As cores sao do
   personagem e NAO trocam com o tema, do mesmo jeito que um logotipo nao troca.

   Quatro estados, e cada um diz uma coisa diferente:
     cz-buscando  procurando, antena roxa pulsando, olhos varrendo
     cz-achou     achou, antena verde, olhos sorrindo, bracos erguidos
     cz-triste    nao achou, antena caida, braco acenando tchau
     cz-fab       botao flutuante, segurando a plaquinha com o numero

   E personagem, nao icone. Por isso balanca, por isso a antena pulsa, e por
   isso o balao tem bico apontando para ele.
   -------------------------------------------------------------------------- */
.g-cezito {
  position: fixed; right: var(--g-sp-5); bottom: var(--g-sp-5);
  z-index: var(--g-z-sticky);
  display: flex; align-items: center; gap: var(--g-sp-3);
}
.g-cezito__btn {
  position: relative;
  border: 0; background: none; padding: 0; cursor: pointer; line-height: 0;
  animation: g-cezito-pula 2.4s ease-in-out infinite;
}
.g-cezito__btn:hover { filter: brightness(1.04); }
.g-cezito__btn:focus-visible { outline: 2px solid var(--g-primaria); outline-offset: 3px; border-radius: var(--g-radius-lg); }
.g-cezito__svg { width: 86px; height: auto; display: block; }
.g-cezito__svg--sm { width: 64px; }
/* Numero da plaquinha. A regra existe para a fonte vir do token e nao do
   atributo do desenho: CSS ganha de atributo de apresentacao. */
.g-cezito__num { font-family: var(--g-font-sans); }
@keyframes g-cezito-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Antena: pulsa enquanto ele esta ativo. */
.g-cezito__antena { transform-origin: 60px 14px; animation: g-cezito-pulso 1.1s ease-in-out infinite; }
@keyframes g-cezito-pulso {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Olhos varrendo, so no estado buscando: e o que faz "procurando" ler como
   procurando, e nao como parado esperando. */
.g-cezito__olhos { animation: g-cezito-varre 2.2s ease-in-out infinite; }
@keyframes g-cezito-varre {
  0%, 20%   { transform: translateX(0); }
  35%, 50%  { transform: translateX(-5px); }
  65%, 85%  { transform: translateX(5px); }
  100%      { transform: translateX(0); }
}

/* Braco, haste e plaquinha balancam juntos, num grupo so. */
.g-cezito__placa { transform-origin: 86px 100px; animation: g-cezito-placa 2.2s ease-in-out infinite; }
@keyframes g-cezito-placa {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}

/* Aceno de tchau, no estado triste: nao e um estado separado, e o proprio
   "nao achei nada" se despedindo. */
.g-cezito__braco-acena { transform-origin: 84px 102px; animation: g-cezito-acena 1s ease-in-out infinite; }
@keyframes g-cezito-acena {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(22deg); }
}

/* Vapor da xicara, na figurinha do cafe: sobe e some, devagar. */
.g-cezito__vapor { animation: g-cezito-vapor 1.8s ease-in-out infinite; }
@keyframes g-cezito-vapor {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* Figurinha: o Cezito como mensagem, sem bolha. O numero e tamanho fixo de
   proposito (120px), para a figurinha ler como figurinha e nao como avatar. */
.g-figurinha { width: 120px; height: 132px; display: block; }
.g-figurinha--sm { width: 72px; height: 80px; }

/* ---- balao ---- */
.g-cezito__balao {
  position: relative; order: -1;
  max-width: 240px; padding: var(--g-sp-2) var(--g-sp-3);
  background: var(--g-superficie);
  /* Contorno grosso e escuro, nao a borda fina de cartao: o balao e de
     personagem e precisa do tracado de quadrinho. Usa --g-texto, que no tema
     escuro clareia sozinho e mantem o contorno visivel. */
  border: 2px solid var(--g-texto);
  border-radius: 18px;
  font-size: var(--g-fs-sm); line-height: 1.35; color: var(--g-texto);
}
/* O bico sao dois triangulos sobrepostos, o de tras na cor do contorno e o da
   frente na cor do fundo, deslocado. E o jeito de desenhar bico com contorno
   sem SVG. */
.g-cezito__balao::before,
.g-cezito__balao::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0;
  border-style: solid; border-color: transparent;
}
.g-cezito__balao::before { right: -15px; margin-top: -7px; border-width: 7px 0 7px 15px; border-left-color: var(--g-texto); }
.g-cezito__balao::after  { right: -11px; margin-top: -5px; border-width: 5px 0 5px 11px; border-left-color: var(--g-superficie); }

/* Reticencias de "ainda estou trabalhando". */
.g-cezito__pontos { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: middle; }
.g-cezito__pontos i {
  width: 4px; height: 4px; border-radius: var(--g-radius-pill);
  background: var(--g-texto-suave);
  animation: g-cezito-ponto 1.2s ease-in-out infinite;
}
.g-cezito__pontos i:nth-child(2) { animation-delay: 0.15s; }
.g-cezito__pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes g-cezito-ponto {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.g-cezito__fechar {
  position: absolute; top: -4px; left: -4px;
  width: 20px; height: 20px; padding: 0;
  display: none; align-items: center; justify-content: center;
  border: 1.5px solid var(--g-borda-forte); border-radius: var(--g-radius-pill);
  background: var(--g-superficie); color: var(--g-texto-suave); cursor: pointer;
}
.g-cezito:hover .g-cezito__fechar,
.g-cezito:focus-within .g-cezito__fechar { display: inline-flex; }
.g-cezito__fechar:hover { color: var(--g-titulo); border-color: var(--g-texto-suave); }

/* Em movimento reduzido o Cezito para de se mexer por inteiro. Aqui parado nao
   engana ninguem: ele continua sendo um desenho, ao contrario do girador. */
@media (prefers-reduced-motion: reduce) {
  .g-shell .g-cezito__btn, .g-shell .g-cezito__antena, .g-shell .g-cezito__olhos,
  .g-shell .g-cezito__placa, .g-shell .g-cezito__braco-acena, .g-shell .g-cezito__vapor, .g-shell .g-cezito__pontos i { animation: none; }
}

/* ============================================================================
   MARCA
   O simbolo vem de dist/marca.svg, que o servico inline uma vez no layout do
   mesmo jeito que o sprite de icone: <use> so alcanca simbolo que ja esta no
   documento.

   A marca NAO troca de tema, do mesmo jeito que o Cezito. O que se escolhe e a
   trava: `.g-marca__simbolo` sobre fundo escuro, `.g-marca__simbolo--app` sobre
   qualquer fundo. Nao recolora o simbolo: as duas cores dele sao da marca, e
   trocar uma delas por token de tema faz o logotipo mudar de cor quando a
   pessoa troca o tema, que e o defeito que ninguem reporta e todo mundo ve.
   ========================================================================= */
.g-marca {
  display: inline-flex; align-items: center; gap: var(--g-sp-2);
  text-decoration: none; color: inherit;
}
.g-marca__simbolo { display: block; height: 28px; width: auto; flex-shrink: 0; }
.g-marca__simbolo--app { height: 32px; width: 32px; }
.g-marca__nome {
  /* --g-font-marca e a Parkinsans com a pilha do sistema atras. E OPT-IN: se o
     servico nao carregar o arquivo da fonte, cai na pilha do sistema e continua
     legivel. Ver a secao Fontes da skill. */
  font-family: var(--g-font-marca);
  font-size: var(--g-fs-xl); font-weight: var(--g-fw-medio);
  letter-spacing: var(--g-ls-justo); line-height: var(--g-lh-justa);
  color: var(--g-titulo);
}
.g-marca--sobre-escuro .g-marca__nome { color: var(--g-sobre-preenchimento); }
.g-marca--sm .g-marca__simbolo { height: 20px; }
.g-marca--sm .g-marca__simbolo--app { height: 24px; width: 24px; }
.g-marca--sm .g-marca__nome { font-size: var(--g-fs-lg); }

/* Superficies de acento da marca. Sao os dois preenchimentos CLAROS, e cada um
   carrega a propria tinta: branco em cima deles da 1,61:1 e 1,29:1. */
.g-acento  { background: var(--g-acento);   color: var(--g-acento-ink); }
.g-destaque { background: var(--g-destaque); color: var(--g-destaque-ink); }
.g-acento .g-card__titulo, .g-destaque .g-card__titulo,
.g-acento a, .g-destaque a { color: inherit; }

/* ==========================================================================
   COMPONENTES DE CONVERSA E COLABORACAO (3.1.0, issue #5033)
   Vieram do redesign do chat do Journey. Cada um passou pelos quatro degraus
   da skill antes de entrar: nenhum existia, e composicao nao resolvia porque
   os quatro primeiros (balao, reacao, post-it, arquivo) tem forma propria que
   nenhum bloco anterior desenha, e os demais (drawer, enquete, agenda, painel)
   sao estrutura que a tela repetiria em CSS proprio.

   Regra de papel, a mesma do resto do sistema: preenchimento primario inverte
   de tema e escreve com --g-primaria-sobre; lilas e lima sao superficie clara
   e escrevem com a tinta indigo (--g-acento-ink, --g-destaque-ink); tingido da
   marca (--g-primaria-suave) escreve com --g-titulo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BALAO, a mensagem de chat
   Minha a direita no preenchimento primario, a do outro a esquerda na
   superficie alternativa, as duas com o canto que aponta para o autor mais
   fechado (radius sm) e os outros tres abertos (radius lg). Nome, hora e
   avatar ficam FORA da bolha: dentro, competem com o texto e quebram a largura
   da mensagem curta.

   Largura maxima de 72%: a conversa larga foi pedida de proposito, e a bolha
   que ocupa a coluna inteira perde o lado de quem fala.
   -------------------------------------------------------------------------- */
.g-balao { display: flex; align-items: flex-start; gap: var(--g-sp-3); }
.g-balao + .g-balao { margin-top: var(--g-sp-3); }
.g-balao__corpo {
  position: relative; min-width: 0; max-width: 72%;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-sp-1);
}
.g-balao__meta {
  display: flex; align-items: baseline; gap: var(--g-sp-2);
  padding: 0 var(--g-sp-1);
  font-size: var(--g-fs-xs); color: var(--g-texto-suave);
}
.g-balao__nome { font-weight: var(--g-fw-semi); font-size: var(--g-fs-sm); color: var(--g-titulo); }
.g-balao__hora { font-variant-numeric: tabular-nums; }
.g-balao__bolha {
  padding: var(--g-sp-2) var(--g-sp-4);
  border-radius: var(--g-radius-lg); border-top-left-radius: var(--g-radius-sm);
  background: var(--g-superficie-alt); color: var(--g-texto);
  font-size: var(--g-fs-md); line-height: var(--g-lh-solta);
  overflow-wrap: anywhere;
}
.g-balao__bolha p { margin: 0; }
.g-balao__bolha p + p { margin-top: var(--g-sp-2); }
.g-balao__bolha a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.g-balao__rodape {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-sp-2);
  padding: 0 var(--g-sp-1);
  font-size: var(--g-fs-2xs); color: var(--g-texto-suave);
}

/* A do outro e o padrao; a classe existe para a marcacao dizer de quem e. */
.g-balao--outro .g-balao__bolha { background: var(--g-superficie-alt); color: var(--g-texto); }

.g-balao--minha { flex-direction: row-reverse; }
.g-balao--minha .g-balao__corpo { align-items: flex-end; }
.g-balao--minha .g-balao__bolha {
  border-top-left-radius: var(--g-radius-lg); border-top-right-radius: var(--g-radius-sm);
  background: var(--g-primaria); color: var(--g-primaria-sobre);
}
/* Link dentro da minha bolha herda a cor do texto: a tinta de marca sobre a
   primaria nao passa. O sublinhado e o que diz que e link. */
.g-balao--minha .g-balao__bolha a:not([class]),
.g-balao--minha .g-balao__bolha .g-link { color: inherit; text-decoration: underline; }

/* Sistema: pilula centrada, sem autor. "Carla entrou no grupo", separador de
   data, "3 mensagens nao lidas". */
.g-balao--sistema { justify-content: center; }
.g-balao--sistema .g-balao__corpo { max-width: 80%; align-items: center; }
.g-balao--sistema .g-balao__bolha {
  padding: var(--g-sp-05) var(--g-sp-3);
  border-radius: var(--g-radius-pill);
  background: var(--g-fundo); border: 1px solid var(--g-borda);
  font-size: var(--g-fs-2xs); color: var(--g-texto-suave);
}

/* Mensagem seguida do mesmo autor: some o nome e o avatar vira espaco vazio,
   para as bolhas alinharem. A hora continua no rodape, se a tela quiser. */
.g-balao + .g-balao--seguida { margin-top: var(--g-sp-1); }
.g-balao--seguida .g-balao__meta { display: none; }
.g-balao--seguida > .g-avatar { visibility: hidden; }

/* Urgente: tarja de perigo dentro da bolha, e a palavra "urgente" em chip no
   rodape, porque cor sozinha nao carrega significado. */
.g-balao--urgente .g-balao__bolha { box-shadow: inset 3px 0 0 var(--g-perigo); }

/* --------------------------------------------------------------------------
   REACAO, o chip com contagem embaixo da mensagem
   Botao de verdade, com aria-pressed: a reacao da propria pessoa e estado, e o
   leitor de tela precisa dele. `--destaque` e o reconhecimento ("Mandou bem")
   na superficie de destaque (lima), para ler como premio e nao como mais um
   emoji.

   A mola so roda na classe `--mola`, que a stack poe no clique e tira no fim
   da animacao. Em movimento reduzido nao roda.
   -------------------------------------------------------------------------- */
.g-reacoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-sp-1); }
.g-reacao {
  display: inline-flex; align-items: center; gap: var(--g-sp-1);
  height: 24px; padding: 0 var(--g-sp-2);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-pill);
  background: var(--g-superficie); color: var(--g-texto);
  font-family: inherit; font-size: var(--g-fs-xs); line-height: 1;
  cursor: pointer;
  transition: border-color var(--g-dur-rapido) var(--g-ease), background var(--g-dur-rapido) var(--g-ease);
}
.g-reacao:hover { border-color: var(--g-borda-forte); }
.g-reacao__n { font-variant-numeric: tabular-nums; color: var(--g-texto-suave); }
.g-reacao--ativa,
.g-reacao[aria-pressed='true'] { background: var(--g-primaria-suave); border-color: var(--g-primaria-ink); color: var(--g-titulo); }
.g-reacao--ativa .g-reacao__n,
.g-reacao[aria-pressed='true'] .g-reacao__n { color: var(--g-primaria-ink); }
.g-reacao--destaque,
.g-reacao--destaque:hover { background: var(--g-destaque); color: var(--g-destaque-ink); border-color: transparent; font-weight: var(--g-fw-semi); }
.g-reacao--destaque .g-reacao__n { color: var(--g-destaque-ink); }
.g-reacao--destaque.g-reacao--ativa,
.g-reacao--destaque[aria-pressed='true'] { background: var(--g-destaque); color: var(--g-destaque-ink); border-color: var(--g-destaque-ink); }
.g-reacao--destaque.g-reacao--ativa .g-reacao__n,
.g-reacao--destaque[aria-pressed='true'] .g-reacao__n { color: var(--g-destaque-ink); }
.g-reacao--mola { animation: g-mola var(--g-dur-lento) var(--g-ease-mola); }
@keyframes g-mola {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .g-shell .g-reacao--mola { animation: none; }
}

/* --------------------------------------------------------------------------
   POST-IT, o cartao de atividade
   Papel levemente amarelado, fita no topo e rotacao alternada pelo
   :nth-child, para o mural ler como mural e nao como grade de cartoes. A
   rotacao e de 1,2 graus: mais que isso o texto inclina de verdade e cansa.

   Tres cores com significado fixo na tela: papel e o comum, lilas e o que
   tem dono ou prazo, lima e a prioridade. Lilas e lima sao as superficies de
   acento e de destaque da marca e escrevem com a tinta indigo. `--vencido`
   poe anel de perigo e a tela escreve "venceu" no chip; `--feito` risca o
   titulo.
   -------------------------------------------------------------------------- */
.g-mural {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--g-sp-4) var(--g-sp-3);
  /* folga em cima para a fita, que sai do cartao */
  padding: var(--g-sp-3) var(--g-sp-2) var(--g-sp-2);
}
.g-postit {
  position: relative; min-width: 0; min-height: 116px;
  display: flex; flex-direction: column; gap: var(--g-sp-2);
  padding: var(--g-sp-4) var(--g-sp-3) var(--g-sp-2);
  border-radius: var(--g-radius-sm);
  background: var(--g-postit); color: var(--g-titulo);
  box-shadow: var(--g-shadow);
  transform: rotate(-1.2deg);
}
.g-postit:nth-child(even) { transform: rotate(1.2deg); }
.g-postit::before {
  content: ''; position: absolute; top: calc(-1 * var(--g-sp-2)); left: 50%;
  width: var(--g-sp-10); height: var(--g-sp-4);
  transform: translateX(-50%) rotate(-3deg);
  background: var(--g-fita); border-radius: var(--g-sp-05);
  box-shadow: var(--g-shadow-sm);
}
.g-postit:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); }
/* `.g-shell .g-postit__titulo` e nao so a classe: o titulo e um h4, e `.g-shell h4`
   pinta de --g-titulo com especificidade maior. Aqui a cor vem do post-it,
   porque sobre o lilas e o lima o titulo do tema escuro sumiria. */
.g-shell .g-postit__titulo,
.g-postit__titulo {
  flex: 1; margin: 0;
  font-weight: var(--g-fw-semi); font-size: var(--g-fs-sm);
  line-height: var(--g-lh-justa); letter-spacing: var(--g-ls-justo); color: inherit;
}
.g-postit__quem { display: flex; align-items: center; gap: var(--g-sp-1); min-width: 0; font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-postit__quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-postit__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-1); flex-wrap: wrap; }
.g-postit__acoes { display: flex; gap: 0; }
.g-postit .g-chip { white-space: nowrap; }
.g-postit[draggable='true'] { cursor: grab; }

.g-postit--papel { background: var(--g-postit); color: var(--g-titulo); }
.g-postit--lilas { background: var(--g-acento); color: var(--g-acento-ink); }
.g-postit--lima  { background: var(--g-destaque); color: var(--g-destaque-ink); }
.g-postit--lilas .g-postit__quem,
.g-postit--lima .g-postit__quem,
.g-postit--lilas .g-btn--ghost,
.g-postit--lima .g-btn--ghost { color: inherit; }
.g-postit--lilas .g-chip:not([class*='--']),
.g-postit--lima .g-chip:not([class*='--']) { background: var(--g-superficie); color: var(--g-titulo); }
/* O disco do avatar e a primaria, que no escuro e o lilas: sobre o post-it lilas
   ele sumia. Sobre as duas superficies claras o disco e indigo com tinta clara,
   nos dois temas. */
.g-postit--lilas .g-avatar,
.g-postit--lima .g-avatar { background: var(--g-acento-ink); color: var(--g-sobre-preenchimento); }
.g-postit--vencido { box-shadow: 0 0 0 2px var(--g-perigo), var(--g-shadow); }
.g-postit--feito .g-postit__titulo { text-decoration: line-through; opacity: 0.7; }

/* --------------------------------------------------------------------------
   ARQUIVO, o cartao de anexo
   Icone por tipo (i-arq-pdf e os demais), nome, tamanho e autor, e a acao de
   baixar na ponta. Linha por padrao, para caber na bolha e na lista; `--cartao`
   empilha com miniatura, para a grade da aba de arquivos.
   -------------------------------------------------------------------------- */
.g-arquivo {
  display: flex; align-items: center; gap: var(--g-sp-3); min-width: 0;
  padding: var(--g-sp-2) var(--g-sp-2) var(--g-sp-2) var(--g-sp-3);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-md);
  background: var(--g-superficie); color: var(--g-texto);
}
.g-arquivo__icone { flex-shrink: 0; display: inline-flex; color: var(--g-texto-suave); }
.g-arquivo__corpo { flex: 1; min-width: 0; }
.g-arquivo__nome { font-size: var(--g-fs-sm); font-weight: var(--g-fw-medio); color: var(--g-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-arquivo__meta { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-arquivo__acao { flex-shrink: 0; }
.g-arquivo__mini {
  height: 76px; border-radius: var(--g-radius);
  background: var(--g-superficie-alt); color: var(--g-texto-suave);
  display: grid; place-items: center; overflow: hidden;
}
.g-arquivo__mini img { width: 100%; height: 100%; object-fit: cover; }
.g-arquivo[draggable='true'] { cursor: grab; }

.g-arquivo--cartao { flex-direction: column; align-items: stretch; gap: var(--g-sp-1); padding: var(--g-sp-2); }
.g-arquivo--cartao .g-arquivo__nome { white-space: normal; overflow-wrap: anywhere; font-size: var(--g-fs-xs); line-height: var(--g-lh-justa); }
.g-arquivo--cartao .g-arquivo__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-1); }

/* --------------------------------------------------------------------------
   DRAWER, o painel que desliza da direita
   Era a lacuna "painel que abre e fecha fora do menu lateral" da skill. Com veu
   leve, e nao o veu do dialogo: a tela de tras continua reconhecivel, porque o
   drawer complementa a tela em vez de interrompe-la. Abre com `--aberto`, que
   a stack alterna; fechar, prender e devolver o foco sao da stack.
   -------------------------------------------------------------------------- */
.g-drawer__veu { position: fixed; inset: 0; background: var(--g-veu-leve); z-index: var(--g-z-overlay); }
.g-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--g-z-modal);
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  background: var(--g-superficie);
  border-left: 1px solid var(--g-borda);
  box-shadow: var(--g-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--g-dur-base) var(--g-ease);
}
.g-drawer--aberto { transform: none; }
.g-drawer--lg { width: min(640px, calc(100vw - 32px)); }
.g-drawer__cabeca {
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: var(--g-sp-4) var(--g-sp-5);
  border-bottom: 1px solid var(--g-borda);
}
.g-drawer__titulo {
  flex: 1; min-width: 0;
  font-size: var(--g-fs-lg); font-weight: var(--g-fw-semi); color: var(--g-titulo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-drawer__fechar {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--g-radius); background: transparent;
  color: var(--g-texto-suave); cursor: pointer;
}
.g-drawer__fechar:hover { background: var(--g-fundo); color: var(--g-titulo); }
.g-drawer__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--g-sp-4) var(--g-sp-5); }
.g-drawer__rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--g-sp-2);
  padding: var(--g-sp-3) var(--g-sp-5);
  border-top: 1px solid var(--g-borda); background: var(--g-fundo);
}
@media (prefers-reduced-motion: reduce) {
  .g-shell .g-drawer { transition: none; }
}

/* --------------------------------------------------------------------------
   ABAS COMPACTAS
   Variante de .g-tabs para coluna de 320px, como o inspetor do chat: quatro
   abas cabem lado a lado sem rolar. Mesmo desenho de pasta, menos folga.
   -------------------------------------------------------------------------- */
.g-tabs--compacta { padding: var(--g-sp-2) var(--g-sp-2) 0; gap: var(--g-sp-05); align-items: flex-end; }
.g-tabs--compacta .g-tabs__item { height: 30px; padding: 0 var(--g-sp-2); font-size: var(--g-fs-3xs); letter-spacing: 0.04em; }
.g-tabs--compacta .g-tabs__item--ativo { font-size: var(--g-fs-2xs); }
.g-tabs--compacta + .g-tabs__painel { padding: var(--g-sp-3); }

/* --------------------------------------------------------------------------
   ENQUETE
   Pergunta, opcoes com barra de resultado, quem votou e o prazo. Cada opcao e
   um botao com aria-pressed, para a escolha ser estado de verdade. Antes de
   votar a barra aparece do mesmo jeito, porque ver a parcial e parte da
   decisao; `--votada` tira o cursor e o hover, e `--encerrada` apaga o prazo.
   A barra e a segunda serie de dado (--g-secundaria); a da opcao escolhida e
   a primaria.
   -------------------------------------------------------------------------- */
.g-enquete {
  display: flex; flex-direction: column; gap: var(--g-sp-2);
  padding: var(--g-sp-3) var(--g-sp-4);
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-lg);
  background: var(--g-superficie); color: var(--g-texto);
}
.g-enquete__cabeca { display: flex; align-items: center; gap: var(--g-sp-2); flex-wrap: wrap; }
.g-enquete__cabeca .g-btn { margin-left: auto; }
.g-enquete__pergunta {
  margin: 0;
  font-weight: var(--g-fw-semi); font-size: var(--g-fs-md);
  color: var(--g-titulo); line-height: var(--g-lh-justa);
}
.g-enquete__prazo { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-enquete__opcoes { display: flex; flex-direction: column; gap: var(--g-sp-1); }
.g-enquete__opcao {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--g-sp-3); row-gap: var(--g-sp-05); align-items: center;
  width: 100%; padding: var(--g-sp-1) var(--g-sp-2);
  border: 1px solid transparent; border-radius: var(--g-radius);
  background: transparent; text-align: left;
  font-family: inherit; color: var(--g-texto); cursor: pointer;
}
.g-enquete__opcao:hover { background: var(--g-fundo); border-color: var(--g-borda); }
.g-enquete__opcao[aria-pressed='true'] { background: var(--g-primaria-suave); border-color: var(--g-primaria-ink); color: var(--g-titulo); }
.g-enquete__rotulo { font-size: var(--g-fs-sm); }
.g-enquete__rotulo b { font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.g-enquete__votos {
  display: flex; align-items: center; gap: var(--g-sp-1);
  font-size: var(--g-fs-xs); color: var(--g-texto-suave);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.g-enquete__opcao[aria-pressed='true'] .g-enquete__votos { color: var(--g-primaria-ink); }
.g-enquete__votos .g-avatar--xs + .g-avatar--xs { margin-left: calc(-1 * var(--g-sp-1)); box-shadow: 0 0 0 1px var(--g-superficie); }
.g-enquete__trilho { grid-column: 1 / span 2; height: var(--g-sp-2); border-radius: var(--g-radius-pill); background: var(--g-superficie-alt); overflow: hidden; }
.g-enquete__barra { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g-secundaria); transition: width var(--g-dur-lento) var(--g-ease); }
.g-enquete__opcao[aria-pressed='true'] .g-enquete__barra { background: var(--g-primaria); }
.g-enquete__rodape { display: flex; align-items: center; gap: var(--g-sp-2); font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-enquete--votada .g-enquete__opcao { cursor: default; }
.g-enquete--votada .g-enquete__opcao:hover { background: transparent; border-color: transparent; }
.g-enquete--votada .g-enquete__opcao[aria-pressed='true']:hover { background: var(--g-primaria-suave); border-color: var(--g-primaria-ink); }
.g-enquete--encerrada .g-enquete__prazo { color: var(--g-texto-tenue); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   AGENDA, o quadro compacto
   Tres visoes no mesmo quadro: dia (lista cronologica), semana (sete colunas
   com pontos por tipo) e mes (compoe o .g-cal). O alternador e o .g-toggle--sm.
   Tres tipos de compromisso com marcador fixo: reuniao do grupo na primaria,
   compromisso de outra pessoa em cinza (contorno vazado no ponto), proposta do
   Journey na segunda serie (--g-secundaria). Cada tipo tambem se diz por
   escrito na linha do item, porque cor sozinha nao carrega significado.
   -------------------------------------------------------------------------- */
.g-agenda {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--g-borda); border-radius: var(--g-radius-md);
  background: var(--g-superficie); color: var(--g-texto);
}
.g-agenda__cabeca { display: flex; align-items: center; gap: var(--g-sp-2); padding: var(--g-sp-2) var(--g-sp-3) var(--g-sp-1); }
.g-agenda__titulo {
  flex: 1; display: inline-flex; align-items: center; gap: var(--g-sp-1);
  font-weight: var(--g-fw-semi); font-size: var(--g-fs-sm);
  letter-spacing: var(--g-ls-justo); color: var(--g-titulo);
}
.g-agenda__titulo .g-ic { color: var(--g-primaria-ink); }
.g-agenda__vista { flex: 1; min-height: 0; overflow: hidden; padding: 0 var(--g-sp-3); display: flex; flex-direction: column; gap: var(--g-sp-05); }
.g-agenda__rodape { display: flex; align-items: center; gap: var(--g-sp-1); padding: var(--g-sp-1) var(--g-sp-3) var(--g-sp-2); font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-agenda__livre { font-size: var(--g-fs-2xs); color: var(--g-texto-tenue); padding: var(--g-sp-05) var(--g-sp-2); }

/* dia */
.g-agenda__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: var(--g-sp-2); align-items: center;
  padding: var(--g-sp-05) var(--g-sp-2);
  border-radius: var(--g-radius); border-left: 3px solid var(--g-primaria);
  color: var(--g-texto);
}
.g-agenda__item:hover { background: var(--g-fundo); }
.g-agenda__item--pessoa { border-left-color: var(--g-texto-suave); }
.g-agenda__item--proposta { border-left-color: var(--g-secundaria); }
.g-agenda__item[draggable='true'] { cursor: grab; }
.g-agenda__hora {
  grid-row: 1 / span 2;
  font-weight: var(--g-fw-semi); font-size: var(--g-fs-xs);
  font-variant-numeric: tabular-nums; color: var(--g-titulo);
}
.g-agenda__item--agora .g-agenda__hora { color: var(--g-sucesso-ink); }
.g-agenda__evento { grid-column: 2 / span 2; grid-row: 1; font-size: var(--g-fs-xs); font-weight: var(--g-fw-medio); color: var(--g-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-agenda__quem { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: var(--g-sp-1); min-width: 0; font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-agenda__quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-agenda__quem .g-avatar--xs + .g-avatar--xs { margin-left: calc(-1 * var(--g-sp-1)); box-shadow: 0 0 0 1px var(--g-superficie); }
.g-agenda__estado, .g-agenda__item > .g-chip { grid-column: 3; grid-row: 2; }
.g-agenda__estado { font-size: var(--g-fs-2xs); color: var(--g-texto-suave); white-space: nowrap; }

/* semana */
.g-agenda__semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--g-sp-05); }
.g-agenda__dia {
  display: flex; flex-direction: column; align-items: center; gap: var(--g-sp-05);
  padding: var(--g-sp-1) 0 var(--g-sp-2);
  border: 1px solid transparent; border-radius: var(--g-radius);
  background: transparent; color: var(--g-texto); cursor: pointer; font-family: inherit;
}
.g-agenda__dia:hover { background: var(--g-fundo); }
.g-agenda__dia[aria-current='date'] { background: var(--g-primaria-suave); color: var(--g-titulo); border-color: var(--g-primaria-ink); }
.g-agenda__dow { font-size: var(--g-fs-3xs); font-weight: var(--g-fw-semi); text-transform: uppercase; letter-spacing: var(--g-ls-caps); color: var(--g-texto-suave); }
.g-agenda__dia[aria-current='date'] .g-agenda__dow { color: var(--g-primaria-ink); }
.g-agenda__num { font-weight: var(--g-fw-semi); font-size: var(--g-fs-lg); line-height: 1; font-variant-numeric: tabular-nums; }
.g-agenda__num--zero { color: var(--g-texto-tenue); }
.g-agenda__pontos { display: flex; gap: var(--g-sp-05); min-height: 6px; }
.g-agenda__ponto { width: 6px; height: 6px; border-radius: var(--g-radius-pill); background: var(--g-primaria); }
.g-agenda__ponto--pessoa { background: var(--g-superficie); box-shadow: inset 0 0 0 1px var(--g-texto-suave); }
.g-agenda__ponto--proposta { background: var(--g-secundaria); }
.g-agenda__dia[aria-current='date'] .g-agenda__ponto--pessoa { background: var(--g-primaria-suave); }

/* mes: o .g-cal com um ponto no dia que tem evento */
.g-agenda .g-cal { width: 100%; }
.g-agenda .g-cal__dia { aspect-ratio: auto; height: 22px; position: relative; }
.g-cal__dia--evento { position: relative; }
.g-cal__dia--evento::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 4px; height: 4px; border-radius: var(--g-radius-pill);
  background: var(--g-secundaria); transform: translateX(-50%);
}
.g-cal__dia--sel.g-cal__dia--evento::after,
.g-cal__dia--inicio.g-cal__dia--evento::after,
.g-cal__dia--fim.g-cal__dia--evento::after { background: var(--g-primaria-sobre); }

/* legenda dos tipos, no rodape ou abaixo da semana */
.g-agenda__legenda { display: flex; flex-wrap: wrap; gap: var(--g-sp-3); padding: var(--g-sp-1) var(--g-sp-2); font-size: var(--g-fs-2xs); color: var(--g-texto-suave); }
.g-agenda__legenda span { display: inline-flex; align-items: center; gap: var(--g-sp-1); }

/* --------------------------------------------------------------------------
   PAINEL COM ESQUEMA
   Tela com mais de um painel lado a lado (lista, conversa, inspetor) escolhe
   a cor de cada um entre quatro esquemas validados: papel, lilas-suave, lilas
   e indigo. O painel expoe as variaveis --g-painel-*, e o que esta dentro usa
   SO elas, para o contraste nao depender da escolha. Os valores vem dos tokens
   esquema-*, com tema escuro proprio, e o porteiro de contraste confere cada
   par nos dois temas.

   Sem data-esquema o painel e a superficie comum: o componente nao obriga a
   escolher.
   -------------------------------------------------------------------------- */
.g-painel {
  --g-painel-fundo: var(--g-superficie);
  --g-painel-texto: var(--g-texto);
  --g-painel-suave: var(--g-texto-suave);
  --g-painel-borda: var(--g-borda);
  --g-painel-selecionado: var(--g-superficie-alt);
  --g-painel-selecionado-texto: var(--g-titulo);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--g-painel-fundo); color: var(--g-painel-texto);
}
.g-painel[data-esquema='papel'] {
  --g-painel-fundo: var(--g-esquema-papel-fundo); --g-painel-texto: var(--g-esquema-papel-texto);
  --g-painel-suave: var(--g-esquema-papel-suave); --g-painel-borda: var(--g-esquema-papel-borda);
  --g-painel-selecionado: var(--g-esquema-papel-selecionado); --g-painel-selecionado-texto: var(--g-esquema-papel-selecionado-texto);
}
.g-painel[data-esquema='lilas-suave'] {
  --g-painel-fundo: var(--g-esquema-lilas-suave-fundo); --g-painel-texto: var(--g-esquema-lilas-suave-texto);
  --g-painel-suave: var(--g-esquema-lilas-suave-suave); --g-painel-borda: var(--g-esquema-lilas-suave-borda);
  --g-painel-selecionado: var(--g-esquema-lilas-suave-selecionado); --g-painel-selecionado-texto: var(--g-esquema-lilas-suave-selecionado-texto);
}
.g-painel[data-esquema='lilas'] {
  --g-painel-fundo: var(--g-esquema-lilas-fundo); --g-painel-texto: var(--g-esquema-lilas-texto);
  --g-painel-suave: var(--g-esquema-lilas-suave); --g-painel-borda: var(--g-esquema-lilas-borda);
  --g-painel-selecionado: var(--g-esquema-lilas-selecionado); --g-painel-selecionado-texto: var(--g-esquema-lilas-selecionado-texto);
}
.g-painel[data-esquema='indigo'] {
  --g-painel-fundo: var(--g-esquema-indigo-fundo); --g-painel-texto: var(--g-esquema-indigo-texto);
  --g-painel-suave: var(--g-esquema-indigo-suave); --g-painel-borda: var(--g-esquema-indigo-borda);
  --g-painel-selecionado: var(--g-esquema-indigo-selecionado); --g-painel-selecionado-texto: var(--g-esquema-indigo-selecionado-texto);
}
.g-painel__cabeca { display: flex; align-items: center; gap: var(--g-sp-2); padding: var(--g-sp-3) var(--g-sp-4); border-bottom: 1px solid var(--g-painel-borda); }
/* `.g-shell` na frente pelo mesmo motivo do post-it: o titulo e um h2, e
   `.g-shell h2` pintaria de --g-titulo, que no esquema indigo e indigo sobre indigo. */
.g-shell .g-painel__titulo,
.g-painel__titulo { flex: 1; min-width: 0; font-weight: var(--g-fw-semi); font-size: var(--g-fs-lg); color: var(--g-painel-texto); }
.g-painel__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--g-sp-2); }
.g-painel__suave,
.g-painel .g-meta, .g-painel .g-hint, .g-painel .g-rotulo { color: var(--g-painel-suave); }
.g-painel__sep { height: 1px; margin: var(--g-sp-2) 0; background: var(--g-painel-borda); }
.g-painel__item {
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: var(--g-sp-2) var(--g-sp-3); border-radius: var(--g-radius);
  color: var(--g-painel-texto); text-decoration: none;
}
.g-painel__item:hover { background: color-mix(in srgb, var(--g-painel-texto) 7%, transparent); text-decoration: none; }
.g-painel__item--ativo,
.g-painel__item[aria-current='page'] { background: var(--g-painel-selecionado); color: var(--g-painel-selecionado-texto); }
.g-painel__item--ativo .g-meta,
.g-painel__item[aria-current='page'] .g-meta { color: inherit; opacity: 0.75; }