/* * 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). */ :root { color-scheme: light; --bg: #f1f5f9; --card-bg: #ffffff; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --input-bg: #ffffff; --input-border: #cbd5e1; --primary: #3C94E6; --primary-text: #ffffff; --err: #dc2626; --toggle-bg: #ffffff; --toggle-border: #e2e8f0; } .dark { color-scheme: dark; --bg: #0f172a; --card-bg: #1e293b; --border: #334155; --text: #e2e8f0; --muted: #94a3b8; --input-bg: #0f172a; --input-border: #334155; --primary: #3C94E6; --primary-text: #ffffff; --err: #fca5a5; --toggle-bg: #1e293b; --toggle-border: #334155; } * { box-sizing: border-box; } body { font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--text); } .card { width: min(92vw, 380px); background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; } h1 { 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: 8px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font: inherit; } /* 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='%2364748b' 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='%2394a3b8' 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: 8px; background: var(--primary); color: var(--primary-text); font-weight: 600; cursor: pointer; } /* Botões primários de SUBMIT (ex.: "Enviar admissão", "Entrar") no MESMO padrão do painel Filament: * texto preto, bordinha e efeito "vidro" (brilho no topo, sombra, micro-elevação no hover). Escopado a * `type="submit"` — não afeta os utilitários (copiar/tema, que são `type="button"`). */ button[type="submit"] { color: var(--primary-text); border: 1px solid rgba(0, 0, 0, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 10px rgba(0, 0, 0, 0.12); transition: box-shadow 160ms ease, transform 120ms ease; } button[type="submit"]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } button[type="submit"]:active { transform: translateY(0); } .empresa { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; margin-top: .5rem; } .empresa button { width: auto; margin: 0; padding: .4rem .8rem; } .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) ─────────────────────────────────────────────── * Fixo no canto superior direito de toda página de auth. Mostra o ícone do tema-ALVO (sol no escuro, * lua no claro); a troca de ícone é por CSS conforme a classe `.dark` no . */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; display: inline-grid; place-items: center; border-radius: 9999px; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--muted); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; } /* Sol aparece só no escuro (clica → vai p/ claro); lua só no claro (clica → vai p/ escuro). */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } /* Atalhos do rodapé do card de login (Esqueci minha senha · Acesso administrativo): LADO A LADO, * separados do formulário por uma divisória sutil. Quando há só um atalho, ele fica centralizado. */ .auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .auth-links:has(> :only-child) { justify-content: center; } .auth-links a { color: var(--muted); font-size: .8rem; font-weight: 500; text-decoration: none; } .auth-links a:hover { color: var(--primary); text-decoration: underline; } /* ── Admissão self-service (link público /candidatura) — estilo "vidro" (glassmorphism) ───────── * 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, #3b82f6 30%, 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; } .uploading { color: var(--muted); font-size: .8rem; margin-top: .3rem; } .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; } }