/* ORGANEX — estilos do app (extraído do app.html em 2026-06-11) */
:root {
/* TOKENS DE TEMA — alterados por [data-theme="..."] */
--primary: #F97316;
--primary-rgb: 249, 115, 22;
/* Backgrounds (default = dark, sobrescritos em temas claros) */
--bg: #16181d; --bg2: #1c1e24; --bg3: #22242a; --bg4: #2a2d35;
--border: rgba(255,255,255,0.08);
--border-active: rgba(var(--primary-rgb), 0.6);
/* Aliases retrocompat — TODOS seguem o tema automaticamente */
--blue: var(--primary);
--blue2: var(--primary);
--blue3: var(--primary);
--blue-glow: rgba(var(--primary-rgb), 0.15);
--cyan: #00B8D9;
--text: #ffffff; --text2: #94a3b8; --text3: #64748b;
--green: #2dd4a0; --red: #ff5f5f; --yellow: #ffd600; --orange: #f97316;
--purple: #a855f7;
--radius: 16px; --radius-sm: 10px;
--safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px);
}
/* ============================================================
SISTEMA DE TEMAS — Dark/Light Premium
============================================================ */
[data-theme="dark"] {
--bg: #16181d; --bg2: #1c1e24; --bg3: #22242a; --bg4: #2a2d35;
--border: rgba(255,255,255,0.08);
--text: #ffffff; --text2: #94a3b8; --text3: #64748b;
}
[data-theme="light"] {
--primary: #ea580c; --primary-rgb: 234, 88, 12;
/* Fundo cinza-azulado mais ESCURO pra cards brancos pularem da tela (igual no tema escuro) */
--bg: #c8d3e0; --bg2: #ffffff; --bg3: #f1f5f9; --bg4: #e2e8f0;
/* Bordas finas mas presentes */
--border: rgba(15,23,42,0.10);
/* Textos escuros pra alta legibilidade de dia */
--text: #0f172a; --text2: #1e293b; --text3: #475569;
}
/* Body com gradiente sutil pra dar profundidade ao fundo */
[data-theme-mode="light"] body {
background: linear-gradient(180deg, #cdd8e4 0%, #c0ccdb 100%);
}
/* Header glassmórfico com borda sólida */
[data-theme-mode="light"] .header {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(15,23,42,0.10);
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px rgba(15,23,42,0.05);
}
/* Cards brancos com sombra elevada estilo Material — pulam da tela */
[data-theme-mode="light"] .config-section,
[data-theme-mode="light"] .vagas-painel,
[data-theme-mode="light"] .plano-atual-card,
[data-theme-mode="light"] .plano-card,
[data-theme-mode="light"] .os-card,
[data-theme-mode="light"] .k-card,
[data-theme-mode="light"] .config-pkg-item,
[data-theme-mode="light"] .admin-loja-card,
[data-theme-mode="light"] .hist-item,
[data-theme-mode="light"] .ranking-item,
[data-theme-mode="light"] .stat-card,
[data-theme-mode="light"] .dash-card,
[data-theme-mode="light"] .vertical-card,
[data-theme-mode="light"] .modal-sheet,
[data-theme-mode="light"] .modal-config-sheet,
[data-theme-mode="light"] .ticket-card,
[data-theme-mode="light"] .loja-code-card {
background: #ffffff;
box-shadow:
0 1px 2px rgba(15,23,42,0.06),
0 6px 18px rgba(15,23,42,0.10),
0 0 0 1px rgba(15,23,42,0.04);
border-color: rgba(15,23,42,0.06);
}
/* k-card: fundo levemente off-white pra diferenciar de cards principais */
[data-theme-mode="light"] .k-card {
background: #fafbfc;
box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.06);
}
/* Suaviza tints laranja no tema claro */
[data-theme-mode="light"] .plano-atual-card { border-color: rgba(15,23,42,0.10); }
[data-theme-mode="light"] .loja-code-card { border-color: rgba(15,23,42,0.10); }
[data-theme-mode="light"] .plano-card.atual { border-color: rgba(var(--primary-rgb), 0.55); box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 22px rgba(var(--primary-rgb),0.18), 0 0 0 1px rgba(var(--primary-rgb), 0.20); }
[data-theme-mode="light"] .vertical-card.ativo { border-color: rgba(var(--primary-rgb), 0.50); box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 8px 22px rgba(var(--primary-rgb),0.15), 0 0 0 1px rgba(var(--primary-rgb), 0.18); }
[data-theme-mode="light"] .field-input { background: var(--bg2); }
[data-theme-mode="light"] .pkg-btn { background: var(--bg2); }
[data-theme-mode="light"] .pkg-btn.sel { background: rgba(var(--primary-rgb), 0.06); border-color: rgba(var(--primary-rgb), 0.45) !important; box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.20); }
/* Painel Inteligente dash-cards: cada status ganha borda saturada + sombra colorida no tema claro */
[data-theme-mode="light"] .dash-card { background: #ffffff !important; }
[data-theme-mode="light"] .dash-card.aguardando { border-color: rgba(100,116,139,0.35) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 16px rgba(100,116,139,0.12), 0 0 0 1px rgba(100,116,139,0.08) !important; }
[data-theme-mode="light"] .dash-card.lavando { border-color: rgba(6,182,212,0.40) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 16px rgba(6,182,212,0.14), 0 0 0 1px rgba(6,182,212,0.10) !important; }
[data-theme-mode="light"] .dash-card.pronto { border-color: rgba(16,185,129,0.45) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 16px rgba(16,185,129,0.14), 0 0 0 1px rgba(16,185,129,0.10) !important; }
[data-theme-mode="light"] .dash-card.faturado { border-color: rgba(249,115,22,0.45) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 16px rgba(249,115,22,0.14), 0 0 0 1px rgba(249,115,22,0.10) !important; }
/* Boxes coloridos (obs/pedido/detalhes/danos) com mais contraste no tema claro */
[data-theme-mode="light"] #mhos-obs-box { background: rgba(255,193,7,0.14) !important; border-color: rgba(180,130,0,0.45) !important; }
[data-theme-mode="light"] #mhos-obs-box > div:first-child { color: #92400e !important; }
[data-theme-mode="light"] #mhos-danos-box { background: rgba(220,38,38,0.07) !important; border-color: rgba(220,38,38,0.35) !important; }
[data-theme-mode="light"] .ticket-obs { background: #fef3c7 !important; border-color: #fcd34d !important; }
[data-theme-mode="light"] .ticket-obs-label { color: #92400e !important; }
[data-theme-mode="light"] .ticket-obs-text { color: #422006 !important; }
/* Modal sheet com sombra forte e borda visível */
[data-theme-mode="light"] .modal-sheet,
[data-theme-mode="light"] .modal-config-sheet {
background: var(--bg2);
border: 1px solid rgba(15,23,42,0.08);
border-top: 1px solid rgba(15,23,42,0.10);
box-shadow: 0 -10px 40px rgba(15,23,42,0.18);
}
/* Cores de status (entrada/duração/agora) mais contrastadas */
[data-theme-mode="light"] .modal-tempo-box { background: var(--bg3); border: 1px solid var(--border); padding: 12px; border-radius: 10px; }
/* Inputs com borda mais visível no claro pra parecer mais clicáveis */
[data-theme-mode="light"] .field-input,
[data-theme-mode="light"] .setup-input,
[data-theme-mode="light"] .admin-search {
border-color: rgba(15,23,42,0.14);
background: #ffffff;
box-shadow: 0 1px 2px rgba(15,23,42,0.04) inset;
}
[data-theme-mode="light"] .field-input:focus,
[data-theme-mode="light"] .setup-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(234,88,12,0.15), 0 1px 2px rgba(15,23,42,0.04) inset; }
/* Botões ghost ganham borda visível no claro */
[data-theme-mode="light"] .btn-ghost { border-color: rgba(15,23,42,0.16); background: rgba(255,255,255,0.6); }
[data-theme-mode="light"] .btn-ghost:hover { background: rgba(255,255,255,0.9); border-color: rgba(15,23,42,0.22); }
/* Caixa total (faturamento) — gradiente laranja mais saturado no claro */
[data-theme-mode="light"] .caixa-total-row {
background: linear-gradient(135deg, rgba(var(--primary-rgb),0.95), rgba(var(--primary-rgb),0.80)) !important;
border: 1px solid rgba(var(--primary-rgb), 0.6) !important;
color: #fff !important;
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.30);
}
[data-theme-mode="light"] .caixa-total-row * { color: #fff !important; }
/* Vagas barra de progresso — fundo mais escuro pra barra colorida saltar */
[data-theme-mode="light"] .vagas-barra-bg { background: rgba(15,23,42,0.10) !important; }
/* Stat cards (relatórios) — destaque com sombra colorida no número */
[data-theme-mode="light"] .stat-val { text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
/* qa-tile e botões gradiente — sombra mais forte no claro pra destacar do fundo */
[data-theme-mode="light"] .qa-tile,
[data-theme-mode="light"] .btn-cyan,
[data-theme-mode="light"] .btn-indigo,
[data-theme-mode="light"] .btn-amber,
[data-theme-mode="light"] .btn-emerald { filter: saturate(1.05); }
/* SVGs de marca (login/setup/splash/header) — herdam tema via currentColor */
.login-logo-mark, .splash-logo-mark, .logo-mark { color: var(--primary); }
.login-logo-mark svg, .splash-logo-mark svg, .logo-mark svg { color: inherit; }
/* ============================================================
SPLASH SCREEN — exibido até o app inicializar
============================================================ */
#splash-screen {
position: fixed; inset: 0; z-index: 9999;
background: var(--bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 18px;
transition: opacity 0.5s ease;
}
[data-theme-mode="light"] #splash-screen {
background: linear-gradient(135deg, var(--bg), var(--bg2));
}
#splash-screen.fade-out { opacity: 0; pointer-events: none; }
.splash-logo-mark {
width: 96px; height: 96px;
border-radius: 22px;
background: var(--bg3);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.35);
animation: splashPop 0.6s cubic-bezier(.22,1.4,.36,1) both;
}
.splash-logo-mark svg { width: 56px; height: 56px; }
.splash-brand {
font-family: 'Syne', sans-serif; font-weight: 800;
font-size: 28px; letter-spacing: -0.5px; color: var(--text);
animation: fadeUp 0.4s ease 0.2s both;
}
.splash-brand span { color: var(--primary); }
.splash-tagline {
font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
color: var(--text3); font-weight: 600;
animation: fadeUp 0.4s ease 0.4s both;
text-align: center;
}
@keyframes splashPop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.06); }
100% { transform: scale(1); opacity: 1; }
}
/* ============================================================
LOCKOUT OVERLAY — quando licença expira
============================================================ */
#lockout-overlay {
position: fixed; inset: 0; z-index: 99999;
background: var(--bg);
display: none; flex-direction: column;
align-items: center; justify-content: center;
padding: 24px; gap: 18px;
text-align: center;
}
#lockout-overlay.ativo { display: flex; }
.lockout-icon {
font-size: 64px;
filter: drop-shadow(0 0 24px rgba(255,95,95,0.4));
animation: splashPop 0.6s ease both;
}
.lockout-title {
font-family: 'Syne', sans-serif; font-weight: 800;
font-size: 26px; letter-spacing: -0.5px; color: var(--red);
}
.lockout-text {
max-width: 360px; color: var(--text2); font-size: 14px;
line-height: 1.5;
}
.lockout-info {
background: var(--bg3); border: 1px solid var(--border);
border-radius: 12px; padding: 16px 20px;
font-family: 'JetBrains Mono', monospace; font-size: 13px;
color: var(--text);
}
.lockout-info .lab { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.lockout-cta {
background: #25D366; color: #fff;
padding: 14px 28px; border-radius: 12px;
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.35);
}
/* ============================================================
PAINEL ADMIN — gestão multi-tenant (visível só para master)
============================================================ */
.admin-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.admin-stat-card {
background: var(--bg3); border: 1px solid var(--border);
border-radius: var(--radius); padding: 12px; text-align: center;
}
.admin-stat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: var(--text3); font-family: 'Syne', sans-serif; font-weight: 600;
margin-bottom: 4px;
}
.admin-stat-val {
font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700;
color: var(--primary); line-height: 1;
}
.admin-stat-card.warn .admin-stat-val { color: var(--orange); }
.admin-stat-card.danger .admin-stat-val { color: var(--red); }
.admin-stat-card.success .admin-stat-val { color: var(--green); }
.admin-search {
width: 100%; padding: 12px 14px; font-size: 14px;
border-radius: var(--radius-sm); border: 1px solid var(--border);
background: var(--bg3); color: var(--text); margin-bottom: 12px;
font-family: 'Inter', sans-serif;
}
.admin-search:focus { outline: none; border-color: var(--border-active); }
.admin-loja-card {
background: var(--bg3); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
animation: fadeUp 0.2s ease;
}
.admin-loja-card.expirada { border-color: rgba(255,95,95,0.4); }
.admin-loja-card.expirando { border-color: rgba(255,109,0,0.4); }
.admin-loja-card.suspensa { opacity: 0.5; border-style: dashed; }
.admin-loja-header {
display: flex; justify-content: space-between; align-items: start;
gap: 10px; margin-bottom: 10px;
}
.admin-loja-email {
font-size: 13px; font-weight: 700; color: var(--text);
word-break: break-all;
}
.admin-loja-meta {
font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace;
margin-top: 2px; word-break: break-all;
}
.admin-loja-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 99px;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
flex-shrink: 0;
}
.admin-loja-status.ativa { background: rgba(45,212,160,0.1); color: var(--green); border: 1px solid rgba(45,212,160,0.3); }
.admin-loja-status.expirando { background: rgba(255,109,0,0.1); color: var(--orange); border: 1px solid rgba(255,109,0,0.3); }
.admin-loja-status.expirada { background: rgba(255,95,95,0.1); color: var(--red); border: 1px solid rgba(255,95,95,0.3); }
.admin-loja-status.suspensa { background: rgba(122,138,158,0.1); color: var(--text3); border: 1px solid rgba(122,138,158,0.3); }
.admin-loja-info {
display: flex; gap: 12px; flex-wrap: wrap;
font-size: 11px; color: var(--text2);
padding: 8px 0; border-top: 1px solid var(--border);
}
.admin-loja-info-item .lab { color: var(--text3); display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-loja-info-item .val { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.admin-loja-actions {
display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px;
}
.admin-btn {
flex: 1; min-width: 80px; padding: 8px 10px;
border-radius: 8px; border: 1px solid var(--border);
background: var(--bg4); color: var(--text2);
font-size: 11px; font-family: 'Syne', sans-serif; font-weight: 700;
cursor: pointer; transition: all 0.15s; -webkit-appearance: none;
}
.admin-btn:hover { border-color: var(--border-active); color: var(--text); }
.admin-btn.success { background: rgba(45,212,160,0.12); color: var(--green); border-color: rgba(45,212,160,0.3); }
.admin-btn.warn { background: rgba(255,109,0,0.12); color: var(--orange); border-color: rgba(255,109,0,0.3); }
.admin-btn.danger { background: rgba(255,95,95,0.12); color: var(--red); border-color: rgba(255,95,95,0.3); }
/* ============================================================
MEU PLANO + MEUS VERTICAIS — telas self-service do cliente
============================================================ */
.plano-atual-card {
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.03));
border: 1.5px solid rgba(var(--primary-rgb), 0.3);
border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.plano-atual-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.plano-atual-header > div:first-child { flex: 1; min-width: 0; }
.plano-atual-nome { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: var(--primary); line-height: 1.1; word-break: break-word; }
.plano-atual-preco { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text2); margin-top: 4px; }
.plano-atual-badge { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), 0.3); padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Syne', sans-serif; white-space: nowrap; flex-shrink: 0; }
/* Grid responsivo: 2 colunas no mobile, 4 no desktop — sem clipping de texto */
.plano-atual-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
@media (min-width: 600px) {
.plano-atual-info { grid-template-columns: repeat(4, 1fr); }
}
.plano-info-item { display: flex; flex-direction: column; min-width: 0; text-align: center; }
.plano-info-item .lab { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }
.plano-info-item .val { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text); font-size: 13px; margin-top: 4px; word-break: break-word; line-height: 1.3; }
.plano-card {
background: var(--bg3); border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
transition: all 0.15s;
}
.plano-card.atual { border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.06); }
.plano-card.recomendado { border-color: var(--green); position: relative; }
.plano-card.recomendado::before {
content: ' RECOMENDADO';
position: absolute; top: -8px; right: 12px;
background: var(--green); color: #fff;
padding: 2px 8px; border-radius: 99px;
font-size: 9px; font-weight: 700; font-family: 'Syne', sans-serif;
letter-spacing: 0.5px;
}
.plano-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; }
.plano-card-nome { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; color: var(--text); }
.plano-card-preco { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px; color: var(--primary); }
.plano-card-preco small { font-size: 10px; color: var(--text3); font-weight: 500; }
.plano-card-desc { font-size: 12px; color: var(--text2); margin-bottom: 8px; line-height: 1.4; }
.plano-card-limits { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.plano-card-limits span { display: inline-flex; align-items: center; gap: 4px; }
.plano-card-btn { width: 100%; padding: 10px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 13px; font-family: 'Syne', sans-serif; cursor: pointer; transition: opacity 0.15s; }
.plano-card-btn:hover { opacity: 0.9; }
.plano-card-btn.disabled { background: var(--bg4); color: var(--text3); cursor: not-allowed; }
.plano-card-btn.atual-disabled { background: rgba(var(--primary-rgb), 0.2); color: var(--primary); cursor: default; }
.vertical-card {
background: var(--bg3); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 12px;
display: flex; align-items: center; gap: 12px;
margin-bottom: 8px; transition: all 0.15s;
}
.vertical-card.ativo { border-color: rgba(var(--primary-rgb), 0.4); background: rgba(var(--primary-rgb), 0.06); }
.vertical-card.bloqueado { opacity: 0.55; }
.vertical-icone { font-size: 28px; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg4); border-radius: 10px; }
.vertical-info { flex: 1; min-width: 0; }
.vertical-nome { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); }
.vertical-desc { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
.vertical-acao { flex-shrink: 0; }
.vertical-acao button {
padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
background: var(--bg4); color: var(--text2);
font-size: 11px; font-weight: 700; font-family: 'Syne', sans-serif;
cursor: pointer; transition: all 0.15s;
}
.vertical-acao button:hover { border-color: var(--border-active); color: var(--text); }
.vertical-acao button.ativar { background: var(--primary); color: #fff; border-color: var(--primary); }
.vertical-acao button.remover { background: rgba(255,95,95,0.12); color: var(--red); border-color: rgba(255,95,95,0.3); }
.vertical-acao button.upgrade { background: rgba(45,212,160,0.12); color: var(--green); border-color: rgba(45,212,160,0.3); }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: -webkit-fill-available; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; min-height: -webkit-fill-available; overflow-x: hidden; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
/* HEADER */
.header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 12px; padding-top:calc(14px + var(--safe-top)); padding-left:calc(20px + var(--safe-left)); padding-right:calc(20px + var(--safe-right)); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; background:rgba(9,9,11,0.88); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); box-shadow:0 1px 0 0 rgba(255,255,255,0.04),0 4px 24px rgba(0,0,0,0.35); }
.logo { display:flex; align-items:center; gap:10px; cursor:pointer; }
.logo-mark { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#ffffff; border:2px solid rgba(249,115,22,0.65); border-radius:10px; box-shadow:0 0 16px rgba(249,115,22,0.3); overflow:hidden; transition:box-shadow 0.2s; }
.logo:hover .logo-mark { box-shadow:0 0 22px rgba(var(--primary-rgb),0.3); }
.logo-mark svg { width:22px; height:22px; display:block; color:var(--primary); }
.logo-text { display:flex; flex-direction:column; line-height:1; }
.logo-name { font-family:'Syne',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.3px; color:var(--text); }
.logo-name span { color: var(--primary); -webkit-text-fill-color: var(--primary); background: none; }
.logo-tagline { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); margin-top:6px; font-weight:600; }
.header-right { display:flex; align-items:center; gap:8px; }
.header-time { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text); background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:4px 8px; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--text3); display:inline-block; margin-right:4px; transition:background 0.4s; }
.sync-dot.online { background:var(--green); box-shadow:0 0 8px rgba(45,212,160,0.7); }
.sync-dot.syncing { background:var(--yellow); animation:pulse 0.8s infinite; }
.sync-dot.offline { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,0.6); animation:pulse 1.2s infinite; }
.btn-config-header { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--text3); font-size:18px; cursor:pointer; transition:all 0.15s; }
.btn-config-header:hover { border-color:var(--border-active); color:var(--primary); background:var(--bg4); }
/* ════════════════════════════════════════════════════════════
BARRA DE NAVEGAÇÃO RÁPIDA (topnav) — abaixo do header.
Inspirada na bottom nav do mockup do site: 4 ícones que
trocam entre Home / Painel / Relatório / Config.
Sticky abaixo do header, ícone ativo destacado em laranja.
════════════════════════════════════════════════════════════ */
.topnav {
display: flex;
justify-content: space-around;
align-items: stretch;
gap: 4px;
padding: 6px 12px;
padding-left: calc(12px + var(--safe-left));
padding-right: calc(12px + var(--safe-right));
background: rgba(9,9,11,0.85);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
position: sticky;
top: calc(48px + var(--safe-top)); /* abaixo do header sticky */
z-index: 49;
box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.topnav-btn {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
padding: 7px 4px;
color: var(--text3);
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
min-width: 0;
}
.topnav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.topnav-label {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.3px;
white-space: nowrap;
}
.topnav-btn:hover {
background: var(--bg3);
color: var(--text2);
}
.topnav-btn.ativo {
background: rgba(249,115,22,0.12);
border-color: rgba(249,115,22,0.35);
color: var(--primary);
box-shadow: 0 2px 10px rgba(249,115,22,0.15);
}
/* Em telas estreitas, esconde o label e mostra só o ícone */
@media (max-width: 380px) {
.topnav-label { display: none; }
.topnav-btn { padding: 8px 4px; }
.topnav-btn svg { width: 20px; height: 20px; }
}
/* Tema claro: ajusta cores */
[data-theme-mode="light"] .topnav {
background: rgba(255,255,255,0.85);
}
/* Header responsivo — em telas estreitas, esconde labels e compacta */
@media (max-width: 520px) {
.header { padding: 12px 14px 10px; padding-top:calc(12px + var(--safe-top)); padding-left:calc(14px + var(--safe-left)); padding-right:calc(14px + var(--safe-right)); }
.header-right { gap: 6px; }
.btn-config-header { padding: 6px 8px; }
.btn-config-header > span { display: none; } /* esconde "Config" e "Sair" — mantém só ícone */
.header-time { font-size: 11px; }
}
@media (max-width: 380px) {
.header-time { display: none; } /* relógio some em telas muito pequenas */
.logo-tagline { display: none; }
}
/* DESKTOP — limita largura, centraliza conteúdo (mobile-first com layout adaptado) */
@media (min-width: 768px) {
.header {
padding-left: max(20px, calc((100vw - 720px) / 2));
padding-right: max(20px, calc((100vw - 720px) / 2));
}
.tela {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Toast container também centralizado */
#toast-container { max-width: 720px; margin: 0 auto; left: 0; right: 0; }
/* Modais com fundo escuro continuam full-width mas o sheet limita */
.modal-sheet, .modal-cancel-sheet { max-width: 600px; margin-left: auto; margin-right: auto; }
/* Splash screen ocupa tudo (intencional) */
/* Botão de instalar PWA fixo no canto, sem mexer */
}
/* TELAS */
.tela { display:none; padding:20px; padding-left:calc(20px + var(--safe-left)); padding-right:calc(20px + var(--safe-right)); padding-bottom:calc(20px + var(--safe-bottom)); animation:fadeUp 0.25s ease; }
/* ============================================================
DESKTOP LAYOUT — App foi feito mobile-first. No desktop, sem
limites, os elementos esticam pra 1900px e fica grotesco.
Técnica: header/topnav mantém fundo full-width (preserva o
blur sticky bonito), mas o CONTEÚDO interno é centralizado
via padding lateral dinâmico (max). Telas (.tela) usam
max-width simples porque não têm background próprio.
============================================================ */
@media (min-width: 900px) {
/* Padding lateral dinâmico: 20px no mínimo, ou (vw - 720)/2 pra centralizar */
.header {
padding-left: max(20px, calc((100vw - 720px) / 2)) !important;
padding-right: max(20px, calc((100vw - 720px) / 2)) !important;
}
.topnav {
padding-left: max(12px, calc((100vw - 720px) / 2)) !important;
padding-right: max(12px, calc((100vw - 720px) / 2)) !important;
}
/* Telas: centralização tradicional (sem bg próprio) */
.tela {
max-width: 720px;
margin: 0 auto;
}
/* Body com glow sutil no topo central pra criar foco */
body {
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(249,115,22,0.05), transparent 60%),
var(--bg);
}
/* No light theme: laterais com gradient cinza-azulado pra criar "moldura" sutil */
html[data-theme-mode="light"] body,
html[data-theme="light"] body {
background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(249,115,22,0.06), transparent 60%),
linear-gradient(90deg, #dadee8 0%, #e3e7f0 10%, var(--bg) 22%, var(--bg) 78%, #e3e7f0 90%, #dadee8 100%);
}
}
/* Em telas muito largas (>1400px) aumenta um pouco pra aproveitar mais espaço */
@media (min-width: 1400px) {
.header { padding-left: max(20px, calc((100vw - 820px) / 2)) !important; padding-right: max(20px, calc((100vw - 820px) / 2)) !important; }
.topnav { padding-left: max(12px, calc((100vw - 820px) / 2)) !important; padding-right: max(12px, calc((100vw - 820px) / 2)) !important; }
.tela { max-width: 820px; }
}
.tela.ativa { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
/* DASH */
.dash-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.dash-grid-4 { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.dash-card { border-radius:18px; padding:18px 16px; text-align:left; position:relative; overflow:hidden; transition:transform 0.18s,box-shadow 0.18s; background:var(--bg3); border:1px solid var(--border); }
.dash-card:active { transform:scale(0.97); }
.dash-card.aguardando { border-color:rgba(136,153,176,0.3); box-shadow:0 8px 24px rgba(136,153,176,0.05); }
.dash-card.lavando { border-color:rgba(100,116,139,0.25); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.dash-card.pronto { border-color:rgba(45,212,160,0.4); box-shadow:0 8px 24px rgba(45,212,160,0.12); }
.dash-card.faturado { border-color:rgba(249,115,22,0.4); box-shadow:0 8px 24px rgba(249,115,22,0.12); }
.dash-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); opacity:0; transition:opacity 0.2s; }
.dash-card:hover::before { opacity:1; }
.dash-card-label { font-size:11px; font-weight:600; color:var(--text); margin-bottom:8px; font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:flex-start; padding-right:30px; letter-spacing:0.2px; }
.dash-card-val { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--text); line-height:1; }
.dash-card.aguardando .dash-card-val { color:var(--text); }
.dash-card.lavando .dash-card-val { color:var(--orange); }
.dash-card.pronto .dash-card-val { color:var(--text); }
.dash-card.faturado .dash-card-val { color:var(--green); font-size:22px; }
/* PAINÉIS DE SERVIÇOS (Home) */
.servico-painel { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:20px; margin-bottom:18px; }
.painel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.painel-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:0.5px; }
.painel-subtitle { font-size:13px; color:var(--text3); font-family:'JetBrains Mono',monospace; }
.progress-container { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; margin-bottom:6px; }
.progress-bar { height:100%; background:var(--orange); transition:width 0.3s ease; }
.progress-label { font-size:11px; color:var(--text3); text-align:right; margin-bottom:16px; font-family:'JetBrains Mono',monospace; }
.painel-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
.metric-box { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05); border-radius:12px; padding:12px; text-align:center; }
.metric-label { font-size:10px; color:var(--text3); font-weight:600; margin-bottom:4px; letter-spacing:0.5px; }
.metric-val { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--text); }
.painel-full-metric { background:rgba(249,115,22,0.05); border:1px solid rgba(249,115,22,0.15); border-radius:12px; padding:12px; text-align:center; margin-bottom:16px; }
.painel-full-metric .metric-val { color:var(--orange); font-size:24px; }
.painel-actions { display:flex; flex-direction:column; gap:10px; }
.btn-action { width:100%; padding:14px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius); font-weight:700; font-family:'Syne',sans-serif; cursor:pointer; transition:all 0.18s; }
.btn-action:hover { filter:brightness(1.1); }
.btn-action.btn-full { background:var(--orange); color:#000; font-weight:800; }
.painel-actions .btn-row { display:flex; gap:10px; }
.painel-actions .btn-row .btn-action { background:rgba(255,255,255,0.05); color:var(--text); }
.painel-actions .btn-row .btn-action:hover { background:rgba(255,255,255,0.1); }
/* BOTÕES */
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn { flex:1; min-width:90px; padding:15px 12px; font-size:14px; font-weight:700; font-family:'Syne',sans-serif; border:none; border-radius:var(--radius); cursor:pointer; transition:all 0.18s; letter-spacing:0.3px; -webkit-appearance:none; touch-action:manipulation; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,transparent 60%); pointer-events:none; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 4px 16px rgba(var(--primary-rgb),0.35); }
.btn-primary:hover { filter:brightness(1.1); }
.btn-cyan { background:linear-gradient(135deg,#0891b2,#06b6d4); color:#fff; border:none; box-shadow:0 4px 18px rgba(6,182,212,0.3); }
.btn-cyan:hover { filter:brightness(1.1); }
.btn-indigo { background:linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; border:none; box-shadow:0 4px 18px rgba(99,102,241,0.3); }
.btn-indigo:hover { filter:brightness(1.1); }
.btn-amber { background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none; box-shadow:0 4px 18px rgba(245,158,11,0.3); }
.btn-amber:hover { filter:brightness(1.1); }
.btn-emerald { background:linear-gradient(135deg,#059669,#10b981); color:#fff; border:none; box-shadow:0 4px 18px rgba(16,185,129,0.28); }
.btn-emerald:hover { filter:brightness(1.1); }
.btn-secondary { background:var(--bg4); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--border-active); background:var(--bg3); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); }
.btn-danger { background:rgba(255,95,95,0.12); color:var(--red); border:1px solid rgba(255,95,95,0.3); }
.btn-success { background:var(--green); color:#0a1a14; }
.btn-back { display:inline-flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text2); font-size:13px; cursor:pointer; padding:8px 12px; margin-bottom:18px; font-family:'Inter',sans-serif; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.btn-back:hover { background:var(--bg4); border-color:var(--border-active); color:var(--text); }
.btn-back svg { width:16px; height:16px; }
/* ═════ QUICK ACTION TILES ═════ */
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.qa-tile { position:relative; overflow:hidden; border-radius:18px; padding:20px 10px 16px; border:1px solid rgba(255,255,255,0.1); cursor:pointer; transition:transform 0.18s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:150px; font-family:'Inter',sans-serif; }
.qa-tile:active { transform:scale(0.96); }
.qa-tile::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.12) 0%,transparent 50%); pointer-events:none; }
.qa-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 4px 12px rgba(0,0,0,0.15); font-size:20px; color:#fff; }
.qa-label { font-size:14px; font-weight:600; color:#fff; letter-spacing:0px; text-shadow:0 1px 2px rgba(0,0,0,0.2); }
.qa-sub { font-size:11px; opacity:0.9; text-transform:uppercase; font-weight:700; letter-spacing:1px; margin-bottom:2px; }
.qa-tile.qa-orange-1 { background:linear-gradient(140deg,#f97316 0%,#fb923c 100%); box-shadow:0 8px 24px rgba(249,115,22,0.25); }
.qa-tile.qa-orange-2 { background:linear-gradient(140deg,#c2410c 0%,#ea580c 100%); box-shadow:0 8px 24px rgba(234,88,12,0.25); }
.qa-tile.qa-slate-1 { background:linear-gradient(140deg,#334155 0%,#475569 100%); box-shadow:0 8px 24px rgba(71,85,105,0.25); }
.qa-tile.qa-slate-2 { background:linear-gradient(140deg,#0f172a 0%,#1e293b 100%); box-shadow:0 8px 24px rgba(15,23,42,0.25); }
.qa-tile.qa-blue-1 { background:linear-gradient(140deg,#3b82f6 0%,#60a5fa 100%); box-shadow:0 8px 24px rgba(59,130,246,0.25); }
.qa-tile.qa-blue-2 { background:linear-gradient(140deg,#1e3a8a 0%,#1d4ed8 100%); box-shadow:0 8px 24px rgba(30,58,138,0.25); }
.qa-tile.qa-yellow { background:linear-gradient(140deg,#eab308 0%,#fef08a 100%); box-shadow:0 8px 24px rgba(234,179,8,0.25); color:#422006; }
.qa-tile.qa-yellow .qa-icon { color:#422006; background:rgba(66,32,6,0.1); box-shadow:inset 0 1px 0 rgba(66,32,6,0.1),0 4px 12px rgba(0,0,0,0.1); }
.qa-tile.qa-yellow .qa-label { color:#422006; }
.qa-tile.qa-green-1 { background:linear-gradient(140deg,#15803d 0%,#22c55e 100%); box-shadow:0 8px 24px rgba(34,197,94,0.25); }
.qa-tile.qa-green-2 { background:linear-gradient(140deg,#14532d 0%,#166534 100%); box-shadow:0 8px 24px rgba(21,128,61,0.25); }
.qa-tile.qa-red-1 { background:linear-gradient(140deg,#b91c1c 0%,#ef4444 100%); box-shadow:0 8px 24px rgba(239,68,68,0.30); }
.qa-tile.qa-red-2 { background:linear-gradient(140deg,#7f1d1d 0%,#991b1b 100%); box-shadow:0 8px 24px rgba(127,29,29,0.30); }
/* ════════════════════════════════════════════════════════
NOVA ENTRADA UNIFICADA — switch Lavar / Guardar
════════════════════════════════════════════════════════ */
.nent-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; background: var(--bg3); border-radius: 14px; border: 1px solid var(--border); margin-bottom: 16px; }
.nent-switch-btn { padding: 12px 8px; background: transparent; border: none; border-radius: 10px; cursor: pointer; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--text2); transition: all 0.18s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nent-switch-btn .nent-switch-emoji { font-size: 22px; line-height: 1; }
.nent-switch-btn .nent-switch-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.nent-switch-btn .nent-switch-icon svg { width: 26px; height: 26px; display: block; }
.nent-switch-btn.ativo .nent-switch-icon { opacity: 1; }
.nent-switch-btn:hover { color: var(--text); }
.nent-switch-btn.ativo { background: linear-gradient(140deg, var(--primary), #fb923c); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3); }
body[data-nent-modo="guardar"] .nent-switch-btn.ativo { background: linear-gradient(140deg, #15803d, #22c55e); box-shadow: 0 4px 12px rgba(34,197,94,0.3); }
body[data-nent-modo="guardar"] .nent-only-lavar { display: none !important; }
body[data-nent-modo="lavar"] .nent-only-guardar { display: none !important; }
/* Subtipo grid pra modo Guardar */
.nent-subtipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nent-subtipo-btn { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
.nent-subtipo-btn:hover { border-color: rgba(34,197,94,0.5); }
.nent-subtipo-btn.sel { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.nent-subtipo-emoji { font-size: 24px; line-height: 1; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.nent-subtipo-emoji .subt-icon-svg svg { width: 26px; height: 26px; color: var(--text); display: block; }
.nent-subtipo-emoji .subt-icon-emoji { font-size: 24px; line-height: 1; }
/* Ícone do subtipo na LISTA de Config (Tipos de Estacionamento) */
.config-pkg-name .subt-icon-svg svg { width: 18px; height: 18px; color: var(--text); display: block; }
.config-pkg-name .subt-icon-emoji { font-size: 16px; line-height: 1; }
.nent-subtipo-nome { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.nent-subtipo-tarifa { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px; color: var(--green); }
.nent-subtipo-tarifa.gratuito { color: var(--text3); }
/* Botões GRANDES da home simplificada (4 cards: Entrada / Saída / Relatório / Config) — layout horizontal pra caber 4 em coluna */
.qa-tile.qa-big { height: auto; min-height: 88px; border-radius: 20px; flex-direction: row; justify-content: flex-start; padding: 0 22px; gap: 18px; }
.qa-tile.qa-big .qa-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.qa-tile.qa-big .qa-icon svg { width: 30px; height: 30px; }
.qa-tile.qa-big .qa-label { font-size: 18px; font-weight: 800; font-family: 'Syne', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; flex: 1; }
.qa-tile.qa-big .qa-badge { position: absolute; top: 12px; right: 14px; background: rgba(0,0,0,0.4); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; font-family: 'JetBrains Mono', monospace; min-width: 26px; text-align: center; }
/* Container dos 4 botões grandes ocupa altura disponível da viewport */
.home-grid-bigs { display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; min-height: calc(100dvh - 240px); }
@supports not (height: 100dvh) { .home-grid-bigs { min-height: calc(100vh - 240px); } }
.qa-tile.qa-emerald { background:linear-gradient(140deg,#0f766e 0%,#14b8a6 100%); box-shadow:0 8px 24px rgba(20,184,166,0.25); }
.qa-tile.qa-slate { background:linear-gradient(140deg,#334155 0%,#64748b 100%); box-shadow:0 8px 24px rgba(100,116,139,0.25); }
/* PAINEL DE VAGAS — minimalista (contador + % + barra) */
.vagas-painel { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.vagas-painel-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.vagas-contador { display:flex; align-items:baseline; gap:4px; }
.vagas-num-ocup { font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:800; line-height:1; }
.vagas-num-sep { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; color:var(--text3); line-height:1; }
.vagas-num-total { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; color:var(--text2); line-height:1; }
.vagas-pct { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; padding:5px 10px; border-radius:99px; }
.vagas-pct.livre { background:rgba(45,212,160,0.15); color:var(--green); }
.vagas-pct.medio { background:rgba(255,109,0,0.15); color:var(--orange); }
.vagas-pct.cheio { background:rgba(255,95,95,0.18); color:var(--red); }
.vagas-barra-wrap { background:var(--bg4); border-radius:99px; height:12px; overflow:hidden; }
.vagas-barra-fill { height:100%; border-radius:99px; transition:width 0.6s cubic-bezier(0.4,0,0.2,1), background 0.4s; }
.vagas-barra-fill.livre { background:linear-gradient(90deg, #16a34a 0%, #22c55e 100%); }
.vagas-barra-fill.medio { background:linear-gradient(90deg, #ea580c 0%, #f97316 100%); }
.vagas-barra-fill.cheio { background:linear-gradient(90deg, #b91c1c 0%, #ef4444 100%); animation:pulseRed 1.6s ease-in-out infinite; }
@keyframes pulseRed { 0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow:0 0 0 6px rgba(239,68,68,0); } }
/* STAT CARDS: top icon + trend */
.stat-card-icon { position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); font-size:13px; opacity:0.85; }
.stat-trend { font-size:10px; font-weight:700; margin-top:6px; font-family:'JetBrains Mono',monospace; display:inline-flex; align-items:center; gap:3px; }
.stat-trend.up { color:var(--green); }
.stat-trend.down { color:var(--red); }
.stat-trend.flat { color:var(--text3); }
.dash-card { text-align:left !important; }
.dash-card .dash-card-label { display:flex; align-items:center; justify-content:flex-start; padding-right:30px; }
/* ACTIVITY FEED ICONS */
.activity-icon { width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid rgba(255,255,255,0.05); }
.activity-icon.aguardando { background:rgba(100,116,139,0.18); color:#94a3b8; }
.activity-icon.lavando { background:rgba(0,184,217,0.16); color:var(--cyan); }
.activity-icon.acabamento { background:rgba(255,214,0,0.16); color:var(--yellow); }
.activity-icon.pronto { background:rgba(45,212,160,0.16); color:var(--green); }
.activity-icon.finalizado { background:rgba(100,116,139,0.16); color:#94a3b8; }
.activity-icon.cancelado { background:rgba(255,95,95,0.16); color:var(--red); }
/* PAGE TITLE */
.page-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; margin-bottom:20px; letter-spacing:-0.5px; }
/* FIELDS */
.field { margin-bottom:18px; }
.field-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:8px; }
.field-input { width:100%; padding:14px 16px; font-size:16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg3); color:var(--text); font-family:'Inter',sans-serif; transition:border-color 0.2s,box-shadow 0.2s; -webkit-appearance:none; }
.field-input:focus { outline:none; border-color:var(--border-active); box-shadow:0 0 0 3px var(--blue-glow); }
.field-input::placeholder { color:var(--text3); }
.field-placa { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:4px; text-align:center; }
textarea.field-input { resize:none; min-height:80px; font-size:16px; line-height:1.5; }
select.field-input { cursor:pointer; }
/* FOTO */
.fotos-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.fotos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.foto-thumb-item { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg3); border:1px solid var(--border); }
.foto-thumb-item img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-thumb-remove { position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(0,0,0,0.75); border:none; border-radius:50%; color:#fff; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.foto-area-principal { border:2px dashed var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color 0.2s,background 0.2s; position:relative; min-height:140px; display:flex; align-items:center; justify-content:center; background:var(--bg3); margin-bottom:10px; touch-action:manipulation; }
.foto-area-principal:hover { border-color:var(--blue3); background:var(--blue-glow); }
.foto-area-principal img { width:100%; max-height:200px; object-fit:cover; display:block; }
.foto-placeholder { text-align:center; padding:28px 20px; pointer-events:none; }
.foto-placeholder-icon { font-size:32px; margin-bottom:8px; }
.foto-placeholder-text { color:var(--text2); font-size:13px; }
.foto-placeholder-sub { color:var(--text3); font-size:11px; margin-top:4px; }
.btn-add-foto { width:100%; padding:11px; background:var(--bg4); border:1px dashed var(--border); border-radius:var(--radius-sm); color:var(--text2); font-size:13px; font-family:'Syne',sans-serif; font-weight:600; cursor:pointer; transition:all 0.15s; margin-bottom:4px; -webkit-appearance:none; touch-action:manipulation; }
.btn-add-foto:hover { border-color:var(--blue3); color:var(--blue3); }
/* AI STATUS */
.ai-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600; font-family:'Syne',sans-serif; margin-top:10px; transition:all 0.3s; }
.ai-badge.idle { background:var(--bg4); color:var(--text2); border:1px solid var(--border); }
.ai-badge.loading { background:rgba(var(--primary-rgb),0.1); color:var(--blue3); border:1px solid rgba(var(--primary-rgb),0.3); animation:pulse 1.2s infinite; }
.ai-badge.success { background:rgba(45,212,160,0.1); color:var(--green); border:1px solid rgba(45,212,160,0.3); }
.ai-badge.error { background:rgba(255,95,95,0.1); color:var(--red); border:1px solid rgba(255,95,95,0.2); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.ai-spinner { width:12px; height:12px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:spin 0.6s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }
/* COR */
.cores-grid { display:flex; gap:10px; flex-wrap:wrap; padding:4px 0; }
.cor-item { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; touch-action:manipulation; }
.cor-btn { width:42px; height:42px; border-radius:50%; border:3px solid transparent; outline:2px solid transparent; transition:all 0.15s; cursor:pointer; touch-action:manipulation; }
.cor-btn.sel { border-color:var(--blue3); box-shadow:0 0 0 3px var(--blue-glow),0 0 12px var(--blue-glow); transform:scale(1.1); }
.cor-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; pointer-events:none; }
/* PACOTES */
.pacotes-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:4px; }
.pkg-btn { padding:14px 10px; background:var(--bg3); border:2px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:all 0.15s; font-family:'Syne',sans-serif; -webkit-appearance:none; touch-action:manipulation; text-align:center; }
.pkg-btn:hover { border-color:var(--border-active); }
.pkg-btn.sel { border-color:var(--blue2); background:var(--blue-glow); }
.pkg-btn-name { font-size:14px; font-weight:700; color:var(--text); }
.pkg-btn.sel .pkg-btn-name { color:var(--blue3); }
.pkg-btn-preco { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--blue3); margin-top:4px; }
.pkg-btn-tempo { font-size:10px; color:var(--text3); margin-top:2px; }
/* ADD-ONS */
.addons-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.addon-btn { padding:10px 8px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:all 0.15s; font-family:'Inter',sans-serif; -webkit-appearance:none; touch-action:manipulation; display:flex; align-items:center; gap:8px; }
.addon-btn.sel { border-color:var(--cyan); background:rgba(0,184,217,0.08); }
.addon-check { width:16px; height:16px; border:2px solid var(--border); border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; }
.addon-btn.sel .addon-check { border-color:var(--cyan); background:var(--cyan); color:#0a0c12; }
.addon-info { flex:1; }
.addon-name { font-size:12px; font-weight:600; color:var(--text); }
.addon-preco { font-size:11px; color:var(--cyan); font-family:'JetBrains Mono',monospace; }
/* FUNCIONÁRIOS */
.func-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.func-btn { padding:12px; background:var(--bg3); border:2px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:all 0.15s; font-family:'Syne',sans-serif; text-align:center; -webkit-appearance:none; touch-action:manipulation; }
.func-btn:hover { border-color:var(--border-active); }
.func-btn.sel { border-color:var(--blue2); background:var(--blue-glow); }
.func-avatar { font-size:28px; margin-bottom:4px; }
.func-name { font-size:13px; font-weight:700; color:var(--text); }
.func-btn.sel .func-name { color:var(--blue3); }
/* SECÇÃO DIVIDER */
.section-divider { font-size:9px; text-transform:uppercase; letter-spacing:3px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:800; padding:18px 0 10px; margin-top:4px; display:flex; align-items:center; gap:10px; }
.section-divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
/* PLACA ROW */
.placa-row { display:flex; gap:8px; align-items:center; }
.btn-cam { width:52px; height:52px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:20px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.btn-cam:hover { border-color:var(--border-active); }
/* PAINEL INTELIGENTE — PAINEL DE SERVIÇOS */
.kanban-wrap { overflow-x:auto; padding-bottom:8px; margin:0 -20px; padding-left:20px; padding-right:20px; }
.kanban-cols { display:flex; gap:10px; min-width:560px; }
.kanban-col { flex:1; min-width:130px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.kanban-col-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.kanban-col-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; }
.kanban-col-count { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; background:var(--bg4); border-radius:10px; padding:2px 7px; }
.kcol-aguardando .kanban-col-title { color:var(--text3); }
.kcol-lavando .kanban-col-title { color:var(--cyan); }
.kcol-acabamento .kanban-col-title { color:var(--yellow); }
.kcol-pronto .kanban-col-title { color:var(--green); }
.kcol-aguardando .kanban-col-count { color:var(--text3); }
.kcol-lavando .kanban-col-count { color:var(--cyan); }
.kcol-acabamento .kanban-col-count { color:var(--yellow); }
.kcol-pronto .kanban-col-count { color:var(--green); }
.k-card { background:var(--bg4); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px; margin-bottom:6px; cursor:pointer; transition:all 0.15s; }
.k-card:hover { border-color:var(--border-active); transform:translateY(-1px); }
.btn-wa-mini { width:100%; margin-top:6px; padding:6px 8px; background:#25D366; color:#fff; border:none; border-radius:6px; font-size:11px; font-weight:700; font-family:'Syne',sans-serif; cursor:pointer; transition:transform 0.1s; }
.btn-wa-mini:hover { background:#1eb858; }
.btn-wa-mini:active { transform:scale(0.97); }
.btn-wa-full { background:#25D366; color:#fff; border:none; padding:14px; border-radius:var(--radius); font-weight:700; font-family:'Syne',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; transition:background 0.15s; }
.btn-wa-full:hover { background:#1eb858; }
.btn-wa-full:disabled { background:#666; cursor:not-allowed; opacity:0.6; }
.k-placa { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--blue3); letter-spacing:2px; margin-bottom:3px; }
.k-service { font-size:11px; color:var(--text2); margin-bottom:2px; }
.k-func { font-size:10px; color:var(--text3); }
.k-timer { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green); font-weight:700; margin-top:5px; display:flex; align-items:center; gap:4px; }
.k-timer.warn { color:var(--orange); }
.k-timer.over { color:var(--red); }
.k-empty { text-align:center; padding:20px 8px; color:var(--text3); font-size:11px; }
/* CARD OS */
.os-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:10px; cursor:pointer; transition:all 0.18s; position:relative; overflow:hidden; }
.os-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border); border-radius:3px 0 0 3px; transition:background 0.2s; }
.os-card:hover { border-color:var(--border-active); transform:translateX(2px); }
.os-card.status-aguardando::before { background:rgba(100,116,139,0.6); }
.os-card.status-lavando::before { background:var(--cyan); box-shadow:0 0 8px rgba(0,184,217,0.4); }
.os-card.status-acabamento::before { background:var(--yellow); box-shadow:0 0 8px rgba(255,214,0,0.35); }
.os-card.status-pronto::before { background:var(--green); box-shadow:0 0 8px rgba(45,212,160,0.4); }
.os-card.status-finalizado::before { background:#475569; }
.os-card.status-cancelado::before { background:var(--red); }
.os-card.status-patio::before { background:var(--primary); box-shadow:0 0 8px rgba(var(--primary-rgb),0.4); }
.os-card-top { display:flex; align-items:center; gap:12px; }
.os-thumb { width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg4); }
.os-thumb-ph { width:52px; height:52px; border-radius:10px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
/* ── Pátio: cards maiores, foto destacada, tipografia robusta ── */
#park-lista-patio .os-card { padding: 16px; margin-bottom: 14px; }
#park-lista-patio .os-card-top { gap: 16px; align-items: stretch; }
#park-lista-patio .os-thumb,
#park-lista-patio .os-thumb-ph { width: 110px; height: 110px; border-radius: 14px; font-size: 36px; }
#park-lista-patio .os-placa { font-size: 22px; letter-spacing: 2.5px; }
#park-lista-patio .os-service { font-size: 14px; margin-top: 6px; font-weight: 700; }
#park-lista-patio .os-info { font-size: 13px; margin-top: 4px; }
#park-lista-patio .os-timer { font-size: 14px; margin-top: 8px; }
@media(max-width: 380px) {
#park-lista-patio .os-thumb,
#park-lista-patio .os-thumb-ph { width: 92px; height: 92px; }
#park-lista-patio .os-placa { font-size: 19px; }
}
.os-body { flex:1; min-width:0; }
.os-placa { font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:700; color:var(--text); letter-spacing:2px; }
.os-info { font-size:12px; color:var(--text2); margin-top:3px; }
.os-service { font-size:12px; color:var(--cyan); font-weight:600; margin-top:2px; }
.os-func { font-size:11px; color:var(--text3); margin-top:1px; }
.os-timer { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--green); margin-top:4px; display:flex; align-items:center; gap:4px; }
.os-timer.warn { color:var(--orange); }
.os-timer.over { color:var(--red); }
.os-status-badge { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 8px; border-radius:10px; margin-top:4px; }
.status-aguardando { background:rgba(74,85,104,0.2); color:var(--text3); border:1px solid rgba(74,85,104,0.3); }
.status-lavando { background:rgba(0,184,217,0.12); color:var(--cyan); border:1px solid rgba(0,184,217,0.35); }
.status-acabamento { background:rgba(255,214,0,0.12); color:var(--yellow); border:1px solid rgba(255,214,0,0.35); }
.status-pronto { background:rgba(45,212,160,0.12); color:var(--green); border:1px solid rgba(45,212,160,0.35); }
.status-finalizado { background:rgba(100,116,139,0.15); color:#94a3b8; border:1px solid rgba(100,116,139,0.3); }
.status-cancelado { background:rgba(255,95,95,0.1); color:var(--red); border:1px solid rgba(255,95,95,0.3); }
.status-patio { background:rgba(var(--primary-rgb),0.12); color:var(--primary); border:1px solid rgba(var(--primary-rgb),0.35); }
.os-card-btns { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.btn-status { padding:7px 10px; background:var(--bg4); border:1px solid var(--border); border-radius:7px; cursor:pointer; font-size:11px; font-family:'Syne',sans-serif; font-weight:600; color:var(--text2); transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.btn-status:hover { border-color:var(--cyan); color:var(--cyan); }
.btn-finalizar { padding:9px 14px; background:var(--green); color:#0a1a14; border:none; border-radius:8px; cursor:pointer; font-weight:700; font-size:12px; font-family:'Syne',sans-serif; white-space:nowrap; flex-shrink:0; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.btn-finalizar:hover { background:#26c090; }
/* ═══════════════════════════════════════════════════════
CHAT DA LOJA — ícone no header + banner home + modal lista
═══════════════════════════════════════════════════════ */
/* Ícone do chat no header (sempre visível em qualquer tela) */
.header-chat-btn {
position: relative;
background: none;
border: none;
cursor: pointer;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text2);
transition: color 0.18s;
}
.header-chat-btn:hover { color: var(--primary); }
.header-chat-btn .header-chat-badge {
position: absolute;
top: 2px;
right: 0;
background: var(--red, #ef4444);
color: #fff;
font-size: 10px;
font-weight: 800;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: none;
align-items: center;
justify-content: center;
padding: 0 5px;
border: 2px solid var(--bg);
animation: headerChatPulse 1.5s infinite;
font-family: 'Syne', sans-serif;
line-height: 1;
}
.header-chat-btn.tem-novas { color: var(--primary); }
.header-chat-btn.tem-novas .header-chat-badge { display: inline-flex; }
@keyframes headerChatPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* Banner de aviso na Home — destaque grande quando tem mensagens novas */
.home-chat-alert {
display: none;
margin: 0 0 16px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.05));
border: 1px solid rgba(239,68,68,0.35);
border-radius: 14px;
cursor: pointer;
transition: all 0.18s;
animation: homeAlertEnter 0.4s ease;
}
.home-chat-alert.ativo { display: flex; align-items: center; gap: 14px; }
.home-chat-alert:hover { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(239,68,68,0.08)); transform: translateY(-1px); }
@keyframes homeAlertEnter {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.home-chat-alert-icon {
width: 44px; height: 44px;
background: rgba(239,68,68,0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
animation: headerChatPulse 1.5s infinite;
}
.home-chat-alert-text { flex: 1; min-width: 0; }
.home-chat-alert-title {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 14px;
color: var(--red, #ef4444);
}
.home-chat-alert-sub {
font-size: 12px;
color: var(--text2);
margin-top: 2px;
}
.home-chat-alert-arrow {
color: var(--red, #ef4444);
font-size: 18px;
flex-shrink: 0;
}
/* Modal "Chats Ativos" — lista de todas as conversas */
#modal-lista-chats .modal-sheet {
max-height: 88vh;
display: flex;
flex-direction: column;
padding: 0;
padding-bottom: var(--safe-bottom);
}
.lista-chats-header {
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.lista-chats-title {
flex: 1;
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 17px;
color: var(--text);
}
.lista-chats-sub {
font-size: 11px;
color: var(--text3);
margin-top: 2px;
}
.lista-chats-body {
flex: 1;
overflow-y: auto;
padding: 8px 0;
min-height: 200px;
max-height: 64vh;
}
.lista-chats-empty {
text-align: center;
color: var(--text3);
font-size: 13px;
padding: 50px 24px;
line-height: 1.5;
}
.lista-chat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.15s;
position: relative;
}
.lista-chat-item:hover { background: var(--bg3); }
.lista-chat-item.tem-unread { background: rgba(var(--primary-rgb), 0.06); }
.lista-chat-item.tem-unread::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--red, #ef4444);
}
.lista-chat-icon {
width: 42px; height: 42px;
background: var(--bg3);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 12px;
color: var(--text);
flex-shrink: 0;
letter-spacing: 1px;
}
.lista-chat-info { flex: 1; min-width: 0; }
.lista-chat-placa {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 14px;
color: var(--text);
letter-spacing: 1.5px;
}
.lista-chat-msg {
font-size: 12px;
color: var(--text2);
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lista-chat-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.lista-chat-time {
font-size: 10px;
color: var(--text3);
font-family: 'JetBrains Mono', monospace;
}
.lista-chat-unread-pill {
background: var(--red, #ef4444);
color: #fff;
font-size: 11px;
font-weight: 800;
min-width: 20px;
height: 20px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 6px;
font-family: 'Syne', sans-serif;
}
/* Modal de chat da loja (sliding-up bottom, mesmo padrão dos outros modais) */
#modal-chat-loja .modal-sheet {
max-height: 88vh;
display: flex;
flex-direction: column;
padding: 0;
padding-bottom: var(--safe-bottom);
}
.chat-loja-header {
padding: 16px 20px 14px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.chat-loja-header-info { flex: 1; min-width: 0; }
.chat-loja-placa {
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 18px;
color: var(--text);
letter-spacing: 2px;
}
.chat-loja-btn-os {
display: inline-flex;
align-items: center;
padding: 4px 9px;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text2);
font-size: 11px;
font-weight: 700;
font-family: 'Syne', sans-serif;
cursor: pointer;
transition: all 0.15s;
letter-spacing: 0.5px;
}
.chat-loja-btn-os:hover {
background: var(--primary-light, rgba(249,115,22,0.12));
border-color: var(--primary);
color: var(--primary);
}
.chat-loja-sub {
font-size: 11px;
color: var(--text3);
margin-top: 2px;
}
.chat-loja-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.chat-loja-btn-icon {
width: 36px; height: 36px;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: all 0.15s;
}
.chat-loja-btn-icon:hover { background: var(--bg4); color: var(--text); }
.chat-loja-btn-wa { color: #25d366; }
.chat-loja-btn-wa:hover { background: rgba(37,211,102,0.12); color: #25d366; }
.chat-loja-msgs {
flex: 1;
overflow-y: auto;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 240px;
max-height: 50vh;
}
.chat-loja-empty {
text-align: center;
color: var(--text3);
font-size: 13px;
padding: 32px 16px;
line-height: 1.5;
}
.chat-loja-bubble {
max-width: 78%;
padding: 9px 13px;
border-radius: 14px;
font-size: 14px;
line-height: 1.35;
word-wrap: break-word;
animation: chatLojaMsgIn 0.2s ease both;
}
@keyframes chatLojaMsgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-loja-bubble.loja {
align-self: flex-end;
background: var(--primary);
color: white;
border-bottom-right-radius: 4px;
}
.chat-loja-bubble.cliente {
align-self: flex-start;
background: var(--bg3);
color: var(--text);
border-bottom-left-radius: 4px;
border: 1px solid var(--border);
}
.chat-loja-bubble-ts {
font-size: 10px;
opacity: 0.6;
margin-top: 4px;
}
.chat-loja-presets {
padding: 8px 16px 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
flex-shrink: 0;
}
.chat-loja-preset-btn {
padding: 7px 12px;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 99px;
color: var(--text2);
font-size: 12px;
cursor: pointer;
font-family: 'Syne', sans-serif;
font-weight: 600;
transition: all 0.15s;
}
.chat-loja-preset-btn:hover {
background: rgba(var(--primary-rgb), 0.12);
border-color: var(--primary);
color: var(--primary);
}
.chat-loja-input-row {
display: flex;
gap: 8px;
padding: 12px 16px;
/* Padding-bottom extra pra acomodar o botão flutuante do navegador (Brave/iOS Assistive)
que costuma aparecer no canto inferior direito sobrepondo o botão de enviar. */
padding-bottom: calc(34px + var(--safe-bottom, 0px));
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.chat-loja-input {
flex: 1;
padding: 11px 14px;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 22px;
color: var(--text);
font-size: 14px;
font-family: inherit;
outline: none;
}
.chat-loja-input:focus { border-color: var(--primary); }
.chat-loja-send {
width: 44px; height: 44px;
background: var(--primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.chat-loja-send:hover { background: var(--primary-dark, #ea6b0e); }
.chat-loja-send:disabled { opacity: 0.4; cursor: not-allowed; }
/* MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:200; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn 0.2s ease; }
.modal-overlay.ativo { display:flex; align-items:flex-end; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-sheet { width:100%; background:var(--bg2); border-radius:20px 20px 0 0; border:1px solid var(--border); padding:24px 20px; padding-bottom:calc(36px + var(--safe-bottom)); padding-left:calc(20px + var(--safe-left)); padding-right:calc(20px + var(--safe-right)); animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:none} }
.modal-handle { width:36px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:16px; }
.modal-car-info { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
.modal-car-thumb { width:64px; height:64px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.modal-car-thumb-ph { width:64px; height:64px; border-radius:10px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.modal-placa { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; color:var(--blue3); letter-spacing:3px; }
.modal-car-detail { font-size:13px; color:var(--text2); margin-top:3px; }
.modal-service-box { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; }
.modal-service-name { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:var(--cyan); }
.modal-service-detail { font-size:12px; color:var(--text2); margin-top:4px; }
.modal-tempo-box { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; text-align:center; }
.tempo-col-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:4px; }
.tempo-col-val { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--text); }
.tempo-col-val.destaque { color:var(--blue3); font-size:17px; }
.valor-display { text-align:center; padding:20px; background:var(--bg3); border-radius:var(--radius); border:1px solid var(--border); margin-bottom:20px; }
.valor-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; }
.valor-num { font-family:'JetBrains Mono',monospace; font-size:44px; font-weight:700; color:var(--blue3); line-height:1.1; margin-top:6px; }
.valor-breakdown { font-size:11px; color:var(--text3); margin-top:4px; }
.pagamento-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.pag-btn { padding:12px 8px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text2); font-family:'Syne',sans-serif; font-size:12px; font-weight:600; cursor:pointer; text-align:center; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.pag-btn .pag-icon { font-size:20px; display:block; margin-bottom:4px; }
.pag-btn.sel { border-color:var(--blue2); background:var(--blue-glow); color:var(--blue3); }
/* STATUS PIPELINE */
.status-pipeline { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:16px; }
.status-pipe-btn { padding:10px 6px; background:var(--bg3); border:2px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; text-align:center; font-family:'Syne',sans-serif; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text3); transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.status-pipe-btn .sp-icon { font-size:16px; display:block; margin-bottom:3px; }
.status-pipe-btn.active-aguardando { border-color:rgba(74,85,104,0.5); color:var(--text2); background:rgba(74,85,104,0.1); }
.status-pipe-btn.active-lavando { border-color:var(--cyan); color:var(--cyan); background:rgba(0,184,217,0.1); }
.status-pipe-btn.active-acabamento { border-color:var(--yellow); color:var(--yellow); background:rgba(255,214,0,0.1); }
.status-pipe-btn.active-pronto { border-color:var(--green); color:var(--green); background:rgba(45,212,160,0.1); }
/* MODAL CANCELAMENTO */
.modal-cancel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:201; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal-cancel-overlay.ativo { display:flex; align-items:flex-end; }
.modal-cancel-sheet { width:100%; background:var(--bg2); border-radius:20px 20px 0 0; border:1px solid var(--border); padding:24px 20px; padding-bottom:calc(36px + var(--safe-bottom)); animation:slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1); max-height:80vh; overflow-y:auto; }
.modal-cancel-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:8px; color:var(--red); }
.modal-cancel-sub { font-size:13px; color:var(--text2); margin-bottom:16px; }
.motivo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.motivo-btn { padding:11px 8px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:12px; font-family:'Syne',sans-serif; font-weight:600; color:var(--text2); text-align:center; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.motivo-btn.sel { border-color:var(--red); background:rgba(255,95,95,0.08); color:var(--red); }
/* MODAL CAIXA */
.modal-caixa-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:202; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-caixa-overlay.ativo { display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-caixa-sheet { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:24px 20px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; animation:fadeUp 0.3s ease; }
.caixa-header { text-align:center; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.caixa-icon { font-size:36px; margin-bottom:8px; }
.caixa-title { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; }
.caixa-subtitle { font-size:13px; color:var(--text3); margin-top:4px; }
.caixa-total-row { background:linear-gradient(135deg,rgba(var(--primary-rgb),0.15),rgba(var(--primary-rgb),0.05)); border:1px solid rgba(var(--primary-rgb),0.3); border-radius:var(--radius); padding:16px; text-align:center; margin-bottom:16px; }
.caixa-total-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; }
.caixa-total-val { font-family:'JetBrains Mono',monospace; font-size:36px; font-weight:700; color:var(--blue3); margin-top:4px; }
.caixa-section { margin-bottom:16px; }
.caixa-section-title { font-size:10px; text-transform:uppercase; letter-spacing:2px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:700; margin-bottom:10px; }
.caixa-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.caixa-row:last-child { border-bottom:none; }
.caixa-row-label { color:var(--text2); }
.caixa-row-val { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--text); }
.caixa-pag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.caixa-pag-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 8px; text-align:center; }
.caixa-pag-icon { font-size:20px; margin-bottom:4px; }
.caixa-pag-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:4px; }
.caixa-pag-val { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; }
.caixa-pag-val.dinheiro { color:var(--green); }
.caixa-pag-val.pix { color:var(--purple); }
.caixa-pag-val.cartao { color:var(--blue3); }
.btn-fechar-caixa { width:100%; padding:16px; background:linear-gradient(135deg,rgba(255,95,95,0.12),rgba(255,95,95,0.06)); border:1px solid rgba(255,95,95,0.35); border-radius:var(--radius); color:var(--red); font-family:'Syne',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.15s; margin-top:20px; display:flex; align-items:center; justify-content:center; gap:8px; -webkit-appearance:none; touch-action:manipulation; }
.btn-fechar-caixa:hover { background:linear-gradient(135deg,rgba(255,95,95,0.2),rgba(255,95,95,0.1)); }
/* RELATÓRIO */
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.stat-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.stat-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:6px; }
.stat-val { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--blue3); }
.pag-breakdown { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.pag-breakdown-title { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:14px; }
.pag-breakdown-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pag-breakdown-item { text-align:center; padding:12px 6px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.pag-breakdown-item.dinheiro { border-color:rgba(45,212,160,0.3); background:rgba(45,212,160,0.06); }
.pag-breakdown-item.pix { border-color:rgba(167,139,250,0.3); background:rgba(167,139,250,0.06); }
.pag-breakdown-item.cartao { border-color:rgba(var(--primary-rgb),0.3); background:rgba(var(--primary-rgb),0.06); }
.pag-breakdown-icon { font-size:20px; margin-bottom:4px; }
.pag-breakdown-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:600; margin-bottom:4px; }
.pag-breakdown-val { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; }
.pag-breakdown-val.dinheiro { color:var(--green); }
.pag-breakdown-val.pix { color:var(--purple); }
.pag-breakdown-val.cartao { color:var(--blue3); }
.pag-breakdown-count { font-size:10px; color:var(--text3); margin-top:2px; }
.hist-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; }
.hist-item-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.hist-placa { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--blue3); letter-spacing:2px; }
.hist-info { font-size:12px; color:var(--text2); margin-top:2px; }
.hist-valor { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--green); }
.hist-times { display:flex; gap:6px; font-size:11px; color:var(--text3); font-family:'JetBrains Mono',monospace; align-items:center; flex-wrap:wrap; }
.hist-time-chip { background:var(--bg4); border:1px solid var(--border); border-radius:6px; padding:3px 8px; display:flex; align-items:center; gap:4px; }
.hist-time-chip span { color:var(--text2); }
.hist-chip-pix { color:var(--purple); border-color:rgba(167,139,250,0.3); background:rgba(167,139,250,0.06); }
.hist-chip-cartao { color:var(--blue3); border-color:rgba(var(--primary-rgb),0.3); background:rgba(var(--primary-rgb),0.06); }
.hist-chip-dinheiro { color:var(--green); border-color:rgba(45,212,160,0.3); background:rgba(45,212,160,0.06); }
/* EMPTY STATE */
.empty-state { text-align:center; padding:60px 20px; color:var(--text3); }
.empty-icon { font-size:44px; margin-bottom:12px; }
.empty-text { font-size:14px; }
/* HISTÓRICO FECHAMENTOS */
.rel-diario-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:10px; }
.rel-diario-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.rel-diario-data { font-family:'Syne',sans-serif; font-weight:700; font-size:16px; }
.rel-diario-hora { font-size:11px; color:var(--text3); margin-top:2px; }
.rel-diario-total-label { font-size:10px; color:var(--text3); text-align:right; }
.rel-diario-total { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--blue3); }
.rel-diario-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:8px; margin-bottom:12px; }
.rel-diario-stat { background:var(--bg4); border-radius:8px; padding:10px; text-align:center; }
.rel-diario-stat-val { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--text); }
.rel-diario-stat-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-top:3px; }
.rel-diario-pags { display:flex; gap:6px; flex-wrap:wrap; }
.rel-diario-pag { font-size:11px; padding:4px 10px; border-radius:20px; font-family:'JetBrains Mono',monospace; }
.rel-diario-pag.dinheiro { background:rgba(45,212,160,0.1); color:var(--green); border:1px solid rgba(45,212,160,0.2); }
.rel-diario-pag.pix { background:rgba(167,139,250,0.1); color:var(--purple); border:1px solid rgba(167,139,250,0.2); }
.rel-diario-pag.cartao { background:rgba(var(--primary-rgb),0.1); color:var(--blue3); border:1px solid rgba(var(--primary-rgb),0.2); }
.btn-ver-veiculos { width:100%; padding:8px; background:none; border:1px solid var(--border); border-radius:8px; color:var(--text3); font-size:12px; font-family:'Syne',sans-serif; font-weight:600; cursor:pointer; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; }
.btn-ver-veiculos:hover { color:var(--blue3); border-color:var(--border-active); }
.veiculos-fechamento { display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.veiculos-fechamento.aberto { display:block; }
.vf-item { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.vf-item:last-child { border-bottom:none; }
.vf-thumb { width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.vf-thumb-ph { width:40px; height:40px; border-radius:8px; background:var(--bg4); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.vf-body { flex:1; min-width:0; }
.vf-placa { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--blue3); letter-spacing:1px; }
.vf-info { font-size:11px; color:var(--text2); margin-top:1px; }
.vf-times { font-size:10px; color:var(--text3); margin-top:2px; }
.vf-valor { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--green); }
/* CONFIGURAÇÕES */
.config-group-title { font-family:'Syne',sans-serif; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--primary); margin:28px 0 14px 0; border-bottom:1.5px solid rgba(var(--primary-rgb),0.15); padding-bottom:6px; display:flex; align-items:center; gap:6px; }
/* ════════════════════════════════════════════════════════
MENU DE CONFIGURAÇÕES — grid de cards por categoria.
Cada card abre UMA seção específica (não acordeão).
════════════════════════════════════════════════════════ */
.cfg-menu-cat {
font-family:'Syne',sans-serif; font-weight:800; font-size:11px;
text-transform:uppercase; letter-spacing:1.5px; color:var(--primary);
margin:24px 0 10px 0;
}
.cfg-menu-cat:first-child { margin-top: 0; }
.cfg-menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 600px) {
.cfg-menu-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.cfg-menu-grid { grid-template-columns: repeat(4, 1fr); }
}
.cfg-card {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 12px;
display: flex; flex-direction: column; gap: 6px;
cursor: pointer;
text-align: left;
transition: all 0.18s;
font-family: inherit;
color: var(--text);
min-height: 100px;
}
.cfg-card:hover {
border-color: var(--primary);
background: var(--bg3);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.12);
}
.cfg-card-ico {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--primary-rgb), 0.12);
color: var(--primary);
border-radius: 10px;
flex-shrink: 0;
}
.cfg-card-ico svg { width: 18px; height: 18px; }
.cfg-card-nome {
font-family:'Syne',sans-serif; font-weight: 800; font-size: 14px;
color: var(--text);
line-height: 1.2;
}
.cfg-card-sub {
font-size: 11px; color: var(--text3); line-height: 1.3;
}
.config-section { margin-bottom:14px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; overflow:hidden; padding:0 16px; }
.config-section-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:800; padding:14px 0 10px 0; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; transition:opacity 0.18s; }
.config-section-title:hover { opacity:0.85; }
.config-section-title::after { content:'▼'; margin-left:auto; font-size:10px; color:var(--text3); transition:transform 0.2s; }
.config-section.collapsed .config-section-title::after { transform:rotate(-90deg); }
.config-section.collapsed > *:not(.config-section-title) { display:none !important; }
.config-section.collapsed { padding-bottom:0; }
.config-section:not(.collapsed) { padding-bottom:14px; }
.config-section-count { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text3); font-weight:600; background:rgba(255,255,255,0.05); padding:2px 8px; border-radius:99px; }
.config-section.active-individual-screen { margin-bottom: 0 !important; background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.config-section.active-individual-screen > .config-section-title { display: none !important; }
.config-section.active-individual-screen > .config-section-title::after,
#config-pacotes-dinamico .config-section > .config-section-title::after { display: none !important; }
#config-pacotes-dinamico .config-section > .config-section-title { cursor: default !important; }
.config-pkg-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
.config-pkg-info { flex:1; }
.config-pkg-name { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; }
.config-pkg-detail { font-size:12px; color:var(--text3); margin-top:2px; }
.config-pkg-preco { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--blue3); }
.config-pkg-btns { display:flex; gap:6px; }
.btn-edit-small { padding:6px 10px; background:var(--bg4); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:12px; color:var(--text2); -webkit-appearance:none; touch-action:manipulation; }
.btn-edit-small:hover { border-color:var(--blue3); color:var(--blue3); }
.btn-del-small { padding:6px 10px; background:rgba(255,95,95,0.08); border:1px solid rgba(255,95,95,0.2); border-radius:6px; cursor:pointer; font-size:12px; color:var(--red); -webkit-appearance:none; touch-action:manipulation; }
.btn-del-small:hover { background:rgba(255,95,95,0.15); }
.func-config-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
.func-config-avatar { font-size:28px; }
.func-config-name { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; flex:1; }
.btn-add-config { width:100%; padding:12px; background:rgba(var(--primary-rgb),0.08); border:1px dashed rgba(var(--primary-rgb),0.3); border-radius:var(--radius-sm); color:var(--blue3); font-size:13px; font-family:'Syne',sans-serif; font-weight:600; cursor:pointer; transition:all 0.15s; -webkit-appearance:none; touch-action:manipulation; display:flex; align-items:center; justify-content:center; gap:6px; }
.btn-add-config:hover { background:rgba(var(--primary-rgb),0.15); }
/* MODAL CONFIG FORM */
.modal-config-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:300; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-config-overlay.ativo { display:flex; align-items:flex-end; }
.modal-config-sheet { width:100%; background:var(--bg2); border-radius:20px 20px 0 0; border:1px solid var(--border); padding:24px 20px; padding-bottom:calc(36px + var(--safe-bottom)); animation:slideUp 0.3s ease; max-height:80vh; overflow-y:auto; }
/* AI RESULT */
.ai-result-card { background:var(--bg3); border:1px solid rgba(var(--primary-rgb),0.3); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
.ai-result-title { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--blue3); font-family:'Syne',sans-serif; font-weight:700; margin-bottom:10px; }
.ai-result-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.ai-result-row:last-child { border-bottom:none; }
.ai-result-label { color:var(--text3); }
.ai-result-val { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--text); }
.ai-detect-row { display:flex; align-items:center; gap:6px; margin-top:4px; }
.ai-tag { font-size:10px; padding:2px 8px; border-radius:10px; font-family:'JetBrains Mono',monospace; font-weight:700; }
.ai-tag.alta { background:rgba(45,212,160,0.1); color:var(--green); border:1px solid rgba(45,212,160,0.3); }
.ai-tag.media { background:rgba(255,214,0,0.1); color:var(--yellow); border:1px solid rgba(255,214,0,0.3); }
.ai-tag.baixa { background:rgba(255,95,95,0.1); color:var(--red); border:1px solid rgba(255,95,95,0.2); }
/* CRM */
.crm-card { background:var(--bg3); border:1px solid rgba(var(--primary-rgb),0.3); border-radius:var(--radius-sm); padding:12px; margin-bottom:12px; animation:fadeUp 0.2s; }
.crm-title { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--blue3); font-family:'Syne',sans-serif; font-weight:700; margin-bottom:8px; }
.crm-row { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; }
.crm-label { color:var(--text3); }
.crm-val { color:var(--text); font-weight:600; }
/* BLUETOOTH */
.bt-status-bar { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:12px; font-size:12px; font-family:'JetBrains Mono',monospace; display:none; }
.bt-config-bar { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; display:none; }
.bt-config-bar-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; margin-bottom:10px; }
.bt-device-name { font-size:12px; color:var(--text2); margin-bottom:10px; }
/* TICKET OVERLAY */
.ticket-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:400; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ticket-overlay.ativo { display:flex; align-items:flex-start; justify-content:center; padding:20px; padding-top:calc(20px + var(--safe-top)); }
.ticket-card { background:#fff; border-radius:12px; overflow:hidden; width:100%; max-width:320px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.ticket-foto-wrap { width:100%; aspect-ratio:4/3; max-height:160px; overflow:hidden; background:#e5e7eb; display:flex; align-items:center; justify-content:center; }
.ticket-foto-wrap img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.1); }
.ticket-foto-placeholder { font-size:48px; }
.ticket-header { text-align:center; padding:12px 12px 8px; border-bottom:1px dashed #ddd; }
.ticket-logo-name { font-family:'Syne',sans-serif; font-size:20px; font-weight:900; color:#111; letter-spacing:-0.5px; }
.ticket-logo-name span { color:var(--primary); }
.ticket-badge { font-size:9px; font-weight:700; letter-spacing:1.5px; color:#666; text-transform:uppercase; margin-top:2px; }
.ticket-body { padding:10px 12px; }
.ticket-placa-box { background:#111; color:var(--primary); font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; letter-spacing:5px; text-align:center; padding:10px 8px; margin:8px 0; border-radius:6px; }
.ticket-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #f0f0f0; }
.ticket-row:last-child { border-bottom:none; }
.ticket-row-label { font-size:9px; text-transform:uppercase; font-weight:600; color:#888; letter-spacing:0.5px; }
.ticket-row-val { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:#111; text-align:right; }
.ticket-obs { background:#eff6ff; border:1px solid #bfdbfe; border-radius:6px; padding:8px 10px; margin-top:8px; }
.ticket-obs-label { font-size:8px; text-transform:uppercase; font-weight:700; color:var(--primary); margin-bottom:2px; }
.ticket-obs-text { font-size:11px; color:#374151; }
.ticket-footer { text-align:center; padding:8px 12px 12px; border-top:1px dashed #ddd; }
.ticket-footer-text { font-size:9px; color:#888; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.ticket-id { font-family:'JetBrains Mono',monospace; font-size:9px; color:#bbb; margin-top:4px; }
.ticket-actions { display:flex; gap:8px; padding:12px; border-top:1px solid #eee; }
.ticket-actions button { flex:1; padding:12px; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Syne',sans-serif; -webkit-appearance:none; touch-action:manipulation; }
.btn-ticket-fechar { background:#f3f4f6; color:#374151; }
.btn-ticket-imprimir { background:var(--primary); color:#fff; }
/* TOAST */
#toast-container { position:fixed; bottom:calc(20px + var(--safe-bottom)); left:50%; transform:translateX(-50%); z-index:999999; display:flex; flex-direction:column; gap:8px; pointer-events:none; width:calc(100% - 40px); max-width:400px; }
.toast { padding:12px 16px; border-radius:12px; font-size:13px; font-weight:600; font-family:'Syne',sans-serif; animation:toastIn 0.3s ease; text-align:center; }
.toast.success { background:rgba(45,212,160,0.15); border:1px solid rgba(45,212,160,0.4); color:var(--green); }
.toast.error { background:rgba(255,95,95,0.15); border:1px solid rgba(255,95,95,0.4); color:var(--red); }
.toast.info { background:rgba(var(--primary-rgb),0.15); border:1px solid rgba(var(--primary-rgb),0.4); color:var(--blue3); }
.toast.warning { background:rgba(255,109,0,0.15); border:1px solid rgba(255,109,0,0.5); color:var(--orange); font-weight:600; }
@keyframes toastIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
/* RANKING */
.ranking-item { display:flex; align-items:center; gap:12px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; }
.ranking-pos { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; width:32px; text-align:center; }
.ranking-info { flex:1; }
.ranking-name { font-size:14px; font-weight:600; }
.ranking-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.ranking-val { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; color:var(--blue3); }
/* ── TABS de relatório ── */
.rel-tabs { display:flex; gap:0; margin-bottom:16px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.rel-tab { flex:1; padding:10px 4px; font-size:11px; font-family:'Syne',sans-serif; font-weight:700; text-align:center; letter-spacing:0.5px; text-transform:uppercase; background:transparent; border:none; color:var(--text3); cursor:pointer; transition:all 0.15s; -webkit-appearance:none; }
.rel-tab.ativa { background:var(--blue2); color:#fff; }
/* ── Card de métrica grande ── */
.metrica-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:18px 16px; margin-bottom:10px; }
.metrica-titulo { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); font-family:'Syne',sans-serif; font-weight:700; margin-bottom:10px; }
.metrica-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.metrica-item { background:var(--bg4); border-radius:var(--radius-sm); padding:12px 10px; text-align:center; }
.metrica-val { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--blue3); }
.metrica-val.verde { color:var(--green); }
.metrica-val.amarelo { color:var(--yellow); }
.metrica-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:var(--text3); margin-top:4px; }
/* ── Barra de progresso ── */
.barra-wrap { margin-bottom:12px; }
.barra-topo { display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; }
.barra-nome { color:var(--text2); font-weight:500; }
.barra-val { font-family:'JetBrains Mono',monospace; color:var(--blue3); font-weight:700; }
.barra-bg { height:6px; background:var(--bg4); border-radius:10px; overflow:hidden; }
.barra-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--blue2),var(--blue3)); transition:width 0.5s ease; }
/* ── Histórico de caixa expandido ── */
.hist-caixa-empty { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; }
@media print {
body, .header, .tela, #toast-container { display:none !important; }
.ticket-overlay { display:flex !important; align-items:flex-start !important; position:static !important; background:#fff !important; padding:0 !important; }
.ticket-card { box-shadow:none !important; border-radius:0 !important; max-width:72mm !important; width:100% !important; border:none !important; background:white !important; font-size:12px !important; }
.ticket-foto-wrap { max-height:54mm !important; }
.ticket-foto-wrap img { filter:grayscale(100%) contrast(1.15) !important; }
.ticket-actions { display:none !important; }
.ticket-body { padding:8px 10px !important; }
.ticket-placa-box { font-size:22px !important; padding:8px !important; letter-spacing:4px !important; }
}
/* ── TELA DE LOGIN / ATIVAÇÃO ── */
#login-overlay {
position:fixed; inset:0; z-index:9999;
background:#0a0c12;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:32px 24px; font-family:'Inter',sans-serif;
}
#login-overlay.hidden { display:none; }
.login-logo { margin-bottom:28px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.login-logo-mark { width:160px; height:160px; background:#ffffff; border-radius:24px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(249,115,22,0.35); overflow:hidden; border:2px solid rgba(249,115,22,0.5); }
.login-logo-mark img { filter:none; }
.login-logo-mark svg { width:44px; height:44px; }
.login-brand { font-family:'Syne',sans-serif; font-size:26px; font-weight:800; letter-spacing:-0.5px; color:#e8ecf4; text-align:center; }
.login-brand span { color:var(--primary); }
.login-tagline { font-size:11px; color:#6b7280; letter-spacing:2px; text-transform:uppercase; text-align:center; }
.login-card { background:#0f1219; border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:28px 24px; width:100%; max-width:360px; }
.login-titulo { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:#e8ecf4; margin-bottom:6px; text-align:center; }
.login-sub { font-size:13px; color:#8892a4; text-align:center; margin-bottom:24px; line-height:1.5; }
.login-input { width:100%; padding:16px 20px; font-size:18px; font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:4px; text-align:center; background:#151b26; border:2px solid rgba(255,255,255,0.08); border-radius:12px; color:var(--primary); outline:none; -webkit-appearance:none; transition:border-color 0.2s,box-shadow 0.2s; margin-bottom:12px; }
.login-input::placeholder { color:#2a3245; letter-spacing:2px; font-size:14px; }
.login-input:focus { border-color:rgba(var(--primary-rgb),0.7); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.12); }
.login-input.erro { border-color:rgba(255,95,95,0.6); color:#ff5f5f; animation:shake 0.3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.login-btn { width:100%; padding:16px; background:var(--primary); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:700; font-family:'Syne',sans-serif; letter-spacing:0.3px; cursor:pointer; transition:all 0.15s; -webkit-appearance:none; }
.login-btn:hover { background:var(--primary); }
.login-btn:active { transform:scale(0.98); }
.login-erro-msg { display:none; color:#ff5f5f; font-size:12px; text-align:center; margin-top:10px; }
.login-inativo-msg { color:#ffd600; font-size:12px; text-align:center; margin-bottom:16px; padding:10px 14px; background:rgba(255,214,0,0.07); border:1px solid rgba(255,214,0,0.2); border-radius:10px; display:none; }
.login-footer { margin-top:28px; font-size:11px; color:#1c2333; font-family:'JetBrains Mono',monospace; text-align:center; }
/* ── SETUP PRIMEIRA VEZ (vincular loja) ── */
#setup-overlay { position:fixed; inset:0; z-index:10000; background:rgba(10,12,18,0.97); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; font-family:'Inter',sans-serif; }
#setup-overlay.hidden { display:none; }
.setup-card { background:#0f1219; border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:28px 24px; width:100%; max-width:360px; }
.setup-titulo { font-family:'Syne',sans-serif; font-size:17px; font-weight:800; color:#e8ecf4; margin-bottom:6px; text-align:center; }
.setup-sub { font-size:12px; color:#8892a4; text-align:center; margin-bottom:20px; line-height:1.5; }
.setup-email-badge { background:#1c2333; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px 14px; font-size:12px; font-family:'JetBrains Mono',monospace; color:var(--primary); text-align:center; margin-bottom:20px; }
.setup-escolha { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.setup-opcao { padding:16px 18px; border-radius:12px; border:2px solid rgba(255,255,255,0.08); background:#151b26; cursor:pointer; text-align:left; transition:all 0.15s; -webkit-appearance:none; width:100%; font-family:'Inter',sans-serif; }
.setup-opcao:hover { border-color:rgba(var(--primary-rgb),0.6); }
.setup-opcao-titulo { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; color:#e8ecf4; margin-bottom:3px; }
.setup-opcao-sub { font-size:11px; color:#8892a4; line-height:1.4; }
#setup-func-area { display:none; margin-bottom:12px; }
#setup-func-area.ativo { display:block; }
.setup-input { width:100%; padding:14px 16px; font-size:14px; font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:2px; background:#151b26; border:2px solid rgba(255,255,255,0.08); border-radius:12px; color:var(--primary); outline:none; -webkit-appearance:none; transition:border-color 0.2s; }
.setup-input:focus { border-color:rgba(var(--primary-rgb),0.6); }
.setup-input::placeholder { color:#2a3245; letter-spacing:1px; font-weight:400; font-size:12px; }
.setup-btn { width:100%; padding:14px; background:var(--primary); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:700; font-family:'Syne',sans-serif; cursor:pointer; transition:all 0.15s; -webkit-appearance:none; margin-top:8px; }
.setup-btn:hover { background:var(--primary); }
.setup-erro { display:none; color:#ff5f5f; font-size:12px; text-align:center; margin-top:8px; }
/* ── CARD CÓDIGO DA LOJA ── */
.loja-code-card { background:var(--bg3); border:1px solid rgba(var(--primary-rgb),0.35); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.loja-code-label { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--blue3); font-family:'Syne',sans-serif; font-weight:700; margin-bottom:8px; }
.loja-code-value { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text2); background:var(--bg4); border:1px solid var(--border); border-radius:8px; padding:10px 12px; word-break:break-all; margin-bottom:10px; }
.loja-code-role { font-size:11px; color:var(--text3); margin-bottom:10px; }
/* ══════════════════════════════════════════════════════════
WIZARD DE ONBOARDING (primeiro login)
══════════════════════════════════════════════════════════ */
.wiz-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 9000; display: none; overflow-y: auto; padding: 0; }
.wiz-overlay.ativo { display: block; }
.wiz-container { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 24px 20px 40px; }
.wiz-progress-bar { position: sticky; top: 0; background: var(--bg); padding: 14px 0 12px; margin-bottom: 12px; z-index: 5; }
.wiz-progress-track { height: 4px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.wiz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #fb923c); transition: width 0.4s ease; border-radius: 99px; width: 0%; }
.wiz-progress-label { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; display: flex; justify-content: space-between; }
.wiz-skip { cursor: pointer; color: var(--text2); }
.wiz-skip:hover { color: var(--primary); }
.wiz-step { display: none; animation: wizFadeUp 0.35s ease both; }
.wiz-step.ativa { display: block; }
@keyframes wizFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.wiz-emoji { font-size: 64px; text-align: center; margin: 24px 0 8px; }
.wiz-emoji-sucesso { font-size: 96px; text-align: center; margin: 40px 0 16px; animation: wizBounce 0.6s ease; }
@keyframes wizBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.wiz-h1 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; margin: 8px 0 12px; letter-spacing: -0.5px; color: var(--text); }
.wiz-sub { color: var(--text2); font-size: 14px; line-height: 1.5; margin-bottom: 22px; }
.wiz-field { margin-bottom: 16px; }
.wiz-field-label { display: block; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.wiz-input { width: 100%; padding: 14px 16px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); font-size: 16px; font-family: 'Inter', sans-serif; transition: border-color 0.15s; box-sizing: border-box; }
.wiz-input:focus { outline: none; border-color: var(--primary); }
.wiz-vert-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; }
.wiz-vert-card { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 14px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.15s; }
.wiz-vert-card:hover { border-color: rgba(var(--primary-rgb), 0.4); background: var(--bg3); }
.wiz-vert-card.sel { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }
.wiz-vert-icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--bg3); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.wiz-vert-card.sel .wiz-vert-icon { background: rgba(var(--primary-rgb), 0.15); }
.wiz-vert-info { flex: 1; min-width: 0; }
.wiz-vert-nome { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 2px; color: var(--text); }
.wiz-vert-desc { font-size: 11px; color: var(--text3); line-height: 1.3; }
.wiz-vert-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.wiz-vert-card.sel .wiz-vert-check { border-color: var(--primary); background: var(--primary); }
.wiz-vert-card.sel .wiz-vert-check::after { content: '✓'; color: #fff; font-weight: 700; font-size: 13px; }
.wiz-pacote-prev { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wiz-pacote-info { flex: 1; min-width: 0; }
.wiz-pacote-nome { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 2px; color: var(--text); }
.wiz-pacote-desc { font-size: 11px; color: var(--text3); }
.wiz-pacote-preco { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--green); white-space: nowrap; }
.wiz-pacote-tag { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 9px; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.3px; margin-left: 6px; }
.wiz-step-info { text-align: center; font-size: 11px; color: var(--text3); margin: 8px 0 14px; font-family: 'Syne', sans-serif; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.wiz-checklist { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 14px; margin: 18px 0; }
.wiz-checklist-titulo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; }
.wiz-checklist-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--text); }
.wiz-check-ok { color: var(--green); font-weight: 700; width: 18px; flex-shrink: 0; }
.wiz-btn-row { display: flex; gap: 10px; margin-top: 24px; }
.wiz-btn { flex: 1; padding: 15px; border-radius: 12px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px; cursor: pointer; transition: all 0.15s; border: none; letter-spacing: 0.3px; }
.wiz-btn-primary { background: linear-gradient(135deg, var(--primary), #fb923c); color: #fff; flex: 2; box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3); }
.wiz-btn-primary:hover { transform: translateY(-1px); }
.wiz-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.wiz-btn-ghost { background: transparent; color: var(--text2); border: 1.5px solid var(--border); }
.wiz-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
/* ══════════════════════════════════════════════════════════
TOUR GUIADO — coachmarks com spotlight + tooltip
Padrão moderno (Stripe / Linear / Notion): destaca elemento,
escurece o resto, bloqueia clique fora do alvo.
══════════════════════════════════════════════════════════ */
.tour-overlay { position: fixed; inset: 0; z-index: 9500; display: none; pointer-events: none; }
.tour-overlay.ativo { display: block; }
/* Camada escura que cobre tudo — quem cria o "buraco" é o box-shadow do spotlight */
.tour-backdrop { position: absolute; inset: 0; background: transparent; pointer-events: none; }
/* Spotlight: posicionado sobre o elemento alvo via JS (top/left/width/height inline) */
.tour-spotlight {
position: fixed;
border-radius: 14px;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 3px rgba(var(--primary-rgb), 0.85), 0 0 32px rgba(var(--primary-rgb), 0.6);
pointer-events: none;
transition: top 0.35s cubic-bezier(.4,0,.2,1), left 0.35s cubic-bezier(.4,0,.2,1), width 0.35s, height 0.35s;
animation: tourPulse 2s ease-in-out infinite;
}
@keyframes tourPulse {
0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 3px rgba(var(--primary-rgb), 0.85), 0 0 32px rgba(var(--primary-rgb), 0.6); }
50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.72), 0 0 0 5px rgba(var(--primary-rgb), 1), 0 0 48px rgba(var(--primary-rgb), 0.9); }
}
/* Tooltip: card flutuante com o texto da etapa */
.tour-tooltip {
position: fixed;
max-width: 320px;
width: calc(100vw - 32px);
background: var(--bg2);
border: 1.5px solid var(--primary);
border-radius: 16px;
padding: 18px 18px 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--primary-rgb), 0.2);
z-index: 9700;
transition: top 0.35s cubic-bezier(.4,0,.2,1), left 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s;
opacity: 1;
pointer-events: auto;
}
.tour-tooltip-step { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10px; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.tour-tooltip-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 6px; line-height: 1.25; }
.tour-tooltip-body { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 14px; }
.tour-tooltip-body b { color: var(--text); font-weight: 700; }
.tour-tooltip-actions { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.tour-tooltip-progress { display: flex; gap: 4px; }
.tour-progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bg3); transition: all 0.2s; }
.tour-progress-dot.ativo { background: var(--primary); width: 18px; border-radius: 99px; }
.tour-progress-dot.feito { background: var(--green); }
.tour-tooltip-btns { display: flex; gap: 8px; }
.tour-btn { padding: 8px 14px; border-radius: 10px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer; border: none; transition: all 0.15s; letter-spacing: 0.3px; }
.tour-btn-primary { background: var(--primary); color: #fff; }
.tour-btn-primary:hover { filter: brightness(1.05); }
.tour-btn-ghost { background: transparent; color: var(--text3); border: 1px solid var(--border); }
.tour-btn-ghost:hover { color: var(--text2); border-color: var(--text3); }
/* Seta apontando do tooltip pro spotlight */
.tour-tooltip::before {
content: ''; position: absolute; width: 14px; height: 14px;
background: var(--bg2); border: 1.5px solid var(--primary); border-right: none; border-bottom: none;
transform: rotate(45deg);
}
.tour-tooltip[data-arrow="top"]::before { top: -8px; left: 50%; margin-left: -7px; }
.tour-tooltip[data-arrow="bottom"]::before { bottom: -8px; left: 50%; margin-left: -7px; transform: rotate(225deg); }
.tour-tooltip[data-arrow="left"]::before { left: -8px; top: 50%; margin-top: -7px; transform: rotate(-45deg); }
.tour-tooltip[data-arrow="right"]::before { right: -8px; top: 50%; margin-top: -7px; transform: rotate(135deg); }
/* Animação de "shake" quando user clica no lugar errado */
@keyframes tourShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.tour-tooltip.shake { animation: tourShake 0.4s ease; }
/* ══════════════════════════════════════════════════════════
BOTÃO FLUTUANTE MYCHAELL + MODAL
══════════════════════════════════════════════════════════ */
.float-mychaell { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: calc(18px + env(safe-area-inset-right, 0px)); width: 54px; height: 54px; background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; border: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4), 0 0 0 3px rgba(37, 211, 102, 0.12); z-index: 998; transition: transform 0.2s; animation: mychaellPulse 2.5s ease-in-out infinite; padding: 0; }
.float-mychaell.ativo { display: flex; }
.float-mychaell:hover { transform: scale(1.08); }
.float-mychaell svg { width: 26px; height: 26px; color: #fff; }
@keyframes mychaellPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4), 0 0 0 3px rgba(37, 211, 102, 0.12); } 50% { box-shadow: 0 6px 18px rgba(37, 211, 102, 0.5), 0 0 0 7px rgba(37, 211, 102, 0.05); } }
.modal-mychaell-avatar { width: 96px; height: 96px; border-radius: 50%; background: #fff; padding: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 6px 20px rgba(249,115,22,0.25), 0 0 0 4px rgba(249,115,22,0.12); }
.modal-mychaell-avatar img { width: 100%; height: 100%; object-fit: contain; }
.modal-mychaell-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(45, 212, 160, 0.15); color: var(--green); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 99px; margin: 0 auto 14px; width: max-content; }
.modal-mychaell-msg { background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 14px; font-style: italic; }
.modal-mychaell-msg-label { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
/* ════════════════════════════════════════════════════════
MODAL DECIDIR LAVAR/GUARDAR — 2 botões grandes centralizados
════════════════════════════════════════════════════════ */
.modal-nent-decidir-titulo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.modal-nent-decidir-titulo-icon { width: 32px; height: 32px; color: var(--primary); }
.modal-nent-decidir-titulo h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; margin: 0; color: var(--text); }
.nent-decidir-btn { width: 100%; min-height: 100px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: 1px; color: #fff; border: none; cursor: pointer; margin-bottom: 12px; text-transform: uppercase; transition: transform 0.15s; padding: 0 24px; position: relative; overflow: hidden; }
.nent-decidir-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%); pointer-events: none; }
.nent-decidir-btn:active { transform: scale(0.97); }
.nent-decidir-btn .nent-decidir-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.18); border-radius: 12px; flex-shrink: 0; }
.nent-decidir-btn .nent-decidir-icon svg { width: 24px; height: 24px; }
.nent-decidir-lavar { background: linear-gradient(140deg, #3b82f6, #60a5fa); box-shadow: 0 8px 24px rgba(59,130,246,0.30); }
.nent-decidir-guardar { background: linear-gradient(140deg, var(--primary), #fb923c); box-shadow: 0 8px 24px rgba(249,115,22,0.30); }