/* CRM Command Center (docs/padrao-visual.md): design system dos temas escuro e claro.
   Etapa 2: só a vitrine (/vitrine, com VITRINE=1) usa este arquivo; o sistema continua no estilo.css até a Etapa 3.
   Regras: toda cor vem dos tokens dos temas (o teste barra cor fora deles); contraste WCAG conferido no teste;
   brilho moderado só em destaque, seleção, estado ativo e gráficos; gráficos sempre planos; com movimento reduzido,
   nada anima. */

/* Figtree (SIL Open Font License), servida pelo próprio CRM em /fontes. */
@font-face { font-family: Figtree; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/figtree-latin-ext-400-normal.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: Figtree; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/figtree-latin-400-normal.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: Figtree; font-style: normal; font-weight: 500; font-display: swap; src: url('/fontes/figtree-latin-ext-500-normal.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: Figtree; font-style: normal; font-weight: 500; font-display: swap; src: url('/fontes/figtree-latin-500-normal.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: Figtree; font-style: normal; font-weight: 600; font-display: swap; src: url('/fontes/figtree-latin-ext-600-normal.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: Figtree; font-style: normal; font-weight: 600; font-display: swap; src: url('/fontes/figtree-latin-600-normal.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: Figtree; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/figtree-latin-ext-700-normal.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: Figtree; font-style: normal; font-weight: 700; font-display: swap; src: url('/fontes/figtree-latin-700-normal.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; }

/* Tokens comuns aos dois temas (sem cor). */
:root {
  --fonte: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-pagina: 24px;
  --t-secao: 16px;
  --t-card: 15px;
  --t-texto: 14px;
  --t-aux: 12px;
  --t-indicador: 26px;
  --raio-card: 10px;
  --raio-campo: 8px;
  --raio-botao: 8px;
  --raio-modal: 12px;
  --raio-pilula: 999px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --altura-botao: 40px;
  --altura-campo: 42px;
  --menu: 248px;
  --menu-recolhido: 72px;
  --cabecalho: 60px;
  --duracao: 180ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

/* Tema escuro (padrão). */
:root, [data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #080F20;
  --fundo-2: #0D1830;
  --lateral: #080F20;
  --card: #111E3B;
  --card-elevado: #17294E;
  --borda: #29416D;
  --borda-campo: #5F7AAB;
  --linha: #1E3157;
  --hover-linha: #142443;
  --campo: #0D1830;
  --campo-desabilitado: #0B1428;
  --texto: #F8FAFC;
  --texto-2: #A9B6CA;
  --texto-desabilitado: #8494AE;
  --placeholder: #8FA0BA;
  --link: #60A5FA;
  --marca: #3B82F6;
  --marca-luz: #38BDF8;
  --roxo: #8B5CF6;
  --botao: #2563EB;
  --botao-hover: #1D4ED8;
  --botao-texto: #FFFFFF;
  --secundario-fundo: #17294E;
  --secundario-hover: #1E3460;
  --sucesso-forte: #047857;
  --erro-forte: #B91C1C;
  --foco: #60A5FA;
  --anel-foco: rgba(96, 165, 250, .35);
  --selecionado: #16305E;
  --sucesso: #34D399;
  --sucesso-fundo: #0E2A2B;
  --erro: #F87171;
  --erro-fundo: #34151F;
  --atencao: #FBBF24;
  --atencao-fundo: #33270C;
  --info: #60A5FA;
  --info-fundo: #12284F;
  --serie-1: #3B82F6;
  --serie-2: #D95926;
  --serie-3: #199E70;
  --serie-outras: #5F7AAB;
  --grade-grafico: #1E3157;
  --trilho-grafico: #1A2B50;
  --dica-fundo: #050B18;
  --dica-texto: #F8FAFC;
  --sombra: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(2, 6, 23, .45);
  --sombra-elevada: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 48px rgba(2, 6, 23, .6);
  --brilho: 0 0 0 1px rgba(59, 130, 246, .55), 0 0 22px rgba(59, 130, 246, .28);
  --brilho-grafico: rgba(59, 130, 246, .45);
  --gradiente-marca: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  --gradiente-fundo: radial-gradient(1100px 520px at 0% -10%, rgba(59, 130, 246, .14), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(139, 92, 246, .12), transparent 60%), #080F20;
  --gradiente-card: linear-gradient(180deg, #14244A 0%, #111E3B 100%);
  --gradiente-destaque: linear-gradient(180deg, rgba(59, 130, 246, .16) 0%, rgba(17, 30, 59, 0) 70%), #111E3B;
  --vidro: rgba(13, 24, 48, .72);
  --sobreposicao: rgba(2, 6, 23, .65);
}

/* Tema claro: a mesma identidade, com fundo claro. */
[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F4F6FA;
  --fundo-2: #EDF1F7;
  --lateral: #FFFFFF;
  --card: #FFFFFF;
  --card-elevado: #F8FAFC;
  --borda: #E1E8F2;
  --borda-campo: #7A879C;
  --linha: #E1E8F2;
  --hover-linha: #F4F7FC;
  --campo: #FFFFFF;
  --campo-desabilitado: #EDF1F7;
  --texto: #17243A;
  --texto-2: #5E6A7E;
  --texto-desabilitado: #737F93;
  --placeholder: #5E6A7E;
  --link: #2463C5;
  --marca: #2463C5;
  --marca-luz: #38BDF8;
  --roxo: #8B5CF6;
  --botao: #2463C5;
  --botao-hover: #1B4E9E;
  --botao-texto: #FFFFFF;
  --secundario-fundo: #EDF1F7;
  --secundario-hover: #E1E8F2;
  --sucesso-forte: #13703F;
  --erro-forte: #C4262B;
  --foco: #2463C5;
  --anel-foco: rgba(36, 99, 197, .25);
  --selecionado: #E3EDFB;
  --sucesso: #13703F;
  --sucesso-fundo: #DDF5E8;
  --erro: #C4262B;
  --erro-fundo: #FCE4E4;
  --atencao: #8A5A00;
  --atencao-fundo: #FDF0C8;
  --info: #1F56AD;
  --info-fundo: #E3EDFB;
  --serie-1: #2463C5;
  --serie-2: #D2581F;
  --serie-3: #138A60;
  --serie-outras: #7A879C;
  --grade-grafico: #E1E8F2;
  --trilho-grafico: #E8EDF5;
  --dica-fundo: #17243A;
  --dica-texto: #FFFFFF;
  --sombra: 0 1px 2px rgba(23, 36, 58, .06), 0 8px 24px rgba(23, 36, 58, .06);
  --sombra-elevada: 0 2px 4px rgba(23, 36, 58, .06), 0 16px 40px rgba(23, 36, 58, .10);
  --brilho: 0 0 0 1px rgba(36, 99, 197, .45), 0 0 18px rgba(36, 99, 197, .16);
  --brilho-grafico: rgba(36, 99, 197, .25);
  --gradiente-marca: linear-gradient(135deg, #2463C5 0%, #8B5CF6 100%);
  --gradiente-fundo: radial-gradient(1100px 520px at 0% -10%, rgba(36, 99, 197, .07), transparent 60%), radial-gradient(900px 480px at 100% 0%, rgba(139, 92, 246, .06), transparent 60%), #F4F6FA;
  --gradiente-card: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  --gradiente-destaque: linear-gradient(180deg, rgba(36, 99, 197, .07) 0%, rgba(255, 255, 255, 0) 70%), #FFFFFF;
  --vidro: rgba(255, 255, 255, .78);
  --sobreposicao: rgba(23, 36, 58, .45);
}

/* Tema claro refinado (proposta de 06/11, em comparação na vitrine): SaaS executivo de identidade própria.
   Fundo quase branco, cards brancos, bordas discretas, sombras leves, azul só em ação e seleção, sem brilho. */
[data-tema="claro-refinado"] {
  color-scheme: light;
  --fundo: #F7F8FA;
  --fundo-2: #F1F3F7;
  --lateral: #FFFFFF;
  --card: #FFFFFF;
  --card-elevado: #FFFFFF;
  --borda: #E4E7EC;
  --borda-campo: #878FA0;
  --linha: #EEF0F4;
  --hover-linha: #F8FAFC;
  --campo: #FFFFFF;
  --campo-desabilitado: #F2F4F7;
  --texto: #101828;
  --texto-2: #596273;
  --texto-desabilitado: #7D8696;
  --placeholder: #667085;
  --link: #2463C5;
  --marca: #2463C5;
  --marca-luz: #38BDF8;
  --roxo: #8B5CF6;
  --botao: #2463C5;
  --botao-hover: #1B4E9E;
  --botao-texto: #FFFFFF;
  --secundario-fundo: #FFFFFF;
  --secundario-hover: #F5F7FA;
  --sucesso-forte: #13703F;
  --erro-forte: #C4262B;
  --foco: #2463C5;
  --anel-foco: rgba(36, 99, 197, .16);
  --selecionado: #EEF3FD;
  --sucesso: #12703F;
  --sucesso-fundo: #E8F7EE;
  --erro: #C4262B;
  --erro-fundo: #FDEDED;
  --atencao: #8A5A00;
  --atencao-fundo: #FEF4D9;
  --info: #1F56AD;
  --info-fundo: #EAF1FD;
  --serie-1: #2463C5;
  --serie-2: #D2581F;
  --serie-3: #138A60;
  --serie-outras: #98A2B3;
  --grade-grafico: #EEF0F4;
  --trilho-grafico: #EEF1F6;
  --dica-fundo: #101828;
  --dica-texto: #FFFFFF;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --sombra-elevada: 0 4px 8px -2px rgba(16, 24, 40, .06), 0 12px 24px -4px rgba(16, 24, 40, .08);
  --brilho: 0 0 0 0 transparent;
  --brilho-grafico: transparent;
  --gradiente-marca: linear-gradient(135deg, #2463C5 0%, #6D5BD0 100%);
  --gradiente-fundo: #F7F8FA;
  --gradiente-card: #FFFFFF;
  --gradiente-destaque: #FFFFFF;
  --vidro: rgba(255, 255, 255, .85);
  --sobreposicao: rgba(16, 24, 40, .35);
}

/* Claro futurista · Command Center 2.0 (proposta de 06/11, em comparação na vitrine): branco com azul elétrico e ciano,
   profundidade nos cards, borda luminosa só no que está selecionado ou em destaque. Tokens --fx-* são só deste tema. */
[data-tema="claro-futurista"] {
  color-scheme: light;
  --fundo: #F4F6FB;
  --fundo-2: #EEF2F9;
  --lateral: #FFFFFF;
  --card: #FFFFFF;
  --card-elevado: #FFFFFF;
  --borda: #E2E8F2;
  --borda-campo: #858FA3;
  --linha: #EDF1F7;
  --hover-linha: #F5F8FF;
  --campo: #FFFFFF;
  --campo-desabilitado: #F1F4F9;
  --texto: #0B1220;
  --texto-2: #55607A;
  --texto-desabilitado: #7A849A;
  --placeholder: #64708A;
  --link: #2563EB;
  --marca: #2563EB;
  --marca-luz: #06B6D4;
  --roxo: #7C3AED;
  --botao: #2563EB;
  --botao-hover: #1D4ED8;
  --botao-texto: #FFFFFF;
  --secundario-fundo: #FFFFFF;
  --secundario-hover: #F3F7FF;
  --sucesso-forte: #047857;
  --erro-forte: #C4262B;
  --foco: #2563EB;
  --anel-foco: rgba(37, 99, 235, .18);
  --selecionado: #EAF1FF;
  --sucesso: #0F7A43;
  --sucesso-fundo: #E6F8EF;
  --erro: #C4262B;
  --erro-fundo: #FDECEC;
  --atencao: #8A5A00;
  --atencao-fundo: #FEF4D9;
  --info: #0B5C99;
  --info-fundo: #E6F6FD;
  --serie-1: #2563EB;
  --serie-2: #D2581F;
  --serie-3: #138A60;
  --serie-outras: #98A2B3;
  --grade-grafico: #E3E9F3;
  --trilho-grafico: #E9EEF7;
  --dica-fundo: #0B1220;
  --dica-texto: #FFFFFF;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-elevada: 0 2px 6px rgba(16, 24, 40, .05), 0 18px 40px -12px rgba(37, 99, 235, .22);
  --brilho: 0 0 0 3px rgba(37, 99, 235, .10), 0 8px 26px -6px rgba(6, 182, 212, .40);
  --brilho-grafico: rgba(6, 182, 212, .45);
  --gradiente-marca: linear-gradient(135deg, #2563EB 0%, #06B6D4 55%, #7C3AED 100%);
  --gradiente-fundo: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, .07) 1px, transparent 0) 0 0 / 22px 22px, radial-gradient(900px 420px at 100% -10%, rgba(6, 182, 212, .10), transparent 60%), radial-gradient(800px 400px at 0% 0%, rgba(124, 58, 237, .06), transparent 60%), #F4F6FB;
  --gradiente-card: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  --gradiente-destaque: #FFFFFF;
  --vidro: rgba(255, 255, 255, .80);
  --sobreposicao: rgba(11, 18, 32, .40);
  --fx-acao: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  --fx-acao-hover: linear-gradient(135deg, #1D4ED8 0%, #4338CA 100%);
  --fx-borda-luz: linear-gradient(135deg, #2563EB 0%, #06B6D4 50%, #7C3AED 100%);
  --fx-faixa: linear-gradient(90deg, #2563EB 0%, #06B6D4 50%, #7C3AED 100%);
}

/* Gráficos Command Center (proposta de 06/11, vitrine /vitrine/graficos): cores validadas com o verificador da
   skill dataviz. Categorias (azul, ciano, rosa): escuro passa com aviso 7,3 (legal com os nomes e o vão entre as
   fatias), claro passa em tudo. Escala de um tom para o funil e a matriz, com o texto de cada nível acima de 4,5. */
:root, [data-tema="escuro"] {
  --cg-cat-1: #5B6CF0;
  --cg-cat-2: #14A3BD;
  --cg-cat-3: #E8559B;
  --cg-outras: #5F7AAB;
  --cg-ord-1: #2F5FA8;
  --cg-ord-2: #3A73C4;
  --cg-ord-3: #4A88DB;
  --cg-ord-4: #64A0EC;
  --cg-ord-5: #86B8F4;
  --cg-ord-6: #ADD0FA;
  --cg-ord-txt-1: #FFFFFF;
  --cg-ord-txt-2: #FFFFFF;
  --cg-ord-txt-3: #0B1220;
  --cg-ord-txt-4: #0B1220;
  --cg-ord-txt-5: #0B1220;
  --cg-ord-txt-6: #0B1220;
  --cg-serie: #60A5FA;
  --cg-previsto: #8494AE;
  --cg-perda: #3A4E78;
  --cg-trilho: #1A2B50;
  --cg-grade: #1E3157;
  --cg-brilho: rgba(96, 165, 250, .55);
  --cg-cartao: linear-gradient(180deg, #13234A 0%, #0F1B37 100%);
  --cg-cartao-borda: #263C66;
}
[data-tema="claro"] {
  --cg-cat-1: #2563EB;
  --cg-cat-2: #0891B2;
  --cg-cat-3: #DB2777;
  --cg-outras: #8A94A6;
  --cg-ord-1: #8DB0F5;
  --cg-ord-2: #6694F0;
  --cg-ord-3: #4A7EEA;
  --cg-ord-4: #3366D9;
  --cg-ord-5: #2452BD;
  --cg-ord-6: #1B3F94;
  --cg-ord-txt-1: #0B1220;
  --cg-ord-txt-2: #0B1220;
  --cg-ord-txt-3: #0B1220;
  --cg-ord-txt-4: #FFFFFF;
  --cg-ord-txt-5: #FFFFFF;
  --cg-ord-txt-6: #FFFFFF;
  --cg-serie: #2563EB;
  --cg-previsto: #8A94A6;
  --cg-perda: #D5DBE6;
  --cg-trilho: #EEF1F6;
  --cg-grade: #E6EBF2;
  --cg-brilho: rgba(37, 99, 235, .35);
  --cg-cartao: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  --cg-cartao-borda: #E2E8F2;
}
[data-tema="claro-refinado"] {
  --cg-cat-1: #2563EB;
  --cg-cat-2: #0891B2;
  --cg-cat-3: #DB2777;
  --cg-outras: #8A94A6;
  --cg-ord-1: #8DB0F5;
  --cg-ord-2: #6694F0;
  --cg-ord-3: #4A7EEA;
  --cg-ord-4: #3366D9;
  --cg-ord-5: #2452BD;
  --cg-ord-6: #1B3F94;
  --cg-ord-txt-1: #0B1220;
  --cg-ord-txt-2: #0B1220;
  --cg-ord-txt-3: #0B1220;
  --cg-ord-txt-4: #FFFFFF;
  --cg-ord-txt-5: #FFFFFF;
  --cg-ord-txt-6: #FFFFFF;
  --cg-serie: #2563EB;
  --cg-previsto: #8A94A6;
  --cg-perda: #D5DBE6;
  --cg-trilho: #EEF1F6;
  --cg-grade: #E6EBF2;
  --cg-brilho: rgba(37, 99, 235, .35);
  --cg-cartao: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  --cg-cartao-borda: #E2E8F2;
}
[data-tema="claro-futurista"] {
  --cg-cat-1: #2563EB;
  --cg-cat-2: #0891B2;
  --cg-cat-3: #DB2777;
  --cg-outras: #8A94A6;
  --cg-ord-1: #8DB0F5;
  --cg-ord-2: #6694F0;
  --cg-ord-3: #4A7EEA;
  --cg-ord-4: #3366D9;
  --cg-ord-5: #2452BD;
  --cg-ord-6: #1B3F94;
  --cg-ord-txt-1: #0B1220;
  --cg-ord-txt-2: #0B1220;
  --cg-ord-txt-3: #0B1220;
  --cg-ord-txt-4: #FFFFFF;
  --cg-ord-txt-5: #FFFFFF;
  --cg-ord-txt-6: #FFFFFF;
  --cg-serie: #2563EB;
  --cg-previsto: #8A94A6;
  --cg-perda: #D5DBE6;
  --cg-trilho: #EEF1F6;
  --cg-grade: #E6EBF2;
  --cg-brilho: rgba(37, 99, 235, .35);
  --cg-cartao: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
  --cg-cartao-borda: #E2E8F2;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 14px; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-size: var(--t-texto);
  line-height: 1.5;
  color: var(--texto);
  background: var(--gradiente-fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: var(--t-pagina); font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--esp-4); color: var(--texto); }
h2 { font-size: var(--t-secao); font-weight: 600; margin: 0 0 var(--esp-3); color: var(--texto); }
h3 { font-size: var(--t-card); font-weight: 600; margin: 0 0 var(--esp-3); color: var(--texto); }
p { margin: 0 0 var(--esp-3); }
small, .aux { font-size: var(--t-aux); color: var(--texto-2); }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--selecionado); color: var(--texto); }
.icone { flex: none; }

/* Escala de texto (para títulos que não são h1/h2/h3 e para a vitrine). */
.t-pagina { font-size: var(--t-pagina); font-weight: 700; letter-spacing: -.01em; }
.t-secao { font-size: var(--t-secao); font-weight: 600; }
.t-card { font-size: var(--t-card); font-weight: 600; }
.t-indicador { font-size: var(--t-indicador); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.botao, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--altura-botao);
  padding: 0 var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  background: var(--secundario-fundo);
  color: var(--texto);
  font: 600 var(--t-texto)/1 var(--fonte);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duracao) var(--curva), border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva);
}
.botao:hover, button:hover { background: var(--secundario-hover); border-color: var(--borda-campo); }
.botao.primario, button.primario { background: var(--botao); border-color: transparent; color: var(--botao-texto); }
.botao.primario:hover, button.primario:hover { background: var(--botao-hover); box-shadow: var(--brilho); }
.botao.sucesso, button.sucesso { background: var(--sucesso-forte); border-color: transparent; color: var(--botao-texto); }
.botao.perigo, button.perigo { background: var(--erro-forte); border-color: transparent; color: var(--botao-texto); }
.botao.sucesso:hover, .botao.perigo:hover { box-shadow: var(--sombra); }
.botao.so-icone { width: var(--altura-botao); padding: 0; }
.botao:disabled, button:disabled, .botao[aria-disabled="true"] {
  background: var(--campo-desabilitado);
  border-color: var(--borda);
  color: var(--texto-desabilitado);
  box-shadow: none;
  cursor: not-allowed;
}
.botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

/* ---------- Campos ---------- */
label { display: grid; align-content: start; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto); }
label.marcar { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: var(--altura-campo);
  padding: 0 var(--esp-3);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  background: var(--campo);
  color: var(--texto);
  font: 400 var(--t-texto) var(--fonte);
  transition: border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva);
}
textarea { min-height: 96px; padding: 10px var(--esp-3); resize: vertical; }
::placeholder { color: var(--placeholder); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .demonstra-foco {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--foco);
  box-shadow: 0 0 0 4px var(--anel-foco);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--botao); margin: 0; }
.campo-erro input, .campo-erro select, .campo-erro textarea, [aria-invalid="true"] { border-color: var(--erro); }
.mensagem-erro { color: var(--erro); font-size: var(--t-aux); font-weight: 500; margin: 0; }
input:not([type="checkbox"]):not([type="radio"]):disabled, select:disabled, textarea:disabled {
  background: var(--campo-desabilitado);
  border-color: var(--borda);
  border-style: dashed;
  color: var(--texto-desabilitado);
  cursor: not-allowed;
}
.formulario { display: grid; gap: var(--esp-4); max-width: 640px; }
/* Na grade do formulário o botão fica do tamanho do texto (não estica), e campos lado a lado alinham pela base. */
.formulario > button, .formulario > .botao { justify-self: start; }
.linha-acao:has(> label) { align-items: end; }
/* Marcadores soltos numa linha (checklist de documentos): espaço entre um item e o próximo. */
form:not(.formulario) > label.marcar { margin: 0 var(--esp-4) var(--esp-3) 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--gradiente-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  padding: var(--esp-5);
  box-shadow: var(--sombra);
  color: var(--texto);
}
.card.elevado { background: var(--card-elevado); box-shadow: var(--sombra-elevada); }
.card.destaque { background: var(--gradiente-destaque); border-color: var(--marca); box-shadow: var(--sombra), var(--brilho); }
.card > :last-child { margin-bottom: 0; }

/* ---------- Indicadores ---------- */
.indicador { display: grid; gap: var(--esp-2); align-content: start; }
.indicador-rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; margin: 0; }
.indicador-valor { margin: 0; }
.indicador-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-3); }
.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-aux);
  font-weight: 600;
  white-space: nowrap;
}
.delta .aux { font-weight: 500; color: inherit; opacity: .85; }
.delta.sobe { background: var(--sucesso-fundo); color: var(--sucesso); }
.delta.desce { background: var(--erro-fundo); color: var(--erro); }
.spark { width: 104px; height: 32px; overflow: visible; flex: none; }

