/* ============================================================
* Coachecom — Auth screens v2 "Saturated Identity" (Marco 6.170)
* ============================================================
* Implementacao das telas portadas do Claude Design (Auth Screens v2).
* Layout split em todas as 4 telas (login / cadastro / esqueceu /
* trocar), hero saturado na cor primaria do owner a esquerda + form
* em surface tingida a direita.
*
* Theming white-label: a cor primaria do owner e injetada via custom
* properties `--brand-primary` (e --brand-hover/--brand-wash) no
* `:root` ou inline `style` na . CSS deriva o resto via
* `color-mix(in oklab, ...)`. Chrome neutro (cards/texto/bordas) fica
* slate; so o brand layer puxa a cor do tenant.
*
* Inline override por owner (esperado nas views):
*
*
* Estado inicial (Coachecom default):
* --brand-primary: #1d4ed8 (royal blue)
*/
/* ============================================================
* Tokens
* ============================================================ */
:root {
/* Neutrals — fixed across all themes (slate) */
--ink: #0b1220;
--ink-2: #475569;
--ink-3: #64748b; /* era #94a3b8 = 2.56:1 sobre branco, reprovava AA — ver tokens.css */
--ink-4: #cbd5e1;
--bg: #ffffff;
--bg-soft: #f8fafc;
--bg-softer: #f1f5f9;
--border: #e2e8f0;
--border-2: #cbd5e1;
/* Borda de controle de formulario — espelha --border-field de tokens.css
(auth nao carrega aquele arquivo). ~3:1 nos dois temas: o preenchimento
do campo e igual a superficie atras, entao so a borda delimita.
claro #8b95a6 = 3.02:1 | escuro #5a6a83 = 3.01:1 */
--border-field: #8b95a6;
--divider: #f1f5f9;
/* Semantic (fixed regardless of theme) */
/* red-700, espelha --danger de tokens.css (auth nao carrega aquele arquivo).
Era #dc2626 = 4.41:1 sobre --danger-bg, reprovava AA por pouco. */
--danger: #b91c1c;
--danger-bg: #fef2f2;
--danger-border: #fecaca;
/* Espelha --success de tokens.css. Estava em #059669 = 3.77:1 sobre branco
(e 3.5:1 sobre --success-bg), reprovando AA como texto em
.alert--success .alert-title e no icone da tela de confirmacao. */
--success: #047857;
--success-bg: #ecfdf5;
--warning: #b45309;
--warning-bg: #fffbeb;
/* Semântico como PREENCHIMENTO (fundo com texto branco). No escuro
--success/--danger viram pastéis claros — usados como fundo davam
1.5-1.9:1 no texto branco. Estes valores servem aos dois temas.
Espelha os --*-solid de tokens.css (auth não carrega aquele arquivo). */
--success-solid: #047857;
--danger-solid: #dc2626;
/* Strength meter discrete colors */
/* Órfãos: nenhuma regra consome estes tokens. Quem pinta o medidor é o
auth.js, que injeta --strength-color inline (ver passwordStrength()).
Mantidos em sincronia com o JS só para não induzir a erro quem ler. */
--pw-weak: #ef4444;
--pw-fair: #ea580c;
--pw-good: #059669;
/* Type */
--font-sans: "Inter", system-ui, -apple-system, sans-serif;
--font-display: "Inter Tight", "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Shadow system */
--shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04);
--shadow-pop: 0 4px 6px -1px rgba(11,18,32,.10), 0 2px 4px -2px rgba(11,18,32,.08);
/* Marco 6.174 — White Label Manual §09: tokens unificados.
--owner-accent é o token canônico (owner sobrescreve via inline
style no ). --brand-primary virou alias pra preservar
compat com componentes que ainda referenciam o nome antigo. */
--owner-accent: #1d4ed8;
--owner-bg: #003e73;
--owner-wash: color-mix(in oklab, var(--owner-accent) 8%, #fff 92%);
--owner-dot: #f97316;
--brand-primary: var(--owner-accent);
/* Accent como TEXTO. No claro = o próprio accent (mudança visual zero);
no escuro o bloco dark levanta a luminosidade. Espelha --primary-fg
de tokens.css, porque as views de auth não carregam aquele arquivo. */
--primary-fg: var(--brand-primary);
--brand-hover: color-mix(in oklab, var(--owner-accent) 88%, #000 12%);
--brand-active: color-mix(in oklab, var(--owner-accent) 75%, #000 25%);
--brand-wash: var(--owner-wash);
--brand-wash-2: color-mix(in oklab, var(--owner-accent) 15%, #fff 85%);
/* Computed shadow rings (depend on brand) */
--shadow-input-focus: 0 0 0 3px var(--brand-wash);
--shadow-input-error: 0 0 0 3px rgba(220,38,38,.12);
/* v2 tinted form surfaces (light wash do brand) */
--form-surface: color-mix(in oklab, var(--brand-wash) 65%, #fff);
--form-surface-2: color-mix(in oklab, var(--brand-wash) 35%, #fff);
/* Hero gradient endpoints (darkening do brand-primary) */
--hero-from: color-mix(in oklab, var(--brand-primary) 96%, #000 4%);
--hero-to: color-mix(in oklab, var(--brand-primary) 70%, #000 30%);
}
/* ============================================================
* DARK MODE (Fase 0) — espelho do bloco de tokens.css
* As views standalone de auth NÃO carregam tokens.css, por isso o
* bloco dark é replicado aqui com os valores próprios deste arquivo.
* O hero (painel de marca à esquerda) MANTÉM a cor do owner; só o
* chrome neutro + a form-surface (direita) escurecem.
* Calibração completa das telas de auth = Fase 3.
* ============================================================ */
/* Calibragem 2026-08-15 — em sincronia com tokens.css. O contraste
original (--ink 16.3:1 sobre --bg) causava halation; a faixa
confortável no escuro é 10-13:1 e o canvas não encosta no preto.
Ver o bloco equivalente em tokens.css pra racional completo. */
:root[data-theme="dark"] {
color-scheme: dark;
--ink:#dbe3ee; --ink-2:#adbacd; --ink-3:#8896aa; --ink-4:#5d6b80;
--bg:#161f2e; --bg-soft:#0d1522; --bg-softer:#212c3d;
--border:#334156; --border-2:#4b5b73; --divider:#1c2634; --border-field:#5a6a83;
--danger:#fca5a5; --danger-bg:#3a1d20; --danger-border:#7f1d1d;
--success:#6ee7b7; --success-bg:#152e24;
--warning:#fcd34d; --warning-bg:#33280e;
--shadow-card: 0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.34);
/* --owner-wash é 8% accent + 92% BRANCO no :root claro. Sem override ele
vazava quase-branco no escuro — e --brand-wash é alias dele, usado como
fundo direto (.v2-confirm__badge--info, pill do hero) e no anel de foco
dos inputs. Mesma derivação do bloco dark do shell em tokens.css. */
--owner-wash: color-mix(in oklab, var(--owner-accent) 22%, #161f2e 78%);
--brand-wash-2: color-mix(in oklab, var(--owner-accent) 32%, #161f2e 68%);
--form-surface: color-mix(in oklab, var(--brand-wash) 20%, #161f2e);
--form-surface-2: color-mix(in oklab, var(--brand-wash) 12%, #161f2e);
--primary-fg: color-mix(in oklab, var(--owner-accent) 42%, #fff 58%);
}
@supports (color: oklch(from red l c h)) {
:root[data-theme="dark"] {
--primary-fg: oklch(from var(--owner-accent) max(l, 0.72) c h);
}
}
/* ============================================================
* Base
* ============================================================ */
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg-soft);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* `:not(.btn)` porque vários botões de ação são (ex.: "Continuar agora",
"Voltar ao login", "Usar outro e-mail"). Este seletor tem especificidade
0,1,2 e vencia o `.btn-primary { color:#fff }` (0,1,0), repintando o rótulo
com a cor de LINK sobre o fundo da marca — invisível nos dois temas.
Excluindo os .btn aqui, cada variante de botão volta a mandar na própria
cor de texto. */
body.auth-page a:not(.btn) {
color: var(--primary-fg);
text-decoration: none;
transition: color .15s ease-out;
}
body.auth-page a:not(.btn):hover {
color: var(--brand-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Dark: os links do lado do FORM usam --brand-primary (accent do owner), que
fica escuro demais sobre o fundo escuro (baixo contraste). Clareia mantendo o
tom da marca via color-mix. Só o lado do form — o hero (azul saturado) tem
links brancos próprios. Escopado a .v2-form-col p/ não vazar pro hero.
`:not(.btn)` é obrigatório: os botões de ação também são dentro da
coluna do form (ex.: "Continuar agora", "Voltar ao login"). Sem a exclusão
este seletor (0,3,1) vence o do próprio botão (0,2,0) e repinta o rótulo
com a cor de LINK sobre o fundo --brand-primary — dava 2.65:1. */
:root[data-theme="dark"] .v2-form-col a:not(.btn),
:root[data-theme="dark"] .v2-form-col a:not(.btn):visited {
color: color-mix(in oklab, var(--brand-primary) 55%, #fff 45%);
}
:root[data-theme="dark"] .v2-form-col a:not(.btn):hover {
color: color-mix(in oklab, var(--brand-primary) 40%, #fff 60%);
}
.auth-page .hidden { display: none !important; }
/* ============================================================
* Stage — full-page split (used by all 4 screens)
* ============================================================ */
.auth-page .v2-stage {
min-height: 100vh;
display: grid;
grid-template-columns: 1.05fr 1fr;
background: var(--form-surface);
position: relative;
overflow: hidden;
}
.auth-page .v2-stage--wide-form { grid-template-columns: 1fr 1.05fr; }
@media (max-width: 900px) {
.auth-page .v2-stage,
.auth-page .v2-stage--wide-form {
grid-template-columns: 1fr;
grid-template-rows: 220px 1fr;
}
}
/* ============================================================
* HERO panel (left side — saturated brand color)
* ============================================================ */
.v2-hero {
position: relative;
isolation: isolate;
background: linear-gradient(140deg, var(--hero-from) 0%, var(--hero-to) 100%);
color: #fff;
padding: 40px 56px 56px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
min-height: 100%;
}
/* Layer 1 — soft mesh (radial highlights at corners) */
.v2-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(820px 640px at 85% -25%, color-mix(in oklab, #fff 18%, transparent), transparent 60%),
radial-gradient(640px 480px at -10% 110%, color-mix(in oklab, #000 24%, transparent), transparent 60%);
z-index: 0;
pointer-events: none;
}
/* Layer 2 — fine dot grid */
.v2-hero::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
background-size: 22px 22px;
background-position: 0 0;
opacity: .55;
mask-image: radial-gradient(ellipse at 70% 30%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 30%, transparent 75%);
z-index: 0;
pointer-events: none;
}
/* Layer 3 — oversized decorative mark (sailboat-like SVG) */
.v2-hero__mark {
position: absolute;
right: -120px;
bottom: -120px;
width: 560px;
height: 560px;
color: #fff;
opacity: .07;
z-index: 1;
pointer-events: none;
transform: rotate(-12deg);
}
.v2-hero__mark svg { width: 100%; height: 100%; }
/* Layer 4 — topographic lines bottom-left */
.v2-hero__lines {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .35;
mask-image: linear-gradient(160deg, transparent 0%, transparent 40%, #000 70%, transparent 100%);
-webkit-mask-image: linear-gradient(160deg, transparent 0%, transparent 40%, #000 70%, transparent 100%);
}
.v2-hero__lines svg { width: 100%; height: 100%; }
/* Content layer */
.v2-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 32px;
}
.v2-hero__top {
display: flex;
align-items: center;
justify-content: space-between;
}
.v2-hero__logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
}
.v2-hero__logo:hover { text-decoration: none; color: #fff; }
.v2-hero__logo img {
height: 44px;
width: auto;
max-width: 240px;
display: block;
object-fit: contain;
/* Logo no hero precisa de contraste em fundo saturado: assume que o
owner forneceu logo_white (clara) ou usa fallback texto. */
}
.v2-hero__logo-mark {
width: 38px;
height: 38px;
border-radius: 9px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.v2-hero__logo-text {
display: flex;
flex-direction: column;
line-height: 1.15;
color: #fff;
}
.v2-hero__logo-text strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.2px;
}
.v2-hero__logo-text span {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .14em;
opacity: .7;
}
.v2-hero__meta {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.6);
display: flex;
align-items: center;
gap: 12px;
}
.v2-hero__meta span:not(:last-child)::after {
content: "";
display: inline-block;
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,.35);
margin-left: 12px;
vertical-align: middle;
}
/* Middle — headline */
.v2-hero__body {
display: flex;
flex-direction: column;
gap: 22px;
margin: 24px 0;
}
.v2-hero__eyebrow {
font-family: var(--font-mono);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,.78);
display: inline-flex;
align-items: center;
gap: 10px;
}
.v2-hero__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: rgba(255,255,255,.45);
}
.v2-hero__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 56px;
line-height: 1.05;
letter-spacing: -1.6px;
color: #fff;
margin: 0;
max-width: 560px;
text-wrap: balance;
}
.v2-hero__title .rotator {
display: inline-block;
position: relative;
color: #fff;
font-style: italic;
font-weight: 700;
padding: 0 0.08em;
isolation: isolate;
text-shadow: 0 2px 18px rgba(0,0,0,.18);
animation: rotator-pop .55s cubic-bezier(.2,.7,.2,1) both;
}
.v2-hero__title .rotator::after {
content: "";
position: absolute;
left: 0;
right: 4%;
bottom: 6px;
height: 0.18em;
border-radius: 3px;
background: linear-gradient(90deg,
color-mix(in oklab, #fff 75%, transparent) 0%,
color-mix(in oklab, var(--brand-wash) 60%, transparent) 100%);
z-index: -1;
}
@keyframes rotator-pop {
0% { transform: translateY(8px); opacity: 0; }
60% { opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.v2-hero__lead {
font-size: 17px;
line-height: 1.55;
color: rgba(255,255,255,.85);
max-width: 460px;
margin: 0;
}
/* Optional ordered steps list in the hero (ex: processo seletivo "Fase 2"). */
.v2-hero__list {
margin: 22px 0 0;
padding-left: 20px;
max-width: 460px;
color: rgba(255,255,255,.82);
font-size: 14.5px;
line-height: 1.5;
}
.v2-hero__list li {
margin-bottom: 10px;
padding-left: 4px;
}
.v2-hero__list li::marker {
color: rgba(255,255,255,.55);
font-variant-numeric: tabular-nums;
}
/* Bottom info strip */
.v2-hero__strip {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
max-width: 480px;
}
.v2-hero__strip svg {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #fff;
opacity: .85;
}
.v2-hero__strip-text {
font-size: 13px;
line-height: 1.45;
color: rgba(255,255,255,.85);
}
.v2-hero__strip-text strong { color: #fff; font-weight: 600; }
.v2-hero__foot {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.6);
display: flex;
align-items: center;
gap: 10px;
margin-top: 18px;
}
.v2-hero__foot-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,.6);
box-shadow: 0 0 0 4px rgba(255,255,255,.1);
}
@media (max-width: 1240px) {
.v2-hero { padding: 36px 40px 40px; }
.v2-hero__title { font-size: 44px; letter-spacing: -1.2px; }
}
@media (max-width: 1000px) {
.v2-hero { padding: 28px 28px 32px; }
.v2-hero__title { font-size: 36px; letter-spacing: -1px; }
.v2-hero__lead { font-size: 15px; }
.v2-hero__strip { padding: 10px 12px; font-size: 12.5px; }
}
@media (max-width: 900px) {
.v2-hero {
padding: 20px 22px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.v2-hero__inner {
flex-direction: row;
align-items: center;
gap: 16px;
height: auto;
width: 100%;
}
.v2-hero__body, .v2-hero__strip, .v2-hero__foot, .v2-hero__meta { display: none; }
.v2-hero__mark { display: none; }
}
/* ============================================================
* FORM panel (right side — tinted off-white)
* ============================================================ */
.v2-form-col {
position: relative;
display: flex;
flex-direction: column;
background:
radial-gradient(800px 600px at 100% -10%, color-mix(in oklab, var(--brand-primary) 8%, transparent), transparent 60%),
radial-gradient(600px 500px at -10% 100%, color-mix(in oklab, var(--brand-primary) 6%, transparent), transparent 65%),
var(--form-surface);
min-height: 100%;
}
.v2-form-col__top {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 28px 40px 0;
min-height: 64px;
font-size: 13.5px;
color: var(--ink-2);
}
.v2-form-col__top a {
font-weight: 600;
color: var(--primary-fg);
}
.v2-form-col__top-prefix { margin-right: 4px; }
.v2-form-col__body {
flex: 1;
display: grid;
place-items: center;
padding: 24px 40px 64px;
}
@media (max-width: 1000px) {
.v2-form-col__top { padding: 20px 28px 0; }
.v2-form-col__body { padding: 20px 28px 48px; }
}
@media (max-width: 640px) {
.v2-form-col__top { padding: 16px 22px 0; }
.v2-form-col__body { padding: 20px 22px 48px; }
}
/* Card on form surface */
.v2-card {
width: 100%;
max-width: 460px;
background: var(--bg);
border: 1px solid color-mix(in oklab, var(--brand-primary) 8%, var(--border));
border-radius: 16px;
padding: 38px;
box-shadow:
0 1px 2px rgba(15,23,42,.06),
0 10px 30px -8px color-mix(in oklab, var(--brand-primary) 22%, transparent),
0 24px 48px -12px rgba(15,23,42,.08);
}
.v2-card--wider { max-width: 500px; }
.v2-card--centered { text-align: center; }
.v2-card--centered .form-title,
.v2-card--centered .form-subtitle { text-align: center; }
@media (max-width: 640px) {
.v2-card { padding: 28px 24px; border-radius: 14px; }
}
.v2-card__back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ink-2);
margin-bottom: 18px;
transition: color .15s ease-out;
}
.v2-card__back:hover { color: var(--ink); text-decoration: none; }
.v2-card__back svg { width: 14px; height: 14px; }
/* ============================================================
* Form heading
* ============================================================ */
.form-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.6px;
color: var(--ink);
margin: 0 0 8px;
}
.form-subtitle {
font-size: 14.5px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 28px;
}
.form-subtitle strong { color: var(--ink); font-weight: 600; }
/* ============================================================
* Field — input + label + error/hint
* ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
font-size: 13px;
font-weight: 500;
color: var(--ink);
display: flex;
align-items: center;
gap: 2px;
}
.field-label .req { color: var(--danger); margin-left: 2px; }
.field-input-wrap {
position: relative;
display: flex;
align-items: stretch;
}
.field-input {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid var(--border-field);
border-radius: 10px;
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 14.5px;
transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
outline: none;
}
.field-input::placeholder { color: var(--ink-3); }
/* Autofill (Chrome/Safari): o navegador pinta o campo preenchido com bg próprio
(azul-claro #e8f0fe), ignorando o CSS — fica gritante no dark. O box-shadow
inset cobre com a cor do tema e o text-fill força o texto; funciona nos 2
temas porque usa os tokens (var(--bg)/(--ink)). */
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
-webkit-text-fill-color: var(--ink) !important;
caret-color: var(--ink);
}
.field-input:hover:not(:focus):not(:disabled) { border-color: var(--border-2); }
.field-input:focus {
border-color: var(--brand-primary);
box-shadow: var(--shadow-input-focus);
}
.field-input:disabled,
.field-input[readonly] {
background: var(--bg-soft);
color: var(--ink-2);
cursor: not-allowed;
}
.field[data-state="error"] .field-input {
border-color: var(--danger);
background: color-mix(in srgb, var(--danger-bg) 50%, var(--bg));
}
.field[data-state="error"] .field-input:focus { box-shadow: var(--shadow-input-error); }
.field-error {
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--danger);
font-weight: 500;
margin-top: 0;
display: none;
}
.field-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.field[data-state="error"] .field-error { display: flex; }
.field-hint {
font-size: 12.5px;
color: var(--ink-2);
line-height: 1.5;
}
/* Toggle eye button inside password input */
.field-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: var(--ink-3);
border-radius: 8px;
cursor: pointer;
display: grid;
place-items: center;
transition: color .15s ease-out, background-color .15s ease-out;
}
.field-toggle:hover { color: var(--ink); background: var(--bg-soft); }
.field-toggle svg { width: 18px; height: 18px; }
.field-input-wrap:has(.field-toggle) .field-input { padding-right: 48px; }
/* Phone prefix */
.field-prefix {
position: absolute;
left: 1px;
top: 1px;
bottom: 1px;
display: flex;
align-items: center;
padding: 0 12px;
border-right: 1px solid var(--border);
font-size: 14px;
color: var(--ink);
background: var(--bg-soft);
border-radius: 9px 0 0 9px;
gap: 6px;
pointer-events: none;
z-index: 1;
}
.field-input-wrap:has(.field-prefix) .field-input { padding-left: 96px; }
/* Grid 2-col fields (firstName + lastName) */
.field-row,
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 540px) {
.field-row,
.field-grid { grid-template-columns: 1fr; }
}
.field-stack { display: flex; flex-direction: column; gap: 16px; }
.field-stack--tight { gap: 14px; }
/* ============================================================
* Alert (error / success / info) — semantic, not themed
* ============================================================ */
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1px solid;
border-left-width: 3px;
border-radius: 10px;
position: relative;
font-size: 13.5px;
line-height: 1.5;
margin-bottom: 20px;
}
.alert.hidden { display: none; }
.alert-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 999px;
display: grid;
place-items: center;
font-weight: 700;
font-size: 13px;
}
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; color: var(--ink); }
.alert-message { color: var(--ink-2); margin-top: 2px; }
.alert-close {
appearance: none;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 6px;
margin: -2px -4px 0 0;
font-size: 18px;
line-height: 1;
}
.alert-close:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.alert.error,
.alert--error {
background: var(--danger-bg);
border-color: var(--danger-border);
border-left-color: var(--danger);
}
.alert.error .alert-icon,
.alert--error .alert-icon { background: var(--danger-solid); color: #fff; }
.alert.error .alert-title,
.alert--error .alert-title { color: var(--danger); }
.alert.success,
.alert--success {
background: var(--success-bg);
border-color: #a7f3d0;
border-left-color: var(--success);
}
.alert.success .alert-icon,
.alert--success .alert-icon { background: var(--success-solid); color: #fff; }
.alert.success .alert-title,
.alert--success .alert-title { color: var(--success); }
/* ============================================================
* Buttons
* ============================================================ */
.btn {
appearance: none;
border: 0;
font: inherit;
font-weight: 600;
font-size: 14.5px;
height: 48px;
padding: 0 18px;
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
white-space: nowrap;
user-select: none;
text-decoration: none;
position: relative;
width: 100%;
}
.btn:disabled,
.btn[aria-busy="true"] { opacity: .65; cursor: not-allowed; }
.btn:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
.btn-primary,
.btn--primary {
background: var(--brand-primary);
color: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.08);
}
.btn-primary:hover:not(:disabled):not([aria-busy="true"]),
.btn--primary:hover:not(:disabled):not([aria-busy="true"]) {
background: var(--brand-hover);
color: #fff;
text-decoration: none;
}
.btn-primary:active:not(:disabled),
.btn--primary:active:not(:disabled) { background: var(--brand-active); }
.btn-secondary,
.btn--secondary {
background: var(--bg);
color: var(--ink);
border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled),
.btn--secondary:hover:not(:disabled) {
background: var(--bg-soft);
border-color: var(--border-2);
color: var(--ink);
text-decoration: none;
}
/* Spinner inside button (shown on submit via aria-busy) */
.btn-spinner {
width: 18px;
height: 18px;
animation: spin 1s linear infinite;
display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-label { display: inline-flex; align-items: center; gap: 6px; }
.btn[aria-busy="true"] .btn-label { opacity: 0; }
.btn[aria-busy="true"] .btn-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
}
/* ============================================================
* Loading overlay (Marco 6.226 — "Proposta B")
* ------------------------------------------------------------
* Exibido no submit do login (via auth-loading.is-active). Cobre
* a tela inteira com a surface tingida + blur (frosted glass,
* consistente com o backdrop dos modais do sistema) e um spinner
* grande na cor do owner. Cobre o "tempo morto" da navegação até
* a próxima tela pintar. Neutros via tokens → adapta ao dark.
* ============================================================ */
.auth-loading {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--bg) 78%, transparent);
backdrop-filter: blur(10px) saturate(1.05);
-webkit-backdrop-filter: blur(10px) saturate(1.05);
opacity: 0;
visibility: hidden;
transition: opacity .28s ease-out, visibility .28s ease-out;
}
.auth-loading.is-active {
opacity: 1;
visibility: visible;
}
.auth-loading__box {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 24px;
transform: translateY(8px);
transition: transform .28s ease-out;
}
.auth-loading.is-active .auth-loading__box { transform: none; }
.auth-loading__spinner {
width: 46px;
height: 46px;
color: var(--primary-fg);
animation: spin 1s linear infinite;
}
.auth-loading__title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--ink);
letter-spacing: -.01em;
}
.auth-loading__sub {
font-size: 13.5px;
color: var(--ink-2);
margin-top: -6px;
}
@media (prefers-reduced-motion: reduce) {
.auth-loading { transition: opacity .01ms linear; }
.auth-loading__box { transform: none; transition: none; }
.auth-loading__spinner { animation-duration: 1.6s; }
}
.btn-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 4px;
}
@media (max-width: 480px) {
.btn-row { grid-template-columns: 1fr; }
}
/* Actions row (e.g. "Esqueci a senha") */
.actions-row {
display: flex;
justify-content: flex-end;
margin-top: -4px;
}
.actions-row a {
font-size: 13px;
font-weight: 500;
color: var(--primary-fg);
}
/* ============================================================
* Password strength meter
* ============================================================ */
.pw-strength { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pw-strength-bars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.pw-strength-bar {
height: 4px;
border-radius: 2px;
background: var(--bg-softer);
transition: background-color .25s ease-out;
}
/* Marco 6.226 — fix: o auth.js marca as barras preenchidas com a classe
.on e injeta a cor da força via --strength-color (vermelho→laranja→verde).
Antes o CSS esperava .is-on + data-level (que o JS nunca setava), então as
barras ficavam sempre cinzas. Alinhado ao contrato real do auth.js. */
.pw-strength-bar.on { background: var(--strength-color, var(--bg-softer)); }
.pw-strength[data-empty="true"] .pw-strength-bar { background: var(--bg-softer); }
.pw-strength-label {
font-size: 11.5px;
font-weight: 500;
color: var(--ink-2);
}
/* ============================================================
* Radio group (sexo)
* ============================================================ */
.radio-group {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}
.radio-option {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg);
cursor: pointer;
transition: all .15s ease-out;
font: inherit;
font-size: 14px;
color: var(--ink);
}
.radio-option:hover { border-color: var(--border-2); }
.radio-option.is-selected {
background: var(--brand-wash);
border-color: var(--brand-primary);
color: var(--primary-fg);
font-weight: 600;
}
/* ============================================================
* Checkbox (termos de uso)
*
* ESCOPADO por :has(.checkbox-box). auth.css nasceu pras telas
* standalone de login/cadastro, mas o template_sistema.php e o
* template_empresa.php carregam ele em TODA pagina logada — e o
* `.checkbox input { opacity: 0 }` sem escopo apagava o input de
* todo `label.checkbox` legacy (smartadmin/BS3) do sistema, que usa
* ` + ` em vez do `` daqui.
* O nao e' mais desenhado por CSS nenhum desde o redesign V3,
* entao a caixa sumia de vez: sobrava so' o texto do label.
* Foi o que quebrou o modal de acoes automaticas das Turmas (#46);
* o mesmo markup aparece em sessoes, cadastro de candidato e no
* modal de convite de pesquisas.
* ============================================================ */
.checkbox:has(.checkbox-box) {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13.5px;
color: var(--ink);
line-height: 1.55;
}
.checkbox input:has(+ .checkbox-box) { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1.5px solid var(--border-2);
background: var(--bg);
display: grid;
place-items: center;
flex-shrink: 0;
margin-top: 1px;
transition: all .15s ease-out;
}
.checkbox-box svg {
width: 12px;
height: 12px;
color: #fff;
opacity: 0;
transition: opacity .12s ease-out;
}
.checkbox input:checked + .checkbox-box {
background: var(--brand-primary);
border-color: var(--brand-primary);
}
.checkbox input:checked + .checkbox-box svg { opacity: 1; }
.checkbox a { font-weight: 500; }
/* ============================================================
* State icon (recovery success / change password)
* v2: square com gradient, sombra colorida
* ============================================================ */
.v2-state-icon,
.state-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-hover));
color: #fff;
display: grid;
place-items: center;
margin: 0 auto 22px;
box-shadow:
0 10px 24px -6px color-mix(in oklab, var(--brand-primary) 55%, transparent),
inset 0 1px 0 rgba(255,255,255,.25);
}
.v2-state-icon svg,
.state-icon svg { width: 28px; height: 28px; stroke: #fff; }
/* ============================================================
* Help card (recovery "Nao chegou?" block)
* ============================================================ */
.help-card {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-2);
text-align: left;
margin-bottom: 22px;
}
.help-card strong { color: var(--ink); font-weight: 600; }
/* Support divider (rodapé do forgot com email do owner) */
.support-divider,
.divider-block {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--divider);
font-size: 12.5px;
color: var(--ink-2);
text-align: center;
line-height: 1.55;
}
/* Back link (em modo form do forgot — chevron + "Voltar ao login") */
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ink-2);
margin-bottom: 18px;
transition: color .15s ease-out;
}
.back-link:hover { color: var(--ink); text-decoration: none; }
.back-link svg { width: 14px; height: 14px; }
/* ============================================================
* Marco 6.223 — Language Switcher
* ============================================================
* Pílula compacta no topo da .v2-form-col (canto superior esquerdo).
* Match com mockup Claude Design Auth Screens v2 (styles-v2.css:433+).
*
* Tokens reutilizados do auth.css existente: --border, --border-2, --bg,
* --bg-softer, --ink, --ink-2, --ink-3, --brand-primary, --brand-wash,
* --brand-active, --divider, --shadow-input-focus, --font-sans, --font-mono.
* Caem em valores hardcoded sensíveis se não definidos (defensivo).
*/
.lang-switch { position: relative; display: inline-block; }
.lang-switch__trigger {
appearance: none;
border: 1px solid var(--border, #e3e8ef);
background: var(--bg, #fff);
border-radius: 999px;
padding: 5px 10px 5px 6px;
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 12.5px/1 var(--font-sans, system-ui, sans-serif);
color: var(--ink, #0f172a);
cursor: pointer;
transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.lang-switch__trigger:hover {
border-color: var(--border-2, #cbd5e1);
}
.lang-switch__trigger:focus-visible {
outline: none;
border-color: var(--brand-primary, #1d4ed8);
box-shadow: var(--shadow-input-focus, 0 0 0 3px rgba(29,78,216,.18));
}
.lang-switch__flag {
width: 22px;
height: 15px;
border-radius: 3px;
overflow: hidden;
display: inline-block;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
flex-shrink: 0;
}
.lang-switch__flag svg { display: block; width: 100%; height: 100%; }
.lang-switch__code {
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-2, #475569);
}
.lang-switch__chev {
width: 13px;
height: 13px;
color: var(--ink-3, #64748b);
transition: transform .18s ease-out;
}
.lang-switch__chev.is-open { transform: rotate(180deg); }
/* Menu (dropdown) */
.lang-switch__menu {
position: absolute;
top: calc(100% + 8px);
min-width: 240px;
background: var(--bg, #fff);
border: 1px solid var(--border, #e3e8ef);
border-radius: 12px;
box-shadow:
0 1px 2px rgba(15,23,42,.06),
0 12px 28px -8px rgba(15,23,42,.18),
0 24px 48px -16px rgba(15,23,42,.10);
padding: 8px;
z-index: 30;
animation: lang-pop .14s cubic-bezier(.2,.7,.2,1);
transform-origin: top left;
}
.lang-switch--align-right .lang-switch__menu { right: 0; transform-origin: top right; }
.lang-switch--align-left .lang-switch__menu { left: 0; transform-origin: top left; }
.lang-switch__menu[hidden] { display: none; }
@keyframes lang-pop {
from { opacity: 0; transform: translateY(-4px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.lang-switch__menu-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px 10px;
border-bottom: 1px solid var(--divider, #e3e8ef);
margin-bottom: 6px;
font-family: var(--font-mono, "JetBrains Mono", monospace);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--ink-3, #64748b);
}
.lang-switch__menu-globe { width: 14px; height: 14px; color: var(--ink-3, #64748b); }
.lang-switch__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
/* ============================================================
* Seleção de idioma — capa "Imersivo" (redesign Marco 6.226)
* ============================================================
* Pré-tela de escolha de idioma dos fluxos externos (turmas, generic_link,
* processo seletivo, convites). Capa full-bleed saturada na cor do owner:
* reusa --hero-from/--hero-to + as 4 camadas decorativas e a keyframe
* rotator-pop do hero. View standalone: views/select_system_language.php.
* Regras prefixadas com .langsel-page pra vencer `body.auth-page a` nos chips.
*/
.langsel-page { color: #fff; }
.langsel-page .langsel-stage {
position: relative;
isolation: isolate;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
background: linear-gradient(140deg, var(--hero-from), var(--hero-to));
}
/* Layer 1 — mesh */
.langsel-page .langsel-stage::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 700px at 82% -20%, color-mix(in oklab, #fff 20%, transparent), transparent 60%),
radial-gradient(700px 560px at -8% 112%, color-mix(in oklab, #000 26%, transparent), transparent 60%);
z-index: 0;
pointer-events: none;
}
/* Layer 2 — dot grid */
.langsel-page .langsel-stage::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
background-size: 24px 24px;
opacity: .5;
-webkit-mask-image: radial-gradient(ellipse at 72% 24%, #000 26%, transparent 72%);
mask-image: radial-gradient(ellipse at 72% 24%, #000 26%, transparent 72%);
z-index: 0;
pointer-events: none;
}
.langsel-page .langsel-deco-mark {
position: absolute;
right: -160px;
bottom: -160px;
width: 680px;
height: 680px;
color: #fff;
opacity: .06;
z-index: 1;
transform: rotate(-12deg);
pointer-events: none;
}
.langsel-page .langsel-deco-mark svg { width: 100%; height: 100%; }
.langsel-page .langsel-deco-lines {
position: absolute;
inset: 0;
z-index: 1;
opacity: .3;
pointer-events: none;
-webkit-mask-image: linear-gradient(160deg, transparent 0%, transparent 38%, #000 72%, transparent 100%);
mask-image: linear-gradient(160deg, transparent 0%, transparent 38%, #000 72%, transparent 100%);
}
.langsel-page .langsel-deco-lines svg { width: 100%; height: 100%; }
/* Top bar — logo do owner + meta */
.langsel-page .langsel-topbar {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 40px;
}
.langsel-page .langsel-brand { display: inline-flex; align-items: center; gap: 12px; }
.langsel-page .langsel-brand-img { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.langsel-page .langsel-brand-fallback { display: inline-flex; align-items: center; gap: 11px; }
.langsel-page .langsel-brand-mark {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.24);
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 700; font-size: 18px; color: #fff;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.langsel-page .langsel-brand-text strong {
font-family: var(--font-display);
font-weight: 700; font-size: 16px; letter-spacing: -.2px; color: #fff;
}
.langsel-page .langsel-meta {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
color: rgba(255,255,255,.6);
}
/* Centro — headline multilíngue + lead */
.langsel-page .langsel-wrap {
position: relative;
z-index: 3;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 24px 60px;
}
.langsel-page .langsel-eyebrow {
font-family: var(--font-mono);
font-size: 12px; text-transform: uppercase; letter-spacing: .18em;
color: rgba(255,255,255,.78);
display: inline-flex; align-items: center; gap: 11px;
margin-bottom: 18px;
}
.langsel-page .langsel-eyebrow::before,
.langsel-page .langsel-eyebrow::after {
content: ""; width: 26px; height: 1px; background: rgba(255,255,255,.4);
}
.langsel-page .langsel-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(34px, 6vw, 60px);
line-height: 1.04;
letter-spacing: -1.6px;
margin: 0;
min-height: 1.1em;
text-wrap: balance;
color: #fff;
}
.langsel-page .langsel-title-rot {
display: inline-block;
font-style: italic;
position: relative;
animation: rotator-pop .55s cubic-bezier(.2,.7,.2,1) both;
}
.langsel-page .langsel-title-rot::after {
content: "";
position: absolute;
left: 0; right: 4%; bottom: .08em;
height: .16em; border-radius: 3px;
background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.25));
z-index: -1;
}
.langsel-page .langsel-lead {
font-size: 16.5px;
line-height: 1.55;
color: rgba(255,255,255,.82);
max-width: 440px;
margin: 14px 0 0;
}
/* Chips de idioma (vidro) */
.langsel-page .langsel-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-top: 38px;
max-width: 780px;
}
.langsel-page .langsel-chip {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 22px 14px 14px;
min-width: 210px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
border-radius: 16px;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
text-decoration: none;
color: #fff;
transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.langsel-page .langsel-chip:hover {
transform: translateY(-3px);
background: #fff;
border-color: #fff;
color: var(--owner-accent);
text-decoration: none;
box-shadow: 0 24px 60px -22px rgba(11,18,32,.40);
}
.langsel-page .langsel-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}
.langsel-page .langsel-flag {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,.6), 0 3px 8px rgba(0,0,0,.25);
}
.langsel-page .langsel-chip-txt { text-align: left; min-width: 0; }
.langsel-page .langsel-chip-name {
display: block;
font-family: var(--font-display);
font-weight: 600; font-size: 16px; letter-spacing: -.2px;
}
.langsel-page .langsel-chip-cta {
display: flex; align-items: center; gap: 5px;
font-size: 12.5px; font-weight: 500; opacity: .8; margin-top: 1px;
}
.langsel-page .langsel-chip-cta svg { width: 13px; height: 13px; transition: transform .18s ease; }
.langsel-page .langsel-chip:hover .langsel-chip-cta { opacity: 1; }
.langsel-page .langsel-chip:hover .langsel-chip-cta svg { transform: translateX(3px); }
/* Foot */
.langsel-page .langsel-foot {
position: relative;
z-index: 3;
text-align: center;
padding: 0 24px 26px;
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
color: rgba(255,255,255,.55);
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.langsel-page .langsel-foot-dot {
width: 6px; height: 6px; border-radius: 999px;
background: rgba(255,255,255,.6);
box-shadow: 0 0 0 4px rgba(255,255,255,.1);
}
@media (max-width: 600px) {
.langsel-page .langsel-topbar { padding: 20px; }
.langsel-page .langsel-meta { display: none; }
.langsel-page .langsel-chip { min-width: 0; width: 100%; max-width: 320px; }
.langsel-page .langsel-grid { margin-top: 28px; }
}
.lang-switch__item {
appearance: none;
border: 0;
background: transparent;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
font: 400 13.5px/1.2 var(--font-sans, system-ui, sans-serif);
color: var(--ink, #0f172a);
text-align: left;
transition: background-color .12s ease-out;
text-decoration: none;
}
.lang-switch__item:hover {
background: var(--bg-softer, #f1f5f9);
text-decoration: none;
}
.lang-switch__item.is-selected {
background: var(--brand-wash, color-mix(in oklab, var(--brand-primary, #1d4ed8) 12%, transparent));
color: var(--brand-active, var(--brand-primary, #1d4ed8));
}
.lang-switch__item.is-selected .lang-switch__item-region {
color: var(--primary-fg);
opacity: .75;
}
/* Dark: a região do idioma selecionado usa --brand-primary (accent), escuro
sobre o menu escuro → clareia mantendo o tom da marca. */
:root[data-theme="dark"] .lang-switch__item.is-selected .lang-switch__item-region {
color: color-mix(in oklab, var(--brand-primary) 50%, #fff 50%);
}
.lang-switch__item-flag {
width: 24px;
height: 17px;
border-radius: 3px;
overflow: hidden;
display: inline-block;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
flex-shrink: 0;
}
.lang-switch__item-flag svg { display: block; width: 100%; height: 100%; }
.lang-switch__item-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
flex: 1;
min-width: 0;
}
.lang-switch__item-label { font-weight: 500; }
.lang-switch__item-region {
font-size: 11px;
color: var(--ink-3, #64748b);
font-family: var(--font-mono, "JetBrains Mono", monospace);
letter-spacing: .04em;
}
.lang-switch__item-check {
width: 14px;
height: 14px;
color: var(--primary-fg);
flex-shrink: 0;
}
/* Slot do switcher dentro do .v2-form-col__top */
.v2-form-col__top {
gap: 12px;
}
.v2-form-col__top .lang-switch {
margin-right: auto;
}
@media (max-width: 760px) {
.lang-switch__menu { min-width: 220px; }
}
/* ============================================================
* Confirmation card — terminal screens (finish / expired / already)
* Reaproveita o v2-card --centered. Selo semântico + resumo da vaga.
* ============================================================ */
.v2-confirm__badge {
width: 64px;
height: 64px;
border-radius: 999px;
margin: 0 auto 4px;
display: grid;
place-items: center;
background: var(--success-bg);
color: var(--success);
box-shadow: 0 0 0 6px color-mix(in oklab, var(--success) 12%, var(--bg) 88%);
}
.v2-confirm__badge svg { width: 30px; height: 30px; }
.v2-confirm__badge--warning {
background: var(--warning-bg);
color: var(--warning);
box-shadow: 0 0 0 6px color-mix(in oklab, var(--warning) 12%, var(--bg) 88%);
}
.v2-confirm__badge--info {
background: var(--brand-wash);
color: var(--primary-fg);
box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand-primary) 10%, var(--bg) 90%);
}
.v2-summary {
text-align: left;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-soft);
padding: 6px 16px;
margin-top: 8px;
}
.v2-summary__row {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 0;
border-bottom: 1px solid var(--divider);
}
.v2-summary__row:last-child { border-bottom: 0; }
.v2-summary__ico {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--owner-wash);
color: var(--primary-fg);
}
.v2-summary__ico svg { width: 17px; height: 17px; }
.v2-summary__text { min-width: 0; }
.v2-summary__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-3);
}
.v2-summary__value {
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
word-break: break-word;
}
.v2-confirm__foot {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
font-size: 12.5px;
color: var(--ink-2);
}
.v2-confirm__foot svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }