/* * flyx-form.css — pele do bloco de FORMULÁRIO público (caminho de escrita · M-next.4 · R-WP-1/2/10). * * FONTE ÚNICA da estética do
que o FormBlockRenderer emite (classes .flyx-form*). Injetado como * no da página publicada SÓ quando ela contém o bloco (FlyxRender.InjectFormCss), * antes do CSS do tenant/página (que ainda o sobrepõe — white-label). Fiel ao proto fase-2 aprovado * (docs/prototypes/write-path/write-path-proto-fase2.html · .pubform/.field/.submit/.star), TRADUZIDO para os * TOKENS do site público (não os do editor): acento = --brand do tenant; tinta/superfície derivadas de * --fx-page-ink / --fx-page-bg via color-mix → adapta a claro E escuro do tenant, AA. Zero JS (a base é sem-JS): * o estado de erro usa :user-invalid nativo; foco visível sempre. Ícone/marcação é CSS, nunca emoji. */ .flyx-form { width: 100%; /* ocupa a viewport (ñ encolhe pro conteúdo intrínseco do input file) → o clip abaixo contém o excesso */ max-width: 520px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; font-family: var(--fx-font, system-ui, -apple-system, "Segoe UI", sans-serif); /* Guard de responsividade: NADA no form pode causar rolagem lateral (input de arquivo cru, campo largo). clip não cria scroller nem quebra o painel — só impede overflow horizontal (bug PO 2026-09-14). */ overflow-x: clip; } .flyx-form-band { overflow-x: clip; } /* Linha de campo: rótulo em cima, controle embaixo (proto .field). */ .flyx-form-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; /* célula flex/grid não força a largura do conteúdo (input file nativo) */ overflow-x: clip; /* nenhuma linha causa rolagem lateral, mesmo em 320px (bug PO 2026-09-14) */ } .flyx-form-row > label { font-size: 12px; font-weight: 600; line-height: 1.35; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 76%, transparent); } /* Marca de obrigatório (proto .star) — vermelho de aviso, legível em claro/escuro. */ .flyx-form-req { color: #e5484d; margin-left: 2px; font-weight: 700; } /* Controles: input / textarea / select (proto .field input/textarea). */ .flyx-form-row input, .flyx-form-row textarea, .flyx-form-row select { width: 100%; box-sizing: border-box; min-width: 0; /* 🔴 P0 responsividade: controle em grid/flex não estoura a track (min-width:auto = conteúdo) */ font: inherit; font-size: 13px; padding: 10px 14px; color: var(--fx-page-ink, #0f172a); background: var(--fx-page-bg, #ffffff); border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 20%, transparent); /* PÍLULA suave (fiel à referência /panambi-garanti · original 24.2px): campos de texto/select em raio grande. Token dedicado (não o --fx-radius global, que também estiliza cartões/botões) → white-label. */ border-radius: var(--fx-input-radius, 999px); outline: none; transition: border-color .13s ease, box-shadow .13s ease; } /* Textarea NÃO é pílula (prosa multi-linha): raio menor, alinhado ao --fx-radius de cartões. */ .flyx-form-row textarea { resize: vertical; min-height: 88px; line-height: 1.5; border-radius: var(--fx-radius, 10px); } /* R-RF-7: valor computado — read-only ao visitante (o servidor recomputa e grava). Aparência de "derivado". */ .flyx-form-computed-out { cursor: default; font-weight: 600; background: color-mix(in srgb, var(--brand, #2563eb) 6%, var(--fx-page-bg, #ffffff)) !important; border-style: dashed !important; } .flyx-form-computed-out:focus { box-shadow: none !important; } .flyx-form-row input::placeholder, .flyx-form-row textarea::placeholder { color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 42%, transparent); } /* Foco visível — anel na cor do tenant (proto usa o acento + halo suave). AA: 3px de anel. */ .flyx-form-row input:focus, .flyx-form-row textarea:focus, .flyx-form-row select:focus { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #2563eb) 24%, transparent); } /* Erro NATIVO (sem-JS · R-WP-10): campo obrigatório inválido depois de interação (proto .field.bad). */ .flyx-form-row input:user-invalid, .flyx-form-row textarea:user-invalid, .flyx-form-row select:user-invalid { border-color: #e5484d; box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 20%, transparent); } /* Linha de checkbox / consentimento (proto .consent): rótulo ao lado, alinhado ao topo. */ .flyx-form-check { flex-direction: row; } .flyx-form-check label { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 72%, transparent); cursor: pointer; } .flyx-form-check input[type="checkbox"] { width: 17px; height: 17px; margin-top: 1px; flex: none; accent-color: var(--brand, #2563eb); cursor: pointer; } /* ── R-RF-1: opção única (radio) — nunca nativo (visível). O editor (flyx-canvas.js ffAttachFileUploads) ENRIQUECE: revela o dropzone tracejado e o chip do arquivo (vazio→verificado→rejeitado). */ .flyx-form-filedrop { border: 1.5px dashed color-mix(in srgb, var(--fx-page-ink, #0f172a) 24%, transparent); border-radius: var(--fx-radius, 10px); background: color-mix(in srgb, var(--fx-page-ink, #0f172a) 3%, transparent); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; transition: border-color .14s, background .14s; font-family: var(--fx-font, system-ui, -apple-system, "Segoe UI", sans-serif); } .flyx-form-filedrop:hover { border-color: var(--brand, #6d28d9); background: color-mix(in srgb, var(--brand, #6d28d9) 7%, transparent); } .flyx-form-filedrop-ic { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--fx-page-ink, #0f172a) 6%, transparent); color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 65%, transparent); display: grid; place-items: center; } .flyx-form-filedrop-ic svg { width: 19px; height: 19px; } .flyx-form-filedrop-t { font-size: 13px; font-weight: 600; color: var(--fx-page-ink, #0f172a); } .flyx-form-filedrop-t b { color: var(--brand, #6d28d9); } .flyx-form-filedrop-s { font-size: 11.5px; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 55%, transparent); } /* 🔴 P0 RESPONSIVIDADE (rolagem lateral) — o CRU (estado BASE, sem-JS, sem a classe --enh) tem largura/min-width INTRÍNSECOS (botão nativo "Escolher arquivo" + nome do arquivo) que ignoram width:100% em grid/flex → estoura a viewport no mobile (360/390). O caminho --enh esconde via absolute 1px, mas o BASE precisa ficar contido. Trava max-width + box-sizing + min-width:0 → ZERO overflow horizontal em qualquer largura. Só afeta a base (o --enh reescreve position/width abaixo). */ /* Input de arquivo cru: sr-only (acessível mas fora do fluxo) — o <label class=flyx-form-filedrop for=id> estilizado É a afordância (click abre o picker; JS adiciona drag). Assim o input nativo (largura intrínseca ~329px) NUNCA causa rolagem lateral, mesmo em 320px (bug PO 2026-09-14). */ .flyx-form-fileinput { /* !important vence a regra mais específica de largura 100% do input em row — senão o input volta a 100% e estoura em 320px. sr-only: 1px fora do fluxo, o drop-zone é a afordância. */ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Input nativo escondido só quando o JS assumiu o dropzone (progressive enhancement). */ .flyx-form-fileinput--enh { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .flyx-form-filechip { align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, #12b886 45%, transparent); background: color-mix(in srgb, #12b886 9%, transparent); border-radius: var(--fx-radius, 10px); padding: 9px 11px; } .flyx-form-filechip.on { display: flex; } .flyx-form-filechip.err { border-color: color-mix(in srgb, #e5484d 45%, transparent); background: color-mix(in srgb, #e5484d 9%, transparent); } .flyx-form-filechip .pdfic { width: 30px; height: 36px; flex: none; border-radius: 5px; background: var(--fx-page-bg, #fff); border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 18%, transparent); display: grid; place-items: center; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 55%, transparent); } .flyx-form-filechip .pdfic svg { width: 15px; height: 15px; } .flyx-form-filechip .fmeta { flex: 1; min-width: 0; } .flyx-form-filechip .fmeta .fn { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flyx-form-filechip .fmeta .fd { font-size: 11px; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 55%, transparent); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .flyx-form-filechip .fmeta .ok { color: #0e9e72; display: inline-flex; align-items: center; gap: 3px; } .flyx-form-filechip .fmeta .ok svg { width: 11px; height: 11px; } .flyx-form-filechip .fmeta .bad { color: #d1383d; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; } .flyx-form-filechip .fmeta .bad svg { width: 11px; height: 11px; } .flyx-form-filechip .frm { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 18%, transparent); background: var(--fx-page-bg, #fff); color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 55%, transparent); cursor: pointer; } .flyx-form-filechip .frm:hover { border-color: #e5484d; color: #d1383d; } .flyx-form-filechip .frm svg { width: 14px; height: 14px; } /* Estado de erro por-campo (re-render sem-JS) — a borda do dropzone/input fica vermelha. */ .flyx-form-row.flyx-form-file.bad .flyx-form-filedrop, .flyx-form-row.flyx-form-file.bad > input { border-color: #e5484d; } /* Respeita quem pede menos movimento. */ @media (prefers-reduced-motion: reduce) { .flyx-form-row input, .flyx-form-row textarea, .flyx-form-row select, .flyx-form-filedrop, .flyx-form-submit { transition: none; } } /* R-RF-8 · GRUPO REPETÍVEL (1 nível) — fieldset com N ocorrências, adicionar/remover/renumerar. */ .flyx-form-group { margin: 0 0 18px; padding: 14px 14px 16px; border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 16%, transparent); border-radius: var(--fx-radius, 10px); background: color-mix(in srgb, var(--fx-page-ink, #0f172a) 2.5%, var(--fx-page-bg, #fff)); } .flyx-form-group-legend { padding: 0 6px; font-weight: 700; font-size: 0.9rem; color: var(--fx-page-ink, #0f172a); } .flyx-form-group-err { display: block; margin: 0 0 10px; } .flyx-form-group-list { display: flex; flex-direction: column; gap: 12px; } .flyx-form-group-occ { padding: 12px; border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 14%, transparent); border-radius: var(--fx-radius, 10px); background: var(--fx-page-bg, #fff); } .flyx-form-group-occ-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } .flyx-form-group-occ-n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--brand-contrast, #fff); background: var(--brand, #2563eb); } .flyx-form-group-occ-t { font-weight: 600; font-size: 0.86rem; flex: 1; } .flyx-form-group-rm { -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; font: inherit; font-size: 0.76rem; font-weight: 600; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 62%, transparent); background: transparent; border: 1px solid color-mix(in srgb, var(--fx-page-ink, #0f172a) 18%, transparent); border-radius: 7px; cursor: pointer; } .flyx-form-group-rm:hover { border-color: #e5484d; color: #d1383d; } .flyx-form-group-rm svg { width: 13px; height: 13px; } .flyx-form-group-occ-body { display: flex; flex-direction: column; } /* CTA SÓLIDO (não-fantasma): mesmo tratamento preenchido do .flyx-form-submit — cheio na cor do tenant, texto no contraste. White-label por token (--brand/--brand-contrast · zero hardcode de laranja). */ .flyx-form-group-add { -webkit-appearance: none; appearance: none; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--brand-contrast, #ffffff); background: var(--brand, #2563eb); border: 1px solid transparent; border-radius: var(--fx-radius, 10px); cursor: pointer; transition: filter .13s ease, transform .06s ease; } .flyx-form-group-add:hover { filter: brightness(1.06); } .flyx-form-group-add:active { transform: translateY(1px); } .flyx-form-group-add:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; } .flyx-form-group-add:disabled { opacity: 0.5; cursor: not-allowed; } .flyx-form-group-add svg { width: 15px; height: 15px; } .flyx-form-group-add-ic { display: inline-flex; } .flyx-form-group-meta { margin-top: 8px; font-size: 0.74rem; color: color-mix(in srgb, var(--fx-page-ink, #0f172a) 50%, transparent); } /* ══════════════════════════════════════════════════════════════════════════════════════════════ LAYOUT MULTI-COLUNA + PAINEL DE MARCA (superfície de CONVERSÃO · fidelity-gate PO) ───────────────────────────────────────────────────────────────────────────────────────────── ADITIVO / opt-in: só quando o FormSpec soberano pede (classe .flyx-form--grid / .flyx-form--panel, emitidas pelo FormBlockRenderer a partir de spec.Colunas / spec.Fundo). Forms SEM essas classes (default 1 coluna, sem painel) mantêm o render de hoje byte-a-byte (P7). ESCALÁVEL a QUALQUER form: a cor do painel vem SEMPRE do --brand do tenant (white-label — o painel do panambi sai azul porque o acento do panambi é azul; zero hardcode). Mobile-first: 1 coluna, sem overflow. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* GRID responsivo — 1 coluna no mobile, 2 colunas a partir de 720px. Campos curtos fluem lado a lado (Razão Social | CNPJ | Telefone | CEP); os largos (largura=total, textarea, upload, grupo, botão) ocupam a linha inteira. Substitui o flex-column da base (mesma especificidade, ordem posterior). */ .flyx-form--grid { display: grid; grid-template-columns: 1fr; /* mobile: 1 coluna (sem overflow) */ gap: 14px; /* LARGURA = total: PREENCHE 100% da banda da seção (o operador controla a largura da seção via conteudo_largura/full_bleed; estreito abaixo capa em 720). Sem cap de 1120 — o form ocupa a banda toda. */ width: 100%; max-width: none; } @media (min-width: 720px) { .flyx-form--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } } /* Campos/linhas que ocupam a LINHA INTEIRA do grid do form. */ .flyx-form--grid > .flyx-form-row--full, .flyx-form--grid > .flyx-form-group, .flyx-form--grid > .flyx-form-submit { grid-column: 1 / -1; } /* GRUPO REPETÍVEL no grid: os campos-membros da ocorrência TAMBÉM em 2 colunas (≥720px). */ @media (min-width: 720px) { .flyx-form--grid .flyx-form-group-occ-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 10px; } .flyx-form--grid .flyx-form-group-occ-body > .flyx-form-row--full { grid-column: 1 / -1; } } /* ── Camada 2d · FORM COMPACTO (opções · aditivo · P7) — só quando o FormSpec soberano pede ────────── Densidade da superfície de conversão: 3 colunas, rótulo-como-placeholder, radios em linha, CTA de destaque. Sem as classes o form sai idêntico a hoje. Cores SEMPRE do tenant white-label. */ /* 3 COLUNAS (estende .flyx-form--grid): telas largas em 3, tablet em 2, mobile em 1. */ @media (min-width: 900px) { .flyx-form--grid.flyx-form--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flyx-form--grid.flyx-form--cols-3 .flyx-form-group-occ-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* RÓTULO COMO PLACEHOLDER: esconde o rótulo dos campos de TEXTO (o placeholder assume) — sr-only, nunca display:none, para o leitor de tela mantê-lo. NÃO afeta checkbox/radio/computado/upload (rótulo é o texto). */ .flyx-form--rotulo-ph .flyx-form-row:not(.flyx-form-check):not(.flyx-form-radio):not(.flyx-form-computed):not([data-flyx-file-row]) > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* RADIOS EM LINHA: barra de PÍLULAS PREENCHIDAS inline (denso · como landings de conversão). A bolinha some (a pílula inteira é o alvo/estado); não-selecionada = cartão claro; selecionada = acento do tenant. */ .flyx-form--radio-inline .flyx-form-radiogrp { flex-direction: row; flex-wrap: wrap; gap: 8px; } .flyx-form--radio-inline .flyx-form-radio-opt { flex: 0 1 auto; border-radius: 999px; padding: 9px 16px; background: #ffffff; border: 1px solid color-mix(in srgb, #0f172a 14%, transparent); color: #0f172a; font-weight: 500; } /* esconde a bolinha nativa — a PÍLULA indica o estado (sr-only, acessível). */ .flyx-form--radio-inline .flyx-form-radio-opt input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .flyx-form--radio-inline .flyx-form-radio-opt:has(input:checked) { background: color-mix(in srgb, var(--brand, #2563eb) 12%, #ffffff); border-color: var(--brand, #2563eb); color: var(--brand, #2563eb); font-weight: 700; } .flyx-form--radio-inline .flyx-form-radio-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #2563eb) 30%, transparent); } /* BARRA "ADICIONAR " no form COMPACTO (radios em linha): CTA SECUNDÁRIO de largura cheia, prominente (como o "INCLUIR SÓCIO" das landings). Usa o acento-6 do tenant se definido (cor de CTA quente, ex.: laranja), senão o --brand. Só no form compacto ⇒ opt-in, sem regressão para formulários normais. */ .flyx-form--radio-inline .flyx-form-group-add { width: 100%; justify-content: center; margin-top: 16px; padding: 13px 18px; font-size: 0.92rem; box-shadow: 0 6px 18px color-mix(in srgb, #000 20%, transparent); } /* cor da barra: acento-6 (CTA quente, ex.: laranja) se o tenant definiu, senão --brand. As DUAS classes (panel-marca + radio-inline no MESMO ) sobem a especificidade acima da .flyx-form--panel-marca só. */ .flyx-form--radio-inline .flyx-form-group-add, .flyx-form--panel-marca.flyx-form--radio-inline .flyx-form-group-add { background: var(--brand-a6, var(--brand, #2563eb)); color: #ffffff; } /* CTA DE DESTAQUE: primário grande, largura cheia — cor do tenant (herda o preenchimento --brand do base). */ .flyx-form-submit--destaque { width: 100%; padding: 1rem 1.5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; border-radius: calc(var(--fx-radius, 10px) + 2px); } /* PAINEL de fundo (comum às variantes): padding + radius generosos. A cor é da variante abaixo. */ .flyx-form--panel { padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: calc(var(--fx-radius, 10px) + 6px); width: 100%; max-width: none; /* total = 100% da banda (ver .flyx-form--grid); estreito capa em 720 */ } /* ── Variante SÓLIDA (acento do tenant · ex.: painel azul do panambi) ────────────────────────── Rótulos em tinta clara (--brand-contrast); inputs em cartão BRANCO (dado escuro sobre branco = contraste AA garantido, independente do acento); botão INVERTIDO (destaca sobre o mesmo acento). */ .flyx-form--panel-marca { background: var(--brand, #2563eb); color: var(--brand-contrast, #ffffff); } .flyx-form--panel-marca .flyx-form-row > label, .flyx-form--panel-marca .flyx-form-legend, .flyx-form--panel-marca .flyx-form-check label, .flyx-form--panel-marca .flyx-form-group-legend, .flyx-form--panel-marca .flyx-form-group-occ-t { color: color-mix(in srgb, var(--brand-contrast, #ffffff) 92%, transparent); } .flyx-form--panel-marca .flyx-form-row input, .flyx-form--panel-marca .flyx-form-row textarea, .flyx-form--panel-marca .flyx-form-row select { background: #ffffff; color: #0f172a; border-color: transparent; } .flyx-form--panel-marca .flyx-form-row input::placeholder, .flyx-form--panel-marca .flyx-form-row textarea::placeholder { color: color-mix(in srgb, #0f172a 45%, transparent); } /* Foco visível sobre o painel: halo CLARO (o anel de --brand desaparece sobre um fundo de --brand). */ .flyx-form--panel-marca .flyx-form-row input:focus, .flyx-form--panel-marca .flyx-form-row textarea:focus, .flyx-form--panel-marca .flyx-form-row select:focus { border-color: var(--brand-contrast, #ffffff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-contrast, #ffffff) 45%, transparent); } .flyx-form--panel-marca .flyx-form-group-add { /* Ação SECUNDÁRIA do grupo repetível: invertida (contraste) sobre o painel colorido — sólida e visível. */ background: var(--brand-contrast, #ffffff); color: var(--brand, #2563eb); box-shadow: 0 6px 18px color-mix(in srgb, #000 22%, transparent); } .flyx-form--panel-marca .flyx-form-submit { /* CTA PRIMÁRIO (ENVIAR): índigo/brand RICO sólido — distinto do painel (brand puro sumiria), texto claro. color-mix aprofunda o --brand → botão sempre mais escuro/saturado que o painel, AA com texto claro, white-label (zero hardcode). Presença de ação primária, não barra pálida (gate Léo). */ background: color-mix(in srgb, var(--brand, #2563eb) 74%, #12142e); color: var(--brand-contrast, #ffffff); box-shadow: 0 8px 22px color-mix(in srgb, #000 30%, transparent); } .flyx-form--panel-marca .flyx-form-submit { padding: 15px 18px; /* barra ENVIAR mais alta = CTA primário com peso, como a referência */ font-size: 15px; letter-spacing: .01em; } .flyx-form--panel-marca .flyx-form-submit:focus-visible, .flyx-form--panel-marca .flyx-form-group-add:focus-visible { outline-color: var(--brand-contrast, #ffffff); } /* Grupo repetível sobre o painel sólido: a MOLDURA (fieldset) é translúcida clara — seu legend fica sobre o painel colorido, então permanece na tinta clara (--brand-contrast, herdada acima). */ .flyx-form--panel-marca .flyx-form-group { background: color-mix(in srgb, var(--brand-contrast, #ffffff) 12%, transparent); border-color: color-mix(in srgb, var(--brand-contrast, #ffffff) 30%, transparent); } /* A OCORRÊNCIA é um cartão BRANCO SÓLIDO (igual aos inputs · comentário do bloco: "dado escuro sobre branco = AA garantido, independente do acento"). Sólido (não translúcido) para o dado ficar sempre sobre branco. */ .flyx-form--panel-marca .flyx-form-group-occ { background: #ffffff; border-color: transparent; } /* 🔴 P0 (WCAG 1.4.3 · branco-no-branco): DENTRO do cartão branco da ocorrência, a tinta dos rótulos/título/ remover NÃO pode herdar o --brand-contrast CLARO do painel (label branco sobre cartão branco = ~1:1, ilegível). Volta ao INK ESCURO literal — o cartão é sempre branco aqui (derivado de --brand-contrast, mesma premissa dos inputs), então tinta escura garante AA em qualquer acento. Especificidade 3-classes vence a regra clara de 2-classes acima. */ .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-row > label, .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-legend, .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-check label { color: #334155; /* slate-700 sobre branco ≈ 9.9:1 (AA/AAA) */ } .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-group-occ-t { color: #0f172a; /* título da ocorrência (bold) — ink cheio, ≈ 17:1 */ } .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-group-rm { color: color-mix(in srgb, #0f172a 62%, transparent); border-color: color-mix(in srgb, #0f172a 18%, transparent); } .flyx-form--panel-marca .flyx-form-group-occ .flyx-form-group-rm:hover { border-color: #e5484d; color: #d1383d; } /* ── Variante SUAVE — leve tinta do acento sobre o fundo da página (tinta/contraste normais) ──── */ .flyx-form--panel-suave { background: color-mix(in srgb, var(--brand, #2563eb) 8%, var(--fx-page-bg, #ffffff)); border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 18%, transparent); } @media (prefers-reduced-motion: reduce) { .flyx-form--panel-marca .flyx-form-row input, .flyx-form--panel-marca .flyx-form-row textarea, .flyx-form--panel-marca .flyx-form-row select { transition: none; } } /* Guarda de overflow no grid: cada linha/célula pode encolher abaixo do conteúdo (min-width:auto = conteúdo força overflow em 2-col no mobile/tablet). Combina com o minmax(0,1fr) das tracks. */ .flyx-form--grid > .flyx-form-row, .flyx-form--grid > .flyx-form-group, .flyx-form--grid .flyx-form-group-occ-body > .flyx-form-row { min-width: 0; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ LARGURA DA BANDA · RAIO · BANDA DE FUNDO (superfície de CONVERSÃO · controles do FormSpec soberano) ───────────────────────────────────────────────────────────────────────────────────────────── ADITIVO / opt-in (P7): só quando o FormSpec pede (classes .flyx-form--estreito / .flyx-form--sharp e o wrapper .flyx-form-band, emitidos pelo FormBlockRenderer). SEM essas classes o form sai idêntico ao de hoje (largura=total ⇒ preenche a banda; raio=sim ⇒ arredondado). White-label: cor da banda vem do token do catálogo (--brand/paleta), imagem por Id (/assets/m/{id}). Mobile-first: 1 coluna, ZERO overflow. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* LARGURA = estreito: painel ~720px centralizado (o margin:0 auto da base/grid/painel já centraliza). Vence o max-width das variantes (1120px do grid/painel, 520px da base) por especificidade/ordem. */ .flyx-form--estreito, .flyx-form--grid.flyx-form--estreito, .flyx-form--panel.flyx-form--estreito { max-width: 720px; } /* BANDA de fundo ao redor do painel estreito (cor do catálogo OU imagem cover). Full-width; centraliza o form. Só é emitida no modo estreito COM cor/imagem (senão nem existe o wrapper). box-sizing p/ nunca estourar. */ .flyx-form-band { width: 100%; box-sizing: border-box; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Dentro da banda, o form estreito centraliza sem margem vertical dupla (a banda já respira). */ .flyx-form-band > .flyx-form { margin: 0 auto; } /* RAIO = nao: cantos RETOS. Zera os tokens de raio SÓ no escopo do form (não vaza pro resto da página — custom properties só herdam pros descendentes do ). Cobre inputs pílula, textarea, botão, radio, grupo, filedrop (todos consomem var(--fx-input-radius)/var(--fx-radius)). */ .flyx-form--sharp { --fx-input-radius: 0px; --fx-radius: 0px; } /* O painel usa calc(var(--fx-radius) + 6px) ⇒ 6px mesmo com o token 0; zera explícito. */ .flyx-form--sharp.flyx-form--panel { border-radius: 0; }