/* ---------- Tabela ---------- */
.tabela-card { padding: 0; overflow: hidden; }
.tabela-card .rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-texto); }
th {
  text-align: left;
  font-size: var(--t-aux);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
td { padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--duracao) var(--curva); }
tbody tr:hover td { background: var(--hover-linha); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acoes { display: flex; gap: var(--esp-2); justify-content: flex-end; }
.acoes .botao { min-height: 32px; padding: 0 var(--esp-3); font-size: 13px; }
/* Na tabela, a coluna Ações continua célula (flex na <td> desmonta a linha); o que vai dentro se arruma sozinho. */
td.acoes { display: table-cell; }
/* Excluir repetido em cada linha de uma lista: contornado (o vermelho cheio fica para a ação isolada, como na vitrine). */
td .perigo, .botoes .perigo, .linha-acao .perigo, .acoes .perigo, li .perigo { background: transparent; border-color: color-mix(in oklab, var(--erro) 55%, transparent); color: var(--erro); }
td .perigo:hover, .botoes .perigo:hover, .linha-acao .perigo:hover, .acoes .perigo:hover, li .perigo:hover { background: color-mix(in oklab, var(--erro) 12%, transparent); box-shadow: none; }
td.acoes > form, td.acoes > details { margin: 0 var(--esp-2) var(--esp-2) 0; }
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--borda);
  font-size: 13px;
  color: var(--texto-2);
}
.paginacao .botao { min-height: 32px; padding: 0 var(--esp-3); font-size: 13px; }

