/* A aparência CRISTAL (protótipo, 29/10/2026): vidro fosco sobre um degradê do produto.
 *
 * TODA regra daqui começa por `body[data-aparencia="cristal"]` (ou é um `@media`/`@keyframes`
 * que só vale por causa delas). Esta folha só é ligada à página quando a pessoa escolheu o
 * Cristal; sem ela o Clássico é exatamente o de hoje. A guarda
 * `tests/test_a_aparencia_cristal_nao_toca_o_classico.py` confere as duas coisas.
 *
 * Ela veste por cima do que a casa já tem (a mesma ideia da linguagem_visual.py): não
 * reescreve tela nenhuma, e os tokens de cor, de escala e de tema (claro/escuro) continuam
 * valendo. O Cristal tem as DUAS variações, porque segue o `data-theme`.
 *
 * O que é vidro e o que é sólido, e por quê:
 *   - vidro (COM `backdrop-filter`): cartões de resumo, atalhos, avisos, blocos, KPI e a barra do topo.
 *     DECISÃO DO DONO (29/10/2026): "coloca o blur de volta; quem tiver celular ou PC muito ruim deixa
 *     sofrer um pouco, isso tirou muito da beleza". Antes se tirou por desempenho (CPU 4x: 18 fps na
 *     rolagem); ele preferiu a beleza. O que continua é só ACESSIBILIDADE e COMPATIBILIDADE:
 *     `prefers-reduced-transparency` e navegador sem `backdrop-filter` caem para superfície sólida;
 *   - vidro NUNCA dentro de vidro: a superfície aninhada não repete o filtro (dobra o custo sem mudar a imagem);
 *   - quase sólido, SEM blur: listas e tabelas (leitura, e não desempenho);
 *   - sólido: campos, menus suspensos, janelas — nada onde se digita ou se escolhe fica translúcido.
 */

