/* ============================================================
STEFBH — Design Tokens
============================================================
Extraído de PORTAL-V44 (frontend/original/PORTAL-V44.original.html)
em 2026-05-04. Contém:
- Tokens (CSS custom properties)
- Reset CSS minimal
- Tipografia base
- Animações (@keyframes) reutilizáveis
- Componentes utilitários (botões, formulários, badges,
cards, modal, wizard, upload, senha)
NÃO contém:
- JavaScript
- Estilos específicos de telas (#tela-X, .bv-*, .agt-*, ...)
- Estilos de admin (sidebar, table de gestão, ...)
Importar via:
Fontes (carregar separadamente no ):
============================================================ */
/* ════════════════════════════════════════════
TOKENS — paleta + raios
════════════════════════════════════════════ */
:root {
--navy: #080f1a;
--navy2: #0e1d30;
--navy3: #0b1624;
--gold: #c8a044;
--gold2: #e4be6a;
--gold3: rgba(200,160,68,0.12);
--cream: #ede8de;
--gray: #7a8ea8;
--border: rgba(200,160,68,0.2);
--success: #27b06b;
--danger: #d44;
--warn: #e0952a;
--blue: #3a8fd4;
--purple: #8b5cf6;
--r: 4px;
}
/* ════════════════════════════════════════════
RESET + BASE
════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
background: var(--navy);
color: var(--cream);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
min-height: 100vh;
}
/* Scrollbar custom (gold sutil) */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(200,160,68,0.3); border-radius: 3px; }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
/* ════════════════════════════════════════════
ANIMAÇÕES (@keyframes)
════════════════════════════════════════════ */
/* Monkey emoji peek (input de senha) */
@keyframes monkey-peek {
0% { transform: scale(0.8); }
55% { transform: scale(1.25); }
100% { transform: scale(1.0); }
}
/* Shimmer diagonal nos cards */
@keyframes card-shimmer {
0% { left: -120%; }
100% { left: 160%; }
}
/* Pulso dourado em estações ativas (trilho de bilhetes) */
@keyframes trilho-pulse {
0%,100% { box-shadow: 0 0 14px rgba(200,160,68,0.22); border-color: var(--gold); }
50% { box-shadow: 0 0 28px rgba(200,160,68,0.55), 0 0 6px rgba(200,160,68,0.3); border-color: rgba(200,160,68,0.9); }
}
/* Pulso glow em dot de progresso */
@keyframes bp-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(200,160,68,.5), 0 0 6px rgba(200,160,68,.2); }
50% { box-shadow: 0 0 0 7px rgba(200,160,68,0), 0 0 14px rgba(200,160,68,.45); }
}
/* Sparkle ✦ na estação ativa */
@keyframes bp-sparkle {
0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); }
45%,55% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
/* Brilho deslizante nos rails (linha do trem) */
@keyframes rail-shine { 0% { left: -55%; } 100% { left: 155%; } }
/* Trem entrando/saindo da tela */
@keyframes trem-chegando { from { transform: translateX(110%); } to { transform: translateX(0); } }
@keyframes trem-saindo { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-110%); opacity: 0; } }
/* Rodas do trem */
@keyframes whl-turn { to { transform: rotate(360deg); } }
/* Shimmer holográfico em texto (número do bilhete) */
@keyframes blt-shiny {
0% { background-position: -150% 50%; }
100% { background-position: 250% 50%; }
}
/* Fade-in escalonado das estações no trilho */
@keyframes trilho-entrada {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/* Confete burst (estação concluída) */
@keyframes ts-burst {
0% { transform: translate(0,0) scale(1); opacity: 1; }
100% { transform: translate(var(--tsx,8px), var(--tsy,-14px)) scale(0); opacity: 0; }
}
/* Glow pulsante em card de status ativo */
@keyframes card-glow-pulse {
0%,100% { box-shadow: 0 0 0 1px rgba(200,160,68,0.15), 0 2px 18px rgba(0,0,0,0.2); }
50% { box-shadow: 0 0 0 2px rgba(200,160,68,0.4), 0 4px 28px rgba(200,160,68,0.18); }
}
/* Scan line vertical no hover do card */
@keyframes bv-scan { 0% { top: -30%; } 100% { top: 110%; } }
/* Borda do input pulsante no focus */
@keyframes inp-border-pulse {
0%,100% { box-shadow: 0 0 0 2px rgba(200,160,68,0.18); }
50% { box-shadow: 0 0 0 3px rgba(200,160,68,0.48), 0 0 14px rgba(200,160,68,0.16); }
}
/* Seta esquerda/direita (instrução de perícia) */
@keyframes peri-arrow-lr {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
/* Shimmer diagonal em botão grande */
@keyframes btn-shim { 0% { left: -80%; } 100% { left: 140%; } }
/* Float vertical sutil (emoji/ícone) */
@keyframes bv-float {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-6px) scale(1.08); }
}
/* Sway lateral (emoji/ícone alternativo) */
@keyframes bv-sway {
0%,100% { transform: rotate(-8deg) scale(1); }
50% { transform: rotate( 8deg) scale(1.06); }
}
/* ════════════════════════════════════════════
BOTÕES
════════════════════════════════════════════ */
/* Primary CTA (login, finalizar cadastro) */
.btn-primary {
width: 100%;
padding: 12px 24px;
background: linear-gradient(135deg, #c8a044 0%, #a07828 100%);
color: #0e1d30;
border: none;
border-radius: 8px;
font-size: 14px; font-weight: 700;
cursor: pointer;
margin-top: 18px;
transition: all 0.2s;
}
.btn-primary:hover { background: linear-gradient(135deg, #d4b055 0%, #b08838 100%); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
/* Voltar (ícone de trem) */
.btn-voltar {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
background: rgba(200,160,68,0.1);
border: 1px solid rgba(200,160,68,0.3);
border-radius: 4px;
color: var(--gold);
font-size: 12px; font-weight: 600;
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
font-family: 'DM Sans', sans-serif;
letter-spacing: 0.3px;
}
.btn-voltar:hover { background: rgba(200,160,68,0.22); color: var(--gold2); }
.btn-voltar::before { content: '🚂'; font-size: 13px; }
/* Botão genérico admin (com variantes de cor) */
.btn { padding: 5px 12px; border-radius: var(--r); border: none; cursor: pointer; font-size: 11px; font-weight: 600; transition: all 0.15s; }
.b-gold { background: rgba(200,160,68,0.15); color: var(--gold); border: 1px solid var(--border); }
.b-gold:hover { background: rgba(200,160,68,0.28); }
.b-blue { background: rgba(58,143,212,0.15); color: var(--blue); border: 1px solid rgba(58,143,212,0.25); }
.b-blue:hover { background: rgba(58,143,212,0.28); }
.b-green { background: rgba(39,176,107,0.15); color: var(--success); border: 1px solid rgba(39,176,107,0.25); }
.b-green:hover { background: rgba(39,176,107,0.28); }
.b-red { background: rgba(221,68,68,0.15); color: var(--danger); border: 1px solid rgba(221,68,68,0.25); }
.b-red:hover { background: rgba(221,68,68,0.28); }
/* Botão wizard (próximo) */
.btn-wiz-next { padding: 10px 24px; background: var(--gold); color: var(--navy); border: none; border-radius: var(--r); font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.btn-wiz-next:hover { background: var(--gold2); }
.btn-pausar { padding: 7px 14px; background: rgba(255,255,255,0.06); color: var(--gray); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r); font-size: 11px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.btn-pausar:hover { background: rgba(200,160,68,0.12); color: var(--gold); border-color: rgba(200,160,68,0.4); }
/* Botão grande com shimmer */
.btn-grande { position: relative; overflow: hidden; }
.btn-grande::after {
content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
transform: skewX(-20deg); pointer-events: none;
}
.btn-grande:not(:disabled):hover::after { animation: btn-shim 0.52s ease-out forwards; }
/* ════════════════════════════════════════════
FORMULÁRIOS
════════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }
.form-lbl {
font-size: 10px; letter-spacing: 1.5px;
color: var(--gray); text-transform: uppercase;
margin-bottom: 5px; display: block;
font-family: 'IBM Plex Mono', monospace;
}
.form-inp {
width: 100%;
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r);
color: var(--cream);
font-size: 16px;
font-family: 'DM Sans', sans-serif;
transition: border-color 0.2s;
text-transform: uppercase;
touch-action: manipulation;
-webkit-appearance: none;
}
.form-inp[type="password"], .form-inp[type="number"],
.form-inp[type="email"], .form-inp[type="date"],
.form-inp.no-upper { text-transform: none; }
.form-inp:focus {
outline: none;
border-color: var(--gold);
animation: inp-border-pulse 2s ease-in-out infinite;
}
/* iOS Safari / Chrome autofill — preserva color cream em fundo dark
(BUG-04 do batch fix Henrico 07/05/2026: iOS aplicava text-fill-color
nativo black sobre background light após autofill, deixando o que
o usuário digitava invisível em campos de habilitados sucessórios). */
.form-inp,
.form-inp:-webkit-autofill,
.form-inp:-webkit-autofill:hover,
.form-inp:-webkit-autofill:focus,
.form-inp:-webkit-autofill:active {
-webkit-text-fill-color: var(--cream);
caret-color: var(--gold);
}
.form-inp:-webkit-autofill,
.form-inp:-webkit-autofill:hover,
.form-inp:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--navy2) inset;
transition: background-color 9999s ease 0s;
}
/* Suprime ícone nativo de "ver senha" em iOS Safari + IE/Edge legacy
(BUG-02 do batch fix Henrico: campo de senha exibia 2 olhos
sobrepostos — o nativo do iOS + o botão .senha-olho do projeto). */
.form-inp[type="password"]::-webkit-textfield-decoration-container { visibility: hidden; }
.form-inp[type="password"]::-webkit-credentials-auto-fill-button { visibility: hidden; display: none; pointer-events: none; }
.form-inp[type="password"]::-webkit-strong-password-auto-fill-button { display: none; }
.form-inp[type="password"]::-ms-reveal { display: none; }
.form-inp[type="password"]::-ms-clear { display: none; }
.form-sel {
width: 100%;
padding: 10px 12px;
background: #1a2e45;
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--r);
color: #ede8de;
font-size: 13px;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a044' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
transition: border-color 0.2s;
}
.form-sel:focus { outline: none; border-color: var(--gold); }
.form-sel option { background: #1a2e45; color: #ede8de; padding: 8px; }
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(78%) sepia(30%) saturate(600%) hue-rotate(5deg) brightness(95%);
cursor: pointer;
}
/* Layout de seções de form */
.form-section { margin-bottom: 20px; }
.form-section-title { font-size: 10px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; font-family: 'IBM Plex Mono', monospace; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.full { grid-column: 1 / -1; }
/* ════════════════════════════════════════════
CARDS / AUTH CARD
════════════════════════════════════════════ */
/* Card genérico (dashboard) */
.card { background: var(--navy2); border: 1px solid var(--border); border-radius: 6px; padding: 18px; }
.card-ic { font-size: 20px; margin-bottom: 8px; }
.card-val { font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; }
.card-lbl { font-size: 11px; color: var(--gray); margin-top: 4px; }
.card-sub { font-size: 10px; color: var(--gray); margin-top: 6px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
/* Auth card (login, finalização de cadastro) */
.auth-card { background: var(--navy2); border: 1px solid var(--border); border-radius: 8px; padding: 36px; max-width: 420px; width: 100%; }
.auth-back { font-size: 12px; color: var(--gray); cursor: pointer; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 6px; }
.auth-back:hover { color: var(--cream); }
.auth-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.auth-sub { font-size: 12px; color: var(--gray); margin-bottom: 24px; }
.auth-error { color: var(--danger); font-size: 12px; text-align: center; margin-top: 10px; min-height: 18px; }
.hint-box { margin-top: 16px; padding: 10px 14px; background: rgba(200,160,68,0.06); border: 1px solid var(--border); border-radius: var(--r); font-size: 11px; color: var(--gray); font-family: 'IBM Plex Mono', monospace; }
.hint-box span { color: var(--gold); }
/* ════════════════════════════════════════════
ALERTAS / BADGES / PILLS
════════════════════════════════════════════ */
.alert { padding: 9px 14px; border-radius: var(--r); font-size: 12px; margin-bottom: 10px; }
.al-ok { background: rgba(39,176,107,0.1); border: 1px solid rgba(39,176,107,0.25); color: var(--success); }
.al-warn { background: rgba(224,149,42,0.1); border: 1px solid rgba(224,149,42,0.25); color: var(--warn); }
.al-info { background: rgba(58,143,212,0.1); border: 1px solid rgba(58,143,212,0.25); color: var(--blue); }
.al-err { background: rgba(221,68,68,0.1); border: 1px solid rgba(221,68,68,0.25); color: var(--danger); }
.obrig-box { background: rgba(224,149,42,0.08); border: 1px solid rgba(224,149,42,0.25); border-radius: 4px; padding: 10px 14px; font-size: 12px; color: var(--warn); margin-bottom: 14px; }
/* Pill pequena (status admin) */
.pill { display: inline-block; font-size: 9px; padding: 2px 7px; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; letter-spacing: 1px; }
.p-pend { background: rgba(224,149,42,0.12); color: var(--warn); border: 1px solid rgba(224,149,42,0.25); }
.p-lib { background: rgba(39,176,107,0.12); color: var(--success); border: 1px solid rgba(39,176,107,0.25); }
.p-ref { background: rgba(221,68,68,0.12); color: var(--danger); border: 1px solid rgba(221,68,68,0.25); }
.p-ok { background: rgba(58,143,212,0.12); color: var(--blue); border: 1px solid rgba(58,143,212,0.25); }
.p-analise { background: rgba(139,92,246,0.12); color: var(--purple); border: 1px solid rgba(139,92,246,0.25); }
/* Badge categórica (perfis) */
.badge-gold { background: var(--gold3); color: var(--gold); border: 1px solid var(--border); }
.badge-green { background: rgba(39,176,107,0.1); color: var(--success); border: 1px solid rgba(39,176,107,0.25); }
.badge-purple { background: rgba(139,92,246,0.1); color: var(--purple); border: 1px solid rgba(139,92,246,0.25); }
.badge-blue { background: rgba(58,143,212,0.1); color: var(--blue); border: 1px solid rgba(58,143,212,0.25); }
/* Status pill (avisos grandes) */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.pill-warn { background: rgba(224,149,42,0.12); border: 1px solid rgba(224,149,42,0.3); color: var(--warn); }
.pill-ok { background: rgba(39,176,107,0.12); border: 1px solid rgba(39,176,107,0.3); color: var(--success); }
.pill-red { background: rgba(221,68,68,0.12); border: 1px solid rgba(221,68,68,0.3); color: var(--danger); }
.pend-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--danger); border-radius: 10px; font-size: 10px; font-weight: 700; color: #fff; margin-left: 6px; }
/* ════════════════════════════════════════════
WIZARD / STEPS
════════════════════════════════════════════ */
.wizard-wrap { max-width: 620px; width: 100%; }
.steps-bar { display: flex; align-items: center; margin-bottom: 32px; }
.step-dot {
width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
border: 2px solid rgba(255,255,255,0.1); color: var(--gray);
background: rgba(255,255,255,0.04);
transition: all 0.3s; flex-shrink: 0;
}
.step-dot.active { border-color: var(--gold); color: var(--gold); background: var(--gold3); }
.step-dot.done { border-color: var(--success); color: var(--success); background: rgba(39,176,107,0.1); }
.step-line { flex: 1; height: 2px; background: rgba(255,255,255,0.07); margin: 0 6px; }
.step-line.done { background: rgba(39,176,107,0.4); }
.wizard-card { background: var(--navy2); border: 1px solid var(--border); border-radius: 8px; padding: 32px; }
.wiz-step { display: none; }
.wiz-step.active { display: block; }
.wiz-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.wiz-sub { font-size: 12px; color: var(--gray); margin-bottom: 24px; }
.wiz-buttons { display: flex; gap: 10px; justify-content: space-between; margin-top: 24px; }
/* Opção (seleção tipo card) */
.opcao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.opcao-card { border: 2px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 22px 16px; cursor: pointer; text-align: center; transition: all 0.2s; background: rgba(255,255,255,0.02); }
.opcao-card:hover { border-color: rgba(200,160,68,0.4); }
.opcao-card.selected { border-color: var(--gold); background: var(--gold3); }
.opcao-icon { font-size: 28px; margin-bottom: 8px; display: block; }
.opcao-nome { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.opcao-desc { font-size: 11px; color: var(--gray); line-height: 1.4; }
/* ════════════════════════════════════════════
UPLOAD DE DOCUMENTO
════════════════════════════════════════════ */
.upload-area {
border: 2px dashed rgba(255,255,255,0.1);
border-radius: 6px; padding: 20px;
text-align: center; cursor: pointer;
transition: all 0.2s; position: relative;
}
.upload-area:hover { border-color: var(--gold); background: var(--gold3); }
.upload-area.tem-arquivo { border-color: var(--success); background: rgba(39,176,107,0.05); }
.upload-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 24px; margin-bottom: 6px; }
.upload-label { font-size: 12px; color: var(--gray); }
.upload-ok { font-size: 12px; color: var(--success); font-weight: 600; }
/* ════════════════════════════════════════════
SENHA (display + força + olho + monkey)
════════════════════════════════════════════ */
/* Display grande de senha (pós-cadastro) */
.senha-big {
font-family: 'IBM Plex Mono', monospace;
font-size: 36px; font-weight: 600;
letter-spacing: 8px; color: var(--gold);
background: rgba(200,160,68,0.08);
border: 1px solid var(--border);
border-radius: 6px; padding: 16px 24px;
margin: 16px 0; display: inline-block;
}
.senha-warn { font-size: 12px; color: var(--warn); margin-top: 8px; }
.senha-display {
font-family: 'IBM Plex Mono', monospace;
font-size: 22px; font-weight: 600;
letter-spacing: 6px; color: var(--gold);
background: rgba(200,160,68,0.08);
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px 20px; text-align: center;
margin: 10px 0;
}
/* Wrapper de input com olho */
.senha-wrap { position: relative; display: flex; align-items: center; }
.senha-wrap .form-inp { flex: 1; padding-right: 38px; }
.senha-olho { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 16px; color: var(--gold); user-select: none; line-height: 1; background: none; border: none; padding: 0; }
.senha-olho:hover { opacity: 0.75; }
/* Macaquinho 🙈 com peek */
.senha-monkey { font-size: 22px; cursor: pointer; user-select: none; background: none; border: none; padding: 0; line-height: 1; }
.senha-monkey.peek { animation: monkey-peek 0.3s ease-out; }
/* Indicador de força */
.senha-forca-wrap { display: flex; gap: 4px; margin-top: 8px; height: 4px; }
.senha-forca-bar { flex: 1; border-radius: 2px; background: rgba(255,255,255,0.08); transition: background 0.25s; }
.senha-forca-bar.fraca { background: #e05555; }
.senha-forca-bar.media { background: #e0a040; }
.senha-forca-bar.forte { background: #27b06b; }
/* ════════════════════════════════════════════
BUG-04R (rodada 2 — 2026-05-09): camada extra defensiva
além do fix universal `.form-inp` da 4.6.2.x. Cobre
inputs do Step Habilitados e edição inline em /habilitados
por seletor de classe ancestral (caso CSS especificity
future-proof falhe). !important só aqui — vale o trade-off.
════════════════════════════════════════════ */
.habilit-linha input,
.habilit-form input,
[class*="habilit"] input {
color: var(--cream) !important;
-webkit-text-fill-color: var(--cream) !important;
background: rgba(255,255,255,0.04) !important;
caret-color: var(--gold) !important;
}
.habilit-linha input:-webkit-autofill,
.habilit-form input:-webkit-autofill,
[class*="habilit"] input:-webkit-autofill {
-webkit-text-fill-color: var(--cream) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--navy2) inset !important;
caret-color: var(--gold) !important;
}
/* ════════════════════════════════════════════
BUG-06 (rodada 2): botão "Voltar" na tela de login
════════════════════════════════════════════ */
.login-voltar {
position: absolute;
top: 14px; left: 14px;
background: transparent;
border: 1px solid rgba(200,160,68,0.3);
color: var(--gold);
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 1px;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
z-index: 5;
}
.login-voltar:hover {
background: rgba(200,160,68,0.12);
border-color: var(--gold);
color: var(--gold2);
}
.login-card { position: relative; }
/* ════════════════════════════════════════════
BUG-07 (rodada 2): campo telefone com prefix +55 fixo
════════════════════════════════════════════ */
.campo-telefone-wrapper {
display: flex;
align-items: stretch;
border: 1px solid rgba(200,160,68,0.2);
border-radius: var(--r);
background: rgba(255,255,255,0.04);
overflow: hidden;
transition: border-color 0.2s;
}
.campo-telefone-wrapper:focus-within {
border-color: var(--gold);
}
.prefix-pais {
background: rgba(200,160,68,0.10);
color: var(--gold);
padding: 10px 12px;
border-right: 1px solid rgba(200,160,68,0.2);
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
display: flex;
align-items: center;
user-select: none;
}
.campo-telefone-wrapper input.campo-telefone {
border: none !important;
background: transparent !important;
flex: 1;
padding: 10px 12px;
width: 100%;
/* !important nos 2 abaixo é necessário pra vencer o hot-fix iOS global
em design-tokens.css:716-732 (input[type="tel"] color/fill #0a1e3c !important)
que torna o texto navy invisível sobre o fundo navy transparente deste wrapper. */
color: var(--cream) !important;
-webkit-text-fill-color: var(--cream) !important;
font-size: 16px;
font-family: 'DM Sans', sans-serif;
}
.campo-telefone-wrapper input.campo-telefone:focus {
outline: none;
animation: none;
}
/* ════════════════════════════════════════════
MODAL
════════════════════════════════════════════ */
.modal-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 500; align-items: center; justify-content: center; }
.modal-ov.open { display: flex; }
.modal { background: var(--navy2); border: 1px solid var(--border); border-radius: 8px; padding: 26px; max-width: 680px; width: 90%; max-height: 88vh; overflow-y: auto; }
.modal-title { font-size: 15px; font-weight: 700; color: var(--gold); display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mclose { cursor: pointer; color: var(--gray); font-size: 18px; }
.mclose:hover { color: var(--cream); }
/* Definition list (chave/valor) dentro de modal */
.dl { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.04); padding: 7px 0; }
.dl-k { width: 160px; min-width: 160px; font-size: 10px; letter-spacing: 1px; color: var(--gray); text-transform: uppercase; font-family: 'IBM Plex Mono', monospace; }
.dl-v { font-size: 12px; color: var(--cream); }
/* ════════════════════════════════════════════
NAVBAR / TOPO
════════════════════════════════════════════ */
.nav-top {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(200,160,68,0.12);
}
.nav-top-label {
font-size: 9px; letter-spacing: 3px; color: var(--gold);
text-transform: uppercase; font-family: 'IBM Plex Mono', monospace;
}
/* ════════════════════════════════════════════
ASSINATURA LEMA (rodapé fixo discreto)
════════════════════════════════════════════ */
body::after {
content: 'LEMA Consultoria';
position: fixed; bottom: 8px; right: 12px;
font-size: 10px; color: #c8a044; opacity: 0.4;
letter-spacing: 1px; pointer-events: none; z-index: 9999;
font-family: inherit;
}
/* ════════════════════════════════════════════
FOUNDATION RESPONSIVE (sub-fase Responsive)
════════════════════════════════════════════
Meta: iOS Safari, Android Chrome e Desktop funcionando.
Sem PWA, sem JS de detecção. Só CSS + meta tags (no ).
*/
/* iOS safe area (notch). */
body {
padding-top: env(safe-area-inset-top, 0);
padding-right: env(safe-area-inset-right, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
padding-left: env(safe-area-inset-left, 0);
}
/* Anti-zoom iOS: campos de entrada >= 16px (Safari só dá zoom em < 16px) */
input, select, textarea {
font-size: max(16px, 1rem);
}
/* Touch targets minimos em controles interativos */
button, .btn-primary, .cta-primary, .cta-secondary,
.btn-grande, .btn-grande-sec, .btn-link, [role="button"] {
min-height: 44px;
touch-action: manipulation;
}
/* Tap highlight removida */
* { -webkit-tap-highlight-color: transparent; }
/* Smooth scroll iOS */
body { -webkit-overflow-scrolling: touch; }
/* --- Breakpoints globais --- */
/* Mobile portrait */
@media (max-width: 480px) {
body { font-size: 14px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
.container, .wrap, .pg, .auth-card, .login-card { padding-left: 12px; padding-right: 12px; }
.card { width: 100%; }
.desktop-only { display: none !important; }
#tela-bilhete-wrap, .bilhete-wrap { padding: 16px 8px; }
.bilhete { max-width: 100%; }
.inp-grp, .inp-row { flex-direction: column; gap: 12px; }
.btn-grande, .btn-grande-sec { width: 100%; padding: 16px; font-size: 1rem; }
.bilhetes-progresso .bp-icons-row { flex-direction: column; gap: 4px; }
.bilhetes-progresso .bp-labels-row { flex-direction: column; gap: 4px; }
}
/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
.container, .wrap { padding-left: 16px; padding-right: 16px; }
}
/* Desktop largo */
@media (min-width: 1280px) {
.container, .wrap { max-width: 1200px; margin: 0 auto; }
}
/* Hover so em ponteiro fino — evita sticky hover em touch */
@media (hover: none) {
.btn-primary:hover, .cta-primary:hover, .cta-secondary:hover,
.btn-grande:hover, .btn-grande-sec:hover {
transform: none; opacity: 1;
}
}
/* Reduce motion — acessibilidade */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Hot-fix iOS Safari dark mode — força legibilidade
de inputs e selects mesmo quando sistema iOS está
em dark mode global */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="url"],
input:not([type]),
textarea,
select {
color: #0a1e3c !important;
background-color: #ede8de !important;
-webkit-text-fill-color: #0a1e3c !important;
-webkit-appearance: none;
appearance: none;
}
/* Placeholders também visíveis no iOS */
input::placeholder,
textarea::placeholder {
color: rgba(10, 30, 60, 0.5) !important;
-webkit-text-fill-color: rgba(10, 30, 60, 0.5) !important;
opacity: 1;
}
/* iOS Safari autofill — fundo amarelado feio */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: #0a1e3c !important;
-webkit-box-shadow: 0 0 0 30px #ede8de inset !important;
box-shadow: 0 0 0 30px #ede8de inset !important;
}
/* Select com seta customizada (já que tiramos
appearance native) */
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8a044' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px !important;
}