/* ---------- Abas e filtros ---------- */
.abas { display: flex; flex-wrap: wrap; gap: var(--esp-1); border-bottom: 1px solid var(--borda); margin-bottom: var(--esp-4); }
.aba {
  padding: 10px 14px;
  color: var(--texto-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.aba:hover { color: var(--texto); }
.aba[aria-current="page"] { color: var(--texto); border-bottom-color: var(--marca); }
.barra-filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: end; }
.barra-filtros label { flex: 1 1 180px; }
.barra-filtros .botoes { flex: 0 0 auto; }

/* ---------- Avisos e selos ---------- */
.aviso {
  /* Bloco comum: o aviso mistura texto, negrito e link na mesma frase (em flex, cada pedaço virava uma coluna). */
  display: block;
  padding: var(--esp-3) 14px;
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio-campo);
  font-size: var(--t-texto);
  margin: 0 0 var(--esp-3);
}
.aviso.ok { background: var(--sucesso-fundo); color: var(--sucesso); border-color: var(--sucesso); }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }
.aviso.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao); }
.aviso.info { background: var(--info-fundo); color: var(--info); border-color: var(--info); }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--raio-pilula);
  background: var(--selecionado);
  color: var(--link);
  font-size: var(--t-aux);
  font-weight: 600;
  white-space: nowrap;
}
.selo.melhor { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.selo.principal { background: var(--gradiente-marca); color: var(--botao-texto); }

/* ---------- Modal e dica ---------- */
.modal {
  width: min(520px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--raio-modal);
  background: var(--card-elevado);
  color: var(--texto);
  box-shadow: var(--sombra-elevada);
}
.modal::backdrop { background: var(--sobreposicao); }
.modal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--borda); }
.modal-cabecalho p { margin: 0; }
.modal-corpo { display: grid; gap: var(--esp-4); padding: var(--esp-5); }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--borda); }
.modal-exemplo { position: static; display: block; }
.dica-grafico {
  display: inline-grid;
  gap: 2px;
  padding: var(--esp-2) 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: var(--dica-fundo);
  color: var(--dica-texto);
  font-size: var(--t-aux);
  box-shadow: var(--sombra-elevada);
}

/* ---------- Estado vazio ---------- */
.vazio { color: var(--texto-2); }
.estado-vazio {
  margin: 0;
  padding: var(--esp-8) var(--esp-5);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-card);
  text-align: center;
}

/* ---------- Gráficos (sempre planos) ---------- */
.grafico { display: grid; gap: var(--esp-3); }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--texto-2); font-family: var(--fonte); font-size: 11px; }
.grafico .valor-central { fill: var(--texto); font-size: 20px; font-weight: 700; }
.grafico .grade { stroke: var(--grade-grafico); stroke-width: 1; }
.grafico .trilho { stroke: var(--trilho-grafico); fill: none; }
.grafico .marca-brilho { filter: drop-shadow(0 0 6px var(--brilho-grafico)); }
.grafico-rosca, .grafico-anel { max-width: 220px; margin: 0 auto; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.legenda li { display: flex; align-items: center; gap: var(--esp-2); }
.legenda .valor { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cresce { transform-box: fill-box; transform-origin: 50% 100%; animation: crescer 700ms var(--curva) both; }
.desenha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 900ms var(--curva) forwards; }
.surge { animation: surgir 600ms var(--curva) both; }
@keyframes crescer { from { transform: scaleY(0); } }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes surgir { from { opacity: 0; } }

/* ---------- Claro refinado: acabamento próprio (sem cor nova: só tokens) ---------- */
/* Campo: borda clara nos lados e a linha de baixo firme, que dá os 3:1 do limite do campo (WCAG 1.4.11). */
[data-tema="claro-refinado"] input:not([type="checkbox"]):not([type="radio"]), [data-tema="claro-refinado"] select, [data-tema="claro-refinado"] textarea {
  border-color: var(--borda);
  border-bottom-color: var(--borda-campo);
  box-shadow: var(--sombra);
}
[data-tema="claro-refinado"] input:not([type="checkbox"]):not([type="radio"]):focus-visible, [data-tema="claro-refinado"] select:focus-visible,
[data-tema="claro-refinado"] textarea:focus-visible, [data-tema="claro-refinado"] input:not([type="checkbox"]):not([type="radio"]).demonstra-foco {
  border-color: var(--foco);
  box-shadow: 0 0 0 4px var(--anel-foco);
}
[data-tema="claro-refinado"] .campo-erro input:not([type="checkbox"]):not([type="radio"]), [data-tema="claro-refinado"] input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--erro);
}
[data-tema="claro-refinado"] .botao.secundario { box-shadow: var(--sombra); }
[data-tema="claro-refinado"] .card.destaque { border-color: var(--borda); box-shadow: inset 0 3px 0 var(--marca), var(--sombra); }
[data-tema="claro-refinado"] .t-indicador { font-weight: 800; letter-spacing: -.02em; }
[data-tema="claro-refinado"] th { background: var(--fundo); }
[data-tema="claro-refinado"] .aviso { border-width: 0 0 0 3px; }
[data-tema="claro-refinado"] .selo.principal { background: var(--marca); }

