/* O widget `campo` (FeitoWeb.Widgets.Campos, docs/telas.md §2). Um widget, muitos tipos: o rótulo, o controle, a máscara, a ajuda e o erro. Os input/select/textarea e o label continuam vestidos pela casca (style.css e visual.css: a altura, a borda, o foco); aqui só o que é do widget: o erro, a ajuda, o «R$» e o «%», o interruptor, as caixas de marcar, a paleta, as partes do endereço e as linhas repetíveis. Etapa 1, frente B (26/10/2026). Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css, componentes.css, navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem por cima, como vestem tudo. Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */ .campo { min-width: 0; margin: 0 0 var(--v-esp-3, 12px); } fieldset.campo { border: 0; padding: 0; } fieldset.campo > legend { padding: 0; margin-bottom: 3px; color: var(--suave); font-size: .8rem; font-weight: 600; } /* a ajuda e o erro, embaixo do controle (ligados pelo aria-describedby) */ .campo-ajuda { margin: var(--v-esp-1, 4px) 0 0; color: var(--suave); font-size: .82rem; overflow-wrap: anywhere; } .campo-erro { display: flex; align-items: center; gap: var(--v-esp-1, 4px); margin: var(--v-esp-1, 4px) 0 0; color: var(--vermelho); font-size: .82rem; font-weight: 600; } .campo-erro .ic { flex: none; } .campo :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--vermelho); } .campo :is(input, select, textarea)[aria-invalid="true"]:focus { outline-color: var(--vermelho); } /* só leitura: o valor, sem cara de campo para preencher */ .campo input[readonly] { background: var(--e-cartao-2, var(--verde-fundo)); color: var(--tinta); } /* o «R$» na frente, o «%» atrás, o botão de mostrar a senha, a amostra da cor */ .campo-com { display: flex; align-items: center; gap: var(--v-esp-2, 8px); } .campo-com > input { flex: 1 1 auto; min-width: 0; } .campo-antes, .campo-depois { flex: none; color: var(--suave); font-weight: 600; } .campo-mostrar { flex: none; } /* o contador da caixa de texto e o código (o JSON) em fonte fixa */ .campo-contador { margin: 2px 0 0; color: var(--suave); font-size: .78rem; text-align: right; } .campo textarea[spellcheck="false"] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; } /* o período: o início e o fim lado a lado */ .campo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px); } .campo-linha > input[type=date] { width: auto; flex: 1 1 140px; } /* o sim/não: o interruptor (a caixa de marcar de verdade fica por baixo, para o teclado e o leitor de tela) */ .campo-interruptor { position: relative; display: inline-flex; align-items: center; gap: var(--v-esp-2, 8px); min-height: var(--ctl-h, 36px); margin: 0; color: var(--tinta); font-size: .9rem; font-weight: 600; cursor: pointer; } .campo-interruptor > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .campo-trilho { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--v-raio-pilula, 999px); background: var(--e-linha-forte, var(--linha)); transition: background-color .15s; } .campo-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--e-campo, var(--branco)); box-shadow: var(--v-sombra-1); transition: transform .15s; } .campo-interruptor > input:checked + .campo-trilho { background: var(--v-acao, var(--verde)); } .campo-interruptor > input:checked + .campo-trilho::after { transform: translateX(16px); } .campo-interruptor > input:focus-visible + .campo-trilho { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 2px; } .campo-interruptor > input:disabled + .campo-trilho { opacity: .5; } .campo-interruptor > input[aria-invalid="true"] + .campo-trilho { box-shadow: 0 0 0 2px var(--vermelho); } /* a múltipla: os chips com a caixa de marcar; o marcado, o verde do chip que filtra */ .campo-marcar { display: flex; flex-wrap: wrap; gap: 6px; } .campo-marcar .chip:has(> input:checked) { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-esc); } .campo-marcar .chip:has(> input:focus-visible) { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 1px; } /* a cor: a amostra (a cor vem do dado, pela variável) e a paleta */ .campo-cor-amostra { display: inline-block; flex: none; width: 28px; height: 28px; border-radius: var(--v-raio-ctrl, 8px); border: 1px solid var(--e-linha-forte, var(--linha)); background: var(--cor-amostra, transparent); } .campo-paleta { display: flex; flex-wrap: wrap; gap: var(--v-esp-2, 8px); } .campo-cor-opcao { position: relative; display: inline-flex; margin: 0; cursor: pointer; } .campo-cor-opcao > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .campo-cor-opcao > input:checked + .campo-cor-amostra { box-shadow: 0 0 0 2px var(--e-campo, var(--branco)), 0 0 0 4px var(--tinta); } .campo-cor-opcao > input:focus-visible + .campo-cor-amostra { outline: 2px solid var(--v-foco, var(--verde)); outline-offset: 4px; } /* o endereço: as partes nas 12 colunas (as .c* da grade); no celular, uma embaixo da outra */ .campo-partes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--v-esp-3, 12px); } .campo-parte { min-width: 0; } .campo-sem-numero { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 var(--v-esp-2, 8px); color: var(--tinta); font-size: .85rem; font-weight: 500; } @media (max-width: 760px) { .campo-partes > .campo-parte { grid-column: span 12; } } /* as linhas repetíveis (os produtos, os telefones): os subcampos lado a lado, o «−» no fim, o «+» embaixo */ .campo-linhas { display: grid; gap: var(--v-esp-2, 8px); justify-items: start; } .campo-linha-rep { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--v-esp-2, 8px) var(--v-esp-3, 12px); width: 100%; padding-bottom: var(--v-esp-2, 8px); border-bottom: 1px solid var(--e-linha, var(--linha)); } .campo-linha-rep > .campo { flex: 1 1 160px; margin-bottom: 0; } .campo-linha-rep > .campo-remover { flex: none; margin-bottom: 2px; } /* o arquivo: o atual e os que estão subindo */ .campo-arquivo-atual { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .9rem; } .campo-envios { display: grid; gap: 6px; margin: var(--v-esp-2, 8px) 0 0; padding: 0; list-style: none; } .campo-envios li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px); } .campo-envios progress { width: 120px; accent-color: var(--verde); } /* a pessoa pela busca (FeitoWeb.Widgets.CampoPessoa; D-C, 27/10/2026): a caixa com as iniciais da escolhida e o «×», a lista do que casa por baixo (como o seletor de pessoa do Bitrix24); o