/* ═══════════════════════════════════════════════════════════════════════
WellOf — Design System "rampa noturna" (azul-noite + latão aeronáutico)
Compartilhado por login, dashboard e telas operacionais.
Espelha a identidade da demo comercial (wellof-demo/shared.css).
═══════════════════════════════════════════════════════════════════════ */
:root {
/* superfícies */
--bg: #0C1118;
--bg-soft: #10161f;
--surface: #141B28;
--card: var(--surface);
--raised: #1A2334;
--line: #263349;
--line-2: #33415c;
/* texto */
--text: #E9EDF5;
--txt: var(--text);
--muted: #93A0B8;
--faint: #7D8AA1; /* 30/09/2026: era #5C6A82 (3,2:1 no cartão); agora 4,5:1 até no --raised */
--muted-2: var(--faint);
/* latão / marca */
--brass: #CFA548;
--brass-2: #E0C675;
--brass-soft: #8A6F2A;
--brass-glass: rgba(207,168,72,.10);
--gold: var(--brass); /* alias legado */
--gold-2: var(--brass-2);
--gold-soft: var(--brass-glass);
/* semânticos */
--ok: #3FBF8F;
--info: #5B8DE1;
--warn: #CFA548;
--danger: #E15B5B;
--danger-soft: rgba(225,91,91,.10);
--danger-ink: #ffb4b6; /* texto sobre fundo de alerta */
/* Cor funcional como TEXTO (30/09/2026, design system). Fundo e borda
continuam com --ok/--info/--warn/--danger/--brass; texto usa estes, que o
tema claro escurece até 4,5:1. No escuro são as mesmas cores de antes. */
--ok-ink: var(--ok);
--ok-soft: rgba(63,191,143,.12);
--info-ink: var(--info);
--warn-ink: var(--warn);
--danger-text: #EA6E6E; /* #E15B5B dava 4,4:1 no --raised */
--brass-ink: var(--brass);
--surface-2: var(--raised);
--ink: var(--text);
/* Cores que moravam soltas nas regras viraram token (01/10/2026, design
system, tarefa 16). O valor é o que estava escrito na regra, então no
escuro nada muda, fora dois textos que não passavam de 4,5:1 (contador do
sino e cobre, anotados na linha) e a borda do .alert-success, que saiu do
verde do Google para o --ok. O claro herda o mesmo valor, menos o
texto que ficava ilegível nele (redefinido no bloco do tema claro).
Transparência de token se escreve com color-mix, por exemplo
color-mix(in srgb, var(--ok) 8%, transparent), que dá a mesma cor da
literal antiga; cor literal só aqui, na definição. */
/* Texto e traço em cima de cor cheia: a família é o fundo, o -contraste é
o que vai em cima dela. Medido contra o próprio fundo, nos dois temas. */
--brass-contraste: #0C1118; /* botão principal, aba e passo ativos, selos cheios de latão: 8,2:1 (5,7:1 no claro) */
--ok-contraste: #07130e; /* botão OK, bolha de não lidas do CRM: 8,2:1 */
--warn-contraste: #1b1300; /* faixa "Ver como" ligada: 8,0:1 */
--danger-contraste: #0C1118; /* contador do sino: o branco no vermelho dava 3,6:1; a tinta escura dá 5,3:1 */
--contraste-claro: #fff; /* texto do botão escuro "Voltar ao admin" da faixa "Ver como": 18,4:1 */
--warn-contraste-borda: rgba(0,0,0,.35); /* contorno dos botões da faixa "Ver como" ligada */
/* Borda discreta de cada família (selo, botão fantasma, KPI, aviso). */
--danger-borda: #6e3434;
--ok-borda: #25634d;
--info-borda: #31507e;
--warn-borda: #6b5a2a;
--brass-borda: rgba(207,168,72,.35);
/* "Em conferência" no Financeiro: azul próprio, separado do --info (ver o
comentário de .kpi-conferencia). */
--conferencia: #488DCF;
--conferencia-borda: #2a4a6b;
--conferencia-ink: #7fb3e8;
--conferencia-rotulo: #9cc4ee;
/* Cobre: aeronave que já está no hangar (seletor da solicitação) e chegada
atrasada no telão. */
--cobre: #C9743B;
--cobre-ink: #E39A62; /* o #C9743B como texto dava 3,4:1 dentro do próprio selo; este é o laranja que o telão já usava: 5,1:1 (fundo do selo medido no print, 01/10/2026) */
/* Movimento: pouso e desembarque em verde, saída e embarque em azul. */
--chegada-ink: #7FD6A6;
--saida-ink: #6FB8FF;
/* Brilho, véu, realce, sombra e foco. */
--brass-brilho: rgba(207,168,72,.5); /* cobrança recém-gerada */
--veu-dialogo: rgba(5,8,12,.72); /* atrás do diálogo aberto */
--realce-hover: rgba(255,255,255,.08); /* hover do "Desfazer" no aviso */
--realce-cartao: rgba(255,255,255,.015); /* cartão do Movimento */
--sombra-aviso: 0 10px 30px rgba(0,0,0,.38);
--sombra-hover: 0 8px 20px -14px rgba(0,0,0,.6);
--sombra-lista: 0 14px 34px rgba(0,0,0,.28);
--foco-anel: rgba(207,165,72,.38); /* anel do campo em foco (regra 7 do PROJETO.md §10) */
/* Telão: não carrega o tema, então só existe o escuro. */
--tv-fundo: #090D13;
--tv-texto: #DDE6F5;
--tv-avulso-fundo: rgba(201,168,106,.12);
--tv-local-borda: rgba(120,140,170,.7);
--tv-voo: #F5B400;
--tv-voo-contraste: #3A2A00;
--tv-alerta-brilho: rgba(207,168,72,.25); /* halo da caixa do alerta de chegada */
--tv-alerta-pulso: rgba(207,168,72,.22); /* cor que o alerta alto pisca */
/* destaque + superfícies dependentes de tema */
--accent-ink: #D9B65E; /* latão como TEXTO (legível no fundo do tema) */
--topbar-bg: linear-gradient(180deg, #10161f 0%, rgba(12,17,24,.86) 100%);
--body-glow: #16223e; /* brilho radial do fundo */
/* forma */
--radius: 10px;
--radius-lg: 14px;
--shadow: 0 24px 60px rgba(0,0,0,.5);
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-ui: var(--font);
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Roboto Mono', monospace;
}
/* ── Tema claro ("rampa diurna") — mesma identidade, base clara ──
Só entra quando html[data-theme="light"] é setado pelo seletor. Telas que
não carregam o tema (ex.: Painel da TV) permanecem sempre escuras. */
html[data-theme="light"] {
--bg: #F3F0E8;
--bg-soft: #E9E4D7;
--surface: #FFFFFF;
--raised: #F6F3EC;
--line: #E1DBCC;
--line-2: #CEC6B2;
--text: #1C2531;
--muted: #55606E;
--faint: #646D7B; /* era #838C9B (3,0:1 no fundo) */
--brass: #B4842B;
--brass-2: #A37520; /* 01/10/2026: era #9A6F1E; o texto escuro do selo NOVA dava 4,2:1, agora 4,6:1 */
--brass-soft: #D6C089;
--brass-glass: rgba(180,132,43,.12);
--danger-ink: #B23838;
--accent-ink: #87611C;
--ok-ink: #1E7A5A; /* #3FBF8F como texto dava 2,0:1 */
--ok-soft: rgba(30,122,90,.10);
--info-ink: #2F5FAE;
--warn-ink: #8F6412;
--danger-text: #B23838;
--brass-ink: #87611C;
/* Texto que no claro ficava ilegível (01/10/2026): mesmo matiz, escurecido
até passar de 4,5:1 no fundo, no cartão, no elevado e no fundo tingido do
próprio selo. Fundo e borda continuam os do escuro. */
--conferencia-ink: #1F66AF; /* era #7fb3e8, 1,9:1 no fundo */
--conferencia-rotulo: #1F66AF; /* era #9cc4ee, 1,6:1 */
--cobre-ink: #905128; /* era #C9743B, 3,1:1 */
--chegada-ink: #27794C; /* era #7FD6A6, 1,5:1 */
--saida-ink: #0069D0; /* era #6FB8FF, 1,9:1 */
--foco-anel: rgba(180,132,43,.34);
--topbar-bg: linear-gradient(180deg, #FFFFFF 0%, rgba(243,240,232,.88) 100%);
--body-glow: #FBFAF6;
--shadow: 0 18px 48px rgba(28,37,49,.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; background-color: var(--bg); }
body {
font-family: var(--font);
background: radial-gradient(1200px 620px at 50% -12%, var(--body-glow) 0%, var(--bg) 62%);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 6px; }
/* ── Layout utilitários ── */
.center-screen { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.container, .wrap { max-width: 1100px; margin: 0 auto; padding: 28px 24px 60px; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* placard: rótulo estilo painel de cabine */
.placard {
font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--faint); font-weight: 600;
}
.placard.brass { color: var(--accent-ink); }
/* ── Login / auth card ── */
.auth-card {
width: 100%; max-width: 400px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 40px 32px;
box-shadow: var(--shadow);
}
.auth-mark { display: grid; place-items: center; margin-bottom: 16px; }
.brand { font-size: 12px; letter-spacing: .32em; color: var(--accent-ink); text-transform: uppercase; text-align: center; }
.auth-title { margin: 12px 0 2px; font-size: 28px; text-align: center; font-weight: 700; }
.auth-sub { margin: 0 0 24px; color: var(--muted); font-size: 14px; text-align: center; }
.auth-hint { margin: 16px 0 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
/* ── Marca do login: a logo WellOf vira avião ─────────────────────────────
Na carga: mostra a marca (asas + cauda) e ela se transforma num avião
(vista de topo) que sobe e "decola", depois flutua de leve. Sem animação
(ou reduzir-movimento), fica direto o avião. Cores por classe p/ vencer a
regra genérica path:first/last-child. */
.auth-mark .mark-fx { overflow: visible; }
.auth-mark .mark-fx .fx-wing { stroke: var(--accent-ink); }
.auth-mark .mark-fx .fx-tail { stroke: var(--faint); }
.auth-mark .mark-fx .fx-plane { fill: var(--accent-ink); stroke: none; }
.auth-mark .mark-fx .fx-logo,
.auth-mark .mark-fx .fx-plane { transform-box: fill-box; transform-origin: 50% 55%; }
.auth-mark .mark-fx .fx-logo { opacity: 0; } /* padrão: avião à mostra */
@media (prefers-reduced-motion: no-preference) {
.auth-mark .mark-fx .fx-logo { opacity: 1; animation: fxLogoOut .5s ease-in .95s forwards; }
.auth-mark .mark-fx .fx-plane {
opacity: 0;
animation: fxPlaneIn .75s cubic-bezier(.22,.61,.36,1) 1.15s forwards,
fxFloat 5.5s ease-in-out 2.1s infinite;
}
/* Ao entrar (login OK): a marca já é o avião e ele DECOLA pra cima. */
.auth-mark .mark-fx.is-takeoff .fx-logo { animation: none; opacity: 0; }
.auth-mark .mark-fx.is-takeoff .fx-plane {
opacity: 1;
animation: fxTakeoff .72s cubic-bezier(.5, 0, .75, 0) forwards;
}
@keyframes fxLogoOut { to { opacity: 0; transform: translateY(-3px) scale(.88); } }
@keyframes fxPlaneIn {
0% { opacity: 0; transform: translateY(7px) scale(.78); }
55% { opacity: 1; transform: translateY(-2px) scale(1.06); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
/* pequena "agachada" de impulso e sobe fora da tela, sumindo. */
@keyframes fxTakeoff {
0% { opacity: 1; transform: translateY(0) scale(1); }
16% { opacity: 1; transform: translateY(4px) scale(.92); }
100% { opacity: 0; transform: translateY(-64px) scale(1.18); }
}
}
/* ── `hidden` sempre esconde ────────────────────────────────────────────
O `[hidden] { display: none }` vem da folha do navegador, que perde no
cascade para QUALQUER regra de classe nossa que defina `display`. O sintoma
é cruel: o JS faz `el.hidden = true`, o elemento continua na tela, e o bug
só aparece em produção (foi o que deixou a barra do link de autocadastro
visível e vazia na aba Clientes, 12/08).
Isto já tinha sido remendado uma vez para `.field`, caso a caso — o que só
adia o próximo. Esta regra resolve a classe inteira do problema, inclusive
para componente que ainda nem existe. */
[hidden] { display: none !important; }
/* ── Campos de formulário ── */
.field { display: block; margin-bottom: 16px; }
.field > span, .field > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
width: 100%; padding: 12px 12px; font-size: 16px; font-family: var(--font);
color: var(--text); background: var(--raised);
border: 1px solid var(--line-2); border-radius: var(--radius); outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
input[type=datetime-local], input[type=number] { font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus {
border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-glass);
}
input::placeholder { color: var(--faint); }
select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
background-size: 5px 5px; background-repeat: no-repeat;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
/* Campo que ocupa as duas colunas. Texto livre numa coluna de metade da
largura fica ilegível assim que passa de meia dúzia de palavras. */
.form-grid .campo-largo { grid-column: 1 / -1; }
/* Caixa de marcar dentro de um .field, alinhada com o texto ao lado. */
.op-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; cursor: pointer; }
.op-check input { width: auto; margin: 0; }
/* cartões de opção (radio) */
.opt-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.opt-card { position: relative; }
.opt-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt-card .box {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--radius);
padding: 1rem; background: var(--raised); height: 100%;
transition: border-color .12s ease;
}
.opt-card input:checked + .box { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.opt-card input:focus-visible + .box { outline: 2px solid var(--brass); outline-offset: 2px; }
.opt-card .box strong { display: block; margin-bottom: .25rem; }
.opt-card .box .desc { font-size: .8125rem; color: var(--muted); }
.opt-card .box .price { font-family: var(--font-mono); color: var(--accent-ink); font-size: .875rem; margin-top: .5rem; }
.calc-pergunta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: .25rem 0; }
.calc-pergunta small { flex-basis: 100%; color: var(--muted); font-size: .75rem; }
.calc-pergunta .calc-motivo { flex-basis: 100%; margin: 0; }
.fin-faltas { margin: 0 0 .5rem; font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; flex-basis: 100%; }
.fin-faltas a { color: var(--brass-ink); }
.tag-taxi { display: inline-block; margin-left: .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; color: var(--warn-ink); border: 1px solid var(--brass-soft); background: color-mix(in srgb, var(--warn) 8%, transparent); padding: .25rem .5rem; border-radius: 6px; text-transform: uppercase; }
/* Acessos: matriz tela × nível (23/09/2026) */
.ac-tabela-wrap { overflow-x: auto; }
.ac-tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ac-tabela th, .ac-tabela td { padding: .75rem .5rem; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.ac-tabela thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
/* A célula continua célula de tabela (display: flex nela tirava a linha do
encaixe e as bordas desencontravam, Bruno 23/09); o flex fica no bloco interno. */
.ac-tabela tbody th { text-align: left; font-weight: 400; min-width: 220px; }
.ac-tela { display: flex; align-items: center; gap: .5rem; }
.ac-tela b { display: block; }
.ac-tela small { display: block; color: var(--muted); font-size: .75rem; }
.ac-icone { width: 22px; height: 22px; color: var(--brass-ink); flex: none; }
.ac-icone svg { width: 22px; height: 22px; }
.ac-adm { color: var(--brass-ink); font-weight: 700; }
.ac-fixo { color: var(--faint); }
.ac-caixa { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: .25rem; }
.ac-caixa input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.ac-caixa span { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--faint); display: grid; place-items: center; transition: background .12s ease, border-color .12s ease; }
.ac-caixa input:checked + span { background: var(--brass); border-color: var(--brass); }
.ac-caixa input:checked + span::after { content: ''; width: 6px; height: 11px; border: solid var(--brass-contraste); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ac-caixa input:disabled + span { opacity: .5; }
.ac-caixa input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.ac-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); vertical-align: middle; }
.ac-caixa .ac-dot { position: absolute; top: 0; right: 0; }
td.ac-difere { background: color-mix(in srgb, var(--brass) 8%, transparent); }
/* toggle sim/não */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; padding: .5rem 1rem; font-size: .875rem; color: var(--muted); }
.seg input:checked + span { background: var(--brass); color: var(--brass-contraste); font-weight: 700; }
/* passos (formulário multi-etapa) */
.steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.steps .dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
display: grid; place-items: center; font-size: .75rem; font-family: var(--font-mono); color: var(--faint); }
.steps .dot.done { border-color: var(--brass-soft); color: var(--brass-ink); }
.steps .dot.now { background: var(--brass); border-color: var(--brass); color: var(--brass-contraste); font-weight: 700; }
.steps .bar { height: 1px; flex: 1; background: var(--line); min-width: 14px; }
/* ── Botões ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer;
padding: 12px 16px; border-radius: var(--radius); border: 1px solid transparent;
transition: transform .08s ease, filter .12s ease, background .12s ease, opacity .12s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-primary, .btn-gold { background: var(--brass); color: var(--brass-contraste); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); }
.btn-ok { background: var(--ok); color: var(--ok-contraste); }
.btn-danger { background: transparent; color: var(--danger-text); border-color: var(--danger-borda); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
/* ── Seletor de tema (sol/lua) ── */
.theme-toggle {
display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
border-radius: var(--radius); border: 1px solid var(--line-2); background: transparent;
color: var(--muted); transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.theme-toggle:hover { color: var(--accent-ink); border-color: var(--brass-soft); background: var(--surface); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle-fixed { position: fixed; top: 18px; right: 18px; z-index: var(--z-fixo); }
/* ── Avisos in-app (o sino do dashboard) ── */
.notif { position: relative; display: inline-flex; }
.notif-btn { position: relative; }
.notif.has-notif .notif-btn { color: var(--accent-ink); border-color: var(--brass-soft); }
.notif.is-open .notif-btn { color: var(--accent-ink); border-color: var(--brass-soft); background: var(--surface); }
.notif-ico { display: inline-grid; place-items: center; }
.notif-ico svg { width: 18px; height: 18px; display: block; }
.notif-badge {
position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
display: grid; place-items: center; border-radius: 999px; background: var(--danger); color: var(--danger-contraste);
font-size: 11px; font-weight: 700; line-height: 1; font-family: var(--font-mono);
box-shadow: 0 0 0 2px var(--bg-soft);
}
.notif-pop {
position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, 92vw); z-index: var(--z-menu);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow); overflow: hidden; max-height: min(70vh, 520px); overflow-y: auto;
}
.notif-head {
padding: .75rem 1rem .5rem; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--faint); font-weight: 700;
}
.notif-vazio { padding: .5rem 1rem 1.25rem; color: var(--faint); font-size: .8125rem; }
/* ── Menu de configurações (31/08/2026) ──────────────────────────────────────
Eram cinco botões soltos na barra do topo. No celular isso é onde o dedo
erra: "Sair" ficava colado em "Duas etapas". Reusa a mecânica do popover do
sino, mas com item de menu de largura cheia — alvo de toque grande é o ponto
inteiro da mudança. */
.menu { position: relative; display: inline-flex; }
.menu.is-open .menu-btn { color: var(--accent-ink); border-color: var(--brass-soft); background: var(--surface); }
.menu-btn svg { display: block; }
.menu-pop {
position: absolute; top: calc(100% + 10px); right: 0; width: min(260px, 92vw); z-index: var(--z-menu);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: var(--shadow); overflow: hidden; padding-bottom: .25rem;
}
.menu-item {
display: flex; align-items: center; gap: .5rem; width: 100%;
/* 42px de altura: alvo de toque confortável no celular, que é o motivo de
este menu existir. Menor que isso e a lista vira a mesma armadilha. */
min-height: 42px; padding: .1rem 1rem; border: 0; background: none;
color: var(--text); font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--raised); }
.menu-item-ico { display: inline-grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.menu-item-ico svg { width: 16px; height: 16px; display: block; }
/* "Sair" é destrutivo perto de itens que não são: a linha e a cor separam. */
.menu-item-sair { border-top: 1px solid var(--line); margin-top: .25rem; color: var(--danger-ink, var(--text)); }
.menu-item-sair .menu-item-ico { color: currentColor; }
.notif-grupo { border-top: 1px solid var(--line); padding: .5rem .5rem .5rem; }
.notif-grupo-head {
display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: 6px;
color: var(--text); font-weight: 600; font-size: .8125rem;
}
.notif-grupo-head:hover { background: var(--raised); }
.notif-grupo-ico { display: inline-grid; place-items: center; color: var(--accent-ink); }
.notif-grupo-ico svg { width: 16px; height: 16px; display: block; }
.notif-grupo-label { flex: 1; }
.notif-grupo-n {
font-size: .75rem; font-weight: 700; color: var(--accent-ink); background: var(--brass-glass);
border: 1px solid var(--brass-borda); padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
}
.notif-item { text-decoration: none; color: inherit; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: 6px; }
.notif-item:hover { background: var(--raised); }
.notif-item-ico { display: inline-grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.notif-item-ico svg { width: 15px; height: 15px; display: block; }
.notif-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notif-item-titulo { font-family: var(--font-mono); font-weight: 700; font-size: .8125rem; letter-spacing: .03em; }
.notif-item-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item-meta { font-size: .75rem; color: var(--faint); text-align: right; white-space: nowrap; flex-shrink: 0; }
.notif-item-meta b { color: var(--danger-text); font-family: var(--font-mono); }
.notif-mais { display: inline-block; margin: .25rem .5rem 0; font-size: .75rem; color: var(--accent-ink); }
.notif-mais:hover { text-decoration: underline; }
/* ── Alertas ── */
.alert { padding: 8px 12px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.alert-danger { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.alert-success { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
/* ── Top bar ── */
.topbar {
display: flex; align-items: center; gap: 1.25rem; justify-content: space-between;
padding: 16px 24px; background: var(--topbar-bg);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: var(--z-topo);
}
/* marca (aceita layout antigo .topbar-brand e o novo .brandmark) */
.topbar-brand, .brandmark { font-size: 18px; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; }
.topbar-brand b, .brandmark b { color: var(--accent-ink); font-weight: 700; }
.topbar-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 10px var(--brass); }
.brandmark svg { display: block; }
/* o chevron da marca herda a cor do tema (sobrepõe o stroke fixo do inline SVG) */
.brandmark svg path:first-child, .auth-mark svg path:first-child { stroke: var(--accent-ink); }
.brandmark svg path:last-child, .auth-mark svg path:last-child { stroke: var(--faint); }
/* ── A MARCA DE VERDADE DA WELLOF (01/09/2026) ────────────────────────────
Até aqui o sistema usava um chevron desenhado por nós, porque a logo real
não tinha chegado. O Matheus (quem cuida do visual deles) mandou os dois
PNG em 01/09.
🔴 POR QUE background-image E NÃO ![]()
: são DUAS artes, uma preta e uma
branca, e a escolha é do TEMA. `src` de ![]()
não se troca por CSS, então
com ![]()
seriam duas tags e uma escondida — que é uma imagem baixada à toa
e um leitor de tela lendo a marca duas vezes. Aqui é uma caixa só e o tema
troca a arte.
O padrão é a BRANCA porque o tema padrão do sistema é o escuro. */
.brand-logo {
display: block;
width: var(--brand-logo-larg, 104px);
aspect-ratio: 1022 / 124; /* a proporção real da arte, medida no arquivo */
background: no-repeat center / contain url('/img/logo-wellof-branco.png');
}
html[data-theme="light"] .brand-logo { background-image: url('/img/logo-wellof-preto.png'); }
/* No cartão de login e no cadastro do piloto a marca fica centralizada e maior,
com a palavra ("Aviação") logo abaixo, em caixa alta espaçada. */
.brand-logo-auth { --brand-logo-larg: 150px; margin: 0 auto 8px; }
.brandmark small { display: block; font-weight: 500; font-size: .6875rem; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
/* navegação central (telas operacionais) */
.topnav { display: flex; gap: .25rem; flex: 1; justify-content: center; flex-wrap: wrap; }
.topnav a { padding: .5rem .75rem; border-radius: 6px; font-size: .8125rem; color: var(--muted); border: 1px solid transparent; }
.topnav a:hover { color: var(--text); background: var(--surface); }
.topnav a.active { color: var(--accent-ink); border-color: var(--line); background: var(--surface); }
.topbar-user { display: flex; align-items: center; gap: 16px; }
.user-meta { display: flex; align-items: center; gap: 8px; }
.user-nome { font-size: 14px; }
.role-chip {
font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); border: 1px solid var(--line);
padding: .25rem .75rem; border-radius: 999px; white-space: nowrap;
}
/* ── Topbar responsiva ──
No mobile a barra não pode estourar a largura (isso criava scroll lateral e
até descentralizava os modais). Vamos enxugando o secundário conforme aperta:
≤640px some o subtítulo da marca e o NOME do usuário; ≤460px some o cargo. */
@media (max-width: 640px) {
.topbar { padding: 12px 16px; gap: .5rem; }
.brandmark { font-size: 16px; }
.brandmark small { display: none; }
.topbar-user { gap: 8px; }
.user-nome { display: none; }
}
@media (max-width: 460px) {
/* escopado na topbar p/ vencer o `.badge { display:inline-block }` que vem depois */
.topbar-user .badge-role, .topbar-user .role-chip { display: none; }
.topbar-user .btn-sm { padding: .5rem .5rem; }
}
/* ── Cabeçalho de página ── */
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin-top: .25rem; }
.page-head p { color: var(--muted); font-size: .875rem; margin-top: .25rem; max-width: 60ch; }
/* ── Badges ── */
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
/* Aeronave que já está guardada, no picker da solicitação (25/09/2026). */
.badge.no-patio { background: color-mix(in srgb, var(--cobre) 16%, transparent); color: var(--cobre-ink); border: 1px solid color-mix(in srgb, var(--cobre) 40%, transparent); }
.badge-role { background: var(--brass-glass); color: var(--accent-ink); border: 1px solid var(--brass-borda); }
/* badges de status (retângulo, estilo painel) */
.badge.solicitada, .badge.pendente { color: var(--warn-ink); border: 1px solid var(--brass-soft); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 5px; }
.badge.aprovada { color: var(--info-ink); border: 1px solid var(--info-borda); background: color-mix(in srgb, var(--info) 8%, transparent); border-radius: 6px; }
.badge.no_patio, .badge.paga { color: var(--ok-ink); border: 1px solid var(--ok-borda); background: color-mix(in srgb, var(--ok) 8%, transparent); border-radius: 6px; }
.badge.finalizada { color: var(--muted); border: 1px solid var(--line); background: transparent; border-radius: 6px; }
.badge.recusada { color: var(--danger-text); border: 1px solid var(--danger-borda); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 6px; }
.tag-estendida {
display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
color: var(--brass-contraste); background: var(--brass); padding: .25rem .5rem; border-radius: 6px; text-transform: uppercase;
}
/* ── Cards de conteúdo ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.25rem; }
.card + .card { margin-top: 1rem; }
.card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.prefixo { font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; font-size: 1rem; }
.modelo { color: var(--muted); font-size: .875rem; }
.datagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.5rem; margin-top: 1rem; }
.datagrid .placard { margin-bottom: .25rem; }
.datagrid .val { font-size: .875rem; }
.empty { text-align: center; color: var(--faint); font-size: .875rem; padding: 2.25rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); }
/* ── Diálogo de cálculo (check-out) ── */
dialog {
background: var(--surface); color: var(--text);
border: 1px solid var(--line); border-radius: 14px;
padding: 1.5rem 1.6rem; max-width: 440px; width: 92vw;
/* Centraliza SEMPRE no meio da tela — inclusive quando o formulário é alto.
O reset "*{margin:0}" derruba a centralização nativa do