body[data-aparencia="cristal"] {
  --cr-blur: 30px;
  --cr-vidro: rgba(255, 255, 255, .58);
  --cr-vidro-forte: rgba(255, 255, 255, .90);
  --cr-vidro-leve: rgba(255, 255, 255, .52);
  --cr-borda: rgba(235, 245, 255, .88);
  --cr-brilho: rgba(255, 255, 255, .38);
  --cr-aro: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .28);
  --cr-tinta: 16%;
  /* BOTOES (designer, pedido 5, especificacao-botoes.csv, variantes 02/03/04/13): fundo, texto, hover e
     pressionado SAO os do CSV. A borda do secundario no CLARO e' #6D8799 (a propria cor de borda da variante 13 do
     designer) e nao a #B8CDD9 do CSV, que da 1,6:1 sobre o vidro: o dono pediu botao visivel (>= 3:1, guarda). */
  /* CORRECAO: nem #6D8799 (claro) nem #5C7485 (escuro) do CSV chegam a 3:1 sobre o fundo pastel/teal onde os botoes de
     barra de ferramentas caem (a guarda mede o PIOR ponto do degrade). A BORDA fica na versao reforcada (a que o dono
     aprovou ao pedir botao visivel no escuro); fundo, texto, hover, pressionado, desabilitado e foco sao os do designer. */
  --cr-btn-fundo: #E7F1F7; --cr-btn-texto: #173348; --cr-btn-borda: #4f5663;
  --cr-btn-fundo-hover: #D8E9F3; --cr-btn-borda-hover: #2c323b; --cr-btn-fundo-ativo: #C6DFEC;
  --cr-btn-texto-off: #466174;
  --cr-perigo-fundo: #A92E43; --cr-perigo-hover: #91273A; --cr-perigo-ativo: #762031; --cr-perigo-texto: #FFF4F6;
  --cr-foco: #075F9F;
  --cr-barra-icone-borda: #6D8799; --cr-barra-icone-fundo: #263C4C; --cr-barra-icone-hover: #365568; --cr-barra-icone-ativo: #1C3040;
  --cr-icone-barra: 36px;
  --cr-marca-fundo: #001030; --cr-marca-borda: #5b7ea6; --cr-marca-brilho: 1.5;
  --cr-barra: rgba(23, 20, 24, .66);
  --cr-barra-reflexo: rgba(255, 255, 255, .18);
  --cr-barra-painel: rgba(23, 20, 24, .74);
  --cr-sombra: 0 26px 60px rgba(10, 50, 100, .22);
  --cr-destaque-a: #0b63b0;
  --cr-destaque-b: #064a85;
  /* PALETA A, "toda fria" (escolha do dono, 29/10/2026): o degrade nasce das cores da LOGO (azul, ciano, indigo, aco), sem
     peche/menta; a tinta dos cartoes e' a cor da AREA da aba (--acento, ja medida em linguagem_visual.CORES_DAS_AREAS): ambar
     so' onde a area e' Metas. A paleta e' do produto, nunca da empresa. */
  --cr-fundo-claro:
    linear-gradient(104deg, transparent 18%, rgba(255, 255, 255, .55) 22%, transparent 34%),
    linear-gradient(104deg, transparent 52%, rgba(255, 255, 255, .45) 55%, transparent 66%),
    radial-gradient(55% 50% at 8% 6%, #cfe3f7 0, transparent 72%),
    radial-gradient(45% 45% at 94% 10%, #c8ecf8 0, transparent 70%),
    radial-gradient(55% 55% at 78% 96%, #d2d6f4 0, transparent 70%),
    radial-gradient(35% 35% at 18% 92%, #dbe3ec 0, transparent 70%),
    linear-gradient(160deg, #eaf1f8, #dfe7f1);
  --cr-fundo: var(--cr-fundo-claro);
  --muted: #5d5a63;
}

body[data-aparencia="cristal"][data-theme="dark"] {
  --cr-vidro: rgba(14, 20, 28, .64);
  --cr-vidro-forte: rgba(22, 30, 38, .90);
  --cr-vidro-leve: rgba(30, 40, 50, .50);
  --cr-borda: rgba(150, 195, 240, .30);
  --cr-brilho: rgba(255, 255, 255, .10);
  --cr-aro: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .06);
  --cr-tinta: 15%;
  --cr-btn-fundo: #2A4054; --cr-btn-texto: #E4F0F8; --cr-btn-borda: #c0c9d6;
  --cr-btn-fundo-hover: #35526B; --cr-btn-borda-hover: #e6ebf2; --cr-btn-fundo-ativo: #21364A;
  --cr-btn-texto-off: #B2CAD9;
  --cr-perigo-fundo: #A92E43; --cr-perigo-hover: #BB3D51; --cr-perigo-ativo: #8B2637; --cr-perigo-texto: #FFF4F6;
  --cr-foco: #80C7FF;
  --cr-barra-icone-fundo: #202F42; --cr-barra-icone-hover: #314C61; --cr-barra-icone-ativo: #182838;
  --cr-barra: rgba(10, 12, 16, .56);
  --cr-barra-reflexo: rgba(255, 255, 255, .12);
  --cr-barra-painel: rgba(10, 14, 20, .70);
  --cr-sombra: 0 26px 60px rgba(0, 8, 30, .55);
  --cr-fundo-escuro:
    linear-gradient(104deg, transparent 18%, rgba(255, 255, 255, .07) 22%, transparent 34%),
    linear-gradient(104deg, transparent 52%, rgba(255, 255, 255, .06) 55%, transparent 66%),
    radial-gradient(55% 50% at 8% 6%, #0a3f73 0, transparent 72%),
    radial-gradient(45% 45% at 94% 10%, #0a5a85 0, transparent 70%),
    radial-gradient(55% 55% at 78% 96%, #1c2a73 0, transparent 70%),
    radial-gradient(35% 35% at 18% 92%, #13314a 0, transparent 70%),
    linear-gradient(160deg, #001030, #000a20);
  --cr-fundo: var(--cr-fundo-escuro);
  --muted: #c4cad2;
}

/* O fundo: uma camada FIXA atrás de tudo. Sem imagem (zero bytes, zero cache): é degradê. */
body[data-aparencia="cristal"] { background: transparent; }
body[data-aparencia="cristal"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--cr-fundo), var(--bg, #edf1f5);
}

/* ── A barra do topo vira uma cápsula flutuante ─────────────────────────────
 * O vidro mora num ::before: `backdrop-filter` no próprio <aside> o tornaria o bloco de
 * contenção dos menus suspensos (position: fixed) e os empurraria de lugar. */
/* A BARRA E' FIXA E O CONTEUDO NUNCA PASSA POR TRAS, ACIMA OU AO LADO DELA (pedido do dono, 29/10/2026: ao rolar, o texto da
 * pagina aparecia na fresta de ~8px acima da capsula e nas laterais). Agora o PROPRIO <aside> e' a camada: do topo da janela
 * ate a base da capsula + a folga (padding), de lado a lado, preenchido com o FUNDO da pagina (o mesmo degrade, OPACO: a ultima
 * camada e' o `--bg` solido) e `background-attachment: fixed`, que o alinha com o fundo da janela. A capsula de vidro e' o `::before`,
 * dentro dessa camada: ela deixa passar a LUZ do degrade, nunca o conteudo. */
@media (min-width: 1051px) {
  body[data-aparencia="cristal"].menu-topo .shell > aside {
    margin: 0; padding: var(--esp-2) calc(var(--esp-2) + var(--esp-2)); gap: var(--esp-2); position: sticky; top: 0;
    border: 0; border-radius: 0;
    background: var(--cr-fundo), var(--bg, #edf1f5); background-attachment: fixed;
    box-shadow: none;
  }
  body[data-aparencia="cristal"].menu-topo .shell > aside::before {
    inset: var(--esp-2); border-radius: var(--raio-pastilha); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--cr-sombra);
  }
}
/* Ancoras, foco de teclado e rolagem programada nunca ficam atras da barra (altura da camada + folga). */
html:has(body[data-aparencia="cristal"]) { --cr-barra-total: 76px; scroll-padding-top: var(--cr-barra-total); }
body[data-aparencia="cristal"] :target, body[data-aparencia="cristal"] [id] { scroll-margin-top: var(--cr-barra-total); }
/* `relative` e' o que prende o ::before ao aside: no celular ele e' `static`, e o vidro cobria a tela inteira. */
body[data-aparencia="cristal"] .shell > aside { position: relative; isolation: isolate; }
body[data-aparencia="cristal"] .shell > aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; border: 1px solid var(--cr-borda);
  /* VIDRO DE VERDADE (pedido do dono, 29/10: "o menu precisa dar a impressao de vidro"): translucido, deixando o fundo
     aparecer; reflexo suave em degrade no alto (some antes de chegar ao texto); borda de brilho de 1px no topo. */
  background: linear-gradient(180deg, var(--cr-barra-reflexo), transparent 45%), var(--cr-barra);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.6);
  backdrop-filter: blur(var(--cr-blur)) saturate(1.6);
}
@media (max-width: 1050px) {
  body[data-aparencia="cristal"] .shell > aside {
    margin: 8px 8px 0; border-radius: var(--raio-vidro-menor); background: transparent;
  }
}

/* O MENU E' PLANO dentro da cápsula (decisão do dono, 29/10/2026: "eu só não gostei de ENCAPSULAR CADA MENU"):
   nenhum contorno nem pílula por item. O ativo mostra só o realce suave (o sublinhado que a casa já tem); o hover é
   um brilho discreto, sem borda. */
/* Realce do menu: UM desenho so, o `::after` que a casa ja usa para hover, foco e ativo (ver `medidor_do_menu`). No Cristal
   ele e' um brilho de fundo MUITO discreto, SEM borda, SEM anel e SEM canto arredondado visivel; o ativo e o grupo aberto
   ganham so' o sublinhado de 2px. O dono: "pilula" e' toda caixa arredondada com contorno. */
body[data-aparencia="cristal"].menu-topo nav .nav-item::after,
body[data-aparencia="cristal"].menu-topo nav > .nav-group > summary::after { border-radius: var(--raio-campo); border: 0; box-shadow: none; }
body[data-aparencia="cristal"].menu-topo nav .nav-item:is(:hover, :focus-visible)::after,
body[data-aparencia="cristal"].menu-topo nav > .nav-group > summary:is(:hover, :focus-visible)::after { background: rgba(255, 255, 255, .08); }
body[data-aparencia="cristal"].menu-topo nav .nav-item.active::after,
body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > summary::after { background: rgba(255, 255, 255, .10); }
body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > summary::before { display: block; }
body[data-aparencia="cristal"].menu-topo nav .nav-item.active::before,
body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > summary::before { height: 2px; }
/* O sublinhado acompanha o canto leve do realce: encolhe nas pontas pelo raio, e nao fura o canto arredondado. */
body[data-aparencia="cristal"].menu-topo nav .nav-item.active::before,
body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > summary::before { left: var(--raio-campo); right: var(--raio-campo); border-radius: var(--raio-pastilha); }
body[data-aparencia="cristal"].menu-topo nav .nav-item:focus-visible,
body[data-aparencia="cristal"].menu-topo nav > .nav-group > summary:focus-visible { outline: none; box-shadow: none; }

/* ── O submenu: painel de vidro que DESCE com suavidade ───────────────────────────────────────────────
   Abre com fade + deslize de 8px + escala .98 -> 1 + desfoque que entra (~180ms, ease-out), itens em sequência de
   20ms. Fechar e' imediato (mais rápido que os 120ms pedidos: o `<details>` não anima o fechamento sem script, e o
   script de navegação não muda). Sem tremer: só opacity/transform/filter. Quem pediu menos movimento não vê nada. */
@media (min-width: 1051px) {
  body[data-aparencia="cristal"].menu-topo nav > .nav-group > .nav-sub {
    margin-top: var(--esp-2); border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro-menor);
    background: linear-gradient(180deg, var(--cr-barra-reflexo), transparent 40%), var(--cr-barra-painel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--cr-sombra);
    -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.6); backdrop-filter: blur(var(--cr-blur)) saturate(1.6);
  }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > summary { background: transparent; border-radius: 0; }
  /* Painel com colunas e faixa de titulos: a faixa ENCOSTA na borda de cima (dono, 30/10: "quando desce o menu ele cria em
     cima um pequeno espaco antes da faixa mais escura"). O respiro de 4px do painel ficava ACIMA da faixa e mostrava o vidro
     claro ali; o painel de uma coluna so (sem faixa) mantem o respiro. O corte do canto vem do overflow do painel. */
  body[data-aparencia="cristal"].menu-topo nav > .nav-group > .nav-sub:has(> details.nav-group-filho) { padding-top: 0; }
}
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub { transform-origin: top left; animation: cr-desce .18s ease-out both; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item { animation: cr-item .18s ease-out both; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(2) { animation-delay: 20ms; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(3) { animation-delay: 40ms; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(4) { animation-delay: 60ms; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(5) { animation-delay: 80ms; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(6) { animation-delay: 100ms; }
  body[data-aparencia="cristal"].menu-topo nav > .nav-group[open] > .nav-sub .nav-item:nth-of-type(n + 7) { animation-delay: 120ms; }
}
/* Os quadros-chave valem para a barra E para a sanfona do celular (por isso fora dos @media de largura). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cr-desce { from { opacity: 0; transform: translateY(-8px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes cr-item { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
/* A sanfona do celular também suaviza. */
@media (max-width: 1050px) and (prefers-reduced-motion: no-preference) {
  body[data-aparencia="cristal"].menu-aberto nav#menu-lateral { animation: cr-desce .2s ease-out both; transform-origin: top; }
}

/* A trilha deixa de ser uma faixa cinza de ponta a ponta. */
body[data-aparencia="cristal"] header.trilha-tela { background: transparent; border: 0; box-shadow: none; }

/* ── Superfícies de vidro ─────────────────────────────────────────────────── */
body[data-aparencia="cristal"] :is(.atalhos-favoritos, .pn-atencao, .pn-cartao, .pn-bloco, .metric, .admin-card, .contract-list-card, .visit-card, .next-step-card, .birthday-block, main section:where(:not(.molde):not(.molde-secao))) {
  background: linear-gradient(135deg, var(--cr-brilho), transparent 45%), var(--cr-vidro);
  border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro);
  box-shadow: var(--cr-aro), var(--cr-sombra);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.7);
  backdrop-filter: blur(var(--cr-blur)) saturate(1.7);
}
/* O que mora DENTRO de um vidro é mais leve e menor, para a hierarquia ler por tamanho. */
body[data-aparencia="cristal"] :is(.detail-item, .resumo-do-pedido) {
  background: var(--cr-vidro-leve); border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro-menor);
  box-shadow: none;
}
/* Lista e tabela: quase sólido (legibilidade — ver o relatório). */
body[data-aparencia="cristal"] :is(section.molde, section.block.molde, main > section.molde-secao, main > form.venda-form, main > form.lote, main > form.pedido-filtros) {
  background: var(--cr-vidro-forte); border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro);
  box-shadow: var(--cr-sombra);
}
body[data-aparencia="cristal"] :is(.pn-cartao-icone) { border-radius: var(--raio-vidro-menor); }

/* O que mora DENTRO de uma superfície (seção aninhada, barra de filtros, paginação, aviso, calendário,
   cartão de conta...) leva o canto menor e NUNCA blur: vidro dentro de vidro pesa e empasta. O fundo
   continua o da casa; só a forma muda. Veio da varredura de 29/10/2026 (superfícies com canto reto). */
body[data-aparencia="cristal"] :is(section, .molde) :is(section, .nested-section, .nested-panel, .tutorial,
  .molde-barra, .pagination-toolbar, .permission-group, .banner-slot, .banner-vazio, .conta-cartao,
  .finance-calendar-panel, .molde-secao, .molde-info, .molde-massa, .molde-corpo, .ficha-nota, .acerto-cartao,
  .ia-sugestoes, .ia-modulo, .molde-completude, .banners-config, .atalhos-lista) {
  border-radius: var(--raio-vidro-menor); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;      /* vidro nunca dentro de vidro */
}

/* O número é o herói do cartão: o rótulo recua. */
body[data-aparencia="cristal"] .pn-numero { font-weight: 700; font-size: 36px; letter-spacing: -.02em; }
body[data-aparencia="cristal"] .pn-cartao { padding: var(--esp-5); gap: var(--esp-4); }
body[data-aparencia="cristal"] .pn-cartao-icone { width: 48px; height: 48px; }

/* Cartões de KPI com TINTA translúcida na cor da ÁREA (--acento, token do produto), SEM blur extra; o vidro continua
   por baixo. O 1º é o destaque verde-água (abaixo). A paleta é do produto, nunca da empresa. */
body[data-aparencia="cristal"] .pn-cartao:not(:first-of-type) {
  background:
    linear-gradient(color-mix(in srgb, var(--tom) var(--cr-tinta), transparent), color-mix(in srgb, var(--tom) var(--cr-tinta), transparent)),
    linear-gradient(135deg, var(--cr-brilho), transparent 45%), var(--cr-vidro);
  border-color: color-mix(in srgb, var(--tom) 40%, var(--cr-borda));
}
body[data-aparencia="cristal"] .pn-cartao:not(:first-of-type) { --tom: var(--acento); }   /* a cor da AREA da aba (Inicio azul, Vendas verde-agua, Financeiro indigo, Metas dourado, Suporte ciano) */
body[data-aparencia="cristal"] .pn-cartao:not(:first-of-type) .pn-cartao-icone { color: var(--text); background: color-mix(in srgb, var(--tom) 32%, transparent); }

/* A Início respira: título maior, mais espaço entre as faixas. */
body[data-aparencia="cristal"] .pn-casca .pn-topo h2 { font-size: 34px; letter-spacing: -.02em; }

/* O primeiro cartão de cada fila ganha o verde-água de destaque (o do vídeo).
   ATENÇÃO À ESPECIFICIDADE: a regra de vidro acima usa `:where()` na seção da página justamente para NÃO
   passar por cima desta. Em 1.536.0 ela passava (0,3,3 contra 0,3,1) e o destaque saía branco sobre branco
   (achado ao vivo na demo, 29/10/2026). A guarda calcula as duas. */
body[data-aparencia="cristal"] .pn-cartao:first-of-type {
  /* COR SÓLIDA POR BAIXO: se o gradiente falhar (achado na l7, 29/10: texto branco sobre branco), o fundo
     continua verde-escuro e o texto continua legível. */
  background-color: var(--cr-destaque-b);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 40%), linear-gradient(145deg, var(--cr-destaque-a), var(--cr-destaque-b));
  box-shadow: var(--cr-aro), 0 26px 60px color-mix(in srgb, var(--cr-destaque-a) 45%, transparent);
  border-color: rgba(255, 255, 255, .22); color: #fff;
}
body[data-aparencia="cristal"] .pn-cartao:first-of-type :is(.pn-cartao-rotulo, .pn-cartao-rodape, .pn-var small, .pn-var.neutra, .pn-var.sem) { color: rgba(255, 255, 255, .92); }
body[data-aparencia="cristal"] .pn-cartao:first-of-type .pn-cartao-icone { color: #fff; background: rgba(255, 255, 255, .18); }
body[data-aparencia="cristal"] .pn-cartao:first-of-type .pn-var.boa { color: #c9f7e4; }
body[data-aparencia="cristal"] .pn-cartao:first-of-type .pn-var.ruim { color: #ffd9d4; }

/* ── Botões em pílula; os campos continuam sólidos ───────────────────────── */
body[data-aparencia="cristal"] main button:not(.pn-aba):not(.help),
body[data-aparencia="cristal"] main a.btn { border-radius: var(--raio-pastilha); }
/* DECISAO DO DONO (via coerencia-visual): botao em FORMULARIO ou na mesma linha de campo tem o MESMO raio do campo
   (`--raio-controle` = `--raio-campo`); pilula so' em chip, aba e botao isolado fora de formulario. */
body[data-aparencia="cristal"] { --raio-controle: var(--raio-campo); }
body[data-aparencia="cristal"] :is(form, :has(> :is(input, select, textarea, label))) :is(button, a.button, a.btn, input[type=submit]):not(.pn-aba):not(.help) {
  border-radius: var(--raio-controle);
}


/* ── BOTÕES VISÍVEIS NOS DOIS TEMAS (defeito do dono, 29/10/2026: "o tema escuro quase não dá pra ver o botão") ──
 * A guarda de contraste media só o TEXTO; o contorno e o fundo do botão sumiam no escuro. Agora cada
 * variante de botão tem borda com >= 3:1 contra a superfície onde cai (o guarda calcula por token, nos dois
 * temas, sobre fundo, vidro, cartão, janela e a barra), foco visível e hover mais claro. */
body[data-aparencia="cristal"] :is(button.secondary, a.button.secondary, .molde-botao-secundario, .molde-barra-buscar, .modal-close, button.help) {
  background: var(--cr-btn-fundo); color: var(--cr-btn-texto); border: 1px solid var(--cr-btn-borda);
}
body[data-aparencia="cristal"] :is(button.secondary, a.button.secondary, .molde-botao-secundario, .molde-barra-buscar, .modal-close):hover:not(:disabled) {
  background: var(--cr-btn-fundo-hover); border-color: var(--cr-btn-borda-hover);
}
body[data-aparencia="cristal"] :is(button.secondary, a.button.secondary, .molde-botao-secundario, .molde-barra-buscar, .modal-close):active:not(:disabled) {
  background: var(--cr-btn-fundo-ativo);
}
body[data-aparencia="cristal"] :is(button.secondary, .molde-botao-secundario, .molde-barra-buscar, .modal-close):disabled { color: var(--cr-btn-texto-off); }
/* Perigo (variante 04): vermelho do designer, texto claro; hover e pressionado do CSV. */
body[data-aparencia="cristal"] :is(button.danger-button, a.button.danger-button) {
  background: var(--cr-perigo-fundo); color: var(--cr-perigo-texto); border-color: var(--cr-perigo-fundo);
}
body[data-aparencia="cristal"] :is(button.danger-button, a.button.danger-button):hover:not(:disabled) { background: var(--cr-perigo-hover); border-color: var(--cr-perigo-hover); }
body[data-aparencia="cristal"] :is(button.danger-button, a.button.danger-button):active:not(:disabled) { background: var(--cr-perigo-ativo); border-color: var(--cr-perigo-ativo); }
/* Botão de linha (sem classe) e perigo: contorno na cor do próprio texto, para existirem como botão. */
body[data-aparencia="cristal"] main :is(button:not([class]), button.perigo) {
  border: 1px solid color-mix(in srgb, currentColor 85%, transparent); border-radius: var(--raio-pastilha);
}
/* Foco sempre visível (teclado), nas duas cores. */
body[data-aparencia="cristal"] :is(button, a.button, a.btn, .topo-icone):focus-visible {
  outline: 2px solid var(--cr-foco); outline-offset: 2px;
}
/* A barra: ícones (lupa, sol/lua, sino, perfil, sair) e itens do menu com contorno e fundo legíveis sobre a cápsula. */
/* TODOS os botões de ícone da barra com a MESMA caixa e o MESMO glifo (o dono viu um maior que o outro: o sino tinha 34x34 com
   glifo de 17px, os de perfil/sair 30x28, os demais 30x32). Um tamanho só, centrado. */
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button) {
  width: var(--cr-icone-barra); height: var(--cr-icone-barra); min-width: var(--cr-icone-barra); min-height: var(--cr-icone-barra);
  padding: 0; box-sizing: border-box; justify-content: center; align-items: center; line-height: 0;
}
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button) svg { width: 18px; height: 18px; flex: 0 0 18px; display: block; }
body[data-aparencia="cristal"] .shell > aside .user-top, body[data-aparencia="cristal"] .shell > aside .topo-tools { align-items: center; }
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button) {
  border: 1px solid var(--cr-barra-icone-borda); background: var(--cr-barra-icone-fundo); color: #ECF6FB;
}
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button):hover { background: var(--cr-barra-icone-hover); }
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button):active { background: var(--cr-barra-icone-ativo); }
body[data-aparencia="cristal"] .shell > aside .tema-switch svg { color: #fff; opacity: 1; }

/* Quem prefere menos transparência recebe superfície sólida, sem blur. */
@media (prefers-reduced-transparency: reduce) {
  body[data-aparencia="cristal"] {
    --cr-vidro: var(--panel); --cr-vidro-forte: var(--panel); --cr-vidro-leve: var(--panel-soft);
    --cr-barra: var(--sidebar);
  }
  body[data-aparencia="cristal"] *, body[data-aparencia="cristal"] *::before {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
/* Navegador sem `backdrop-filter`: o vidro sem blur fica ilegível, então fica mais cheio. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-aparencia="cristal"] { --cr-vidro: var(--panel); --cr-vidro-leve: var(--panel-soft); --cr-brilho: transparent; --cr-barra: var(--sidebar); }
}

/* ── A troca de tela: um fade MUITO curto do conteúdo, e a barra do topo imóvel ─────────────────────────
 * Dono (30/10/2026, ao trocar de aba da Início): "ele dá tipo um PULSO e RECARREGA; é um efeito legal mas parece um bug do
 * sistema... parece que o menu superior está se esforçando pra ir pra outra tela". A causa: View Transitions entre páginas
 * (`@view-transition`) aplicadas à PÁGINA INTEIRA, com a tela antiga desfocando/encolhendo (.28s) e a nova desfocando/crescendo
 * (.42s): a barra, que é igual nas duas, também pulsava. Agora a tela ANTIGA fica parada por baixo (sem animação) e a NOVA aparece
 * por cima em 140ms, só com `opacity`, sem desfoque nem escala: onde as duas são iguais (a barra e o submenu) nada se mexe; só o
 * conteúdo que mudou se revela. `mix-blend-mode: normal` desliga o `plus-lighter` do navegador, que somaria as duas telas e
 * daria um clarão. A contagem dos números e a entrada dos cartões (`pn-anima`) continuam como sempre. Quem pediu menos
 * movimento não vê nada. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  body[data-aparencia="cristal"] { view-transition-name: none; }
  ::view-transition-group(root) { animation-duration: .14s; }
  ::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: cr-aparece .14s ease-out both; mix-blend-mode: normal; }
  @keyframes cr-aparece { from { opacity: 0; } }
}


/* ── RESPIRO ENTRE AS SUPERFÍCIES (defeito do dono, 29/10/2026: "os cards encostados demais") ─────
 * Com canto de 26px e sombra, 4/8/12px entre dois cartões parecem colados. A medida ao vivo achou 35
 * telas com cartões a menos de 14px. Regra: NUNCA menos de `--esp-4` (16px) entre superfícies do mesmo
 * bloco ou de blocos vizinhos; token da escala, nunca px solto. Só as de nível de página (a seção
 * aninhada continua com o espaço dela). */
body[data-aparencia="cristal"] :is(.metric-grid, .compact-metrics, .pn-casca, .pn-linha-de-blocos, .pn-cartoes, .split, .billing-summary-strip, .finance-calendar-grid, .molde-form) { gap: var(--esp-4); }
body[data-aparencia="cristal"] :is(.metric-grid, .compact-metrics) { margin-bottom: var(--esp-4); }
body[data-aparencia="cristal"] main section { margin-bottom: var(--esp-4); }
body[data-aparencia="cristal"] :is(.pn-cartoes, .pn-linha-de-blocos, .billing-summary-strip) { margin-bottom: var(--esp-4); }
body[data-aparencia="cristal"] :is(.atalhos-favoritos, .pn-atencao) { margin-bottom: var(--esp-4); }

/* ── O INÍCIO CABE MAIS (pedido do dono, 11/11/2026: "isso está ocupando muito espaço") ─────────────────────
 * Atalhos numa linha fina; "Atenção hoje" UM quadro de colunas (Financeiro, Ordens de serviço, Estoque).
 * A coluna só existe onde há o que dizer; sobrou uma, ela ocupa o quadro (a grade de N colunas vem do HTML).
 * No celular as colunas viram pilha (estilo_dos_paineis.py) e o alvo de toque de 44px continua mais abaixo.
 * O quadro vive dentro de `.pn-casca`, que já separa os blocos pelo `gap`: a margem dele dobrava o vão. */
body[data-aparencia="cristal"] .pn-casca > .pn-atencao { margin-bottom: 0; }
@media (min-width: 761px) {
  body[data-aparencia="cristal"] .atalhos-favoritos { padding-block: var(--esp-1); }
  body[data-aparencia="cristal"] .atalhos-favoritos .atalho { min-height: 32px; }
  body[data-aparencia="cristal"] .pn-quadro { padding-block: var(--esp-2); gap: var(--esp-1); }
  body[data-aparencia="cristal"] .pn-quadro .pn-atencao-icone { width: 24px; height: 24px; }
  body[data-aparencia="cristal"] .pn-quadro .pn-atencao-lista { gap: 0; }
}
body[data-aparencia="cristal"] .block { margin-top: var(--esp-4); }


/* ── A FAIXA DO CAMINHO: nome da empresa + telas (pedido IMPORTANTE do dono, 29/10/2026) ─────────────────────
 * Era pequena e apagada sobre o degradê. Pílula de vidro com o nome da empresa em peso
 * maior, cada nível do caminho clicável (migalha) e o nível atual numa pílula própria, inconfundível.
 * Escolhida pelo dono (29/10/2026) entre duas opções em foto. Tudo por token; o nome nunca é cortado (quebra de linha). */
body[data-aparencia="cristal"] header.trilha-tela { padding: var(--esp-2) var(--esp-2) 0; min-width: 0; }
body[data-aparencia="cristal"] header.trilha-tela h1 {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); max-width: 100%; margin: 0;
  padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-vidro);
  background: var(--cr-vidro); border: 1px solid var(--cr-borda); box-shadow: var(--cr-aro), var(--cr-sombra);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.6); backdrop-filter: blur(var(--cr-blur)) saturate(1.6);
  font-size: var(--fs-corpo); color: var(--text);
}
body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-instancia { font-size: var(--fs-bloco); font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
body[data-aparencia="cristal"] header.trilha-tela h1 > span { display: inline; margin: 0; color: var(--muted); font-size: var(--fs-corpo); }
body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-nivel { color: var(--link); font-weight: 700; text-decoration: none; }
body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-nivel:hover { text-decoration: underline; }
body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-atual {
  font-weight: 800; color: var(--text); padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pastilha);
  background: color-mix(in srgb, var(--marca) 22%, transparent); border: 1px solid color-mix(in srgb, var(--marca) 55%, transparent);
}

/* ── Rosca: a legenda fica junto do número (achado na l7: vão enorme entre "Mensalidades..." e "100,0%") ── */
body[data-aparencia="cristal"] .pn-rosca-lista { width: auto; max-width: 100%; }
body[data-aparencia="cristal"] .pn-rosca-lista li { grid-template-columns: 12px minmax(0, max-content) max-content; justify-content: start; gap: var(--esp-3); }


/* ── A FONTE: Inter embutida (decisão do dono, 29/10/2026: "até a fonte eu achei diferente da apresentada") ──
 * No Mac a pilha do sistema entregava a SF e nas fotos do Debian, a Noto/Liberation: as fotos nunca foram
 * fiéis. Inter variável (OFL), servida pelo próprio sistema (nada de Google Fonts: CSP e privacidade), com
 * `font-display: swap`. O endereço é RELATIVO à folha: /dashboard/ e /admin/ servem o mesmo arquivo.
 * ORIGEM: github.com/rsms/inter, InterVariable.woff2, VERSÃO 4.66, licença OFL 1.1 (`assets/inter/OFL.txt`);
 * detalhes e estado do subset em `assets/inter/LEIAME.txt`. Sem o arquivo, a pilha cai em system-ui, sem quebrar. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonte-inter.woff2") format("woff2");
}
body[data-aparencia="cristal"] { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.011em; }   /* o ajuste ótico que a própria Inter recomenda em texto corrido: ela é mais larga que a Arial */
body[data-aparencia="cristal"] :is(button, input, select, textarea) { font-family: inherit; }
body[data-aparencia="cristal"] ::placeholder { letter-spacing: -0.03em; }   /* a Inter é mais larga: o placeholder não pode ser cortado (medidor de tela) */
body[data-aparencia="cristal"] :is(.pn-numero, .metric strong, td.num, .num, table) { font-variant-numeric: tabular-nums; }

/* ── Páginas soltas: login, senha, perfil, bloqueio de licença (29/10/2026) ──────────────────────
 * Têm folha própria e não passam pela moldura; `vestir()` marca o corpo com `data-pagina="solta"`, aplica o tema do sistema (`gestoroneai-theme` ou `prefers-color-scheme`).
 * PALETA A (decisão do dono: "a tela de login esqueceu da paleta, está muito brancona"): o degradê frio ocupa a TELA TODA
 * (é o `body::before` fixo), o cartão é VIDRO frio com blur (a página é curta, o custo é nulo), os campos são MAIS ESCUROS
 * que o cartão no claro (e mais escuros no escuro) com sombra interna e borda de >= 3:1, e o botão principal é o azul do
 * produto. Tudo pelos mesmos tokens da folha; as únicas cores novas são o fundo e a borda do CAMPO (abaixo). */
body[data-aparencia="cristal"][data-pagina="solta"] {
  background: transparent; position: relative;
  --cr-campo-solto: #dbe6f1; --cr-campo-solto-borda: #5a7189;
  /* O degrade das paginas soltas e' o MESMO da paleta A, so' que com as luzes em plena intensidade (nas telas do painel o
     vidro e a tela cheia de cartoes escondem o fundo; aqui ele e' o assunto): "muito brancona" nao. */
  --cr-solta-fundo-claro:
    radial-gradient(60% 55% at 10% 10%, #8fc2f0 0, transparent 70%),
    radial-gradient(50% 50% at 92% 14%, #8ee0f5 0, transparent 70%),
    radial-gradient(60% 60% at 80% 96%, #a7aef0 0, transparent 70%),
    radial-gradient(40% 40% at 14% 92%, #b4c7de 0, transparent 70%),
    linear-gradient(160deg, #e3edf8, #d5e2f1);
  --cr-solta-fundo-escuro:
    radial-gradient(60% 55% at 10% 10%, #0d5aa6 0, transparent 70%),
    radial-gradient(50% 50% at 92% 14%, #0b7aa6 0, transparent 70%),
    radial-gradient(60% 60% at 80% 96%, #3340a8 0, transparent 70%),
    radial-gradient(40% 40% at 14% 92%, #17405f 0, transparent 70%),
    linear-gradient(160deg, #001030, #000a20);
  --cr-fundo: var(--cr-solta-fundo-claro);
  /* estas paginas nao carregam a folha da casa: os tokens de texto e de fundo que o Cristal le vem daqui */
  --text: #252129; --bg: #e3edf8;
}
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] { --cr-campo-solto: #06101c; --cr-campo-solto-borda: #8aa0b8; color-scheme: dark; --cr-fundo: var(--cr-solta-fundo-escuro); --text: #edf1f5; --bg: #001030; }
body[data-aparencia="cristal"][data-pagina="solta"]::before { mask-image: none; -webkit-mask-image: none; }
body[data-aparencia="cristal"][data-pagina="solta"]::after { display: none; }
/* O nome da empresa na entrada: UMA linha, titulo moderado (o nome completo vai na dica do elemento). */
body[data-aparencia="cristal"][data-pagina="solta"] form.login .brand > div:last-child { min-width: 0; }
body[data-aparencia="cristal"][data-pagina="solta"] form.login .brand h1 {
  font-size: var(--fs-bloco); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
body[data-aparencia="cristal"][data-pagina="solta"] :is(main, .login, .corpo, .blocked, body > form) {
  background: linear-gradient(135deg, var(--cr-brilho), transparent 45%), var(--cr-vidro);
  border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro); color: var(--text);
  box-shadow: var(--cr-aro), var(--cr-sombra);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.7); backdrop-filter: blur(var(--cr-blur)) saturate(1.7);
}
body[data-aparencia="cristal"][data-pagina="solta"] :is(main, .login, .corpo, .blocked) :is(section, form, .regularization):not(:only-child) {
  border-radius: var(--raio-vidro-menor); -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Campos: distintos do cartão (mais escuros), sombra interna e borda >= 3:1. */
body[data-aparencia="cristal"][data-pagina="solta"] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  background: var(--cr-campo-solto); border: 1px solid var(--cr-campo-solto-borda); color: var(--text);
  box-shadow: inset 0 2px 4px rgba(10, 30, 60, .16);
}
/* Botao principal no azul do produto. */
body[data-aparencia="cristal"][data-pagina="solta"] :is(button[type=submit], .button:not(.secondary), a.button:not(.secondary)) {
  background: linear-gradient(135deg, var(--cr-destaque-a), var(--cr-destaque-b)); color: #fff; border-color: var(--cr-destaque-b);
}
/* TEMA ESCURO das paginas soltas: texto, apoio, link e caixas de aviso pelos tokens do tema. */
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .login, .corpo, .blocked) :is(h1, h2, h3, p, label, strong, span, small, li, div) { color: var(--text); }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .login, .corpo, .blocked) :is(p, small, .muted, .help, .ai-line, .assina-nome, .dev small) { color: var(--muted); }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .login, .corpo, .blocked) a:not(.button) { color: #8ec5ff; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(.error, .erro, .alert, .notice, .ai-line, .regularization) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] .assina img { mix-blend-mode: normal; filter: brightness(0) invert(1); }
/* Caixas brancas que essas paginas escrevem a mao (o dado do bloqueio, o "i" de ajuda): no escuro viram campo escuro. */
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(.regularization-grid div, .help, .value, .password-wrap .toggle-password) { background: var(--cr-campo-solto); border-color: var(--cr-campo-solto-borda); color: var(--text); }

/* ── Login e paginas soltas no ESCURO: o que o dono viu na demo-suporte (10/11/2026) ──────────────────────────────────────
 * 1. A LOGO DO CLIENTE SUMIA: o claro a mistura com o cartao por `multiply` (o branco do JPG some); no escuro isso pinta a
 *    tinta escura da logo sobre o vidro escuro - invisivel. No escuro a logo vai numa PLACA CLARA FIXA (a mesma ideia da
 *    placa do e-mail), seja ela de tinta clara ou escura, PNG ou JPG.
 * 2. O CONVITE "Envie sua logomarca" (sem logo) era cinza sobre cinza (2,9:1): vira campo escuro, texto de 4,5:1 ou mais.
 * 3. O AVISO DE ERRO era cinza neutro: some a ideia de perigo. Vermelho escuro, borda e texto claros.
 * 4. O FOCO: a pagina pinta o anel com a cor do cliente (marinho), que no escuro nao aparece. Anel claro de 2px.
 * 5. O PREENCHIMENTO AUTOMATICO do Chrome pinta o campo de amarelo/azul-claro e deixava o texto claro sobre claro. */
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] .mark:has(> img) { background: #f3f6fa; border-radius: var(--raio-vidro-menor); padding: 10px 20px; min-height: 0; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] .mark img { mix-blend-mode: normal; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] .mark-vazia { background: var(--cr-campo-solto); border-color: #a9bbd0; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .login, .corpo, .blocked) .mark-vazia :is(small) { color: #c5d2e0; opacity: 1; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .login, .corpo, .blocked) :is(.error, .erro) { background: rgba(180, 35, 24, .30); border-color: #f97066; color: #ffe4e1; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(input, select, textarea):focus-visible,
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(input, select, textarea):focus { outline: 2px solid #8ec5ff; outline-offset: 2px; border-color: #8ec5ff; }
/* 6. O ADMIN (master): a faixa do alto e' uma PLACA CLARA fixa (a logo do produto foi desenhada para fundo claro) - o texto dela
 *    tem de continuar escuro, e nao o claro do tema; e o "recado" era uma caixa clara com texto claro (ilegivel). */
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] main .topo .linha { color: #0a5fae; }
body[data-aparencia="cristal"][data-pagina="solta"][data-theme="dark"] :is(main, .corpo) .recado { background: rgba(255, 255, 255, .07); border-left-color: #5ab0ff; color: var(--text); }
/* 7. O CLARO tambem fecha 4,5:1: o azul do produto (#0d76d8) e o cinza de apoio (#647085) davam 4,0 a 4,4:1 sobre o vidro claro
 *    (link "Esqueci minha senha", "Voltar para o login", legendas, a senha temporaria). Um passo mais escuro cada um. */
body[data-aparencia="cristal"][data-pagina="solta"]:not([data-theme="dark"]) { --muted: #55627a; }
body[data-aparencia="cristal"][data-pagina="solta"]:not([data-theme="dark"]) :is(main, .login, .corpo, .blocked) :is(a:not(.button), .value.password) { color: #0a5fae; }
body[data-aparencia="cristal"][data-pagina="solta"]:not([data-theme="dark"]) :is(main, .login, .corpo, .blocked) :is(.field > span, .rodape span, .topo .linha) { color: var(--muted); }
body[data-aparencia="cristal"][data-pagina="solta"]:not([data-theme="dark"]) main .topo .linha { color: #0a5fae; }
body[data-aparencia="cristal"][data-pagina="solta"] input::placeholder { color: var(--muted); opacity: 1; }
body[data-aparencia="cristal"][data-pagina="solta"] input:-webkit-autofill,
body[data-aparencia="cristal"][data-pagina="solta"] input:-webkit-autofill:hover,
body[data-aparencia="cristal"][data-pagina="solta"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text); box-shadow: inset 0 0 0 1000px var(--cr-campo-solto); transition: background-color 9999s ease-out 0s;
}

/* ── O CELULAR (defeitos do dono, 29/10/2026, iPhone 390px: "a barra virou um bloco gigante, muita coisa pra corrigir") ──
 * Medido: a barra tinha 195px (a lupa e o sino em linhas SEPARADAS e a logo + o simbolo juntos). A causa: a regra que dava a
 * caixa de 32px aos botoes de icone tambem ligava o `display`, e passou por cima do `aside .busca-lupa { display: none }` do
 * celular (os botoes deviam ficar escondidos ate' o sanduiche abrir). Agora a barra fechada e' UMA linha: simbolo + selo a
 * esquerda; lupa, sino e sanduiche a direita, todos com alvo de toque de 44px. */
@media (max-width: 1050px) {
  body[data-aparencia="cristal"] { --cr-icone-barra: 44px; }
  body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button) svg { width: 18px; height: 18px; }
  body[data-aparencia="cristal"] .shell > aside {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: start;
    gap: var(--esp-2); padding: var(--esp-2) var(--esp-3) var(--esp-2) 0; min-height: 0;
  }
  body[data-aparencia="cristal"] .shell > aside .brand { display: contents; }
  body[data-aparencia="cristal"] .shell > aside .brand-inicio { order: 1; min-width: 0; min-height: 44px; }
  body[data-aparencia="cristal"] .shell > aside .brand img.brand-logo { display: none; }
  body[data-aparencia="cristal"] .shell > aside .brand img.brand-simbolo {
    display: block; width: 36px; height: 36px; max-width: none; max-height: none; filter: none;
  }
  body[data-aparencia="cristal"] .shell > aside .brand .selo-do-modulo {
    display: inline-flex; order: 2; padding: 2px var(--esp-2); font-size: var(--fs-rotulo); white-space: nowrap;
  }
  /* O selo de cada modulo (SVG do designer) fica, menor, ao lado do simbolo; se forem varios, so' o primeiro (o aviso curto cabe). */
  body[data-aparencia="cristal"] .shell > aside .brand .selos-do-modulo { display: inline-flex; order: 2; min-width: 0; overflow: hidden; }
  body[data-aparencia="cristal"] .shell > aside .brand .selos-do-modulo > :not(:first-child) { display: none; }
  body[data-aparencia="cristal"] .shell > aside .brand .selos-do-modulo .selo-svg { height: 22px; }
  body[data-aparencia="cristal"] .shell > aside .busca-lupa { order: 3; display: inline-flex; margin: 0 0 0 auto; flex: 0 0 auto; }
  body[data-aparencia="cristal"] .shell > aside .relato-abrir { order: 4; display: inline-flex; margin: 0; flex: 0 0 auto; }
  body[data-aparencia="cristal"] .shell > aside .menu-sanfona { order: 5; flex: 0 0 auto; margin: 0; }
  /* Sem lupa (o painel master nao tem busca), quem empurra o sanduiche para a direita e' ele mesmo; com lupa, e' a lupa. */
  body[data-aparencia="cristal"] .shell > aside:not(:has(.busca-lupa)) .menu-sanfona { margin-left: auto; }
  /* A barra com a altura DELA (02/11/2026): o `.shell` e' grade de duas linhas com altura minima de tela, e em tela curta (o Inicio
   * do master) a sobra se repartia tambem na linha da barra, que crescia para 130px com um vao embaixo da logo. A sobra vai ao conteudo. */
  body[data-aparencia="cristal"] .shell { grid-template-rows: auto 1fr; }
  body[data-aparencia="cristal"].menu-aberto .shell > aside nav { order: 10; flex: 1 0 100%; }
  body[data-aparencia="cristal"].menu-aberto .shell > aside .topo-tools { order: 11; flex: 1 0 100%; justify-content: flex-end; }
  body[data-aparencia="cristal"].menu-aberto .shell > aside .busca-lupa { flex: 0 0 auto; }
}

/* Celular: a faixa do caminho, o convite de instalar e os vaos entre blocos ficam compactos; o que rola para o lado mostra
 * o esmaecer da borda e para de cortar palavra no meio (rolagem com encaixe, e folga no fim para o ultimo item sair do esmaecer). */
@media (max-width: 760px) {
  body[data-aparencia="cristal"] header.trilha-tela { padding: var(--esp-1) var(--esp-2) 0; }
  body[data-aparencia="cristal"] header.trilha-tela h1 { padding: var(--esp-1) var(--esp-3); gap: 0 var(--esp-2); }
  body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-instancia { font-size: var(--fs-corpo); }
  body[data-aparencia="cristal"] header.trilha-tela h1 .trilha-atual { padding: 0 var(--esp-2); font-size: var(--fs-apoio); }

  body[data-aparencia="cristal"] .atalhos-linhas {
    scroll-snap-type: x proximity; padding-right: var(--esp-6, 32px);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  body[data-aparencia="cristal"] .atalhos-linhas > * { scroll-snap-align: start; }
  /* As abas da Inicio (Executivo, Financeiro, Vendas...) NAO rolam: quebram em duas linhas, todas a vista e a um toque
     (dono, 29/10: "as Dashboard ficam cortadas e nao e facil de alternar"). Mesmo link e mesma tecla de cada painel. */
  body[data-aparencia="cristal"] .pn-casca .pn-abas { flex-wrap: wrap; overflow: visible; }
  /* Texto de aviso nao rola para o lado: quebra em linhas, a palavra inteira. */
  body[data-aparencia="cristal"] .pn-atencao-lista { flex-wrap: wrap; overflow: visible; }
  body[data-aparencia="cristal"] .pn-atencao-item { min-width: 0; max-width: 100%; }

  /* UMA folga entre blocos (o gap da grade); a margem de baixo de cada bloco dobrava o vao e o deixava desigual. */
  body[data-aparencia="cristal"] .pn-casca > *, body[data-aparencia="cristal"] .pn-linha-de-blocos > *,
  body[data-aparencia="cristal"] .pn-cartoes > * { margin-bottom: 0; }
  body[data-aparencia="cristal"] .pn-casca { gap: var(--esp-3); }
}

/* Alvo de toque de 44px, so' em tela de toque e estreita (o computador segue com a altura da casa). A altura de todo controle
 * vem de UM token da escala (`--altura-controle`); trocar o token move botao, campo e seletor juntos, sem regra por componente. */
@media (max-width: 1050px) and (pointer: coarse) {
  body[data-aparencia="cristal"] { --altura-controle: 44px; }
  body[data-aparencia="cristal"] main :is(.atalho, .pn-aba) { min-height: 44px; }
}

/* ── O BALAO DE INSTALAR O APLICATIVO (dono, 29/10/2026): flutuante, vidro leve, fecha com o X; a posicao e o fluxo sao da folha da casa ── */
body[data-aparencia="cristal"] .pwa-convite {
  background: color-mix(in srgb, var(--panel) 95%, transparent); color: var(--text); border: 1px solid var(--cr-borda); box-shadow: var(--cr-aro), var(--cr-sombra);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.4); backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
}

/* ── BOTAO PRESSIONADO MUDA SO' A COR (dono, 29/10/2026: "meu menu sanduiche se deforma quando a gente pressiona") ──
 * A casa levanta o botao 1px no hover e o solta no :active. No toque o hover FICA depois do dedo sair, e o botao pulava
 * entre -1px, 0 e a sombra grande: a caixa "deformava". Aqui, nos botoes da barra e do balao, e em todo botao de tela de
 * toque, hover e pressionado trocam so' o fundo; forma, tamanho, posicao e sombra nao mudam. */
body[data-aparencia="cristal"] :is(.shell > aside, .pwa-convite, .aviso-novidade) :is(button, a.topo-icone, a.button):is(:hover, :active, :focus-visible) {
  transform: none; filter: none; box-shadow: none;
}
body[data-aparencia="cristal"] :is(.shell > aside, .pwa-convite, .aviso-novidade) :is(button, a.topo-icone, a.button) {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
}
body[data-aparencia="cristal"] .shell > aside .menu-sanfona {
  width: var(--cr-icone-barra); height: var(--cr-icone-barra); min-width: var(--cr-icone-barra); min-height: var(--cr-icone-barra);
  padding: 0 var(--esp-3); box-sizing: border-box; border: 1px solid var(--cr-barra-icone-borda); border-radius: var(--raio-campo);
  background: var(--cr-barra-icone-fundo); color: #ECF6FB; aspect-ratio: 1 / 1; transition: background-color .12s;
}
body[data-aparencia="cristal"] .shell > aside .menu-sanfona:hover { background: var(--cr-barra-icone-hover); }
body[data-aparencia="cristal"] .shell > aside .menu-sanfona:active { background: var(--cr-barra-icone-ativo); }
@media (hover: none) {
  body[data-aparencia="cristal"] :is(button, .button):hover { transform: none; filter: none; }
}

/* ── A LOGO NA BARRA (dono, 30/10/2026: "a logo do Gestor na barra superior tambem nao caiu bem": cinza-azulado sobre o vidro,
 * o "ONE AI" quase some, o simbolo se perde no brilho) ──
 * Mesma solucao da entrada: a arte do designer (PNG 228x76, mostrada a 38px) vai sobre um FUNDO NAVY SOLIDO so' atras da logo,
 * com a borda azul-aco e brilho pleno (tokens `--cr-marca-*`); o vidro da barra continua vidro em volta. A conta de contraste
 * (texto >= 4,5:1 no pior pixel, simbolo >= 3:1 na mediana) e' a mesma da entrada e esta' na guarda.
 * A logo e' sempre a COMPLETA do designer (decisao do dono, 30/10: "nunca parte da logo com a palavra"). */
body[data-aparencia="cristal"] .shell > aside .brand-inicio {
  display: inline-flex; align-items: center; gap: var(--esp-2); padding: 4px var(--esp-3);
  background: var(--cr-marca-fundo); border: 1px solid var(--cr-marca-borda); border-radius: var(--raio-pastilha);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
body[data-aparencia="cristal"] .shell > aside .brand-inicio img { filter: brightness(var(--cr-marca-brilho)); }
@media (max-width: 1050px) {
  body[data-aparencia="cristal"] .shell > aside .brand-inicio { padding: 4px var(--esp-2); }
}

/* ── A BARRA CABE COM TODOS OS GRUPOS (achado na instancia com os tres produtos, 30/10/2026: a 1366px Financeiro e Sistema
 * ficavam fora da vista, a direita, atras de uma rolagem escondida) ──
 * Medido com os 9 grupos (Inicio, Pergunte a IA, Cadastros, Vendas, Estoque e Compras, Suporte, Catalogo, Financeiro,
 * Sistema): faltavam 322px a 1280, 236 a 1366, 162 a 1440, 66 a 1536. Camadas, da menos para a mais visivel, sem esconder
 * grupo nenhum: (1) folga do item e do icone menores; (2) abaixo de 1500px o icone do item sai (o texto fica); (3) abaixo de
 * 1366px o nome do usuario e a versao saem da barra (continuam no perfil e na assinatura). A barra nunca rola escondida. */
@media (min-width: 1051px) and (max-width: 1600px) {
  body[data-aparencia="cristal"].menu-topo nav > .nav-item,
  body[data-aparencia="cristal"].menu-topo nav > .nav-group > summary { padding: 0 var(--esp-2); gap: var(--esp-1); }
  body[data-aparencia="cristal"].menu-topo .shell > aside { gap: var(--esp-2); }
  body[data-aparencia="cristal"].menu-topo nav#menu-lateral { margin-left: var(--esp-3); }
}
@media (min-width: 1051px) and (max-width: 1500px) {
  body[data-aparencia="cristal"].menu-topo nav > .nav-item > svg,
  body[data-aparencia="cristal"].menu-topo nav > .nav-group > summary > svg { display: none; }
}
@media (min-width: 1051px) and (max-width: 1400px) {
  body[data-aparencia="cristal"].menu-topo .shell > aside .topo-tools .user-nome,
  body[data-aparencia="cristal"].menu-topo .shell > aside .sidebar-signature { display: none; }
}

/* ── A CAPSULA DA LOGO COMECA NA BORDA ESQUERDA DA BARRA (dono, 30/10: "voce alinha pra ela comecar exatamente no inicio da barra
 * superior, porque no seu exemplo ela esta desalinhada") ──
 * No computador a capsula de vidro da barra e' o `aside::before`, a `--esp-2` de cada borda do aside; o recuo do aside (16px)
 * deixava a logo 8px para dentro dela. Agora o recuo da esquerda e' o MESMO `--esp-2`: a borda esquerda da logo coincide com a
 * da barra, com a mesma altura (nenhuma fresta acima nem abaixo) e o mesmo raio. No celular o proprio aside e' a capsula, e o
 * recuo da esquerda e' zero. Medido nas 5 larguras e a 390 pelo `medidor_da_barra.js` (BARRA_LOGO_DESALINHADA). */
@media (min-width: 1051px) {
  body[data-aparencia="cristal"].menu-topo .shell > aside { padding-left: var(--esp-2); }
}

/* ── O AVISO DE NOVIDADE (dono, 30/10/2026) ──
 * Posicao, fluxo, tempos, tipos (cor por tipo, nos dois temas) e o "Saiba mais" que EXPANDE o cartao sao do modulo
 * `avisos_de_novidade.py`; aqui mora o VISUAL do Cristal: vidro com `blur(28px) saturate(1.2)`, borda de brilho azul-aco, canto de vidro
 * (`--raio-vidro`, hoje 14px: o do cartao do sistema; o designer pediu 24px e a escala nao tem esse degrau), sombra suave e botao azul do produto.
 * O heroi e' uma CAPTURA REAL da Inicio (a ilustracao do designer mostrava um botao deslizante de tema que o sistema nao tem). */
body[data-aparencia="cristal"] .aviso-novidade {
  background: linear-gradient(135deg, var(--cr-brilho), transparent 45%), color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text); border: 1px solid var(--cr-marca-borda); border-radius: var(--raio-vidro);
  box-shadow: var(--cr-aro), 0 26px 60px rgba(8, 24, 52, .30);
  -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2);
}
@media (max-width: 760px) { body[data-aparencia="cristal"] .aviso-novidade { border-radius: var(--raio-vidro) var(--raio-vidro) 0 0; } }
body[data-aparencia="cristal"] .aviso-novidade-titulo { color: var(--text); }
body[data-aparencia="cristal"] .aviso-novidade-texto { color: var(--muted); }
body[data-aparencia="cristal"] .aviso-novidade-heroi { border-bottom: 1px solid var(--cr-borda); }
body[data-aparencia="cristal"] .aviso-novidade .button {
  background: linear-gradient(145deg, var(--cr-destaque-a), var(--cr-destaque-b)); color: #fff; border: 1px solid transparent;
}
body[data-aparencia="cristal"] .aviso-novidade .aviso-novidade-mais { background: var(--cr-btn-fundo); color: var(--cr-btn-texto); border: 1px solid var(--cr-btn-borda); }
body[data-aparencia="cristal"] .aviso-novidade-historico { color: var(--link); }
body[data-aparencia="cristal"] .aviso-novidade-detalhe { background: var(--cr-vidro-leve); border: 1px solid var(--cr-borda); }
body[data-aparencia="cristal"] .aviso-novidade .aviso-novidade-fechar { background: var(--cr-btn-fundo); border: 1px solid var(--cr-btn-borda); color: var(--cr-btn-texto); }

/* O movimento: so' `transform` e `opacity`, tudo dentro de `no-preference` (sem movimento: o quadro final), com limite de repeticoes
 * (nada infinito), sem piscar e parado com a aba em segundo plano. */
@media (prefers-reduced-motion: no-preference) {
  body[data-aparencia="cristal"] .aviso-novidade { animation: aviso-entra .36s cubic-bezier(.2, .8, .2, 1) both; }
  body[data-aparencia="cristal"] .aviso-novidade.aviso-novidade-saindo { animation: aviso-sai .16s ease-in both; }
  body[data-aparencia="cristal"] .aviso-novidade-detalhe { animation: aviso-detalhe .24s ease-out both; }
  /* o botao "Entendi" respira de leve, so' depois de 3 s com o cartao parado, 4 vezes, e para ao passar o mouse */
  body[data-aparencia="cristal"] .aviso-novidade button.button:not(.aviso-novidade-mais) { animation: aviso-respira 2.4s ease-in-out 3s 4 both; }
  body[data-aparencia="cristal"] .aviso-novidade:hover button.button { animation: none; }
  body[data-aparencia="cristal"] .aviso-novidade.aviso-novidade-em-segundo-plano,
  body[data-aparencia="cristal"] .aviso-novidade.aviso-novidade-em-segundo-plano * { animation-play-state: paused; }
  @keyframes aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes aviso-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
  @keyframes aviso-detalhe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes aviso-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
}

/* ── A BARRA: O NOME A ESQUERDA, OS ICONES A DIREITA, TODOS IGUAIS (dono, 30/10/2026, foto da 1.551.0) ──
 * Queixas: (1) o nome do usuario ficava NO MEIO dos icones; (2) o sol (tema) estava torto, 2px abaixo do centro: o glifo morava num
 * `<span>` em linha, que somava a altura da linha; (3) o botao de reportar tinha cor diferente: a casa o deixa a 72% de opacidade quando
 * "recolhido" (`.relato-abrir.recolhido`); (4) caixa e traco unicos. Agora: nome primeiro, depois lupa, tema, alertas, perfil, sair e
 * reportar, todos com a MESMA caixa de 36px, o MESMO glifo de 18px (traco do designer, viewBox de 24), centralizados de verdade, e a
 * mesma cor, fundo, borda e opacidade em todos os estados. Medido por `medirIconesDaBarra` (tests/medidor_da_barra.js). */
@media (min-width: 1051px) {
  body[data-aparencia="cristal"].menu-topo .shell > aside :is(.topo-tools, .user-top) { display: contents; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .brand { order: 1; }
  body[data-aparencia="cristal"].menu-topo .shell > aside nav { order: 2; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .user-nome { order: 10; margin-left: var(--esp-2); }
  body[data-aparencia="cristal"].menu-topo .shell > aside .busca-lupa { order: 11; margin-left: 0; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .tema-switch { order: 12; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .notification-center { order: 13; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .user-top a[href="/auth/profile"] { order: 14; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .user-top a[href="/auth/logout"] { order: 15; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .relato-abrir { order: 16; margin: 0; }
  body[data-aparencia="cristal"].menu-topo .shell > aside .sidebar-signature { order: 20; }
}
body[data-aparencia="cristal"] .shell > aside .tema-switch { display: inline-flex; align-items: center; justify-content: center; }
/* So' o glifo VISIVEL ganha `display`: a casa esconde o outro com `[aria-pressed]` (sol no claro, lua no escuro), e ligar os dois somava 22px. */
body[data-aparencia="cristal"] .shell > aside .tema-switch[aria-pressed="false"] .tema-sol,
body[data-aparencia="cristal"] .shell > aside .tema-switch[aria-pressed="true"] .tema-lua { display: inline-grid; place-items: center; line-height: 0; margin: 0; }
body[data-aparencia="cristal"] .shell > aside :is(.topo-icone, .notification-button, .relato-abrir) { opacity: 1; }
body[data-aparencia="cristal"] .shell > aside .relato-abrir.recolhido { opacity: 1; }

/* ── A DICA DOS ICONES, NO DESENHO DO CRISTAL (dono, 30/10/2026: "a descricao ao passar o mouse nao e bonita, e o sino nao tem") ──
 * Vidro, canto da escala, texto curto, aparece com pequeno atraso (350ms), some ao sair e tambem aparece no foco do teclado; a seta
 * sai. No celular nao ha dica (nao ha mouse). O texto e' o `data-dica` (e o `aria-label`, que o leitor de tela le). */
body[data-aparencia="cristal"] .topo-dica::before { display: none; }
body[data-aparencia="cristal"] .topo-dica::after {
  background: var(--cr-vidro-forte); color: var(--text); border: 1px solid var(--cr-borda); border-radius: var(--raio-campo);
  padding: var(--esp-1) var(--esp-3); font-size: var(--fs-apoio); font-weight: 700; letter-spacing: .01em; line-height: 1.3;
  box-shadow: var(--cr-aro), var(--cr-sombra);
  -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.4); backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
  transform: translateY(-4px); transition: opacity .1s ease, transform .1s ease, visibility 0s .1s;
}
body[data-aparencia="cristal"] .topo-dica:is(:hover, :focus-visible)::after {
  opacity: 1; visibility: visible; transform: none; transition: opacity .14s ease .35s, transform .14s ease .35s, visibility 0s .35s;
}
@media (max-width: 1050px), (hover: none) {
  body[data-aparencia="cristal"] .topo-dica::after { display: none; }
}

/* ── CAPSULAS DA MESMA ALTURA (dono, 30/10/2026: "a capsula do nome da empresa e do caminho e levemente maior") ──
 * A capsula da barra, a da logo e a do caminho medem 48px (medido: o caminho media 50,5px por causa do respiro de cima e de baixo).
 * Na linha das abas da Inicio, a aba e o seletor de periodo medem o mesmo (`--altura-controle`). */
@media (min-width: 761px) {
  body[data-aparencia="cristal"] header.trilha-tela h1 { min-height: 48px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; align-items: center; }
}
body[data-aparencia="cristal"] .pn-casca .pn-aba { min-height: var(--altura-controle); }

/* ── O HOVER DA LINHA NAO SE CONFUNDE COM A ZEBRA (dono, 30/10/2026, Contas a Pagar: "a cor do hover e parecida com a das linhas zebradas") ──
 * A zebra e uma tinta de 7,5% da cor da marca sobre o cartao (linha impar) e branco a 55% (linha par); o hover era 11% da MESMA cor, entre as
 * duas: nao dava para saber qual linha estava sob o mouse. O hover ganha token proprio, bem mais forte que as duas paridades, e uma barra
 * fina na borda esquerda (nao depende so da cor). O texto nao muda de cor: a guarda mede o contraste dele sobre o hover.
 * Vale para toda tabela e para as listas em linhas de cartao e modal. Guarda: tests/medidor_de_linha_hover.js. */
body[data-aparencia="cristal"] { --cr-linha-hover: color-mix(in srgb, var(--cr-destaque-a) 26%, #fff); --cr-linha-hover-barra: var(--cr-destaque-a); }
body[data-aparencia="cristal"][data-theme="dark"] { --cr-linha-hover: color-mix(in srgb, #5aa7f0 30%, #0b1522); --cr-linha-hover-barra: #7cc0ff; }
body[data-aparencia="cristal"] table tbody tr:hover,
body[data-aparencia="cristal"] :is(.contract-client-item, .route-stop):hover { background: var(--cr-linha-hover); }
body[data-aparencia="cristal"] table tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--cr-linha-hover-barra); }

/* ── UM RAIO POR NIVEL (dono, 30/10/2026, na Inicio da L7: "as capsulas tem arredondamento diferente; quero padrao") ──
 * Medi o border-radius de TUDO o que tem fundo, borda ou sombra, nas 3 instancias (Controle, Suporte e Catalogo avulso), claro e escuro.
 * Dentro de cada classe de elemento o raio ja era um so'; o que destoava era o NIVEL: o caminho era pilula, os atalhos e o "+" tinham canto
 * pequeno, o menu das linhas era de 8px com botoes de pilula, e o botao do cabecalho de painel era pilula. Os niveis, cada um um TOKEN da escala
 * (nenhum degrau novo):
 *   SUPERFICIE de pagina (cartao, bloco, faixa, caminho, atalhos, atencao) ... --raio-vidro        (14px, desde 04/11/2026; era 26px e virava quase pilula)
 *   PAINEL flutuante e barra interna (submenu, menu das linhas, tutorial) .... --raio-vidro-menor  (10px, desde 04/11/2026; era 18px)
 *   CHIP / ATALHO / aba / selo / pastilha / "+" .............................. --raio-pastilha      (pilula)
 *   CONTROLE (botao em formulario, campo, seletor, botao dentro de menu) ..... --raio-campo         (8px)
 *   (decisao anterior do dono, mantida: o botao ISOLADO fora de formulario, como "Nova despesa", e' pilula; ver `--raio-controle`)
 * Guarda: `tests/medidor_de_raios.js` (por nivel, nas telas) e o teste que reprova raio fora dos tokens. */
body[data-aparencia="cristal"] :is(a.atalho, .atalhos-escolher > summary) { border-radius: var(--raio-pastilha); }
body[data-aparencia="cristal"] .menu-itens { border-radius: var(--raio-vidro-menor); }
body[data-aparencia="cristal"] main .menu-itens :is(a, button):not(.pn-aba):not(.help) { border-radius: var(--raio-campo); }
/* O item do `⋮` e' LINHA de lista (molde unico do menu de acoes): sem contorno nem fundo de botao, so' o fundo no hover. */
body[data-aparencia="cristal"] main .menu-itens > :is(a, button):not(.pn-aba):not(.help):not(.danger-button) {
  border: 0; background: transparent; color: var(--text); box-shadow: none; justify-content: flex-start !important; text-align: left; width: 100%;
}
body[data-aparencia="cristal"] main .menu-itens > :is(a, button):not(.pn-aba):not(.help):not(.danger-button):is(:hover, :focus-visible) {
  background: var(--field-bg-alt);
}
body[data-aparencia="cristal"] main .menu-itens > :is(a, button).perigo { color: var(--red); }
body[data-aparencia="cristal"] main .menu-itens > form > :is(button):not(.pn-aba):not(.help):not(.danger-button) {
  border: 0; background: transparent; color: var(--text); box-shadow: none; width: 100%; text-align: left;
}
body[data-aparencia="cristal"] main .menu-itens > form > button:is(:hover, :focus-visible) { background: var(--field-bg-alt); }
body[data-aparencia="cristal"] main .menu-itens > form > button.perigo { color: var(--red); }
/* Todo item e' uma linha alinhada a ESQUERDA, e o "Apagar" e' texto vermelho (nao botao cheio): uma lista de verbos. */
body[data-aparencia="cristal"] main .menu-itens > form { display: block; padding: 0; width: 100%; }
body[data-aparencia="cristal"] main .menu-itens > form > button { justify-content: flex-start !important; text-align: left; width: 100%; }
body[data-aparencia="cristal"] main .menu-itens > button.danger-button, body[data-aparencia="cristal"] main .menu-itens > form > button.danger-button {
  background: transparent; border: 0; color: var(--red); box-shadow: none;
}
body[data-aparencia="cristal"] main .menu-itens > button.danger-button:is(:hover, :focus-visible), body[data-aparencia="cristal"] main .menu-itens > form > button.danger-button:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--red) 10%, transparent); }
body[data-aparencia="cristal"] main .panel-head :is(button, a.button):not(.pn-aba):not(.help) { border-radius: var(--raio-campo); }

/* Pergunte à IA: o campo de perguntar é o herói (sólido, como todo campo), a conversa e os cartões de módulo
   são vidro. Vidro nunca dentro de vidro: o cartão de módulo mora na lista de superfícies aninhadas acima. */
body[data-aparencia="cristal"] .ia-orbe:not(.ia-orbe-pequeno) {
  background: radial-gradient(circle at 32% 28%, #fff 0, #a9dbff 16%, var(--cr-destaque-a) 56%, var(--cr-destaque-b) 100%);
  box-shadow: 0 0 0 .5em color-mix(in srgb, var(--cr-destaque-a) 14%, transparent), 0 0 2.5em color-mix(in srgb, var(--cr-destaque-a) 50%, transparent);
}
body[data-aparencia="cristal"] .ia-orbe-pequeno { box-shadow: none; }
body[data-aparencia="cristal"] .ia-pergunta {
  background: var(--cr-vidro-forte); border: 1px solid var(--cr-borda); box-shadow: var(--cr-aro), var(--cr-sombra);
}
body[data-aparencia="cristal"] .ai-destaque { background: linear-gradient(135deg, var(--cr-destaque-a), var(--cr-destaque-b)); box-shadow: var(--cr-aro); }
body[data-aparencia="cristal"] .ia-fala-sistema .ai-destaque b { color: #fff; }
body[data-aparencia="cristal"] .ia-icone { background: var(--cr-vidro-forte); color: var(--cr-foco); }
body[data-aparencia="cristal"] .ia-pergunta button { font-size: var(--fs-corpo); padding-inline: var(--esp-5); border-radius: var(--raio-pastilha); }
body[data-aparencia="cristal"] .ia-modulo > a { background: var(--cr-vidro-forte); border-color: var(--cr-borda); }
body[data-aparencia="cristal"] .ia-modulo > a:hover { border-color: var(--cr-foco); }
body[data-aparencia="cristal"] .ia-fala {
  background: var(--cr-vidro-forte); border: 1px solid var(--cr-borda); border-radius: var(--raio-vidro-menor);
  box-shadow: none;       /* a tela toda ja e' o vidro: dentro dele a fala e' so' superficie */
}
body[data-aparencia="cristal"] .ia-fala-pessoa {
  background: linear-gradient(135deg, var(--cr-destaque-a), var(--cr-destaque-b)); border-color: transparent; color: #fff;
}
body[data-aparencia="cristal"] .ia-fala-pessoa > span { color: rgba(255, 255, 255, .78); }
body[data-aparencia="cristal"] .ia-modulo {
  background: var(--cr-vidro-leve); border: 1px solid var(--cr-borda);
}
body[data-aparencia="cristal"] .ia-modulo > a:hover { color: var(--cr-foco); }
body[data-aparencia="cristal"] .ia-fala-sistema .ai-answer, body[data-aparencia="cristal"] .ia-fala-sistema .ai-answer :is(ul, li, div:not(.ai-destaque)) { background: transparent; box-shadow: none; }
@media (max-width: 640px) {
  body[data-aparencia="cristal"] .ia-pergunta button { padding-inline: var(--esp-4); }
}
body[data-aparencia="cristal"] .ia-fala-sistema .ai-answer li { border-color: var(--cr-borda); border-bottom: 0; }
body[data-aparencia="cristal"] .ia-fala-sistema .ai-answer ul:not(:has(li:nth-child(5))) li { background: var(--cr-vidro-leve); border: 1px solid var(--cr-borda); }
body[data-aparencia="cristal"] .ia-fala-sistema .ai-tabela :is(th, td) { border-top-color: var(--cr-borda); }
body[data-aparencia="cristal"] .ia-fala-sistema .ai-answer .button:first-of-type { background: linear-gradient(135deg, var(--cr-destaque-a), var(--cr-destaque-b)); border-color: transparent; color: #fff; }