/* ===================================================================== CICLA — design system Marca (da logo): "C" em degradê azul royal (#1D4BFF) → ciano (#19D3F5) e o ponto laranja (#FF7A1A). Tinta quase preta (#0B1020). Tipos: Sora (títulos e números) · Plus Jakarta Sans (texto). Regra da casa: cor comunica estado, nunca enfeita. Degradê só na marca; laranja = "o ponto", o destaque único. ===================================================================== */ :root { --marinho: #0B1020; --marinho-2: #121933; --marinho-3: #1B2446; --tinta: #0B1020; --texto: #2A3350; --suave: #626C87; --apagado: #9AA3BA; --azul: #1D5BFF; --azul-escuro: #1446D6; --violeta: #7C3AED; /* só como cor de categoria (tipo Produto), não é a marca */ --azul-claro: #EAF0FF; --ciano: #19C8F0; --agua: #19D3F5; --agua-escura: #0AA6C9; --laranja: #FF7A1A; --laranja-fundo: #FFF1E6; --marca: linear-gradient(135deg, #1D3BFF 0%, #1D6BFF 48%, #19D3F5 100%); --fundo: #F4F6FB; --fundo-2: #ECEFF7; --superficie: #FFFFFF; --borda: #E3E7F1; --borda-forte: #CBD2E2; --ok: #12B886; --ok-fundo: #E6F8F1; --ok-texto: #067A57; --atencao: #F59E0B; --atencao-fundo: #FEF4E2; --atencao-texto: #B45309; --critico: #EF4444; --critico-fundo: #FDECEC; --critico-texto: #B91C1C; --info: #1D5BFF; --info-fundo: #EAF0FF; --info-texto: #1446D6; --raio: 14px; --raio-p: 10px; --raio-g: 20px; --sombra-1: 0 1px 2px rgba(11, 16, 32, .05), 0 1px 3px rgba(11, 16, 32, .04); --sombra-2: 0 4px 16px -4px rgba(11, 16, 32, .10), 0 2px 4px rgba(11, 16, 32, .04); --sombra-3: 0 24px 48px -12px rgba(11, 16, 32, .28); --anel-foco: 0 0 0 3px rgba(29, 91, 255, .22); --fonte-titulo: 'Sora', system-ui, sans-serif; --fonte: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; --lateral: 256px; --topo: 68px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte); font-size: 14.5px; line-height: 1.5; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; font-feature-settings: 'tnum' 1, 'cv11' 1; } img, svg { max-width: 100%; display: block; } a { color: var(--azul); text-decoration: none; } a:hover { color: var(--azul-escuro); } h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--tinta); margin: 0; letter-spacing: -.02em; line-height: 1.2; } p { margin: 0; } button { font: inherit; cursor: pointer; } [hidden] { display: none !important; } ::selection { background: rgba(29, 91, 255, .18); } :focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: 6px; } .num { font-variant-numeric: tabular-nums; } .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ============================================================ Estrutura do app */ .app { min-height: 100vh; } .lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 40; background: var(--marinho); color: #C9D4E5; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.04); } .lateral::before { /* brilho da marca no topo */ content: ''; position: absolute; inset: 0 0 auto 0; height: 220px; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(29, 91, 255,.22), transparent 60%); } .lateral-topo { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; } .lateral-logo { display: flex; align-items: center; gap: 10px; } .lateral-logo img { height: 34px; width: auto; } .logo-texto { font-family: var(--fonte-titulo); font-weight: 800; font-size: 21px; letter-spacing: -.035em; color: #fff; line-height: 1; } .logo-texto b { font-weight: 800; background: linear-gradient(90deg, #3D7BFF, #19D3F5); -webkit-background-clip: text; background-clip: text; color: transparent; } .lateral-fechar { display: none; background: none; border: 0; color: #fff; font-size: 20px; } .empresa-cartao { position: relative; margin: 4px 14px 10px; padding: 11px 12px; display: flex; gap: 11px; align-items: center; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; } .empresa-avatar { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; color: #fff; background: var(--marca); } .empresa-dados { min-width: 0; display: flex; flex-direction: column; } .empresa-dados strong { color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empresa-dados small { color: #8CA0BD; font-size: 11.5px; } .menu { position: relative; flex: 1; overflow-y: auto; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: #24385A transparent; } .menu-grupo { margin: 16px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5E7394; } .menu-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; color: #B7C4D8; border-radius: 10px; font-weight: 600; font-size: 13.8px; transition: background .15s, color .15s; } .menu-item i { width: 18px; text-align: center; font-size: 14.5px; color: #7188AA; transition: color .15s; } .menu-item:hover { background: rgba(255,255,255,.05); color: #fff; } .menu-item:hover i { color: #CFE0FA; } .menu-item.ativo { background: linear-gradient(90deg, rgba(29, 91, 255,.28), rgba(29, 91, 255,.06)); color: #fff; } .menu-item.ativo i { color: var(--agua); } .menu-item.ativo::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marca); } .menu-rotulo { flex: 1; } .menu-selo { font-size: 10.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--critico); color: #fff; } .menu-selo.selo-plano { background: rgba(255,255,255,.08); color: #8CA0BD; font-size: 10px; } .menu-item.sem-plano { opacity: .62; } .lateral-rodape { position: relative; padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11.5px; color: #5E7394; display: flex; justify-content: space-between; align-items: center; } .lateral-rodape strong { color: #8CA0BD; font-weight: 600; } .lateral-veu { display: none; } .principal { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; } .topo { position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(243, 246, 251, .86); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; } .topo.rolado { border-bottom-color: var(--borda); background: rgba(255,255,255,.9); } .topo-titulo { min-width: 0; flex: 1; } .topo-titulo small { display: block; font-size: 11.5px; color: var(--suave); font-weight: 600; } .topo-titulo strong { display: block; font-family: var(--fonte-titulo); font-size: 18px; color: var(--tinta); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topo-acoes { display: flex; align-items: center; gap: 8px; } .busca-rapida { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; width: 280px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 11px; color: var(--apagado); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; } .busca-rapida:hover { border-color: var(--borda-forte); } .busca-rapida span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .busca-rapida kbd { font-family: var(--fonte); font-size: 11px; font-weight: 700; color: var(--suave); background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px; } .topo-icone { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); font-size: 15px; } .topo-icone:hover { border-color: var(--borda-forte); color: var(--tinta); } .topo-icone .ponto { position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--critico); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--superficie); } .usuario-menu { position: relative; } .usuario-botao { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; color: var(--texto); } .usuario-botao:hover { border-color: var(--borda-forte); } .avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--marinho); color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: 12px; flex: none; } .avatar-cor { background: var(--marca); } .avatar-g { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; } .usuario-nome { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .usuario-nome strong { font-size: 13px; color: var(--tinta); } .usuario-nome small { font-size: 11px; color: var(--suave); } .dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-3); padding: 6px; z-index: 60; animation: surgir .16s ease-out; } .dropdown-cabecalho { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; } .dropdown-cabecalho strong { display: block; color: var(--tinta); font-size: 14px; } .dropdown-cabecalho small { color: var(--suave); font-size: 12px; } .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: none; color: var(--texto); font-weight: 600; font-size: 13.5px; text-align: left; } .dropdown-item i { width: 18px; color: var(--suave); text-align: center; } .dropdown-item:hover { background: var(--fundo); color: var(--tinta); } .dropdown-perigo:hover { background: var(--critico-fundo); color: var(--critico-texto); } .dropdown-perigo:hover i { color: var(--critico-texto); } .dropdown form { margin: 0; } .conteudo { flex: 1; width: 100%; max-width: 1720px; margin: 0 auto; padding: 22px 28px 48px; } .conteudo > .cabecalho-pagina, .conteudo > section, .conteudo > .grade, .conteudo > .cartao { animation: subir .38s cubic-bezier(.2,.8,.2,1) both; } .conteudo > :nth-child(2) { animation-delay: .04s; } .conteudo > :nth-child(3) { animation-delay: .08s; } .conteudo > :nth-child(4) { animation-delay: .12s; } @keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Faixas de aviso (suporte, teste) */ .faixa { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; } .faixa i { font-size: 16px; } .faixa strong { color: inherit; } .faixa-suporte { background: #FFF7E6; color: #8A4B00; border: 1px solid #FAD89A; } .faixa-suporte form { margin-left: auto; } .faixa-teste { background: var(--marinho); color: #D6E2F5; } .faixa-teste i { color: var(--agua); } .faixa-teste .faixa-acao { margin-left: auto; color: #fff; font-weight: 700; white-space: nowrap; } .faixa-teste:hover { color: #fff; } /* ============================================================ Cabeçalho de página */ .cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .cabecalho-pagina h1 { font-size: 26px; font-weight: 700; } .cabecalho-pagina p { color: var(--suave); margin-top: 4px; max-width: 680px; } .cabecalho-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sobretitulo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin-bottom: 6px; } /* ============================================================ Botões */ .btn { --b-fundo: var(--superficie); --b-cor: var(--tinta); --b-borda: var(--borda); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--b-borda); background: var(--b-fundo); color: var(--b-cor); font-weight: 700; font-size: 13.5px; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; text-decoration: none; } .btn:hover { border-color: var(--borda-forte); color: var(--b-cor); } .btn:active { transform: translateY(1px); } .btn i { font-size: 13px; } .btn-primario { --b-fundo: var(--azul); --b-cor: #fff; --b-borda: var(--azul); box-shadow: 0 6px 16px -6px rgba(29, 91, 255,.55); } .btn-primario:hover { --b-fundo: var(--azul-escuro); --b-borda: var(--azul-escuro); } .btn-escuro { --b-fundo: var(--marinho); --b-cor: #fff; --b-borda: var(--marinho); } .btn-escuro:hover { --b-fundo: var(--marinho-3); --b-borda: var(--marinho-3); } .btn-perigo { --b-fundo: var(--critico); --b-cor: #fff; --b-borda: var(--critico); } .btn-perigo:hover { --b-fundo: #DC2626; --b-borda: #DC2626; } .btn-fantasma { --b-fundo: transparent; --b-borda: transparent; --b-cor: var(--texto); } .btn-fantasma:hover { --b-fundo: var(--fundo-2); } .btn-pequeno { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; } .btn-grande { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 13px; } .btn-bloco { width: 100%; } .btn-icone { width: 36px; height: 36px; padding: 0; border-radius: 10px; } .btn[aria-busy="true"] { pointer-events: none; opacity: .72; } .btn[aria-busy="true"]::after { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* ============================================================ Cartões */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); } .cartao-corpo { padding: 20px; } .cartao-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; } .cartao-cabecalho h2, .cartao-cabecalho h3 { font-size: 15.5px; font-weight: 700; } .cartao-cabecalho p { color: var(--suave); font-size: 12.5px; margin-top: 2px; } .cartao-cabecalho .link-mais { font-size: 12.5px; font-weight: 700; white-space: nowrap; } .cartao-rodape { padding: 12px 20px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--suave); } .grade { display: grid; gap: 16px; margin-bottom: 16px; } .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grade-principal { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } .grade-lateral { grid-template-columns: minmax(0, 1fr) 360px; } /* KPI */ .kpi { position: relative; padding: 18px 18px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 128px; } .kpi-topo { display: flex; align-items: center; gap: 10px; color: var(--suave); font-size: 12.5px; font-weight: 700; } .kpi-icone { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--azul-claro); color: var(--azul); flex: none; } .kpi-icone.agua { background: #E3FBF6; color: var(--agua-escura); } .kpi-icone.roxo { background: #F0EBFE; color: #7C3AED; } .kpi-icone.laranja { background: var(--atencao-fundo); color: var(--atencao-texto); } .kpi-icone.vermelho { background: var(--critico-fundo); color: var(--critico-texto); } .kpi-valor { font-family: var(--fonte-titulo); font-size: 27px; font-weight: 700; color: var(--tinta); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-valor small { font-size: 14px; font-weight: 600; color: var(--suave); letter-spacing: 0; margin-left: 2px; } .kpi-rodape { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); margin-top: auto; } .kpi-sparkline { position: absolute; right: 14px; bottom: 14px; width: 96px; height: 34px; opacity: .95; } .delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 11.5px; padding: 2px 7px; border-radius: 99px; } .delta-bom { background: var(--ok-fundo); color: var(--ok-texto); } .delta-ruim { background: var(--critico-fundo); color: var(--critico-texto); } .delta-neutro { background: var(--fundo-2); color: var(--suave); } /* Selos de estado */ .selo { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .selo-ok { background: var(--ok-fundo); color: var(--ok-texto); } .selo-info { background: var(--info-fundo); color: var(--info-texto); } .selo-atencao { background: var(--atencao-fundo); color: var(--atencao-texto); } .selo-critico { background: var(--critico-fundo); color: var(--critico-texto); } .selo-neutro { background: var(--fundo-2); color: var(--texto); } .selo-apagado { background: var(--fundo-2); color: var(--apagado); } .selo-sem-ponto::before { display: none; } /* Placa Mercosul — a assinatura visual do CiclaCRM */ /* ============================================================ Tabelas */ .tabela-caixa { overflow-x: auto; } .tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .tabela th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 12px 14px; border-bottom: 1px solid var(--borda); background: #FAFBFD; white-space: nowrap; position: sticky; top: 0; } .tabela td { padding: 16px 16px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; } .tabela tbody tr { transition: background .12s; } .tabela tbody tr:hover { background: #F8FAFE; } .tabela tbody tr:last-child td { border-bottom: 0; } .tabela .direita { text-align: right; } .tabela .centro { text-align: center; } .tabela .fraco { color: var(--suave); font-size: 12.5px; } .tabela tr.destaque { animation: piscar 2.4s ease-out; } .tabela tr.com-alerta td:first-child { box-shadow: inset 3px 0 0 var(--atencao); } @keyframes piscar { 0%, 30% { background: #FFF6D8; } 100% { background: transparent; } } .celula-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; } .celula-pessoa small { display: block; color: var(--suave); font-size: 12px; } .celula-pessoa strong { display: block; color: var(--tinta); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acoes-linha { display: flex; gap: 4px; justify-content: flex-end; } .acoes-linha .btn:not(.btn-pequeno) { width: 32px; height: 32px; padding: 0; border-color: transparent; background: transparent; color: var(--suave); } .acoes-linha .btn-pequeno { white-space: nowrap; } .btn-pequeno.btn-icone { width: 32px; height: 32px; padding: 0; } .acoes-linha .btn:not(.btn-pequeno):hover { background: var(--fundo-2); color: var(--tinta); } /* ============================================================ Formulários */ .campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .campo-rotulo { font-size: 12.5px; font-weight: 700; color: var(--tinta); display: flex; justify-content: space-between; gap: 8px; } .campo-rotulo small { font-weight: 600; color: var(--apagado); } .campo-dica { font-size: 12px; color: var(--suave); } .campo-caixa { position: relative; display: flex; align-items: center; } .campo-caixa > i { position: absolute; left: 13px; color: var(--apagado); font-size: 14px; pointer-events: none; } .campo-caixa > i ~ input, .campo-caixa > i ~ select { padding-left: 38px !important; } .campo-caixa .sufixo { position: absolute; right: 12px; color: var(--apagado); font-size: 12.5px; font-weight: 700; pointer-events: none; } .campo-acao { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--suave); border-radius: 8px; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { width: 100%; height: 42px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 10px; transition: border-color .15s, box-shadow .15s; font-variant-numeric: tabular-nums; } textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; } select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } input:hover, select:hover, textarea:hover { border-color: #AEBBCD; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: var(--anel-foco); } input::placeholder, textarea::placeholder { color: var(--apagado); } input[readonly] { background: var(--fundo); } .campos { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .campos > * { grid-column: span 12; } .c-6 { grid-column: span 6 !important; } .c-4 { grid-column: span 4 !important; } .c-3 { grid-column: span 3 !important; } .c-8 { grid-column: span 8 !important; } .c-9 { grid-column: span 9 !important; } .c-1 { grid-column: span 1 !important; } .c-2 { grid-column: span 2 !important; } .c-5 { grid-column: span 5 !important; } .c-7 { grid-column: span 7 !important; } .secao-form { grid-column: span 12; margin: 8px 0 -2px; padding-top: 12px; border-top: 1px dashed var(--borda); font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700; color: var(--tinta); display: flex; align-items: center; gap: 8px; } .secao-form i { color: var(--azul); } .secao-form small { margin-left: auto; font-family: var(--fonte); font-size: 11px; font-weight: 600; color: var(--apagado); } .chave { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 11px; background: var(--superficie); } .chave input { position: absolute; opacity: 0; pointer-events: none; } .chave-trilho { width: 38px; height: 22px; border-radius: 99px; background: var(--borda-forte); position: relative; flex: none; transition: background .18s; } .chave-trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; } .chave input:checked + .chave-trilho { background: var(--azul); } .chave input:checked + .chave-trilho::after { transform: translateX(16px); } .chave input:focus-visible + .chave-trilho { box-shadow: var(--anel-foco); } .chave-texto strong { display: block; font-size: 13.5px; color: var(--tinta); } .chave-texto small { display: block; font-size: 12px; color: var(--suave); } .segmentado { display: inline-flex; padding: 3px; gap: 2px; background: var(--fundo-2); border-radius: 11px; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } /* no celular rola de lado em vez de alargar a página */ .segmentado a, .segmentado button, .segmentado label { height: 32px; padding: 0 13px; border-radius: 9px; border: 0; background: none; color: var(--suave); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } .segmentado a:hover, .segmentado button:hover { color: var(--tinta); } .segmentado .ativo, .segmentado input:checked + span { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1); } .segmentado label { padding: 0; } .segmentado label span { height: 32px; padding: 0 13px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; } .segmentado input { position: absolute; opacity: 0; pointer-events: none; } .barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .barra-filtros .campo-caixa { flex: 1; min-width: 200px; max-width: 360px; } .barra-filtros select { width: auto; min-width: 150px; } /* Alertas inline */ .alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; font-size: 13.5px; margin-bottom: 14px; } .alerta i { margin-top: 2px; } .alerta-erro { background: var(--critico-fundo); color: var(--critico-texto); } .alerta-aviso { background: var(--atencao-fundo); color: var(--atencao-texto); } .alerta-info { background: var(--info-fundo); color: var(--info-texto); } .alerta-ok { background: var(--ok-fundo); color: var(--ok-texto); } /* Vazio */ .vazio { text-align: center; padding: 48px 20px; color: var(--suave); } .vazio-icone { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; background: var(--azul-claro); color: var(--azul); } .vazio h3 { font-size: 16px; margin-bottom: 6px; } .vazio p { max-width: 420px; margin: 0 auto 16px; } /* ============================================================ Modais */ dialog.modal { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 24px); width: 620px; max-height: calc(100dvh - 24px); overflow: visible; color: inherit; } dialog.modal-g { width: 820px; } dialog.modal-p { width: 440px; } dialog.modal::backdrop { background: rgba(8, 17, 32, .55); backdrop-filter: blur(3px); animation: aparecer .2s; } dialog.modal[open] { animation: modal-entrar .24s cubic-bezier(.2,.9,.3,1.2); } @keyframes modal-entrar { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes aparecer { from { opacity: 0; } } .modal-caixa { background: var(--superficie); border-radius: var(--raio-g); box-shadow: var(--sombra-3); display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; } .modal-caixa > form { display: flex; flex-direction: column; min-height: 0; flex: 1; } .modal-cabecalho { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borda); } .modal-cabecalho h2 { font-size: 17px; flex: 1; } .modal-cabecalho .kpi-icone { width: 38px; height: 38px; border-radius: 11px; } .modal-fechar { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--fundo); color: var(--suave); } .modal-fechar:hover { background: var(--fundo-2); color: var(--tinta); } .modal-corpo { padding: 20px 22px; overflow-y: auto; min-height: 0; flex: 1; } .modal-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--borda); background: #FAFBFD; } .confirmacao .modal-corpo { text-align: center; padding: 28px 24px 18px; } .confirmacao-icone { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: var(--critico-fundo); color: var(--critico); } .confirmacao-icone.info { background: var(--info-fundo); color: var(--azul); } .confirmacao h2 { font-size: 18px; margin-bottom: 6px; } .confirmacao p { color: var(--suave); } .confirmacao .modal-rodape { justify-content: center; } /* ============================================================ Toasts */ .toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); } .toasts[popover] { inset: auto 20px 20px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; } dialog .toasts[popover], dialog .toasts { inset: 20px 20px auto auto; } /* com modal aberto: no alto, longe do botão Salvar */ .toast { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 16px; border-radius: 14px; background: var(--marinho); color: #D6E2F5; box-shadow: var(--sombra-3); overflow: hidden; animation: toast-entrar .3s cubic-bezier(.2,.9,.3,1.2); } .toast.saindo { animation: toast-sair .3s forwards; } @keyframes toast-entrar { from { opacity: 0; transform: translateX(30px); } } @keyframes toast-sair { to { opacity: 0; transform: translateX(30px); } } .toast-icone { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 13px; } .toast-sucesso .toast-icone { background: rgba(16,185,129,.18); color: #34D399; } .toast-erro .toast-icone { background: rgba(239,68,68,.18); color: #F87171; } .toast-aviso .toast-icone { background: rgba(245,158,11,.18); color: #FBBF24; } .toast-info .toast-icone { background: rgba(25,211,245,.16); color: var(--agua); } .toast-corpo { flex: 1; font-size: 13.5px; } .toast-corpo strong { display: block; color: #fff; font-size: 14px; margin-bottom: 1px; } .toast-fechar { background: none; border: 0; color: #7188AA; padding: 2px; } .toast-tempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--marca); transform-origin: left; animation: toast-tempo linear forwards; } @keyframes toast-tempo { to { transform: scaleX(0); } } /* ============================================================ Abas */ .abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; } .abas::-webkit-scrollbar { display: none; } .abas a, .abas button { position: relative; padding: 11px 14px; font-weight: 700; font-size: 13.5px; color: var(--suave); background: none; border: 0; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; } .abas a:hover, .abas button:hover { color: var(--tinta); } .abas .ativo { color: var(--azul); } .abas .ativo::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--azul); } .abas .contador-aba { font-size: 11px; background: var(--fundo-2); color: var(--suave); padding: 1px 7px; border-radius: 99px; } /* ============================================================ Gráficos (CiclaCRMGraf) */ .grafico { position: relative; width: 100%; } .grafico svg { overflow: visible; width: 100%; height: auto; } .grafico .eixo text { font-size: 11px; fill: var(--apagado); font-family: var(--fonte); font-variant-numeric: tabular-nums; } .grafico .grade-linha { stroke: #EDF1F7; stroke-width: 1; } .grafico .barra { transition: opacity .15s; } .grafico.focando .barra:not(.foco) { opacity: .35; } .grafico-dica { position: absolute; pointer-events: none; z-index: 5; min-width: 150px; padding: 10px 12px; border-radius: 11px; background: var(--marinho); color: #D6E2F5; font-size: 12.5px; box-shadow: var(--sombra-3); transform: translate(-50%, calc(-100% - 12px)); transition: opacity .12s; white-space: nowrap; } .grafico-dica strong { display: block; color: #fff; font-family: var(--fonte-titulo); font-size: 13px; margin-bottom: 4px; } .grafico-dica .linha-dica { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .grafico-dica .linha-dica span:first-child { display: inline-flex; align-items: center; gap: 6px; } .grafico-dica i.cor { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .grafico-dica b { color: #fff; font-variant-numeric: tabular-nums; } .legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--texto); font-weight: 600; } .legenda span { display: inline-flex; align-items: center; gap: 7px; } .legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .rosca-caixa { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; } .rosca-lista { display: flex; flex-direction: column; gap: 10px; } .rosca-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 10px; align-items: center; font-size: 13px; } .rosca-item i { width: 10px; height: 10px; border-radius: 3px; } .rosca-item strong { color: var(--tinta); font-variant-numeric: tabular-nums; } .rosca-item small { color: var(--suave); margin-left: 6px; } /* Barra de progresso fina */ .progresso { height: 6px; border-radius: 99px; background: var(--fundo-2); overflow: hidden; } .progresso > span { display: block; height: 100%; border-radius: inherit; background: var(--azul); } .progresso.ok > span { background: var(--ok); } .progresso.atencao > span { background: var(--atencao); } .progresso.critico > span { background: var(--critico); } /* Anel de nota (saúde) */ .anel { --nota: 0; --cor: var(--ok); position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(var(--cor) calc(var(--nota) * 1%), #E9EEF5 0); display: grid; place-items: center; } .anel::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--superficie); } .anel span { position: relative; font-family: var(--fonte-titulo); font-weight: 700; font-size: 18px; color: var(--tinta); } .anel.atencao { --cor: var(--atencao); } .anel.critica { --cor: var(--critico); } .anel-g { width: 132px; height: 132px; } .anel-g::before { inset: 11px; } .anel-g span { font-size: 36px; } /* Lista de alertas */ .lista-alertas { display: flex; flex-direction: column; } .alerta-linha { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid #EEF2F7; color: var(--texto); } .alerta-linha:first-child { border-top: 0; } a.alerta-linha:hover { background: #F8FAFE; color: var(--texto); } .alerta-linha .kpi-icone { width: 36px; height: 36px; border-radius: 10px; } .alerta-linha strong { display: block; color: var(--tinta); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alerta-linha small { display: block; color: var(--suave); font-size: 12.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nivel-critico .kpi-icone { background: var(--critico-fundo); color: var(--critico); } .nivel-atencao .kpi-icone { background: var(--atencao-fundo); color: var(--atencao-texto); } .nivel-info .kpi-icone { background: var(--info-fundo); color: var(--azul); } /* ============================================================ Paleta de comandos (Ctrl+K) */ .paleta { width: 640px; } .paleta .modal-caixa { border-radius: 18px; } .paleta-busca { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); } .paleta-busca i { color: var(--azul); font-size: 17px; } .paleta-busca input { border: 0 !important; box-shadow: none !important; height: 32px !important; padding: 0 !important; font-size: 16px !important; } .paleta-lista { max-height: min(420px, 60dvh); overflow-y: auto; padding: 8px; } .paleta-grupo { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); padding: 10px 10px 4px; } .paleta-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--texto); font-weight: 600; cursor: pointer; } .paleta-item i { width: 30px; height: 30px; border-radius: 9px; background: var(--fundo); display: grid; place-items: center; color: var(--suave); font-size: 13px; } .paleta-item small { margin-left: auto; color: var(--apagado); font-weight: 600; font-size: 12px; } .paleta-item.ativo { background: var(--azul-claro); color: var(--tinta); } .paleta-item.ativo i { background: var(--azul); color: #fff; } .paleta-rodape { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--borda); font-size: 11.5px; color: var(--apagado); } .paleta-rodape kbd { font-family: var(--fonte); font-weight: 700; background: var(--fundo); border: 1px solid var(--borda); border-radius: 5px; padding: 0 5px; margin-right: 4px; } /* Barra inferior (celular) */ .barra-inferior { display: none; } /* ============================================================ Responsivo */ @media (max-width: 1280px) { .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-lateral { grid-template-columns: minmax(0, 1fr); } .busca-rapida { width: 220px; } } @media (max-width: 1100px) { .grade-principal, .grade-3 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { .lateral { transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: var(--sombra-3); } .menu-aberto .lateral { transform: none; } .menu-aberto .lateral-veu { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(8,17,32,.5); } .lateral-fechar { display: block; } .principal { margin-left: 0; } .topo { padding: 0 16px; gap: 10px; } .topo-menu { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta); font-size: 16px; } .busca-rapida { width: 40px; padding: 0; justify-content: center; } .busca-rapida span, .busca-rapida kbd { display: none; } .so-desktop { display: none !important; } .conteudo { padding: 16px 16px 96px; } .barra-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; height: 62px; background: var(--marinho); border-radius: 18px; box-shadow: var(--sombra-3); padding: 0 6px; } .barra-inferior a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #8CA0BD; font-size: 10.5px; font-weight: 700; } .barra-inferior a i { font-size: 17px; } .barra-inferior a.ativo { color: #fff; } .barra-inferior a.ativo i { color: var(--agua); } .barra-inferior .mais { position: relative; } .barra-inferior .mais span.bola { width: 50px; height: 50px; margin-top: -26px; border-radius: 16px; background: var(--marca); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(29, 91, 255,.7); border: 4px solid var(--fundo); } .barra-inferior .mais span.bola i { color: #fff; font-size: 18px; } .toasts, .toasts[popover] { bottom: 84px; right: 16px; } dialog .toasts[popover], dialog .toasts { inset: 12px 12px auto 12px; width: auto; } } @media (max-width: 720px) { .grade-2, .grade-4 { grid-template-columns: minmax(0, 1fr); } .grade-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grade-kpis .kpi { min-height: 112px; padding: 14px; } .grade-kpis .kpi-valor { font-size: 21px; } .grade-kpis .kpi-sparkline { display: none; } .cabecalho-pagina h1 { font-size: 22px; } .cabecalho-acoes { width: 100%; } .cabecalho-acoes .btn { flex: 1; } .campos .c-6, .campos .c-4, .campos .c-3, .campos .c-8, .campos .c-9, .campos .c-1, .campos .c-2, .campos .c-5, .campos .c-7 { grid-column: span 12 !important; } .campos .c-m-6 { grid-column: span 6 !important; } .rosca-caixa { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rosca-lista { width: 100%; } dialog.modal { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; } .modal-caixa { border-radius: 20px 20px 0 0; max-height: 94dvh; } .modal-rodape { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .modal-rodape .btn { flex: 1; } .tabela-responsiva thead { display: none; } .tabela-responsiva, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td { display: block; width: 100%; } .tabela-responsiva tr { padding: 12px 14px; border-bottom: 1px solid var(--borda); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; } .tabela-responsiva td { padding: 0; border: 0; } .tabela-responsiva td[data-rotulo]::before { content: attr(data-rotulo) ': '; color: var(--apagado); font-size: 11.5px; font-weight: 700; } .tabela-responsiva td.principal-celula { grid-column: 1 / -1; } .tabela-responsiva td.direita { text-align: left; } .tabela-responsiva .acoes-linha { justify-content: flex-start; } .barra-filtros .campo-caixa { max-width: none; min-width: 100%; } .barra-filtros select { flex: 1; } } /* Ranking (CiclaCRMGraf) */ .ranking { display: flex; flex-direction: column; gap: 4px; } .ranking-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 8px 10px; border-radius: 10px; color: var(--texto); } a.ranking-linha:hover { background: #F6F9FE; color: var(--texto); } .ranking-nome { font-weight: 700; color: var(--tinta); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ranking-nome small { color: var(--suave); font-weight: 600; margin-left: 8px; font-size: 12px; } .ranking-valor { font-weight: 800; color: var(--tinta); font-size: 13px; font-variant-numeric: tabular-nums; } .ranking-barra { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--fundo-2); overflow: hidden; } .ranking-barra span { display: block; height: 100%; border-radius: inherit; transition: width .7s cubic-bezier(.2,.8,.2,1); } @keyframes cicla-crescer { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes cicla-tracar { to { stroke-dashoffset: 0; } } @keyframes cicla-aparecer { from { opacity: 0; } to { opacity: 1; } } .tabela td.num, .tabela td.direita { white-space: nowrap; } .com-rosca { container-type: inline-size; } .rosca-item > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rosca-item > span:last-child { white-space: nowrap; text-align: right; } @container (max-width: 470px) { .rosca-caixa { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rosca-lista { width: 100%; } } /* ============================================================ Menu recolhível (hambúrguer) */ .topo-menu { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta); font-size: 16px; flex: none; } .topo-menu:hover { border-color: var(--borda-forte); } .lateral, .principal { transition: width .25s cubic-bezier(.2,.8,.2,1), margin-left .25s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1); } @media (min-width: 961px) { .menu-recolhido { --lateral: 76px; } .menu-recolhido .lateral-topo { justify-content: center; padding: 20px 0 14px; } .menu-recolhido .logo-texto { display: none; } .menu-recolhido .lateral-logo img { height: 30px; } .menu-recolhido .empresa-cartao { justify-content: center; margin: 4px 10px 10px; padding: 8px 0; background: none; border-color: transparent; } .menu-recolhido .empresa-dados, .menu-recolhido .menu-rotulo, .menu-recolhido .lateral-rodape span { display: none; } .menu-recolhido .menu { padding: 4px 10px 16px; } .menu-recolhido .menu-grupo { margin: 12px 0 6px; height: 1px; background: rgba(255,255,255,.08); font-size: 0; } .menu-recolhido .menu-item { justify-content: center; padding: 11px 0; } .menu-recolhido .menu-item i { width: auto; font-size: 16px; } .menu-recolhido .menu-item .menu-selo { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; } .menu-recolhido .menu-item .menu-selo.selo-plano { display: none; } .menu-recolhido .menu-item.ativo::before { left: -10px; } .menu-recolhido .lateral-rodape { justify-content: center; padding: 14px 0 18px; } } @media (min-width: 961px) { .menu-recolhido .lateral-rodape a { font-size: 0; } .menu-recolhido .lateral-rodape a i { font-size: 17px; } } @media print { .lateral, .topo, .barra-inferior, .cabecalho-acoes, .barra-filtros, .acoes-linha, .toasts, .faixa { display: none !important; } .principal { margin: 0 !important; } .conteudo { padding: 0 !important; max-width: none; } body { background: #fff; } .cartao { box-shadow: none; break-inside: avoid; } } /* ===================================================================== SELETOR (assets/js/seletor.js, portado do Moova) — aparência de todos os