/*
 * Tokens do Design System "Galáxia Dourada" (web/docs/design-system/tokens.json) em variáveis CSS.
 * É o ÚNICO arquivo com cor, fonte, tamanho e espaçamento escritos à mão: o resto do sistema usa só var(--...).
 * A guarda dos testes confere que todo token do tokens.json está aqui com o mesmo valor.
 * Temas (decisão do usuário em 09/10/2026): cada tema é um bloco [data-tema="..."] com os MESMOS nomes de token — Escuro
 * (padrão) e Claro "Céu" —, escolhido por usuário em Meu perfil. A imagem de fundo do Escuro é a escolhida pelo usuário em
 * 10/10/2026 (servidores e dados em azul e dourado; WebP com a JPEG de reserva) e a do Claro é o céu próprio do sistema
 * (wwwroot/fundos). A guarda dos testes confere o contraste AA dos textos nos dois temas.
 */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../fontes/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("../fontes/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../fontes/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../fontes/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("../fontes/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  /* Tipografia (tokens.json › type) */
  --fonte: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-tamanho: 54px; --display-linha: 54px; --display-peso: 800;
  --titulo-tela-tamanho: 20px; --titulo-tela-linha: 26px; --titulo-tela-peso: 800;
  --titulo-cartao-tamanho: 16px; --titulo-cartao-linha: 22px; --titulo-cartao-peso: 700;
  --numero-kpi-tamanho: 24px; --numero-kpi-linha: 30px; --numero-kpi-peso: 700;
  --corpo-tamanho: 14px; --corpo-linha: 20px; --corpo-peso: 400;
  --rotulo-tamanho: 13px; --rotulo-linha: 18px; --rotulo-peso: 500;
  --pequeno-tamanho: 12px; --pequeno-linha: 16px; --pequeno-peso: 400;
  --peso-forte: 700;

  /* Espaçamento e raios (tokens.json › spacing, radius) */
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 28px;
  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 14px; --radius-pill: 999px;

  /* Medidas dos componentes (web/docs/design-system.md) */
  --altura-modulo: 42px;     /* módulo do menu em gaveta (mais baixo e estreito: pedido do usuário em 11/10/2026) */
  --largura-modulo: 60px;
  --altura-campo: 38px;      /* medida da casca (barra do topo e menu); campos e botões usam --altura-controle */
  /* Grades, campos, filtros, botões e avisos com as medidas do ERP desktop (decisão do usuário em 10/10/2026). */
  --altura-controle: 22px;   /* campo, lista, data, número, botão e botão só de ícone (22 × 22) */
  --texto-controle: 11px;    /* texto dos campos e botões, em peso normal */
  --rotulo-campo: 10px;      /* rótulo pequeno acima do campo */
  --texto-ajuda: 12px;       /* o texto de ajuda embaixo do campo (maior que o rótulo, pedido do usuário em 21/10/2026) */
  --raio-controle: 6px;      /* cantos de campo, botão e grupo de ações */
  --icone-controle: 13px;    /* ícone dentro do botão de 22 */
  --altura-marcar: 20px;     /* caixa de marcar e opção (a caixa com 13) */
  --caixa-marcar: 13px;
  --espaco-linhas: 6px;      /* entre as linhas de um formulário e entre seções */
  --altura-aba: 24px;        /* aba da tela e aba interna do cadastro (texto 11, como o desktop) */
  --titulo-registro-tamanho: 13px; /* o título do registro aberto (TituloSecao nível 2), como o título de tela do desktop */
  --altura-linha-grade: 20px;/* linha da grade */
  --grade-texto: 10.5px;     /* texto da linha da grade */
  --grade-cabecalho: 10px;   /* título da coluna: discreto, sem caixa alta */
  --barra-selecao: 2px;      /* barra dourada à esquerda da linha selecionada */
  --selo-mini: 14px;         /* os ícones mini da célula (vários lado a lado, ex.: a Situação dos títulos) */
  --traco-selo: 1.6;         /* traço do glifo do selo (quadro 16 × 16) */
  --borda-selo-pendente: 2px;/* a borda âmbar grossa do selo "aguardando" */
  /* Largura do campo pelo TIPO, do tamanho do conteúdo (nunca esticado na linha toda). */
  --largura-uf: 36px; --largura-mini: 48px; --largura-codigo: 64px; --largura-cep: 76px; --largura-valor: 76px;
  --largura-data: 100px; --largura-curto: 96px; --largura-cnpj: 132px; --largura-medio: 160px; --largura-email: 180px;
  --largura-longo: 220px; --largura-extra-longo: 320px;
  /* A lista de escolha com a largura pelas opções (faixa de filtros, Empresa): cabe a maior opção e a seta, entre estes limites. */
  --largura-lista-minima: var(--largura-codigo); --largura-lista-maxima: var(--largura-extra-longo);
  --tempo-aviso: 3s;         /* a confirmação verde some sozinha */
  --lado-modal: 320px;       /* os modais quadrados de alerta, pergunta e salvar */
  --lado-foto-produto: 200px;/* a foto solta no cadastro do produto (clicar nela escolhe o arquivo; soltar em cima também) */
  --largura-previa-etiqueta: 300px; /* a prévia da etiqueta da balança (aba Dados Balança) */
  --largura-previa-zpl: 360px;      /* o mock da etiqueta ZPL (Etiquetas e cartazes › Configuração) */
  --largura-previa-cartaz: 240px;   /* o mock do cartaz (a folha em miniatura, com a proporção do papel) */
  --largura-previa-ajustes-cartaz: 340px;  /* a prévia do cartaz com os ajustes em edição (SVG) */
  --largura-mes-seletor: 48px;       /* cada mês do seletor de mês (3 por linha) */
  --largura-dialogo-editor: 720px;  /* o diálogo do editor de ZPL e de HTML (texto em colunas, com a prévia ao lado) */
  --linhas-informacao-extra: 17;    /* a informação extra da etiqueta: até 17 linhas de 56 */
  --colunas-informacao-extra: 56;
  --fonte-mono: "DejaVu Sans Mono", Consolas, monospace; /* texto em colunas fixas (informação extra, códigos) */
  --icone-modal: 64px;
  --icone-aguarde: 32px;     /* o relógio da moldura do "Aguarde, carregando..." */
  --texto-modal-titulo: 14px;
  --texto-dica-selo: 15px;   /* o balão da dica dos selos da grade (maior que a dica comum, pedido do usuário em 11/10/2026) */
  --altura-usuario: 34px;    /* botão do usuário na barra */
  --icone-chip: 20px;        /* quadrado de ícone do favorito (menor, para caber todos na linha: 11/10/2026) */
  --icone-kpi: 64px;         /* quadrado de ícone do indicador */
  --icone-kpi-compacto: 32px;/* o quadrado do indicador numa tela de trabalho (compacto, na escala da tela) */
  --mini-grafico-largura: 72px; /* minigráfico do indicador */
  --mini-grafico-altura: 32px;
  --grafico-altura: 170px;   /* gráficos do Início e do painel (barras, rosca) */
  --barra-horizontal-altura: 12px;  /* a barra do gráfico de barras horizontais (cabe na linha de 20 da grade) */
  --grafico-reserva-valor: 96px;    /* o espaço do valor no fim da barra maior ("R$ 99.999,99" em 11) */
  --grafico-horizontal-largura: 320px; /* a largura mínima do gráfico de barras horizontais ao lado da grade */
  --rosca-tamanho: 150px;
  --pizza-largura: 220px;           /* a pizza em 3D do Vendas por setor (19/10/2026) */
  /* As barras em 3D do Vendas dos últimos 15 dias (19/10/2026): do vermelho (o dia que menos vendeu) ao verde (o que mais vendeu). */
  --barra3d-0: #eb1313; --barra3d-1: #eb3e13; --barra3d-2: #eb6913; --barra3d-3: #eb9513; --barra3d-4: #ebc013; --barra3d-5: #ebeb13;
  --barra3d-6: #c0eb13; --barra3d-7: #95eb13; --barra3d-8: #69eb13; --barra3d-9: #3eeb13; --barra3d-10: #13eb13;
  --brilho-3d: #ffffff; --sombra-3d: #000000; /* o brilho e a sombra da pizza em 3D */
  --icone: 22px;
  --icone-pequeno: 18px;
  --traco-icone: 1.7;
  --traco-icone-forte: 2.4; /* os ícones das ações da faixa da grade (19/10/2026: "engrossar os ícones") */
  --borda-fina: 1px;
  --borda-campo-largura: 2px;   /* a borda dos campos e das listas, mais grossa que a fina (pedido do usuário em 17/10/2026) */
  --borda-forte: 1.5px;
  --largura-maxima: 1440px;
  --largura-menu-usuario: 240px;
  --largura-dialogo: 460px;
  --largura-entrada: 280px;        /* a caixa da tela de entrar (decisão do usuário em 10/10/2026: estreita, sem ficar quadrada) */
  --respiro-entrada: 9vh;          /* a caixa de entrar no terço de baixo, com este respiro até a borda (decisão do usuário em 10/10/2026) */
  --largura-gaveta: 1400px;  /* o limite da gaveta aberta (para o movimento de abrir e recolher) */
  --tempo-gaveta: 500ms;     /* abrir e recolher a gaveta do menu (decisão do usuário em 09/10/2026) */
  --tempo-grafico: 1.8s;       /* os gráficos do Início "nascem" de 0 até o valor (19/10/2026; parados com "reduzir movimento") */
  --atraso-barra: 55ms;      /* a espera de cada barra depois da anterior */
  --espera-entre-blocos: 450ms; /* um bloco do Início de cada vez: cada cartão/gráfico começa depois do anterior (sistema.js põe --espera-bloco) */
  --tempo-linha: 2.2s;       /* a linha do dia nos cartões da Venda do dia se desenha (19/10/2026; parada com "reduzir movimento") */
  --tempo-relogio: 2s;       /* uma volta do ponteiro do relógio do "Aguarde, carregando..." (parado com "reduzir movimento") */
}

