/* ==========================================================================
Página pública de assinatura de documento — GED (ged-documentos)
Classes `gedas-*`; consome os design tokens --crh-* (dois temas via .dark
no , mesmo mecanismo do restante das páginas públicas).
========================================================================== */
/* box-sizing próprio: a página não pode depender do `*{box-sizing}` de outra folha —
sem ele o card (width:100% + padding) estoura a viewport no celular. */
.gedas, .gedas *, .gedas *::before, .gedas *::after { box-sizing: border-box; }
/* Passo 2 do wizard nasce oculto até o Alpine hidratar — sem depender da regra de outra folha. */
.gedas [x-cloak] { display: none !important; }
/* RAIZ do "não está responsivo" no celular (2026-08-11): o layout público centra tudo com
`body { display: grid; place-items: center }` (centralrh-auth.css). Numa grade, a trilha `auto`
cresce até o MAX-CONTENT do item — a página inteira ficava com a largura da maior linha SEM
quebra (a nota do rodapé, a dica do posicionador), 532px numa viewport de 390px, e tudo nascia
deslocado: o "Voltar ao aplicativo" cortado e o documento maior que a tela. Esta página governa
a própria largura, então travamos a TRILHA em `minmax(0, 1fr)` enquanto ela está em cena: o grid e
a centralização do layout continuam de pé (as demais telas nem são tocadas), mas nada dentro dela
consegue empurrar a página para além da viewport. Vale também para a validação do QR
(`/validar-documento/{token}`), que divide esta folha e nasce do mesmo grid. */
body:has(.gedas) { grid-template-columns: minmax(0, 1fr); }
/* Página inteira (pedido 2026-08-11): UM dono só do fundo — antes o gradiente do miolo brigava com o
do body e aparecia uma emenda de cor. A nav de topo segue o padrão do site (inner de 1200px). */
.gedas-page {
/* width 100%: o body deste layout é um grid centrado (centralrh-auth.css) e, sem a largura
explícita, a página encolhia para o tamanho do conteúdo — a nav não abria de ponta a ponta. */
width: 100%;
max-width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
color: var(--crh-text-strong);
background: linear-gradient(160deg, var(--crh-bg-a), var(--crh-bg-b));
font-family: 'Manrope', sans-serif;
}
/* Com a nav própria, o toggle flutuante do layout sai de cena (ele vivia no canto que a nav ocupa). */
body:has(.gedas-topbar) .crh-theme-toggle--fixed { display: none; }
.gedas-topbar {
position: sticky;
top: 0;
z-index: 30;
width: 100%;
background: var(--crh-glass);
-webkit-backdrop-filter: blur(var(--crh-blur));
backdrop-filter: blur(var(--crh-blur));
border-bottom: 1px solid var(--crh-hair);
}
@supports not (backdrop-filter: blur(1px)) {
.gedas-topbar { background: var(--crh-surface); }
}
.gedas-topbar__inner {
max-width: 1200px;
min-height: 64px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 12px;
}
.gedas-topbar__mark { width: 36px; height: 36px; flex: none; }
.gedas-topbar__sub {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: var(--crh-text-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gedas-topbar__acoes { display: flex; align-items: center; gap: 12px; flex: none; }
.gedas-topbar__voltar {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border-radius: 10px;
background: var(--crh-primary);
color: #fff;
font-weight: 700;
font-size: 13.5px;
text-decoration: none;
white-space: nowrap;
}
.gedas-topbar__voltar:hover { background: var(--crh-primary-hover); }
.gedas {
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 28px 16px 40px;
}
.gedas__card {
width: 100%;
max-width: 640px;
height: fit-content;
background: var(--crh-glass);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--crh-glass-border);
border-radius: 18px;
box-shadow: var(--crh-shadow-card);
padding: 26px 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.gedas__empresa {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--crh-text-subtle);
}
.gedas__titulo {
font-family: 'Archivo', sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--crh-text-strong);
margin: 4px 0 0;
}
.gedas__meta {
font-size: 13px;
color: var(--crh-text-muted);
margin-top: 5px;
}
/* No PC a tela do WIZARD usa o padrão do site (pedido 2026-08-11: "aumentar tamanho da tela") —
o card cresce até 1040px e o documento aparece grande; os demais estados (código, terminais)
continuam no card estreito, que lhes cai melhor. */
.gedas__card:has(.gedas__wizard) { max-width: 1040px; }
/* ---- Wizard de assinatura (pedido 2026-08-11): 1) documento + posição · 2) assinar e concluir. */
.gedas__wizard {
display: flex;
flex-direction: column;
gap: 18px;
}
.gedas__passo {
display: flex;
flex-direction: column;
gap: 14px;
}
.gedas__passos {
display: flex;
align-items: center;
gap: 10px;
}
.gedas__passos-barra {
flex: 1;
height: 5px;
border-radius: 99px;
background: var(--crh-hair);
}
.gedas__passos-barra--feita { background: var(--crh-primary); }
.gedas__passos-rotulo {
font-size: 12.5px;
font-weight: 700;
color: var(--crh-text-muted);
white-space: nowrap;
}
.gedas__btn--block { width: 100%; }
.gedas__voltar {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 6px;
border: none;
background: transparent;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--crh-text-muted);
cursor: pointer;
}
.gedas__voltar:hover { color: var(--crh-text-strong); }
.gedas__viewer {
/* Com o quadro de assinatura no passo 2, o documento pode ocupar mais da tela — no PC e no
celular a altura acompanha a viewport em vez dos 380px fixos. */
height: clamp(320px, 56vh, 560px);
overflow: auto;
background: var(--crh-bg-a);
border: 1px solid var(--crh-hair);
border-radius: 12px;
/* BLOCO, não flex (correção 2026-08-11): como flex, o posicionador (`.crh-signplace`) era um
item sem flex-grow e ficava do tamanho do próprio MAX-CONTENT — a dica "Arraste o marcador…"
numa linha só ditava a largura, o PDF.js media `stage.clientWidth` já estourado e renderizava
o documento mais largo que a tela. Em bloco o filho ocupa exatamente a largura disponível. */
display: block;
}
.gedas__frame {
width: 100%;
height: 100%;
border: none;
display: block;
}
.gedas__img {
display: block;
max-width: calc(100% - 32px);
margin: 16px auto;
border-radius: 6px;
box-shadow: 0 6px 22px rgba(9, 18, 36, 0.18);
}
.gedas__quem {
font-size: 13.5px;
color: var(--crh-text-muted);
}
.gedas__papel {
display: block;
font-size: 12px;
color: var(--crh-text-subtle);
margin-top: 2px;
}
.gedas__form {
display: flex;
flex-direction: column;
gap: 10px;
}
.gedas__canvas-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.gedas__canvas-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--crh-text-subtle);
}
.gedas__limpar {
font-size: 12.5px;
font-weight: 700;
color: var(--crh-text-muted);
background: var(--crh-glass-2);
border: 1px solid var(--crh-hair);
border-radius: 8px;
padding: 6px 12px;
cursor: pointer;
}
.gedas__pad {
background: #fff;
border: 1px dashed var(--crh-primary-border);
border-radius: 12px;
overflow: hidden;
}
.gedas__canvas {
display: block;
width: 100%;
height: auto;
touch-action: none;
cursor: crosshair;
}
.gedas__acoes {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.gedas__btn-primary {
font-weight: 700;
font-size: 14px;
color: #fff;
background: var(--crh-primary);
border: none;
border-radius: 9px;
padding: 11px 18px;
min-height: 44px; /* alvo de toque */
cursor: pointer;
}
.gedas__btn-primary:hover { background: var(--crh-primary-hover); }
.gedas__btn-ghost {
font-weight: 700;
font-size: 14px;
color: var(--crh-text-muted);
background: var(--crh-glass-2);
border: 1px solid var(--crh-hair);
border-radius: 9px;
padding: 11px 16px;
min-height: 44px;
cursor: pointer;
}
/* Em contagem regressiva ("Reenviar em Ns") o botão espera — não convida ao clique. */
.gedas__btn-ghost:disabled {
opacity: .55;
cursor: not-allowed;
}
.gedas__btn-danger {
font-weight: 700;
font-size: 14px;
color: #fff;
background: var(--crh-danger);
border: none;
border-radius: 9px;
padding: 11px 18px;
min-height: 44px;
cursor: pointer;
}
.gedas__nota {
font-size: 11.5px;
color: var(--crh-text-subtle);
margin: 4px 0 0;
}
.gedas__erro {
font-size: 12.5px;
font-weight: 600;
color: var(--crh-danger);
}
.gedas__recusa {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--crh-hair-2);
padding-top: 16px;
}
.gedas__textarea {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 13.5px;
color: var(--crh-text-strong);
background: var(--crh-glass-2);
border: 1px solid var(--crh-hair);
border-radius: 10px;
padding: 11px 13px;
resize: vertical;
}
.gedas__textarea:focus {
outline: none;
box-shadow: var(--crh-focus-ring);
}
/* estados terminais ------------------------------------------------------ */
.gedas__estado {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 24px 8px;
}
.gedas__estado-icone {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 999px;
font-size: 24px;
font-weight: 800;
background: var(--crh-glass-2);
color: var(--crh-text-muted);
}
.gedas__estado-icone--ok {
background: var(--crh-success-soft);
color: var(--crh-success);
}
.gedas__estado-icone--erro {
background: var(--crh-danger-soft);
color: var(--crh-danger);
}
.gedas__estado-texto {
font-size: 14px;
color: var(--crh-text-muted);
max-width: 420px;
margin: 0;
}
/* "Voltar ao aplicativo" nas telas terminais — link com cara de botão (o primário é aqui). */
.gedas__estado-voltar {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 300px;
width: 100%;
margin-top: 8px;
text-decoration: none;
}
/* ---- Validação pública do QR (2026-08-10) — página /validar-documento/{token}. ---- */
.gedas__hash {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
word-break: break-all;
user-select: all;
}
.gedas__validacao-linha {
margin-top: 6px;
}
/* ---- Verificação por código (2026-08-10) — etapa antes do quadro de assinatura. ---- */
.gedas__input-codigo {
width: 100%;
max-width: 260px;
margin: 0 auto;
display: block;
text-align: center;
font-size: 28px;
font-weight: 700;
letter-spacing: 10px;
padding: 12px 8px;
/* Contraste de verdade (pedido 2026-08-11): vidro sobre card branco era claro-sobre-claro e o
quadro sumia. Fundo no tom da PÁGINA + borda sólida + sombra interna destacam o campo. */
border: 1.5px solid var(--crh-border, #C9D4E4);
border-radius: 12px;
background: var(--crh-bg-a, #EEF2F8);
box-shadow: inset 0 1px 3px rgba(18, 32, 58, 0.08);
color: var(--crh-text-strong);
}
.gedas__input-codigo::placeholder { color: var(--crh-text-subtle, #8A97AD); }
.gedas__input-codigo:focus {
outline: 2px solid var(--crh-primary, #2563eb);
outline-offset: 1px;
}
/* ---- Responsivo (pedido 2026-08-11): a folha não tinha NENHUM breakpoint. ----------------------
Abaixo de 640px o card cola menos nas bordas, o visualizador do documento passa a caber na tela
junto com o quadro de assinatura, e as ações empilham em largura total (alvo de toque de 48px). */
@media (max-width: 640px) {
/* A nav própria substituiu o toggle flutuante — o topo não precisa mais da folga de 76px. */
.gedas { padding: 16px 10px 28px; }
.gedas-topbar__inner { min-height: 56px; padding: 0 14px; gap: 10px; }
.gedas-topbar__voltar { padding: 0 14px; }
.gedas__card {
padding: 20px 16px;
border-radius: 14px;
gap: 14px;
}
.gedas__titulo { font-size: 19px; }
/* No celular o documento toma a maior parte da tela do passo 1 (o quadro está no passo 2). */
.gedas__viewer { height: min(58vh, 480px); }
.gedas__passos-rotulo { font-size: 11.5px; white-space: normal; }
.gedas__acoes { flex-direction: column; }
.gedas__acoes .gedas__btn-primary,
.gedas__acoes .gedas__btn-ghost,
.gedas__acoes .gedas__btn-danger {
width: 100%;
min-height: 48px;
}
.gedas__input-codigo {
max-width: 240px;
font-size: 24px;
letter-spacing: 8px;
}
.gedas__estado { padding: 16px 2px; }
}
/* Telas estreitas de verdade (≤480px — o celular das capturas): o rótulo longo do botão de volta
comia a nav inteira e sobrava um punhado de pixels para o nome da empresa. A cauda
"ao aplicativo" sai de cena (o aria-label no preserva o nome completo). */
@media (max-width: 480px) {
.gedas-topbar__voltar-cauda { display: none; }
.gedas-topbar__inner { padding: 0 12px; gap: 8px; }
.gedas-topbar__acoes { gap: 8px; }
.gedas-topbar__mark { width: 30px; height: 30px; }
}