/* ---------- Claro futurista: acabamento próprio (só tokens; --fx-* só aqui) ----------
   A "linha de energia" (gradiente azul, ciano e roxo) aparece só no que está ativo agora: item do menu, aba, card em
   destaque e foco. Cápsulas nos botões e no menu (console de comando); raios por hierarquia; cards comuns quase planos,
   sombra azulada só no que fica por cima. Movimento só em resposta a uma ação. */
[data-tema="claro-futurista"] .card { border-radius: 14px; }
[data-tema="claro-futurista"] .card.destaque { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--fx-borda-luz) border-box; box-shadow: var(--sombra-elevada), var(--brilho); }
[data-tema="claro-futurista"] .indicador-rotulo { font-weight: 600; }
[data-tema="claro-futurista"] .t-indicador { font-weight: 800; letter-spacing: -.025em; }
/* Dinheiro como tipografia: R$ pequeno e alto, reais em destaque, centavos menores. */
[data-tema="claro-futurista"] .moeda { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--texto-2); vertical-align: .62em; }
[data-tema="claro-futurista"] .centavos { font-size: .62em; font-weight: 700; letter-spacing: 0; color: var(--texto-2); }
[data-tema="claro-futurista"] .botao, [data-tema="claro-futurista"] button { border-radius: var(--raio-pilula); transition: background var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva), transform var(--duracao) var(--curva), border-color var(--duracao) var(--curva); }
[data-tema="claro-futurista"] .botao:not(:disabled):hover { transform: translateY(-1px); }
[data-tema="claro-futurista"] .botao.primario, [data-tema="claro-futurista"] button.primario { background: var(--fx-acao); }
[data-tema="claro-futurista"] .botao.primario:hover, [data-tema="claro-futurista"] button.primario:hover { background: var(--fx-acao-hover); box-shadow: var(--brilho); }
[data-tema="claro-futurista"] .botao.primario:disabled, [data-tema="claro-futurista"] button.primario:disabled, [data-tema="claro-futurista"] .botao:disabled:hover {
  background: var(--campo-desabilitado);
  box-shadow: none;
  transform: none;
}
[data-tema="claro-futurista"] .botao.secundario { box-shadow: var(--sombra); }
[data-tema="claro-futurista"] .botao.secundario:not(:disabled):hover { background: var(--secundario-hover); border-color: var(--marca); color: var(--link); }
[data-tema="claro-futurista"] input:not([type="checkbox"]):not([type="radio"]), [data-tema="claro-futurista"] select, [data-tema="claro-futurista"] textarea {
  border-color: var(--borda);
  border-bottom-color: var(--borda-campo);
  box-shadow: var(--sombra);
}
[data-tema="claro-futurista"] input:not([type="checkbox"]):not([type="radio"]):focus-visible, [data-tema="claro-futurista"] select:focus-visible,
[data-tema="claro-futurista"] textarea:focus-visible, [data-tema="claro-futurista"] input:not([type="checkbox"]):not([type="radio"]).demonstra-foco {
  border-color: var(--foco);
  box-shadow: 0 0 0 4px var(--anel-foco), 0 8px 20px -10px var(--brilho-grafico);
}
[data-tema="claro-futurista"] .campo-erro input:not([type="checkbox"]):not([type="radio"]), [data-tema="claro-futurista"] input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]) {
  border-color: var(--erro);
}
[data-tema="claro-futurista"] th { background: var(--fundo-2); }
[data-tema="claro-futurista"] tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
[data-tema="claro-futurista"] .aba[aria-current="page"] { border-image: var(--fx-faixa) 1; }
[data-tema="claro-futurista"] .aviso { border-width: 0 0 0 3px; }
[data-tema="claro-futurista"] .selo.principal { background: var(--fx-acao); }
[data-tema="claro-futurista"] .modal { box-shadow: var(--sombra-elevada), var(--brilho); }
[data-tema="claro-futurista"] .menu-exemplo a { border-radius: var(--raio-pilula); }
[data-tema="claro-futurista"] .menu-exemplo a[aria-current="page"] { background: var(--fx-acao); color: var(--botao-texto); box-shadow: var(--brilho); }
[data-tema="claro-futurista"] .avatar-exemplo { background: var(--fx-acao); }
[data-tema="claro-futurista"] .cabecalho-exemplo { background: var(--vidro); }


/* ---------- Telas do CRM (porte do estilo.css para o Command Center, 06/11/2026) ----------
   Moldura (menu lateral 248/72px, cabeçalho de 60px, gaveta do celular sem JavaScript) e as regras de cada tela, só com
   tokens. Os componentes de cima (botão, campo, card, tabela, aviso, selo, abas) valem para tudo; aqui ficam layout e
   os detalhes de cada tela. */
main { padding: var(--esp-6) 28px 48px; max-width: 1480px; }
body:not(.com-menu) main { margin: 0 auto; }

/* Menu lateral */
.lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: var(--menu); display: flex; flex-direction: column; background: var(--lateral); border-right: 1px solid var(--borda); }
body.com-menu { padding-left: var(--menu); }
.lateral-topo { height: var(--cabecalho); flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: 0 10px 0 16px; border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--texto); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.marca-letra { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--gradiente-marca); color: var(--botao-texto); font-size: 14px; font-weight: 800; }
.recolher { width: 32px; min-height: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); }
.recolher:hover { background: var(--hover-linha); color: var(--texto); border-color: transparent; }
.lateral-itens { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral-itens a, .grupo-menu summary { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--texto-2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--duracao) var(--curva), color var(--duracao) var(--curva); }
.lateral-itens a:hover, .grupo-menu summary:hover { background: var(--hover-linha); color: var(--texto); }
.lateral-itens a[aria-current="page"] { background: var(--selecionado); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--marca); }
.lateral-itens a[aria-current="page"] .icone { color: var(--link); }
[data-tema="claro-futurista"] .lateral-itens a[aria-current="page"] { background: var(--fx-acao); color: var(--botao-texto); box-shadow: var(--brilho); }
[data-tema="claro-futurista"] .lateral-itens a[aria-current="page"] .icone { color: var(--botao-texto); }
.grupo-menu summary { list-style: none; }
.grupo-menu summary::-webkit-details-marker { display: none; }
.grupo-menu summary .icone:last-child { margin-left: auto; color: var(--texto-2); }
.grupo-menu:not([open]) summary .icone:last-child { transform: rotate(-90deg); }
.grupo-menu a { padding-left: 38px; }
.grupo-titulo { margin: 16px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.separador-menu { border: 0; border-top: 1px solid var(--borda); margin: 10px 8px; }
.lateral-pe { flex: none; display: flex; align-items: center; gap: var(--esp-2); padding: 12px 14px; border-top: 1px solid var(--borda); }
.iniciais, .avatar { flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--botao); color: var(--botao-texto); font-weight: 700; text-decoration: none; }
[data-tema="claro-futurista"] .iniciais, [data-tema="claro-futurista"] .avatar { background: var(--fx-acao); }
.iniciais { width: 32px; height: 32px; font-size: 12px; }
.quem { display: flex; flex-direction: column; min-width: 0; }
.quem b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.quem small { font-size: 11px; color: var(--texto-2); }
.sair { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--texto-2); }
.sair:hover { background: var(--hover-linha); color: var(--texto); }
.sair span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-usuario > summary, .menu-avatar > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--esp-2); }
.menu-usuario > summary::-webkit-details-marker, .menu-avatar > summary::-webkit-details-marker { display: none; }
.menu-usuario { display: block; }
.menu-usuario-itens { display: flex; flex-direction: column; padding: 6px 0; }
.menu-usuario-itens a { padding: 8px 14px; font-size: 13px; color: var(--texto); text-decoration: none; border-radius: 8px; }
.menu-usuario-itens a:hover { background: var(--hover-linha); }

/* Cabeçalho: busca, notificações, tema e avatar */
.cabecalho { position: sticky; top: 0; z-index: 20; height: var(--cabecalho); display: flex; align-items: center; gap: var(--esp-3); padding: 0 28px; background: var(--fundo-2); border-bottom: 1px solid var(--borda); }
.busca-global { position: relative; flex: 0 1 440px; margin: 0; }
.busca-global input:not([type="checkbox"]) { min-height: 40px; height: 40px; margin: 0; padding-right: 38px; border-radius: var(--raio-pilula); background: var(--campo); }
.busca-global .icone { position: absolute; right: 14px; top: 12px; color: var(--texto-2); pointer-events: none; }
.sino { margin-left: auto; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--texto-2); }
.sino:hover { background: var(--hover-linha); color: var(--texto); }
.sino .contagem { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--erro-forte); color: var(--botao-texto); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.trocar-tema { margin: 0; }
.trocar-tema .botao.so-icone { width: 40px; min-height: 40px; color: var(--texto-2); }
.trocar-tema .icone-lua { display: none; }
[data-tema^="claro"] .trocar-tema .icone-lua { display: inline-flex; }
[data-tema^="claro"] .trocar-tema .icone-sol { display: none; }
.trocar-tema span { display: inline-flex; }
.avatar { width: 36px; height: 36px; font-size: 12px; }
/* O resumo do menu do avatar é flex (regra do menu); as iniciais ficam no centro do círculo. */
.menu-avatar > summary.avatar { justify-content: center; }
.menu-avatar { position: relative; }
.menu-avatar .menu-usuario-itens { position: absolute; right: 0; top: 44px; min-width: 180px; padding: 6px; border: 1px solid var(--borda); border-radius: 12px; background: var(--card-elevado); box-shadow: var(--sombra-elevada); z-index: 20; }
.sanduiche { display: none; }
input.gaveta-estado[type="checkbox"] { display: none; }
.fundo-gaveta { display: none; }

/* Menu recolhido (só no computador): só os ícones, com o nome numa dica ao lado. */
@media (min-width: 721px) {
  .menu-recolhido body.com-menu { padding-left: var(--menu-recolhido); }
  .menu-recolhido .lateral { width: var(--menu-recolhido); }
  .menu-recolhido .lateral-topo { justify-content: center; padding: 0; }
  .menu-recolhido .marca,
  .menu-recolhido .lateral-itens span,
  .menu-recolhido .grupo-menu summary .icone:last-child,
  .menu-recolhido .quem { display: none; }
  .menu-recolhido .recolher .icone { transform: rotate(180deg); }
  .menu-recolhido .lateral-itens a, .menu-recolhido .grupo-menu summary { justify-content: center; padding: 0; }
  .menu-recolhido .grupo-titulo { height: 1px; margin: 10px 14px; overflow: hidden; color: transparent; background: var(--borda); }
  .menu-recolhido .lateral-pe { flex-direction: column; padding: 10px 0; }
  .menu-recolhido .sair { margin-left: 0; }
  .menu-recolhido .grupo-menu summary { display: none; }
  .menu-recolhido .lateral-itens a:hover::after, .menu-recolhido .lateral-itens a:focus-visible::after {
    content: attr(data-dica); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 40;
    padding: 6px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--dica-fundo); color: var(--dica-texto);
    font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--sombra-elevada); pointer-events: none;
  }
}

/* Cartões, formulários, avisos e tabelas das telas */
.card { margin-bottom: var(--esp-4); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--marca); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
.cards .card, .numeros .card, .grade-cards .card, .cg-coluna .card { margin-bottom: 0; }
.cards .card b { display: block; font-size: 14px; margin-bottom: 2px; }
.cards .card small { color: var(--texto-2); }
form label { margin: 0 0 14px; }
form label small { font-weight: 400; color: var(--texto-2); }
input[type="file"] { min-height: auto; padding: 8px 10px; }
.escolha { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.escolha legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.escolha label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 400; }
.formulario:has(input[value="pf"]:checked) .so-pj { display: none; }
.marcar { display: flex; align-items: center; gap: var(--esp-2); font-size: 14px; font-weight: 400; }
.botoes { margin: var(--esp-3) 0; }
.erro:not(.selo):not(.aviso):not(.delta) { padding: 10px 14px; border-left: 3px solid var(--erro); border-radius: var(--raio-campo); background: var(--erro-fundo); color: var(--erro); font-size: 14px; }
.ok:not(.selo):not(.aviso) { padding: 10px 14px; border-left: 3px solid var(--sucesso); border-radius: var(--raio-campo); background: var(--sucesso-fundo); color: var(--sucesso); font-size: 14px; }
.aviso:not(.ok):not(.erro):not(.info):not(.atencao) { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.atrasado, .sem-acao { color: var(--erro); font-weight: 600; }
table { margin-bottom: var(--esp-4); }
td:first-child { font-weight: 600; }
/* Tabela de ficha (rótulo × valor em cada linha): rótulo discreto, sem o traço de cabeçalho */
th:has(+ td) { width: 200px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--texto-2); border-bottom: 1px solid var(--linha); white-space: normal; }
th:has(+ td) + td { font-weight: 400; }
td input, td select { margin: 0; }
td.dinheiro { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.cancelada td { text-decoration: line-through; color: var(--texto-2); }

/* Cabeçalho da página, busca e abas */
.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.topo h1, .topo h2 { margin: 0; }
.topo h1 a { color: inherit; text-decoration: none; }
.busca { margin: 0 0 var(--esp-4); max-width: 320px; }
.busca input { margin: 0; }
.aba.ativa { color: var(--texto); border-bottom-color: var(--marca); }
[data-tema="claro-futurista"] .aba.ativa { border-image: var(--fx-faixa) 1; }
.etapa-atual { color: var(--texto-2); margin: -8px 0 14px; }
.linha-acao { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; margin: 0; }
.linha-acao select, .linha-acao input:not([type="checkbox"]):not([type="radio"]) { margin: 0; width: auto; }

/* Ficha: linha do tempo e zona de perigo */
.tempo { margin-top: var(--esp-4); }
.tempo ul { list-style: none; padding: 0; margin: 12px 0 0; }
.tempo li { padding: 10px 0; border-top: 1px solid var(--linha); }
.tempo .quando { display: block; font-size: 12px; color: var(--texto-2); margin-bottom: 2px; }
/* Ficha do cadastro: a fase (Lead ou Cliente) e, para lead, "Converter em cliente". */
.fase-do-cadastro { margin: 0 0 var(--esp-4); }
.fase-do-cadastro form { margin: 0; }
.fase-do-cadastro small { color: var(--texto-2); font-size: 12px; }
/* Premiações do fechamento: rótulos das colunas e, para o gestor, "Repassar ao corretor" (Não/Sim; com Sim, Integral ou Outro valor). */
.premiacao-cabecalho { display: flex; gap: var(--esp-2); margin: 0 0 var(--esp-2); font-size: 12px; font-weight: 600; color: var(--texto-2); }
.premiacao-cabecalho span { min-width: 120px; }
.premiacao .repassar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.premiacao .repassar .modo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding-left: var(--esp-3); border-left: 1px solid var(--linha); }
.premiacao .repassar .modo input[name$="_outro"] { width: 120px; }
.premiacao .repassar:has(input[value="nao"]:checked) .modo { display: none; }
/* Busca nas listas longas (busca-lista.js): a caixa fica entre o rótulo e a lista que ela filtra. */
input.busca-lista { max-width: 360px; font-weight: 400; }
.busca-lista-vazia { color: var(--texto-2); font-size: 12px; }
/* Documentos da negociação: um documento por linha, Recebido Sim/Não e a data de quem marcou embaixo. */
.documentos fieldset.documento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); margin: 0; padding: var(--esp-3) 0; border: 0; border-top: 1px solid var(--linha); }
.documentos fieldset.documento:first-child { border-top: 0; }
.documentos fieldset.documento legend { float: left; min-width: 220px; padding: 0; margin-right: var(--esp-4); font-weight: 600; font-size: 14px; color: var(--texto); }
.documentos fieldset.documento .recebido { color: var(--texto-2); font-size: 13px; }
.documentos fieldset.documento label.marcar { margin: 0; }
.documentos fieldset.documento small { flex-basis: 100%; color: var(--texto-2); font-size: 12px; }
.documentos form > button { margin-top: var(--esp-3); }
.documentos .acrescentar-documento { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
/* Histórico de etapas (logo abaixo de Mudar etapa): lista compacta, a mais recente no topo; rola dentro do cartão se ficar longa. */
.historico-etapas ol { list-style: none; padding: 0; margin: var(--esp-2) 0 0; max-height: 260px; overflow-y: auto; }
.historico-etapas li { padding: var(--esp-2) 0; border-top: 1px solid var(--linha); font-size: 13px; }
.historico-etapas li:first-child { border-top: 0; }
.historico-etapas .quando { display: block; font-size: 12px; color: var(--texto-2); }
.perigo-zona { margin-top: var(--esp-6); }
.convite { margin-top: var(--esp-6); color: var(--texto-2); font-size: 13px; }

/* Números do painel e faixa Hoje */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: var(--esp-5); }
.numero small { display: block; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.numero b { display: block; margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--texto); }
.numero b a { color: var(--texto); text-decoration: none; }
.numero b a:hover { color: var(--link); }
.hoje h2 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 8px; }
.hoje ul { list-style: none; margin: 0; padding: 0; }
.hoje li { padding: 8px 0; border-top: 1px solid var(--linha); }
.hoje li:first-child { border-top: 0; }