/* Tema Escuro (padrão). Cores só aqui. O fundo é a imagem escolhida pelo usuário (10/10/2026): WebP, com a JPEG de reserva
   para o navegador que não lê WebP; a mesma nas telas grandes (não há versão maior). Sem véu desde 13/10/2026 (pedido do usuário: escurecia
   demais a imagem); a leitura fica com o fundo dos painéis (90%) e dos cartões (80%). */
:root, [data-tema="escuro"] {
  --fundo-imagem: image-set(url("../fundos/fundo-sistema.webp") type("image/webp"), url("../fundos/fundo-sistema.jpg") type("image/jpeg"));
  --fundo-imagem-grande: var(--fundo-imagem);
  --fundo-imagem-reserva: url("../fundos/fundo-sistema.jpg");
  --veu-fundo: rgba(6,16,38,0);     /* sem véu: a imagem aparece inteira (decisão do usuário em 13/10/2026; antes, azul-escuro a 55%) */
  --luz-fundo: radial-gradient(ellipse at 50% 35%, rgba(56,132,255,.16), transparent 70%); /* luz azul suave por cima */
  --ground: #030304;
  --surface: #08080a;
  --surface-raised: #121214;
  --ink: #f2ead2;
  --ink-muted: #f2ead2;   /* igual ao ink: textos secundários, dicas e cabeçalhos com o contraste total (pedido do usuário em 13/10/2026) */
  --gold: #e8b931;
  --gold-light: #ffe9a8;
  --gold-deep: #b07a12;
  --border-gold: rgba(232,185,49,.6);
  --border-card: rgba(232,185,49,.28);
  --border-subtle: rgba(255,255,255,.18); /* divisórias e contornos neutros: de .12 para .18 em 15/10/2026 (contraste geral) */
  /* A borda dos campos em âmbar claro (pedido do usuário em 15/10/2026: "os campos têm que ter a borda mais clara no tema
     escuro, um âmbar um pouco mais claro"). Contraste não-texto (WCAG 1.4.11, mínimo 3:1, conferido pela guarda): a borda
     normal dá 6,93:1 sobre o fundo do campo (surface-raised) e 7,41:1 sobre o painel; o foco, 12,81:1 (mais forte que a
     normal, com o anel de 1 px); o desabilitado fica apagado de propósito (2,42:1, isento do 1.4.11), mas visível. */
  /* 17/10/2026 (pedido do usuário: "quero uma borda mais grossa nos campos, um amarelo mais claro"): o amarelo claro #ffe08a
     (14,51:1 sobre o campo, 15,51:1 sobre o painel) e o foco ainda mais claro, #fff3c4 (16,81:1); a espessura no
     --borda-campo-largura (2 px). */
  --borda-campo: #ffe08a;
  --borda-campo-foco: #fff3c4;
  --borda-campo-desabilitado: rgba(255,224,138,.35);
  --borda-marcar: #ffe08a;   /* a caixa de marcar e a opção, com o mesmo amarelo dos campos */
  --green: #16a34a;
  --green-text: #22c55e;
  --blue: #2563eb;
  --link: #4f9cff;
  --yellow: #f5b301;
  --purple: #7c3aed;
  --red: #e11d2e;
  --red-text: #ff5a66;
  --orange: #f97316;                /* barras do gráfico de barras horizontais (Comercial: faixas de horário e de valor) */
  --yellow-text: #f5b301;           /* texto de atenção (o amarelo dos alertas, legível sobre o painel) */

  /* Derivados do tema (mesmas cores, com transparência ou para texto sobre a cor). */
  --texto-sobre-ouro: #1a1406;      /* texto do botão principal (sobre o ouro) */
  --texto-sobre-amarelo: #1a1406;   /* texto e ícone sobre o amarelo */
  --texto-sobre-cor: #ffffff;       /* ícone e texto sobre azul, verde, roxo e vermelho */
  --surface-painel: rgba(8,8,10,.9);/* painéis das telas de trabalho (surface a 90%) */
  --surface-cartao: rgba(8,8,10,.9);/* cartões (surface a 90%, pedido do usuário em 19/10/2026) */
  --ativo-ouro-centro: rgba(232,185,49,.42);
  --ativo-ouro-borda: rgba(232,185,49,.08);
  --selecao-ouro: rgba(232,185,49,.12);
  --zebra: rgba(255,255,255,.04);   /* de .025 para .04 em 15/10/2026: a linha par se distingue sem "gritar" */
  --zebra-perigo: rgba(225,29,46,.05);  /* zebra da família da tela: Contas a Pagar (vermelho a 5%) */
  --zebra-ok: rgba(22,163,74,.05);      /* zebra da família da tela: Contas a Receber (verde a 5%) */
  --selo-pendente-fundo: #fff4d6;       /* o selo "aguardando" (fundo claro, de propósito diferente dos selos escuros) */
  --selo-pendente-simbolo: #8a5a00;     /* a ampulheta do selo "aguardando" */
  --sombra-menu: rgba(0,0,0,.55);
  --veu-aguarde: rgba(0,0,0,.7);     /* o véu escuro a 70% do "Aguarde, carregando..." (pedido do usuário em 14/10/2026; igual nos dois temas) */
  --grade-perigo: #f08a8f;          /* destaques suaves da célula da grade (sem "gritar") */
  --grade-aviso: #dcb866;
  --grade-ok: #7ccf97;
  --grade-info: #7fb0f5;            /* azul suave da célula (estoque abaixo do mínimo na Central do produto) */
  --aviso-ok-fundo: #12351f;        /* a confirmação verde do centro */
  --aviso-ok-borda: #22c55e;
  --modal-sinal-texto: #111111;     /* o "!" e o "?" pretos dos modais */
  --calendario-cabecalho: #2a2412;  /* fundo do cabeçalho dos dias da semana no calendário (Dom … Sáb) */
  /* As 12 cores da rosca (Vendas por setor; pedido do usuário em 13/10/2026: cores fortes e bem diferentes, nada de tons pastéis). */
  --rosca-0: #22c55e; --rosca-1: #3b82f6; --rosca-2: #f59e0b; --rosca-3: #ef4444; --rosca-4: #a855f7; --rosca-5: #06b6d4;
  --rosca-6: #f97316; --rosca-7: #ec4899; --rosca-8: #84cc16; --rosca-9: #6366f1; --rosca-10: #b45309; --rosca-11: #e5e7eb;
}

