/* ===================================================================================== EFICÁCIA CRM — mod-campos.css · aparência dos controlos próprios (LISTA, DATA, HORA) Par de `mod-campos.js`. Sem ele este ficheiro não pinta nada; sem este ficheiro o JavaScript continua a funcionar, mas sem aparência (e o campo nativo por baixo continua a submeter). PREFIXO `cp-` — namespace próprio, de propósito Não reutiliza `.ds-combobox` nem `.dp-*`: são 29 utilizações vivas do combobox e um seletor de datas legado a funcionar em rotas antigas. Um prefixo separado garante que nada do que já está no ar muda de comportamento por este ficheiro entrar. As MEDIDAS e as CORES, essas, são as mesmas — vêm todas dos tokens (`ds-tokens.css`) e das medidas do design system (`--ds-control-h-*`, `--ds-touch`). NADA AQUI USA `!important`. A ordem de carregamento é a única coisa que este ficheiro pede: depois do `design-system.css` e depois do `mobile-toque.css` (é o último a falar sobre os seus próprios seletores, e replica o piso de 16px/44px em vez de o herdar — assim funciona seja qual for a posição no ). ÍNDICE §1 Invólucro e campo nativo escondido §2 Gatilho (a caixa que se vê fechada) — comum aos três §3 Painel flutuante — comum aos três §4 Lista: menu virtualizado, opções, crachás, etiquetas §5 Data: calendário §6 Hora: duas colunas §7 Estados: desativado, erro, preenchido §8 Toque: ecrãs pequenos (<=768px) e aparelhos de dedo mais largos (pointer: coarse) §9 Movimento reduzido, alto contraste, impressão ===================================================================================== */ /* ===================================================================================== §1 INVÓLUCRO E CAMPO NATIVO ===================================================================================== */ .cp { position: relative; display: block; min-width: 0; width: 100%; } /* O campo nativo continua RENDERIZADO (1px, invisível) e não `display:none`: um campo `required` com display:none faz o browser abortar a submissão com "An invalid form control is not focusable" e sem mensagem visível. */ .cp-nativo { position: absolute; left: 12px; bottom: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; clip-path: inset(50%); } /* Texto só para leitores de ecrã (a dica de formato dos campos de data/hora). */ .cp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ===================================================================================== §2 GATILHO — a caixa fechada. Mesma geometria do `.ds-input`/`.ds-select`, para um formulário misto não ficar com alturas diferentes lado a lado. ===================================================================================== */ .cp-gatilho { display: flex; align-items: center; gap: var(--sp-2, 8px); width: 100%; min-width: 0; min-height: var(--ds-control-h-md, 44px); padding: 0 6px 0 14px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md, 10px); background: var(--neutral-0); cursor: text; transition: border-color var(--transition-fast, .15s), box-shadow var(--transition-fast, .15s); } .cp--data .cp-gatilho, .cp--hora .cp-gatilho { cursor: default; } .cp-gatilho:hover { border-color: var(--neutral-300); } .cp.is-aberto .cp-gatilho, .cp-gatilho:focus-within { border-color: var(--primary-400); box-shadow: var(--ds-ring, 0 0 0 3px var(--ring-color)); } /* A caixa de texto interior. Herda a cor e o tipo do design system. */ .cp-txt { flex: 1 1 auto; min-width: 0; width: 100%; height: calc(var(--ds-control-h-md, 44px) - 2px); padding: 0; border: none; outline: none; background: transparent; font-family: var(--font-family, var(--font-sans)); font-size: var(--text-sm, .8125rem); color: var(--neutral-800); text-overflow: ellipsis; } .cp-txt::placeholder { color: var(--neutral-400); opacity: 1; } .cp--data .cp-txt, .cp--hora .cp-txt { font-variant-numeric: var(--num-tabular, tabular-nums); letter-spacing: .01em; } /* Botões de ação dentro do gatilho (limpar, abrir calendário/relógio). */ .cp-acao { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--neutral-400); cursor: pointer; transition: background var(--transition-fast, .15s), color var(--transition-fast, .15s); } /* `display:inline-flex` acima ganha ao `display:none` que o browser dá a [hidden] (regra da folha do agente, especificidade baixíssima). Sem esta linha o botão de limpar aparecia em campos vazios. */ .cp-acao[hidden] { display: none; } .cp-acao svg { width: 16px; height: 16px; } .cp-acao:hover { background: var(--neutral-100); color: var(--neutral-700); } .cp-acao:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: 1px; } .cp-acao--abrir { color: var(--neutral-500, var(--ink-500)); } .cp.is-aberto .cp-acao--abrir { background: var(--primary-50, var(--brand-50)); color: var(--primary-600, var(--brand-600)); } .cp-seta { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; color: var(--neutral-400); pointer-events: none; } .cp-seta svg { width: 16px; height: 16px; transition: transform var(--transition-base, .2s); } .cp.is-aberto .cp-seta svg { transform: rotate(180deg); } /* ===================================================================================== §3 PAINEL FLUTUANTE — comum aos três É filho de e `position:fixed` (o JS calcula top/left/width). Por isso: · escapa a `.page-content{overflow:auto}`, que cortava o menu do combobox; · escapa a ancestrais com `transform` (a animação `dsSheetUp` do `.ds-modal`), onde um `position:fixed` inline voltaria a ser cortado. O z-index tem de ficar ACIMA do modal (`--ds-z-modal: 950`). ===================================================================================== */ .cp-painel { position: fixed; z-index: 1100; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--neutral-200); border-radius: var(--radius-md, 10px); background: var(--neutral-0); box-shadow: var(--shadow-lg, var(--sh-3)); animation: cpEntrar var(--transition-fast, .15s) ease-out; } .cp-painel[hidden] { display: none; } @keyframes cpEntrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .cp-painel--cima { animation-name: cpEntrarCima; } @keyframes cpEntrarCima { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================================== §4 LISTA Menu VIRTUALIZADO: `.cp-menu` é o que rola, `.cp-fita` tem a altura total (n × --cp-op-h) e dá a barra de scroll verdadeira, `.cp-janela` desliza por `translateY` e contém apenas as linhas visíveis. Por isso a altura da linha tem de ser EXACTA — é o único número que o JavaScript lê do CSS (`getComputedStyle(...).getPropertyValue('--cp-op-h')`). ===================================================================================== */ .cp-painel--lista { --cp-op-h: 40px; padding: 5px 5px 0; } .cp-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cp-fita { position: relative; width: 100%; } .cp-janela { position: absolute; top: 0; left: 0; right: 0; will-change: transform; } /* ESTADO VAZIO — a única situação em que a janela sai do posicionamento absoluto. Com zero linhas a fita tem altura zero e a janela, sendo absoluta, não dava altura nenhuma ao painel: medido, o painel ficava com 7px e da explicação (51px) via-se 1px. Aqui a janela volta ao fluxo e passa a ser ela a medir o painel. Não há virtualização a proteger neste ramo — não há linhas nenhumas. */ .cp-janela.is-vazio { position: static; transform: none; will-change: auto; } .cp-op { box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-2, 8px); padding: 0 10px; border-radius: var(--radius-sm, 6px); font-size: var(--text-sm, .8125rem); color: var(--neutral-700); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; min-width: 0; } .cp-op-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-op-sub { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs, .6875rem); font-weight: var(--fw-medium, 500); color: var(--neutral-400); } .cp-op:hover, .cp-op.is-focada { background: var(--neutral-50); } .cp-op.is-focada { box-shadow: inset 0 0 0 1px var(--primary-200, var(--brand-200)); } .cp-op.is-escolhida { background: var(--primary-50, var(--brand-50)); color: var(--primary-700, var(--brand-700)); font-weight: var(--fw-semibold, 600); } .cp-op.is-off { color: var(--neutral-400); cursor: not-allowed; background: transparent; } .cp-op--nenhum { color: var(--neutral-500, var(--ink-500)); font-style: italic; } /* marca de escolha da lista múltipla */ .cp-op-mk { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--neutral-300); border-radius: var(--radius-sm, 6px); color: transparent; background: var(--neutral-0); } .cp-op-mk svg { width: 12px; height: 12px; stroke-width: 3; } .cp-op.is-escolhida .cp-op-mk { border-color: var(--primary-600, var(--brand-600)); background: var(--primary-600, var(--brand-600)); color: var(--neutral-0); } /* cabeçalho de — mesma altura de linha, para a virtualização bater certo */ .cp-grupo { box-sizing: border-box; display: flex; align-items: flex-end; padding: 0 10px 4px; font-size: 10.5px; font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: var(--track-caps, .06em); color: var(--neutral-400); } /* Deixou de ser um rótulo de «nada aqui» para passar a ser a única explicação que a pessoa tem — daí o `line-height` de texto corrido e o cinzento mais escuro: a `--neutral-400` não chega ao contraste de texto de leitura. */ .cp-vazio { padding: 16px 12px; text-align: center; font-size: var(--text-sm, .8125rem); line-height: 1.45; color: var(--neutral-500, var(--ink-500)); } /* PAINEL VAZIO POR PESQUISA — o outro estado vazio (ver a nota em mod-campos.js). Três degraus de leitura: o que se procurou, quantas opções ficaram de fora, e o botão que desfaz a pesquisa. A pilha é `flex` em coluna para os três centrarem sem margens a somar, e o botão respeita o alvo de toque de 44px porque este é o único caminho de saída na folha do telemóvel. */ .cp-vazio--pesquisa { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1, 4px); padding: 14px 12px 12px; } .cp-vazio-t { font-weight: var(--fw-semibold, 600); color: var(--neutral-700, var(--ink-700)); /* a consulta pode ser uma palavra comprida e sem espaços */ overflow-wrap: anywhere; } .cp-vazio-s { font-size: var(--text-xs, .6875rem); color: var(--neutral-500, var(--ink-500)); font-variant-numeric: var(--num-tabular, tabular-nums); } .cp-vazio-btn { margin-top: 6px; min-height: var(--ds-touch, 44px); padding: 8px 16px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md, 10px); background: var(--neutral-0); color: var(--primary-600, var(--brand-600)); font-family: inherit; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-semibold, 600); cursor: pointer; -webkit-tap-highlight-color: transparent; } .cp-vazio-btn:hover { background: var(--primary-50, var(--brand-50)); border-color: var(--primary-300, var(--brand-300)); } .cp-vazio-btn:active { background: var(--primary-100, var(--brand-100)); transform: scale(.97); } .cp-vazio-btn:focus-visible { outline: none; box-shadow: var(--ds-ring, 0 0 0 3px var(--ring-color)); } /* Contagem real. Substitui o corte silencioso aos 120 itens: aqui nada é cortado, e o rodapé diz quantos há. */ .cp-rodape { flex: 0 0 auto; padding: 7px 10px; margin-top: 4px; border-top: 1px solid var(--neutral-100); font-size: var(--text-xs, .6875rem); font-weight: var(--fw-medium, 500); color: var(--neutral-500, var(--ink-500)); text-align: center; font-variant-numeric: var(--num-tabular, tabular-nums); } /* ---------- crachás (absorve o `estado-dropdown` do Shoperfil) ---------- */ .cp-cracha { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 9px; border-radius: var(--radius-full, 9999px); font-size: var(--text-xs, .6875rem); font-weight: var(--fw-semibold, 600); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* tom neutro por omissão; quem monta pode passar a sua própria classe */ background: var(--neutral-100); color: var(--neutral-700); } .cp-gatilho-cracha { flex: 0 1 auto; min-width: 0; } .cp-gatilho.tem-cracha .cp-txt { flex: 1 1 0; width: 0; } /* ---------- etiquetas da lista múltipla ---------- */ .cp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 75%; padding: 4px 0; } .cp-tags[hidden] { display: none; } .cp-tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: var(--radius-full, 9999px); background: var(--primary-50, var(--brand-50)); color: var(--primary-700, var(--brand-700)); font-size: var(--text-xs, .6875rem); font-weight: var(--fw-semibold, 600); white-space: nowrap; overflow: hidden; } .cp-tag-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: var(--radius-full, 9999px); background: transparent; color: inherit; cursor: pointer; } .cp-tag-x svg { width: 11px; height: 11px; } .cp-tag-x:hover { background: var(--primary-100, var(--brand-100)); } /* ===================================================================================== §5 DATA — o calendário A grelha é a mesma do `mod-ferias-calendario.css`, que o cliente escolheu: 7 colunas iguais, gap 2px, célula quadrada com o número centrado, semana a começar à segunda. O que muda é o papel — aqui é um controlo, não uma vista — e por isso há estados de escolha, foco e limites em vez dos 12 estados de férias. ===================================================================================== */ .cp-painel--data { width: 296px; max-width: calc(100vw - 16px); padding: var(--sp-3, 12px); gap: var(--sp-2, 8px); } .cp-cal-cab { display: flex; align-items: center; gap: 2px; } .cp-cal-tit { flex: 1 1 auto; text-align: center; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-bold, 700); color: var(--text-1, var(--neutral-900)); } .cp-cal-nav { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: none; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--neutral-500, var(--ink-500)); cursor: pointer; transition: background var(--transition-fast, .15s); } .cp-cal-nav svg { width: 15px; height: 15px; } .cp-cal-nav:hover { background: var(--neutral-100); color: var(--neutral-800); } .cp-cal-nav:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: 1px; } .cp-cal-sem, .cp-cal-linha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; min-width: 0; } .cp-cal-sem span { display: flex; align-items: center; justify-content: center; padding: 2px 0; font-size: 12px; font-weight: var(--fw-semibold, 600); color: var(--neutral-500, var(--ink-500)); } .cp-cal-dias { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* `width:100%` é obrigatório: sem ele o `aspect-ratio` faz a célula ficar mais larga do que a coluna e os dias sobrepõem-se (a mesma armadilha documentada no mod-ferias-calendario.css). */ .cp-d { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 34px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: transparent; color: var(--text-2, var(--neutral-700)); font-family: inherit; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-medium, 500); font-variant-numeric: var(--num-tabular, tabular-nums); line-height: 1; cursor: pointer; transition: background var(--transition-fast, .15s) ease, transform .08s ease; } .cp-d:hover { background: var(--primary-50, var(--brand-50)); } .cp-d:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: 1px; z-index: 1; } .cp-d:active { transform: scale(.94); } .cp-d--fora { color: var(--neutral-300); } /* Fim-de-semana: fundo cinzento, como no `mod-ferias-calendario.css` (--fc-fds-bg / --fc-fds-fg). O seletor legado pintava-os de VERMELHO, que nesta paleta é a cor da marca e a cor de perigo ao mesmo tempo — dizia "atenção" onde não há nada de errado. Cinzento diz "não é dia útil", que é a informação verdadeira. */ .cp-d--fds { background: var(--ink-100, var(--neutral-100)); color: var(--ink-500, var(--neutral-500)); } .cp-d--fora.cp-d--fds { background: transparent; color: var(--neutral-300); } .cp-d--fds:hover { background: var(--primary-50, var(--brand-50)); } .cp-d--hoje { border-color: var(--primary-300, var(--brand-300)); font-weight: var(--fw-bold, 700); } .cp-d.is-escolhido { background: var(--primary-600, var(--brand-600)); border-color: var(--primary-600, var(--brand-600)); color: var(--neutral-0); font-weight: var(--fw-bold, 700); } .cp-d.is-escolhido:hover { background: var(--primary-700, var(--brand-700)); } .cp-d.is-off { color: var(--neutral-300); background: var(--neutral-50); cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; } .cp-d.is-off:hover { background: var(--neutral-50); } .cp-cal-pe { display: flex; gap: var(--sp-2, 8px); padding-top: var(--sp-2, 8px); border-top: 1px solid var(--neutral-100); } .cp-cal-pe-btn, .cp-h-pe-btn { flex: 1 1 0; min-height: 34px; padding: 0 10px; border: 1px solid var(--neutral-200); border-radius: var(--radius-sm, 6px); background: var(--neutral-0); font-family: inherit; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-semibold, 600); color: var(--neutral-700); cursor: pointer; transition: background var(--transition-fast, .15s), border-color var(--transition-fast, .15s); } .cp-cal-pe-btn:hover, .cp-h-pe-btn:hover { background: var(--primary-50, var(--brand-50)); border-color: var(--primary-300, var(--brand-300)); color: var(--primary-700, var(--brand-700)); } .cp-cal-pe-btn:focus-visible, .cp-h-pe-btn:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: 1px; } /* ===================================================================================== §6 HORA — duas colunas, nunca uma roleta ===================================================================================== */ .cp-painel--hora { width: 232px; max-width: calc(100vw - 16px); padding: var(--sp-2, 8px); gap: var(--sp-2, 8px); } .cp-h-sug { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; } .cp-h-chip { flex: 1 1 auto; min-width: 48px; min-height: 30px; padding: 0 8px; border: 1px solid var(--neutral-200); border-radius: var(--radius-full, 9999px); background: var(--neutral-0); font-family: inherit; font-size: var(--text-xs, .6875rem); font-weight: var(--fw-semibold, 600); font-variant-numeric: var(--num-tabular, tabular-nums); color: var(--neutral-700); cursor: pointer; transition: background var(--transition-fast, .15s); } .cp-h-chip:hover { background: var(--primary-50, var(--brand-50)); border-color: var(--primary-300, var(--brand-300)); color: var(--primary-700, var(--brand-700)); } .cp-h-chip.is-escolhida { background: var(--primary-600, var(--brand-600)); border-color: var(--primary-600, var(--brand-600)); color: var(--neutral-0); } .cp-h-chip:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: 1px; } .cp-h-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2, 8px); flex: 1 1 auto; min-height: 0; } .cp-h-col { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 2px; border: 1px solid var(--neutral-100); border-radius: var(--radius-sm, 6px); } .cp-h-cab { position: sticky; top: 0; z-index: 1; flex: 0 0 auto; padding: 4px 0 3px; background: var(--neutral-0); text-align: center; font-size: 10.5px; font-weight: var(--fw-bold, 700); text-transform: uppercase; letter-spacing: var(--track-caps, .06em); color: var(--neutral-400); } .cp-h-v { flex: 0 0 auto; min-height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: transparent; font-family: inherit; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-medium, 500); font-variant-numeric: var(--num-tabular, tabular-nums); color: var(--text-2, var(--neutral-700)); cursor: pointer; transition: background var(--transition-fast, .15s); } .cp-h-v:hover { background: var(--primary-50, var(--brand-50)); } .cp-h-v.is-escolhida { background: var(--primary-600, var(--brand-600)); border-color: var(--primary-600, var(--brand-600)); color: var(--neutral-0); font-weight: var(--fw-bold, 700); } .cp-h-v.is-off { color: var(--neutral-300); cursor: not-allowed; text-decoration: line-through; } .cp-h-v.is-off:hover { background: transparent; } .cp-h-v:focus-visible { outline: 2px solid var(--primary-500, var(--brand-500)); outline-offset: -1px; } .cp-h-pe { display: flex; gap: var(--sp-2, 8px); flex: 0 0 auto; } /* ===================================================================================== §7 ESTADOS ===================================================================================== */ .cp.is-off { opacity: .6; } .cp.is-off .cp-gatilho { background: var(--neutral-50); cursor: not-allowed; border-color: var(--neutral-200); } .cp.is-off .cp-txt, .cp.is-off .cp-acao { cursor: not-allowed; pointer-events: none; } /* Um campo que não se edita não mostra o botão de limpar — era ruído visual num controlo que não responde. */ .cp.is-off .cp-acao--limpar { display: none; } .cp.is-invalido .cp-gatilho, .ds-field.is-invalid .cp-gatilho { border-color: var(--error-500, var(--danger-500)); background: var(--error-50, var(--danger-50)); } .cp.is-invalido .cp-gatilho:focus-within { box-shadow: 0 0 0 3px rgba(225, 29, 72, .14); } /* ===================================================================================== §8 TOQUE E ECRÃS PEQUENOS O painel NÃO vira folha inferior. Fica ancorado ao campo, com a largura do campo. É uma decisão deliberada: o Shoperfil já foi folha inferior, o cliente reclamou ("ocupava o ecrã todo e acompanhava o scroll") e o correctivo foi ancorar ao gatilho — está escrito em português em três sítios do `style.css` dele. O que muda de facto abaixo dos 768px: · 16px de letra nos inputs (abaixo disso o iOS faz zoom ao focar); · alvos de 44-48px; · linha da lista mais alta -> `--cp-op-h` sobe, e o JS lê o valor novo, porque a altura da linha vem sempre do CSS; · painéis mais baixos, para o teclado virtual caber (o resto do trabalho é do `visualViewport` no JS). ===================================================================================== */ /* Ponteiro grosso (dedo) independentemente da largura — tablets em paisagem, portáteis com ecrã táctil. Vem ANTES do bloco de largura de propósito: onde as duas condições se cruzam (telemóvel = estreito E táctil) tem de ganhar o bloco de mobile, que é o mais exigente. Na primeira montagem estava depois e baixava o alvo das horas de 44 para 42px — apanhado pela prova a 768 e a 390. */ @media (pointer: coarse) { .cp-op { min-height: 44px; } .cp-h-v, .cp-d { min-height: 42px; } } @media (max-width: 768px) { .cp-gatilho { min-height: max(var(--ds-touch, 44px), 46px); padding-left: 12px; } .cp-txt { height: auto; min-height: 44px; /* 16px: piso anti-zoom do iOS. Repetido aqui em vez de herdado do mobile-toque.css para não depender da ordem de carregamento. */ font-size: max(16px, var(--text-sm, .8125rem)); } .cp-acao { width: var(--ds-touch, 44px); height: var(--ds-touch, 44px); } .cp-acao svg { width: 19px; height: 19px; } .cp-seta { width: 28px; } .cp-seta svg { width: 18px; height: 18px; } /* Lista: linha maior (o JS lê este valor) e letra legível. */ .cp-painel--lista { --cp-op-h: 48px; } .cp-op { font-size: max(14px, var(--text-sm, .8125rem)); padding: 0 12px; } .cp-op-sub { font-size: 12px; } .cp-rodape { font-size: 12px; padding: 9px 10px; } /* Calendário: célula com alvo de toque a sério. */ .cp-painel--data { width: 100%; min-width: 288px; } .cp-d { min-height: 42px; font-size: 14px; } .cp-cal-nav { width: var(--ds-touch, 44px); height: var(--ds-touch, 44px); } .cp-cal-sem span { font-size: 12px; } .cp-cal-pe-btn, .cp-h-pe-btn { min-height: var(--ds-touch, 44px); font-size: 14px; } /* Horas: colunas com alvos de 44px — é o ponto do exercício. */ .cp-painel--hora { width: 100%; min-width: 216px; } .cp-h-v { min-height: var(--ds-touch, 44px); font-size: 15px; } .cp-h-chip { min-height: var(--ds-touch, 44px); font-size: 13px; } .cp-tag { font-size: 12px; padding: 4px 4px 4px 10px; } .cp-tag-x { width: 22px; height: 22px; } } /* ---------- TABLET DEITADO — e qualquer aparelho de dedo com mais de 768px ------ O bloco acima é por LARGURA, e um tablet ao alto (768px) cabe lá dentro. Deitado não: um iPad em paisagem tem 1024px de largura e continua a ser um aparelho onde se toca com o dedo. Caía no ramo de rato e ficava com os alvos de 30px do desktop — medido, 41 de 41 células do calendário e 42 de 42 das horas abaixo do mínimo, a menor com 30px. `pointer: coarse` pergunta pelo APARELHO e não pela largura, que é a pergunta certa. É o mesmo critério que o `design-system.css` já usa (§ .ds-chip). Um portátil com ecrã tátil continua a reportar `fine` — o ponteiro principal é o rato —, por isso não perde a densidade que tem hoje. Aqui vão só as MEDIDAS DE ALVO. O bloco por largura fica com o que é mesmo de ecrã estreito (painel de margem a margem, letra a 16px contra o zoom do iOS): um calendário de 1008px num tablet deitado não serve ninguém. */ @media (pointer: coarse) and (min-width: 769px) { .cp-gatilho { min-height: max(var(--ds-touch, 44px), 46px); } .cp-txt { height: auto; min-height: 44px; } .cp-acao { width: var(--ds-touch, 44px); height: var(--ds-touch, 44px); } .cp-acao svg { width: 19px; height: 19px; } .cp-painel--lista { --cp-op-h: 48px; } /* 352 = 7×44 dos dias + 6×2 de intervalo + 24 de `padding` + 2 de contorno. Quem manda mesmo é o `larguraMin` do JS (escreve `min-width` inline); isto fica como piso para quem chame o `montarData` por fora. */ .cp-painel--data { min-width: 352px; } .cp-d { min-height: var(--ds-touch, 44px); font-size: 14px; } .cp-cal-nav { width: var(--ds-touch, 44px); height: var(--ds-touch, 44px); } .cp-cal-pe-btn, .cp-h-pe-btn { min-height: var(--ds-touch, 44px); } .cp-h-v, .cp-h-chip { min-height: var(--ds-touch, 44px); } } /* ===================================================================================== §8b EM TELEMÓVEL E TABLET O PAINEL NÃO É UM PAINEL Ancorar um menu a um campo é uma ideia de rato e ecrã grande. No telemóvel o campo está a meio de um formulário que rola e o teclado come metade da altura — o menu fica espremido entre os dois, e foi exatamente isso que se viu. Duas formas, as mesmas do Shoperfil (`.ss-sheet` e `.dp-sheet`): · LISTAS → folha de ecrã inteiro encostada AO TOPO, com a pesquisa debaixo do polegar e uma saída explícita («Fechar» / «Concluído»); · DATA → cartão centrado sobre fundo escurecido; · HORA → não há folha nenhuma: em telemóvel o campo fica NATIVO (ver a nota no `montarHora`), porque a roda do sistema é melhor do que qualquer coisa que se escreva aqui. A POSIÇÃO vem toda do `posicionar()`, que a escreve em estilo inline — inline ganha a qualquer folha de estilos, e sem `!important` (que aqui não se usa) não há como um ficheiro CSS a contrariar. Estas regras são só o VESTUÁRIO. ===================================================================================== */ /* O fundo escurecido. Um só para toda a aplicação — abrir um painel fecha os outros. */ .cp-fundo { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-tap-highlight-color: transparent; animation: cpEntrar var(--transition-fast, .15s) ease-out; } .cp-fundo[hidden] { display: none; } /* Com uma folha aberta a página por baixo não deve rolar: o dedo tem de arrastar a LISTA, e não o formulário que ficou lá atrás. */ body.cp-sem-scroll { overflow: hidden; } /* ---------- folha de topo (listas) ---------- */ .cp-painel--folha { border-radius: 0 0 var(--r-xl, 20px) var(--r-xl, 20px); border-top: none; border-left: none; border-right: none; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .22), 0 32px 64px -16px rgba(15, 23, 42, .16); } .cp-folha-cab { display: flex; align-items: center; gap: var(--sp-2, 8px); flex-shrink: 0; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--neutral-100); background: var(--neutral-0); } /* Fora da folha o cabeçalho não existe — no computador quem filtra é a caixa de texto do próprio gatilho, que ali está à vista. */ .cp-painel:not(.cp-painel--folha) .cp-folha-cab, .cp-painel:not(.cp-painel--folha) .cp-folha-barra, .cp-folha-cab[hidden] { display: none; } /* Numa lista curta a folha não leva pesquisa (regra das 8 opções) — mas o cabeçalho fica, porque é ele que traz a saída. Sem esta regra o `hidden` do `` perdia para o `display:flex` herdado e a caixa continuava lá. */ .cp-folha-busca[hidden] { display: none; } .cp-folha-busca { flex: 1 1 auto; min-width: 0; min-height: var(--ds-touch, 44px); padding: 0 14px; border: 1px solid var(--neutral-200); border-radius: var(--radius-md, 10px); background: var(--neutral-50, var(--neutral-100)); font-family: var(--font-family, var(--font-sans)); /* 16px é o piso anti-zoom do iOS: abaixo disto o Safari aproxima a página sozinho quando o campo recebe foco, e a folha sai do sítio. */ font-size: max(16px, var(--text-sm, .8125rem)); color: var(--neutral-800); } .cp-folha-busca:focus { outline: none; background: var(--neutral-0); border-color: var(--primary-300, var(--brand-300)); box-shadow: var(--ds-ring, 0 0 0 3px var(--ring-color)); } /* `margin-left: auto` para a saída ficar sempre encostada à direita — com a pesquisa à vista ela já lá empurra o botão, mas numa lista curta (sem pesquisa) o botão ficaria sozinho e colado à esquerda, longe do polegar. */ .cp-folha-sair { flex: 0 0 auto; margin-left: auto; min-height: var(--ds-touch, 44px); padding: 8px 14px; border: none; border-radius: var(--radius-md, 10px); background: transparent; color: var(--primary-600, var(--brand-600)); font-family: inherit; font-size: var(--text-sm, .8125rem); font-weight: var(--fw-semibold, 600); cursor: pointer; } /* Numa lista de várias escolhas, sair não é desistir — é dar por terminado. O botão passa a primário para se ler como a conclusão do gesto. */ .cp-folha-sair--feito { background: var(--primary-600, var(--brand-600)); color: var(--neutral-0); padding: 8px 18px; } .cp-folha-sair:active { background: var(--primary-50, var(--brand-50)); color: var(--primary-700, var(--brand-700)); } .cp-folha-sair--feito:active { background: var(--primary-700, var(--brand-700)); color: var(--neutral-0); transform: scale(.96); } .cp-folha-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); flex-shrink: 0; padding: 0 8px 0 16px; border-bottom: 1px solid var(--neutral-100); } .cp-folha-conta { font-size: var(--text-xs, .75rem); color: var(--neutral-500); font-variant-numeric: var(--num-tabular, tabular-nums); } .cp-folha-conta.tem-sel { color: var(--primary-700, var(--brand-700)); font-weight: var(--fw-semibold, 600); } .cp-folha-accoes { display: flex; align-items: center; gap: 4px; } .cp-folha-btn { min-height: var(--ds-touch, 44px); padding: 8px 10px; border: none; border-radius: var(--radius-md, 10px); background: none; color: var(--primary-600, var(--brand-600)); font-family: inherit; font-size: var(--text-xs, .75rem); font-weight: var(--fw-semibold, 600); cursor: pointer; } .cp-folha-btn:active { background: var(--primary-50, var(--brand-50)); color: var(--primary-700, var(--brand-700)); } /* Numa folha as linhas crescem: 52px é o que o Shoperfil usa e o que dá para ler duas linhas de texto sem apertar o alvo. */ .cp-painel--folha .cp-op { min-height: 52px; padding: 0 16px; font-size: max(15px, var(--text-sm, .8125rem)); } .cp-painel--folha .cp-menu { flex: 1 1 auto; min-height: 0; } /* ---------- cartão centrado (calendário) ---------- */ .cp-painel--cartao { border-radius: var(--r-xl, 20px); padding: var(--sp-4, 16px); box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .3), 0 8px 16px -8px rgba(15, 23, 42, .2); } /* Sete colunas de 44px pedem 308px só para os dias. O cartão tem no máximo 360px e o `padding` leva 32 — sem tirar o intervalo, a célula ficava a 42,6px. */ .cp-painel--cartao .cp-cal-dias, .cp-painel--cartao .cp-cal-dias > * { gap: 0; } .cp-painel--cartao .cp-d { min-height: var(--ds-touch, 44px); font-size: max(15px, var(--text-sm, .8125rem)); } /* ===================================================================================== §9 PREFERÊNCIAS DO SISTEMA E IMPRESSÃO ===================================================================================== */ @media (prefers-reduced-motion: reduce) { .cp-painel, .cp-painel--cima { animation: none; } .cp-d, .cp-h-v, .cp-acao, .cp-seta svg { transition: none; } .cp-d:active { transform: none; } } @media (prefers-contrast: more) { .cp-gatilho, .cp-painel { border-color: var(--neutral-600); } .cp-op.is-focada { box-shadow: inset 0 0 0 2px var(--primary-600, var(--brand-600)); } } @media print { .cp-painel { display: none; } .cp-acao, .cp-seta { display: none; } .cp-gatilho { border-color: var(--neutral-300); box-shadow: none; } }