/* Quadro das negociações */
.quadro { display: flex; gap: var(--esp-3); overflow-x: auto; padding: 0 0 12px; align-items: flex-start; }
.coluna { flex: 0 0 200px; min-height: 120px; border-radius: 12px; padding: 10px; background: var(--fundo-2); border: 1px solid var(--borda); }
.coluna h4 { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.coluna .soma { font-size: 12px; color: var(--texto); margin-bottom: 8px; }
.coluna.alvo { outline: 2px dashed var(--foco); outline-offset: -2px; }
.coluna.final { flex-basis: 150px; }
.coluna .soltar { padding: 16px 8px; text-align: center; color: var(--texto); font-size: 12px; font-weight: 600; }
.cartao { display: block; margin-bottom: var(--esp-2); padding: 10px 12px; color: inherit; text-decoration: none; cursor: grab; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); }
.cartao:hover { border-color: var(--marca); }
.cartao.arrastando { opacity: .85; outline: 2px solid var(--foco); }
.cartao.parada-borda { border-left: 3px solid var(--erro); }
.cartao b { display: block; font-size: 13px; font-weight: 700; color: var(--texto); }
.cartao small { display: block; font-size: 12px; color: var(--texto-2); }
.cartao .acao { font-size: 12px; margin: 6px 0 2px; }
.cartao .comissao { font-size: 12px; font-weight: 600; margin-top: 2px; }
.pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: var(--raio-pilula); margin-top: 4px; }
.pill.quente { background: var(--erro-fundo); color: var(--erro); }
.pill.morno { background: var(--atencao-fundo); color: var(--atencao); }
.pill.frio { background: var(--info-fundo); color: var(--info); }

/* Configurações, negociação e importação */
.grupo h2 small { color: var(--texto-2); font-weight: 400; margin-left: 8px; }
.grupo .linha-acao input:not([type="checkbox"]):not([type="radio"]) { width: 110px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-4); }
.repasse table input { width: 96px; }
.repasse h2 { margin: 16px 0 8px; }
.comparacao { margin-top: 12px; }
.opcoes .comparacao td { white-space: nowrap; }
.opcoes .comparacao td:first-child, .opcoes .comparacao td.parcelas { white-space: normal; min-width: 160px; }
.opcoes h3 { margin-top: 16px; }
.opcoes { overflow-x: auto; }
.opcoes .comparacao td:last-child { white-space: normal; }
.opcoes .comparacao td:last-child .botoes { margin: 0; }
.premiacoes { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.premiacoes legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.premiacoes .linha-acao { margin-bottom: 8px; }
.pendencia h2 small { color: var(--texto-2); font-weight: 400; }
.pendencia .linha-acao { margin: 8px 0; }
.catalogo-operadora { border-top: 1px solid var(--linha); padding: 12px 0; }
.catalogo-operadora:first-of-type { border-top: 0; }
.catalogo-operadora .topo h3 { margin: 0; font-size: 14px; }
details.editar { display: inline-block; }
details.editar summary { cursor: pointer; color: var(--link); font-size: 13px; font-weight: 600; }
details.editar[open] { display: block; margin-top: 6px; }
.rolagem { overflow-x: auto; }
.quadro-grade th, .quadro-grade td { white-space: nowrap; text-align: center; }
.quadro-grade th[scope="row"], .quadro-grade thead tr:first-child th:first-child { position: sticky; left: 0; background: var(--card); text-align: left; border-right: 1px solid var(--borda); }
.quadro-grade th.operadora { border-bottom: 1px solid var(--borda); }
.quadro-grade td small { display: block; color: var(--texto-2); }
.quadro-grade td.vazia a { color: var(--texto-2); text-decoration: none; }
.quadro-grade .estrela { color: var(--link); }
.filtros-grade { margin-bottom: 12px; }
.filtros-grade label { display: flex; gap: 6px; align-items: center; }
.repasse-mensalidade table input { width: 110px; margin: 0; }
.repasse-mensalidade table select { width: auto; margin: 4px 0 0; }
.repasse-produtos td { vertical-align: top; }
.regra-antiga summary { cursor: pointer; font-weight: 600; }
.lista-plataformas { margin-top: 12px; }
.aviso-plataforma { margin-top: 18px; }
.card-lead { display: flex; gap: var(--esp-2); align-items: stretch; }
.card-lead .card { flex: 1; }
.marcar-lead { display: flex; align-items: center; padding: 0 4px; }
.enviar-leads { margin-bottom: 12px; }

/* Relatórios: filtros e barras de uma série */
.filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: var(--esp-4); }
.filtros label { margin: 0; }
.filtros input:not([type="checkbox"]):not([type="radio"]), .filtros select { width: auto; }
.filtros .largo { flex: 1 1 260px; }
.filtros .largo input:not([type="checkbox"]) { width: 100%; }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 180px; margin: 12px 0 28px; border-bottom: 1px solid var(--grade-grafico); }
.barra { flex: 1; max-width: 64px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.barra .preenchimento { width: 60%; min-height: 2px; background: var(--cg-serie); border-radius: 4px 4px 0 0; transition: filter var(--duracao) var(--curva); }
.barra:hover .preenchimento { filter: drop-shadow(0 0 6px var(--cg-brilho)); }
.barra .valor { font-size: 11px; margin-bottom: 4px; white-space: nowrap; color: var(--texto); }
.barra .mes { position: absolute; bottom: -20px; font-size: 11px; color: var(--texto-2); }

/* Barra de filtros comum das listas */
.barra-filtros { align-items: flex-start; gap: var(--esp-2); margin: 12px 0 6px; }
.barra-filtros input[type="search"] { width: 320px; max-width: 100%; margin: 0; }
.filtros-mais > summary { cursor: pointer; min-height: var(--altura-botao); padding: 0 var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-botao); display: inline-flex; align-items: center; font: 600 var(--t-texto)/1 var(--fonte); background: var(--secundario-fundo); color: var(--texto); }
[data-tema="claro-futurista"] .filtros-mais > summary { border-radius: var(--raio-pilula); }
/* A data não pode ficar cortada ("dd/mm/aa") quando divide a linha com outros campos. */
.linha-acao input[type="date"] { min-width: 150px; }
.filtros-campos { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; }
.filtros-campos label { min-width: 170px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; margin: 4px 0; }
.etiqueta { background: var(--selecionado); color: var(--link); border-radius: var(--raio-pilula); padding: 2px 10px; text-decoration: none; font-weight: 600; }
.exibindo { font-size: 12px; font-weight: 600; color: var(--texto-2); margin: 4px 0 10px; }

/* Janela do cadastro rápido (dialog) */
dialog.modal { padding: var(--esp-6); }
dialog.modal[open] { animation: surgir 150ms var(--curva); }
.modal h2 { margin: 0 0 16px; font-size: 20px; color: var(--texto); }
.modal-form { position: relative; }
.modal-fechar { position: absolute; top: -12px; right: -12px; width: 32px; min-height: 32px; height: 32px; padding: 0; border: 0; background: transparent; font-size: 20px; color: var(--texto-2); }
dialog.modal .modal-rodape { padding: 0; border: 0; margin-top: 16px; }
.cadastro-rapido { margin-top: 6px; min-height: 30px; padding: 0 10px; font-size: 12px; color: var(--link); }

/* Entrar e telas sem menu */
.entrar { max-width: 400px; margin: 12vh auto 0; padding: var(--esp-6); }
.entrar .primario { width: 100%; }

/* Celular: menu em gaveta (abre pelo sanduíche, sem JavaScript) e tabelas de lista em cartões */
@media (max-width: 720px) {
  body.com-menu { padding-left: 0; }
  /* Fechada, a gaveta sai também da ordem do Tab e do leitor de tela (visibility); o checkbox fica focável. */
  .lateral { transform: translateX(-100%); visibility: hidden; }
  .gaveta-estado:checked ~ .lateral { transform: none; visibility: visible; }
  input.gaveta-estado[type="checkbox"] { display: block; position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .gaveta-estado:focus-visible ~ .cabecalho .sanduiche { outline: 2px solid var(--foco); outline-offset: 2px; }
  .gaveta-estado:checked ~ .fundo-gaveta { display: block; position: fixed; inset: 0; z-index: 25; background: var(--sobreposicao); }
  .recolher { display: none; }
  .sanduiche { display: grid; place-items: center; place-content: center; width: 40px; height: 40px; flex: none; border-radius: 10px; color: var(--texto); cursor: pointer; }
  .cabecalho { padding: 0 12px; gap: var(--esp-2); }
  .busca-global { flex: 1 1 auto; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .numeros .card { padding: 12px; }
  .numero b { font-size: 18px; }
  main { padding: 16px 12px 40px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Tabelas de lista viram cartões "rótulo: valor"; o cabeçalho sai da tela mas continua para o leitor de tela */
  table.empilhar { display: block; overflow: visible; white-space: normal; }
  table.empilhar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.empilhar tbody { display: block; }
  table.empilhar tr { display: block; border: 1px solid var(--borda); border-radius: 12px; padding: 6px 12px; margin-bottom: var(--esp-2); background: var(--card); }
  table.empilhar td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; height: auto; min-height: 28px; padding: 4px 0; border: 0; text-align: right; }
  table.empilhar td[data-rotulo]::before { content: attr(data-rotulo); flex: none; font-size: 12px; font-weight: 600; color: var(--texto-2); text-align: left; }
  table.empilhar td.acoes { display: block; text-align: left; padding-top: 8px; }
  /* Ficha (rótulo × valor): quebra a linha em vez de rolar de lado */
  table:has(th + td) { display: table; white-space: normal; }
  th:has(+ td) { width: 40%; }
  .quadro { flex-direction: column; overflow: visible; }
  .coluna { flex: none; width: 100%; min-height: 0; }
  .coluna.final { display: none; }
}

/* ---------- Vitrine (/vitrine) ---------- */
.vitrine-topo { padding: var(--esp-8) var(--esp-8) var(--esp-4); }
.vitrine-topo p { color: var(--texto-2); max-width: 820px; }
.vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vitrine-tema { padding: var(--esp-6) var(--esp-8) var(--esp-8); background: var(--gradiente-fundo); color: var(--texto); min-width: 0; }
.vitrine-tema > h2 { font-size: 20px; margin-bottom: var(--esp-6); }
.vitrine-secao { margin-bottom: var(--esp-8); }
.vitrine-secao > h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.grade-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--esp-4); }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-4); align-items: start; }
.paleta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-3); }
.paleta li { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--t-aux); color: var(--texto-2); }
.paleta i { width: 32px; height: 32px; border-radius: var(--raio-campo); border: 1px solid var(--borda); flex: none; }
.amostra-gradiente { background: var(--gradiente-marca); }

/* Navegação de exemplo (menu e cabeçalho), para comparar o item ativo nos temas antes da Etapa 3. */
.nav-exemplo { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; border: 1px solid var(--borda); border-radius: var(--raio-card); overflow: hidden; background: var(--fundo); box-shadow: var(--sombra); }
.menu-exemplo { display: grid; gap: 2px; align-content: start; padding: var(--esp-4) var(--esp-3); background: var(--lateral); border-right: 1px solid var(--borda); }
.marca-exemplo { display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-2); font-weight: 700; color: var(--texto); }
.marca-exemplo i { width: 26px; height: 26px; border-radius: var(--raio-campo); background: var(--gradiente-marca); flex: none; }
.menu-exemplo .grupo { margin: var(--esp-3) var(--esp-2) var(--esp-1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.menu-exemplo a { display: flex; align-items: center; gap: var(--esp-2); padding: 8px 10px; border-radius: var(--raio-campo); color: var(--texto-2); font-weight: 500; text-decoration: none; transition: background var(--duracao) var(--curva), color var(--duracao) var(--curva); }
.menu-exemplo a:hover { background: var(--hover-linha); color: var(--texto); }
.menu-exemplo a[aria-current="page"] { background: var(--selecionado); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--marca); }
.cabecalho-exemplo { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); background: var(--card); border-bottom: 1px solid var(--borda); }
.cabecalho-exemplo input { flex: 1; min-width: 0; }
.alternar-tema { display: inline-flex; padding: 3px; border: 1px solid var(--borda); border-radius: var(--raio-pilula); background: var(--fundo-2); font-size: var(--t-aux); }
.alternar-tema span { padding: 3px 9px; border-radius: var(--raio-pilula); color: var(--texto-2); }
.alternar-tema span[aria-current] { background: var(--card); color: var(--texto); box-shadow: var(--sombra); }
.avatar-exemplo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--botao); color: var(--botao-texto); font-size: var(--t-aux); font-weight: 700; flex: none; }
.conteudo-exemplo { margin: 0; padding: var(--esp-5) var(--esp-4); color: var(--texto-2); }
.vitrine.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vitrine.tres .vitrine-tema { padding: var(--esp-6) var(--esp-5) var(--esp-8); }

/* ---------- Vitrine dos gráficos Command Center (proposta) ----------
   Visor de leitura que responde ao item escolhido; o resto esmaece e o escolhido ganha brilho. Grade em linha fina
   sólida, uma escala por gráfico, barras com ponta arredondada de 4px, linha de 2,5px, área em véu, vão de 2px. */
.cg-principal { padding-bottom: var(--esp-8); }
.cg-secao { padding: var(--esp-6) var(--esp-8) 0; }
.cg-secao > h2 { font-size: 20px; margin: 0 0 var(--esp-1); }
.cg-sobre { max-width: 760px; color: var(--texto-2); margin-bottom: var(--esp-4); }
.cg-comparacao { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; }
.cg-coluna { min-width: 0; padding: var(--esp-5); background: var(--gradiente-fundo); color: var(--texto); }
.cg-rotulo-coluna { margin: 0 0 var(--esp-3); font-size: 13px; font-weight: 600; color: var(--texto-2); }
.cg-card { position: relative; display: grid; gap: var(--esp-4); padding: var(--esp-5); border: 1px solid var(--cg-cartao-borda); border-radius: 16px; background: var(--cg-cartao); box-shadow: var(--sombra); color: var(--texto); }
.cg-visor { display: grid; gap: 2px; min-height: 86px; align-content: start; }
.cg-visor-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.cg-visor-valor { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--texto); }
.cg-visor-extra { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--texto-2); }
.cg-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cg-svg text { font-family: var(--fonte); }
.cg-eixo { fill: var(--texto-2); font-size: 11px; }
.cg-grade { stroke: var(--cg-grade); stroke-width: 1; }
.cg-legenda-linha { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 12px; color: var(--texto-2); }
.cg-legenda-linha i { display: inline-block; margin-right: 6px; vertical-align: middle; }
.cg-chave-linha { width: 16px; height: 2px; border-radius: 1px; background: var(--cg-serie); }
.cg-chave-previsto { width: 16px; height: 0; border-top: 2px dashed var(--cg-previsto); }
.cg-chave-faixa { width: 12px; height: 10px; border-radius: 2px; background: var(--cg-previsto); opacity: .3; }
.cg-chave-barra { width: 16px; height: 8px; border-radius: 0 3px 3px 0; background: var(--cg-serie); }
.cg-chave-tique { width: 2px; height: 12px; background: var(--texto); }
.cg-chave-etapa { width: 22px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--cg-ord-1), var(--cg-ord-6)); }
.cg-chave-perda { width: 14px; height: 10px; border-radius: 2px; background: var(--cg-perda); }

/* Realce: o item escolhido acende, o resto esmaece (sem mudar posição nem tamanho do que não foi escolhido). */
.cg-card [data-cg-item] { transition: opacity var(--duracao) var(--curva), filter var(--duracao) var(--curva), stroke-width var(--duracao) var(--curva), background var(--duracao) var(--curva); }
.cg-focado [data-cg-item]:not(.cg-ativo):not(.cg-cruz):not([data-cg-tempo]) { opacity: .3; }
.cg-svg .cg-ativo { filter: drop-shadow(0 0 8px var(--cg-brilho)); }
.cg-svg [data-cg-item]:focus-visible { outline: none; }

/* 1. Mostrador de operadoras */
.cg-mostrador { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: var(--esp-5); align-items: center; }
.cg-dial { max-width: 210px; margin: 0 auto; }
.cg-moldura { fill: none; stroke: var(--cg-grade); stroke-width: 1; }
.cg-marca { stroke: var(--cg-grade); stroke-width: 1; }
.cg-marca-maior { stroke: var(--texto-2); stroke-width: 1.5; }
.cg-trilho { fill: none; stroke: var(--cg-trilho); stroke-width: 16; }
.cg-fatia { fill: none; stroke-width: 16; cursor: pointer; }
.cg-fatia.cg-ativo, .cg-fatia:focus-visible { stroke-width: 22; }
.cg-dial-pct { fill: var(--texto); font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.cg-dial-rotulo { fill: var(--texto-2); font-size: 11px; }
.cg-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cg-lista .cg-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-template-areas: "amostra nome num" ". trilha pct";
  gap: 6px 10px;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--texto);
  font: 500 13px/1.3 var(--fonte);
  text-align: left;
  cursor: pointer;
  transform: none;
}
.cg-lista .cg-item:hover, .cg-lista .cg-item.cg-ativo { border-color: var(--borda); background: var(--hover-linha); }
.cg-lista .cg-item[aria-pressed="true"] { border-color: var(--marca); background: var(--selecionado); }
.cg-amostra { grid-area: amostra; width: 10px; height: 10px; border-radius: 3px; }
.cg-operadora .cg-nome { grid-area: nome; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-operadora .cg-num { grid-area: num; }
.cg-operadora .cg-pct { grid-area: pct; }
.cg-num { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cg-pct { color: var(--texto-2); font-variant-numeric: tabular-nums; text-align: right; }
.cg-trilha { grid-area: trilha; height: 4px; border-radius: var(--raio-pilula); background: var(--cg-trilho); overflow: hidden; }
.cg-trilha span { display: block; height: 100%; border-radius: var(--raio-pilula); }

/* 2. Linha do tempo */
.cg-plot { position: relative; border-radius: 8px; }
.cg-plot:focus-within { outline: 2px solid var(--foco); outline-offset: 4px; }
.cg-faixa { fill: var(--cg-previsto); opacity: .14; }
.cg-linha-previsto { fill: none; stroke: var(--cg-previsto); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cg-linha-serie { fill: none; stroke: var(--cg-serie); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--cg-brilho)); }
.cg-ponto { fill: var(--cg-serie); stroke: var(--card); stroke-width: 2; }
.cg-anotacao text { fill: var(--texto-2); font-size: 11px; font-weight: 600; }
.cg-agora { stroke: var(--cg-grade); stroke-width: 1; }
.cg-regua, .cg-marca-recebido, .cg-marca-previsto { opacity: 0; pointer-events: none; transition: opacity 120ms linear; }
.cg-regua-visivel .cg-regua, .cg-regua-visivel .cg-marca-recebido, .cg-regua-visivel .cg-marca-previsto { opacity: 1; }
.cg-regua { stroke: var(--texto-2); stroke-width: 1; }
.cg-marca-recebido { fill: var(--cg-serie); stroke: var(--card); stroke-width: 2; filter: drop-shadow(0 0 6px var(--cg-brilho)); }
.cg-marca-previsto { fill: var(--card); stroke: var(--cg-previsto); stroke-width: 2; }
.cg-sensor { fill: transparent; cursor: crosshair; }
.cg-dica {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--dica-fundo);
  color: var(--dica-texto);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--sombra-elevada);
  pointer-events: none;
}
.cg-dica > b:first-child { font-size: 15px; }

/* 3. Ranking */
.cg-ranking .cg-rank { grid-template-columns: 26px minmax(80px, 150px) minmax(0, 1fr) 26px 50px; grid-template-areas: none; }
.cg-posicao { color: var(--texto-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.cg-rank .cg-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-barra-trilho { position: relative; height: 14px; }
.cg-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, color-mix(in oklab, var(--cg-serie) 55%, transparent), var(--cg-serie)); }
.cg-tique { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--texto); box-shadow: 0 0 0 2px var(--card); }
.cg-rank .delta { justify-self: end; }
.delta.igual { background: var(--fundo-2); color: var(--texto-2); }

/* 4. Funil de fluxo */
.cg-etapa { cursor: pointer; }
.cg-etapa.cg-ativo, .cg-etapa:focus-visible { stroke: var(--foco); stroke-width: 2; }
.cg-fluxo { opacity: .55; cursor: pointer; }
.cg-fluxo.cg-ativo { opacity: .95; }
.cg-perda { fill: var(--cg-perda); cursor: pointer; }
.cg-perda-fluxo { fill: var(--cg-perda); opacity: .45; }
.cg-perda-num { fill: var(--texto-2); font-size: 11px; font-weight: 700; }
.cg-cumprimento.cg-andamento { opacity: .55; }
.cg-rotulo-final { fill: var(--texto); font-size: 12px; font-weight: 700; }
.cg-anotacao text { paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.cg-conversao { fill: var(--texto); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--card); stroke-width: 3px; pointer-events: none; }
.cg-etapa-num { fill: var(--texto); font-size: 14px; font-weight: 800; }
.cg-etapa-nome { fill: var(--texto-2); font-size: 10.5px; }

/* 5. Matriz de desempenho (tabela de verdade) */
.cg-rolagem { overflow-x: auto; }
.cg-matriz { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.cg-matriz caption { caption-side: bottom; padding-top: 6px; text-align: left; font-size: 12px; color: var(--texto-2); }
.cg-matriz th { padding: 4px 6px; border: 0; background: transparent; font-size: 12px; letter-spacing: 0; text-transform: none; }
.cg-matriz th[scope="row"] { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 600; color: var(--texto); }
.cg-matriz td { border: 0; }
.cg-matriz .cg-celula { height: 38px; min-width: 42px; padding: 0 6px; border-radius: 8px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cg-matriz .cg-celula.cg-ativo { outline: 2px solid var(--foco); outline-offset: 1px; }
.cg-matriz .cg-celula.cg-cruz { outline: 1px solid var(--texto-2); outline-offset: -1px; }
.cg-matriz .cg-celula:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.cg-matriz .cg-total { color: var(--texto); font-weight: 700; }
.cg-matriz .cg-n1, .cg-escala .cg-n1 { background: var(--cg-ord-1); color: var(--cg-ord-txt-1); }
.cg-matriz .cg-n2, .cg-escala .cg-n2 { background: var(--cg-ord-2); color: var(--cg-ord-txt-2); }
.cg-matriz .cg-n3, .cg-escala .cg-n3 { background: var(--cg-ord-3); color: var(--cg-ord-txt-3); }
.cg-matriz .cg-n4, .cg-escala .cg-n4 { background: var(--cg-ord-4); color: var(--cg-ord-txt-4); }
.cg-matriz .cg-n5, .cg-escala .cg-n5 { background: var(--cg-ord-5); color: var(--cg-ord-txt-5); }
.cg-matriz .cg-n6, .cg-escala .cg-n6 { background: var(--cg-ord-6); color: var(--cg-ord-txt-6); }
.cg-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; font-size: 12px; color: var(--texto-2); }
.cg-escala i { width: 22px; height: 10px; border-radius: 3px; }
.cg-escala span:first-child { margin-right: 6px; }
.cg-escala span:last-child { margin-left: 6px; }

/* Tabela dos dados (todo gráfico) e versões atuais */
.cg-tabela summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--link); }
.cg-tabela table { margin-top: var(--esp-2); font-size: 12px; }
.cg-tabela th, .cg-tabela td { padding: 6px 8px; }
.cg-atual-funil { display: grid; gap: var(--esp-2); }
.cg-atual-funil p { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 32px; gap: var(--esp-2); align-items: center; margin: 0; font-size: 13px; }
.cg-atual-trilho { height: 10px; border-radius: 4px; background: var(--trilho-grafico); overflow: hidden; }
.cg-atual-trilho span { display: block; height: 100%; background: var(--marca); }

.cg-entra { animation: surgir 700ms var(--curva) both; }
.cg-desenha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 1s var(--curva) .15s forwards; }

/* Partes da integração (06/11): célula vazia, mês sem previsto, funil em lista, próximos recebimentos e texto oculto. */
.cg-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cg-matriz .cg-n0 { background: transparent; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--cg-grade); }
.cg-cumprimento.cg-sem { fill: transparent; stroke: var(--cg-grade); stroke-dasharray: 3 3; }
.cg-vazio { margin: var(--esp-2) 0 0; }
.cg-funil-lista { display: none; }
.cg-funil-lista .cg-funil-etapa { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome num" "barra barra" "passo passo"; }
.cg-funil-etapa .cg-nome { grid-area: nome; }
.cg-funil-etapa .cg-num { grid-area: num; }
.cg-funil-etapa .cg-barra-trilho { grid-area: barra; height: 10px; }
.cg-funil-etapa .cg-barra { border-radius: 0 4px 4px 0; }
.cg-funil-passo { grid-area: passo; font-size: 12px; color: var(--texto-2); }
.cg-proximos .cg-proximo { grid-template-columns: 56px minmax(0, 1fr) auto; text-decoration: none; }
.cg-proximos .cg-proximo .cg-nome { color: var(--texto-2); font-weight: 600; }

/* Central de comando no painel: hierarquia por tamanho (a evolução em destaque), grade de 12 colunas. */
/* Três blocos (Ajustes 1.3): Oportunidades, Vendas realizadas e Comissões; cada um com o título, os números e os gráficos dele. */
.central .bloco { margin: 0 0 var(--esp-6); }
.central .bloco > h2 { margin: 0 0 var(--esp-3); font-size: 18px; font-weight: 700; color: var(--texto); }
.central .bloco > .numeros { margin-bottom: var(--esp-4); }
.central .bloco .cg-funil { max-height: 360px; }
/* Coluna estreita com dois cartões um embaixo do outro (operadoras e próximos meses). */
.central-grade .pilha { display: grid; gap: var(--esp-4); align-content: start; }
.central-grade .pilha .cg-card { height: auto; }
.central { margin: 0 0 var(--esp-6); }
.central-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--esp-4); }
.central-grade > * { min-width: 0; }
.central-largo { grid-column: span 8; }
.central-estreito { grid-column: span 4; }
.central-medio { grid-column: span 7; }
.central-medio2 { grid-column: span 5; }
.central-inteiro { grid-column: span 12; }
.central-grade .cg-card { height: 100%; align-content: start; }
.central-estreito .cg-mostrador { grid-template-columns: 1fr; justify-items: center; }
.central-estreito .cg-lista { width: 100%; }
@media (max-width: 1280px) {
  .central-largo, .central-medio, .central-inteiro { grid-column: span 12; }
  .central-estreito, .central-medio2 { grid-column: span 6; }
}
@media (max-width: 900px) {
  .central-largo, .central-estreito, .central-medio, .central-medio2, .central-inteiro { grid-column: span 12; }
  .central-estreito .cg-mostrador { grid-template-columns: minmax(150px, 200px) 1fr; justify-items: stretch; }
}

@media (max-width: 1500px) {
  .cg-comparacao { grid-template-columns: 1fr; }
  .cg-coluna > .cg-card, .cg-coluna > .card { max-width: 760px; }
}
@media (max-width: 560px) {
  .cg-funil { display: none; }
  .cg-funil-lista { display: grid; }
  .central-estreito .cg-mostrador { grid-template-columns: 1fr; justify-items: center; }
  .cg-some-celular { display: none; }
  .cg-tempo text { font-size: 15px; }
  .cg-visor-valor { font-size: 26px; }
  .cg-matriz th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); }
  .cg-secao { padding: var(--esp-5) var(--esp-3) 0; }
  .cg-coluna { padding: var(--esp-3); }
  .cg-mostrador { grid-template-columns: 1fr; }
  .cg-ranking .cg-rank { grid-template-columns: 22px minmax(0, 1fr) 26px 46px; }
  .cg-ranking .cg-rank .cg-barra-trilho { grid-column: 2 / -1; grid-row: 2; }
  .cg-proximos .cg-proximo { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .cg-proximos .cg-proximo .cg-barra-trilho { grid-column: auto; grid-row: auto; }
  .cg-matriz caption { position: sticky; left: 0; max-width: calc(100vw - 96px); white-space: normal; }
}

/* Vidro fosco: só no cabeçalho, na gaveta e no modal; sem suporte, fica o fundo sólido acima. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho, .lateral { background: var(--vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .modal { background: var(--vidro); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}

@media (max-width: 1100px) {
  .vitrine { grid-template-columns: 1fr; }
}

@media (max-width: 1400px) {
  .vitrine.tres { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .vitrine-topo { padding: var(--esp-5) var(--esp-4) var(--esp-3); }
  .vitrine-tema { padding: var(--esp-5) var(--esp-4); }
  .card { padding: var(--esp-4); }
  .t-pagina, h1 { font-size: 22px; }
}

/* Movimento reduzido: nada anima nem faz transição. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .desenha, .cg-desenha { stroke-dashoffset: 0; }
}