/* Tema Claro "Céu": os mesmos tokens com outros valores — ground azul-céu muito claro, surface branco, ink grafite, ink-muted
   cinza azulado, contorno azul-claro; o ouro continua como marca, mais escuro para ler sobre branco; as cores fortes dos
   ícones e dos alertas continuam as mesmas (só os textos coloridos escurecem, para o contraste AA). */
[data-tema="claro"] {
  --fundo-imagem: url("../fundos/ceu.webp");
  --fundo-imagem-grande: url("../fundos/ceu-grande.webp");
  --fundo-imagem-reserva: url("../fundos/ceu.webp");
  --veu-fundo: rgba(234,244,251,0);  /* o Céu continua sem véu */
  --luz-fundo: linear-gradient(transparent, transparent); /* o Céu sem a luz azul */
  --ground: #eaf4fb;
  --surface: #ffffff;
  --surface-raised: #f3f8fc;
  --ink: #1f2933;
  --ink-muted: #1f2933;   /* igual ao ink (pedido do usuário em 13/10/2026: contraste total) */
  --gold: #8a6400;
  --gold-light: #6b4d00;
  --gold-deep: #5a4000;
  --border-gold: rgba(138,100,0,.55);
  --border-card: rgba(70,130,190,.35);
  --border-subtle: rgba(31,41,51,.14);
  /* O Céu continua com a borda dos campos como era (só o Escuro mudou em 15/10/2026). */
  --borda-campo: rgba(31,41,51,.14);
  --borda-campo-foco: #8a6400;
  --borda-campo-desabilitado: rgba(31,41,51,.14);
  --borda-marcar: #1f2933;
  --green: #16a34a;
  --green-text: #15803d;
  --blue: #2563eb;
  --link: #1d4ed8;
  --yellow: #f5b301;
  --purple: #7c3aed;
  --red: #e11d2e;
  --red-text: #b91c1c;
  --orange: #ea580c;                /* mais escuro no Céu: contraste 3:1 da barra sobre o branco */
  --yellow-text: #8a5a00;

  --texto-sobre-ouro: #ffffff;
  --texto-sobre-amarelo: #1a1406;
  --texto-sobre-cor: #ffffff;
  --surface-painel: rgba(255,255,255,.9);
  --surface-cartao: rgba(255,255,255,.9);
  --ativo-ouro-centro: rgba(138,100,0,.2);
  --ativo-ouro-borda: rgba(138,100,0,.04);
  --selecao-ouro: rgba(138,100,0,.1);
  --zebra: rgba(31,41,51,.03);
  --zebra-perigo: rgba(225,29,46,.05);
  --zebra-ok: rgba(22,163,74,.05);
  --selo-pendente-fundo: #fff4d6;
  --selo-pendente-simbolo: #8a5a00;
  --sombra-menu: rgba(31,41,51,.18);
  --veu-aguarde: rgba(0,0,0,.7);
  --grade-perigo: #b42d35;
  --grade-aviso: #855f0b;
  --grade-ok: #227043;
  --grade-info: #1d4ed8;
  --aviso-ok-fundo: #e5f6eb;
  --aviso-ok-borda: #16a34a;
  --modal-sinal-texto: #111111;
  --calendario-cabecalho: #fbf1d3;
  /* As 12 cores da rosca: as mesmas do Escuro, com o cinza escuro no lugar do prata. */
  --rosca-0: #22c55e; --rosca-1: #3b82f6; --rosca-2: #f59e0b; --rosca-3: #ef4444; --rosca-4: #a855f7; --rosca-5: #06b6d4;
  --rosca-6: #f97316; --rosca-7: #ec4899; --rosca-8: #84cc16; --rosca-9: #6366f1; --rosca-10: #b45309; --rosca-11: #475569;
}

