/* Vertex Control — Design System */
/* Brand: #1d355b (navy), #bc965a (gold), #faf9f5 (cream bg) */
* { box-sizing: border-box; }
/* Tema claro é o padrão. Sem declarar color-scheme, o Chrome com o SO em modo
escuro auto-escurece os controles NATIVOS (ex.: ),
pintando o texto da data numa cor clara sobre o campo branco — a data some.
O Safari não faz esse auto-dark, por isso aparecia só nele. Fixamos o esquema
por tema (o modo escuro do app declara color-scheme:dark mais abaixo). */
/* Tema PADRÃO é o escuro (aplicado por html.theme-dark no ). O claro é
opcional (html.theme-light) — refinado na mesma linguagem do escuro:
neutros frios levemente azulados (navy bias), superfícies limpas e acento
dourado, em vez do creme quente anterior. */
html { color-scheme: light; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #e6e6e6; color:#1a2233; }
/* Com o ERP montado, a janela NÃO rola — a barra lateral e as barras de topo
ficam fixas e só o conteúdo principal (.app-main) rola. Escopo via :has para
não afetar a tela de login (que precisa rolar em telas curtas). */
html:has(.app-main), html:has(.app-main) body { height:100%; overflow:hidden; margin:0; }
/* ======================== ANIMATIONS ======================== */
@keyframes slide-in { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fade-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.animate-slide-in { animation: slide-in 0.3s ease; }
.fade-in { animation: fade-in 0.22s ease; }
/* ======================== CARDS ======================== */
.card { background:#fff; border-radius:12px; border:1px solid #e4e7ee; box-shadow:0 1px 3px rgba(29,53,91,0.05), 0 6px 20px rgba(29,53,91,0.05); }
/* ======================== KPI CARDS ======================== */
.kpi-card { background:#fff; border-radius:12px; padding:12px 14px; border:1px solid #e4e7ee; position:relative; overflow:hidden; box-shadow:0 1px 3px rgba(29,53,91,0.04); }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.kpi-navy::before { background:#1d355b; }
.kpi-gold::before { background:#bc965a; }
.kpi-green::before { background:#22c55e; }
.kpi-red::before { background:#ef4444; }
.kpi-blue::before { background:#3b82f6; }
.kpi-yellow::before { background:#f59e0b; }
.kpi-purple::before { background:#8b5cf6; }
/* ======================== BADGES ======================== */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:600; letter-spacing:0.02em; }
.badge-gray { background:#f0ede8; color:#6b6355; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-navy { background:#e0e8f4; color:#1d355b; }
.badge-gold { background:#f5ebdc; color:#9a7535; }
.badge-yellow { background:#fef9c3; color:#a16207; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.badge-purple { background:#f3e8ff; color:#7e22ce; }
/* ======================== FORM ======================== */
.form-input { width:100%; border:1px solid #d6d0c8; border-radius:8px; padding:8px 12px; font-size:14px; background:#fff; outline:none; transition:border-color 0.15s,box-shadow 0.15s; color:#1a1a1a; color-scheme: light; }
/* Placeholder legível no tema claro (antes caía no cinza-claro padrão do navegador). */
.form-input::placeholder { color:#767c88; opacity:1; }
.form-input:focus { border-color:#bc965a; box-shadow:0 0 0 3px rgba(188,150,90,0.15); }
.form-label { display:block; font-size:12px; font-weight:600; color:#4a3f2f; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.04em; }
/* ======================== BUTTONS ======================== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.15s; border:none; }
.btn-primary { background:#1d355b; color:#fff; }
.btn-primary:hover { background:#162843; }
/* No tema dark o fundo já é navy, então o botão azul escuro some. Usa um azul
mais claro/vivo para os botões de ação contrastarem sobre o fundo escuro. */
html.theme-dark .btn-primary { background:#3a6fd6 !important; color:#fff !important; }
html.theme-dark .btn-primary:hover { background:#2f5cb0 !important; }
.btn-gold { background:#bc965a; color:#fff; }
.btn-gold:hover { background:#a07d45; }
.btn-secondary { background:#f0ede8; color:#4a3f2f; border:1px solid #d6d0c8; }
.btn-secondary:hover { background:#e5e0d8; }
.btn-danger { background:#fee2e2; color:#b91c1c; }
.btn-danger:hover { background:#fecaca; }
.btn-success { background:#dcfce7; color:#15803d; }
.btn-success:hover { background:#bbf7d0; }
.btn-warning { background:#fef9c3; color:#a16207; }
.btn-warning:hover { background:#fef08a; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
/* ======================== TABLE ======================== */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:7px 10px; font-size:10.5px; font-weight:700; color:#5a6577; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid #e4e7ee; background:#f3f5f9; }
/* Cabeçalho segue a classe de alinhamento (senão a regra acima, mais específica
que .text-right/.text-center, mantinha o TH à esquerda e desalinhava dos
valores numéricos, que ficam à direita). */
.data-table th.text-right { text-align:right; }
.data-table th.text-center { text-align:center; }
.data-table td { padding:8px 10px; font-size:13px; color:#25303f; border-bottom:1px solid #eef1f6; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#f3f5f9; }
/* ======================== KANBAN ======================== */
.kanban-col { background:#f0ede8; border-radius:10px; min-width:250px; padding:12px; }
.kanban-card { background:#fff; border-radius:8px; padding:12px; margin-bottom:8px; border:1px solid #e8e4dc; cursor:pointer; transition:box-shadow 0.15s; }
.kanban-card:hover { box-shadow:0 4px 16px rgba(29,53,91,0.12); border-color:#bc965a; }
/* ======================== PRIORITY ======================== */
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.priority-baixa { background:#9ca3af; }
.priority-normal { background:#3b82f6; }
.priority-alta { background:#f59e0b; }
.priority-urgente { background:#ef4444; }
/* ======================== RECONCILIATION ======================== */
.recon-matched { background:#f0fdf4 !important; }
.recon-ignored { background:#fafafa !important; opacity:0.6; }
.recon-unmatched { background:#fff; }
.recon-unmatched:hover { background:#fefce8; }
.drop-zone { border:2px dashed #d6d0c8; border-radius:12px; padding:40px; text-align:center; transition:all 0.2s; cursor:pointer; }
.drop-zone:hover, .drop-zone.drag-over { border-color:#bc965a; background:#fdf8f0; }
/* ======================== LAYOUT ======================== */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.empty-state { text-align:center; padding:60px 20px; color:#a09080; }
.empty-state i { font-size:48px; margin-bottom:16px; opacity:0.25; display:block; }
.loading { display:flex; align-items:center; justify-content:center; padding:60px; }
/* ======================== SCROLLBAR ======================== */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cdd3dd; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#bc965a; }
/* ======================== SIDEBAR ======================== */
/* Fundo "planta baixa" (mesma identidade da tela de login): gradiente navy
com brilho dourado no topo + malha quadriculada discreta. */
/* Fusão das opções 1+2 do estudo: preenchimento navy sólido premium (Op.2)
com a malha técnica de blueprint por cima (Op.1 — linhas azuladas fina+larga),
e item ativo como "pílula" dourada (Op.2). */
.sidebar {
overflow:hidden;
/* Slate Frio — MESMA cor nos dois temas (pedido do cliente): azul-ardósia
que casa tanto com o cinza do tema claro quanto com o navy do escuro. */
background:linear-gradient(180deg,#1b2230 0%,#141a24 60%,#10151d 100%);
}
/* Hover discreto e calmo (menos "flash" branco que antes). */
.sidebar-hover:hover { background:rgba(255,255,255,0.05); border-radius:9px; }
/* Item ativo: pílula suave + indicador dourado FINO (um destaque, não três).
Dourado reservado ao ativo e à logo — o resto usa um tom neutro único. */
.sidebar-active { background:rgba(210,178,110,0.12); border-radius:9px; box-shadow:inset 3px 0 0 #d4b07a; }
.sidebar-active span { color:#fff !important; }
/* Grupo aberto (contém a página atual) — situa o usuário na navegação. */
.sidebar-group-active { background:rgba(210,178,110,0.10); border-radius:9px; box-shadow:inset 3px 0 0 #d4b07a; }
/* ── Barra superior de SEÇÕES (macro-áreas) ────────────────────────── */
.vx-sectionbar {
height:44px; min-height:44px; background:#fff; border-bottom:1px solid #e8e4dc;
scrollbar-width:none;
}
.vx-sectionbar::-webkit-scrollbar { display:none; }
.vx-sectab {
appearance:none; border:0; background:transparent; cursor:pointer;
padding:6px 14px; margin:6px 0; border-radius:9px; white-space:nowrap;
font-size:14px; color:#6b5e4a; transition:background .15s,color .15s;
}
.vx-sectab i { color:#bc965a; }
.vx-sectab:hover { background:#f3efe8; }
/* Aba ATIVA bem destacada: fundo dourado sólido suave + anel + sublinhado gold. */
.vx-sectab-on {
background:linear-gradient(180deg,rgba(188,150,90,0.30),rgba(188,150,90,0.20));
color:#1d355b; font-weight:700;
box-shadow:inset 0 0 0 1px rgba(188,150,90,0.6), 0 2px 0 -0.5px #bc965a;
}
.vx-sectab-on i { color:#a67f43; }
/* Tema escuro */
html.theme-dark .vx-sectionbar { background:var(--vx-surface); border-bottom-color:var(--vx-line); }
html.theme-dark .vx-sectab { color:var(--vx-ink-soft); }
html.theme-dark .vx-sectab i { color:var(--vx-gold); }
html.theme-dark .vx-sectab:hover { background:rgba(255,255,255,0.06); }
html.theme-dark .vx-sectab-on {
background:linear-gradient(180deg,rgba(217,189,139,0.34),rgba(217,189,139,0.18));
color:#fff;
box-shadow:inset 0 0 0 1px rgba(217,189,139,0.65), 0 2px 0 -0.5px var(--vx-gold);
}
html.theme-dark .vx-sectab-on i { color:var(--vx-gold); }
/* ======================== RESPONSIVE ======================== */
@media (max-width:768px) {
.sidebar { position:fixed; z-index:30; height:100%; }
}
[x-cloak] { display:none !important; }
.gold-text { color:#bc965a; }
.navy-text { color:#1d355b; }
/* ======================== TEMA ESCURO (PADRÃO) — navy + dourado ========================
Identidade do "artifact": superfícies navy profundas (#0f141e / #161d2b),
bordas frias sutis (#2a3346), texto #e8ecf3 e acento dourado #d9bd8b.
É o tema PADRÃO do ERP (aplicado no antes da pintura); o claro é
opcional (html.theme-light).
Cobertura: a maioria dos elementos usa classes (.card, .kpi-card,
.data-table, .btn-*, .badge-*) e é sobrescrita abaixo. Texto/bordas
inline (style="color:#...") são alcançados por seletores de atributo
nos tons hex conhecidos do design system. */
:root {
/* Paleta do modo escuro alinhada ao "Roteiro de lançamento" (/ios-launch):
navy profundo e encorpado (não preto-frio), superfícies em azul-marinho e
BRANCO bem destacado sobre o fundo. Mesma identidade na web e no app. */
/* Separação página↔superfície ampliada: o fundo fica mais profundo e as
superfícies (cards, tabelas) mais claras/encorpadas, para os cards
destacarem-se do navy em vez de "chapar". Borda um pouco mais viva define
a borda dos cards. */
--vx-page:#0b1626; --vx-surface:#182b48; --vx-surface-2:#213456;
--vx-line:#33496a; --vx-line-soft:#293b56;
--vx-ink:#eef3fb; --vx-ink-soft:#b7c6dd; --vx-muted:#8497b4;
--vx-gold:#d9bd8b; --vx-gold-strong:#bc965a;
/* Títulos/valores (.navy-text) no escuro: branco levemente azulado, bem
destacado sobre o navy — não o azul lavado anterior. Links reais usam
--vx-link. */
--vx-navy-link:#e9f1fd; --vx-link:#8fb2ea;
}
html.theme-dark { background:var(--vx-page); color-scheme: dark; }
html.theme-dark body { background:var(--vx-page); color:var(--vx-ink); }
/* Tema CLARO (padrão): reafirma o fundo cinza médio em html/body E na área de
conteúdo (.app-main). Necessário porque o tema escuro pinta html/body de navy;
sem reafirmar aqui, a área de conteúdo podia herdar/reter o navy. */
html:not(.theme-dark),
html:not(.theme-dark) body { background:#e6e6e6; }
html:not(.theme-dark) .app-main { background:#e6e6e6; }
html.theme-dark .card,
html.theme-dark .kpi-card,
html.theme-dark .kanban-card,
html.theme-dark .form-input,
html.theme-dark .btn-secondary,
html.theme-dark .bg-white {
background:var(--vx-surface) !important;
border-color:var(--vx-line) !important;
color:var(--vx-ink);
}
html.theme-dark .card { box-shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.30) !important; }
html.theme-dark .kanban-col { background:var(--vx-surface-2) !important; border:1px solid var(--vx-line-soft) !important; }
html.theme-dark .kanban-card:hover { box-shadow:0 6px 22px rgba(0,0,0,.45) !important; border-color:var(--vx-gold-strong) !important; }
html.theme-dark .data-table th { background:var(--vx-surface-2) !important; color:var(--vx-ink-soft) !important; border-color:var(--vx-line) !important; }
html.theme-dark .data-table td { color:var(--vx-ink) !important; border-color:var(--vx-line-soft) !important; }
html.theme-dark .data-table tbody tr:hover { background:#212c40 !important; }
html.theme-dark .empty-state { color:var(--vx-muted) !important; }
html.theme-dark .form-input { color:var(--vx-ink) !important; color-scheme: dark; }
html.theme-dark .form-input::placeholder { color:#63708a !important; }
html.theme-dark .form-input:focus { border-color:var(--vx-gold-strong) !important; box-shadow:0 0 0 3px rgba(188,150,90,0.22) !important; }
html.theme-dark .form-label { color:var(--vx-ink-soft) !important; }
html.theme-dark .btn-secondary { color:var(--vx-ink) !important; }
html.theme-dark .btn-secondary:hover { background:#232d40 !important; }
html.theme-dark .navy-text { color:var(--vx-navy-link) !important; }
html.theme-dark .gold-text { color:var(--vx-gold) !important; }
html.theme-dark .drop-zone { border-color:var(--vx-line) !important; }
html.theme-dark .drop-zone:hover, html.theme-dark .drop-zone.drag-over { border-color:var(--vx-gold-strong) !important; background:#20283a !important; }
html.theme-dark ::-webkit-scrollbar-thumb { background:#33405a; }
html.theme-dark ::-webkit-scrollbar-thumb:hover { background:var(--vx-gold-strong); }
/* Barras de destaque dos KPIs — no escuro o navy (#1d355b) somia sobre o card.
Tons mais claros/vivos para a barra "ler" contra a superfície e dar variação
cromática (menos azul chapado). */
html.theme-dark .kpi-navy::before { background:#5b8fd6; }
html.theme-dark .kpi-gold::before { background:var(--vx-gold); }
html.theme-dark .kpi-green::before { background:#34d17f; }
html.theme-dark .kpi-blue::before { background:#5b9bf0; }
html.theme-dark .kpi-red::before { background:#f06a6a; }
html.theme-dark .kpi-yellow::before { background:#f0b445; }
html.theme-dark .kpi-purple::before { background:#a98bf0; }
/* Card do KPI com um leve degradê (topo mais claro) para ganhar volume e não
ficar um bloco navy uniforme. */
html.theme-dark .kpi-card { background:linear-gradient(180deg,#1c3050 0%,var(--vx-surface) 100%) !important; }
/* Sidebar Slate Frio é a mesma nos dois temas (definida em .sidebar); sem
override por tema. */
/* Badges — preenchimento saturado sobre a superfície escura. */
html.theme-dark .badge-gray { background:#33405a !important; color:#dbe3f0 !important; }
html.theme-dark .badge-blue { background:#245081 !important; color:#bcdcff !important; }
html.theme-dark .badge-navy { background:#2c5391 !important; color:#d3e4ff !important; }
html.theme-dark .badge-gold { background:#6a5526 !important; color:#f4cd7e !important; }
html.theme-dark .badge-yellow { background:#6a5a1c !important; color:#ffe483 !important; }
html.theme-dark .badge-green { background:#1f5233 !important; color:#8ff0b3 !important; }
html.theme-dark .badge-red { background:#5c2626 !important; color:#ffa3a3 !important; }
html.theme-dark .badge-purple { background:#42305e !important; color:#dab6ff !important; }
/* Botões com fundo pastel (classe) */
html.theme-dark .btn-danger { background:#3a1818 !important; color:#ff8a8a !important; }
html.theme-dark .btn-danger:hover { background:#4a1f1f !important; }
html.theme-dark .btn-success { background:#16331f !important; color:#6ee7a0 !important; }
html.theme-dark .btn-success:hover { background:#1c4128 !important; }
html.theme-dark .btn-warning { background:#3d3414 !important; color:#f5d76e !important; }
html.theme-dark .btn-warning:hover { background:#4a3f18 !important; }
/* Texto secundário inline (cores hex específicas do design system) */
html.theme-dark [style*="color:#a09080"], html.theme-dark [style*="color: #a09080"] { color:var(--vx-muted) !important; }
html.theme-dark [style*="color:#6b5e4a"], html.theme-dark [style*="color: #6b5e4a"] { color:var(--vx-ink-soft) !important; }
html.theme-dark [style*="color:#4a3f2f"], html.theme-dark [style*="color: #4a3f2f"] { color:#c3cee0 !important; }
html.theme-dark [style*="color:#2c2416"], html.theme-dark [style*="color: #2c2416"] { color:var(--vx-ink) !important; }
html.theme-dark [style*="color:#1a1a1a"], html.theme-dark [style*="color: #1a1a1a"] { color:var(--vx-ink) !important; }
html.theme-dark [style*="color:#92400e"], html.theme-dark [style*="color: #92400e"] { color:#f0b86e !important; }
/* REGRA: fundo azul → texto NUNCA azul. Texto navy da marca (inline) vira claro. */
html.theme-dark [style*="color:#1d355b"], html.theme-dark [style*="color: #1d355b"],
html.theme-dark [style*="color:#1B3A6B"], html.theme-dark [style*="color: #1B3A6B"],
html.theme-dark [style*="color:#1b3a6b"], html.theme-dark [style*="color: #1b3a6b"],
html.theme-dark [style*="color:#1a2e44"], html.theme-dark [style*="color: #1a2e44"] { color:var(--vx-navy-link) !important; }
/* Tons de texto ESCUROS (marrom/oliva/cinza) não mapeados antes — sumiam no
fundo escuro. Texto principal → claro; secundários → tom suave. */
html.theme-dark [style*="color:#3a3730"], html.theme-dark [style*="color: #3a3730"],
html.theme-dark [style*="color:#3a3324"], html.theme-dark [style*="color: #3a3324"],
html.theme-dark [style*="color:#2c2c2c"], html.theme-dark [style*="color: #2c2c2c"],
html.theme-dark [style*="color:#25303f"], html.theme-dark [style*="color: #25303f"] { color:var(--vx-ink) !important; }
html.theme-dark [style*="color:#b0a090"], html.theme-dark [style*="color: #b0a090"],
html.theme-dark [style*="color:#b0a690"], html.theme-dark [style*="color: #b0a690"],
html.theme-dark [style*="color:#c9c0b4"], html.theme-dark [style*="color: #c9c0b4"],
html.theme-dark [style*="color:#8a7a55"], html.theme-dark [style*="color: #8a7a55"] { color:var(--vx-muted) !important; }
/* Bordas inline claras → bordas escuras sutis */
html.theme-dark [style*="border-color:#e8e4dc"], html.theme-dark [style*="border-color: #e8e4dc"] { border-color:var(--vx-line) !important; }
html.theme-dark [style*="border-color:#d6d0c8"], html.theme-dark [style*="border-color: #d6d0c8"] { border-color:var(--vx-line) !important; }
/* Superfícies claras inline (kpi-cards, cabeçalhos, painéis) → superfície escura.
Cobre #f…, #e8…, #d… e o branco puro (#fff / #ffffff / white). */
html.theme-dark [style*="background:#f"], html.theme-dark [style*="background: #f"],
html.theme-dark [style*="background:#e8"], html.theme-dark [style*="background: #e8"],
html.theme-dark [style*="background:#d"], html.theme-dark [style*="background: #d"],
html.theme-dark [style*="background:#fff"], html.theme-dark [style*="background: #fff"],
html.theme-dark [style*="background-color:#fff"], html.theme-dark [style*="background-color: #fff"] {
background:var(--vx-surface) !important;
}
/* Fundos-tint claros do Tailwind (bg-*-50) usados como realce de linha/seção. */
html.theme-dark .bg-red-50, html.theme-dark .hover\:bg-red-50:hover { background-color:#3a1f22 !important; }
html.theme-dark .bg-green-50, html.theme-dark .hover\:bg-green-50:hover { background-color:#123020 !important; }
html.theme-dark .bg-yellow-50, html.theme-dark .hover\:bg-yellow-50:hover { background-color:#332e18 !important; }
html.theme-dark .bg-blue-50, html.theme-dark .hover\:bg-blue-50:hover { background-color:#1a2c49 !important; }
html.theme-dark .bg-orange-50, html.theme-dark .hover\:bg-orange-50:hover { background-color:#3a2a1a !important; }
html.theme-dark .bg-purple-50, html.theme-dark .hover\:bg-purple-50:hover { background-color:#281f3d !important; }
html.theme-dark .bg-gray-50, html.theme-dark .hover\:bg-gray-50:hover,
html.theme-dark .bg-gray-100, html.theme-dark .hover\:bg-gray-100:hover { background-color:#1b2434 !important; }
/* Tailwind text-gray-* escuros (texto secundário) → claros no dark */
html.theme-dark .text-gray-900, html.theme-dark .text-gray-800, html.theme-dark .text-gray-700 { color:var(--vx-ink) !important; }
html.theme-dark .text-gray-600, html.theme-dark .text-gray-500 { color:var(--vx-ink-soft) !important; }
html.theme-dark .text-gray-400 { color:var(--vx-muted) !important; }
html.theme-dark .border-gray-200, html.theme-dark .border-gray-100, html.theme-dark .border { border-color:var(--vx-line-soft) !important; }
html.theme-dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--vx-line-soft) !important; }
/* ============================================================
App nativo (Capacitor iOS/Android) — refino da experiência
Tudo escopado em html.native-app / html.native-ios: NADA disso
afeta o site no navegador nem o desktop.
============================================================ */
/* Botão ☰ (gaveta): oculto por padrão; só no app nativo em telas estreitas. */
.nav-burger { display:none; }
html.native-app .nav-burger { display:inline-flex; align-items:center; justify-content:center; }
@media (min-width:768px) { html.native-app .nav-burger { display:none; } }
/* ---- Item 2: Safe-area (notch / status bar / home indicator) — iOS ---- */
@supports (padding:env(safe-area-inset-top)) {
/* NÃO somar env(safe-area-inset-top) aqui: com overlaysWebView:false a webview
já começa ABAIXO da status bar, então este padding duplicava o espaço e
deixava uma faixa vazia no topo dos menus internos (a home, sem este padding,
já ficava correta). Cabeçalho com altura normal. */
html.native-ios .app-header { height:3.5rem; min-height:3.5rem; padding-top:0; }
/* Base: o rodapé da sidebar (Sair/versão) não pode ficar sob o home indicator
no iPad — reserva a safe-area embaixo. (Topo não soma safe-area: ver header.) */
html.native-ios aside.sidebar { padding-bottom:env(safe-area-inset-bottom); }
html.native-ios .app-main { padding-bottom:env(safe-area-inset-bottom); }
}
/* ---- App iOS (celular): sem menu lateral — a navegação é 100% pela grade ---- */
@media (max-width:767px) {
/* O menu lateral/gaveta deixa de existir no app: a tela inicial em grade é a
única navegação. Removemos a aside, a gaveta e o backdrop por completo. */
html.native-app aside.sidebar { display:none !important; }
html.native-app .nav-backdrop { display:none !important; }
html.native-app .nav-burger { display:none !important; }
/* Sem a gaveta, o conteúdo ocupa a largura toda. */
html.native-app .app-header { padding-left:12px; padding-right:12px; }
/* Espaço para a barra inferior (dock) não cobrir o fim do conteúdo. */
html.native-app .app-main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
/* Rodapé de versão da home: folga extra para NUNCA ficar atrás da dock
flutuante (antes a linha "v..." colava/sumia atrás da pílula inferior). */
html.native-app .hg-ver { margin:22px 0 34px; font-weight:600; }
}
/* App iOS (tema escuro): o cabeçalho usa o MESMO navy da status bar nativa
(#1d355b) para o topo virar um bloco único e coeso — elimina a "faixa vazia"
de dois tons e dá contraste em relação à página (mais escura). Título em
branco e subtítulo dourado reforçam a legibilidade sobre o navy. */
html.native-app.theme-dark .app-header {
background:#1d355b !important;
border-bottom-color:#294064 !important;
}
html.native-app.theme-dark .app-header .navy-text { color:#ffffff !important; }
/* Identidade do app: combinação das duas verticais — Building (navy) +
Marmoraria (verde), com o dourado como acento comum. Fundo sutil navy→verde
no app (tema escuro), reforçando a marca-mãe Vertex. */
/* App iOS: PÁGINA FIXA — trava o "arrastar"/bounce do documento inteiro
(o cabeçalho não deve descer deixando um vão no topo). Só a área de conteúdo
(.app-main) rola, na vertical.
IMPORTANTE: isto vale apenas no CELULAR (≤767). No iPad mantemos o layout
desktop (sidebar + dashboard), cujo shell já é `flex h-screen overflow-hidden`
com rolagem interna própria (nav e .app-main). Travar o body no iPad cortava
o fim da sidebar/rodapé e o conteúdo — por isso o lock fica escopado ao
celular. */
@media (max-width:767px) {
html.native-app { overflow:hidden; height:100%; overscroll-behavior:none; }
html.native-app body { position:fixed; inset:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
html.native-app.theme-dark body { position:fixed; inset:0; }
}
html.native-app .app-main { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
html.native-app.theme-dark body { background:linear-gradient(172deg,#16294a 0%,#0f1f35 55%,#0d1f38 100%); }
/* Identidade: fundo NAVY (Building) + ícones VERDES (Marmoraria) distribuídos
pela grade, dourado no acento. */
.hg-ic { color:#2f9e6a; }
.theme-dark .hg-ic { color:#46c68c; }
.hg-sub-ic, .hg-sheet-ic { color:#2f9e6a; }
.theme-dark .hg-sub-ic, .theme-dark .hg-sheet-ic { color:#46c68c; }
/* ===== Home "painel" (app iOS) — layout premium tipo dashboard ===== */
.hp-page { max-width:640px; margin:0 auto; padding:14px 16px 20px; color:#eaf0f8; }
/* Cabeçalho */
.hp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
/* App iOS: painel do topo (logo + busca + avatar) TRAVADO — o conteúdo rola por
baixo dele, em vidro (glass), no mesmo espírito da barra inferior. */
html.native-app .hp-top {
position:sticky; top:0; z-index:20;
margin:-14px -16px 10px; padding:12px 16px 10px;
background:rgba(13,23,40,.82);
backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
}
.hp-brand { display:flex; align-items:center; gap:10px; }
/* Logo horizontal (badge VERTEX BUILDING) no cabeçalho — substitui o V+texto. */
.hp-logo-h { height:40px; width:auto; display:block; }
/* Saudação ao lado da logo (topo compacto) */
.hp-greet { flex:1; min-width:0; padding:0 6px 0 10px; }
.hp-greet b { display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; color:#eaf0f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-greet small { display:block; font-size:11px; font-weight:600; color:#93a3bd; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Tiles no padrão "app icon" (estilo iOS/Lightroom): squircle com brilho no
topo (gloss), bisel nas bordas (inset) e relevo no glifo — sobre a cor de
cada módulo. Mantém a cor por módulo (facilita escanear) com acabamento 3D. */
.hg-ic-c {
border:0 !important; border-radius:16px;
color:#fff !important;
box-shadow:
0 6px 15px rgba(20,40,74,.26),
inset 0 1.5px 0 rgba(255,255,255,.50),
inset 0 -5px 11px rgba(0,0,0,.28),
inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.hg-ic-c::before {
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 55%);
}
.hg-ic-c svg { color:#fff; filter:drop-shadow(0 1px .5px rgba(0,0,0,.32)) drop-shadow(0 -1px 0 rgba(255,255,255,.26)); position:relative; }
.hp-vbox { width:40px; height:40px; border-radius:9px; border:1.6px solid #bc965a; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; background:#1d355b; }
.hp-vbox svg { width:20px; height:22px; }
.hp-vlogo { width:100%; height:100%; object-fit:cover; }
.hp-btext b { display:block; font-size:15px; font-weight:800; letter-spacing:.09em; color:#eaf0f8; line-height:1; }
.hp-btext small { display:block; font-size:8px; letter-spacing:.34em; color:#bc965a; font-weight:700; margin-top:3px; }
.hp-tactions { display:flex; align-items:center; gap:10px; }
.hp-tbtn { width:40px; height:40px; border-radius:50%; background:#16233c; border:1px solid #2a3852; display:grid; place-items:center; color:#aeb9cc; cursor:pointer; }
.hp-tbtn svg { width:18px; height:18px; }
.hp-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(160deg,#e9d9bd,#c9a875); color:#1d355b; font-weight:800; font-size:16px; border:0; cursor:pointer; display:grid; place-items:center; }
/* Saudação + hero */
.hp-hero { position:relative; overflow:hidden; margin:12px 2px 2px; min-height:64px; }
.hp-hero-tx h2 { font-size:25px; font-weight:800; letter-spacing:-.02em; color:#eaf0f8; margin:0; }
.hp-hero-tx p { font-size:13px; color:#93a3bd; margin:5px 0 0; }
.hp-hero-art { position:absolute; right:-6px; top:-4px; width:140px; height:auto; opacity:.55; pointer-events:none; }
/* KPIs */
.hp-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.hp-kpi { text-align:left; background:#152036; border:1px solid #26364f; border-radius:15px; padding:11px 10px 9px; cursor:pointer; display:flex; flex-direction:column; }
.hp-kpi-ic { width:34px; height:34px; border-radius:50%; border:1.5px solid #bc965a; display:grid; place-items:center; color:#e0b34a; margin-bottom:7px; }
.hp-kpi-ic svg { width:18px; height:18px; }
.hp-kpi small { font-size:10px; color:#93a3bd; line-height:1.2; }
.hp-kpi b { font-size:19px; font-weight:800; color:#eaf0f8; letter-spacing:-.02em; margin-top:1px; }
.hp-kpi b.g { color:#3fc27a; } .hp-kpi b.d { color:#e86b62; }
.hp-kpi-link { font-size:10px; color:#bc965a; font-weight:600; margin-top:6px; }
/* Cards genéricos */
.hp-card { display:block; width:100%; text-align:left; background:#152036; border:1px solid #26364f; border-radius:16px; padding:15px 14px; margin-bottom:13px; cursor:pointer; font:inherit; color:inherit; }
.hp-card-h { display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:700; color:#eaf0f8; margin-bottom:14px; }
/* Ações rápidas — na identidade da iteração 3 (card com gradiente + sombra). */
.hp-qa { cursor:default; background:linear-gradient(160deg,#1b2b48,#16233c); box-shadow:0 2px 8px rgba(0,0,0,.30); }
.hp-qa-ic { border-radius:16px; }
.hp-qa-edit { background:none; border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:#bc965a; display:inline-flex; align-items:center; gap:5px; }
.hp-qa-empty { text-align:center; font-size:12px; color:#93a3bd; margin:8px 2px 0; }
.hg-sheet-note { font-size:11.5px; color:#93a3bd; margin:2px 4px 8px; }
.hp-qa-row { display:flex; justify-content:space-between; gap:4px; }
.hp-qa-btn { flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; color:#c3cee0; font-size:10px; font-weight:500; text-align:center; padding:0; font-family:inherit; }
.hp-qa-ic { width:52px; height:52px; border-radius:50%; border:1px solid #33425e; background:rgba(188,150,90,.07); display:grid; place-items:center; color:#e0b34a; transition:transform .12s; }
.hp-qa-btn:active .hp-qa-ic { transform:translateY(1px); }
.hp-qa-ic svg { width:22px; height:22px; }
.hp-qa-btn > span:last-child { line-height:1.15; }
/* Cards de seção */
.hp-sec { border-left:3px solid #bc965a; }
.hp-sec-top { display:flex; align-items:flex-start; gap:12px; }
.hp-sec-ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; border:1px solid #33425e; background:rgba(188,150,90,.07); display:grid; place-items:center; color:#e0b34a; }
.hp-sec-ic svg { width:24px; height:24px; }
.hp-sec-tx { flex:1; min-width:0; }
.hp-sec-tx b { display:block; font-size:16px; font-weight:700; color:#eaf0f8; }
.hp-sec-tx p { font-size:12.5px; color:#93a3bd; margin:3px 0 0; line-height:1.35; }
.hp-sec-chev { color:#5a6b86; font-size:14px; margin-top:3px; flex:0 0 auto; }
.hp-sec-foot { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid #212d43; }
.hp-sec-count { font-size:12px; font-weight:700; color:#bc965a; }
.hp-sec-mini { display:flex; align-items:center; gap:7px; color:#8fa0b8; }
.hp-mini { width:30px; height:30px; border-radius:50%; border:1px solid #33425e; display:grid; place-items:center; }
.hp-mini svg { width:15px; height:15px; }
.hp-mini-more { font-size:11px; letter-spacing:1px; color:#8fa0b8; }
/* Tema claro do app iOS: launcher em CINZA CLARO (antes era navy escuro).
Como a paleta base do painel foi feita para fundo escuro, aqui reajustamos
os textos/cards para ficarem legíveis sobre o cinza. Só afeta o app nativo. */
html.native-app:not(.theme-dark) .hp-page { background:#eceef2; color:#24314a; margin:-14px -16px; padding:14px 16px 20px; border-radius:0; }
html.native-app:not(.theme-dark) .hp-top { background:rgba(255,255,255,.82); border-bottom:1px solid rgba(20,40,74,.06); }
html.native-app:not(.theme-dark) .hp-greet b { color:#1d355b; }
html.native-app:not(.theme-dark) .hp-greet small { color:#6b7890; }
html.native-app:not(.theme-dark) .hp-tbtn { background:#ffffff; border-color:#e2e5ea; color:#56617a; }
html.native-app:not(.theme-dark) .hp-kpi,
html.native-app:not(.theme-dark) .hp-card { background:#ffffff; border-color:#e6e8ee; }
html.native-app:not(.theme-dark) .hp-kpi small,
html.native-app:not(.theme-dark) .hp-qa-empty,
html.native-app:not(.theme-dark) .hp-sec-tx p { color:#6b7890; }
html.native-app:not(.theme-dark) .hp-kpi b,
html.native-app:not(.theme-dark) .hp-card-h,
html.native-app:not(.theme-dark) .hp-sec-tx b { color:#1d355b; }
html.native-app:not(.theme-dark) .hp-qa { background:#ffffff; border:1px solid #e6e8ee; box-shadow:0 2px 8px rgba(20,40,74,.06); }
html.native-app:not(.theme-dark) .hp-qa-btn { color:#56617a; }
html.native-app:not(.theme-dark) .hp-qa-ic,
html.native-app:not(.theme-dark) .hp-sec-ic,
html.native-app:not(.theme-dark) .hp-mini { background:#f2f4f7; border-color:#e2e5ea; }
html.native-app:not(.theme-dark) .hp-sec-foot { border-top-color:#e6e8ee; }
html.native-app:not(.theme-dark) .hg-lb { color:#3f5170; }
/* ===== Navegação nativa: transição deslizante (push/voltar) ===== */
@keyframes vxSlideR { from { opacity:.35; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes vxSlideL { from { opacity:.35; transform:translateX(-28px); } to { opacity:1; transform:none; } }
html.native-app .app-main.vx-anim-fwd > * { animation:vxSlideR .26s cubic-bezier(.2,.7,.2,1); }
html.native-app .app-main.vx-anim-back > * { animation:vxSlideL .26s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
html.native-app .app-main.vx-anim-fwd > *, html.native-app .app-main.vx-anim-back > * { animation:none; }
}
/* ===== Formulários como BOTTOM-SHEET no app iOS =====
Os modais do ERP seguem o mesmo padrão: overlay
".fixed.inset-0.flex.items-center.justify-center.p-4" + um card interno
".bg-white.rounded-2xl". No app (tela estreita) convertemos esse padrão em
uma folha que sobe de baixo (estilo iOS), sem tocar no HTML de cada modal.
O ":has(> .bg-white)" restringe aos modais de conteúdo (poupa os lightboxes
de imagem, que não têm card branco). */
@media (max-width:767px) {
html.native-app .fixed.inset-0.items-center.justify-center:has(> .bg-white),
html.native-app .fixed.inset-0.items-center.justify-center:has(> .relative > .bg-white) {
align-items:flex-end !important; padding:0 !important;
}
html.native-app .fixed.inset-0.items-center.justify-center > .bg-white,
html.native-app .fixed.inset-0.items-center.justify-center > .relative.bg-white {
width:100% !important; max-width:100% !important; max-height:92vh !important;
margin:0 !important; border-radius:20px 20px 0 0 !important;
padding-bottom:env(safe-area-inset-bottom) !important;
animation:vxSheetUp .28s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
html.native-app .fixed.inset-0.items-center.justify-center > .bg-white,
html.native-app .fixed.inset-0.items-center.justify-center > .relative.bg-white { animation:none; }
}
/* "Puxador" (grab handle) no topo do card, quando ele tem cabeçalho fixo. */
html.native-app .fixed.inset-0.items-center.justify-center > .bg-white > .sticky:first-child,
html.native-app .fixed.inset-0.items-center.justify-center > .relative.bg-white > .sticky:first-child { position:relative; }
html.native-app .fixed.inset-0.items-center.justify-center > .bg-white > .sticky:first-child::before,
html.native-app .fixed.inset-0.items-center.justify-center > .relative.bg-white > .sticky:first-child::before {
content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
width:38px; height:4px; border-radius:3px; background:#d6d0c8;
}
}
@keyframes vxSheetUp { from { transform:translateY(100%); } to { transform:none; } }
/* ---- Item 3: legibilidade e toque no app ---- */
/* Inputs com >=16px evitam o zoom automático do iOS ao focar um campo. */
html.native-app input, html.native-app select, html.native-app textarea { font-size:16px; }
@media (max-width:767px) {
/* Tabelas largas rolam dentro do próprio container (não espremem a página). */
html.native-app .overflow-x-auto { -webkit-overflow-scrolling:touch; }
html.native-app .data-table { font-size:13px; }
/* Modais ocupam a largura util do celular. */
html.native-app .modal-card, html.native-app .modal-content { max-width:94vw; }
/* A área de conteúdo rola só na vertical; qualquer elemento levemente mais
largo que a viewport (ex.: , que não encolhe sozinho)
fica contido em vez de "vazar" para fora da tela. Tabelas largas continuam
rolando dentro do próprio .overflow-x-auto. */
html.native-app .app-main { overflow-x:hidden; }
html.native-app .app-main input,
html.native-app .app-main select,
html.native-app .app-main textarea { max-width:100%; }
html.native-app .app-main input[type="file"] { width:100%; box-sizing:border-box; }
}
/* ===== Tela inicial em grade — launcher do app iOS ===== */
/* Só aparece quando currentPage==='home', o que só ocorre no app (celular). */
.home-grid-page { max-width:640px; margin:0 auto; }
/* Cabeçalho: usuário logado + função + sair */
.hg-user { display:flex; align-items:center; gap:11px; padding:4px 2px 2px; }
.hg-user-av {
flex:0 0 auto; width:44px; height:44px; border-radius:50%;
display:grid; place-items:center; font-weight:800; font-size:17px;
color:#1d355b; background:linear-gradient(160deg,#e9d9bd,#d3b483);
box-shadow:0 2px 8px rgba(188,150,90,.35);
}
.hg-user-info { flex:1; min-width:0; line-height:1.25; }
.hg-user-info b { display:block; font-size:16px; font-weight:800; color:#1d355b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-user-info small { display:block; font-size:12px; font-weight:600; color:#9a8c74; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-logout {
flex:0 0 auto; width:40px; height:40px; border-radius:12px; cursor:pointer;
display:grid; place-items:center; font-size:16px; color:#e0574d;
background:rgba(224,87,77,.10); border:1px solid rgba(224,87,77,.22);
}
.hg-logout:active { background:rgba(224,87,77,.20); }
.hg-ver { text-align:center; font-size:11px; color:#a89a86; margin:28px 0 4px; }
.hg-sec {
font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:#bc965a; margin:24px 4px 12px; display:flex; align-items:center; gap:8px;
}
.hg-sec::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(188,150,90,.35),transparent); }
/* KPIs do topo (3 cards) */
.hg-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0 4px; }
.hg-kpi { background:linear-gradient(160deg,#f4f1ea,#fff); border:1px solid #e8e4dc; border-radius:14px; padding:10px 11px; box-shadow:0 2px 6px rgba(20,40,74,.05); width:100%; text-align:left; cursor:pointer; font-family:inherit; transition:transform .12s, border-color .12s; }
.hg-kpi:active { transform:translateY(1px); border-color:#bc965a; }
.hg-kpi small { display:block; font-size:10.5px; line-height:1.2; color:#8a99b0; margin-bottom:2px; }
.hg-kpi b { font-size:16px; font-weight:800; letter-spacing:-.02em; color:#1d355b; font-variant-numeric:tabular-nums; }
.hg-kpi-g b { color:#22945a; }
.hg-kpi-d b { color:#e0574d; }
.hg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px 8px; }
.hg-tile { background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; font:inherit; color:inherit; }
.hg-ic {
position:relative; width:58px; height:58px; border-radius:18px; display:grid; place-items:center;
background:linear-gradient(160deg,#f4f1ea,#ffffff); border:1px solid #e8e4dc; color:#1d355b;
box-shadow:0 2px 6px rgba(20,40,74,.06); transition:transform .12s, border-color .12s;
}
.hg-tile:active .hg-ic { transform:translateY(1px); border-color:#bc965a; }
.hg-ic svg { width:27px; height:27px; }
.hg-ic.is-off { opacity:.45; }
/* dois pontinhos dourados = grupo com vários destinos (abre sub-grade) */
.hg-ic .hg-more { position:absolute; bottom:6px; right:8px; width:4px; height:4px; border-radius:50%; background:#bc965a; box-shadow:-6px 0 0 #bc965a; }
.hg-lb { font-size:11px; line-height:1.15; text-align:center; color:#4a5a72; font-weight:600; max-width:76px; }
.hg-back { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#bc965a; background:none; border:0; padding:8px 2px; margin-bottom:4px; cursor:pointer; }
.hg-sub-title { display:flex; align-items:center; gap:11px; font-size:17px; font-weight:800; color:#1d355b; margin:2px 2px 18px; }
.hg-sub-ic { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(160deg,#f4f1ea,#fff); border:1px solid #e8e4dc; color:#1d355b; }
.hg-sub-ic svg { width:22px; height:22px; }
/* Barra inferior (dock) do app — pílula flutuante em vidro (glass) */
.hg-dock {
position:fixed; left:14px; right:14px; z-index:30;
/* Sobe a dock ACIMA da área do indicador de início (home indicator) do iPhone.
Sem o env(safe-area-inset-bottom), as células (sobretudo os rótulos) caíam na
faixa de gestos do sistema, onde o WKWebView engole o toque — daí a barra
"não clicável". O .app-main já reserva 92px + safe-area, então continua
cabendo sem sobrepor o conteúdo. */
bottom:calc(6px + env(safe-area-inset-bottom));
display:flex; justify-content:space-around; align-items:stretch; gap:2px;
padding:6px 8px;
background:rgba(18,28,48,.58);
border:1px solid rgba(255,255,255,.10);
border-radius:30px;
backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6);
box-shadow:0 16px 42px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
}
.hg-dk { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; font-weight:600; color:#9aa7bd; background:none; border:0; cursor:pointer; font-family:inherit; padding:8px 2px; white-space:nowrap; border-radius:20px; transition:color .15s; }
.hg-dk svg { width:21px; height:21px; }
.hg-dk.on { color:#f3ddb0; }
/* Item ativo: "pílula" translúcida dourada por trás (estilo glass da referência) */
.hg-dk.on::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:18px; background:rgba(243,221,176,.15); border:1px solid rgba(243,221,176,.20); }
.hg-dk-badge { position:absolute; top:2px; left:50%; transform:translateX(4px); min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:#e0574d; color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; line-height:1; }
/* Folha "Menu"/"Notificações": cabeçalhos de seção e linha com título+sub. */
.hg-sheet-sec { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#bc965a; margin:14px 4px 2px; }
.hg-sheet-tx { display:flex; flex-direction:column; min-width:0; }
.hg-sheet-tx b { font-size:13.5px; font-weight:600; white-space:normal; }
.hg-sheet-tx small { font-size:11.5px; color:#93a3bd; white-space:normal; }
/* Folha "Recentes" (bottom sheet) */
.hg-sheet-backdrop { position:fixed; inset:0; z-index:48; background:rgba(8,12,20,.45); }
.hg-sheet {
position:fixed; left:0; right:0; bottom:0; z-index:49; max-height:60vh; overflow-y:auto;
background:#fff; border-radius:20px 20px 0 0; padding:4px 14px calc(18px + env(safe-area-inset-bottom));
box-shadow:0 -18px 50px rgba(0,0,0,.28);
}
.hg-sheet-h { display:flex; align-items:center; justify-content:space-between; padding:12px 2px 8px; position:sticky; top:0; background:#fff; }
.hg-sheet-h b { font-size:15px; font-weight:800; color:#1d355b; }
.hg-sheet-h button { color:#8a99b0; background:none; border:0; font-size:16px; cursor:pointer; }
.hg-sheet-empty { text-align:center; color:#a09080; font-size:13px; padding:22px 0; }
.hg-sheet-item { display:flex; align-items:center; gap:12px; width:100%; padding:11px 6px; background:none; border:0; border-bottom:1px solid #f0ede8; cursor:pointer; font:inherit; color:#1d355b; font-weight:600; font-size:14px; text-align:left; }
.hg-sheet-ic { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#f4f1ea; border:1px solid #e8e4dc; color:#1d355b; }
.hg-sheet-ic svg { width:19px; height:19px; }
/* Tema escuro (padrão do ERP) */
.theme-dark .hg-user-info b { color:#eaf0f8; }
.theme-dark .hg-user-info small { color:#93a3bd; }
.theme-dark .hg-ver { color:#6b7891; }
.theme-dark .hg-kpi { background:linear-gradient(160deg,#1b2b48,#16233c); border-color:#26364f; box-shadow:0 2px 8px rgba(0,0,0,.30); }
.theme-dark .hg-kpi small { color:#93a3bd; }
.theme-dark .hg-kpi b { color:#eaf0f8; }
.theme-dark .hg-kpi-g b { color:#3fc27a; }
.theme-dark .hg-kpi-d b { color:#e86b62; }
.theme-dark .hg-ic { background:linear-gradient(160deg,#1b2b48,#16233c); border-color:#26364f; box-shadow:0 2px 8px rgba(0,0,0,.35); color:#dfe8f6; }
.theme-dark .hg-lb { color:#c3cee0; }
.theme-dark .hg-sub-title { color:#eaf0f8; }
.theme-dark .hg-sub-ic { background:linear-gradient(160deg,#1b2b48,#16233c); border-color:#26364f; color:#dfe8f6; }
/* dock glass: estilo base já cobre os dois temas (ver .hg-dock acima) */
.theme-dark .hg-sheet { background:#16233c; box-shadow:0 -18px 50px rgba(0,0,0,.6); }
.theme-dark .hg-sheet-h { background:#16233c; }
.theme-dark .hg-sheet-h b { color:#eaf0f8; }
.theme-dark .hg-sheet-item { color:#dfe8f6; border-bottom-color:#26364f; }
.theme-dark .hg-sheet-ic { background:#1b2b48; border-color:#26364f; color:#dfe8f6; }
/* ============================================================
Tema Vertex Marmoraria — verde floresta (#1f4a3d) + dourado
Escopo: página de orçamento da Marmoraria (.marmo-theme).
Remapeia o navy do tema padrão para o verde da marca; o
dourado (gold-text / btn-gold) é mantido, pois já é da marca.
============================================================ */
.marmo-theme { border-top:4px solid #1f4a3d; }
/* No workspace inteiro (classe no ) o border-top viraria uma barra solta —
o indicador verde do modo Marmoraria vem das cores remapeadas, não da borda. */
body.marmo-theme { border-top:0; }
.marmo-theme .navy-text { color:#1f4a3d !important; }
.marmo-theme .btn-primary { background:#1f4a3d !important; color:#fff !important; }
.marmo-theme .btn-primary:hover { background:#173a30 !important; }
.marmo-theme .kpi-navy::before { background:#1f4a3d !important; }
.marmo-theme .badge-navy,
.marmo-theme .badge-blue { background:#e2efe9 !important; color:#1f4a3d !important; }
/* Barra do cabeçalho e rodapé de totais com leve tom verde da marca */
.marmo-theme .marmo-headbar { background:#f2f7f4 !important; border-color:#d7e6dd !important; }
.marmo-theme .marmo-piece-num { background:#1f4a3d !important; }
/* ============================================================
Superfícies "documento" claras (.force-light) — builders de orçamento
------------------------------------------------------------
Os builders de orçamento (Marmoraria/Building) são telas-documento com
fundo creme e cartões brancos (identidade da proposta). O tema escuro é o
PADRÃO e escurece .card/.form-input globalmente — dentro dessas telas isso
criava FUNDO NAVY sob textos inline escuros (rótulos, valores), escondendo
os campos e o texto. Em .force-light mantemos tudo claro e legível mesmo no
tema escuro, e o color-scheme claro conserta o popup nativo dos