/* Demandas shared subset generated from zz-dashboard-executivo-dark.css. Source order preserved. */
:root { --exec-bg: #020704; --exec-bg-2: #06120b; --exec-surface: rgba(5,16,10,.76); --exec-surface-2: rgba(8,25,15,.72); --exec-surface-3: rgba(10,34,20,.68); --exec-line: rgba(111,255,174,.16); --exec-line-strong: rgba(111,255,174,.28); --exec-text: #f7fff9; --exec-muted: rgba(226,255,236,.66); --exec-green: #35f27e; --exec-green-2: #12a855; --exec-yellow: #f7b733; --exec-red: #ff4747; --exec-blue: #38a3ff; --exec-purple: #9b5cff; }
html, html body.caio-emerald-ui { background: radial-gradient(circle at 55% -10%, rgba(55, 255, 135, 0.16), transparent 34%), radial-gradient(circle at 90% 18%, rgba(0, 255, 120, 0.07), transparent 28%), linear-gradient(rgb(1, 5, 3) 0%, rgb(5, 17, 10) 44%, rgb(2, 7, 4) 100%) !important; color: var(--exec-text) !important; }
body.caio-emerald-ui #appShell, body.caio-emerald-ui .main, body.caio-emerald-ui .content, body.caio-emerald-ui .premium-content, body.caio-emerald-ui .page { background: transparent !important; color: var(--exec-text) !important; }
body.caio-emerald-ui #appShell::before { content: ""; position: fixed; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(circle at 42% 0%, rgba(59, 255, 134, 0.09), transparent 28%), linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 14px); opacity: 0.95; }
body.caio-emerald-ui #appShell > * { position: relative; z-index: 1; }
body.caio-emerald-ui .sidebar { background: radial-gradient(circle at 50% 0%, rgba(45, 255, 130, 0.14), transparent 32%), linear-gradient(rgba(2, 14, 8, 0.98), rgba(1, 8, 5, 0.98)) !important; border-right: 1px solid rgba(96, 255, 170, 0.16) !important; box-shadow: rgba(0, 0, 0, 0.35) 24px 0px 70px !important; color: rgb(17, 24, 39) !important; }
body.caio-emerald-ui .brand-logo-shell, body.caio-emerald-ui .brand-mini, body.caio-emerald-ui .sidebar .user-card { background: rgba(255, 255, 255, 0.055) !important; border: 1px solid rgba(124, 255, 184, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px inset, rgba(0, 0, 0, 0.24) 0px 18px 40px !important; }
body.caio-emerald-ui .nav-item, body.caio-emerald-ui .nav-subitem, body.caio-emerald-ui .menu-group-toggle { color: rgba(244, 255, 247, 0.82) !important; background: transparent !important; border: 1px solid transparent !important; transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s !important; }
body.caio-emerald-ui .nav-item:hover, body.caio-emerald-ui .nav-subitem:hover, body.caio-emerald-ui .menu-group-toggle:hover { background: rgba(52, 255, 130, 0.08) !important; border-color: rgba(96, 255, 170, 0.14) !important; color: rgb(17, 24, 39) !important; transform: translateX(2px) !important; }
body.caio-emerald-ui .nav-item.active, body.caio-emerald-ui .nav-subitem.active, body.caio-emerald-ui .menu-group.open > .menu-group-toggle { background: linear-gradient(135deg, rgba(17, 160, 74, 0.95), rgba(55, 255, 132, 0.78)) !important; color: rgb(17, 24, 39) !important; border-color: rgba(108, 255, 180, 0.38) !important; box-shadow: rgba(0, 255, 120, 0.18) 0px 16px 40px !important; }
body.caio-emerald-ui .sidebar strong, body.caio-emerald-ui .sidebar small, body.caio-emerald-ui .sidebar span { color: inherit !important; }
body.caio-emerald-ui .topbar, body.caio-emerald-ui .premium-topbar, body.caio-emerald-ui header.topbar { background: rgba(4, 14, 8, 0.72) !important; border: 1px solid rgba(115, 255, 180, 0.16) !important; backdrop-filter: blur(18px) saturate(135%) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 80px !important; color: var(--exec-text) !important; }
body.caio-emerald-ui .topbar h1, body.caio-emerald-ui .topbar h2, body.caio-emerald-ui .topbar strong { color: rgb(17, 24, 39) !important; }
body.caio-emerald-ui .live-date, body.caio-emerald-ui .topbar span, body.caio-emerald-ui .topbar small { color: var(--exec-muted) !important; }
body.caio-emerald-ui .page-chip { background: rgba(49, 255, 133, 0.1) !important; color: rgb(84, 255, 155) !important; border: 1px solid rgba(83, 255, 152, 0.22) !important; }
body.caio-emerald-ui .card, body.caio-emerald-ui .panel, body.caio-emerald-ui .analytics-card, body.caio-emerald-ui .table-wrap, body.caio-emerald-ui .form-card, body.caio-emerald-ui .content-card, body.caio-emerald-ui .data-card, body.caio-emerald-ui .metric-card, body.caio-emerald-ui .modal-content { background: linear-gradient(rgba(8, 22, 13, 0.78), rgba(3, 12, 7, 0.7)) !important; color: var(--exec-text) !important; border: 1px solid var(--exec-line) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 22px 70px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; backdrop-filter: blur(16px) saturate(130%) !important; }
body.caio-emerald-ui .card h1, body.caio-emerald-ui .card h2, body.caio-emerald-ui .card h3, body.caio-emerald-ui .card h4, body.caio-emerald-ui .card strong, body.caio-emerald-ui .panel h1, body.caio-emerald-ui .panel h2, body.caio-emerald-ui .panel h3, body.caio-emerald-ui .panel strong, body.caio-emerald-ui th, body.caio-emerald-ui td { color: var(--exec-text) !important; }
body.caio-emerald-ui .card p, body.caio-emerald-ui .card span, body.caio-emerald-ui .card small, body.caio-emerald-ui .panel p, body.caio-emerald-ui .panel span, body.caio-emerald-ui .panel small, body.caio-emerald-ui .muted, body.caio-emerald-ui .subtext { color: var(--exec-muted) !important; }
body.caio-emerald-ui .btn-primary, body.caio-emerald-ui button.btn-primary { background: linear-gradient(135deg, rgb(21, 151, 70), rgb(54, 242, 123)) !important; color: rgb(17, 24, 39) !important; border-color: rgba(87, 255, 156, 0.32) !important; box-shadow: rgba(0, 255, 120, 0.2) 0px 16px 38px !important; }
body.caio-emerald-ui .btn-soft, body.caio-emerald-ui .card-head-action, body.caio-emerald-ui .topbar button { background: rgba(255, 255, 255, 0.043) !important; color: rgb(220, 252, 231) !important; border: 1px solid rgba(115, 255, 180, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; }
@keyframes caioPinPulse{
0% { transform: scale(0.65); opacity: 0.85; }
100% { transform: scale(1.45); opacity: 0; }
}
body.caio-emerald-ui table, body.caio-emerald-ui thead, body.caio-emerald-ui tbody, body.caio-emerald-ui tr { background: transparent !important; color: var(--exec-text) !important; }
body.caio-emerald-ui th { background: rgba(53, 242, 126, 0.07) !important; color: rgba(226, 255, 236, 0.76) !important; border-color: rgba(115, 255, 180, 0.1) !important; }
body.caio-emerald-ui td { border-color: rgba(115, 255, 180, 0.07) !important; color: rgba(247, 255, 249, 0.84) !important; }
body.caio-emerald-ui input, body.caio-emerald-ui select, body.caio-emerald-ui textarea { background: rgba(255, 255, 255, 0.043) !important; border: 1px solid rgba(115, 255, 180, 0.16) !important; color: rgb(17, 24, 39) !important; }
body.caio-emerald-ui input::placeholder, body.caio-emerald-ui textarea::placeholder { color: rgba(226, 255, 236, 0.45) !important; }
body.caio-emerald-ui .card, body.caio-emerald-ui .stat, body.caio-emerald-ui .dashboard-map-card { animation: 0.32s ease 0s 1 normal both running execFadeUp; }
@keyframes execFadeUp{
0% { opacity: 0.72; transform: translateY(7px); }
100% { opacity: 1; transform: translateY(0px); }
}
:root { --cc-bg-0: #000302; --cc-bg-1: #020806; --cc-bg-2: #06130c; --cc-panel: rgba(5,16,10,.74); --cc-panel-2: rgba(7,24,14,.68); --cc-panel-3: rgba(11,35,21,.58); --cc-line: rgba(118,255,178,.15); --cc-line-strong: rgba(118,255,178,.30); --cc-text: #f7fff9; --cc-muted: rgba(226,255,236,.68); --cc-dim: rgba(226,255,236,.48); --cc-green: #31f47d; --cc-green-2: #13aa59; --cc-yellow: #ffb632; --cc-blue: #38a3ff; --cc-red: #ff4b4b; --cc-purple: #9c5cff; --cc-radius: 18px; --cc-shadow: 0 28px 90px rgba(0,0,0,.38); }
html, body.caio-emerald-ui { min-height: 100%; color-scheme: dark; background: radial-gradient(circle at 18% 16%, rgba(49,244,125,.13), transparent 25%),
    radial-gradient(circle at 82% 6%, rgba(49,244,125,.10), transparent 28%),
    radial-gradient(circle at 72% 82%, rgba(0,133,74,.12), transparent 32%),
    linear-gradient(180deg, var(--cc-bg-0) 0%, var(--cc-bg-2) 54%, var(--cc-bg-0) 100%) !important; color: var(--cc-text) !important; }
body.caio-emerald-ui { font-family: Aptos, "Segoe UI", system-ui, -apple-system, sans-serif !important; letter-spacing: -0.012em; }
body.caio-emerald-ui::before, body.caio-emerald-ui::after { content: ""; position: fixed; inset: 0px; pointer-events: none; z-index: 0; }
body.caio-emerald-ui::before { background: linear-gradient(90deg, rgba(49, 244, 125, 0.035) 1px, transparent 1px) 0% 0% / 74px 74px, linear-gradient(rgba(49, 244, 125, 0.03) 1px, transparent 1px); mask-image: radial-gradient(circle at 52% 34%, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 28%, transparent 72%); opacity: 0.42; }
body.caio-emerald-ui::after { background: radial-gradient(circle, transparent 0px, transparent 48%, rgba(0, 0, 0, 0.48) 100%), linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 13px); opacity: 0.64; }
body.caio-emerald-ui #appShell, body.caio-emerald-ui .app-shell, body.caio-emerald-ui .main, body.caio-emerald-ui main, body.caio-emerald-ui .content, body.caio-emerald-ui .premium-content, body.caio-emerald-ui .page, body.caio-emerald-ui .page.active, body.caio-emerald-ui .workspace, body.caio-emerald-ui .layout-main { background: transparent !important; color: var(--cc-text) !important; }
body.caio-emerald-ui .sidebar { background: radial-gradient(circle at 30% 0%, rgba(49, 244, 125, 0.16), transparent 26%), radial-gradient(circle at 120% 54%, rgba(49, 244, 125, 0.1), transparent 30%), linear-gradient(rgba(2, 16, 9, 0.96), rgba(0, 7, 4, 0.98)) !important; border-right: 1px solid rgba(96, 255, 170, 0.2) !important; box-shadow: rgba(0, 0, 0, 0.42) 28px 0px 80px, rgba(255, 255, 255, 0.03) -1px 0px 0px inset !important; backdrop-filter: blur(18px) saturate(135%) !important; }
body.caio-emerald-ui .sidebar-top { border-bottom: 1px solid rgba(118, 255, 178, 0.1) !important; }
body.caio-emerald-ui .brand-logo-shell, body.caio-emerald-ui .brand-mini { background: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)) !important; border: 1px solid rgba(118, 255, 178, 0.18) !important; border-radius: 18px !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 22px 52px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; }
body.caio-emerald-ui .nav-item, body.caio-emerald-ui .nav-subitem, body.caio-emerald-ui .menu-group-toggle { min-height: 42px !important; border-radius: 14px !important; color: rgba(246, 255, 249, 0.84) !important; background: transparent !important; border: 1px solid transparent !important; text-shadow: rgba(49, 244, 125, 0.08) 0px 1px 18px !important; }
body.caio-emerald-ui .nav-item:hover, body.caio-emerald-ui .nav-subitem:hover, body.caio-emerald-ui .menu-group-toggle:hover { background: rgba(49, 244, 125, 0.075) !important; border-color: rgba(118, 255, 178, 0.14) !important; color: rgb(17, 24, 39) !important; transform: translateX(2px) !important; }
body.caio-emerald-ui .nav-item.active, body.caio-emerald-ui .nav-subitem.active, body.caio-emerald-ui .menu-group.open > .menu-group-toggle { background: linear-gradient(135deg, rgba(15, 143, 69, 0.98), rgba(49, 244, 125, 0.78)) !important; border-color: rgba(147, 255, 196, 0.44) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(49, 244, 125, 0.22) 0px 14px 44px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important; }
body.caio-emerald-ui .menu-group { background: rgba(255, 255, 255, 0.027) !important; border: 1px solid rgba(118, 255, 178, 0.1) !important; border-radius: 16px !important; }
body.caio-emerald-ui .sidebar-foot, body.caio-emerald-ui .sidebar .user-card { background: linear-gradient(rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)) !important; border: 1px solid rgba(118, 255, 178, 0.16) !important; border-radius: 18px !important; }
body.caio-emerald-ui .topbar, body.caio-emerald-ui .premium-topbar, body.caio-emerald-ui header.topbar { min-height: 74px !important; background: linear-gradient(rgba(6, 17, 11, 0.78), rgba(3, 10, 6, 0.68)) !important; border: 1px solid rgba(118, 255, 178, 0.16) !important; border-radius: 20px !important; box-shadow: var(--cc-shadow), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter: blur(22px) saturate(138%) !important; }
body.caio-emerald-ui .topbar .page-chip, body.caio-emerald-ui .page-chip { background: rgba(49, 244, 125, 0.1) !important; border: 1px solid rgba(118, 255, 178, 0.26) !important; color: rgb(125, 255, 178) !important; box-shadow: rgba(49, 244, 125, 0.1) 0px 0px 28px !important; }
body.caio-emerald-ui .user-menu, body.caio-emerald-ui .user-profile, body.caio-emerald-ui .topbar .user-card, body.caio-emerald-ui .caio-top-action, body.caio-emerald-ui .topbar button { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(118, 255, 178, 0.16) !important; color: rgb(247, 255, 249) !important; box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px inset !important; }
body.caio-emerald-ui .user-avatar, body.caio-emerald-ui #topbarAvatar { background: linear-gradient(135deg, rgb(15, 179, 91), rgb(53, 242, 126)) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(49, 244, 125, 0.22) 0px 16px 38px !important; }
body.caio-emerald-ui .card, body.caio-emerald-ui .panel, body.caio-emerald-ui .analytics-card, body.caio-emerald-ui .table-wrap, body.caio-emerald-ui .form-card, body.caio-emerald-ui .content-card, body.caio-emerald-ui .data-card, body.caio-emerald-ui .metric-card, body.caio-emerald-ui .list-card, body.caio-emerald-ui .section-card, body.caio-emerald-ui .page-card, body.caio-emerald-ui .box, body.caio-emerald-ui .stack-item, body.caio-emerald-ui .modal-content { background: linear-gradient(rgba(9, 22, 14, 0.78), rgba(3, 10, 6, 0.72)) !important; border: 1px solid var(--cc-line) !important; color: var(--cc-text) !important; box-shadow: rgba(0, 0, 0, 0.32) 0px 22px 68px, rgba(255, 255, 255, 0.043) 0px 1px 0px inset !important; backdrop-filter: blur(16px) saturate(130%) !important; }
body.caio-emerald-ui .card:hover, body.caio-emerald-ui .metric-card:hover, body.caio-emerald-ui .analytics-card:hover { border-color: rgba(118, 255, 178, 0.24) !important; box-shadow: rgba(0, 0, 0, 0.38) 0px 28px 86px, rgba(49, 244, 125, 0.07) 0px 0px 44px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset !important; }
body.caio-emerald-ui h1, body.caio-emerald-ui h2, body.caio-emerald-ui h3, body.caio-emerald-ui h4, body.caio-emerald-ui h5, body.caio-emerald-ui h6, body.caio-emerald-ui strong, body.caio-emerald-ui b, body.caio-emerald-ui label, body.caio-emerald-ui th { color: var(--cc-text) !important; }
body.caio-emerald-ui p, body.caio-emerald-ui small, body.caio-emerald-ui .muted, body.caio-emerald-ui .subtext, body.caio-emerald-ui .hint, body.caio-emerald-ui .breadcrumb, body.caio-emerald-ui .breadcrumb * { color: var(--cc-muted) !important; }
body.caio-emerald-ui table { border-collapse: separate !important; border-spacing: 0px !important; color: var(--cc-text) !important; }
body.caio-emerald-ui thead th { background: rgba(49, 244, 125, 0.075) !important; color: rgba(241, 255, 245, 0.82) !important; border-bottom: 1px solid rgba(118, 255, 178, 0.12) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
body.caio-emerald-ui tbody td { color: rgba(247, 255, 249, 0.86) !important; border-bottom: 1px solid rgba(118, 255, 178, 0.07) !important; }
body.caio-emerald-ui tbody tr:hover td { background: rgba(49, 244, 125, 0.043) !important; }
body.caio-emerald-ui input, body.caio-emerald-ui select, body.caio-emerald-ui textarea, body.caio-emerald-ui .search-input, body.caio-emerald-ui .filter-input { background: rgba(255, 255, 255, 0.055) !important; border: 1px solid rgba(118, 255, 178, 0.16) !important; color: rgb(247, 255, 249) !important; box-shadow: rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; }
body.caio-emerald-ui input:focus, body.caio-emerald-ui select:focus, body.caio-emerald-ui textarea:focus { border-color: rgba(49, 244, 125, 0.46) !important; box-shadow: rgba(49, 244, 125, 0.1) 0px 0px 0px 4px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset !important; outline: 0px !important; }
body.caio-emerald-ui .btn-primary, body.caio-emerald-ui button.btn-primary, body.caio-emerald-ui .btn-success { background: linear-gradient(135deg, rgb(14, 143, 71), rgb(49, 244, 125)) !important; color: rgb(17, 24, 39) !important; border: 1px solid rgba(147, 255, 196, 0.38) !important; box-shadow: rgba(49, 244, 125, 0.22) 0px 18px 42px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important; }
body.caio-emerald-ui .btn-soft, body.caio-emerald-ui .btn-secondary, body.caio-emerald-ui .card-head-action { background: rgba(255, 255, 255, 0.043) !important; color: rgb(223, 255, 233) !important; border: 1px solid rgba(118, 255, 178, 0.16) !important; }
body.caio-emerald-ui .badge, body.caio-emerald-ui .status-badge, body.caio-emerald-ui [class*="badge"] { border: 1px solid rgba(118, 255, 178, 0.15) !important; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; }
body.login-executive-preview #loginScreen.login-screen, body.caio-emerald-ui .login-screen, body.caio-emerald-ui #loginScreen { background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 18, 9, 0.42), rgba(0, 55, 24, 0.2)), radial-gradient(circle at 52% 2%, rgba(89, 255, 151, 0.22), transparent 36%), url("../img/login-preview-bg-real.jpg") center center / cover no-repeat !important; }
body.login-executive-preview #loginScreen.login-screen::after, body.caio-emerald-ui .login-screen::after { opacity: 0.34 !important; animation: 9s ease-in-out 0s infinite normal none running ccGlowBreath !important; }
body.login-executive-preview #loginScreen .login-card.login-card-premium, body.caio-emerald-ui .login-card, body.caio-emerald-ui .login-box { background: linear-gradient(rgba(8, 22, 14, 0.78), rgba(1, 8, 5, 0.7)) !important; border: 1px solid rgba(147, 255, 196, 0.34) !important; box-shadow: rgba(0, 0, 0, 0.58) 0px 46px 140px, rgba(49, 244, 125, 0.14) 0px 0px 90px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; backdrop-filter: blur(26px) saturate(140%) !important; }
@keyframes ccFadeRise{
0% { opacity: 0.7; transform: translateY(10px); filter: blur(6px); }
100% { opacity: 1; transform: translateY(0px); filter: blur(0px); }
}
@keyframes ccRadarSweep{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes ccRadarPulse{
0%, 100% { opacity: 0.34; transform: translateY(-50%) scale(0.94); }
50% { opacity: 0.98; transform: translateY(-50%) scale(1.06); }
}
@keyframes ccGlowBreath{
0%, 100% { opacity: 0.26; }
50% { opacity: 0.48; }
}
@media (prefers-reduced-motion: reduce){
body.caio-emerald-ui *, body.caio-emerald-ui ::before, body.caio-emerald-ui ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 760px){
body.caio-emerald-ui .topbar, body.caio-emerald-ui .premium-topbar { border-radius: 16px !important; }
}
:root { --cmd-bg-0: #020806; --cmd-bg-1: #06130e; --cmd-panel: rgba(6,18,13,.78); --cmd-panel-strong: rgba(8,24,17,.92); --cmd-line: rgba(89,255,154,.17); --cmd-line-strong: rgba(89,255,154,.34); --cmd-green: #22d56c; --cmd-green-2: #0d8f49; --cmd-text: #f0fff5; --cmd-muted: rgba(240,255,245,.68); --cmd-soft: rgba(255,255,255,.055); --cmd-shadow: 0 26px 80px rgba(0,0,0,.48); --cmd-glow: 0 0 0 1px rgba(89,255,154,.12),0 24px 72px rgba(0,0,0,.46),0 0 54px rgba(35,213,107,.09); }
html { background: var(--cmd-bg-0); color-scheme: dark; }
body.caio-emerald-ui { -webkit-font-smoothing: antialiased; text-rendering: geometricprecision; color: var(--cmd-text) !important; background: radial-gradient(circle at 78% 8%, rgba(35, 213, 107, 0.16), transparent 32%), radial-gradient(circle at 16% 80%, rgba(14, 163, 79, 0.16), transparent 36%), linear-gradient(135deg, rgb(2, 8, 6) 0%, rgb(5, 17, 13) 48%, rgb(8, 27, 19) 100%) !important; }
body.caio-emerald-ui::before { content: ""; position: fixed; inset: 0px; z-index: -3; pointer-events: none; background: linear-gradient(rgba(89, 255, 154, 0.03) 1px, transparent 1px) 0% 0% / 72px 72px, linear-gradient(90deg, rgba(89, 255, 154, 0.024) 1px, transparent 1px); mask-image: radial-gradient(circle at 52% 36%, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 45%, transparent 82%); opacity: 0.98; }
body.caio-emerald-ui::after { content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(circle, transparent 0px, transparent 48%, rgba(0, 0, 0, 0.62) 100%), linear-gradient(rgba(255, 255, 255, 0.024), transparent 18%, rgba(0, 0, 0, 0.22)); }
body.caio-emerald-ui #appShell, body.caio-emerald-ui .app-shell, body.caio-emerald-ui #mainContent, body.caio-emerald-ui .main-content { background: transparent !important; }
body.caio-emerald-ui h1, body.caio-emerald-ui h2, body.caio-emerald-ui h3, body.caio-emerald-ui h4, body.caio-emerald-ui .section-title, body.caio-emerald-ui .card-title { color: var(--cmd-text) !important; letter-spacing: -0.035em; }
body.caio-emerald-ui p, body.caio-emerald-ui small, body.caio-emerald-ui .muted, body.caio-emerald-ui .text-muted, body.caio-emerald-ui .subtitle, body.caio-emerald-ui .description { color: var(--cmd-muted) !important; }
body.caio-emerald-ui .page-section:not(#oficios), body.caio-emerald-ui .content-card, body.caio-emerald-ui .card, body.caio-emerald-ui .panel, body.caio-emerald-ui .module-card, body.caio-emerald-ui .premium-card, body.caio-emerald-ui .dashboard-card, body.caio-emerald-ui .analytics-card, body.caio-emerald-ui .metric-card { backdrop-filter: blur(22px) saturate(135%); background: linear-gradient(145deg, rgba(255, 255, 255, 0.067), rgba(255, 255, 255, 0.027)), radial-gradient(circle at 92% 4%, rgba(35, 213, 107, 0.08), transparent 34%) !important; border: 1px solid var(--cmd-line) !important; box-shadow: var(--cmd-glow) !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui .content-card:hover, body.caio-emerald-ui .card:hover, body.caio-emerald-ui .dashboard-card:hover, body.caio-emerald-ui .metric-card:hover { border-color: rgba(89, 255, 154, 0.29) !important; box-shadow: rgba(89, 255, 154, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 30px 88px, rgba(35, 213, 107, 0.12) 0px 0px 58px !important; }
body.caio-emerald-ui .sidebar { backdrop-filter: blur(28px); background: radial-gradient(circle at 50% 4%, rgba(35, 213, 107, 0.18), transparent 28%), linear-gradient(rgba(2, 19, 11, 0.97), rgba(1, 12, 8, 0.984)) !important; border-right: 1px solid rgba(89, 255, 154, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.035) -1px 0px 0px inset, rgba(0, 0, 0, 0.35) 18px 0px 56px !important; }
body.caio-emerald-ui .sidebar::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(89, 255, 154, 0.035) 1px, transparent 1px) 0% 0% / 42px 42px, linear-gradient(90deg, rgba(89, 255, 154, 0.024) 1px, transparent 1px); mask-image: linear-gradient(rgb(0, 0, 0) 0px, transparent 88%); opacity: 0.95; }
body.caio-emerald-ui .sidebar-top, body.caio-emerald-ui .sidebar-footer, body.caio-emerald-ui .user-card, body.caio-emerald-ui .brand-logo-shell { background: rgba(255, 255, 255, 0.055) !important; border-color: rgba(89, 255, 154, 0.18) !important; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px inset, rgba(0, 0, 0, 0.25) 0px 18px 42px !important; }
body.caio-emerald-ui .sidebar .nav-item, body.caio-emerald-ui .sidebar .nav-link, body.caio-emerald-ui .sidebar .nav-subitem, body.caio-emerald-ui .menu-group-toggle, body.caio-emerald-ui .sidebar a { text-shadow: rgba(0, 0, 0, 0.46) 0px 1px 14px; transition: background 0.22s, color 0.22s, box-shadow 0.22s, transform 0.22s; color: rgba(238, 255, 244, 0.88) !important; }
body.caio-emerald-ui .sidebar .nav-item:hover, body.caio-emerald-ui .sidebar .nav-link:hover, body.caio-emerald-ui .sidebar .nav-subitem:hover, body.caio-emerald-ui .menu-group-toggle:hover { box-shadow: rgba(89, 255, 154, 0.13) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.2) 0px 14px 36px; transform: translateX(2px); color: rgb(17, 24, 39) !important; background: rgba(35, 213, 107, 0.13) !important; }
body.caio-emerald-ui .sidebar .nav-item.active, body.caio-emerald-ui .sidebar .nav-link.active, body.caio-emerald-ui .sidebar .nav-subitem.active, body.caio-emerald-ui .menu-group.open > .menu-group-toggle, body.caio-emerald-ui .menu-group-toggle.active { color: rgb(17, 24, 39) !important; background: linear-gradient(135deg, rgba(35, 213, 107, 0.94), rgba(13, 128, 67, 0.84)) !important; box-shadow: rgba(113, 255, 168, 0.23) 0px 0px 0px 1px, rgba(35, 213, 107, 0.23) 0px 18px 48px !important; }
body.caio-emerald-ui .sidebar .nav-icon, body.caio-emerald-ui .sidebar svg, body.caio-emerald-ui .sidebar i { color: currentcolor !important; filter: drop-shadow(rgba(89, 255, 154, 0.13) 0px 0px 12px); }
body.caio-emerald-ui .sidebar-scroll, body.caio-emerald-ui .sidebar nav { scrollbar-color: rgba(89, 255, 154, 0.36) transparent; }
body.caio-emerald-ui .sidebar-scroll::-webkit-scrollbar, body.caio-emerald-ui .sidebar nav::-webkit-scrollbar { width: 7px; }
body.caio-emerald-ui .sidebar-scroll::-webkit-scrollbar-thumb, body.caio-emerald-ui .sidebar nav::-webkit-scrollbar-thumb { background: rgba(89, 255, 154, 0.32); border-radius: 999px; }
body.caio-emerald-ui .topbar, body.caio-emerald-ui .premium-topbar, body.caio-emerald-ui .glass-topbar, body.caio-emerald-ui .page-header { backdrop-filter: blur(24px) saturate(145%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)), radial-gradient(circle at 80% 0%, rgba(35, 213, 107, 0.106), transparent 32%) !important; border: 1px solid rgba(89, 255, 154, 0.16) !important; box-shadow: var(--cmd-glow) !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui .topbar input, body.caio-emerald-ui .topbar .search-input, body.caio-emerald-ui .global-search, body.caio-emerald-ui .search-box input { background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(89, 255, 154, 0.18) !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui .topbar input::placeholder, body.caio-emerald-ui input::placeholder, body.caio-emerald-ui textarea::placeholder { color: rgba(240, 255, 245, 0.42) !important; }
body.caio-emerald-ui .topbar button, body.caio-emerald-ui .topbar .icon-btn, body.caio-emerald-ui .header-action, body.caio-emerald-ui .user-menu { box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 28px; background: rgba(255, 255, 255, 0.055) !important; border: 1px solid rgba(89, 255, 154, 0.16) !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui .page-chip, body.caio-emerald-ui .topbar .page-chip { color: rgb(189, 251, 210) !important; background: rgba(35, 213, 107, 0.12) !important; border-color: rgba(89, 255, 154, 0.2) !important; }
@keyframes commandScan{
0%, 100% { transform: translateX(-32%) rotate(18deg); opacity: 0.08; }
48% { transform: translateX(235%) rotate(18deg); opacity: 0.23; }
}
body.caio-emerald-ui .btn-primary, body.caio-emerald-ui button.primary, body.caio-emerald-ui .dashboard-hero-actions .btn, body.caio-emerald-ui .dashboard-hero-actions button { background: linear-gradient(135deg, rgb(34, 199, 97), rgb(8, 122, 59)) !important; border: 1px solid rgba(139, 255, 183, 0.25) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(35, 213, 107, 0.18) 0px 18px 42px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset !important; }
@keyframes commandRadarPulse{
0%, 100% { transform: scale(0.96); opacity: 0.17; }
50% { transform: scale(1.04); opacity: 0.3; }
}
body.caio-emerald-ui table:not(.oficio-table), body.caio-emerald-ui .data-table, body.caio-emerald-ui .table-card { background: rgba(4, 14, 10, 0.58) !important; color: var(--cmd-text) !important; border-color: rgba(89, 255, 154, 0.14) !important; }
body.caio-emerald-ui table:not(.oficio-table) thead, body.caio-emerald-ui .data-table thead { background: rgba(35, 213, 107, 0.1) !important; }
body.caio-emerald-ui table:not(.oficio-table) th, body.caio-emerald-ui .data-table th { color: rgba(225, 255, 235, 0.8) !important; border-color: rgba(89, 255, 154, 0.12) !important; }
body.caio-emerald-ui table:not(.oficio-table) td, body.caio-emerald-ui .data-table td { color: rgba(242, 255, 246, 0.9) !important; border-color: rgba(89, 255, 154, 0.09) !important; }
body.caio-emerald-ui table:not(.oficio-table) tr:hover td, body.caio-emerald-ui .data-table tr:hover td { background: rgba(35, 213, 107, 0.055) !important; }
body.caio-emerald-ui input, body.caio-emerald-ui select, body.caio-emerald-ui textarea { background: rgba(2, 10, 7, 0.7) !important; border-color: rgba(89, 255, 154, 0.16) !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui input:focus, body.caio-emerald-ui select:focus, body.caio-emerald-ui textarea:focus { border-color: rgba(89, 255, 154, 0.45) !important; box-shadow: rgba(35, 213, 107, 0.1) 0px 0px 0px 4px !important; }
body.caio-emerald-ui .login-screen, body.caio-emerald-ui #loginScreen { position: relative; overflow: hidden; background: radial-gradient(circle at 70% 24%, rgba(35, 213, 107, 0.19), transparent 34%), radial-gradient(circle at 15% 78%, rgba(9, 121, 62, 0.2), transparent 38%), linear-gradient(135deg, rgba(0, 0, 0, 0.78), rgba(2, 12, 8, 0.9)), url("../img/login-preview-bg-real.jpg") center center / cover no-repeat !important; color: var(--cmd-text) !important; }
body.caio-emerald-ui .login-screen::before, body.caio-emerald-ui #loginScreen::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(circle, transparent 0px, transparent 46%, rgba(0, 0, 0, 0.68) 100%) 0% 0% / auto, linear-gradient(rgba(89, 255, 154, 0.024) 1px, transparent 1px) 0% 0% / 64px 64px, linear-gradient(90deg, rgba(89, 255, 154, 0.02) 1px, transparent 1px) 0% 0% / 64px 64px; opacity: 0.9; }
body.caio-emerald-ui .login-card, body.caio-emerald-ui .login-card-premium { backdrop-filter: blur(28px) saturate(145%); animation: 0.75s ease 0s 1 normal both running loginCardEnter, 8s ease-in-out 0s infinite normal none running commandBreath; background: linear-gradient(145deg, rgba(8, 22, 16, 0.83), rgba(1, 8, 6, 0.79)) !important; border: 1px solid rgba(89, 255, 154, 0.22) !important; box-shadow: rgba(0, 0, 0, 0.58) 0px 40px 120px, rgba(35, 213, 107, 0.14) 0px 0px 90px !important; color: var(--cmd-text) !important; }
@keyframes loginCardEnter{
0% { opacity: 0; transform: translateY(18px) scale(0.985); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes commandBreath{
0%, 100% { box-shadow: rgba(0, 0, 0, 0.58) 0px 40px 120px, rgba(35, 213, 107, 0.1) 0px 0px 70px; }
50% { box-shadow: rgba(0, 0, 0, 0.62) 0px 44px 126px, rgba(35, 213, 107, 0.17) 0px 0px 96px; }
}
body.caio-emerald-ui .login-card input, body.caio-emerald-ui .login-card-premium input { background: rgba(0, 0, 0, 0.33) !important; border: 1px solid rgba(89, 255, 154, 0.2) !important; color: rgb(17, 24, 39) !important; }
body.caio-emerald-ui .login-card button, body.caio-emerald-ui .login-card-premium button, body.caio-emerald-ui .login-submit { background: linear-gradient(135deg, rgb(33, 211, 106), rgb(7, 133, 66)) !important; border: 1px solid rgba(156, 255, 195, 0.28) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(35, 213, 107, 0.24) 0px 20px 54px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important; }
body.caio-emerald-ui .cinema-particles span { box-shadow: rgba(87, 255, 154, 0.42) 0px 0px 18px; background: rgba(87, 255, 154, 0.62) !important; animation-duration: 14s !important; }
@keyframes commandPageIn{
0% { opacity: 0.001; transform: translateY(8px); filter: blur(5px); }
100% { opacity: 1; transform: translateY(0px); filter: blur(0px); }
}
@media (max-width: 820px){
body.caio-emerald-ui .topbar, body.caio-emerald-ui .premium-topbar, body.caio-emerald-ui .glass-topbar { border-radius: 20px !important; }
}
@media print{
body.caio-emerald-ui { background: rgb(255, 255, 255) !important; }
}
body.caio-emerald-ui { --surface-black: rgba(2,9,7,.78); --surface-deep: rgba(1,7,5,.92); --surface-glass: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.022)); --neon-ring: 0 0 0 1px rgba(92,255,157,.16),0 28px 90px rgba(0,0,0,.48),0 0 70px rgba(29,211,102,.12); --neon-inner: inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 44px rgba(35,213,107,.035); }
body.caio-emerald-ui .main { background: radial-gradient(circle at 70% 8%, rgba(30, 210, 105, 0.13), transparent 30%), radial-gradient(circle at 12% 68%, rgba(30, 210, 105, 0.09), transparent 32%), linear-gradient(135deg, rgba(1, 8, 5, 0.96), rgba(4, 15, 10, 0.98)) !important; }
body.caio-emerald-ui .premium-content, body.caio-emerald-ui .content { border: 1px solid rgba(89, 255, 154, 0.055); box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset; background: radial-gradient(circle at 50% 0%, rgba(34, 213, 108, 0.08), transparent 28%), linear-gradient(rgba(3, 12, 8, 0.48), rgba(2, 10, 7, 0.68)) !important; }
body.caio-emerald-ui .topbar.glass-topbar, body.caio-emerald-ui .premium-topbar { min-height: 82px; padding: 18px 22px !important; border-radius: 18px !important; background: radial-gradient(circle at 70% 0%, rgba(35, 213, 107, 0.09), transparent 30%), linear-gradient(135deg, rgba(255, 255, 255, 0.067), rgba(255, 255, 255, 0.027)) !important; }
body.caio-emerald-ui .top-right::before { content: "●  Ao vivo"; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0px 16px; margin-right: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.043); border: 1px solid rgba(89, 255, 154, 0.16); color: rgb(234, 255, 239); font-weight: 800; font-size: 0.82rem; box-shadow: rgba(35, 213, 107, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 14px 34px; text-shadow: rgba(35, 213, 107, 0.28) 0px 0px 14px; animation: 4.4s ease-in-out 0s infinite normal none running liveGlow; }
@keyframes liveGlow{
0%, 100% { box-shadow: rgba(35, 213, 107, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 14px 34px; }
50% { box-shadow: rgba(35, 213, 107, 0.24) 0px 0px 0px 1px, rgba(0, 0, 0, 0.28) 0px 14px 34px, rgba(35, 213, 107, 0.18) 0px 0px 24px; }
}
body.caio-emerald-ui .user-avatar, body.caio-emerald-ui #topbarAvatar { background: linear-gradient(135deg, rgb(39, 228, 118), rgb(11, 140, 70)) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(35, 213, 107, 0.24) 0px 18px 42px, rgba(176, 255, 205, 0.24) 0px 0px 0px 1px !important; }
body.caio-emerald-ui .sidebar { width: 270px; }
body.caio-emerald-ui .brand-logo-shell img, body.caio-emerald-ui .logo img { filter: drop-shadow(rgba(37, 239, 121, 0.18) 0px 0px 18px); }
@keyframes radarBreath{
0%, 100% { transform: scale(0.95); opacity: 0.72; }
50% { transform: scale(1.04); opacity: 1; }
}
body.caio-emerald-ui .dashboard-hero-actions .btn, body.caio-emerald-ui .btn { min-height: 44px; letter-spacing: -0.01em; border-radius: 11px !important; font-weight: 900 !important; }
body.caio-emerald-ui .analytics-card-head strong, body.caio-emerald-ui .card-head h3 { color: rgb(17, 24, 39) !important; }
body.caio-emerald-ui .grid-2 { gap: 18px !important; }
body.caio-emerald-ui .card-head { border-bottom: 1px solid rgba(89, 255, 154, 0.1) !important; padding-bottom: 12px !important; margin-bottom: 14px !important; }
body.caio-emerald-ui .badge, body.caio-emerald-ui .status-badge, body.caio-emerald-ui .tag { background: rgba(35, 213, 107, 0.13) !important; color: rgb(207, 255, 240) !important; border: 1px solid rgba(89, 255, 154, 0.2) !important; }
body.caio-emerald-ui table { overflow: hidden; border-collapse: separate !important; border-spacing: 0px !important; border-radius: 16px !important; }
body.caio-emerald-ui thead th { background: rgba(35, 213, 107, 0.075) !important; }
body.caio-emerald-ui tbody tr { transition: background 0.22s, transform 0.22s; }
body.caio-emerald-ui tbody tr:hover { transform: translateY(-1px); }
body.caio-emerald-ui .stack > * { background: rgba(255, 255, 255, 0.043) !important; border: 1px solid rgba(89, 255, 154, 0.12) !important; color: var(--cmd-text) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 12px 34px !important; }
body.caio-emerald-ui .stack > * strong { color: rgb(17, 24, 39) !important; }
@keyframes pinHalo{
0%, 100% { transform: scale(0.84); opacity: 0.42; }
50% { transform: scale(1.18); opacity: 0.12; }
}
body.caio-emerald-ui button, body.caio-emerald-ui .btn, body.caio-emerald-ui a.btn { transition: transform 0.22s, box-shadow 0.22s, background 0.22s, border-color 0.22s !important; }
body.caio-emerald-ui button:hover, body.caio-emerald-ui .btn:hover, body.caio-emerald-ui a.btn:hover { transform: translateY(-1px); }
body.caio-emerald-ui .btn-soft, body.caio-emerald-ui button:not(.btn-primary):not(.primary) { background: rgba(255, 255, 255, 0.043) !important; border: 1px solid rgba(89, 255, 154, 0.16) !important; color: rgb(231, 255, 239) !important; }
body.caio-emerald-ui .btn-soft:hover, body.caio-emerald-ui button:not(.btn-primary):not(.primary):hover { background: rgba(35, 213, 107, 0.12) !important; border-color: rgba(89, 255, 154, 0.32) !important; box-shadow: rgba(0, 0, 0, 0.26) 0px 18px 48px, rgba(35, 213, 107, 0.12) 0px 0px 26px !important; }
@media (max-width: 720px){
body.caio-emerald-ui .top-right::before { display: none; }
}
html body.caio-emerald-ui #appShell, html body.caio-emerald-ui #appShell .main, html body.caio-emerald-ui #appShell .main .content, html body.caio-emerald-ui #appShell .main .premium-content { background: radial-gradient(circle at 72% 4%, rgba(28, 210, 102, 0.14), transparent 31%), radial-gradient(circle at 10% 82%, rgba(28, 210, 102, 0.1), transparent 34%), linear-gradient(135deg, rgb(1, 5, 4) 0%, rgb(3, 16, 11) 46%, rgb(6, 23, 15) 100%) rgb(2, 8, 6) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) { background: transparent !important; color: rgb(242, 255, 246) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .card, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .panel, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .content-card, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .module-card, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .analytics-card, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .table-wrap, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .dashboard-chart-shell, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .stack > *, html body.caio-emerald-ui #appShell .main .content #dashboard.page.active .card, html body.caio-emerald-ui #appShell .main .content #dashboard.page.active .card.stat, html body.caio-emerald-ui #appShell .main .content #dashboard.page.active .stats-grid > .card.stat, html body.caio-emerald-ui #appShell .main .content #dashboard.page.active .dashboard-map-card { background: radial-gradient(circle at 86% 8%, rgba(41, 235, 118, 0.114), transparent 33%), linear-gradient(145deg, rgba(255, 255, 255, 0.067), rgba(255, 255, 255, 0.02)), rgba(2, 9, 7, 0.86) !important; border: 1px solid rgba(94, 255, 159, 0.18) !important; color: rgb(244, 255, 247) !important; box-shadow: rgba(255, 255, 255, 0.075) 0px 1px 0px inset, rgba(35, 213, 107, 0.035) 0px 0px 54px inset, rgba(0, 0, 0, 0.52) 0px 26px 86px, rgba(35, 213, 107, 0.086) 0px 0px 64px !important; backdrop-filter: blur(24px) saturate(145%) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .card *, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .panel *, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) .content-card * { border-color: rgba(94, 255, 159, 0.14); }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) h1, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) h2, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) h3, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) h4, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) strong { color: rgb(255, 255, 255) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) p, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) small, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) span:not(.badge):not(.status-badge):not(.tag) { color: rgba(233, 255, 240, 0.72) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) input, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) select, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) textarea { background: rgba(0, 0, 0, 0.32) !important; border: 1px solid rgba(94, 255, 159, 0.2) !important; color: rgb(244, 255, 247) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) table, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) thead, html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) tbody { background: rgba(2, 9, 7, 0.68) !important; color: rgb(244, 255, 247) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) th { background: rgba(35, 213, 107, 0.1) !important; color: rgba(234, 255, 241, 0.82) !important; border-color: rgba(94, 255, 159, 0.12) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) td { background: rgba(2, 9, 7, 0.34) !important; color: rgba(244, 255, 247, 0.88) !important; border-color: rgba(94, 255, 159, 0.09) !important; }
html body.caio-emerald-ui #appShell .main .content .page:not(#oficios) tr:hover td { background: rgba(35, 213, 107, 0.07) !important; }
:root { --bg-primary: #050505; --bg-secondary: #07110b; --bg-tertiary: #081510; --bg-elevated: #0b1812; --glass-bg: linear-gradient(145deg,rgba(255,255,255,.072),rgba(255,255,255,.022)),rgba(3,12,8,.86); --glass-bg-strong: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.028)),rgba(2,9,7,.94); --glass-bg-soft: linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.016)),rgba(4,14,10,.72); --border-neon: rgba(92,255,157,.18); --border-neon-strong: rgba(92,255,157,.34); --glow-green: 0 0 0 1px rgba(92,255,157,.14),0 28px 90px rgba(0,0,0,.52),0 0 74px rgba(29,211,102,.11); --glow-green-soft: 0 0 0 1px rgba(92,255,157,.10),0 18px 52px rgba(0,0,0,.42),0 0 34px rgba(29,211,102,.07); --inner-glass: inset 0 1px 0 rgba(255,255,255,.075),inset 0 0 48px rgba(35,213,107,.035); --text-primary: #f5fff7; --text-secondary: rgba(238,255,244,.74); --text-muted: rgba(238,255,244,.54); --neon-green: #24ef79; --neon-green-2: #16b95c; --neon-red: #ff4d4d; --neon-yellow: #f6ad27; --neon-blue: #2f83ff; --neon-purple: #8e5cff; }
html body.caio-emerald-ui, html body.caio-emerald-ui.caio-emerald-ui { background-image:  !important; background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color: var(--bg-primary) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui * { scrollbar-color: rgba(92, 255, 157, 0.42) rgba(0, 0, 0, 0.18); }
html body.caio-emerald-ui ::-webkit-scrollbar { width: 9px; height: 9px; }
html body.caio-emerald-ui ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); }
html body.caio-emerald-ui ::-webkit-scrollbar-thumb { background: linear-gradient(rgba(36, 239, 121, 0.46), rgba(13, 120, 62, 0.62)); border-radius: 999px; border: 2px solid rgba(0, 0, 0, 0.2); }
html body.caio-emerald-ui #appShell, html body.caio-emerald-ui .app-shell, html body.caio-emerald-ui .main, html body.caio-emerald-ui main, html body.caio-emerald-ui .content, html body.caio-emerald-ui .premium-content, html body.caio-emerald-ui .page, html body.caio-emerald-ui .page.active, html body.caio-emerald-ui .page-content, html body.caio-emerald-ui .workspace, html body.caio-emerald-ui .container, html body.caio-emerald-ui .container-fluid, html body.caio-emerald-ui .app-main { background: radial-gradient(circle at 75% 0%, rgba(36, 239, 121, 0.1), transparent 34%), radial-gradient(circle at 8% 92%, rgba(20, 160, 80, 0.08), transparent 35%), linear-gradient(135deg, rgba(2, 8, 6, 0.86), rgba(5, 16, 11, 0.94)) rgb(2, 8, 6) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui #appShell .content, html body.caio-emerald-ui #appShell .premium-content, html body.caio-emerald-ui #appShell .page, html body.caio-emerald-ui .main .content { border-color: rgba(92, 255, 157, 0.08) !important; }
html body.caio-emerald-ui :is(.card, .panel, .box, .tile, .widget, .surface, .module, .module-card, .content-card, .section-card, .page-card, .metric-card, .analytics-card, .stats-card, .summary-card, .protocol-card, .timeline-card, .list-card, .filter-card, .form-card, .data-card, .info-card, .hero-card, .dashboard-card, .dashboard-map-card, .dashboard-top-hero, .dashboard-hero-side-card, .dashboard-hero-spotlight, .dashboard-chart-shell, .table-wrap, .table-card, .toolbar, .filters, .filter-bar, .filter-panel, .search-box, .actions-bar, .command-bar, .upload-card, .calendar-card, .event-card, .whatsapp-card, .contact-card, .person-card, .citizen-card, .crm-card, .map-panel, .map-shell, .map-card, .modal-content, .modal-card, .dialog, .drawer, .drawer-content, .offcanvas, .popup, .popover, .dropdown-menu, .menu-panel, .stack-item, .rank-item, .list-item, .timeline-item, .record-item, .history-item, .notification-item):not(.oficio-preview):not(.oficio-a4):not(.oficio-document):not(.document-a4):not(.paper-a4):not(.a4-page):not(.word-page):not(.nav-item):not(.nav-subitem):not(.menu-group):not(.menu-group-toggle):not(.menu-title-safe):not(.caio-menu-label):not(.caio-menu-icon):not(.menu-chevron) { background-image:  !important; background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color: rgba(3, 12, 8, 0.86) !important; border: 1px solid var(--border-neon) !important; color: var(--text-primary) !important; box-shadow: var(--inner-glass),var(--glow-green-soft) !important; backdrop-filter: blur(22px) saturate(145%) !important; }
html body.caio-emerald-ui :is([class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"], [class*="surface"], [class*="Surface"], [class*="container"], [class*="Container"], [class*="bg-white"], [class*="bg-gray"], [class*="bg-slate"], [class*="bg-zinc"], [class*="bg-neutral"]):not(.oficio-preview):not(.oficio-a4):not(.oficio-document):not(.document-a4):not(.paper-a4):not(.a4-page):not(.word-page):not(.login-card):not(.login-card-premium) { background-image:  !important; background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color: rgba(3, 12, 8, 0.86) !important; border-color: var(--border-neon) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui :is(h1, h2, h3, h4, h5, h6, .title, .page-title, .section-title, .card-title, strong, b, label, legend, th) { color: rgb(255, 255, 255) !important; text-shadow: rgba(36, 239, 121, 0.07) 0px 0px 28px; }
html body.caio-emerald-ui :is(p, small, span, td, li, dd, dt, .subtitle, .description, .muted, .text-muted, .hint, .help-text) { color: var(--text-secondary) !important; }
html body.caio-emerald-ui a:not(.btn) { color: rgb(189, 251, 210) !important; }
html body.caio-emerald-ui :is(.card, .panel, .content-card, .module-card, .section-card, .analytics-card, .metric-card, .table-wrap, .filter-bar, .list-item, .stack-item):hover { border-color: var(--border-neon-strong) !important; box-shadow: var(--inner-glass),0 28px 90px rgba(0,0,0,.54),0 0 70px rgba(36,239,121,.14) !important; }
html body.caio-emerald-ui :is([class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"], [class*="surface"], [class*="Surface"], [class*="container"], [class*="Container"], [class*="bg-white"], [class*="bg-gray"], [class*="bg-slate"], [class*="bg-zinc"], [class*="bg-neutral"]):not(.oficio-preview):not(.oficio-a4):not(.oficio-document):not(.document-a4):not(.paper-a4):not(.a4-page):not(.word-page):not(.login-card):not(.login-card-premium) { background: var(--glass-bg) !important; background-color: rgba(3, 12, 8, 0.86) !important; border-color: var(--border-neon) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui :is(input, select, textarea, .input, .select, .textarea, .form-control, .form-select, .search-input) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.047), rgba(255, 255, 255, 0.02)), rgba(0, 0, 0, 0.36) !important; border: 1px solid rgba(92, 255, 157, 0.22) !important; color: var(--text-primary) !important; box-shadow: rgba(255, 255, 255, 0.055) 0px 1px 0px inset, rgba(0, 0, 0, 0.22) 0px 12px 34px !important; }
html body.caio-emerald-ui :is([class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"], [class*="box"], [class*="Box"], [class*="surface"], [class*="Surface"], [class*="container"], [class*="Container"], [class*="bg-white"], [class*="bg-gray"], [class*="bg-slate"], [class*="bg-zinc"], [class*="bg-neutral"]):not(.oficio-preview):not(.oficio-a4):not(.oficio-document):not(.document-a4):not(.paper-a4):not(.a4-page):not(.word-page):not(.login-card):not(.login-card-premium) { background: var(--glass-bg) !important; background-color: rgba(3, 12, 8, 0.86) !important; border-color: var(--border-neon) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui :is(input, select, textarea, .input, .select, .textarea, .form-control, .form-select, .search-input):focus { border-color: rgba(92, 255, 157, 0.54) !important; outline: none !important; box-shadow: rgba(36, 239, 121, 0.12) 0px 0px 0px 4px, rgba(36, 239, 121, 0.12) 0px 0px 34px !important; }
html body.caio-emerald-ui :is(input, textarea)::placeholder { color: rgba(238, 255, 244, 0.44) !important; }
html body.caio-emerald-ui select option, html body.caio-emerald-ui option, html body.caio-emerald-ui optgroup { background: rgb(7, 17, 11) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui input[type="file"]::file-selector-button { border-radius: 10px; background: rgba(36, 239, 121, 0.16) !important; border: 1px solid rgba(92, 255, 157, 0.28) !important; color: rgb(234, 255, 239) !important; }
html body.caio-emerald-ui :is(button, .btn, a.btn, .button, [role="button"]):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) { border: 1px solid rgba(92, 255, 157, 0.2) !important; color: rgb(245, 255, 247) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.063), rgba(255, 255, 255, 0.02)), rgba(3, 12, 8, 0.82) !important; box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset, rgba(0, 0, 0, 0.28) 0px 14px 42px !important; }
html body.caio-emerald-ui :is(.btn-primary, .primary, button.primary, .button-primary, [data-variant="primary"]) { background: linear-gradient(135deg, rgb(36, 214, 110), rgb(8, 122, 59)) !important; border-color: rgba(166, 255, 199, 0.3) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(36, 239, 121, 0.22) 0px 20px 58px, rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important; }
html body.caio-emerald-ui :is(button, .btn, a.btn, .button, [role="button"]):hover { transform: translateY(-1px); border-color: rgba(92, 255, 157, 0.42) !important; box-shadow: rgba(255, 255, 255, 0.09) 0px 1px 0px inset, rgba(0, 0, 0, 0.34) 0px 20px 58px, rgba(36, 239, 121, 0.13) 0px 0px 34px !important; }
html body.caio-emerald-ui :is(table, .data-table) { background: rgba(3, 12, 8, 0.7) !important; border: 1px solid rgba(92, 255, 157, 0.14) !important; border-collapse: separate !important; border-spacing: 0px !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui thead, html body.caio-emerald-ui thead tr, html body.caio-emerald-ui thead th { background: linear-gradient(rgba(36, 239, 121, 0.12), rgba(36, 239, 121, 0.055)) rgba(36, 239, 121, 0.08) !important; color: rgba(244, 255, 247, 0.88) !important; border-color: rgba(92, 255, 157, 0.13) !important; }
html body.caio-emerald-ui tbody, html body.caio-emerald-ui tbody tr, html body.caio-emerald-ui tbody td { background: rgba(2, 9, 7, 0.34) !important; color: rgba(244, 255, 247, 0.88) !important; border-color: rgba(92, 255, 157, 0.086) !important; }
html body.caio-emerald-ui tbody tr:hover td { background: rgba(36, 239, 121, 0.075) !important; color: rgb(17, 24, 39) !important; }
html body.caio-emerald-ui :is(.badge, .tag, .pill, .chip, .status, .status-badge, [class*="badge"], [class*="Badge"]) { background: rgba(36, 239, 121, 0.13) !important; border: 1px solid rgba(92, 255, 157, 0.22) !important; color: rgb(215, 255, 229) !important; box-shadow: rgba(36, 239, 121, 0.08) 0px 0px 18px !important; }
html body.caio-emerald-ui :is(.sidebar, .side-menu, .navigation) { background: radial-gradient(circle at 50% 4%, rgba(36, 239, 121, 0.16), transparent 26%), linear-gradient(rgba(1, 17, 9, 0.98), rgba(1, 8, 5, 0.996)) !important; border-color: rgba(92, 255, 157, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.04) -1px 0px 0px inset, rgba(0, 0, 0, 0.36) 20px 0px 62px !important; }
html body.caio-emerald-ui :is(.topbar, .page-header, .header, .section-header, .card-head, .toolbar) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), rgba(3, 12, 8, 0.8) !important; border-color: rgba(92, 255, 157, 0.15) !important; color: var(--text-primary) !important; }
html body.caio-emerald-ui :is(.nav-item, .nav-link, .nav-subitem, .menu-group-toggle, .sidebar a) { color: rgba(244, 255, 247, 0.88) !important; }
html body.caio-emerald-ui :is(.nav-item.active, .nav-link.active, .nav-subitem.active, .menu-group-toggle.active, .menu-group.open > .menu-group-toggle) { background: linear-gradient(135deg, rgba(36, 239, 121, 0.88), rgba(7, 126, 61, 0.78)) !important; color: rgb(17, 24, 39) !important; border-color: rgba(166, 255, 199, 0.26) !important; box-shadow: rgba(92, 255, 157, 0.22) 0px 0px 0px 1px, rgba(36, 239, 121, 0.2) 0px 18px 50px !important; }
html body.caio-emerald-ui :is(.calendar-grid, .calendar-day, .event-list, .event-row, .user-row, .permission-row, .protocol-row, .atendimento-row, .demand-row, .whatsapp-panel, .whatsapp-queue, .contact-row, .message-row, .portal-card, .portal-section, .portal-panel, .public-card, .people-list, .person-row) { background-image:  !important; background-position-x:  !important; background-position-y:  !important; background-size:  !important; background-repeat:  !important; background-attachment:  !important; background-origin:  !important; background-clip:  !important; background-color: rgba(3, 12, 8, 0.84) !important; border: 1px solid rgba(92, 255, 157, 0.16) !important; color: var(--text-primary) !important; box-shadow: var(--inner-glass),0 14px 42px rgba(0,0,0,.30) !important; }
html body.caio-emerald-ui { --primary: #24ef79 !important; --primary-600: #12a856 !important; --primary-700: #087a3b !important; --accent: #24ef79 !important; --blue: #24ef79 !important; --brand: #24ef79 !important; --surface: #06120d !important; --surface-2: #081510 !important; --surface-3: #0b1812 !important; --card: #06120d !important; --panel: #06120d !important; --white: rgba(5,18,13,.88) !important; --gray-50: #081510 !important; --gray-100: #0b1812 !important; --gray-200: rgba(92,255,157,.13) !important; --gray-700: rgba(238,255,244,.74) !important; --gray-900: #f5fff7 !important; --text: #f5fff7 !important; --muted: rgba(238,255,244,.58) !important; }
html body.caio-emerald-ui::before { content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(circle at 22% 18%, rgba(36, 239, 121, 0.1), transparent 28%), radial-gradient(circle at 80% 0%, rgba(36, 239, 121, 0.12), transparent 34%), radial-gradient(circle at 52% 84%, rgba(15, 135, 70, 0.09), transparent 38%), linear-gradient(135deg, rgb(5, 5, 5), rgb(7, 17, 11) 48%, rgb(11, 24, 18)); }
html body.caio-emerald-ui::after { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(92, 255, 157, 0.027) 1px, transparent 1px) 0% 0% / 72px 72px, linear-gradient(90deg, rgba(92, 255, 157, 0.02) 1px, transparent 1px) 0% 0% / 72px 72px, radial-gradient(circle, transparent 0px, transparent 44%, rgba(0, 0, 0, 0.28) 76%, rgba(0, 0, 0, 0.58) 100%) 0% 0% / 100% 100%; opacity: 0.65; }
html body.caio-emerald-ui #appShell, html body.caio-emerald-ui #appShell > :not(.sidebar), html body.caio-emerald-ui .main-content, html body.caio-emerald-ui .app-content, html body.caio-emerald-ui .page-shell, html body.caio-emerald-ui .page-body, html body.caio-emerald-ui .module-content, html body.caio-emerald-ui .workspace-body { background: radial-gradient(circle at 78% 4%, rgba(36, 239, 121, 0.09), transparent 28%), linear-gradient(135deg, rgba(2, 8, 6, 0.94), rgba(7, 17, 11, 0.98)) rgb(2, 8, 6) !important; color: rgb(245, 255, 247) !important; }
html body.caio-emerald-ui #appShell :is(.row, .grid, .grid-row, .cards, .cards-grid, .stats-grid, .summary-grid, .kpi-grid, .dashboard-grid, .analytics-grid, .form-grid, .filters-grid, .toolbar-grid, .list-grid, .content-grid, .kanban, .kanban-column, .tab-content, .tabs-content) { background: transparent !important; color: rgb(245, 255, 247) !important; }
html body.caio-emerald-ui #appShell :is(.page-header, .topbar, .header-bar, .module-header, .content-header, .subheader) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)), rgba(2, 9, 7, 0.9) !important; border: 1px solid rgba(92, 255, 157, 0.16) !important; color: rgb(245, 255, 247) !important; box-shadow: rgba(0, 0, 0, 0.38) 0px 24px 80px, rgba(36, 239, 121, 0.08) 0px 0px 54px !important; backdrop-filter: blur(22px) saturate(145%) !important; }
html body.caio-emerald-ui #appShell :is(.table-wrap, .table-card, .table-container, .data-table-wrap) { overflow: hidden; }
html body.caio-emerald-ui #appShell :is(table, .table, .data-table, .permissions-table, .users-table, .protocols-table, .atendimentos-table) { background: rgba(2, 9, 7, 0.76) !important; border: 1px solid rgba(92, 255, 157, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px inset, rgba(0, 0, 0, 0.34) 0px 22px 70px !important; }
html body.caio-emerald-ui #appShell :is(th, .table-head, .table-header) { background: linear-gradient(rgba(36, 239, 121, 0.16), rgba(36, 239, 121, 0.06)) !important; color: rgb(245, 255, 247) !important; border-color: rgba(92, 255, 157, 0.14) !important; }
html body.caio-emerald-ui #appShell :is(td, .table-cell) { background: rgba(2, 9, 7, 0.34) !important; color: rgba(245, 255, 247, 0.86) !important; border-color: rgba(92, 255, 157, 0.09) !important; }
html body.caio-emerald-ui #appShell tr:hover :is(td, .table-cell) { background: rgba(36, 239, 121, 0.09) !important; color: rgb(17, 24, 39) !important; }
html body.caio-emerald-ui #appShell :is(input, select, textarea, .form-control, .form-select, .search-input, .filter-input), html body.caio-emerald-ui #appShell :is(.select2-selection, .choices, .choices__inner) { background: rgba(1, 8, 5, 0.72) !important; color: rgb(245, 255, 247) !important; border: 1px solid rgba(92, 255, 157, 0.22) !important; }
html body.caio-emerald-ui #appShell :is(.badge, .tag, .chip, .pill, .status, .status-badge) { border-radius: 999px; font-weight: 800; letter-spacing: 0.01em; }
html body.caio-emerald-ui #appShell :is(.sidebar, .side-menu) { background: radial-gradient(circle at 50% 3%, rgba(36, 239, 121, 0.17), transparent 28%), linear-gradient(rgb(3, 22, 11), rgb(1, 8, 5) 70%, rgb(0, 5, 3)) !important; border-right: 1px solid rgba(92, 255, 157, 0.18) !important; }
html body.caio-emerald-ui #appShell .sidebar :is(a, button, .nav-item, .nav-link, .menu-item, .menu-group-toggle) { color: rgba(245, 255, 247, 0.88) !important; }
html body.caio-emerald-ui #appShell .sidebar :is(a:hover, button:hover, .nav-item:hover, .nav-link:hover, .menu-item:hover, .menu-group-toggle:hover) { background: rgba(36, 239, 121, 0.11) !important; color: rgb(17, 24, 39) !important; }
html body.caio-emerald-ui #appShell .sidebar :is(.active, [aria-current="page"], .is-active) { background: linear-gradient(135deg, rgba(36, 239, 121, 0.88), rgba(8, 122, 58, 0.78)) !important; color: rgb(17, 24, 39) !important; box-shadow: rgba(166, 255, 199, 0.22) 0px 0px 0px 1px, rgba(36, 239, 121, 0.18) 0px 16px 44px !important; }
html body.caio-emerald-ui #appShell img:not(.leaflet-tile):not(.oficio-preview img):not(.oficio-a4 img):not(.document-a4 img) { filter: saturate(1.04) contrast(1.02); }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen, html body.caio-emerald-ui.login-executive-preview #loginScreen.login-premium, html body.caio-emerald-ui #loginScreen.login-screen.login-premium { background-color: rgb(6, 19, 13) !important; background-image: radial-gradient(circle at 50% 0%, rgba(83, 255, 150, 0.26), transparent 34%), radial-gradient(circle at 18% 84%, rgba(23, 193, 99, 0.16), transparent 30%), linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 20, 10, 0.12), rgba(0, 56, 27, 0.08)), url("../img/login-preview-bg-real.jpg") !important; background-position: center top, left bottom, center center, center center !important; background-size: cover, cover, cover, cover !important; }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen::before, html body.caio-emerald-ui.login-executive-preview #loginScreen.login-premium::before, html body.caio-emerald-ui #loginScreen.login-screen.login-premium::before { opacity: 0.78 !important; background-image: linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,18,9,.10),rgba(0,52,26,.06)),
    radial-gradient(circle at 50% 0%,rgba(100,255,155,.30),transparent 36%),
    var(--login-bg-image, url("../img/login-preview-bg-real.jpg")) !important; filter: saturate(1.14) contrast(1.04) brightness(1.08) !important; }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen::after, html body.caio-emerald-ui #loginScreen.login-screen.login-premium::after { background: radial-gradient(circle at 50% 18%, rgba(73, 255, 139, 0.18), transparent 32%), radial-gradient(circle at 82% 68%, rgba(23, 193, 99, 0.11), transparent 30%), linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.38)) !important; opacity: 0.72 !important; }
html body.caio-emerald-ui #loginScreen :is(.login-left-preview h2 strong, .login-card h1 span, .login-brand-lock span, .login-feature-title, .login-quick-label, .login-forgot) { color: rgb(92, 255, 157) !important; text-shadow: rgba(92, 255, 157, 0.48) 0px 0px 10px, rgba(36, 239, 121, 0.28) 0px 0px 28px !important; }
html body.caio-emerald-ui #loginScreen :is(.login-card, .login-card-premium) { background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)), rgba(3, 12, 8, 0.74) !important; border-color: rgba(123, 255, 177, 0.26) !important; box-shadow: rgba(0, 0, 0, 0.52) 0px 42px 120px, rgba(36, 239, 121, 0.15) 0px 0px 90px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset !important; }
html body.caio-emerald-ui #loginScreen :is(.login-left-preview p, .login-feature-sub, .login-card p) { color: rgba(241, 255, 245, 0.82) !important; }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen, html body.caio-emerald-ui.login-executive-preview #loginScreen.login-premium, html body.caio-emerald-ui #loginScreen.login-screen.login-premium { background-color: rgb(7, 21, 13) !important; background-image: radial-gradient(circle at 18% 18%, rgba(73, 255, 145, 0.28), transparent 28%), radial-gradient(circle at 82% 12%, rgba(29, 213, 105, 0.2), transparent 34%), linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 22, 12, 0.12), rgba(0, 60, 28, 0.1)), url("../img/login-executive-bg.jpg") !important; background-size: auto, auto, auto, cover !important; background-position: center center !important; background-blend-mode: screen, screen, normal, normal !important; }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen::before, html body.caio-emerald-ui.login-executive-preview #loginScreen.login-premium::before, html body.caio-emerald-ui #loginScreen.login-screen.login-premium::before { opacity: 0.66 !important; filter: saturate(1.12) contrast(1.05) brightness(1.22) !important; }
html body.caio-emerald-ui.login-executive-preview #loginScreen.login-screen::after, html body.caio-emerald-ui.login-executive-preview #loginScreen.login-premium::after, html body.caio-emerald-ui #loginScreen.login-screen.login-premium::after { background: radial-gradient(circle, transparent 0px, transparent 54%, rgba(0, 0, 0, 0.34) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.03) 48%, rgba(0, 0, 0, 0.18)) !important; opacity: 0.78 !important; }
html body.caio-emerald-ui #loginScreen :is(.login-card, .login-card-premium, .login-box) { background: linear-gradient(145deg, rgba(4, 18, 10, 0.76), rgba(1, 7, 5, 0.62)), rgba(2, 10, 7, 0.7) !important; border-color: rgba(98, 255, 157, 0.3) !important; box-shadow: rgba(0, 0, 0, 0.58) 0px 34px 120px, rgba(36, 239, 121, 0.13) 0px 0px 88px, rgba(255, 255, 255, 0.11) 0px 1px 0px inset !important; }
html body.caio-emerald-ui #loginScreen :is(.login-card h1 span, .login-left-preview h2 strong, .login-brand-lock span, .login-feature-title, .login-quick-label, .login-forgot, .login-check, label, .login-eyebrow) { color: rgb(83, 255, 152) !important; text-shadow: rgba(83, 255, 152, 0.58) 0px 0px 10px, rgba(83, 255, 152, 0.24) 0px 0px 34px !important; }
html body.caio-emerald-ui #loginScreen :is(p, small, .login-muted, .login-feature-copy, .login-card-subtitle) { color: rgba(235, 255, 240, 0.76) !important; }
html body.caio-emerald-ui #loginScreen :is(input, select, textarea) { background: rgba(0, 8, 5, 0.66) !important; border-color: rgba(98, 255, 157, 0.26) !important; color: rgb(246, 255, 248) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; }
html body.caio-emerald-ui #loginScreen :is(input, select, textarea):focus { border-color: rgba(83, 255, 152, 0.64) !important; box-shadow: rgba(83, 255, 152, 0.14) 0px 0px 0px 4px, rgba(83, 255, 152, 0.18) 0px 0px 30px !important; }
:root { --texto-forte-sistema: #f8fafc; --texto-normal-sistema: #dbeafe; --texto-suave-sistema: #b7c9bd; }
.dashboard, .painel, .panel, .page, .main-content, .content, .card, .metric-card, .stat-card, .radar-card, .kpi-card, .widget, section[class*="card"], div[class*="card"] { color: var(--texto-normal-sistema) !important; }
.dashboard h1, .dashboard h2, .dashboard h3, .dashboard h4, .painel h1, .painel h2, .painel h3, .painel h4, .panel h1, .panel h2, .panel h3, .panel h4, .card h1, .card h2, .card h3, .card h4, .metric-card h1, .metric-card h2, .metric-card h3, .metric-card h4, .stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4 { text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 2px; color: var(--texto-forte-sistema) !important; opacity: 1 !important; filter: none !important; }
.dashboard p, .dashboard span, .dashboard small, .dashboard strong, .painel p, .painel span, .painel small, .painel strong, .panel p, .panel span, .panel small, .panel strong, .card p, .card span, .card small, .card strong, .metric-card p, .metric-card span, .metric-card small, .metric-card strong, .stat-card p, .stat-card span, .stat-card small, .stat-card strong { color: var(--texto-normal-sistema) !important; opacity: 1 !important; filter: none !important; }
.label, .badge, .chip, .tag, .pill, .subtitle, .text-muted, .muted, [class*="subtitle"], [class*="muted"] { color: rgb(199, 249, 216) !important; opacity: 1 !important; filter: none !important; }
.dashboard-title, .panel-title, .card-title, .widget-title, .section-title, .radar-title, .titulo-painel, .titulo-card, .titulo-dashboard, [class*="title"], [class*="titulo"] { color: rgb(255, 255, 255) !important; text-shadow: rgba(0, 0, 0, 0.45) 0px 1px 2px !important; }
#painel .table-card, #painel .map-card, #painel .map-section, #painel .demand-list, .painel .table-card, .painel .map-card, .painel .map-section, .painel .demand-list, .dashboard .table-card, .dashboard .map-card, .dashboard .map-section, .dashboard .demand-list, #painel section:has(table), .painel section:has(table), .dashboard section:has(table) { border-radius: 22px !important; background: radial-gradient(circle at 92% 10%, rgba(34, 197, 94, 0.1), transparent 28%), rgba(4, 18, 13, 0.82) !important; border: 1px solid rgba(34, 197, 94, 0.2) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 18px 48px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; padding: 16px !important; overflow: hidden !important; }
.login-hero h1, .auth-hero h1, .login-left h1, .auth-left h1, .hero-login h1, .hero-title, [class*="login"] h1, [class*="auth"] h1 { color: rgb(248, 250, 252) !important; -webkit-text-fill-color: rgb(248, 250, 252) !important; background: none !important; opacity: 1 !important; filter: none !important; }
.login-feature-title, .auth-feature-title, .login-feature strong, .auth-feature strong, [class*="feature"] strong { color: rgb(34, 197, 94) !important; -webkit-text-fill-color: rgb(34, 197, 94) !important; }
.quote, .login-quote, .hero-quote, blockquote, .quote-text, .login-footer-quote, [class*="quote"] { color: rgb(34, 197, 94) !important; -webkit-text-fill-color: rgb(34, 197, 94) !important; text-shadow: rgba(34, 197, 94, 0.4) 0px 0px 10px, rgba(34, 197, 94, 0.2) 0px 0px 18px !important; opacity: 1 !important; }
.login-transforma-verde, .login-transforma-verde *, .login-page .login-transforma-verde, .auth-page .login-transforma-verde, .login-screen .login-transforma-verde, .auth-screen .login-transforma-verde, body .login-transforma-verde { color: rgb(34, 255, 122) !important; -webkit-text-fill-color: rgb(34, 255, 122) !important; background: none border-box transparent !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; text-shadow: rgba(34, 255, 122, 0.95) 0px 0px 4px, rgba(34, 255, 122, 0.7) 0px 0px 14px, rgba(34, 255, 122, 0.36) 0px 0px 32px !important; }
.login-left h1 span, .auth-left h1 span, .login-hero h1 span, .auth-hero h1 span, .hero-login h1 span, .login-page h1 span, .auth-page h1 span, [class*="login"] h1 span, [class*="auth"] h1 span, .transforma, .text-transforma, .highlight-transforma { color: rgb(34, 255, 122) !important; -webkit-text-fill-color: rgb(34, 255, 122) !important; background: none transparent !important; filter: none !important; opacity: 1 !important; text-shadow: rgba(34, 255, 122, 0.95) 0px 0px 4px, rgba(34, 255, 122, 0.7) 0px 0px 14px, rgba(34, 255, 122, 0.36) 0px 0px 32px !important; }
.login-quote-verde, .login-quote-verde *, .login-quote, .hero-quote, .quote-text, blockquote, [class*="quote"] { color: rgb(34, 255, 122) !important; -webkit-text-fill-color: rgb(34, 255, 122) !important; background: none transparent !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; text-shadow: rgba(34, 255, 122, 0.75) 0px 0px 4px, rgba(34, 255, 122, 0.48) 0px 0px 14px, rgba(34, 255, 122, 0.24) 0px 0px 28px !important; }
.login-page::before, .login-page::after, .auth-page::before, .auth-page::after, .login-screen::before, .login-screen::after, .auth-screen::before, .auth-screen::after, .login-bg::before, .login-bg::after, .auth-bg::before, .auth-bg::after, [class*="login"]::before, [class*="login"]::after { pointer-events: none !important; }
.login-content, .login-panel, .login-card, .auth-card, .login-left, .auth-left, .login-hero, .auth-hero, .hero-login { position: relative !important; z-index: 5 !important; }
.modal-backdrop, .ficha-backdrop, #personModalBackdrop, #fichaModalBackdrop, #modalFichaBackdrop, [class*="modal-backdrop"], [class*="backdrop"] { background: rgba(0, 12, 8, 0.72) !important; backdrop-filter: blur(14px) saturate(120%) !important; }
@keyframes caioLoaderSpin{
100% { transform: rotate(360deg); }
}
@keyframes caioShimmer{
100% { transform: translateX(100%); }
}
.sidebar .menu-group, .grouped-nav .menu-group, .sidebar [data-group], .grouped-nav [data-group] { background: transparent !important; box-shadow: none !important; }
.sidebar .menu-group, .sidebar .accordion, .sidebar .nav-group { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; }
.sidebar .menu-group:hover, .sidebar .accordion:hover, .sidebar .nav-group:hover { background: rgba(255, 255, 255, 0.05) !important; }
.sidebar a:hover, .sidebar button:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgb(255, 255, 255) !important; }
.sidebar .active { background: linear-gradient(90deg, rgba(34, 197, 94, 0.18), transparent) !important; }
html body.caio-emerald-ui { --codex-ink: #f7fff9; --codex-muted: rgba(226,255,236,.72); --codex-soft: rgba(226,255,236,.52); --codex-green: #24ef79; --codex-line: rgba(116,255,179,.18); --codex-panel: rgba(5,17,11,.78); }
html body.caio-emerald-ui .topbar h1, html body.caio-emerald-ui .topbar h2, html body.caio-emerald-ui .topbar h3, html body.caio-emerald-ui .topbar strong, html body.caio-emerald-ui .title-group h1, html body.caio-emerald-ui .title-group h2 { color: var(--codex-ink) !important; -webkit-text-fill-color: var(--codex-ink) !important; }
html body.caio-emerald-ui .topbar, html body.caio-emerald-ui .premium-topbar { background: linear-gradient(rgba(4, 15, 10, 0.76), rgba(2, 9, 6, 0.64)) !important; border-color: rgba(116, 255, 179, 0.14) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 20px 62px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; }
html body.caio-emerald-ui .sidebar { background: radial-gradient(circle at 45% 0%, rgba(36, 239, 121, 0.12), transparent 30%), linear-gradient(rgba(2, 13, 8, 0.96), rgba(1, 7, 5, 0.98)) !important; border-right: 1px solid rgba(116, 255, 179, 0.14) !important; color: var(--codex-ink) !important; }
html body.caio-emerald-ui .sidebar *, html body.caio-emerald-ui .grouped-nav *, html body.caio-emerald-ui .nav * { -webkit-text-fill-color: currentcolor; }
html body.caio-emerald-ui .sidebar .menu-group, html body.caio-emerald-ui .sidebar .menu-group.open, html body.caio-emerald-ui .grouped-nav .menu-group, html body.caio-emerald-ui .grouped-nav .menu-group.open, html body.caio-emerald-ui .sidebar .menu-group-items, html body.caio-emerald-ui .grouped-nav .menu-group-items { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html body.caio-emerald-ui .sidebar .menu-group::before, html body.caio-emerald-ui .sidebar .menu-group::after, html body.caio-emerald-ui .grouped-nav .menu-group::before, html body.caio-emerald-ui .grouped-nav .menu-group::after, html body.caio-emerald-ui .sidebar .menu-group-items::before, html body.caio-emerald-ui .sidebar .menu-group-items::after { display: none !important; content: none !important; }
html body.caio-emerald-ui .nav-item, html body.caio-emerald-ui .nav-subitem, html body.caio-emerald-ui .menu-group-toggle, html body.caio-emerald-ui .sidebar a, html body.caio-emerald-ui .sidebar button { min-height: 42px !important; border-radius: 12px !important; color: rgba(247, 255, 249, 0.82) !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; text-shadow: none !important; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s !important; }
html body.caio-emerald-ui .nav-item:hover, html body.caio-emerald-ui .nav-subitem:hover, html body.caio-emerald-ui .menu-group-toggle:hover, html body.caio-emerald-ui .sidebar a:hover, html body.caio-emerald-ui .sidebar button:hover { color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.075) !important; border-color: rgba(116, 255, 179, 0.14) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 10px 26px !important; transform: translateX(1px) !important; }
html body.caio-emerald-ui .nav-item.active, html body.caio-emerald-ui .nav-subitem.active, html body.caio-emerald-ui .menu-group.open > .menu-group-toggle { color: rgb(255, 255, 255) !important; background: none transparent !important; border-color: rgba(116, 255, 179, 0.16) !important; box-shadow: none !important; }
html body.caio-emerald-ui .menu-group-items { margin: 4px 0px 8px !important; padding: 0px 0px 0px 10px !important; border-left: 1px solid rgba(116, 255, 179, 0.1) !important; }
html body.caio-emerald-ui .menu-group-items .nav-subitem { min-height: 36px !important; padding-left: 14px !important; color: rgba(226, 255, 236, 0.7) !important; }
html body.caio-emerald-ui .sidebar .user-card, html body.caio-emerald-ui .brand-logo-shell { background: rgba(255, 255, 255, 0.043) !important; border: 1px solid rgba(116, 255, 179, 0.14) !important; color: var(--codex-ink) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; }
#demandaEditBackdrop, #demandaConfirmBackdrop { background: rgba(0, 8, 5, 0.62) !important; backdrop-filter: blur(18px) saturate(118%) !important; animation: 0.18s ease 0s 1 normal both running codexModalFade !important; }
#demandaEditModal, #demandaConfirmModal { color: rgb(247, 255, 249) !important; background: radial-gradient(circle at 18% 0%, rgba(36, 239, 121, 0.12), transparent 32%), linear-gradient(rgba(7, 22, 14, 0.98), rgba(2, 9, 6, 0.99)) !important; border: 1px solid rgba(116, 255, 179, 0.24) !important; border-radius: 24px !important; box-shadow: rgba(0, 0, 0, 0.58) 0px 34px 120px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset !important; animation: 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running codexModalIn !important; }
#demandaEditModal h1, #demandaEditModal h2, #demandaEditModal h3, #demandaConfirmModal h1, #demandaConfirmModal h2, #demandaConfirmModal h3 { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
#demandaConfirmModal p, #demandaEditModal small, #demandaEditModal label { color: rgba(226, 255, 236, 0.76) !important; -webkit-text-fill-color: rgba(226, 255, 236, 0.76) !important; }
.demanda-edit-head { background: linear-gradient(135deg, rgba(36, 239, 121, 0.18), rgba(36, 239, 121, 0.06)) !important; border-bottom: 1px solid rgba(116, 255, 179, 0.18) !important; }
.demanda-edit-head h3, .demanda-edit-head small { color: rgb(255, 255, 255) !important; -webkit-text-fill-color: rgb(255, 255, 255) !important; }
#demandaEditClose { color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(116, 255, 179, 0.2) !important; }
.demanda-edit-field input, .demanda-edit-field textarea, #demandaEditModal input, #demandaEditModal textarea, #demandaEditModal select { background: rgba(2, 12, 8, 0.78) !important; border: 1px solid rgba(116, 255, 179, 0.22) !important; color: rgb(247, 255, 249) !important; -webkit-text-fill-color: rgb(247, 255, 249) !important; }
#demandaConfirmCancel, #demandaEditCancel { background: rgba(255, 255, 255, 0.07) !important; color: rgb(233, 255, 240) !important; border: 1px solid rgba(116, 255, 179, 0.2) !important; }
#demandaConfirmOk, #demandaEditSave { background: linear-gradient(135deg, rgb(36, 239, 121), rgb(12, 143, 73)) !important; color: rgb(3, 18, 12) !important; -webkit-text-fill-color: rgb(3, 18, 12) !important; border: 0px !important; }
@keyframes codexModalFade{
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes codexModalIn{
0% { opacity: 0; transform: translateY(14px) scale(0.97); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
dialog input, dialog select, dialog textarea, .modal input, .modal select, .modal textarea, [role="dialog"] input, [role="dialog"] select, [role="dialog"] textarea, #atendimentoModal input, #atendimentoModal select, #atendimentoModal textarea, #novoAtendimentoModal input, #novoAtendimentoModal select, #novoAtendimentoModal textarea { width: 100% !important; min-height: 46px !important; border-radius: 14px !important; background: rgba(3, 18, 12, 0.88) !important; border: 1px solid rgba(34, 197, 94, 0.34) !important; color: rgb(248, 250, 252) !important; -webkit-text-fill-color: rgb(248, 250, 252) !important; padding: 11px 13px !important; outline: none !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; font-size: 14px !important; }
dialog input:focus, dialog select:focus, dialog textarea:focus, .modal input:focus, .modal select:focus, .modal textarea:focus, [role="dialog"] input:focus, [role="dialog"] select:focus, [role="dialog"] textarea:focus { border-color: rgba(34, 197, 94, 0.9) !important; box-shadow: rgba(34, 197, 94, 0.16) 0px 0px 0px 3px, rgba(34, 197, 94, 0.14) 0px 0px 22px !important; }
dialog button, .modal button, [role="dialog"] button { border-radius: 12px !important; font-weight: 900 !important; }
dialog button:not([aria-label="Fechar"]), .modal button:not([aria-label="Fechar"]), [role="dialog"] button:not([aria-label="Fechar"]) { border: 1px solid rgba(34, 197, 94, 0.24) !important; color: rgb(209, 250, 229) !important; background: rgba(255, 255, 255, 0.07) !important; }
body.caio-emerald-ui .top-right::before, body.caio-emerald-ui .top-right::after, body.caio-emerald-ui .topbar::before, body.caio-emerald-ui .topbar::after { content: none !important; display: none !important; }