/* Menu do topo em neon verde (pedido do usuário em 10/10/2026, design-system.md seções 3 e 4). Vale SÓ para o menu do topo
   (as três cápsulas da barra superior): o resto da tela continua nas cores do tema. Fica escuro nos DOIS temas, por isso
   estes tokens estão fora dos blocos [data-tema] (a guarda confere que só a casca do menu do topo usa --neon...). */
:root {
  --neon: #2bff88;                       /* contorno do módulo ativo e do Início; a seta do Início */
  --neon-claro: #a8ffd0;                 /* rótulo do módulo ativo e da página atual */
  --neon-contorno: rgba(43,255,136,.7);  /* contorno fino das cápsulas */
  --neon-brilho: rgba(43,255,136,.5);    /* brilho suave por fora */
  --neon-brilho-fraco: rgba(43,255,136,.16);
  --neon-divisoria: rgba(43,255,136,.22);/* divisórias finas entre os módulos e contorno dos chips */
  --neon-fundo: #040806;                 /* fundo quase preto das cápsulas */
  --neon-fundo-ativo: rgba(43,255,136,.1);
  --neon-texto: #ffffff;                 /* ícones e rótulos */
  --neon-texto-suave: #ffffff;           /* "sem favoritos" e o × dos chips */
  --neon-marca: #e8b931;                 /* o quadrado dourado dos favoritos de Cadastros */
  --neon-avatar: #2563eb;                /* círculo azul das iniciais */
  /* Iluminação de neon nos ícones e rótulos do menu (pedido do usuário em 11/10/2026): o traço continua branco e ganha o
     halo verde, como um tubo de neon aceso. Sem animação. O ativo (e o passar do mouse) tem uma luz DISCRETA, mais fraca que
     a normal (pedido do usuário em 11/10/2026: a luz forte ofuscava o rótulo): quem marca o ativo é o contorno, o fundo e o
     rótulo neon-claro em peso forte, e o texto fica nítido. */
  --neon-luz-texto: 0 0 2px var(--neon), 0 0 6px var(--neon-brilho), 0 0 12px var(--neon-brilho-fraco);
  --neon-luz-texto-ativo: 0 0 1px var(--neon-brilho), 0 0 4px var(--neon-brilho-fraco);
  --neon-luz-icone: drop-shadow(0 0 1.5px var(--neon)) drop-shadow(0 0 5px var(--neon-brilho));
  --neon-luz-icone-ativo: drop-shadow(0 0 1px var(--neon-brilho)) drop-shadow(0 0 3px var(--neon-brilho-fraco));
  --neon-brilho-ativo: 0 0 var(--space-1) var(--neon-brilho-fraco); /* o brilho em volta do ativo (box-shadow), discreto */
  /* Medidas (menu mais baixo e mais estreito para caber todos os favoritos na linha: pedido do usuário em 11/10/2026). */
  --altura-menu-topo: 50px;              /* altura das cápsulas da esquerda e dos módulos */
  --altura-menu-direita: 38px;           /* a cápsula da direita (data, hora e usuário), mais baixa */
  --usuario-topo: 26px;                  /* o círculo das iniciais na cápsula da direita */
  --icone-menu: 20px;                    /* ícones do Início e dos módulos */
  --logo-topo: 34px;                     /* a logo (escudo) na cápsula da esquerda */
  --largura-inicio: 88px;                /* o botão Início em pílula, com a seta que abre e recolhe o menu (11/10/2026) */
  --seta-inicio: 20px;                   /* a seta dentro do Início */
  --tempo-onda: 24s;                     /* uma volta da onda de luz (movimento lento) */
}

