/* * Páginas STANDALONE de app/autenticação (login, seletor de empresa, bloqueio) — Blade/Livewire * puro, FORA do Filament. Servido como FOLHA ESTÁTICA VERSIONADA (link no layout x-layouts.app), * nunca CSS inline em view. Ver backend/docs/css.md. * * TEMA CLARO/ESCURO: as cores vivem em CUSTOM PROPERTIES. O padrão é CLARO (`:root`); o tema escuro * entra quando a classe `.dark` está no (mesmo modelo do Filament). O toggle (layout app) grava * a escolha em localStorage e um script no aplica a classe antes da pintura (sem flash). */ /* Paleta = DESIGN TOKENS da marca (`--crh-*`, public/css/centralrh-tokens.css — linkada ANTES desta folha no layout). Os aliases locais preservam os nomes históricos usados por auth e portal; os tokens já trocam os valores no tema escuro (superfícies derivadas do Azul-noite), então o bloco `.dark` daqui só cuida do que é exclusivo destas páginas. */ :root { color-scheme: light; --bg: var(--crh-bg); --card-bg: var(--crh-surface); --border: var(--crh-border); --text: var(--crh-text-strong); --muted: var(--crh-text-muted); /* Campos em VIDRO de recuo (repaginação §4): fundo translúcido + fio como borda. */ --input-bg: var(--crh-glass-2); --input-border: var(--crh-hair); --primary: var(--crh-primary); --primary-hover: var(--crh-primary-hover); --primary-text: #ffffff; --err: var(--crh-danger); --toggle-bg: var(--crh-surface); --toggle-border: var(--crh-border); } .dark { color-scheme: dark; /* Erro mais claro para leitura sobre as superfícies navy do tema escuro. */ --err: #f19999; } * { box-sizing: border-box; } /* Elementos controlados por x-show ficam ocultos até o Alpine iniciar (senão piscam na carga — ex.: rótulo de força e aviso de coincidência da tela Definir nova senha). O Alpine remove o atributo ao hidratar. */ [x-cloak] { display: none !important; } body { /* Tipografia da marca: Manrope na interface (fontes locais em centralrh-fonts.css). */ font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; margin: 0; min-height: 100vh; display: grid; place-items: center; /* Fundo em gradiente + halos (repaginação §3) — token composto compartilhado com o shell dos painéis; `--crh-bg` fica de fallback sólido para quem não resolver o gradiente. */ background: var(--bg); background: var(--crh-app-bg); background-attachment: fixed; color: var(--text); } /* Card simples (usado por telas utilitárias fora do split, ex.: apex). Superfície de vidro para * cobrir o dark mode sem "buraco branco" (§ aceite), com fallback sólido. */ .card { width: min(92vw, 380px); background: var(--crh-glass); backdrop-filter: blur(var(--crh-blur)); -webkit-backdrop-filter: blur(var(--crh-blur)); border: 1px solid var(--crh-glass-border); border-radius: var(--crh-radius-lg); box-shadow: var(--crh-shadow-card); padding: 1.75rem; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .card { background: var(--crh-surface); } } /* Títulos em Archivo, como no logotipo (manual da marca). */ h1 { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; font-size: 1.25rem; margin: 0 0 1rem; } label { display: block; font-size: .85rem; color: var(--muted); margin: .75rem 0 .25rem; } input, select, textarea { width: 100%; padding: .6rem .7rem; border-radius: var(--crh-radius-md); border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text); font: inherit; transition: border-color 150ms ease, box-shadow 150ms ease; } /* Estado de FOCO do design system: borda no Azul primário + anel suave (focus-ring do handoff). */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--crh-focus-ring); } /* SELECT no padrão do design system: remove o controle nativo do SO (que ignorava borda/radius/tema) * e desenha uma seta chevron própria via SVG embutido (data URI) — sem JS, sem imagem externa. */ select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6b8c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 1.1rem; cursor: pointer; } .dark select { /* Seta mais clara no tema escuro (stroke = --muted do dark). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238fa5cc' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); } textarea { min-height: 5.5rem; resize: vertical; } /* Input de ARQUIVO (candidatura): o botão nativo "Escolher arquivo" vira um botão do design system * (tinta da cor primária, borda, radius, hover) e o texto do arquivo fica discreto. Tudo por CSS nativo * (`::file-selector-button`), sem JS. */ input[type="file"] { padding: .4rem .5rem; color: var(--muted); font-size: .85rem; line-height: 1.9; cursor: pointer; } input[type="file"]::file-selector-button { margin-right: .75rem; padding: .4rem .85rem; border: 1px solid var(--input-border); border-radius: 6px; background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); color: var(--text); font-weight: 600; font-size: .8rem; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--primary) 26%, var(--card-bg)); border-color: var(--primary); } button { width: 100%; margin-top: 1.1rem; padding: .65rem; border: 0; border-radius: var(--crh-radius-md); background: var(--primary); color: var(--primary-text); font-weight: 700; cursor: pointer; transition: background 150ms ease, box-shadow 150ms ease; } /* Botões primários de SUBMIT (ex.: "Enviar admissão", "Entrar") no MESMO padrão dos painéis * (design system, handoff): texto branco sobre o Azul primário, hover no azul mais escuro * (`--crh-primary-hover`), anel de foco suave e ALVO DE TOQUE ≥44px (padding 14px + fonte 16px, * spec do handoff do login). Escopado a `type="submit"` — não afeta os utilitários * (copiar/tema, que são `type="button"`). */ button[type="submit"] { padding: 14px; font-size: 16px; color: var(--primary-text); } button[type="submit"]:hover { background: var(--primary-hover); } button[type="submit"]:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); } /* Loading/desabilitado do primário (handoff): azul dessaturado, sem "apagar" o rótulo ("Entrando..."). */ button[type="submit"]:disabled { background: var(--crh-primary-disabled); opacity: 1; cursor: not-allowed; } /* ── Card de empresa do seletor (mockup 2026-08-09) ──────────────────────────────────────────── * Avatar com iniciais + nome (com badge "Última" no último acesso) + linha de contexto * (CNPJ · colaboradores) + chevron; o CARD INTEIRO é o botão de entrar — por isso o reset do * `button` global (largura/fundo/cor) logo abaixo. */ .empresa { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: .6rem; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; } .empresa:hover, .empresa:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--crh-focus-ring); } .empresa--bloqueada { opacity: .55; } .empresa__avatar { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--crh-navy); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .empresa__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .empresa__nome { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--text); } .empresa__badge { flex: none; padding: 2px 8px; border-radius: var(--crh-radius-pill); background: var(--crh-primary-soft); color: var(--primary); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* O soft claro da marca some sobre navy: no escuro o badge vira tint translúcido do primário. */ .dark .empresa__badge { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--crh-blue-300); } .empresa__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empresa__chevron { flex: none; width: 18px; height: 18px; color: var(--crh-text-subtle); } /* "Sair da conta" — link centrado sob a lista; reset do `button` global (fundo/largura). */ .login__sair { display: flex; align-items: center; gap: 6px; width: auto; margin: 1.1rem auto 0; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .login__sair:hover { color: var(--text); background: transparent; } .login__sair-icone { width: 16px; height: 16px; } .err { color: var(--err); font-size: .8rem; margin-top: .35rem; } /* ── Termo de Uso — variante INLINE (tela-403 de bloqueio, fora do painel Filament) ───────────── * Mesmo componente Livewire do modal, embutido no card quando o layout público não tem os assets do * Filament (CA9). Texto do termo rolável + linha do checkbox + ações empilhadas. */ .termo-inline__content { max-height: 45vh; overflow-y: auto; margin-top: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; text-align: left; font-size: .85rem; line-height: 1.65; } /* Tipografia do HTML do termo (o reset zera margens de `

`/listas/títulos, senão vira bloco único). */ .termo-inline__content p { margin: 0 0 .75rem; } .termo-inline__content > :last-child { margin-bottom: 0; } .termo-inline__content h2 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .5rem; } .termo-inline__content h3 { font-size: .92rem; font-weight: 600; margin: 1rem 0 .4rem; } .termo-inline__content ul, .termo-inline__content ol { margin: 0 0 .75rem; padding-inline-start: 1.5rem; } .termo-inline__content ul { list-style: disc; } .termo-inline__content ol { list-style: decimal; } .termo-inline__content li { margin: .2rem 0; } .termo-inline__content strong, .termo-inline__content b { font-weight: 700; } .termo-inline__content em, .termo-inline__content i { font-style: italic; } .termo-inline__content u { text-decoration: underline; } .termo-inline__content s { text-decoration: line-through; } .termo-inline__content a { color: var(--primary); text-decoration: underline; } .termo-inline__content blockquote { margin: 0 0 .75rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--border); color: var(--muted); } .termo-inline__accept { display: flex; align-items: flex-start; gap: .5rem; margin-top: .9rem; text-align: left; font-size: .85rem; } .termo-inline__accept input[type="checkbox"] { width: auto; margin-top: .15rem; } .termo-inline__actions { display: flex; flex-direction: column; gap: .5rem; } button:disabled { opacity: .5; cursor: not-allowed; } .blocked { opacity: .55; } .muted { color: var(--muted); font-size: .8rem; } /* Link dentro de texto "muted" (substitui o `style="color:#94a3b8"` que era inline nas views). */ .muted a { color: var(--muted); } /* Utilitária de espaçamento (substitui `style="margin-top:1rem"` inline). */ .mt-1 { margin-top: 1rem; } /* ── Telefones de contato (tela de bloqueio) ─────────────────────────────────────────────────── * Dois telefones lado a lado (Celular | Telefone), cada um com rótulo, número mascarado e botão de * copiar. Com um só telefone, ele fica de um lado; quebra para empilhar em telas estreitas. */ .phones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; } .phone { flex: 1 1 0; min-width: 9rem; display: flex; flex-direction: column; gap: .15rem; } .phone-label { color: var(--muted); font-size: .72rem; } .phone-row { display: flex; align-items: center; gap: .35rem; } .phone-number { color: var(--text); font-size: .85rem; text-decoration: none; } .phone-number:hover { text-decoration: underline; } /* Botão de copiar: ícone discreto (reseta o estilo do `button` global — largura/fundo/margem). */ .phone-copy { width: auto; margin: 0; padding: .15rem; display: inline-flex; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; line-height: 0; } .phone-copy:hover { color: var(--text); } .phone-copy svg { width: 1rem; height: 1rem; } /* Feedback de "copiado": troca o ícone de copiar pelo "check" por ~1.2s (classe .copied via JS). */ .phone-copy .icon-check { display: none; } .phone-copy.copied { color: var(--primary); } .phone-copy.copied .icon-copy { display: none; } .phone-copy.copied .icon-check { display: inline; } /* ── Botão de alternância de tema (claro/escuro) ─────────────────────────────────────────────── * Estilo do componente COMPARTILHADO `.crh-theme-toggle` (centralrh-tokens.css), na variante flutuante * `.crh-theme-toggle--fixed` (canto superior direito). É o MESMO botão do painel e do portal * (padronização 2026-07-19): antes o auth tinha um círculo de 40px próprio, que destoava do quadrado * de raio 10 das outras superfícies. Markup em resources/views/components/theme-toggle.blade.php. */ /* ── Tela de LOGIN — split (painel de marca navy + formulário) ────────────────────────────────── * Desktop (≥900px): card de TAMANHO FIXO 960×560 com dois painéis lado a lado. Mobile (<900px): * painel de marca OCULTO, logo colorido no topo do formulário, card estreito. Tokens em * centralrh-tokens.css; sem CSS inline (docs/design-system.md). * * TAMANHO FIXO (repaginação v1.0 §5) — regra transversal, não decoração: TODAS as telas de auth * (login, admin, recuperar, definir senha, e-mail enviado, ativação, termo, portal) usam ESTA * classe e, portanto, esta medida. Era `min-height: 520px`, que crescia com o conteúdo e fazia o * card "saltar" ao navegar entre login → recuperar → definir senha. `height` fixo mata o tilt; o * conteúdo que exceder rola no painel do formulário (.login__panel), nunca estica o card. * Os modificadores por tela (login--recovery, login--reset) seguem SEM regra própria nesta folha — * herdam tudo daqui. Contrato provado por AuthScreensRedesignTest (que checa a AUSÊNCIA desses * seletores, por isso não os escrevemos nem em comentário com o ponto). */ .login { display: flex; width: var(--crh-auth-card-w); max-width: 94vw; height: var(--crh-auth-card-h); background: var(--crh-glass); backdrop-filter: blur(var(--crh-blur)); -webkit-backdrop-filter: blur(var(--crh-blur)); border: 1px solid var(--crh-glass-border); border-radius: var(--crh-radius-2xl); overflow: hidden; box-shadow: var(--crh-shadow-panel); } /* Sem suporte a backdrop-filter (Firefox com a flag desligada, WebViews antigas): cai para a * superfície SÓLIDA — o vidro é enfeite, a legibilidade não é. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .login { background: var(--crh-surface); } } /* Painel de MARCA (navy nos dois temas): logo em variante navy, headline, tagline e stats. */ .login__brand { flex: 1.05; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 44px; background: var(--crh-navy); } /* Anéis decorativos: círculos de contorno fino vazados nas bordas do painel. */ .login__ring { position: absolute; border-radius: var(--crh-radius-pill); pointer-events: none; } .login__ring--a { width: 320px; height: 320px; border: 2px solid rgba(127, 168, 238, 0.16); right: -70px; top: -70px; } .login__ring--b { width: 220px; height: 220px; border: 2px solid rgba(127, 168, 238, 0.12); right: -20px; top: -20px; } .login__ring--c { width: 240px; height: 240px; border: 2px solid rgba(127, 168, 238, 0.10); left: -60px; bottom: -60px; } /* Tema ESCURO: os dois painéis do card têm o MESMO navy (#12203A) — o card vira navy SÓLIDO (sem vidro: o glass translúcido sobre o degradê do fundo rendia um tom diferente do painel de marca e o card ficava "meio a meio") e o painel do formulário fica transparente, herdando o navy. A divisa some e o clip dos anéis no painel de marca deixava o círculo "quebrado" no meio do card. Solta o clip do painel — o corte passa a acontecer só na borda arredondada do card (.login, overflow hidden) e o círculo fica contínuo. Anéis são decorativos (pointer-events: none), não atrapalham o formulário. */ .dark .login { background: var(--crh-navy); backdrop-filter: none; -webkit-backdrop-filter: none; } .dark .login__panel { background: transparent; } .dark .login__brand { overflow: visible; } .login__brand-logo { position: relative; } .login__brand-logo .crh-brand__mark { height: 40px; } .login__brand-logo .crh-brand__name { font-size: 19px; } /* Sem os stats do protótipo, a copy CENTRA na altura restante do painel (margin-block: auto). */ .login__brand-copy { position: relative; margin-block: auto; } .login__headline { margin: 0 0 10px; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; color: #ffffff; } .login__tagline { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.5; color: var(--crh-sidebar-muted); } /* Painel do FORMULÁRIO: conteúdo centralizado na vertical, coluna de até 340px, sobre o vidro de * recuo. Como o card tem altura FIXA (§5), é aqui que o conteúdo excedente rola — nunca no card, * senão a medida única quebra e o tilt volta. */ .login__panel { flex: 1; display: flex; flex-direction: column; justify-content: center; /* Padding vertical enxuto (40px) para o conteúdo mais alto do fluxo — login COM alerta de erro e "definir senha" com medidor — caber nos 560px fixos SEM barra de rolagem. O overflow abaixo é só rede de segurança (telas de conteúdo longo, ex.: termo): não deve disparar no fluxo normal. */ padding: 40px 48px; background: var(--crh-glass-2); overflow-y: auto; } .login__content { width: 100%; max-width: 340px; margin-inline: auto; } .login__panel h1 { font-size: 26px; margin: 0 0 4px; } .login__lead { margin: 0 0 1.25rem; font-size: 14px; color: var(--muted); } /* Logo colorido do topo — só na adaptação mobile (painel de marca oculto). */ .login__mobile-logo { display: none; } /* Erro GERAL (credenciais/limite): alerta do design system acima do formulário. */ .login__alert { margin-bottom: 1rem; padding: 12px 14px; background: var(--crh-danger-soft); border-left: 4px solid var(--crh-danger); border-radius: var(--crh-radius-md); font-size: 14px; color: var(--text); } /* Linha de opções: "Manter conectado" à esquerda, "Esqueci minha senha" à direita. */ .login__options { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; font-size: 13px; } /* Sem "manter conectado" (ex.: login do portal): só o link "Esqueci minha senha", alinhado à direita. */ .login__options--end { justify-content: flex-end; } /* ── Portal do candidato no split (repaginação §5) ────────────────────────────────────────────── * Reusa 100% do split .login; o modificador .login--portal é só um hook (sem regra própria, como * recovery/reset). O cadastro tem 6 campos e não cabe nos 560px fixos: em vez de rolar (barra) ou * apertar, ele CRESCE — `login--grow` solta a altura com piso de 560 (decisão 2026-07-17). Só o * cadastro usa isso; o entrar do portal fica nos 560 como as demais. A largura não muda (960), então * não há salto horizontal ao alternar entrar ↔ criar conta. */ /* Split SEM o painel de marca (portal do colaborador, pedido 2026-08-11): um card só, centrado, com o logo da marca visível no topo em QUALQUER largura (não só no mobile). */ .login--solo { width: min(94vw, 440px); height: auto; } .login--solo .login__panel { width: 100%; } .login--solo .login__mobile-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; } /* O tamanho do símbolo só existia no media query mobile — fora dele o SVG explodia (pedido 2026-08-11: "corrigir tamanho do logo"). */ .login--solo .crh-brand__mark { height: 36px; } /* Nota de rodapé sob o formulário (substitui o help que vivia no painel de marca) — com respiro maior do botão (pedido 2026-08-11: "o esqueceu a senha tem que ir mais para baixo"). O seletor é DUPLO de propósito: `.auth-text { margin: 0 }` vem depois no arquivo e, com a mesma especificidade, venceria por ordem. */ .auth-text.auth-text--rodape { margin-top: 1.75rem; text-align: center; } .login--grow { height: auto; min-height: var(--crh-auth-card-h); } /* Aceite dos termos (checkbox + texto), alinhado no topo. O checkbox é o do design system (regra compartilhada com .login__remember abaixo) — deixá-lo NATIVO dava "tilt" ao clicar: a regra genérica de input (borda + anel de foco + transition) sobre um checkbox `appearance: auto` faz o Chromium reiniciar a transition de box-shadow a cada frame, e o anel de foco fica piscando. */ .login__aceite { display: flex; align-items: flex-start; gap: .5rem; margin: .9rem 0 0; font-size: 13px; color: var(--muted); cursor: pointer; } /* "Já tem conta? Entrar" abaixo do formulário. */ .login__signin { margin: 1rem 0 0; font-size: 13px; color: var(--muted); text-align: center; } .login__signin a { color: var(--primary); font-weight: 600; text-decoration: none; } .login__signin a:hover { text-decoration: underline; } .login__remember { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: 13px; color: var(--muted); cursor: pointer; } /* Checkbox do design system (18px, raio 5, marcado no Azul primário com check branco). Compartilhado entre "Manter conectado" e o aceite dos termos do cadastro do candidato. */ .login__remember input[type="checkbox"], .login__aceite input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; flex: none; display: inline-grid; place-items: center; border: 1.5px solid var(--input-border); border-radius: 5px; background: var(--input-bg); cursor: pointer; } .login__remember input[type="checkbox"]:checked, .login__aceite input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } .login__remember input[type="checkbox"]:checked::after, .login__aceite input[type="checkbox"]:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); } .login__forgot { font-weight: 700; font-size: 13px; color: var(--primary); text-decoration: none; } .login__forgot:hover { text-decoration: underline; } /* Divisor "ou" entre o Entrar e o acesso administrativo. Margem em 15px (não 1.1rem/17.6px) para o conteúdo do painel caber nos 520px do card — assim Login e Recuperar acesso ficam AMBOS travados no min-height 520px (regra do handoff: mesmo tamanho, sem salto ao navegar). */ .login__divider { display: flex; align-items: center; gap: .75rem; margin: 15px 0; font-size: 12px; color: var(--crh-text-subtle); } .login__divider::before, .login__divider::after { content: ''; flex: 1; height: 1px; background: var(--crh-border-light); } /* Botão SECUNDÁRIO do design system: soft azul com borda soft. */ .login__admin { display: block; padding: 13px; text-align: center; background: var(--crh-primary-soft); border: 1px solid var(--crh-primary-border); border-radius: var(--crh-radius-md); font-weight: 700; font-size: 15px; color: var(--primary); text-decoration: none; transition: background 150ms ease; } .login__admin:hover { background: color-mix(in srgb, var(--primary) 14%, var(--crh-primary-soft)); } /* ── Recuperar acesso (Turno 11a) — IDÊNTICO ao login (decisão 2026-07-17, supersede a tipografia própria do handoff): o modificador de recuperação da view não tem NENHUMA regra nesta folha — container, painéis, logo, headline, tagline e título herdam 100% de .login, garantindo mesmo tamanho E mesma posição de tudo ao navegar entre as telas (o teste de redesign fixa a ausência). */ /* Rodapé de ajuda do painel de marca (só existe na recuperação): ABSOLUTO, fora do fluxo do flex — se ficasse no fluxo, empurraria a copy para cima e ela não centralizaria igual ao login. */ .login__help { position: absolute; left: 44px; right: 44px; bottom: 44px; margin: 0; font-size: 12px; color: var(--crh-sidebar-group-label); } /* ── Definir nova senha (handoff definir_senha v1.0, Turno 15a) — container e tipografia idênticos ao login (decisão 2026-07-17, mesmo contrato da recuperação: o modificador da view não tem regra nenhuma nesta folha). Abaixo, só os componentes PRÓPRIOS da tela. ──────────────────────────────── */ /* Requisitos de senha no rodapé do painel de marca (desktop) — ABSOLUTO como o rodapé de ajuda, fora do fluxo do flex, para a copy centralizar na mesma posição do login. */ .login__reqs { position: absolute; left: 44px; right: 44px; bottom: 44px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; } .login__reqs li { display: flex; align-items: center; gap: .55rem; font-size: 13px; color: var(--crh-sidebar-muted); } /* Check no Azul claro dos anéis (spec 15a) — mesmo hue rgba(127,168,238) dos .login__ring. */ .login__reqs svg { width: 15px; height: 15px; flex: none; color: #7FA8EE; } /* Campo de senha com ação embutida (olho): o input reserva 44px à direita e o botão reseta o estilo global de button (largura/fundo/margem) para virar ícone de toggle mostrar/ocultar. */ .pw-field { position: relative; } .pw-field input { padding-right: 44px; } .pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: auto; margin: 0; padding: 8px; background: transparent; border-radius: 8px; color: var(--crh-text-subtle); line-height: 0; cursor: pointer; } .pw-toggle:hover { color: var(--text); } .pw-toggle svg { width: 20px; height: 20px; } /* Estado de ERRO do campo (senhas não coincidem): borda + anel no par de perigo (spec 15a). */ input.input-error { border-color: var(--err); box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.14); } /* Medidor de força: 4 segmentos de 5px em pill; cor por nível via data-score (Alpine) — 1 Fraca = vermelho · 2 Média = âmbar ×2 · 3 Boa = verde ×2 + âmbar · 4 Forte = verde ×4. Segmento vazio fica na cor da borda. */ .strength { display: flex; gap: 6px; margin-top: 10px; } .strength__seg { flex: 1; height: 5px; border-radius: var(--crh-radius-pill); background: var(--border); transition: background 150ms ease; } .strength[data-score="1"] .strength__seg:nth-child(1) { background: var(--crh-danger); } .strength[data-score="2"] .strength__seg:nth-child(-n+2) { background: var(--crh-warning); } .strength[data-score="3"] .strength__seg:nth-child(-n+2) { background: var(--crh-success); } .strength[data-score="3"] .strength__seg:nth-child(3) { background: var(--crh-warning); } .strength[data-score="4"] .strength__seg { background: var(--crh-success); } .strength-label { margin: 6px 0 0; font-size: 12px; color: var(--muted); } .strength-label strong { color: var(--text); } /* Requisitos dinâmicos do MOBILE (painel navy oculto <900px): lista abaixo dos campos; item vira ✓ verde ao ser atendido. No desktop fica escondida (os requisitos vivem no rodapé navy). */ .reset-reqs { display: none; } /* Ícone-selo do formulário (envelope em quadrado soft 52px). */ .auth-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: var(--crh-radius-lg); background: var(--crh-primary-soft); color: var(--primary); } .auth-icon svg { width: 24px; height: 24px; } /* "Voltar para o login" — link centralizado com seta. */ .auth-back { display: block; margin-top: 1.1rem; text-align: center; font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none; } .auth-back:hover { color: var(--primary); } /* ── Cards de ESTADO (11b "e-mail enviado" e 12b "ativação") ──────────────────────────────────── */ .auth-card { width: min(92vw, 360px); background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--crh-shadow-card); } .auth-card--status { padding: 1.75rem; text-align: center; } .auth-card h1 { font-size: 20px; margin: 0 0 .5rem; } /* Check de confirmação (11b): círculo 60px no par de SUCESSO. */ .auth-status-badge { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: var(--crh-radius-pill); background: var(--crh-success-soft); color: var(--crh-success); } .auth-status-badge svg { width: 28px; height: 28px; } .auth-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .auth-text strong { color: var(--text); } .auth-divider { height: 1px; margin: 1.1rem 0; background: var(--crh-border-light); } .auth-note { margin: 0 0 .6rem; font-size: 12.5px; color: var(--crh-text-subtle); } /* Botão SECUNDÁRIO do design system (Reenviar instruções) — desabilitado durante o contador. */ .auth-secondary { width: 100%; margin: 0; padding: 12px; background: var(--crh-primary-soft); border: 1px solid var(--crh-primary-border); border-radius: var(--crh-radius-md); font-weight: 700; font-size: 14px; color: var(--primary); cursor: pointer; transition: background 150ms ease; } .auth-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 14%, var(--crh-primary-soft)); } .auth-secondary:disabled { opacity: .55; cursor: not-allowed; } /* ── Ativação (12b): faixa navy no topo + selo sobreposto com borda da superfície. ────────────── */ /* ── Telas de STATUS dentro do split (repaginação §5) ─────────────────────────────────────────── * "E-mail enviado" e "Ativação" viviam em cards próprios (360px), o que fazia a tela SALTAR ao sair * do formulário (960×560 → 360×369). Agora usam o mesmo `.login`; só a copy do painel de marca muda. * Estas regras adaptam os componentes herdados daqueles cards ao painel do formulário. */ .login__status { text-align: center; /* Pilha com ritmo ÚNICO (pedido 2026-08-11 "melhor o posicionamento dos itens"): o gap governa o espaço entre selo → título → textos → CTA → links, em vez de margens avulsas desencontradas. */ display: flex; flex-direction: column; align-items: center; gap: 14px; } .login__status h1 { margin: 0; } .login__status .auth-cta { width: 100%; max-width: 320px; margin-top: 6px; } /* O selo pendia sobre a faixa navy do card antigo (margem negativa + borda da cor do card, que simulava um recorte). Sem a faixa, a margem o arrancaria para fora do painel e a borda viraria um anel opaco sobre o vidro. */ .login__status .auth-seal { margin-top: 0; border: 0; } .login__status h1 { font-size: 22px; } /* O espaçamento da pilha vem do `gap` do .login__status; aqui só o que o gap não cobre. */ .login__status .auth-text { margin: 0; } .login__status .auth-back { display: inline-block; margin: 0; } .auth-card--activation { overflow: hidden; text-align: center; } .auth-card__band { position: relative; height: 76px; overflow: hidden; background: var(--crh-navy); } .auth-seal { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-top: -36px; position: relative; border-radius: var(--crh-radius-pill); border: 4px solid var(--card-bg); } .auth-seal svg { width: 30px; height: 30px; } /* Selo de SUCESSO: gradiente marca→sucesso com brilho projetado (12a/12b). */ .auth-seal--success { background: linear-gradient(135deg, var(--crh-primary), var(--crh-success)); color: #ffffff; box-shadow: 0 20px 50px -18px rgba(31, 157, 107, 0.7); } .auth-seal--info { background: var(--crh-primary-soft); color: var(--primary); } .auth-seal--warn { background: var(--crh-warning-soft); color: var(--crh-warning); } .auth-seal--error { background: var(--crh-danger-soft); color: var(--crh-danger); } .auth-card__body { padding: 1.1rem 1.75rem 1.75rem; } /* Badge "Concluído" (pill de sucesso com dot). */ .auth-done-badge { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; padding: 5px 12px; border-radius: var(--crh-radius-pill); background: var(--crh-success-soft); font-size: 12px; font-weight: 700; color: var(--crh-success); } .auth-done-badge__dot { width: 6px; height: 6px; border-radius: var(--crh-radius-pill); background: var(--crh-success); } /* Próximos passos (12a): ícone 34px + rótulo, alinhados à esquerda dentro do card. */ .auth-steps { list-style: none; margin: 1.1rem 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; text-align: left; } .auth-step { display: flex; align-items: center; gap: .7rem; } .auth-step__icon { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; } .auth-step__icon svg { width: 17px; height: 17px; } .auth-step__icon--done { background: var(--crh-success-soft); color: var(--crh-success); } .auth-step__icon--mail { background: var(--crh-primary-soft); color: var(--primary); } .auth-step__icon--todo { background: var(--crh-neutral-soft); color: var(--crh-text-subtle); } .auth-step__label { font-size: 14px; color: var(--muted); } .auth-step__label--done { color: var(--text); font-weight: 600; } .auth-step__label--todo { color: var(--crh-text-subtle); } /* CTA primário do card (link com cara de botão do design system). */ .auth-cta { display: block; padding: 14px; border-radius: var(--crh-radius-md); background: var(--primary); text-align: center; font-weight: 700; font-size: 15px; color: #ffffff; text-decoration: none; transition: background 150ms ease; } .auth-cta:hover { background: var(--primary-hover); } /* Mobile (<900px): coluna única — painel de marca some, logo colorido entra no topo. * O breakpoint segue em 899px (e não nos 640px citados no handoff): abaixo de ~900px o card de * 960px não cabe lado a lado, então o split precisa desmanchar antes dos 640px. * A altura passa a AUTO só aqui (§5): no mobile o card empilha e cresce com o conteúdo — a medida * fixa vale para o desktop, onde é ela que evita o salto entre as telas. */ @media (max-width: 899px) { .login { width: min(94vw, 400px); height: auto; border-radius: 18px; } /* O painel do formulário não rola sozinho no mobile — quem rola é a página. */ .login__panel { overflow-y: visible; } .login__brand { display: none; } .login__panel { padding: 32px 24px; } .login__panel h1 { font-size: 22px; } .login__mobile-logo { display: flex; justify-content: center; margin-bottom: 1.25rem; } .login__mobile-logo .crh-brand__mark { height: 36px; } /* Cabeçalho mobile coeso (modelo 7b): título e subtítulo CENTRADOS sob o logo — sem isso o logo centrado sobre texto alinhado à esquerda parece "fora do eixo" (ilusão óptica). */ .login__panel h1, .login__lead { text-align: center; } /* Definir nova senha: os requisitos saem do painel navy (oculto) e entram abaixo dos campos. */ .reset-reqs { display: flex; flex-direction: column; gap: .45rem; margin: .9rem 0 0; padding: 0; list-style: none; } .reset-reqs li { display: flex; align-items: center; gap: .55rem; font-size: 13px; color: var(--muted); } .reset-reqs li svg { width: 15px; height: 15px; flex: none; } .reset-reqs li.met { color: var(--crh-success); } } /* ── Cena de vidro compartilhada (hoje usada pela APROVAÇÃO DE VAGA /aprovacao-vaga) ──────────── * A admissão /candidatura MIGROU para o namespace .admissao-* (handoff design_handoff_admissao, no fim * desta folha); .glass-scene/.admission/.card--glass permanecem para a página de aprovação. * Folha estática versionada (sem CSS inline em view — CLAUDE.md §7). Reusa as custom properties do * tema claro/escuro acima. `color-mix`/`backdrop-filter` são CSS nativo (sem NPM/build). */ .glass-scene { min-height: 100vh; width: 100%; padding: 2.5rem 1rem; background: radial-gradient(1100px 550px at 8% -10%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%), radial-gradient(900px 480px at 108% 8%, color-mix(in srgb, #8FB4EF 36%, transparent), transparent 55%), var(--bg); } .admission { width: min(94vw, 660px); margin: 0 auto; } .admission .card, .card--glass { width: 100%; background: color-mix(in srgb, var(--card-bg) 55%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); box-shadow: 0 10px 34px rgba(2, 6, 23, .22); } .admission h1 { font-size: 1.35rem; } .admission .lead { color: var(--muted); font-size: .9rem; margin: 0 0 1.25rem; } .admission fieldset { border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 12px; padding: .5rem 1.1rem 1.2rem; margin: 0 0 1.15rem; background: color-mix(in srgb, var(--card-bg) 30%, transparent); } .admission legend { font-weight: 600; padding: 0 .45rem; color: var(--text); } .doc-item { border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); border-radius: 10px; padding: .75rem .85rem .9rem; margin-top: .8rem; } .doc-item .doc-title { font-weight: 600; color: var(--text); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; } .req { color: var(--primary); font-weight: 700; } .admission input[type=checkbox] { width: auto; } .admission input[type=file] { width: 100%; padding: .5rem; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); margin-top: .35rem; } .consent { display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.1rem; color: var(--text); } .consent input { width: auto; margin-top: .15rem; } .sent { display: grid; gap: .4rem; text-align: center; padding: 1rem 0; } .sent .check { width: 3rem; height: 3rem; margin: 0 auto .3rem; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--primary); } @media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } } /* ── Admissão self-service (/candidatura) — repaginação (handoff design_handoff_admissao v1.0) ─── * Página ALARGADA (max 1080px) com nav de topo de vidro (reusa .portal-topbar de centralrh-portal.css, * carregada neste mesmo layout), seções em CARDS de vidro e campos em GRID multi-coluna (Endereço em * 6 colunas com spans). Namespace próprio `.admissao-*` — NÃO mexer em .glass-scene/.admission acima, * que a aprovação de vaga ainda usa. Tokens --crh-* (centralrh-tokens.css). */ .admissao-shell { min-height: 100vh; width: 100%; background: radial-gradient(1100px 550px at 8% -10%, color-mix(in srgb, var(--crh-primary) 28%, transparent), transparent 60%), radial-gradient(900px 480px at 108% 8%, color-mix(in srgb, var(--crh-blue-300) 36%, transparent), transparent 55%), var(--bg); } .admissao { max-width: 1080px; width: 100%; margin: 0 auto; padding: 32px 40px 56px; } .admissao__titulo { margin: 0; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 28px; color: var(--crh-text-strong); } .admissao__lead { margin: 6px 0 22px; color: var(--crh-text-muted); font-size: 14.5px; } /* Aviso de rascunho restaurado ("Continuamos de onde você parou") — informativo, acima do formulário. */ .admissao-aviso { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--crh-info); border-radius: 12px; background: var(--crh-info-soft); color: var(--crh-text-strong); font-size: 13.5px; line-height: 1.45; } .admissao-aviso__icone { display: flex; flex: none; color: var(--crh-info); } .admissao-aviso__icone > svg { width: 18px; height: 18px; } /* Seções em CARDS de vidro (não fieldset de borda fina). */ .admissao-card { background: var(--crh-glass); -webkit-backdrop-filter: blur(var(--crh-blur)); backdrop-filter: blur(var(--crh-blur)); border: 1px solid var(--crh-glass-border); border-radius: 16px; box-shadow: var(--crh-shadow-card); padding: 24px 26px; margin: 0 0 18px; } @supports not (backdrop-filter: blur(1px)) { .admissao-card { background: var(--crh-surface); } } .admissao-card__titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 800; font-size: 15px; color: var(--crh-text-strong); } .admissao-card__dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--crh-primary); } /* Grids das seções: 2 colunas (padrão) e 6 colunas (Endereço) com spans por campo. */ .admissao-grid { display: grid; gap: 14px 16px; } .admissao-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admissao-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .admissao-span-2 { grid-column: span 2; } .admissao-span-4 { grid-column: span 4; } .admissao-span-full { grid-column: 1 / -1; } /* Controles (tokens): label 13/700, input em vidro de recuo com foco primário. Labels de CAMPO são * `.admissao-field > label` — os labels-container (consent/dropzone) têm regra própria. */ .admissao-field > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--crh-text-strong); } .admissao .req { color: var(--crh-danger); font-weight: 700; } .admissao input[type="text"], .admissao input[type="email"], .admissao input[type="date"], .admissao input[type="number"], .admissao select, .admissao textarea { width: 100%; margin: 0; padding: 12px 14px; border: 1.5px solid var(--crh-hair); border-radius: 10px; background: var(--crh-glass-2); color: var(--crh-text-strong); font: inherit; font-size: 14px; } .admissao textarea { min-height: 96px; resize: vertical; } /* Select: some a seta nativa e entra um chevron próprio (heroicon mini, data-URI — cor literal porque * url() não aceita var(); tom = --crh-text-subtle claro/escuro). */ .admissao select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238A97AD'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; cursor: pointer; } .dark .admissao select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236E82A8'%3E%3Cpath fill-rule='evenodd' d='M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E"); } /* POPUP do select estilizado onde o navegador deixa (Chromium 135+, `appearance: base-select`): painel * elevado com raio/sombra do design system e opções com hover azulado — o dropdown cinza do SO vira um * menu da casa. Navegadores sem suporte ignoram o bloco e seguem no popup nativo (funcional). */ @supports selector(::picker(select)) { .admissao select { appearance: base-select; background-image: none; /* o chevron passa a ser o ::picker-icon (herda a cor do tema) */ } .admissao select::picker-icon { color: var(--crh-text-subtle); } .admissao select::picker(select) { appearance: base-select; margin-top: 6px; padding: 6px; background: var(--crh-surface-raised); border: 1px solid var(--crh-hair); border-radius: 12px; box-shadow: var(--crh-shadow-card); } .admissao select option { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--crh-text-strong); cursor: pointer; } .admissao select option:hover, .admissao select option:focus { background: var(--crh-primary-soft); color: var(--crh-primary); } .admissao select option:checked { font-weight: 700; color: var(--crh-primary); } .admissao select option::checkmark { color: var(--crh-primary); } } /* Checkbox no PADRÃO do design system (mesma caixa custom do `.login__remember`): 18px, raio 5, borda-fio; * ao marcar vira primário sólido com um "check" branco desenhado por borda (sem asset externo — CLAUDE.md * §4). Vale p/ o consentimento LGPD e os campos booleanos da admissão. */ .admissao input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; flex: none; display: inline-grid; place-items: center; border: 1.5px solid var(--crh-hair); border-radius: 5px; background: var(--crh-glass-2); cursor: pointer; transition: background 150ms ease, border-color 150ms ease; } .admissao input[type="checkbox"]:checked { background: var(--crh-primary); border-color: var(--crh-primary); } /* Tick oticamente centrado: caixa mais ALTA que larga (5.5×9.5) só com as bordas direita+baixo, * girada 45° → "✓" ereto e no centro do quadrado. O nudge -1px compensa o peso visual do traço * baixo (o antigo 9×5 girado -45° descia/escorregava para a esquerda). */ .admissao input[type="checkbox"]:checked::after { content: ''; width: 5.5px; height: 9.5px; margin-top: -1px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .admissao input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); } .admissao ::placeholder { color: var(--crh-text-subtle); } .admissao input:focus, .admissao select:focus, .admissao textarea:focus { outline: none; border-color: var(--crh-primary); box-shadow: var(--crh-focus-ring); } /* Erro de validação (pt-BR): mensagem 12px + borda no(s) controle(s) do campo inválido. */ .admissao .err { margin-top: 4px; color: var(--crh-danger); font-size: 12px; } .admissao-field--invalid input, .admissao-field--invalid select, .admissao-field--invalid textarea { border-color: var(--crh-danger); } /* Documento (dentro do card "Documentos", dois por linha no desktop). */ .admissao-doc__titulo { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--crh-text-strong); } .admissao-doc__campos { margin-bottom: 10px; } /* Dropzone: o input file INVISÍVEL cobre a área toda — clique abre o seletor e arrastar solta nele. */ .admissao-dropzone { position: relative; display: grid; place-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--crh-primary-border); border-radius: 12px; background: var(--crh-primary-soft); text-align: center; cursor: pointer; } .admissao-dropzone:hover { border-color: var(--crh-primary); } /* Arquivo enviado: confirma em VERDE (borda + fundo de sucesso, borda sólida) — feedback visual de que a * conferência recebeu o arquivo. O ícone/CTA acompanham o verde via regras abaixo. */ .admissao-dropzone--enviado { border-style: solid; border-color: var(--crh-success); background: var(--crh-success-soft); } .admissao-dropzone--enviado:hover { border-color: var(--crh-success); } .admissao-dropzone--enviado .admissao-dropzone__icone, .admissao-dropzone--enviado .admissao-dropzone__cta { color: var(--crh-success); } .admissao-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; } .admissao-dropzone__icone { width: 22px; height: 22px; color: var(--crh-primary); } .admissao-dropzone__cta { font-size: 14px; font-weight: 700; color: var(--crh-text-strong); overflow-wrap: anywhere; } .admissao-dropzone__hint { font-size: 12px; color: var(--crh-text-subtle); } /* Miolo do quadrado: ícone/arquivo empilhados e centrados (sempre grid — NÃO tem `wire:loading`, * senão o Livewire injeta `display:inline-block` inline e desmancha o empilhamento). */ .admissao-dropzone__conteudo { display: grid; place-items: center; gap: 4px; } /* Estado de ENVIO: overlay que cobre o miolo enquanto sobe (fica DENTRO do quadrado, não numa * linha solta abaixo). Nasce oculto (`display:none`); o `wire:loading.flex` do Livewire o revela * como flex durante o upload — dizer o display evita o `inline-block` padrão do Livewire. */ .admissao-dropzone__enviando { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--crh-primary-soft); } /* Círculo girando (bloco para width/height valerem num ). */ .admissao-dropzone__spinner { display: block; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--crh-primary-border); border-top-color: var(--crh-primary); animation: admissao-spin .7s linear infinite; } @keyframes admissao-spin { to { transform: rotate(360deg); } } /* Rodapé: consentimento LGPD à esquerda + "Enviar admissão" primário sólido à direita. */ .admissao-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .admissao-consent { flex: 1 1 320px; display: flex; gap: .6rem; align-items: center; margin: 0; color: var(--crh-text-strong); font-size: 13.5px; line-height: 1.4; cursor: pointer; } .admissao-consent > span { flex: 1; } .admissao-enviar { width: auto; margin: 0; padding: 12px 22px; border: 0; border-radius: 10px; background: var(--crh-primary); color: var(--primary-text); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background 150ms ease; } /* Lado direito do rodapé: selo "Salvo automaticamente" acima/ao lado do botão de envio. */ .admissao-footer__acao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .admissao-salvo { display: inline-flex; align-items: center; gap: 6px; color: var(--crh-text-muted); font-size: 13px; white-space: nowrap; } .admissao-salvo__icone { width: 16px; height: 16px; color: var(--crh-success); flex: none; } .admissao-enviar:hover { background: var(--crh-primary-hover); } .admissao-enviar:focus-visible { outline: none; box-shadow: var(--crh-focus-ring); } .admissao-enviar:disabled { background: var(--crh-primary-disabled); opacity: 1; cursor: not-allowed; } /* Sucesso (enviado): card de vidro estreito e centrado (reusa .card--glass + .sent). */ .admissao__done { max-width: 520px; margin: 10vh auto 0; border-radius: 16px; padding: 2rem 1.75rem; } /* Responsivo (≤720px, handoff): TODOS os grids viram 1 coluna (inclusive o de 6 do Endereço), * spans neutralizados, padding lateral 20px. */ @media (max-width: 720px) { .admissao { padding: 24px 20px 40px; } .admissao-grid--2, .admissao-grid--6 { grid-template-columns: 1fr; } .admissao-span-2, .admissao-span-4, .admissao-span-full { grid-column: auto; } }