:root {
--bg: #0b0f19;
--surface: rgba(17, 24, 39, 0.85);
--surface-solid: #111827;
--surface2: rgba(30, 41, 59, 0.7);
--surface3: rgba(51, 65, 85, 0.7);
--border: rgba(255, 255, 255, 0.08);
--border-subtle: rgba(255, 255, 255, 0.05);
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
--green: #10b981;
--red: #f43f5e;
--yellow: #f59e0b;
--blue: #38bdf8;
--purple: #8b5cf6;
--text: #f8fafc;
--text2: #94a3b8;
--text3: #64748b;
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 18px;
--glass-blur: blur(14px) saturate(180%);
--glass-bg: rgba(17, 24, 39, 0.75);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.25), 0 2px 6px -1px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
}
html.theme-claro {
--bg: #f8fafc;
--surface: rgba(255, 255, 255, 0.9);
--surface-solid: #ffffff;
--surface2: rgba(241, 245, 249, 0.85);
--surface3: rgba(226, 232, 240, 0.85);
--border: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.04);
--text: #1e293b; /* Cinza escuro grafite */
--text2: #334155; /* Grafite médio */
--text3: #64748b; /* Grafite suave */
--accent: #1a73e8;
--accent-hover: #1557b0;
--accent-gradient: linear-gradient(135deg, #1a73e8 0%, #3b82f6 100%);
--green: #0d9488;
--red: #e11d48;
--yellow: #d97706;
--blue: #0284c7;
--purple: #7c3aed;
--glass-bg: rgba(255, 255, 255, 0.85);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 16px 36px -4px rgba(15, 23, 42, 0.09);
}
html.theme-meio-claro {
--bg: #f1f5f9;
--surface: rgba(255, 255, 255, 0.94);
--surface-solid: #ffffff;
--surface2: rgba(241, 245, 249, 0.9);
--surface3: rgba(226, 232, 240, 0.9);
--border: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.04);
--green: #0d9488; --red: #dc2626; --yellow: #d97706;
--text: #1e293b; --text2: #334155; --text3: #64748b;
--accent: #2563eb; --blue: #0284c7;
--glass-bg: rgba(241, 245, 249, 0.85);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--shadow-md: 0 4px 18px -2px rgba(0,0,0,0.07);
--shadow-lg: 0 14px 32px -4px rgba(0,0,0,0.12);
}
html.theme-cinza-medio {
--bg: #cbd5e1;
--surface: rgba(248, 250, 252, 0.92);
--surface-solid: #f1f5f9;
--surface2: rgba(226, 232, 240, 0.85);
--surface3: rgba(203, 213, 225, 0.85);
--border: rgba(0, 0, 0, 0.12);
--border-subtle: rgba(0, 0, 0, 0.06);
--green: #0d9488; --red: #dc2626; --yellow: #d97706;
--text: #0f172a; --text2: #334155; --text3: #475569;
--accent: #2563eb; --blue: #0284c7;
--glass-bg: rgba(226, 232, 240, 0.88);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 18px -2px rgba(0,0,0,0.1);
--shadow-lg: 0 14px 32px -4px rgba(0,0,0,0.15);
}
html.theme-meio-escuro {
--bg: #334155;
--surface: rgba(51, 65, 85, 0.9);
--surface-solid: #334155;
--surface2: rgba(71, 85, 105, 0.8);
--surface3: rgba(100, 116, 139, 0.8);
--border: rgba(255, 255, 255, 0.12);
--border-subtle: rgba(255, 255, 255, 0.06);
--accent: #60a5fa;
--green: #34d399; --red: #fb7185; --yellow: #fbbf24;
--text: #f8fafc; --text2: #e2e8f0; --text3: #cbd5e1;
--blue: #38bdf8;
--glass-bg: rgba(51, 65, 85, 0.82);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
--shadow-md: 0 4px 20px -2px rgba(0,0,0,0.3);
--shadow-lg: 0 14px 34px -4px rgba(0,0,0,0.4);
}
html.theme-colorido {
--bg: #f8fafc;
--surface: rgba(255, 255, 255, 0.9);
--surface-solid: #ffffff;
--surface2: rgba(241, 245, 249, 0.85);
--surface3: rgba(226, 232, 240, 0.85);
--border: rgba(0, 0, 0, 0.08);
--text: #1e293b;
--text2: #334155;
--text3: #64748b;
--accent: #2563eb;
--green: #10b981;
--red: #f43f5e;
--yellow: #f59e0b;
--blue: #3b82f6;
--glass-bg: rgba(255, 255, 255, 0.88);
}
html.theme-colorido body {
background: #f8fafc;
}
html.theme-colorido .cb-btn.btn-executivo {
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #06b6d4 100%) !important;
}
html.theme-colorido .kpi-card:nth-child(5n+1) { --kpi-color: #2563eb; }
html.theme-colorido .kpi-card:nth-child(5n+2) { --kpi-color: #059669; }
html.theme-colorido .kpi-card:nth-child(5n+3) { --kpi-color: #f59e0b; }
html.theme-colorido .kpi-card:nth-child(5n+4) { --kpi-color: #10b981; }
html.theme-colorido .kpi-card:nth-child(5n+5) { --kpi-color: #7c3aed; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
html, body { overflow-x: hidden; }
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
letter-spacing: -0.015em;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background 0.3s, color 0.3s;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
/* Tela cheia de carregamento inicial — visível por padrão (sem depender de
JS) até o Firebase Auth confirmar se existe sessão ou não. Sem isto, o
formulário de login inteiro (#login-screen, que ficava display:flex por
padrão) piscava a cada F5 mesmo pra quem já estava logado, porque
onAuthStateChanged é assíncrono e initApp() só era chamado no
window.onload — dava a impressão de ter deslogado sozinho. auth.js
esconde este loader e revela login-screen OU app-wrapper assim que o
Auth resolve, nunca os dois ao mesmo tempo. */
#app-boot-loader {
position: fixed;
inset: 0;
z-index: 10000;
background:
radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.16) 0, transparent 40%),
radial-gradient(circle at 88% 22%, rgba(124, 58, 237, 0.15) 0, transparent 40%),
radial-gradient(circle at 50% 88%, rgba(16, 185, 129, 0.10) 0, transparent 45%),
radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.12) 0, transparent 35%),
var(--bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
transition: opacity 0.3s ease;
}
/* O símbolo do Apoiare já é um anel aberto com uma bolinha na ponta —
girá-lo faz ele funcionar como o próprio indicador de carregamento,
sem precisar de um spinner genérico ao lado. */
.boot-loader-icon {
width: 60px;
height: 60px;
object-fit: contain;
animation: boot-logo-spin 1.6s cubic-bezier(0.55, 0.06, 0.45, 0.94) infinite,
boot-logo-glow 2.4s ease-in-out infinite;
}
@keyframes boot-logo-spin { to { transform: rotate(360deg); } }
@keyframes boot-logo-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
50% { filter: drop-shadow(0 0 14px rgba(37, 99, 235, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
.boot-loader-icon { animation: boot-logo-glow 2.4s ease-in-out infinite; }
}
#login-screen {
position: fixed;
inset: 0;
z-index: 9999;
background:
radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.16) 0, transparent 40%),
radial-gradient(circle at 88% 22%, rgba(124, 58, 237, 0.15) 0, transparent 40%),
radial-gradient(circle at 50% 88%, rgba(16, 185, 129, 0.10) 0, transparent 45%),
radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.12) 0, transparent 35%),
var(--bg);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-layout-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
width: 100%;
max-width: 1080px;
margin: auto;
}
/* Painel de Apresentação à esquerda (Sem bordas, moderno e colorido) */
.login-presentation {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
padding: 12px 6px;
}
.presentation-brand-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.08);
color: var(--accent);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
width: fit-content;
}
.presentation-brand-tag .pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
}
.presentation-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.2rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.04em;
color: var(--text); /* Cinza escuro grafite nos temas claros */
margin: 0;
}
.presentation-subtitle {
font-size: 0.95rem;
line-height: 1.55;
color: var(--text2); /* Grafite suave */
margin: 0;
font-weight: 500;
}
.presentation-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 20px;
margin-top: 4px;
}
.presentation-feat-item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.feat-icon-box {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.feat-icon-box.c-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.feat-icon-box.c-green { background: rgba(5, 150, 105, 0.12); color: #059669; }
.feat-icon-box.c-purple { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
.feat-icon-box.c-amber { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.feat-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.feat-title {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.feat-title.c-blue { color: #2563eb; }
.feat-title.c-green { color: #059669; }
.feat-title.c-purple { color: #7c3aed; }
.feat-title.c-amber { color: #d97706; }
html.is-dark .feat-title.c-blue { color: #60a5fa; }
html.is-dark .feat-title.c-green { color: #34d399; }
html.is-dark .feat-title.c-purple { color: #a78bfa; }
html.is-dark .feat-title.c-amber { color: #fbbf24; }
html.is-dark .feat-icon-box.c-blue { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }
html.is-dark .feat-icon-box.c-green { background: rgba(52, 211, 153, 0.16); color: #34d399; }
html.is-dark .feat-icon-box.c-purple { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
html.is-dark .feat-icon-box.c-amber { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.feat-desc {
font-size: 0.78rem;
line-height: 1.45;
color: var(--text2); /* Cinza escuro grafite nos temas claros */
font-weight: 500;
}
.presentation-footer-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text2); /* Grafite */
font-weight: 600;
margin-top: 4px;
}
/* Card de Login à Direita com Glassmorphism Moderno */
.login-card {
background: color-mix(in srgb, var(--surface) 74%, transparent);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.35));
border-radius: 22px;
padding: 34px 28px;
width: 100%;
max-width: 400px;
flex: 0 0 400px;
box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
text-align: center;
max-height: 92vh;
overflow-y: auto;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-card .logo { padding: 0 0 18px 0; border: none; }
.login-card h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; letter-spacing: -0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.login-card p { font-size: 0.82rem; color: var(--text2); margin-top: 6px; margin-bottom: 0; font-weight: 500; }
.login-card label { color: var(--text2) !important; }
@media (max-width: 900px) {
.login-layout-container {
flex-direction: column;
gap: 24px;
justify-content: center;
}
.login-presentation {
text-align: center;
align-items: center;
max-width: 460px;
padding: 0;
}
.presentation-title {
font-size: 1.6rem;
}
.presentation-features-grid {
display: none;
}
.presentation-footer-pill {
display: none;
}
.login-card {
max-width: 100%;
flex: 1 1 auto;
padding: 28px 20px;
}
}
.brand-badge-beta {
font-size: 0.58rem;
background: rgba(99, 102, 241, 0.09);
color: #4f46e5;
border: 1px solid rgba(99, 102, 241, 0.22);
padding: 2px 6px;
border-radius: 5px;
font-weight: 800;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
html.is-dark .brand-badge-beta {
background: rgba(99, 102, 241, 0.16);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.35);
}
.auth-link { color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; display: block; margin-top: 14px; text-decoration: underline; }
.tipo-conta-card { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: var(--surface2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tipo-conta-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tipo-conta-card.active { border-color: var(--accent); background: rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.tipo-conta-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.tipo-conta-nome { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.tipo-conta-preco { font-size: 0.75rem; color: var(--text3); margin-top: 1px; font-weight: 600; }
/* Widget de Perfil / Saudação, Data e Clima (Design Exato do Mockup) */
.sidebar-header-widget {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 8px 9px;
background: color-mix(in srgb, var(--surface2) 75%, transparent);
border: 1px solid var(--border);
border-radius: 14px;
margin-top: 3px;
cursor: pointer;
user-select: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.sidebar-header-widget:hover {
background: var(--surface2);
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.sidebar-user-avatar {
width: 54px;
height: 54px;
min-width: 54px;
border-radius: 50%;
background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.02em;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25);
border: 2.5px solid rgba(255, 255, 255, 0.95);
box-sizing: border-box;
/* border-radius + overflow:hidden numa camada composta (a ![]()
dentro
força isso) deixa a borda "serrilhada" em Chrome/Edge — o clip do
overflow não é anti-aliasing igual ao do border-radius do próprio
elemento. Uma máscara força o navegador a recortar com anti-aliasing
de verdade, sem mudar nada visualmente. */
-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
mask-image: radial-gradient(circle, #fff 100%, #000 100%);
}
html.is-dark .sidebar-user-avatar {
border-color: rgba(255, 255, 255, 0.2);
}
.sidebar-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
.sidebar-user-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.sidebar-user-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.sidebar-saudacao-text {
font-size: 0.78rem;
font-weight: 600;
color: var(--text2);
line-height: 1.1;
}
/* Clima solto ao lado da saudação — sem caixa/borda, só ícone + temperatura,
no mesmo espírito "flat" do resto do redesign (nada de chip quadrado). */
.sidebar-weather-widget {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 3px;
line-height: 1;
flex-shrink: 0;
}
.sidebar-weather-widget span#weather-temp {
font-size: 0.75rem;
font-weight: 700;
color: var(--text3);
}
.sidebar-user-name {
font-size: 0.88rem;
font-weight: 800;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.03em;
line-height: 1.2;
margin-top: 1px;
}
.sidebar-user-sub-row {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 1px;
}
.sidebar-user-role-badge {
font-size: 0.58rem;
font-weight: 800;
color: var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
}
.sidebar-datetime-box {
margin-top: 2px;
padding-top: 2px;
border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
display: flex;
align-items: center;
}
.sidebar-datetime {
color: var(--text3);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.weather-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
#sidebar-lock-btn {
transition: color 0.15s ease, transform 0.15s ease;
}
#sidebar-lock-btn:hover {
color: var(--accent) !important;
transform: scale(1.1);
}
/* Modal de Ajuste e Recorte de Foto de Perfil (Avatar Cropper) */
.avatar-crop-container {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto 16px;
background: #090d16;
border-radius: 14px;
overflow: hidden;
touch-action: none;
user-select: none;
cursor: grab;
border: 1px solid var(--border);
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
}
.avatar-crop-container:active {
cursor: grabbing;
}
.avatar-crop-canvas {
width: 100%;
height: 100%;
display: block;
}
.avatar-crop-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.68);
border-radius: 50%;
border: 2.5px solid rgba(255, 255, 255, 0.95);
}
.avatar-crop-controls {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 16px;
}
.avatar-crop-zoom-row {
display: flex;
align-items: center;
gap: 10px;
}
.avatar-crop-zoom-row input[type="range"] {
flex: 1;
cursor: pointer;
accent-color: var(--accent);
}
.avatar-crop-btn-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeScaleIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }
#app-wrapper { display: none; width: 100%; flex: 1; flex-direction: row; animation: fadeIn 0.25s ease-out forwards; }
.sidebar {
width: 240px;
min-width: 240px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 16px 12px 14px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
overflow-x: hidden;
transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo { padding: 0 0 14px; border-bottom: none; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s ease; overflow-x: hidden; }
.sidebar-brand-header { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 2px 2px 10px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; text-decoration: none; transition: all 0.2s ease; }
.sidebar-brand-header:hover { opacity: 0.92; }
.sidebar-brand-expanded { display: flex; align-items: center; gap: 8px; }
.sidebar-brand-full-logo { height: 28px; width: auto; max-width: 145px; object-fit: contain; display: block; }
.sidebar-brand-icon { display: none; width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.logo p { font-size: 0.72rem; font-weight: 500; color: var(--text3); margin-top: 0; text-align: left; }
nav { flex: 1; padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; }
/* Cores temáticas individuais por item */
#nav-btn-inicio { --btn-c: #2563eb; --btn-bg: rgba(37, 99, 235, 0.12); }
#nav-btn-financas { --btn-c: #059669; --btn-bg: rgba(5, 150, 105, 0.12); }
#nav-btn-cartao { --btn-c: #7c3aed; --btn-bg: rgba(124, 58, 237, 0.12); }
#nav-btn-projetos { --btn-c: #d97706; --btn-bg: rgba(217, 119, 6, 0.12); }
#nav-btn-familia { --btn-c: #0891b2; --btn-bg: rgba(8, 145, 178, 0.12); }
#nav-btn-ajustes { --btn-c: #475569; --btn-bg: rgba(71, 85, 105, 0.12); }
#nav-btn-cuide-senhas { --btn-c: #e11d48; --btn-bg: rgba(225, 29, 72, 0.12); }
#nav-btn-cuide-agenda { --btn-c: #2563eb; --btn-bg: rgba(37, 99, 235, 0.12); }
#nav-btn-cuide-agendamento { --btn-c: #0d9488; --btn-bg: rgba(13, 148, 136, 0.12); }
#nav-btn-cuide-faturamento { --btn-c: #d97706; --btn-bg: rgba(217, 119, 6, 0.12); }
#nav-btn-cuide-chamados { --btn-c: #4f46e5; --btn-bg: rgba(79, 70, 229, 0.12); }
#nav-btn-cuide-materiais { --btn-c: #0284c7; --btn-bg: rgba(2, 132, 199, 0.12); }
#nav-btn-cuide-posvisita { --btn-c: #9333ea; --btn-bg: rgba(147, 51, 234, 0.12); }
.nav-btn {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 6px 8px;
margin-bottom: 2px;
border: 1px solid transparent;
background: transparent;
color: var(--text2);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
border-radius: 9px;
cursor: pointer;
text-align: left;
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn .icon {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 7px;
background: var(--btn-bg, rgba(37, 99, 235, 0.1));
color: var(--btn-c, var(--accent));
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-btn .icon svg {
width: 14px;
height: 14px;
stroke-width: 1.85px;
stroke: currentColor;
}
.nav-btn .nav-label {
color: var(--text2);
font-weight: 600;
letter-spacing: -0.01em;
transition: color 0.2s ease, font-weight 0.2s ease;
}
.nav-btn:hover:not(.active) {
background: var(--surface2);
}
.nav-btn:hover:not(.active) .nav-label {
color: var(--text);
}
.nav-btn:hover .icon {
transform: scale(1.06);
}
/* Estado Ativo: Seleção Moderna Glassmorphism & Indicador sutil */
.nav-btn.active {
background: color-mix(in srgb, var(--btn-c, var(--accent)) 10%, var(--surface));
border-color: color-mix(in srgb, var(--btn-c, var(--accent)) 26%, transparent);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
}
.nav-btn.active .nav-label {
color: var(--text);
font-weight: 700;
}
.nav-btn.active .icon {
background: var(--btn-c, var(--accent));
color: #ffffff;
box-shadow: 0 3px 10px color-mix(in srgb, var(--btn-c, var(--accent)) 40%, transparent);
transform: scale(1.04);
}
.nav-btn.active::before {
content: '';
position: absolute;
left: -4px;
top: 22%;
bottom: 22%;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--btn-c, var(--accent));
}
.sidebar-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 6px 12px; margin-top: 4px; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text3); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; border-radius: 0; transition: color 0.2s; }
.sidebar-toggle:hover { color: var(--accent); }
/* Sidebar recolhida: só ícones e avatar compacto, largura fixa menor */
#app-wrapper.sidebar-collapsed .sidebar {
width: 68px;
min-width: 68px;
max-width: 68px;
padding: 16px 8px 14px;
overflow-x: hidden !important;
}
#app-wrapper.sidebar-collapsed .main { margin-left: 68px; }
#app-wrapper.sidebar-collapsed .logo { padding: 0 0 10px; align-items: center; justify-content: center; width: 100%; overflow: hidden; gap: 6px; }
#app-wrapper.sidebar-collapsed .sidebar-brand-header { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto 6px; padding: 2px 0 8px; border-bottom: 1px solid var(--border); }
#app-wrapper.sidebar-collapsed .sidebar-brand-icon { width: 34px; height: 34px; margin: 0 auto; display: block !important; object-fit: contain; }
#app-wrapper.sidebar-collapsed .sidebar-brand-expanded { display: none !important; }
/* Foto do usuário recolhida (tamanho proporcional aos ícones de navegação) */
#app-wrapper.sidebar-collapsed .sidebar-header-widget {
display: flex !important;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto 4px;
padding: 2px 0 6px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
cursor: pointer;
}
#app-wrapper.sidebar-collapsed .sidebar-header-widget:hover {
background: transparent;
transform: none;
}
#app-wrapper.sidebar-collapsed .sidebar-user-avatar {
width: 32px;
height: 32px;
min-width: 32px;
font-size: 0.75rem;
border: 2px solid var(--accent);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#app-wrapper.sidebar-collapsed .sidebar-header-widget:hover .sidebar-user-avatar {
transform: scale(1.08);
}
#app-wrapper.sidebar-collapsed .sidebar-user-info { display: none !important; }
#app-wrapper.sidebar-collapsed nav {
overflow-x: hidden !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
#app-wrapper.sidebar-collapsed nav::-webkit-scrollbar {
display: none;
}
#app-wrapper.sidebar-collapsed .nav-btn { justify-content: center; padding: 8px 0; gap: 0; width: 100%; }
#app-wrapper.sidebar-collapsed .nav-btn .nav-label { display: none !important; }
#app-wrapper.sidebar-collapsed .cuide-nav-divider { margin: 6px auto; width: 60%; }
#app-wrapper.sidebar-collapsed .sidebar-toggle { width: 100%; padding: 8px 0; }
#app-wrapper.sidebar-collapsed .sidebar-toggle span.label { display: none; }
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.topbar {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--border);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 50;
flex-wrap: wrap;
gap: 10px;
}
.topbar-left { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.topbar-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-title h2 { font-size: 0.82rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; color: var(--text2); }
.app-name-brand { color: var(--text3); font-family: inherit; font-size: 0.82rem; font-weight: 600; }
.app-name-brand span { color: var(--text3); }
.title-separator { color: var(--border); font-weight: 400; font-size: 0.72rem; }
.current-page-name { color: var(--text); font-size: 0.82rem; font-weight: 700; font-family: inherit;}
.lock-badge { font-size: 0.58rem; padding: 2px 5px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; background: var(--red); color: white; display: none; align-items: center; justify-content: center; margin-left: 4px; }
.is-closed .lock-badge { display: inline-flex; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.month-nav { display: flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.month-nav button { background: transparent; border: none; color: var(--text2); padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.month-nav button:hover { background: var(--surface2); color: var(--text); }
.month-nav span { font-size: 0.78rem; font-weight: 700; min-width: 84px; text-align: center; color: var(--text); letter-spacing: -0.01em; }
.action-icon-btn { background: var(--surface); border: 1px solid var(--border); font-size: 0.95rem; cursor: pointer; border-radius: 8px; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.action-icon-btn:hover { background: var(--surface2); border-color: var(--accent); color: var(--text); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.action-icon-btn svg { width: 15px; height: 15px; }
/* Ícones do topo ganham cor própria — a mesma linguagem das caixinhas
coloridas do login/cards (feat-icon-box, kpi-label-icon), em vez do
cinza grafite neutro que os 5 botões tinham em comum. #lock-btn usa
currentColor porque o JS já alterna a cor dele (vermelho fechado /
neutro aberto) — o tingimento do fundo só acompanha o que já existe.
#bell-btn saiu do topbar (agora mora na sidebar, com cor própria via
estilo inline) — o slot amarelo que era dele passou pra #favoritos-btn. */
#favoritos-btn, .topbar-right .action-icon-btn[title="Manual de Uso"], #lock-btn, #theme-btn, #btn-sair-topbar, #lms-topbar-btn {
background: color-mix(in srgb, currentColor 12%, var(--surface));
border-color: color-mix(in srgb, currentColor 30%, var(--border));
}
#favoritos-btn:hover, .topbar-right .action-icon-btn[title="Manual de Uso"]:hover, #lock-btn:hover, #theme-btn:hover, #btn-sair-topbar:hover, #lms-topbar-btn:hover {
background: color-mix(in srgb, currentColor 24%, var(--surface));
border-color: currentColor;
}
#favoritos-btn { color: var(--yellow); }
.topbar-right .action-icon-btn[title="Manual de Uso"] { color: var(--blue); }
#theme-btn { color: var(--purple); }
#lms-topbar-btn { color: var(--green); }
#btn-sair-topbar:hover { color: var(--red); }
.page { display: none; padding: 18px 24px; flex: 1; }
.page.active { display: block; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi-card {
background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
}
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--kpi-color, var(--accent)), transparent); border-radius: 3px 3px 0 0; z-index: 1; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--kpi-color, var(--accent)); }
.kpi-card::after { display: none; }
.kpi-label { font-size: 0.72rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 700; overflow-wrap: break-word; display: flex; align-items: center; justify-content: space-between; }
.kpi-label-icon { font-size: 0.82rem; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kpi-color, var(--accent)) 12%, transparent); color: var(--kpi-color, var(--text2)); transition: transform 0.3s ease; }
.kpi-card:hover .kpi-label-icon { transform: scale(1.08); }
.kpi-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; color: var(--text); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: break-word; margin-bottom: 0; }
.kpi-trend { font-size: 0.72rem; display:flex; align-items:center; gap:5px; margin-top: 8px; font-weight:600; flex-wrap: wrap; padding-top: 0; border-top: none; }
.trend-neutral { color: var(--text3); font-weight: 500; font-size: 0.72rem; }
#op-kpi-grid .kpi-card { border: 1px solid var(--border); }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.chart-card {
background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 20px;
min-width: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chart-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.chart-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; color: var(--text); margin-bottom: 14px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; }
.chart-filters { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; align-items: center; justify-content: space-between; }
.chart-filter-group { display: flex; align-items: center; gap: 8px; }
.chart-filter-label { font-size: 0.72rem; font-weight: 700; color: var(--text2); white-space: nowrap; letter-spacing: -0.01em; }
.chart-filter-sel { width: auto; padding: 5px 10px; font-size: 0.78rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; cursor: pointer; font-weight: 600; transition: border-color 0.15s; }
.chart-filter-sel:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.chart-wrap { position: relative; height: 210px; width: 100%; overflow: hidden; }
/* ── Dashboard Book View (Lâminas sem rolagem / Modo Livro) ── */
#page-dashboard {
padding: 10px 18px 14px;
}
#page-dashboard .control-bar {
margin-bottom: 8px;
padding: 5px 10px;
}
#page-dashboard #tabs-dashboard {
margin-bottom: 8px !important;
}
#page-dashboard .kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
margin-bottom: 8px;
}
#page-dashboard .kpi-card {
padding: 10px 14px;
border-radius: 10px;
}
#page-dashboard .kpi-label {
font-size: 0.75rem;
margin-bottom: 3px;
}
#page-dashboard .kpi-value {
font-size: 1.18rem;
}
#page-dashboard .kpi-trend {
margin-top: 4px;
font-size: 0.75rem;
}
.dash-book-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 2px;
width: 100%;
}
.dash-book-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 5px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-sm);
}
.dash-book-tabs {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.dash-book-tab-btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
padding: 4px 10px;
border-radius: 7px;
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dash-book-tab-btn:hover {
background: var(--surface3);
color: var(--text);
}
.dash-book-tab-btn.active {
background: var(--accent);
color: #ffffff;
border-color: var(--accent);
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.dash-book-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.dash-book-nav-btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
padding: 4px 9px;
border-radius: 7px;
font-size: 0.72rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: all 0.15s ease;
}
.dash-book-nav-btn:hover {
background: var(--surface3);
border-color: var(--accent);
}
.dash-book-page-indicator {
font-size: 0.72rem;
font-weight: 700;
color: var(--text3);
padding: 0 4px;
}
.dash-book-viewport {
position: relative;
width: 100%;
min-height: 240px;
}
.dash-book-slide,
.dash-slide {
display: none;
width: 100%;
animation: dashSlideFade 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.dash-book-slide.active,
.dash-slide.active {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 12px;
align-items: stretch;
}
.dash-book-slide > .dash-widget-wrap:only-child,
.dash-slide > .dash-widget-wrap:only-child,
.dash-widget-wrap[data-widget-id="widget_dre_dinamica"],
.dash-widget-wrap[data-widget-id="widget_proj_matriz"] {
grid-column: 1 / -1;
width: 100%;
}
.dash-book-slide .chart-card,
.dash-slide .chart-card {
padding: 12px 14px;
border-radius: 10px;
margin-bottom: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
}
.dash-book-slide .chart-card h3,
.dash-slide .chart-card h3 {
margin-bottom: 8px;
font-size: 0.78rem;
}
.dash-book-slide .chart-wrap,
.dash-slide .chart-wrap {
height: 185px;
flex: 0 0 185px;
}
.dash-book-slide .card,
.dash-slide .card {
border-radius: 10px;
margin-bottom: 0 !important;
height: 100%;
display: flex;
flex-direction: column;
}
.dash-book-slide .card-header,
.dash-slide .card-header {
padding: 8px 14px;
}
.dash-book-slide .card-header h3,
.dash-slide .card-header h3 {
font-size: 0.8rem;
}
.dash-book-slide .card-body,
.dash-slide .card-body {
padding: 12px 14px;
flex: 1;
}
@keyframes dashSlideFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Modo Contínuo: exibe todas as lâminas empilhadas */
.dash-continuous-mode .dash-book-header {
display: none;
}
.dash-continuous-mode .dash-book-slide,
.dash-continuous-mode .dash-slide {
display: grid !important;
margin-bottom: 16px;
}
/* Control Bar (Barra Unificada de Ferramentas e Filtros) */
.control-bar {
display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
padding: 8px 12px; background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
align-items: center; position: relative; overflow: visible;
}
.control-bar .cb-btn {
border: 1px solid var(--border); background: var(--surface2); color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 6px 12px; border-radius: 7px;
font-weight: 600; transition: all 0.2s; font-size: 0.78rem; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.control-bar .cb-btn:hover { transform: translateY(-1px); background: var(--surface3); border-color: var(--accent); }
.control-bar .cb-btn.btn-executivo,
.control-bar .cb-btn.cb-btn-premium {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%, color-mix(in srgb, var(--purple) 15%, var(--surface2)) 100%);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text);
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
padding: 5px 10px;
border-radius: 8px;
font-weight: 600;
font-size: 0.78rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.control-bar .cb-btn.btn-executivo:hover,
.control-bar .cb-btn.cb-btn-premium:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--surface)) 0%, color-mix(in srgb, var(--purple) 25%, var(--surface2)) 100%);
border-color: var(--accent);
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.cb-badge-pill {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
font-size: 0.75rem;
padding: 1.5px 5.5px;
border-radius: 999px;
font-weight: 800;
letter-spacing: 0.4px;
margin-left: 2px;
box-shadow: 0 1px 4px rgba(16, 185, 129, 0.35);
}
/* Modal de Customização de Dashboard / Lâminas */
.dash-cust-slide-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
transition: border-color 0.2s;
}
.dash-cust-slide-card:hover {
border-color: var(--accent);
}
.dash-cust-slide-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dash-cust-slots-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dash-cust-slot {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.dash-cust-slot.full-width {
grid-column: 1 / -1;
}
.dash-cust-slot-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dash-cust-select {
width: 100%;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text);
font-size: 0.78rem;
font-family: inherit;
font-weight: 600;
outline: none;
}
.dash-cust-select:focus {
border-color: var(--accent);
}
.dash-cust-presets {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.dash-cust-preset-btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text2);
padding: 5px 10px;
border-radius: 7px;
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.dash-cust-preset-btn:hover {
background: var(--surface3);
color: var(--accent);
border-color: var(--accent);
}
.control-bar .cb-export {
padding: 6px 12px; font-weight: 600; font-size: 0.78rem; background: var(--surface2); border: 1px solid var(--border);
border-radius: 7px; color: var(--text); cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.control-bar .cb-export:hover { background: var(--surface3); border-color: var(--accent); }
.control-bar .chart-filter-group { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 4px; }
.control-bar .chart-filter-group:first-of-type { border-left: none; padding-left: 0; margin-left: 0; }
.control-bar .chart-filter-label { font-size: 0.72rem; font-weight: 600; color: var(--text2); display:flex; align-items:center; gap:5px; margin-bottom: 0; }
.control-bar .chart-filter-sel { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.78rem; font-weight: 600; color: var(--text); cursor: pointer; outline: none; transition: border-color 0.2s; }
.control-bar .chart-filter-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }
.reports-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.reports-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.reports-group-label { font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; white-space: nowrap; }
.report-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.04); white-space: nowrap; }
.report-btn:hover { background: var(--surface2); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(59,130,246,0.15); color: var(--accent); }
.report-btn.btn-executivo { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); color: #fff; border: none; box-shadow: 0 4px 12px rgba(124,58,237,0.35); }
.report-btn.btn-executivo:hover { transform: translateY(-1px); color: #fff; }
.report-btn .report-btn-icon { font-size: 0.95rem; }
/* Dropdown de Exportação */
.export-dropdown-wrap { position: relative; display: inline-block; }
.export-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0
8px 28px rgba(0,0,0,0.22); min-width: 280px; overflow: hidden; }
.export-dropdown-menu.open { display: block; }
.export-dropdown-section { padding: 4px 0; }
.export-dropdown-section + .export-dropdown-section { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 2px; }
.export-dropdown-label { font-size: 0.75rem; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px 3px; }
.edi-row { display: flex; align-items: center; width: 100%; padding: 6px 12px; border-top: 1px solid var(--border); cursor: default; }
.edi-row:first-child { border-top: none; }
.edi-row:hover { background: var(--surface2); }
.edi-row-icon { font-size: 0.88rem; width: 22px; flex-shrink: 0; text-align: center; }
.edi-row-name { flex: 1; font-size: 0.78rem; font-weight: 500; color: var(--text); line-height: 1.25; padding: 0 6px; cursor: pointer; }
.edi-row-name:hover { color: var(--accent); text-decoration: underline; }
.edi-row-badges { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.edi-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 900; color: #fff; cursor: pointer; border: none; font-family: inherit; letter-spacing: 0.03em; transition: opacity 0.15s, transform 0.1s; }
.edi-badge:hover { opacity: 0.85; transform: scale(1.05); }
.edi-badge.pdf { background: #e53e3e; }
.edi-badge.ppt { background: #7c6af7; }
.edi-badge.xls { background: #1d6f42; }
.export-dropdown-item { display: none !important; }
/* M3 e Skeletons */
.filters-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-sel { padding: 7px 12px; font-size: 0.82rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; outline: none; width: auto; flex: 0 0 auto; }
.view-toggle { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; flex: 0 0 auto; }
.view-toggle-btn { border: none; background: transparent; color: var(--text3); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
/* Preenchimento sólido (var(--accent) + texto branco) fazia o botão ativo
parecer "inchado"/desalinhado ao lado dos vizinhos sem preenchimento —
conferido via getBoundingClientRect() na Agenda, as medidas batem
certinho (30px de altura em todos), era só ilusão de ótica pelo
contraste forte de cor. Suavizado pro mesmo tom translúcido do resto
da barra de filtros, sem esse efeito. */
.view-toggle-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.view-toggle-btn:not(.active):hover { background: var(--surface3); color: var(--text); }
.agenda-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.agenda-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; padding: 4px 0 8px; }
.agenda-day { min-height: 76px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.agenda-day:hover { border-color: var(--accent); background: var(--surface2); }
.agenda-day.empty { visibility: hidden; pointer-events: none; }
.agenda-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.agenda-day-num { font-size: 0.78rem; font-weight: 700; color: var(--text2); }
.agenda-day-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.agenda-day-dot { width: 6px; height: 6px; border-radius: 50%; }
.agenda-day-total { font-size: 0.75rem; font-weight: 700; margin-top: auto; }
.filter-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,247,0.15); }
.icon-search { display: flex; align-items: center; }
.icon-search-input { width: 0; min-width: 0; padding: 0; margin-left: 0; border: 1px solid transparent; background: var(--surface2); color: var(--text); border-radius: 8px; font-size: 0.82rem; font-family: 'Plus Jakarta Sans', sans-serif; outline: none; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin-left 0.2s ease; }
.icon-search-input.show { width: 170px; padding: 7px 10px; margin-left: 6px; opacity: 1; border-color: var(--border); }
.icon-search-input.show:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,247,0.15); }
.chart-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: skeletonLoading 1.5s infinite; border-radius: 8px; z-index: 1; pointer-events: none;}
@keyframes skeletonLoading { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.chart-loaded .chart-skeleton { display: none; }
.card {
background: var(--surface);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 18px;
box-shadow: var(--shadow-md);
transition: border-color 0.2s, box-shadow 0.2s;
}
.card-header {
padding: 13px 18px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
.card-header h3, .card-header h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.card-body { padding: 0; overflow-x: auto; background: transparent; }
table { width: 100%; border-collapse: collapse; min-width: 0; }
thead th {
padding: 9px 16px;
text-align: left;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text3);
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }
td { padding: 10px 16px; font-size: 0.82rem; font-weight: 500; color: var(--text2); }
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
padding: 2.5px 8px;
border-radius: 9999px;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.35;
border: 1px solid transparent;
}
.badge-green { background: rgba(16, 185, 129, 0.12); color: var(--green); border-color: rgba(16, 185, 129, 0.22); }
.badge-red { background: rgba(244, 63, 94, 0.12); color: var(--red); border-color: rgba(244, 63, 94, 0.22); }
.badge-yellow { background: rgba(245, 158, 11, 0.12); color: var(--yellow); border-color: rgba(245, 158, 11, 0.22); }
.badge-blue { background: rgba(56, 189, 248, 0.12); color: var(--blue); border-color: rgba(56, 189, 248, 0.22); }
.badge-purple { background: rgba(139, 92, 246, 0.12); color: var(--purple); border-color: rgba(139, 92, 246, 0.22); }
.badge-gray { background: var(--surface2); color: var(--text3); border-color: var(--border); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 13px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover:not(:disabled) { background: var(--surface2); border-color: var(--border); color: var(--text); transform: translateY(-1px); }
.btn-whatsapp { background: #25d366; color: #fff; border: none; display: flex; align-items: center; gap: 5px; }
.btn-whatsapp:hover:not(:disabled) { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35); }
.btn-whatsapp-icon { flex: 0 0 auto; width: 36px; padding: 0; justify-content: center; }
.tx-btn-whatsapp { background: #25d366 !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; }
.btn-danger { background: rgba(244, 63, 94, 0.12); color: var(--red); border: 1px solid rgba(244, 63, 94, 0.25); }
.btn-danger:hover:not(:disabled) { background: rgba(244, 63, 94, 0.22); border-color: rgba(244, 63, 94, 0.4); transform: translateY(-1px); }
.btn-sm { padding: 4px 8px; font-size: 0.72rem; border-radius: 5px; }
.ajustes-btn-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.ajustes-btn-row > .btn { width: auto !important; flex: 1 1 90px; padding: 7px 8px !important; font-size: 0.78rem !important; white-space: nowrap; min-width: 80px; }
.btn-green { background: rgba(16, 185, 129, 0.12); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.25); }
.btn-green:hover:not(:disabled) { background: rgba(16, 185, 129, 0.22); transform: translateY(-1px); }
/* Mesma receita de .btn-danger/.btn-green (fundo translúcido + borda +
texto na cor), só que pras duas cores que a barra da Agenda usava sólidas
e sem token — Hoje (amarelo/laranja) e Aniversariantes (rosa). */
.btn-yellow { background: rgba(245, 158, 11, 0.12); color: var(--yellow); border: 1px solid rgba(245, 158, 11, 0.25); }
.btn-yellow:hover:not(:disabled) { background: rgba(245, 158, 11, 0.22); transform: translateY(-1px); }
.btn-pink { background: rgba(236, 72, 153, 0.12); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.25); }
.btn-pink:hover:not(:disabled) { background: rgba(236, 72, 153, 0.22); transform: translateY(-1px); }
.btn-whatsapp-soft { background: rgba(37, 211, 102, 0.12); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.28); }
.btn-whatsapp-soft:hover:not(:disabled) { background: rgba(37, 211, 102, 0.22); transform: translateY(-1px); }
/* Botão "Limpar filtros" da Agenda — nasce só o ✕ (com a contagem de
ocultas numa bolinha), expande ao passar o mouse revelando o texto
completo. Antes era sempre um bloco amarelo sólido com texto fixo,
brigando visualmente com o resto da barra. */
.btn-limpar-filtros {
position: relative;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
color: var(--yellow);
width: 30px;
height: 30px;
max-width: 30px;
padding: 0;
border-radius: 6px;
overflow: hidden;
white-space: nowrap;
justify-content: flex-start;
transition: max-width 0.22s ease, background 0.15s ease;
}
.btn-limpar-filtros:hover { max-width: 260px; width: auto; background: rgba(245, 158, 11, 0.2); }
.btn-limpar-filtros .lf-x { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.btn-limpar-filtros .lf-texto { opacity: 0; transition: opacity 0.15s ease 0.05s; padding-right: 10px; font-size: 0.72rem; font-weight: 700; }
.btn-limpar-filtros:hover .lf-texto { opacity: 1; }
.btn-limpar-filtros .lf-dot {
position: absolute; top: 2px; right: 2px; min-width: 13px; height: 13px; padding: 0 2px;
border-radius: 8px; background: var(--yellow); color: #111; font-size: 0.55rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn-limpar-filtros:hover .lf-dot { display: none; }
.btn-action-group { display: flex; gap: 5px; justify-content: flex-end; }
.tx-list { display: flex; flex-direction: column; gap: 0; }
.tx-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 0;
padding: 13px 18px;
border-bottom: 1px solid var(--border);
position: relative;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tx-card:last-child { border-bottom: none; }
.tx-card:hover { background: var(--surface2); }
.tx-card.tx-card-pago { background: rgba(16, 185, 129, 0.04); }
.tx-card.tx-card-pago:hover { background: rgba(16, 185, 129, 0.08); }
.tx-card-left { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 10px; }
.tx-card-right { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.tx-desc { font-weight: 600; font-size: 0.88rem; word-break: break-word; line-height: 1.35; color: var(--text); }
.tx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tx-date { font-size: 0.72rem; color: var(--text3); font-weight: 600; opacity: 1; }
.tx-cat { font-size: 0.72rem; font-weight: 600; color: var(--text2); opacity: 1;}
.tx-status-badge { font-size: 0.75rem; padding: 2px 7px; border-radius: 9999px; font-weight: 700; }
.tx-valor { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 750; white-space: nowrap; display: flex; align-items: center; color: var(--text); letter-spacing: -0.02em; }
.tx-actions { display: flex; gap: 5px; align-items: center; }
.tx-btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; font-size: 0.72rem; font-weight: 700; padding: 5px 8px; transition: all 0.15s; white-space: nowrap; gap: 3px; font-family: inherit; }
.tx-btn-baixa { background: rgba(16, 185, 129, 0.14); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.28); }
.tx-btn-baixa:hover { background: rgba(16, 185, 129, 0.26); }
.tx-btn-desfaz { background: rgba(245, 158, 11, 0.14); color: var(--yellow); border: 1px solid rgba(245, 158, 11, 0.28); }
.tx-btn-desfaz:hover { background: rgba(245, 158, 11, 0.26); }
.tx-btn-edit { background: var(--surface3); color: var(--text2); border: 1px solid var(--border); }
.tx-btn-edit:hover { background: var(--surface2); color: var(--text); }
.tx-btn-del { background: rgba(244, 63, 94, 0.12); color: var(--red); border: 1px solid rgba(244, 63, 94, 0.2); }
.tx-btn-del:hover { background: rgba(244, 63, 94, 0.25); }
.pend-card { display: grid; grid-template-columns: 1fr auto; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--border); gap: 10px; transition: background 0.15s; }
.pend-card:last-child { border-bottom: none; }
.pend-card:hover { background: var(--surface2); }
.pend-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pend-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pend-venc { font-size: 0.75rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(245, 158, 11, 0.15); color: var(--yellow); display: inline-block; }
.pend-venc.vencido { background: rgba(244, 63, 94, 0.15); color: var(--red); }
.pend-venc.hoje { background: rgba(59, 130, 246, 0.15); color: var(--accent); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.form-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; text-align: left; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
label { font-size: 0.72rem; color: var(--text3); font-weight: 600; letter-spacing: 0.01em; }
input, select, textarea {
font-family: inherit;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.82rem;
outline: none;
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
font-weight: 500;
}
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
background: var(--surface-solid);
}
.checkbox-wrapper { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; font-weight: 500;}
.checkbox-wrapper input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
/* Balão de ajuda contextual (botão "?" ao lado de rótulos de campo) —
usado no Perfil do Usuário pra explicar o impacto de cada opção sem
precisar de outra tela. */
.info-help-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.info-help-btn {
width: 16px; height: 16px; border-radius: 50%; margin-left: 5px;
background: var(--surface3); color: var(--text3); border: 1px solid var(--border);
font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.info-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.info-popover {
display: none; position: absolute; top: 22px; left: 0; z-index: 60;
width: 260px; max-width: 70vw; background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.28);
font-size: 0.74rem; line-height: 1.55; color: var(--text2); font-weight: 400;
}
.info-popover b { color: var(--text); }
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
}
/* opacity fora da animação, de propósito — visto ao vivo: com a aba sob pressão de CPU
(reCAPTCHA/App Check disputando o main thread), a animação fadeScaleIn ficava presa
rodando pra sempre no quadro inicial (opacity:0), com display:flex certo mas o modal
invisível. Animação (que anima só o transform, não a opacity) fica só de efeito
cosmético de entrada — se ela travar, o pior caso é o modal nascer 4px deslocado,
nunca invisível, porque a opacity nunca depende dela terminar. */
.modal-overlay.open { display: flex; opacity: 1; animation: modalOverlaySlideIn 0.2s ease-out forwards; }
@keyframes modalOverlaySlideIn { from { transform: translateY(4px); } to { transform: translateY(0); } }
.modal {
background: var(--surface-solid);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px 24px 0 24px;
width: 600px;
max-width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
position: relative;
display: flex;
flex-direction: column;
}
.modal-close-x {
position: absolute;
top: 14px;
right: 14px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text2);
font-size: 0.88rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
transition: all 0.2s;
}
.modal-close-x:hover { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(90deg) scale(1.05); }
.modal h2 { font-size: 1.05rem; margin-bottom: 16px; font-weight: 700; color: var(--text); text-align: left; flex-shrink: 0; letter-spacing: -0.02em; }
.modal-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: auto;
padding: 14px 0 20px 0;
border-top: 1px solid var(--border);
position: sticky;
bottom: 0;
background: var(--surface-solid);
z-index: 10;
}
.row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.amount-positive { color: var(--green); font-weight: 700; }
.amount-negative { color: var(--red); font-weight: 700; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text3); font-size: 0.88rem; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; filter: grayscale(100%); transition: opacity 0.3s; }
.empty-state:hover .icon { opacity: 0.6; }
/* Cores padronizadas para Abas e Sub-abas: Cinza Escuro Grafite */
.tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 6px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border: 1px solid transparent;
background: transparent;
color: var(--text2);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
white-space: nowrap;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-btn:hover {
color: var(--text);
background: color-mix(in srgb, var(--surface2) 60%, transparent);
}
.tab-btn.active {
/* Sem preenchimento — só o texto na cor de destaque da própria página
(--tab-accent, definido por #tabs-* mais abaixo) e o risco embaixo
(.tab-btn.active::after, mais adiante no arquivo) já bastam pra
marcar a aba ativa, sem duplicar o mesmo sinal com um fundo. */
color: var(--tab-accent);
background: transparent;
font-weight: 700;
}
.tab-btn .tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
opacity: 0.85;
transition: opacity 0.18s ease;
}
.tab-btn.active .tab-icon {
opacity: 1;
color: currentColor;
}
.tab-btn .tab-icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
display: block;
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeScaleIn 0.25s ease-out forwards; }
/* Sub-abas de Social e ESG (social.js) usam classe própria em vez de
.tab-content — nunca tiveram a regra de exibição correspondente. Sem
isto, as 4 sub-abas (Análise de Benefícios, Atendimentos & Demandas,
Saúde Mental & RSC, Legislação & Parâmetros) ficavam com display:block
sempre, empilhadas na tela ao mesmo tempo — showSubTabSocial() já
alternava a classe .active corretamente, só não existia CSS nenhum
reagindo a ela. */
.tab-social-content { display: none; }
.tab-social-content.active { display: block; animation: fadeScaleIn 0.25s ease-out forwards; }
.flex { display: flex; align-items: center; gap: 10px; }
.member-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; overflow: hidden; }
.member-card { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); align-items: flex-start; transition: background 0.15s; }
.member-card:last-child { border-bottom: none; }
.member-card:hover { background: var(--surface2); }
.member-card-avatar { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; overflow: hidden; }
.member-card-body { flex: 1; min-width: 0; }
.member-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.member-card-name { font-weight: 700; font-size: 0.95rem; }
.member-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.member-card-email { font-size: 0.72rem; color: var(--text3); }
.member-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.member-stat { background: var(--surface2); border-radius: 8px; padding: 8px 10px; text-align: center; }
.member-stat-label { display: block; font-size: 0.75rem; color: var(--text3); text-transform: uppercase; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.04em; }
.member-stat-val { display: block; font-size: 0.82rem; font-weight: 700; }
.divisao-inline { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.tx-card-pago .divisao-inline { background: rgba(34,211,161,0.14); }
.divisao-inline-title { font-size: 0.72rem; color: var(--text3); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.04em; }
.divisao-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.82rem; }
.divisao-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.split-name { flex: 1; font-weight: 600; font-size: 0.95rem; }
.divisao-name { flex: 1; font-weight: 600; }
.divisao-pct { color: var(--text3); font-size: 0.72rem; }
.divisao-val { font-weight: 700; color: var(--red); font-size: 0.82rem; }
.split-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.split-row:last-child { border-bottom: none; }
.toast-wrap { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 200000; display: flex; flex-direction: column; gap: 12px; pointer-events: none; align-items: center; }
.toast { background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); color: #f8fafc; padding: 14px 24px; border-radius: 100px; font-size: 0.95rem; font-weight:600; animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, toastFadeOut 0.4s ease calc(var(--toast-ms, 2800ms) - 400ms) forwards; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 90vw; text-align: center; }
.toast .icon { font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.toast.toast-fica { pointer-events: auto; border-radius: 18px; text-align: left; }
.toast .toast-x { background: transparent; border: 0; color: #cbd5e1; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 4px; }
.toast .toast-x:hover { color: #fff; }
/* ── UX: foco visível, aviso de versão e paleta de busca (ux.js) ── */
button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible, .nav-btn:focus-visible, .tab-btn:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.modal:focus, .modal[tabindex="-1"]:focus { outline: none; }
#ux-update { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 200001; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); background: var(--surface2); color: var(--text); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 14px; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.ux-pal-overlay { position: fixed; inset: 0; z-index: 200002; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 12px 12px; }
.ux-pal { width: 100%; max-width: 560px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); overflow: hidden; }
.ux-pal input { width: 100%; height: auto; padding: 14px 16px; font-size: 1rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); outline: none; }
.ux-pal ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.ux-pal-grupo { font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); padding: 8px 10px 4px; }
.ux-pal-op { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 0.9rem; }
.ux-pal-op.sel, .ux-pal-op:hover { background: var(--surface3); }
.ux-pal-fav { background: none; border: 0; cursor: pointer; font-size: 1.05rem; color: var(--yellow); padding: 0 4px; }
.ux-pal-vazio { padding: 16px; color: var(--text3); font-size: 0.85rem; }
.ux-pal-dica { padding: 8px 14px; font-size: 0.7rem; color: var(--text3); border-top: 1px solid var(--border); }
@keyframes toastSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastFadeOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }
.is-closed .hide-if-closed { opacity: 0.3; pointer-events: none; filter: grayscale(100%); }
.is-closed #page-familia .hide-if-closed,
.is-closed #page-categorias .hide-if-closed,
.is-closed #tab-fixas .hide-if-closed { opacity: 1 !important; pointer-events: auto !important; filter: none !important; }
.tut-step { display: none; text-align: center; padding: 10px 0; }
.tut-step h2 { font-size: 1.35rem; color: var(--accent); margin-bottom: 16px; }
.tut-step p { font-size: 0.95rem; color: var(--text2); line-height: 1.5; margin-bottom: 10px; }
/* Regras estritas de ocultação para Cuide quando desativado ou Plano Pessoal */
.nav-btn-cuide[style*="display: none"],
.nav-btn-cuide[style*="display:none"],
#cuide-nav-divider[style*="display: none"],
#cuide-nav-divider[style*="display:none"] {
display: none !important;
}
/* Botões nativos ocultados via JS (ex.: Cartões no plano Empresa, Projetos
quando o módulo está desligado) não podem reaparecer por causa do
"display:flex !important" do layout do menu no celular — o atributo
style permanece a fonte da verdade mesmo dentro do media query mobile. */
body #app-wrapper .nav-btn[style*="display: none"],
body #app-wrapper .nav-btn[style*="display:none"] {
display: none !important;
}
/* Prevenção global contra quebra de valores nos KPI cards e Pendências */
.kpi-value, .amount-positive, .amount-negative {
white-space: nowrap !important;
word-break: keep-all !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-variant-numeric: tabular-nums !important;
}
#kpi-a-receber, #kpi-vencidos {
white-space: nowrap !important;
word-break: keep-all !important;
font-size: clamp(0.82rem, 3.2vw, 1.1rem) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.kpi-card div { min-width: 0; }
/* ===================================================================
CAMADA "NOTEBOOK" — cobre a faixa entre desktop grande e o layout
mobile de baixo (768px): telas de 1024–1440px, o intervalo mais comum
de notebook, que antes não tinha NENHUM ajuste — a sidebar continuava
fixa em 240px e o padding das páginas era o mesmo de uma tela de
27". Aqui só se reduz densidade (largura da sidebar, respiro das
páginas); nenhum componente muda de layout — isso só acontece a
partir de 768px.
=================================================================== */
@media (max-width: 1440px) and (min-width: 769px) {
.sidebar { width: 208px; min-width: 208px; }
.main { margin-left: 208px; }
.page { padding: 16px 18px; }
.topbar { padding: 10px 18px; }
}
/* Modal "Nova Análise de Benefícios" (módulo Social): grid de 2 colunas
fixo demais pro seu próprio max-width de 960px — sem isso ele nunca
colapsa, nem em celular. !important porque o grid nasce como estilo
inline no HTML gerado pelo JS. */
@media (max-width: 900px) {
.analise-beneficio-grid { grid-template-columns: 1fr !important; }
.analise-beneficio-diagnostico {
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid var(--border) !important;
padding-top: 16px !important;
margin-top: 4px !important;
}
}
@media (max-width: 768px) {
html { font-size: 14px; }
/* Rede de segurança: várias telas (modais de formulário, cards do
módulo Social, KPIs em grade) montam grids de 2+ colunas como estilo
inline (`style="display:grid;grid-template-columns:..."`) direto no
HTML gerado em JS — nenhuma delas colapsa sozinha em celular, porque
media query não alcança estilo inline. Em vez de caçar e corrigir
cada uma manualmente (o que já rendeu pelo menos um bug real, ver
.analise-beneficio-grid acima), essa regra pega TODAS de uma vez.
As duas exceções são propositais: o quadro Kanban de Processos
(rolagem horizontal, não empilhar colunas) e o Painel TV de Senhas
(tela grande de recepção, nunca vista em celular). */
[style*="grid-template-columns"]:not(#kanban-processos-base *):not(#modal-painel-tv-senhas *) {
grid-template-columns: 1fr !important;
}
#app-wrapper .sidebar { width: 100% !important; min-width: 100% !important; height: 58px !important; min-height: 58px !important; position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; border-right: none !important; border-top: 1px solid var(--border) !important; flex-direction: row !important; z-index: 10000 !important; padding: 0 !important; padding-bottom: max(env(safe-area-inset-bottom), 2px) !important; background: var(--surface) !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.15) !important; }
#app-wrapper .logo { display: none !important; }
/* Recolher-a-ícones é recurso só de desktop (sidebar vertical); no mobile a
barra já é horizontal/compacta por padrão, então o botão fica escondido
e a barra volta a se comportar como antes desse recurso existir. */
.sidebar-toggle { display: none !important; }
#app-wrapper.sidebar-collapsed .main { margin-left: 0 !important; }
#app-wrapper nav { display: flex !important; flex-direction: row !important; padding: 0 4px !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 0 !important; }
#app-wrapper nav::-webkit-scrollbar { display: none !important; }
/* Botões MiContas Padrão: Início/Finanças/Usuário/Ajustes são fixos (4);
Cartões (Pessoal) e Projetos (Empresa) são mutuamente exclusivos e
condicionais — cada um, quando visível, soma +1 ao divisor da largura.
O :has() precisa checar as duas grafias do atributo style ("display:none"
sem espaço vem direto do HTML estático; "display: none;" com espaço é
o que o navegador grava quando o JS seta style.display via CSSOM) —
senão o botão é tratado como "visível" mesmo escondido e o divisor erra,
sobrando espaço na barra e deixando os ícones do Cuide vazarem pra
dentro da primeira dobra. Sem um max-width travando isso, cada botão
herda width:100% do .nav-btn de desktop e ocupa a barra inteira sozinho
— foi exatamente esse bug que fez sumir tudo menos o Início.
*/
#app-wrapper .nav-btn:not(.nav-btn-cuide) { display: flex !important; flex: 0 0 calc((100vw - 8px) / 4) !important; max-width: calc((100vw - 8px) / 4) !important; height: 50px !important; flex-direction: column !important; gap: 1px !important; margin: 0 !important; padding: 4px 1px !important; justify-content: center !important; align-items: center !important; text-align: center !important; border-radius: 8px !important; border-bottom: none !important; background: transparent !important; flex-shrink: 0 !important; scroll-snap-align: start !important; transition: background 0.15s ease, color 0.15s ease !important; }
#app-wrapper nav:has(#nav-btn-cartao:not([style*="display:none"]):not([style*="display: none"])) .nav-btn:not(.nav-btn-cuide),
#app-wrapper nav:has(#nav-btn-projetos:not([style*="display:none"]):not([style*="display: none"])) .nav-btn:not(.nav-btn-cuide) {
flex: 0 0 calc((100vw - 8px) / 5) !important; max-width: calc((100vw - 8px) / 5) !important;
}
#app-wrapper .nav-btn .icon { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 7px !important; line-height: 1 !important; margin: 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#app-wrapper .nav-btn .icon svg { width: 15px !important; height: 15px !important; }
#app-wrapper .nav-btn .nav-label { display: block !important; font-size: 0.58rem !important; font-weight: 600 !important; line-height: 1.1 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-top: 2px !important; letter-spacing: -0.03em !important; }
#app-wrapper .nav-btn.active { background: color-mix(in srgb, var(--btn-c, var(--accent)) 14%, transparent) !important; color: var(--btn-c, var(--accent)) !important; font-weight: 700 !important; border-color: transparent !important; box-shadow: none !important; }
#app-wrapper .nav-btn.active::before { display: none !important; }
#app-wrapper .nav-btn.active .icon { background: var(--btn-c, var(--accent)) !important; color: #fff !important; }
/* Divisória do Cuide: linha vertical elegante em gradiente */
#app-wrapper .cuide-nav-divider { width: 2px !important; min-width: 2px !important; height: 30px !important; margin: 0 8px !important; background: linear-gradient(180deg, transparent, var(--accent), transparent) !important; border: none !important; opacity: 0.7 !important; flex-shrink: 0 !important; scroll-snap-align: start !important; }
/* Módulos do CUIDE: Ficam 100% ocultos à direita na primeira dobra e só aparecem ao deslizar/arrastar */
#app-wrapper .nav-btn-cuide:not(.cuide-nav-divider) { display: flex !important; flex: 0 0 60px !important; min-width: 60px !important; height: 48px !important; flex-direction: column !important; gap: 1px !important; margin: 0 2px !important; padding: 4px 2px !important; justify-content: center !important; align-items: center !important; text-align: center !important; border-radius: 10px !important; background: rgba(124, 106, 247, 0.08) !important; border: 1px solid rgba(124, 106, 247, 0.18) !important; flex-shrink: 0 !important; scroll-snap-align: start !important; }
#app-wrapper .nav-btn-cuide:not(.cuide-nav-divider) .nav-label { color: var(--accent) !important; font-weight: 600 !important; }
#app-wrapper .nav-btn-cuide.active { background: var(--btn-c, var(--accent)) !important; color: #fff !important; }
#app-wrapper .nav-btn-cuide.active .nav-label { color: #fff !important; }
/* Menu de Exportação responsivo no celular (Bottom Sheet) */
.export-dropdown-menu {
position: fixed !important;
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
max-height: 80vh !important;
overflow-y: auto !important;
border-radius: 20px 20px 0 0 !important;
border: 1px solid var(--border) !important;
border-bottom: none !important;
box-shadow: 0 -10px 35px rgba(0,0,0,0.4) !important;
z-index: 100000 !important;
padding: 16px 16px max(env(safe-area-inset-bottom), 16px) 16px !important;
background: var(--surface) !important;
animation: slideUp 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
}
/* Barra de controles do Dashboard/Movimentações compacta e fluida no celular */
.control-bar {
padding: 6px 10px !important;
margin-bottom: 12px !important;
border-radius: 14px !important;
gap: 6px !important;
background: var(--surface2) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.control-bar .cb-btn, .control-bar .cb-export {
padding: 6px 10px !important;
font-size: 0.78rem !important;
height: 36px !important;
flex-shrink: 0 !important;
}
/* Cards de lista (Chamados, Transações, Faturamento, Agendamento etc.): empilha em vez de manter a coluna de ações grudada e espremida ao lado do conteúdo */
.tx-card { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.tx-card-left { padding-right: 0 !important; width: 100% !important; }
.tx-card-right { width: 100% !important; }
.tx-card-right > div { width: 100% !important; justify-content: flex-start !important; }
.tx-card-right .btn { flex: 1 1 auto !important; min-width: fit-content !important; }
/* Barra de filtros (Chamados e demais páginas com .filters-wrap): busca ocupa a linha inteira no celular */
.filters-wrap input[type="text"] { max-width: 100% !important; flex: 1 1 100% !important; }
.filters-wrap .filter-sel { flex: 1 1 auto !important; }
}
@media (max-width: 480px) {
/* Em celulares estreitos, exibe os botões de controle de forma ultra-compacta (ícones prioritários) */
.control-bar .cb-text { display: none !important; }
.control-bar .cb-text-badge { display: none !important; }
.control-bar .cb-btn, .control-bar .cb-export {
padding: 6px 10px !important;
font-size: 0.95rem !important;
border-radius: 20px !important;
min-width: 38px !important;
justify-content: center !important;
}
.control-bar > div:first-child {
width: 100% !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 4px !important;
}
.control-bar > div:first-child::-webkit-scrollbar { display: none !important; }
.control-bar .cb-btn,
.control-bar .btn-executivo,
.control-bar .cb-export {
padding: 6px 14px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
height: 36px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
border-radius: 20px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
transition: transform 0.15s ease, background 0.15s ease !important;
}
.control-bar .cb-btn:active,
.control-bar .btn-executivo:active,
.control-bar .cb-export:active {
transform: scale(0.96) !important;
}
.control-bar .export-dropdown-wrap { margin-left: 0 !important; }
#app-wrapper .main { margin-left: 0; padding-bottom: 75px; min-width: 100vw; }
.topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
.topbar-right { justify-content: space-between; }
.page { padding: 16px; }
.kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.charts-row { grid-template-columns: 1fr; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row > .btn { width: 100%; padding: 12px; font-size: 0.95rem; }
.filter-sel { width: 100%; flex: 1 1 auto; }
.row > .btn:nth-child(3):last-child { grid-column: span 2; }
.card-body { overflow-x: auto; }
table { min-width: 0; }
.modal-overlay { align-items: flex-end; padding: 0; }
.modal { margin: 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 20px 16px 0 16px; border-bottom: none; border-left: none; border-right: none; animation: slideUp 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); }
.modal::before { content: ''; display: block; width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 12px auto; flex-shrink: 0;}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal h2 { font-size: 1.2rem; margin-bottom: 16px; text-align: left; }
.form-grid-2 { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.form-group { gap: 2px; }
label { font-size: 0.72rem; }
input, select, textarea { padding: 8px 10px; font-size: 0.82rem; height: 40px; }
.checkbox-wrapper { padding: 2px 0; }
.modal-footer { flex-direction: row; gap: 10px; margin-top: auto; padding-top: 12px; padding-bottom: 20px;}
.modal-footer .btn { flex: 1; padding: 12px 6px; font-size: 0.88rem; height: 44px; }
.modal-footer .btn-whatsapp-icon { flex: 0 0 44px; height: 44px; }
.tab-btn { flex-direction: column; gap: 3px; padding: 10px 14px; font-size: 0.72rem; }
.tab-icon { font-size: 1.2rem; }
.tx-card { padding: 12px 14px; }
.tx-valor { font-size: 0.95rem; }
.tx-btn { padding: 5px 8px; font-size: 0.72rem; }
.kpi-value { font-size: 1.35rem; white-space: nowrap !important; }
}
/* FAB Speed-Dial */
#fab-wrapper { display: flex !important; position: fixed !important; bottom: 74px !important; right: 18px !important; left: auto !important; z-index: 10005 !important; flex-direction: column-reverse !important; align-items: flex-end !important; gap: 10px !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; }
#fab-wrapper.hide-if-closed-wrapper { opacity: 0.4; }
#fab-wrapper.hide-if-closed-wrapper .fab-main, #fab-wrapper.hide-if-closed-wrapper .fab-item { pointer-events: none !important; cursor: not-allowed !important; }
.fab-main { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--accent) !important; color: #fff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: all !important; box-shadow: 0 4px 18px rgba(124,106,247,0.6) !important; transition: transform 0.2s, background 0.2s, box-shadow 0.2s !important; position: relative !important; z-index: 10010 !important; }
.fab-main:hover { background: #6a58e8 !important; transform: scale(1.08) !important; box-shadow: 0 6px 24px rgba(124,106,247,0.75) !important; }
.fab-main:active { transform: scale(0.95) !important; }
.fab-dial { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-end !important; overflow: hidden !important; max-height: 0 !important; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease !important; opacity: 0 !important; pointer-events: none !important; padding-bottom: 4px !important; padding-left: 16px !important; }
.fab-dial.open { max-height: 400px !important; opacity: 1 !important; pointer-events: all !important; }
.fab-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: none; border-radius: 30px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; white-space: nowrap; pointer-events: all; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transform: translateX(30px) scale(0.9); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease, background 0.15s; min-width: 160px; justify-content: flex-start; }
.fab-dial.open .fab-item { transform: translateX(0) scale(1); opacity: 1; }
.fab-dial.open .fab-item:nth-child(1){ transition-delay: 0.12s; }
.fab-dial.open .fab-item:nth-child(2){transition-delay: 0.07s; }
.fab-dial.open .fab-item:nth-child(3){transition-delay: 0.02s; }
.fab-item.fab-item-sugerido { box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 2px var(--accent); }
.fab-dial.open .fab-item.fab-item-sugerido { transform: translateX(0) scale(1); }
.fab-despesa { background: var(--red); color: #fff; }
.fab-despesa:hover { background: #d93547; transform: translateX(-4px) scale(1) !important; }
.fab-receita { background: var(--green); color: #1a1a2a; }
.fab-receita:hover { background: #18b889; transform: translateX(-4px) scale(1) !important; }
.fab-cc { background: var(--surface3); color: var(--text); border: 1px solid var(--border); }
.fab-cc:hover { background: var(--surface2); transform: translateX(-4px) scale(1) !important; }
.fab-obrigacao, .fab-contrato { background: #fff; color: #1a1a2a; border: 1px solid var(--border); }
.fab-obrigacao:hover, .fab-contrato:hover { background: #f0f0f5; transform: translateX(-4px) scale(1) !important; }
.fab-projeto, .fab-fixa { background: var(--yellow); color: #1a1a2a; }
.fab-projeto:hover, .fab-fixa:hover { background: #e0b32e; transform: translateX(-4px) scale(1) !important; }
.fab-processo, .fab-conta-bancaria { background: var(--blue); color: #fff; }
.fab-processo:hover, .fab-conta-bancaria:hover { background: #3a8fdb; transform: translateX(-4px) scale(1) !important; }
.fab-indicador, .fab-patrimonio, .fab-registrar-dado { background: var(--accent); color: #fff; }
.fab-indicador:hover, .fab-patrimonio:hover, .fab-registrar-dado:hover { background: #6a58e0; transform: translateX(-4px) scale(1) !important; }
.fab-usuario { background: var(--blue); color: #fff; }
.fab-usuario:hover { background: #3a8fdb; transform: translateX(-4px) scale(1) !important; }
.fab-investimento { background: #1fb6c9; color: #fff; }
.fab-investimento:hover { background: #189aab; transform: translateX(-4px) scale(1) !important; }
.fab-emprestimo { background: #e08e45; color: #fff; }
.fab-emprestimo:hover { background: #c97733; transform: translateX(-4px) scale(1) !important; }
.fab-icon { font-size: 1.05rem; flex-shrink: 0; }
.fab-backdrop { display: none; position: fixed; inset: 0; z-index: 990; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
.fab-backdrop.open { display: block; }
@media (min-width: 769px) { #fab-wrapper { bottom: 28px !important; right: 28px !important; } }
/* === CSS Premium === */
/* Modal overlay blur + animação de entrada */
.modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal {
border-radius: 20px !important;
padding-bottom: 24px !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.4);
animation: modalPop 0.28s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes modalPop {
0% { transform: scale(0.96) translateY(8px); opacity: 0; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
/* === CRM 2.0: Kanban & Anti-Churn === */
.pv-kanban-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
align-items: start;
overflow-x: auto;
padding-bottom: 12px;
}
@media (min-width: 1300px) {
.pv-kanban-board {
grid-template-columns: repeat(5, 1fr);
}
}
.pv-kanban-col {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 280px);
min-height: 420px;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pv-kanban-col.drag-over {
background: rgba(124, 106, 247, 0.08) !important;
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px var(--accent) !important;
}
.pv-kanban-col-header {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 0.82rem;
border-radius: 10px 10px 0 0;
}
.pv-kanban-col-body {
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
flex: 1;
}
.pv-kanban-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
cursor: grab;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
user-select: none;
}
.pv-kanban-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.pv-kanban-card:active {
cursor: grabbing;
}
.pv-kanban-card.dragging {
opacity: 0.4;
}
/* Focus ring nos inputs */
input:focus, select:focus, textarea:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.25) !important;
outline: none;
}
/* FAB abaixo dos modais, acima do backdrop */
#fab-wrapper { z-index: 995 !important; }
/* Ghost buttons */
.btn-outline.btn-sm {
background: var(--surface2) !important;
border: none !important;
font-weight: 500;
color: var(--text2) !important;
transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline.btn-sm:hover { background: var(--surface3) !important; color: var(--text) !important; }
/* Botão 📌 "fixar filtros" no estado ativo.
Precisa ser CLASSE, não style inline: a regra .btn-outline.btn-sm acima usa
!important em background/border/color, então qualquer cor inline no botão
era descartada — o estado "fixado" nunca ficou visualmente distinto em
nenhum tema. Era por isso que existia um filter:hue-rotate() sobre o emoji
(filter não é sobrescrito pelo !important), contorno que saiu junto com
esta regra. A cor vem do token --red, então acompanha os 6 temas. */
/* Sem transition: o botão 📌 é reconstruído do zero (innerHTML) toda vez
que a página em que ele vive re-renderiza — inclusive por ações que não
têm nada a ver com fixar/desafixar (ex: o botão "Hoje" da Agenda, do
lado dele na mesma barra). .btn herda transition:all 0.2s; qualquer
recálculo de estado (hover, foco) nesse instante anima visivelmente e
parece um "piscar" no pin sem o usuário ter clicado nele. Cor de estado
fixado precisa trocar instantânea, nunca animada. */
.btn-pin.active {
background: color-mix(in srgb, var(--red) 12%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--red) 45%, transparent) !important;
color: var(--red) !important;
font-weight: 800;
transition: none !important;
}
.btn-pin.active:hover {
background: color-mix(in srgb, var(--red) 20%, transparent) !important;
color: var(--red) !important;
}
/* KPI cards hover */
.kpi-card {
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card:hover {
transform: translateY(-3px);
border-color: var(--kpi-color, var(--accent));
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* Tabela: thead sticky e hover nas linhas */
thead th {
position: sticky; top: 0;
background: var(--surface2);
backdrop-filter: blur(4px);
z-index: 10;
}
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--surface2); }
/* Mobile sidebar */
.indicador-accordion { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.indicador-accordion-header { padding: 16px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: var(--surface2); transition: background 0.2s; list-style: none; }
.indicador-accordion-header::-webkit-details-marker { display: none; }
.indicador-accordion-header:hover { background: var(--surface3); }
.indicador-accordion[open] .indicador-accordion-header { border-bottom: 1px solid var(--border); }
.indicador-accordion-content { padding: 16px; }
@media (max-width: 768px) {
#app-wrapper .sidebar {
background: var(--surface) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top: 1px solid var(--border) !important;
padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
z-index: 1000 !important;
}
.main { padding-bottom: 90px !important; }
#cuide-selo-versao {
font-size: 0.58rem !important;
padding: 1px 4px !important;
opacity: 0.6 !important;
font-weight: normal !important;
}
}
#cuide-selo-versao {
font-size: 0.78rem !important;
padding: 3px 8px !important;
border-radius: 4px !important;
opacity: 0.85 !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
}
/* ===================================================================
CAMADA DE ÍCONES (icons.js) — a pegada do novo design em todas as
páginas. O substitui um emoji e herda o tamanho
da fonte do contexto, então funciona igual dentro de botão, badge,
título de card, célula de tabela ou estado vazio.
=================================================================== */
.ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.12em;
height: 1.12em;
flex: 0 0 auto;
vertical-align: -0.19em;
line-height: 0;
}
.ico svg {
width: 100%;
height: 100%;
display: block;
stroke-width: 2;
overflow: visible;
}
/* Ícone isolado (sem texto ao lado) ganha um respiro proporcional. */
.btn .ico, .tx-btn .ico, .badge .ico, .tab-btn .ico { margin-right: 0; }
/* Em superfícies preenchidas o ícone acompanha a cor do texto, senão
um check verde sobre botão azul brigaria com o fundo. */
.btn-primary .ico,
.btn-whatsapp .ico,
.tx-btn-whatsapp .ico,
.cb-btn.btn-executivo .ico,
.view-toggle-btn.active .ico,
.badge .ico,
.tx-status-badge .ico,
.sidebar-user-role-badge .ico,
.kpi-label-icon .ico,
.nav-btn .ico,
thead th .ico { color: currentColor !important; }
/* Traço um pouco mais fino em tamanhos grandes (estado vazio, hero). */
.empty-state .icon .ico { width: 1em; height: 1em; }
.empty-state .icon .ico svg { stroke-width: 1.4; }
.empty-state .icon { filter: none; opacity: 0.35; }
.kpi-label-icon .ico svg { stroke-width: 2.1; }
/* Alertas e toasts: o ícone fica em bloco tingido, como no login. */
.modal .ico { vertical-align: -0.2em; }
/* ── Identidade cromática por página nas abas ─────────────────────
As abas continuam em cinza grafite (decisão do redesign); o que
muda por página é só o ícone da aba ativa e o fio de destaque
embaixo dela. Dá orientação sem poluir a tipografia. */
/* A cor das abas é a do item da página no menu lateral (--btn-c em #nav-btn-*, mais acima). */
.tabs { --tab-accent: var(--page-accent, var(--accent)); }
/* Cor de cada página (a do item dela no menu lateral): vale para as abas, as sub-abas e o ícone da aba ativa */
#page-dashboard { --page-accent: #2563eb; }
#page-movimentacoes, #page-cartao { --page-accent: #059669; }
#page-obrigacoes, #page-cuide-gestao, #page-cuide-riscos { --page-accent: #d97706; }
#page-familia { --page-accent: #0891b2; }
#page-cuide-agenda { --page-accent: #2563eb; }
#page-cuide-agendamento { --page-accent: #0d9488; }
#page-cuide-faturamento { --page-accent: #d97706; }
#page-cuide-chamados { --page-accent: #4f46e5; }
#page-cuide-materiais { --page-accent: #0284c7; }
#page-cuide-posvisita { --page-accent: #9333ea; }
#page-cuide-senhas { --page-accent: #e11d48; }
#tabs-dashboard { --tab-accent: #2563eb; }
#tabs-movimentacoes, #tabs-contas { --tab-accent: #059669; }
#tabs-obrigacoes { --tab-accent: #d97706; }
#page-familia .tabs, #tabs-familia, #tabs-sistema, #tabs-admin, #tabs-categorias { --tab-accent: #0891b2; }
#tabs-social { --tab-accent: #d97706; } /* Social e ESG mora dentro de Projetos: mesma cor da página */
#page-cuide-agenda .tabs, #tabs-agenda { --tab-accent: #2563eb; }
#page-cuide-agendamento .tabs, #tabs-agendamento { --tab-accent: #0d9488; }
#page-cuide-faturamento .tabs, #tabs-faturamento { --tab-accent: #d97706; }
#page-cuide-chamados .tabs, #tabs-chamados { --tab-accent: #4f46e5; }
#page-cuide-materiais .tabs, #tabs-materiais { --tab-accent: #0284c7; }
/* Gestão de Pessoas e Risco não são página própria — vivem dentro de
Projetos (#tabs-obrigacoes) — por isso herdam o laranja de Projetos
em vez de ter cor própria, seguindo a mesma regra "1 cor por página"
documentada acima. */
#page-cuide-gestao .tabs, #tabs-gestao,
#page-cuide-riscos .tabs, #tabs-riscos { --tab-accent: #d97706; }
#page-cuide-posvisita .tabs, #tabs-posvisita { --tab-accent: #9333ea; }
#page-cuide-senhas .tabs, #tabs-senhas { --tab-accent: #e11d48; }
.tab-btn.active { position: relative; }
.tab-btn.active .tab-icon,
.tab-btn.active .tab-icon svg,
.tab-btn.active > .ico { color: var(--tab-accent); }
.tab-btn.active::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: -5px; /* dentro do padding de .tabs — fora dele o overflow-x recorta */
height: 2px;
border-radius: 2px;
background: var(--tab-accent);
opacity: 0.85;
}
/* Botão de fixar período de relatório / widget (📌) */
.btn-pin {
padding: 0;
width: 28px;
height: 28px;
min-width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s ease;
opacity: 0.75;
cursor: pointer;
}
.btn-pin:hover { opacity: 1; border-color: var(--accent); }
.btn-pin.active {
background: rgba(124, 106, 247, 0.16) !important;
border-color: var(--accent) !important;
color: var(--accent) !important;
opacity: 1 !important;
box-shadow: 0 0 8px rgba(124, 106, 247, 0.25);
}
.btn-pin span { line-height: 1; }
/* ═══════════════════════════════════════════════════════════════════
CHAT INTERNO & MENSAGENS DA EQUIPE
═══════════════════════════════════════════════════════════════════ */
.chat-canal-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
color: var(--text2);
}
.chat-canal-item:hover {
background: rgba(37, 99, 235, 0.08);
color: var(--text);
}
.chat-canal-item.active {
background: rgba(37, 99, 235, 0.14);
color: var(--accent);
font-weight: 700;
}
/* ── Chat no formato Teams ─────────────────────────────────────────── */
.chat-modal { max-width: 1080px; width: 100%; height: 86vh; max-height: 760px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.chat-shell { display: flex; flex: 1; min-height: 0; position: relative; background: var(--surface); }
.chat-rail { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface2); display: flex; flex-direction: column; min-height: 0; }
.chat-rail-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.chat-rail-top h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.chat-fechar-mobile { display: none; margin: 0; }
.chat-rail-busca { padding: 6px 12px 8px; }
.chat-rail-busca input { width: 100%; border-radius: 8px; padding: 7px 12px; font-size: .82rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.chat-rail-scroll { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.chat-sec { padding: 12px 10px 4px; font-size: .68rem; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.chat-vazio-lista { padding: 8px 10px; font-size: .78rem; color: var(--text3); line-height: 1.5; }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; }
.chat-item:hover { background: rgba(37, 99, 235, .08); }
.chat-item.active { background: rgba(37, 99, 235, .14); border-left-color: var(--accent); }
.chat-item-txt { flex: 1; min-width: 0; }
.chat-item-l1, .chat-item-l2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-item-nome { font-size: .86rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-hora { font-size: .68rem; color: var(--text3); flex-shrink: 0; }
.chat-item-previa { font-size: .76rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.unread .chat-item-nome, .chat-item.unread .chat-item-previa { font-weight: 800; color: var(--text); }
.chat-item-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.chat-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.chat-av img { width: 100%; height: 100%; object-fit: cover; }
.chat-av-canal { background: var(--surface); border: 1px solid var(--border); font-size: 1rem; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-head-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; overflow: hidden; }
.chat-head-ico.chat-av { background: var(--accent); color: #fff; border: 0; font-size: .8rem; }
.chat-head-txt { flex: 1; min-width: 0; }
.chat-head-txt h3 { margin: 0; font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-txt div { font-size: .72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head input[type=search] { width: 200px; max-width: 34%; border-radius: 8px; padding: 6px 10px; font-size: .8rem; border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.chat-head-btn { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: 6px 8px; border-radius: 8px; color: var(--text); }
.chat-head-btn:hover { background: var(--surface2); }
.chat-head .modal-close { margin: 0; }
/* ═══════════════════════════════════════════════════════════════════
MANUAL DO SISTEMA (manual.js)
═══════════════════════════════════════════════════════════════════ */
.man-modal { max-width: 1180px; width: 100%; height: 90vh; max-height: 860px; padding: 0; overflow: hidden; display: flex; text-align: left; }
.man-nav { width: 290px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface2); display: flex; flex-direction: column; min-height: 0; }
.man-nav-topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.man-nav-topo h3 { margin: 0; font-size: 1.05rem; }
.man-fechar { background: none; border: 1px solid var(--border); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; }
.man-fechar-dir { margin-left: 4px; }
.man-busca { margin: 6px 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; }
.man-perfis { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 12px 8px; }
.man-perfis button { border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 12px; padding: 3px 9px; font-size: .7rem; cursor: pointer; }
.man-perfis button.ativo { background: var(--accent); border-color: var(--accent); color: #fff; }
.man-nav-lista { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.man-nav-i { display: flex; gap: 9px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--text2); font-size: .8rem; }
.man-nav-i b { font-weight: 600; }
.man-nav-i:hover { background: rgba(37, 99, 235, .08); }
.man-nav-i.ativo { background: rgba(37, 99, 235, .14); border-left-color: var(--accent); color: var(--text); }
.man-nav-pe { padding: 10px 12px; border-top: 1px solid var(--border); }
.man-vazio { padding: 14px; font-size: .8rem; color: var(--text3); }
.man-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.man-main-topo { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--border); font-size: .74rem; color: var(--text3); }
.man-main-topo span { flex: 1; }
.man-voltar { display: none; background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; font-size: .85rem; }
.man-conteudo { flex: 1; overflow-y: auto; padding: 20px 28px 28px; font-size: .9rem; color: var(--text2); line-height: 1.65; }
.man-conteudo h2 { margin: 0 0 4px; font-size: 1.5rem; color: var(--text); }
.man-h { margin: 22px 0 6px; font-size: 1.02rem; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.man-cap-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.man-cap-ic { font-size: 2.4rem; }
.man-cap-n { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); }
.man-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.man-tag { font-size: .66rem; background: rgba(37, 99, 235, .12); color: var(--accent); border-radius: 10px; padding: 1px 8px; font-weight: 700; }
.man-resumo { font-size: 1rem; color: var(--text); margin: 8px 0 14px; }
.man-conteudo mark { background: #fde047; color: #111; border-radius: 3px; padding: 0 2px; }
.man-box { border-left: 4px solid var(--accent); background: rgba(37, 99, 235, .07); padding: 9px 13px; margin: 12px 0; border-radius: 0 8px 8px 0; }
.man-box > b:first-child { display: block; font-size: .78rem; color: var(--text); margin-bottom: 2px; }
.man-dica { border-color: #10b981; background: rgba(16, 185, 129, .09); }
.man-atencao { border-color: #f59e0b; background: rgba(245, 158, 11, .1); }
.man-perm { border-color: #8b5cf6; background: rgba(139, 92, 246, .09); }
.man-exemplo { border-color: #0ea5e9; background: rgba(14, 165, 233, .09); }
.man-passos { counter-reset: p; list-style: none; padding: 0; margin: 10px 0; }
.man-passos li { counter-increment: p; position: relative; padding: 5px 0 5px 38px; }
.man-passos li::before { content: counter(p); position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .78rem; display: flex; align-items: center; justify-content: center; }
.man-ul { margin: 8px 0 8px 20px; padding: 0; }
.man-ul li { margin: 3px 0; }
.man-onde { border: 1px dashed var(--border); border-radius: 8px; padding: 7px 11px; margin: 10px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; }
.man-onde span { font-weight: 700; color: var(--text); margin-right: 4px; }
.man-onde em { font-style: normal; background: var(--surface2); border-radius: 6px; padding: 2px 8px; }
.man-onde button { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 3px 10px; font-size: .74rem; font-weight: 700; cursor: pointer; }
.man-tab-wrap { overflow-x: auto; margin: 10px 0; }
.man-tab { border-collapse: collapse; width: 100%; font-size: .82rem; }
.man-tab th { background: var(--surface2); text-align: left; color: var(--text); }
.man-tab th, .man-tab td { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; }
.man-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.man-card { border: 1px solid var(--border); border-radius: 10px; padding: 11px; background: var(--surface2); display: flex; flex-direction: column; gap: 3px; font-size: .8rem; }
.man-card b { color: var(--text); }
.man-card-ic { font-size: 1.5rem; }
.man-fig { margin: 16px 0; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface2); }
.man-fig figcaption { font-weight: 800; font-size: .8rem; color: var(--text); margin-bottom: 8px; }
.man-svg-wrap { overflow-x: auto; }
.man-svg { width: 100%; min-width: 760px; height: auto; display: block; }
.man-raia { fill: var(--surface); } .man-raia2 { fill: var(--surface2); }
.man-raia-t { font-size: 10.5px; font-weight: 700; fill: var(--text2); }
.man-ar { fill: none; stroke: var(--text3); stroke-width: 1.6; } .man-seta-p { fill: var(--text3); }
.man-ar-t { font-size: 9.5px; fill: var(--text2); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.man-n rect, .man-n polygon { fill: var(--surface); stroke: var(--text3); stroke-width: 1.4; }
.man-n text { font-size: 10.5px; fill: var(--text); }
.man-n-inicio rect { fill: rgba(37, 99, 235, .2); stroke: var(--accent); }
.man-n-fim rect { fill: rgba(16, 185, 129, .22); stroke: #10b981; }
.man-n-decisao polygon { fill: rgba(245, 158, 11, .22); stroke: #f59e0b; }
.man-n-alerta rect { fill: rgba(239, 68, 68, .2); stroke: #ef4444; }
.man-n-doc rect { stroke-dasharray: 4 3; }
.man-fluxo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.man-fl-no { border: 1.5px solid var(--border); border-radius: 10px; padding: 7px 11px; font-size: .8rem; display: flex; gap: 8px; align-items: center; max-width: 220px; background: var(--surface2); color: var(--text); }
.man-fl-no i { font-style: normal; background: var(--accent); color: #fff; border-radius: 50%; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; }
.man-fl-seta { color: var(--accent); font-weight: 800; }
.man-decisao { background: rgba(245, 158, 11, .16); border-color: #f59e0b; } .man-fim { background: rgba(16, 185, 129, .16); border-color: #10b981; }
.man-alerta { background: rgba(239, 68, 68, .14); border-color: #ef4444; } .man-inicio { background: rgba(37, 99, 235, .14); border-color: var(--accent); }
.man-arvore ul { list-style: none; margin: 0; padding-left: 20px; border-left: 1.5px solid var(--border); }
.man-arvore > ul { border: 0; padding: 0; }
.man-arvore li { margin: 4px 0; position: relative; font-size: .84rem; }
.man-arvore li > span { font-weight: 600; color: var(--text); background: var(--surface2); border-radius: 6px; padding: 1px 8px; display: inline-block; }
.man-rodape-aviso { align-items: center; gap: 8px; padding: 8px 20px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text3); }
.man-rodape-aviso input { width: auto; }
.man-rodape { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--border); }
.man-rodape .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
.man-modal { height: 100%; max-height: none; border-radius: 0; }
.man-nav { width: 100%; border-right: 0; }
.man-main { display: none; }
.man-modal.man-conteudo-aberto .man-nav { display: none; }
.man-modal.man-conteudo-aberto .man-main { display: flex; width: 100%; }
.man-voltar { display: inline-block; }
.man-main-topo span { display: none; }
.man-conteudo { padding: 16px 16px 24px; }
}
.chat-modal .modal-close { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--text2); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.chat-voltar { display: none; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--text); padding: 0 4px; }
.chat-aviso-fixadas { align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px; font-size: .78rem; background: rgba(245, 158, 11, .12); border-bottom: 1px solid var(--border); color: var(--text); }
.chat-aviso-fixadas span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-aviso-fixadas button { background: none; border: 0; color: var(--accent); font-weight: 700; cursor: pointer; font-size: .76rem; white-space: nowrap; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 8px 0 12px; background: var(--surface); }
.chat-vazio { padding: 40px 24px; text-align: center; color: var(--text3); font-size: .86rem; line-height: 1.6; }
.chat-resultados { padding: 6px 18px; font-size: .74rem; color: var(--text3); }
.chat-dia { display: flex; align-items: center; gap: 12px; margin: 14px 18px 6px; color: var(--text3); font-size: .72rem; font-weight: 700; text-transform: capitalize; }
.chat-dia::before, .chat-dia::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chat-m { position: relative; display: flex; gap: 10px; padding: 3px 18px; }
.chat-m:hover { background: var(--surface2); }
.chat-m.realce { background: rgba(245, 158, 11, .22); }
.chat-m.mencionou-me { border-left: 3px solid #f59e0b; padding-left: 15px; background: rgba(245, 158, 11, .08); }
.chat-m-av { margin-top: 2px; }
.chat-m-av.vazio { background: none; width: 34px; height: auto; align-items: flex-start; justify-content: center; margin-top: 4px; }
.chat-m-hora { font-size: .62rem; color: var(--text3); visibility: hidden; }
.chat-m:hover .chat-m-hora { visibility: visible; }
.chat-m-corpo { flex: 1; min-width: 0; }
.chat-m-cab { display: flex; align-items: baseline; gap: 8px; }
.chat-m-cab b { font-size: .84rem; color: var(--text); }
.chat-m-cab span { font-size: .68rem; color: var(--text3); }
.chat-m-txt { font-size: .88rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.chat-m-txt mark, .chat-mensagens mark { background: #fde047; color: #111; border-radius: 3px; padding: 0 1px; }
.chat-m-apagada { color: var(--text3); font-style: italic; }
.chat-editada { font-size: .68rem; color: var(--text3); }
.chat-mencao { background: rgba(37, 99, 235, .15); color: var(--accent); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.chat-ref { background: rgba(124, 106, 247, .15); color: var(--accent); border-radius: 4px; padding: 0 4px; cursor: pointer; font-weight: 700; }
.chat-quote { border-left: 3px solid var(--accent); background: var(--surface2); border-radius: 0 6px 6px 0; padding: 4px 10px; margin: 2px 0 4px; font-size: .76rem; cursor: pointer; display: flex; flex-direction: column; max-width: 560px; }
.chat-quote b { color: var(--accent); }
.chat-quote span { color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-r { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 12px; font-size: .76rem; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; }
.chat-r.minha { background: rgba(37, 99, 235, .15); border-color: var(--accent); }
.chat-pin { font-size: .72rem; }
.chat-m-tools { position: absolute; right: 18px; top: -14px; display: none; gap: 2px; padding: 2px 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 2; }
.chat-m:hover .chat-m-tools, .chat-m.toca .chat-m-tools { display: flex; }
.chat-m-tools button { background: none; border: 0; cursor: pointer; font-size: .95rem; padding: 3px 6px; border-radius: 6px; color: var(--text); }
.chat-m-tools button:hover { background: var(--surface2); }
.chat-resposta-bar { align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px; font-size: .78rem; background: var(--surface2); border-top: 1px solid var(--border); color: var(--text2); }
.chat-resposta-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat-resposta-bar button { background: none; border: 0; cursor: pointer; color: var(--text3); font-size: 1rem; }
.chat-composer { padding: 10px 16px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-comp-box { position: relative; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface2); border-radius: 10px; padding: 4px 6px 4px 14px; }
.chat-comp-box:focus-within { border-color: var(--accent); }
.chat-comp-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .88rem; padding: 8px 0; }
.chat-comp-acoes { display: flex; align-items: center; gap: 2px; }
.chat-comp-acoes button { background: none; border: 0; cursor: pointer; font-size: 1.05rem; padding: 6px 8px; border-radius: 8px; color: var(--text); }
.chat-comp-acoes button:hover { background: var(--surface); }
.chat-comp-acoes .chat-enviar { color: var(--accent); }
.chat-pop { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 220px; max-width: 320px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); z-index: 20; padding: 4px; }
.chat-menu { position: absolute; z-index: 30; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); padding: 4px; }
.chat-menu-item { padding: 8px 12px; font-size: .84rem; border-radius: 6px; cursor: pointer; color: var(--text); }
.chat-menu-item:hover { background: var(--surface2); }
.chat-menu-emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 4px; }
.chat-menu-emojis button { background: none; border: 0; cursor: pointer; font-size: 1.3rem; padding: 6px; border-radius: 6px; }
.chat-menu-emojis button:hover { background: var(--surface2); }
@media (max-width: 700px) {
.chat-modal { height: 100%; max-height: none; border-radius: 0; }
.chat-rail { width: 100%; border-right: 0; }
.chat-main { display: none; }
.chat-shell.em-conversa .chat-rail { display: none; }
.chat-shell.em-conversa .chat-main { display: flex; }
.chat-fechar-mobile { display: block; }
.chat-voltar { display: block; }
.chat-head .chat-fechar { display: none; }
.chat-head input[type=search] { max-width: 40%; }
}
/* ── Guias na tela (guia.js) ─────────────────────────────────────── */
.guia-ov { position: fixed; inset: 0; z-index: 100010; pointer-events: none; }
.guia-veu { position: absolute; inset: 0; background: rgba(8, 10, 20, .6); pointer-events: auto; }
.guia-foco { position: fixed; border-radius: 10px; border: 2px solid var(--accent); box-shadow: 0 0 0 100vmax rgba(8, 10, 20, .6), 0 0 0 4px rgba(99, 102, 241, .35); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; animation: guia-pulso 1.8s ease-in-out infinite; }
@keyframes guia-pulso { 50% { box-shadow: 0 0 0 100vmax rgba(8, 10, 20, .6), 0 0 0 9px rgba(99, 102, 241, .18); } }
.guia-card { position: fixed; pointer-events: auto; width: 380px; max-width: calc(100vw - 24px); background: var(--surface-solid); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; transition: left .25s ease, top .25s ease, opacity .15s; }
.guia-card.guia-central { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.guia-card.guia-carregando { opacity: .55; }
.guia-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.guia-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guia-x { background: none; border: none; color: var(--text3); font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.guia-x:hover { background: var(--surface2); color: var(--text); }
.guia-prog { height: 3px; border-radius: 3px; background: var(--surface3); overflow: hidden; }
.guia-prog i { display: block; height: 100%; background: var(--accent-gradient); transition: width .3s; }
.guia-card h4 { margin: 0; font-size: 1rem; line-height: 1.3; }
.guia-txt { font-size: .85rem; line-height: 1.55; color: var(--text2); }
.guia-txt b { color: var(--text); }
.guia-aviso { font-size: .76rem; line-height: 1.45; color: var(--yellow); border: 1px dashed var(--yellow); border-radius: 8px; padding: 6px 9px; }
.guia-nav { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.guia-cont { font-size: .72rem; color: var(--text3); font-variant-numeric: tabular-nums; margin: 0 auto 0 2px; }
.guia-auto.ligado { border-color: var(--green); color: var(--green); }
.guia-pe { display: flex; gap: 12px; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 7px; }
.guia-pe button { background: none; border: none; color: var(--text3); font-size: .72rem; cursor: pointer; padding: 0; }
.guia-pe button:hover { color: var(--accent); text-decoration: underline; }
.guia-fim { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; align-items: flex-start; }
@media (max-width: 639px) {
.guia-card { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto !important; max-width: none; transform: none; max-height: 52vh; overflow-y: auto; }
.guia-card.guia-central { left: 8px; top: auto; transform: none; }
}
/* ── Guias dentro da Central de Ajuda ────────────────────────────── */
.man-guia-lista, .man-guia-ban { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; }
.man-guia-ban { border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; background: rgba(99, 102, 241, .07); }
.man-guia-ban-t { font-size: .84rem; color: var(--text2); }
.man-guia-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; background: var(--surface2); flex-wrap: wrap; }
.man-guia-card.off { opacity: .5; }
.man-guia-ic { font-size: 1.5rem; }
.man-guia-tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.man-guia-tx b { color: var(--text); font-size: .88rem; }
.man-guia-tx span { font-size: .78rem; color: var(--text2); line-height: 1.4; }
.man-guia-tx small { font-size: .68rem; color: var(--text3); }
.man-guia-ok { font-size: .66rem; color: var(--green); font-weight: 700; margin-left: 4px; }
.man-guia-bt { display: flex; gap: 6px; }
.man-nav-pe { display: flex; flex-direction: column; gap: 6px; }
.man-h.man-flash { background: rgba(245, 158, 11, .25); border-radius: 6px; transition: background 1s; }
/* ── Chat: canal Ajuda do Apoiare (ajuda.js) ─────────────────────── */
.ajuda-av { background: var(--accent-gradient) !important; color: #fff; }
.ajuda-topo { font-size: .72rem; color: var(--text3); padding: 8px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ajuda-topo button { background: none; border: none; color: var(--text3); font-size: .72rem; cursor: pointer; text-decoration: underline; padding: 0; }
.ajuda-txt { line-height: 1.55; }
.ajuda-txt ol, .ajuda-txt ul { margin: 6px 0 6px 18px; padding: 0; }
.ajuda-txt li { margin: 3px 0; }
.ajuda-txt p { margin: 5px 0; }
.ajuda-txt .man-box { border-left: 3px solid var(--accent); background: var(--surface2); border-radius: 0 6px 6px 0; padding: 5px 9px; margin: 6px 0; font-size: .8rem; }
.ajuda-txt .man-box > b:first-child { display: block; font-size: .72rem; }
.ajuda-txt table { font-size: .76rem; border-collapse: collapse; }
.ajuda-txt td, .ajuda-txt th { border: 1px solid var(--border); padding: 3px 6px; }
.ajuda-cap { font-weight: 400; color: var(--text3); font-size: .74rem; }
.ajuda-corte { color: var(--text3); font-size: .74rem; font-style: italic; }
.ajuda-acoes, .ajuda-rel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.ajuda-rel span { font-size: .72rem; color: var(--text3); }
.ajuda-bt { border: 1px solid var(--accent); background: rgba(99, 102, 241, .1); color: var(--text); border-radius: 16px; padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; }
.ajuda-bt:hover { background: var(--accent); color: #fff; }
.ajuda-chip { border: 1px solid var(--border); background: var(--surface2); color: var(--text2); border-radius: 14px; padding: 3px 10px; font-size: .74rem; cursor: pointer; }
.ajuda-chip:hover { border-color: var(--accent); color: var(--text); }
.ajuda-fb { margin-top: 6px; font-size: .72rem; color: var(--text3); }
.ajuda-fb button { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 0 3px; }
.ajuda-digitando { display: inline-flex; gap: 4px; padding: 6px 2px; }
.ajuda-digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); animation: ajuda-pt 1s infinite ease-in-out; }
.ajuda-digitando i:nth-child(2) { animation-delay: .15s; } .ajuda-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes ajuda-pt { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ajuda-topo-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ajuda-topo-acoes button { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; text-decoration: none !important; color: var(--text2); font-weight: 600; font-size: .7rem; transition: all .15s; }
.ajuda-topo-acoes button:hover { border-color: var(--accent); color: var(--accent); }
.ajuda-badge-apr { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: rgba(16, 185, 129, .12); color: #10b981; margin-left: 6px; vertical-align: middle; }
.ajuda-badge-ens { background: rgba(139, 92, 246, .14); color: #8b5cf6; }
.ajuda-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 7px; margin: 8px 0; }
.ajuda-kpi-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: .75rem; }
.ajuda-kpi-card b { display: block; font-size: .92rem; color: var(--text); margin: 2px 0; }
.ajuda-kpi-card small { display: block; font-size: .68rem; color: var(--text3); line-height: 1.3; }
.ajuda-kpi-ok { border-left: 3px solid #10b981; }
.ajuda-kpi-warn { border-left: 3px solid #f59e0b; }
.ajuda-kpi-crit { border-left: 3px solid #ef4444; }
.ajuda-ensinar-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.ajuda-ensinar-box label { font-size: .72rem; font-weight: 600; color: var(--text2); display: flex; flex-direction: column; gap: 3px; }
.ajuda-ensinar-box input, .ajuda-ensinar-box textarea, .ajuda-ensinar-box select { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .78rem; font-family: inherit; }
.ajuda-mem-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; margin: 4px 0; background: var(--surface2); font-size: .76rem; }
/* ── Anexos de documentos (cuide-anexos.js) ──────────────────────── */
.anx-bloco { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin: 6px 0; transition: border-color .15s, background .15s; }
.anx-bloco.anx-arrasta { border-color: var(--accent); background: rgba(99, 102, 241, .07); }
.anx-bloco.anx-enviando { opacity: .55; pointer-events: none; }
.anx-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: .82rem; margin-bottom: 6px; }
.anx-n { background: var(--surface3); border-radius: 10px; padding: 0 7px; font-size: .7rem; font-weight: 700; margin-left: 4px; }
.anx-uso { font-size: .7rem; color: var(--text3); }
.anx-vazio { font-size: .8rem; color: var(--text3); padding: 6px 0; }
/* Anexos não liberados para a conta: o botão continua visível, apagado, e o clique explica por quê. */
.anx-off { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anx-desativado { opacity: .45; filter: grayscale(1); cursor: not-allowed; }
.anx-item { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.anx-item:last-of-type { border-bottom: none; }
.anx-ic { font-size: 1.2rem; }
.anx-tx { flex: 1; min-width: 0; }
.anx-nome { font-size: .84rem; font-weight: 600; color: var(--accent); text-decoration: none; word-break: break-word; }
.anx-nome:hover { text-decoration: underline; }
.anx-meta { font-size: .72rem; color: var(--text3); }
.anx-acoes { display: flex; gap: 2px; }
.anx-acoes button { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 3px 5px; border-radius: 6px; }
.anx-acoes button:hover { background: var(--surface2); }
.anx-envio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.anx-envio select, .anx-envio input[type=date] { height: 32px; font-size: .78rem; max-width: 190px; }
.anx-botao { cursor: pointer; margin: 0; }
.anx-dica { font-size: .7rem; color: var(--text3); }
.anx-viewer { position: fixed; inset: 0; z-index: 100008; background: rgba(8, 10, 20, .92); display: flex; flex-direction: column; }
.anx-viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; flex-wrap: wrap; }
.anx-viewer-top b { font-size: .9rem; word-break: break-word; }
.anx-viewer-top span { display: flex; gap: 6px; }
.anx-viewer-corpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; }
.anx-viewer-corpo iframe { width: 100%; height: 100%; border: none; background: #fff; border-radius: 8px; }
.anx-viewer-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
/* Organograma (cuide-organograma.js) */
.org-quadro { overflow-x: auto; padding: 8px 0 14px; }
.org-tree { text-align: center; margin-bottom: 18px; min-width: max-content; }
.org-tree ul { padding-top: 18px; position: relative; display: flex; justify-content: center; margin: 0; padding-left: 0; list-style: none; }
.org-tree li { position: relative; text-align: center; padding: 18px 6px 0; list-style: none; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--border); width: 50%; height: 18px; }
.org-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--border); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 2px solid var(--border); border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--border); width: 0; height: 18px; }
.org-tree > ul { padding-top: 0; }
.org-tree > ul > li { padding-top: 0; }
.org-tree > ul > li::before, .org-tree > ul > li::after { display: none; }
.org-no { display: inline-block; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 150px; max-width: 200px; background: var(--surface2); cursor: pointer; }
.org-no:hover { border-color: var(--accent); }
.org-nome { font-weight: 700; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-cargo { font-size: .68rem; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-sub { font-size: .66rem; color: var(--accent); margin-top: 4px; text-align: left; }
.org-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; flex: 0 0 auto; }
.org-alerta { border-color: var(--red); }
.org-aviso { border-left: 3px solid var(--red); background: var(--surface2); border-radius: 6px; padding: 6px 10px; font-size: .76rem; margin: 6px 0; }
/* Barra de ferramentas agrupada (Qualidade e outros painéis) */
.ris-barra { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; }
.ris-grupo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ris-grupo-t { font-size: 0.75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.ris-grupo-b { display: flex; flex-wrap: wrap; gap: 6px; }
/* Celular: campos com 16px (o iOS dá zoom automático abaixo disso), alvos de toque maiores e rodapés de janela que quebram linha */
@media (max-width: 768px) {
input, select, textarea { font-size: 16px; }
.btn-sm, .tx-btn { min-height: 36px; }
.ris-barra { gap: 8px 14px; }
.ux-pal-overlay { padding-top: 8vh; }
}
@media (max-width: 480px) {
.form-grid-2 { grid-template-columns: 1fr; }
.modal-footer { flex-wrap: wrap; }
.modal-footer .btn { flex: 1 1 auto; min-width: 110px; }
}
/* ── Escala única de botões ──────────────────────────────────────────
Padrão (.btn) e pequeno (.btn-sm) com o mesmo raio; .tx-btn e .action-icon-btn seguem o mesmo raio.
Papéis: principal (.btn-primary, um por tela), secundário (.btn-outline), fantasma (.btn-ghost = o que .btn-outline.btn-sm já faz),
perigo (.btn-danger, tingido; .btn-danger-solid só para emergência), sucesso (.btn-green). Não pinte botão com style="": use a classe do papel. */
.btn-sm { padding: 5px 11px; font-size: 0.8rem; border-radius: var(--radius-sm); }
.tx-btn { font-size: 0.8rem; border-radius: var(--radius-sm); }
.action-icon-btn { border-radius: var(--radius-sm); }
.btn-ghost { background: var(--surface2); border: none; font-weight: 500; color: var(--text2); transition: background 0.2s ease, color 0.2s ease; }
.btn-ghost:hover:not(:disabled) { background: var(--surface3); color: var(--text); }
.btn-danger-solid { background: var(--red); color: #fff; border: 1px solid var(--red); font-weight: 700; }
.btn-danger-solid:hover:not(:disabled) { filter: brightness(0.92); transform: translateY(-1px); }
/* ── Abas (nível 1) em linha única e sub-abas (nível 2) em pílulas ───────
Nível 1: sublinhado, sem quebrar de linha (o que não cabe rola; ux.js põe uma sombra na borda quando há mais abas).
Nível 2 (dentro de .tab-content ou do corpo de uma página do Cuide): controle segmentado menor, para não parecer outra barra de abas igual. */
.tabs { flex-wrap: nowrap; }
.tabs.tabs-rolagem { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.tab-content .tabs, [id$="-corpo"] .tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 3px; margin-bottom: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.tab-content .tabs .tab-btn, [id$="-corpo"] .tabs .tab-btn { padding: 5px 12px; font-size: 0.8rem; border-radius: 7px; }
.tab-content .tabs .tab-btn.active, [id$="-corpo"] .tabs .tab-btn.active { background: var(--surface); color: var(--tab-accent); font-weight: 700; border-color: color-mix(in srgb, var(--tab-accent) 35%, var(--border)); box-shadow: var(--shadow-sm); }
.tab-content .tabs .tab-btn.active::after, [id$="-corpo"] .tabs .tab-btn.active::after { display: none; }
/* Botões do cartão da Análise de Benefícios (Guia do Assistente Social e Nova Análise) */
.social-acoes-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* Guia do Assistente Social: aplicativo em tela cheia por cima do Apoiare (menu lateral no PC, barra de baixo no celular: o layout é do próprio Guia) */
.guia-social-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--bg); }
.guia-social-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* ═══ Padronização do Início (fontes, botões, cartões) ═══════════════════════════════════════════════════════
Escala única de tamanhos: use estes tokens em vez de valores soltos (.7, .72, .74, .75, .76, .78, .8…). */
:root {
--fs-micro: 0.65rem; /* selos e contadores */
--fs-xs: 0.72rem; /* rótulos, legendas, apoio dos cartões */
--fs-sm: 0.78rem; /* controles compactos (botões da barra, filtros) */
--fs-md: 0.82rem; /* texto base e campos */
--fs-lg: 0.88rem; /* título de cartão */
--fs-xl: 1.05rem; /* título de seção */
--fs-kpi: 1.35rem; /* valor dos indicadores */
--ctl-h: 30px; --ctl-radius: 8px;
}
/* Barra de ferramentas do Início: todos os botões, seletores e navegação com a mesma fonte, altura e raio */
#page-dashboard .control-bar .cb-btn,
#page-dashboard .control-bar .cb-btn.btn-executivo,
#page-dashboard .control-bar .cb-btn.cb-btn-premium,
#page-dashboard .control-bar .cb-export,
#page-dashboard .dash-book-nav-btn,
#page-dashboard .chart-card .btn-pin,
#page-dashboard .chart-card .btn.btn-sm {
font-size: var(--fs-sm) !important; font-weight: 600 !important; letter-spacing: -0.01em;
border-radius: var(--ctl-radius) !important; min-height: var(--ctl-h); box-sizing: border-box;
padding: 5px 12px !important; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
#page-dashboard .control-bar .chart-filter-sel,
#page-dashboard .control-bar .filter-sel,
#page-dashboard .chart-card .chart-filter-sel {
font-size: var(--fs-sm) !important; font-weight: 600 !important; border-radius: var(--ctl-radius) !important;
min-height: var(--ctl-h); box-sizing: border-box; padding: 5px 10px !important; line-height: 1.2;
}
#page-dashboard .control-bar .chart-filter-label { font-size: var(--fs-xs); font-weight: 600; }
#page-dashboard .control-bar .cb-badge-pill, #page-dashboard .control-bar .cb-text-badge { font-size: var(--fs-micro) !important; font-weight: 700; }
#page-dashboard .dash-book-tab-btn { font-size: var(--fs-sm) !important; font-weight: 600 !important; border-radius: var(--ctl-radius) !important; }
#page-dashboard .dash-book-page-indicator { font-size: var(--fs-sm); font-weight: 600; }
/* Cartões de indicadores: o valor fica logo abaixo do título em todos (antes flutuava no meio quando o cartão vizinho era mais alto) */
#page-dashboard .kpi-card { justify-content: flex-start; gap: 0; }
#page-dashboard .kpi-label { font-size: var(--fs-xs); margin-bottom: 8px; min-height: 26px; }
#page-dashboard .kpi-value { font-size: var(--fs-kpi) !important; font-weight: 750 !important; line-height: 1.15; }
#page-dashboard .kpi-card [id^="kpi-trend"], #page-dashboard .kpi-card [id^="kpi-detalhe"], #page-dashboard .kpi-card .kpi-trend { font-size: var(--fs-xs) !important; font-weight: 600; }
#page-dashboard .kpi-card > div:not(.kpi-label):not(.kpi-value) { margin-top: 8px; }
/* Títulos dos gráficos como o título de cartão do Apoiare */
#page-dashboard .chart-card h3, .dash-book-slide .chart-card h3, .dash-slide .chart-card h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
/* ═══ Telas e resoluções (auditoria de rolagem) ═══════════════════════════════════════════════════════════════
Medido em 1920×1080, 1536×864, 1366×768 (≈650 de altura útil), 1280×720, 1024×768, 820×1180 e 390×844. */
/* Início: gráficos acompanham a altura da janela (150 px em notebook, até 300 px em monitor grande) e o conjunto passa a caber sem rolar */
.dash-book-slide .chart-wrap, .dash-slide .chart-wrap { height: clamp(140px, calc(100vh - 505px), 300px); flex: 0 0 clamp(140px, calc(100vh - 505px), 300px); }
.dash-book-viewport { min-height: 120px; } /* era 240 px e empurrava a página para rolar mesmo com a lâmina baixa */
/* Cartão de Pendências: rótulo e situação na mesma linha, valor embaixo (era o cartão mais alto da fileira) */
.kpi-pend-box { background: var(--pend-bg); border: 1px solid var(--pend-bd); border-radius: 10px; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.kpi-pend-box > :nth-child(1) { grid-column: 1; grid-row: 1; }
.kpi-pend-box > :nth-child(3) { grid-column: 2; grid-row: 1; margin: 0 !important; text-align: right; }
.kpi-pend-box > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
/* Lâminas: coluna mínima de 340 px (dois gráficos lado a lado já em tablet de 1024 px) e nunca maior que a tela (no celular a lâmina vazava 8 px à direita) */
.dash-book-slide.active, .dash-slide.active { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
/* ═══ Pacote A de UX: validação no campo e estados vazios com ação ═══════════════════════════════════════════════ */
.ux-invalido { border-color: var(--red) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent) !important; }
.ux-erro { color: var(--red); font-size: var(--fs-xs); font-weight: 600; margin-top: 4px; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ux-erro-acao { border: 1px solid var(--red); background: transparent; color: var(--red); border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; cursor: pointer; }
.ux-erro-acao:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.ux-aba-erro { position: relative; }
.ux-aba-erro::after { content: ''; position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ux-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ux-vazio strong { font-size: var(--fs-md); color: var(--text); }
.ux-vazio-txt { font-size: var(--fs-sm); color: var(--text3); max-width: 460px; }
.ux-vazio-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
/* ═══ Pacote B de UX: primeiros passos e formulários curtos ══════════════════════════════════════════════════════ */
.ux-mais { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 10px; padding: 0 12px; }
.ux-mais > summary { cursor: pointer; padding: 10px 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text2); list-style: none; }
.ux-mais > summary::-webkit-details-marker { display: none; }
.ux-mais > summary::before { content: '＋ '; color: var(--accent); }
.ux-mais[open] > summary::before { content: '－ '; }
.ux-mais[open] { padding-bottom: 12px; }
.ux-dica { font-size: var(--fs-xs); color: var(--text3); background: var(--surface2); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.ux-passos { padding: 16px; }
.ux-passos-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ux-passos-topo strong { font-size: var(--fs-lg); display: block; }
.ux-passos-topo > div > span { font-size: var(--fs-sm); color: var(--text3); }
.ux-passos-barra { height: 6px; border-radius: 99px; background: var(--surface2); margin: 12px 0; overflow: hidden; }
.ux-passos-barra i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.ux-passos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.ux-passos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ux-passos li.feito { opacity: .6; }
.ux-passos li.feito b { text-decoration: line-through; }
.ux-passo-ico { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
li.feito .ux-passo-ico { background: var(--green); border-color: var(--green); }
.ux-passos li > div { flex: 1; min-width: 0; }
.ux-passos li b { display: block; font-size: var(--fs-md); }
.ux-passos li small { display: block; font-size: var(--fs-xs); color: var(--text3); line-height: 1.35; }
.ux-passos-rodape { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
/* ═══ Pacote C de UX: menu lateral em grupos, menu de ações das linhas e densidade ════════════════════════════════ */
.nav-grupo { font-size: 0.62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 12px 10px 3px; user-select: none; }
.nav-grupo.ux-oculto { display: none; }
@media (min-width: 769px) {
/* A ordem do menu no computador: Início, grupos e, no rodapé, Sistema (Configurações e Ajustes). No celular vale a ordem do HTML. */
#nav-btn-inicio { order: 0; }
#nav-grupo-gestao { order: 10; } #nav-btn-financas { order: 11; } #nav-btn-cartao { order: 12; } #nav-btn-projetos { order: 13; }
#nav-grupo-operacao { order: 20; } #nav-btn-cuide-agenda { order: 21; } #nav-btn-cuide-agendamento { order: 22; } #nav-btn-cuide-faturamento { order: 23; } #nav-btn-cuide-materiais { order: 24; }
#nav-grupo-relacionamento { order: 30; } #nav-btn-cuide-chamados { order: 31; } #nav-btn-cuide-posvisita { order: 32; }
#nav-grupo-sistema { order: 90; margin-top: auto; } #nav-btn-familia { order: 91; } #nav-btn-ajustes { order: 92; }
#cuide-nav-divider, #cuide-nav-divider-adicionais { display: none !important; }
#app-wrapper.sidebar-collapsed .nav-grupo { font-size: 0; padding: 0; height: 1px; background: var(--border); margin: 6px 14px; opacity: .7; }
}
@media (max-width: 768px) { .nav-grupo { display: none !important; } }
.ux-menu { position: fixed; z-index: 10050; min-width: 190px; max-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 4px; display: flex; flex-direction: column; }
.ux-menu-item { text-align: left; border: none; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.ux-menu-item:hover, .ux-menu-item:focus-visible { background: var(--surface2); outline: none; }
.ux-menu-item.perigo { color: var(--red); }
.tx-btn-mais { background: var(--surface2); color: var(--text2); font-size: 1rem; line-height: 1; padding-inline: 9px; }
body.ux-compacto .tx-card { padding-top: 6px; padding-bottom: 6px; gap: 8px; }
body.ux-compacto .tx-meta { margin-top: 0; }
body.ux-compacto .tx-sec, body.ux-compacto .divisao-inline { display: none; }
body.ux-compacto .tx-desc { font-size: var(--fs-sm); }
/* ═══ Pacote D de UX: insights do mês no Início ══════════════════════════════════════════════════════════════════ */
.ux-ins-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ux-ins-topo b { font-size: var(--fs-md); }
.ux-ins-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.ux-ins { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--surface); min-width: 0; }
.ux-ins-alta { border-left-color: var(--red); } .ux-ins-media { border-left-color: var(--yellow); } .ux-ins-boa { border-left-color: var(--green); }
.ux-ins-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ux-ins-corpo b { font-size: var(--fs-sm); line-height: 1.3; }
.ux-ins-corpo small { font-size: var(--fs-xs); color: var(--text3); line-height: 1.35; }
.ux-ins-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ux-ins-x { border: none; background: transparent; color: var(--text3); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ux-ins-x:hover { background: var(--surface2); color: var(--text); }
.ux-ins-resumo { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.ux-ins-resumo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text3); }
.ux-ins-resumo i { font-style: normal; color: var(--text3); }
/* ═══ Chat: tags e grupos ═══════════════════════════════════════════════════════════════════════════════════════ */
.chat-sec { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.chat-sec-add { background: none; border: 1px solid var(--border); color: var(--accent); border-radius: 99px; font-size: .64rem; font-weight: 800; padding: 1px 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.chat-sec-add:hover { background: var(--surface2); }
.chat-tag { --tc: #64748b; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); cursor: pointer; }
.chat-tag b { cursor: pointer; font-size: .85rem; line-height: 1; }
.chat-m-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chat-tags-filtro { align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px; border-bottom: 1px solid var(--border); }
.chat-tf-rot { font-size: .72rem; color: var(--text3); font-weight: 700; }
.chat-tag-f { --tc: var(--accent); font: inherit; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; }
.chat-tag-f small { opacity: .7; }
.chat-tag-f.ativa { background: color-mix(in srgb, var(--tc) 18%, transparent); border-color: var(--tc); color: var(--tc); }
.chat-tags-bar { align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px; font-size: .74rem; color: var(--text3); }
.chat-tags-pop { padding: 8px 10px; max-height: 300px; }
.chat-tags-pop-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .8rem; }
.chat-tags-pop-t button { border: none; background: transparent; color: var(--text3); font-size: 1.1rem; cursor: pointer; }
.chat-tags-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-tag-op { --tc: #64748b; display: inline-flex; align-items: center; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); overflow: hidden; }
.chat-tag-op button { border: none; background: transparent; color: var(--tc); font: inherit; font-size: .74rem; font-weight: 700; padding: 3px 9px; cursor: pointer; }
.chat-tag-op.on { background: color-mix(in srgb, var(--tc) 20%, transparent); }
.chat-tag-op b { padding: 0 7px 0 0; color: var(--text3); cursor: pointer; }
.chat-tags-novo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.chat-tags-novo input { flex: 1; min-width: 110px; font-size: .78rem; padding: 4px 8px; }
.chat-tag-cor { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: inline-block; }
.chat-tag-cor.on { border-color: var(--text); }
.cg-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cg-icones { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-ico { font-size: 1.1rem; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.cg-ico.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cg-membros { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.cg-m { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: var(--fs-sm); }
.cg-m:hover { background: var(--surface2); }
.cg-m input { width: auto; }
.cg-m small { margin-left: auto; color: var(--text3); }
/* Chat: visão por tags (todas as conversas) */
.chat-tv-item { padding: 10px 14px; margin: 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.chat-tv-item:hover { background: var(--surface2); }
.chat-tv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74rem; color: var(--text3); }
.chat-tv-top b { color: var(--text); }
.chat-tv-canal { background: var(--surface2); border-radius: 99px; padding: 1px 8px; font-weight: 700; color: var(--text2); }
.chat-tv-txt { font-size: .86rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
/* ═══ Projetos ▸ Social ▸ Voluntariado ═══════════════════════════════════════════════════════════════════════════ */
.vol-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid #ec4899; padding: 16px; margin-bottom: 12px; }
.vol-sub { font-size: var(--fs-sm); color: var(--text3); max-width: 640px; }
.vol-topo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.vol-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.vol-kpi { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.vol-kpi small { font-size: var(--fs-xs); color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vol-kpi b { font-size: var(--fs-kpi, 1.4rem); }
.vol-kpi span { font-size: var(--fs-xs); color: var(--text3); }
.vol-ods-linha { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.vol-ods { --oc: #64748b; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--oc); color: #fff; }
.vol-ods.peq { padding: 0 7px; font-size: .66rem; margin: 2px 3px 0 0; }
.vol-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.vol-item:last-child { border-bottom: none; }
.vol-item-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vol-item-corpo small { font-size: var(--fs-xs); color: var(--text3); }
.vol-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.vol-st { font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--surface2); color: var(--text3); }
.vol-st-ativo { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.vol-hora { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.vol-hora-at { flex: 1; min-width: 120px; color: var(--text3); }
.vol-bloco { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--surface); }
.vol-bloco > summary { cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: var(--fs-md); }
.vol-bloco-corpo { padding: 0 14px 12px; font-size: var(--fs-sm); line-height: 1.55; }
.vol-bloco-corpo ul, .vol-bloco-corpo ol { margin: 6px 0 6px 18px; }
.vol-ods-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin: 8px 0; }
.vol-ods-card { --oc: #64748b; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: var(--fs-xs); opacity: .75; }
.vol-ods-card b { background: var(--oc); color: #fff; border-radius: 6px; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.vol-ods-card.on { opacity: 1; border-color: var(--oc); }
.vol-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.vol-forma { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.vol-forma span { color: var(--text3); font-size: var(--fs-xs); }
.vol-ods-sel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; grid-column: 1 / -1; }
.vol-ods-op { --oc: #64748b; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.vol-ods-op input { width: auto; }
.vol-ods-op span { background: var(--oc); color: #fff; border-radius: 5px; min-width: 20px; text-align: center; font-weight: 700; }
/* ═══ Termos assinados na tela (cuide-assinatura-tela.js) ═══════════════════════════════════════════════════════ */
.ast-canvas { display: block; width: 100%; height: 190px; background-color: #fff; border: 1px solid var(--border); border-radius: 10px; touch-action: none; cursor: crosshair; background-image: linear-gradient(transparent 78%, #bbb 78%, #bbb calc(78% + 1px), transparent calc(78% + 1px)); }
.ast-texto { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); line-height: 1.6; max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 6px 0; }
.ast-botoes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ast-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ast-item-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ast-item-corpo small { font-size: var(--fs-xs); color: var(--text3); }
.ast-item-acoes { display: flex; align-items: center; gap: 8px; }
.ast-mini { height: 44px; max-width: 120px; background: #fff; border: 1px solid var(--border); border-radius: 6px; }