/* A prévia da etiqueta da balança (aba Dados Balança do cadastro do produto): papel branco e tinta preta, como a balança
   imprime, nos DOIS temas (por isso fora dos blocos [data-tema]). */
:root {
  --papel-etiqueta: #ffffff;
  --tinta-etiqueta: #111111;
  --vermelho-cartaz: #e02b20; --verde-cartaz: #2e7d4f; --amarelo-cartaz: #f7e71c;  /* o corpo do tema: preço, rodapé e mancha (os mesmos do PDF) */
  --dourado-cartaz: #c9a227;          /* a faixa dourada do tema do cartaz (a mesma do PDF) */
  /* O texto do mock do cartaz, em proporção da largura da folha (cqw), como o PDF desenha (CartazLayout.Tamanho). */
  --cartaz-preco: 28cqw; --cartaz-grande: 11cqw; --cartaz-medio: 7.5cqw; --cartaz-normal: 5cqw; --cartaz-pequeno: 3.5cqw; --cartaz-linha: 1.2;
  /* O corpo do tema no mock: título, preço (R$, inteiro, centavos, unidade), barra do rodapé e espaços, também em cqw. */
  --cartaz-titulo: 5.5cqw; --cartaz-rs: 10cqw; --cartaz-inteiro: 46cqw; --cartaz-centavos: 21cqw; --cartaz-und: 7.5cqw; --cartaz-rodape: 4cqw;
  --cartaz-barra: 10cqw; --cartaz-espaco: 3cqw; --cartaz-lateral: 6cqw; --cartaz-vao: 1.5cqw; --cartaz-linha-unica: 1; --cartaz-linha-und: 1.1;
}