/* ZeraCRM — design system. Zero dependência, zero CDN. Identidade oficial da Zera: azul-aço #5B7A99 sobre ink #1F2A37, tipografia Inter. Tema por data-theme no ; o script em js/tema-inicial.js aplica antes do primeiro paint (não pode ser inline: a CSP bloqueia). */ /* Inter self-hosted — o mesmo arquivo do site da Zera. Sem Google Fonts: a CSP não permite origem externa, e um woff2 de 48KB cobre os pesos 100-900. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/assets/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* ---- marca Zera (oficial, do tailwind.config do site) ---- */ --zera: #5b7a99; /* azul-aço, cor da marca */ --zera-escuro: #47617b; /* hover / pressionado */ --zera-claro: #8aa2b8; --ink: #1f2a37; /* cinza-azulado escuro */ --zera-suave: rgba(91, 122, 153, 0.12); --zera-brilho: rgba(91, 122, 153, 0.28); /* superfícies */ --bg: #f4f6f8; --bg-elevado: #ffffff; --bg-afundado: #eef2f6; --bg-hover: rgba(31, 42, 55, 0.04); --bg-ativo: rgba(91, 122, 153, 0.1); --vidro: rgba(255, 255, 255, 0.72); /* texto */ --txt: #1f2a37; --txt-suave: #4b5563; --txt-fraco: #667382; /* 4.84:1 sobre branco — o #8794a5 anterior dava 3.08 */ --txt-invertido: #ffffff; /* linhas */ --linha: #dfe4ea; --linha-forte: #c6cdd6; /* semânticos */ /* Duas variáveis por estado: a -forte é para TEXTO sobre o fundo claro do próprio estado (todas passam 4.5:1); a normal é para barra, borda e ícone, onde 3:1 basta. Usar a cor de marca como cor de texto reprovava tudo: ok 2.87, alerta 2.56, erro 3.76. */ --ok: #10a37f; --ok-forte: #0a7a5f; --ok-bg: rgba(16, 163, 127, 0.12); --alerta: #d98324; --alerta-forte: #8a5210; --alerta-bg: rgba(217, 131, 36, 0.14); --erro: #d64545; --erro-forte: #a52d2d; --erro-bg: rgba(214, 69, 69, 0.12); --info: #5b7a99; --info-forte: #3f5771; --info-bg: rgba(91, 122, 153, 0.14); --raio: 12px; --raio-p: 8px; --raio-g: 18px; --sombra: 0 1px 2px rgba(31, 42, 55, 0.06), 0 4px 14px rgba(31, 42, 55, 0.07); --sombra-forte: 0 10px 38px rgba(31, 42, 55, 0.18); --sombra-marca: 0 6px 20px rgba(91, 122, 153, 0.28); /* curvas: rápido para feedback, suave para entrada */ --t-rapido: 120ms cubic-bezier(0.4, 0, 0.2, 1); --transicao: 180ms cubic-bezier(0.22, 0.61, 0.36, 1); --t-entrada: 260ms cubic-bezier(0.16, 1, 0.3, 1); --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fonte-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, Consolas, monospace; --topo-altura: 58px; --lateral-largura: 226px; } html[data-theme="dark"] { color-scheme: dark; --zera: #7fa3c4; /* clareado para passar contraste no escuro */ --zera-escuro: #5b7a99; --zera-claro: #a8c2db; --zera-suave: rgba(127, 163, 196, 0.16); --zera-brilho: rgba(127, 163, 196, 0.34); --bg: #0f151c; --bg-elevado: #161e27; --bg-afundado: #0b1116; --bg-hover: rgba(255, 255, 255, 0.06); --bg-ativo: rgba(127, 163, 196, 0.16); --vidro: rgba(22, 30, 39, 0.72); --txt: #e6edf3; --txt-suave: #9fb0c0; --txt-fraco: #8a9aab; /* 4.9:1 sobre o fundo escuro */ --txt-invertido: #0f151c; --linha: #24303c; --linha-forte: #35434f; /* no escuro a própria cor já é clara o bastante: -forte aponta para ela */ --ok: #2ea88a; --ok-forte: #5cc9ae; --ok-bg: rgba(46, 168, 138, 0.16); --alerta: #e0a458; --alerta-forte: #ecbe83; --alerta-bg: rgba(224, 164, 88, 0.16); --erro: #e5716f; --erro-forte: #f0918f; --erro-bg: rgba(229, 113, 111, 0.16); --info: #7fa3c4; --info-forte: #a3bfd8; --info-bg: rgba(127, 163, 196, 0.16); --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.32); --sombra-forte: 0 12px 40px rgba(0, 0, 0, 0.6); --sombra-marca: 0 6px 22px rgba(91, 122, 153, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--fonte); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01'; } body.sem-scroll { overflow: hidden; } a { color: var(--zera); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--zera); outline-offset: 2px; border-radius: var(--raio-p); } :focus:not(:focus-visible) { outline: none; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 6px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--txt-fraco); } ::selection { background: var(--zera-suave); color: var(--txt); } /* ---------------------------------------------------------------- tipografia */ h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 650; line-height: 1.22; letter-spacing: -0.018em; } h1 { font-size: 23px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 13px; } p { margin: 0 0 10px; } small, .peq { font-size: 12px; color: var(--txt-suave); } .mono { font-family: var(--fonte-mono); font-size: 12px; } .suave { color: var(--txt-suave); } .fraco { color: var(--txt-fraco); } .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------------- animações Todas curtas (<=300ms) e discretas. Este CRM é ferramenta de trabalho: a animação existe para explicar de onde a coisa veio, não para impressionar quem olha 8 horas por dia. */ @keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes surgirEscala { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } @keyframes brilhoBarra { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulsoMarca { 0%, 100% { box-shadow: 0 0 0 0 var(--zera-brilho); } 50% { box-shadow: 0 0 0 6px transparent; } } @keyframes girar { to { transform: rotate(360deg); } } .anim-surgir { animation: surgir var(--t-entrada) both; } .anim-escala { animation: surgirEscala var(--t-entrada) both; } /* escalona a entrada de listas — o olho acompanha a ordem em vez de tudo aparecer junto */ .anim-lista > * { animation: surgir var(--t-entrada) both; } .anim-lista > *:nth-child(1) { animation-delay: 20ms; } .anim-lista > *:nth-child(2) { animation-delay: 45ms; } .anim-lista > *:nth-child(3) { animation-delay: 70ms; } .anim-lista > *:nth-child(4) { animation-delay: 95ms; } .anim-lista > *:nth-child(5) { animation-delay: 120ms; } .anim-lista > *:nth-child(n+6) { animation-delay: 140ms; } /* -------------------------------------------------------------------- botões */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--bg-elevado); color: var(--txt); font: inherit; font-weight: 550; font-size: 13px; cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--t-rapido), border-color var(--t-rapido), transform var(--t-rapido), box-shadow var(--t-rapido); } .btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--txt-fraco); } .btn:active:not(:disabled) { transform: translateY(1px) scale(0.995); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primario { /* começa no --zera-escuro, não no claro: com o topo em #8aa2b8 o texto branco ficava em 4.48:1 — reprovava por 0,02. Assim o pior ponto dá 6.4:1. */ background: linear-gradient(180deg, var(--zera-escuro) 0%, #3f5771 100%); border-color: #35495f; color: #fff; box-shadow: var(--sombra-marca); } .btn-primario:hover:not(:disabled) { filter: brightness(1.12); border-color: #35495f; } /* no escuro o --zera-escuro é o azul-aço original: texto branco continua legível */ html[data-theme="dark"] .btn-primario { background: linear-gradient(180deg, var(--zera-escuro) 0%, #3f5771 100%); color: #fff; } .btn-perigo { background: var(--erro); border-color: var(--erro); color: #fff; } .btn-perigo:hover:not(:disabled) { filter: brightness(1.08); } .btn-fantasma { background: transparent; border-color: transparent; box-shadow: none; } .btn-fantasma:hover:not(:disabled) { background: var(--bg-hover); border-color: transparent; } .btn-p { min-height: 28px; padding: 0 9px; font-size: 12px; } .btn-g { min-height: 44px; padding: 0 22px; font-size: 14px; } .btn-icone { padding: 0; width: 36px; } .btn-icone.btn-p { width: 28px; } .btn.carregando { pointer-events: none; color: transparent; } .btn.carregando::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: girar 0.6s linear infinite; color: var(--txt); } .btn-primario.carregando::after { color: #fff; } /* ------------------------------------------------------------------ campos */ .campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .campo > label { font-size: 12px; font-weight: 600; color: var(--txt-suave); } .campo .dica { font-size: 11px; color: var(--txt-fraco); } .campo .erro-msg { font-size: 12px; color: var(--erro); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"], input[type="search"], select, textarea { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: var(--bg-elevado); color: var(--txt); font: inherit; font-size: 13px; transition: border-color var(--t-rapido), box-shadow var(--t-rapido); } textarea { min-height: 80px; resize: vertical; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--zera); box-shadow: 0 0 0 3px var(--zera-suave); } input:disabled, select:disabled, textarea:disabled { background: var(--bg-afundado); color: var(--txt-fraco); cursor: not-allowed; } input.invalido, select.invalido, textarea.invalido { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-bg); } input::placeholder, textarea::placeholder { color: var(--txt-fraco); } select { appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238794a5' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .checkbox input { width: 16px; height: 16px; min-height: 0; accent-color: var(--zera); cursor: pointer; } /* ------------------------------------------------------------------ cartões */ .cartao { background: var(--bg-elevado); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao); } .cartao-corpo { padding: 16px; } .cartao-topo { padding: 13px 16px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------------------------------------------------------------- etiquetas */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; background: var(--bg-afundado); color: var(--txt-suave); white-space: nowrap; } .tag-ok { background: var(--ok-bg); color: var(--ok-forte); } .tag-alerta { background: var(--alerta-bg); color: var(--alerta-forte); } .tag-erro { background: var(--erro-bg); color: var(--erro-forte); } .tag-info { background: var(--info-bg); color: var(--info-forte); } .tag-marca { background: var(--zera-suave); color: var(--info-forte); } html[data-theme="dark"] .tag-marca { color: var(--zera-claro); } /* ------------------------------------------------------------------ tabelas */ .tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .tabela th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.045em; color: var(--txt-fraco); border-bottom: 1px solid var(--linha); background: var(--bg-elevado); position: sticky; top: 0; z-index: 2; white-space: nowrap; } .tabela th.ordenavel { cursor: pointer; user-select: none; transition: color var(--t-rapido); } .tabela th.ordenavel:hover { color: var(--zera); } .tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; } .tabela tbody tr { transition: background var(--t-rapido); } .tabela tbody tr:hover { background: var(--bg-hover); } .tabela tbody tr.selecionada { background: var(--bg-ativo); } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------- vazio */ .vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--txt-suave); animation: surgir var(--t-entrada) both; } .vazio .icone { font-size: 30px; opacity: 0.55; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--zera-suave); color: var(--zera); margin-bottom: 2px; } .vazio h3 { margin: 0; color: var(--txt); } /* --------------------------------------------------------------- skeleton */ .skeleton { background: linear-gradient(90deg, var(--bg-afundado) 25%, var(--bg-hover) 50%, var(--bg-afundado) 75%); background-size: 200% 100%; animation: brilhoBarra 1.3s ease-in-out infinite; border-radius: var(--raio-p); color: transparent !important; } /* ------------------------------------------------------------------ toasts */ #toasts { position: fixed; bottom: 20px; right: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; max-width: 400px; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--raio); background: var(--bg-elevado); border: 1px solid var(--linha); border-left: 3px solid var(--info); box-shadow: var(--sombra-forte); font-size: 13px; animation: entrarToast 220ms cubic-bezier(0.16, 1, 0.3, 1); } .toast.saindo { animation: sairToast 160ms ease-in forwards; } .toast-ok { border-left-color: var(--ok); } .toast-erro { border-left-color: var(--erro); } .toast-alerta { border-left-color: var(--alerta); } .toast .texto { flex: 1; } .toast .acao { background: none; border: none; color: var(--zera); font: inherit; font-weight: 650; cursor: pointer; padding: 0 2px; } @keyframes entrarToast { from { opacity: 0; transform: translateX(28px) scale(0.97); } } @keyframes sairToast { to { opacity: 0; transform: translateX(28px); } } /* ------------------------------------------------------------------ modais */ .modal-fundo { position: fixed; inset: 0; z-index: 8000; background: rgba(10, 16, 22, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: aparecer 150ms ease-out; } .modal { background: var(--bg-elevado); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra-forte); width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; animation: subirModal 240ms cubic-bezier(0.16, 1, 0.3, 1); } .modal.largo { max-width: 760px; } .modal.extra-largo { max-width: 1040px; } .modal-topo { padding: 16px 20px; border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modal-topo h2 { margin: 0; font-size: 16px; } .modal-corpo { padding: 20px; overflow-y: auto; flex: 1; } .modal-rodape { padding: 14px 20px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 8px; } @keyframes aparecer { from { opacity: 0; } } @keyframes subirModal { from { opacity: 0; transform: translateY(16px) scale(0.98); } } /* ------------------------------------------------------------------- utils */ .linha-flex { display: flex; align-items: center; gap: 8px; } .entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crescer { flex: 1; min-width: 0; } .grade { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .oculto { display: none !important; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } @media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } #toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* Quem pediu menos movimento recebe menos movimento — inclusive o hero 3D, que o próprio JS desliga ao ler esta preferência. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }