/* Painel Zero21 — paleta da marca: apenas preto e branco (cinzas neutros de apoio), agora em versão escura (fundo escuro, texto claro). Cores semânticas de status (ok/erro/aviso/info) são a única exceção, mantidas discretas — servem pra sinalizar risco/erro de verdade, não são "cor de marca". --accent-ink é a cor de texto/ícone usada EM CIMA de --accent (aqui preto, já que --accent é branco no escuro — se trocar de tema nunca hardcodar "white"/"black" direto nos componentes, usar esse token). Tipografia única (Inter). Não alterna com o tema do sistema. */ :root { --bg: #1a1a1e; --surface: #212126; --surface-2: #28282e; --surface-3: #313138; --text: #f2f2f4; --muted: #a1a1a9; --border: #35353c; --border-soft: #2b2b31; --accent: #ffffff; --accent-2: #ffffff; --accent-ink: #1a1a1e; --accent-soft: rgba(255,255,255,0.08); --gold: #ffffff; --gold-soft: rgba(255,255,255,0.08); --ok: #22c55e; --ok-soft: rgba(34,197,94,0.16); --off: #71717a; --off-soft: rgba(255,255,255,0.06); --erro: #f87171; --erro-soft: rgba(248,113,113,0.16); --info: #60a5fa; --info-soft: rgba(96,165,250,0.16); --warn: #fbbf24; --warn-soft: rgba(251,191,36,0.16); --masthead-bg: #1a1a1e; --masthead-text: #a1a1a9; --masthead-text-active: #ffffff; --masthead-hover-bg: rgba(255,255,255,0.07); --masthead-border: #35353c; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -15px rgba(0,0,0,0.6); --radius: 14px; --font-serif: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; /* escala de espaçamento — usar nos componentes novos; retrofit do legado é trabalho à parte (valores atuais não caem certinho nesses múltiplos). */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; /* escala tipográfica — nomeia o que já era usado na prática, sem mudar tamanho */ --fs-title: 26px; /* título de página (h1) */ --fs-section: 15px; /* título de seção (h2) */ --fs-value: 30px; /* valor numérico grande de card */ --fs-body: 14px; /* texto padrão */ --fs-label: 14.5px; /* label de card / item de lista */ --fs-hint: 13px; /* texto de apoio secundário */ } /* Tema claro (fundo cinza claro, não branco puro) — mesma paleta preto/branco, só inverte qual dos dois é o fundo. Cores semânticas recalibradas mais escuras/ saturadas aqui (o contrário do que foi feito pro escuro) pra continuar legíveis como texto em cima de fundo claro. Preferência por usuário, ver app/db.py (usuarios.tema) e templates/base.html ([data-theme] na tag ). */ :root[data-theme="claro"] { --bg: #f0f0f2; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #ebebef; --text: #17171a; --muted: #6b6b74; --border: #dcdce1; --border-soft: #e8e8ec; --accent: #0b0b0c; --accent-2: #0b0b0c; --accent-ink: #ffffff; --accent-soft: rgba(11,11,12,0.06); --gold: #0b0b0c; --gold-soft: rgba(11,11,12,0.06); --ok: #16a34a; --ok-soft: rgba(22,163,74,0.14); --off: #8a8a93; --off-soft: rgba(11,11,12,0.05); --erro: #dc2626; --erro-soft: rgba(220,38,38,0.12); --info: #2563eb; --info-soft: rgba(37,99,235,0.12); --warn: #b45309; --warn-soft: rgba(180,83,9,0.12); --masthead-bg: #f0f0f2; --masthead-text: #6b6b74; --masthead-text-active: #0b0b0c; --masthead-hover-bg: rgba(11,11,12,0.05); --masthead-border: #dcdce1; --shadow: 0 1px 2px rgba(11,11,12,0.05), 0 10px 30px -15px rgba(11,11,12,0.18); color-scheme: light; } /* logo é um wordmark preto no arquivo — só precisa do filtro de inversão quando a superfície embaixo dele é escura. */ :root[data-theme="claro"] .brand-logo { filter: none; } * { box-sizing: border-box; } ::selection { background: var(--accent); color: var(--accent-ink); } a:focus-visible, button:focus-visible, .card:focus-visible, .btn:focus-visible, .masthead nav a:focus-visible, .tabs a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- controles nativos com a cara do tema (não do SO) ---------- */ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: inherit; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 30px 8px 10px; font-size: 13.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239a9aa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; } select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } select::-ms-expand { display: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* ---------- layout ---------- */ .shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); } .masthead { display: flex; align-items: center; gap: 28px; background: var(--masthead-bg); color: var(--masthead-text); padding: 16px 44px; border-bottom: 3px solid var(--masthead-border); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand-logo { height: 26px; width: auto; display: block; filter: invert(1) brightness(1.6); /* wordmark é preto no arquivo; masthead é escuro, inverte pra claro */ } /* atributo hidden sempre esconde — sem isso, qualquer regra com display (flex, -webkit-box…) o anula */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .masthead nav { display: flex; align-items: center; gap: 22px; flex: 1; flex-wrap: wrap; } .masthead nav a { color: var(--masthead-text); text-decoration: none; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .masthead nav a:hover { color: var(--masthead-text-active); } .masthead nav a.active { color: var(--masthead-text-active); border-bottom-color: var(--gold); } .nav-dropdown { position: relative; } .nav-dropdown summary { color: var(--masthead-text); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 2px; border-bottom: 2px solid transparent; cursor: pointer; list-style: none; transition: color 0.15s, border-color 0.15s; } .nav-dropdown summary::-webkit-details-marker { display: none; } .nav-dropdown summary::marker { display: none; content: ""; } .nav-dropdown summary:hover { color: var(--masthead-text-active); } .nav-dropdown summary.active { color: var(--masthead-text-active); border-bottom-color: var(--gold); } .nav-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; z-index: 5; } .nav-dropdown-menu a { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); text-decoration: none; text-transform: none; letter-spacing: normal; font-weight: 500; border-bottom: none; } .nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--accent); } .nav-dropdown-menu a.active { color: var(--accent); font-weight: 600; } .masthead-user { position: relative; flex-shrink: 0; } .masthead-user summary { display: flex; align-items: center; gap: 9px; padding: 6px 8px; cursor: pointer; border-radius: 20px; list-style: none; } .masthead-user summary::-webkit-details-marker { display: none; } .masthead-user summary::marker { display: none; content: ""; } .masthead-user summary:hover { background: var(--masthead-hover-bg); } .masthead-user[open] summary { background: var(--masthead-hover-bg); } .masthead-user .who-nome { font-size: 13px; font-weight: 600; color: var(--masthead-text-active); } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--masthead-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .user-menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; } .user-menu a { padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); text-decoration: none; } .user-menu a:hover { background: var(--surface-2); color: var(--accent); } .user-menu form { margin: 0; } .user-menu button { width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--text); background: none; border: none; cursor: pointer; font-family: inherit; } .user-menu button:hover { background: var(--surface-2); color: var(--accent); } main { flex: 1; padding: 40px 48px; max-width: 1080px; width: 100%; margin: 0 auto; } .page-header { margin-bottom: 28px; } .page-header h1 { margin: 0 0 6px; font-family: var(--font-serif); font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; color: var(--accent); } .page-sub { margin: 0; color: var(--muted); font-size: 14.5px; } .back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 13.5px; margin-bottom: 14px; } .back-link:hover { color: var(--accent); } /* ---------- cards ---------- */ .cards { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .cards:last-child { margin-bottom: 0; } .card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; min-width: 220px; flex: 1; text-decoration: none; color: var(--text); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } a.card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 16px 32px -16px rgba(10,10,10,0.18); } /* muted = calmo, sem dado ainda (não é problema). erro = precisa de atenção, não esmaece */ .card.muted { opacity: 0.7; } .card.erro { border-left: 3px solid var(--erro); padding-left: 19px; } .card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .card.erro .card-icon { background: var(--erro); } .card-icon svg { width: 19px; height: 19px; } .card-value { font-family: var(--font-serif); font-size: var(--fs-value); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .card-label { font-weight: 600; font-size: var(--fs-label); } .card-hint { color: var(--muted); font-size: var(--fs-hint); } /* estado de problema: número e hint saltam aos olhos, não é só mais um texto cinza */ .card-value.erro { color: var(--erro); } .card-hint.erro { color: var(--erro); font-weight: 700; } .card-hint.warn { color: var(--warn); font-weight: 700; } /* ---------- table ---------- */ .tabela-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .tabela { width: 100%; border-collapse: collapse; } .tabela th a.th-sort { color: var(--muted); text-decoration: none; } .tabela th a.th-sort:hover { color: var(--text); } .tabela th a.th-sort.active { color: var(--accent); } .tabela th { text-align: left; padding: 13px 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); } .tabela td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 14px; } .tabela tr:last-child td { border-bottom: none; } .tabela tr:hover td { background: var(--surface-2); } /* ---------- barra de magnitude (ex.: gasto por cliente em Métricas) ---------- */ .valor-num { font-variant-numeric: tabular-nums; font-weight: 600; } .bar-cell { display: flex; align-items: center; gap: 10px; min-width: 160px; } .bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; background: var(--accent); min-width: 3px; } .bar-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 42px; text-align: right; flex-shrink: 0; } .bar-fill--ok { background: var(--ok); } /* ---------- aba Acessos (checklist de login/senha por plataforma) ---------- */ .acessos-aviso { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; } .info-tip { cursor: help; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; } .acessos-progresso { display: flex; align-items: center; gap: 14px; max-width: 420px; } .acessos-progresso-texto { font-size: 13.5px; color: var(--muted); white-space: nowrap; } .acesso-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .acesso-card-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; font-weight: 600; font-size: 14px; } .acesso-card-summary::-webkit-details-marker { display: none; } .acesso-card-summary > span:first-child { display: flex; align-items: center; gap: 8px; } .acesso-card-summary > span:first-child::before { content: '▸'; color: var(--muted); } .acesso-card[open] .acesso-card-summary > span:first-child::before { content: '▾'; } .acesso-card-body { padding: 4px 18px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.off { background: var(--off-soft); color: var(--muted); } .badge.erro { background: var(--erro-soft); color: var(--erro); margin-left: 6px; } .badge.info { background: var(--info-soft); color: var(--info); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .muted { color: var(--muted); } .erro { color: var(--erro); } .aviso { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; color: var(--muted); line-height: 1.6; font-size: 14.5px; } .aviso-erro { border-color: var(--erro); color: var(--erro); } .aviso-ok { border-color: var(--ok); color: var(--text); } .aviso-ok strong { color: var(--ok); } /* ---------- lists ---------- */ .lista-clientes, .lista-arquivos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .lista-clientes li, .lista-arquivos li { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lista-clientes a, .lista-arquivos a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14.5px; } .lista-clientes a:hover, .lista-arquivos a:hover { color: var(--accent); } /* ---------- login ---------- */ body.guest { background: var(--bg); } .guest-main { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; } .login-box { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 56px -28px rgba(10,10,10,0.18); padding: 44px 36px; display: flex; flex-direction: column; align-items: center; text-align: center; } .login-logo { width: 100%; max-width: 230px; height: auto; margin-bottom: 22px; filter: invert(1) brightness(1.6); } .login-box .subtitle { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; line-height: 1.55; } .login-box form { display: flex; flex-direction: column; gap: 15px; width: 100%; } .login-box label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 7px; text-align: left; letter-spacing: 0.01em; } .login-box input { padding: 12px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .login-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .login-box button { padding: 12px; border-radius: 10px; border: none; background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; font-size: 14px; font-family: inherit; margin-top: 6px; transition: filter 0.15s, transform 0.15s; } .login-box button:hover { opacity: 0.82; transform: translateY(-1px); } .login-box button:active { transform: translateY(0); } .login-box .erro { color: var(--erro); font-size: 13px; margin: 0 0 4px; } /* ---------- cadastro público (formulário com mais campos que o login) ---------- */ .login-box--wide { max-width: 560px; text-align: left; } .login-box--wide .subtitle { text-align: center; } .login-box--wide .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .login-box--wide .form-row .field { flex: 1; min-width: 200px; } .login-box--wide .field { margin-bottom: 15px; } .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .acessos-details { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); } .acessos-details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; } .acessos-details[open] summary { margin-bottom: 10px; } .acesso-linha-cadastro { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .acesso-linha-cadastro:first-of-type { border-top: none; padding-top: 4px; } .acesso-titulo { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 0; } /* ---------- checklist de acessos (senhas) ---------- */ .senha-wrap { display: flex; gap: 8px; align-items: center; } .senha-wrap input { flex: 1; } .senha-revelada { font-family: monospace; word-break: break-all; } /* ---------- responsive ---------- */ /* ---------- toolbar / filtros ---------- */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .toolbar select, .toolbar input[type="text"] { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13.5px; font-family: inherit; } .toolbar .spacer { flex: 1; } .toolbar-select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; font-family: inherit; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; line-height: 1.2; transition: filter 0.15s, border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s; } .btn-primary { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover { opacity: 0.82; } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn-ghost.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; } .btn-perigo { background: transparent; border-color: var(--erro); color: var(--erro); } .btn-perigo:hover { background: var(--erro-soft); } /* ---------- formulários ---------- */ .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; max-width: 560px; margin-bottom: 28px; } .form-card:last-child { margin-bottom: 0; } .form-card.wide { max-width: none; } .form-card.center { text-align: center; margin: 60px auto; } .form-card--perigo { border-color: var(--erro); } /* ---------- utilitários ---------- */ .mt-0 { margin-top: 0; } .mt-sm { margin-top: 10px; } .mt-lg { margin-top: 32px; } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: 10px; } .mb-md { margin-bottom: 16px; } .text-sm { font-size: 12.5px; } .text-md { font-size: 16px; } .text-heading-sm { font-size: 14px; margin: 0 0 12px; font-weight: 600; } .divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; } .row-link { cursor: pointer; } .field--grow { flex: 2; } .page-header--row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .inline-form { display: flex; gap: 6px; align-items: center; } .inline-form select { padding: 5px 26px 5px 9px; font-size: 12.5px; border-radius: 7px; } /* ---------- checklist de status (Tráfego Orgânico / Contas & Ferramentas) ---------- */ .status-select { font-weight: 600; font-size: 12.5px; padding: 6px 24px 6px 10px; border-radius: 7px; } .status-select--pendente { background-color: var(--warn-soft); color: var(--warn); border-color: transparent; } .status-select--feito { background-color: var(--ok-soft); color: var(--ok); border-color: transparent; } .status-select--na { background-color: var(--off-soft); color: var(--muted); border-color: transparent; } .form-grid { display: flex; flex-direction: column; gap: 16px; } .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .form-row .field { flex: 1; min-width: 180px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12.5px; font-weight: 600; color: var(--muted); } .field input, .field select, .field textarea { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .campo-vazio { border-style: dashed !important; border-color: var(--warn) !important; } .campo-vazio::placeholder { color: var(--warn); font-style: italic; opacity: 0.9; } .field-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; } .field-checks label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text); } .form-actions { display: flex; gap: 10px; margin-top: 4px; } .senha-gerada { background: var(--ok-soft); color: var(--ok); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; margin-bottom: 20px; line-height: 1.6; } .senha-gerada code { background: rgba(255,255,255,0.12); padding: 2px 7px; border-radius: 6px; font-weight: 700; } /* ---------- kanban ---------- */ .kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; } .kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); min-width: 250px; flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .kanban-col h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 2px 4px 2px; display: flex; justify-content: space-between; } .kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow); padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; } a.kanban-card { text-decoration: none; color: inherit; transition: border-color 0.15s; } a.kanban-card:hover { border-color: var(--accent); } a.kanban-card.atrasada { border-left: 3px solid var(--erro); padding-left: 12px; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; } .vencimento { font-size: 12px; font-weight: 600; color: var(--muted); } .vencimento.erro { color: var(--erro); } .kanban-card .titulo { font-weight: 600; font-size: 13.5px; } .kanban-card .meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); } .kanban-card .mover { margin-top: 2px; } .kanban-card .mover select { width: 100%; padding: 6px 26px 6px 10px; border-radius: 7px; border: 1px solid var(--border); background-color: var(--surface-2); color: var(--muted); font-size: 12px; font-family: inherit; background-position: right 8px center; background-size: 12px; } .kanban-card .mover select:hover { border-color: var(--accent); color: var(--text); } /* ---------- seções âncora (detalhe de cliente / config tabs) ---------- */ .tabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; } .tabs a { padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--text); } .tabs a.active { color: var(--accent); border-bottom-color: var(--accent); } .section { margin-bottom: 30px; } .section h2 { font-family: var(--font-serif); font-size: var(--fs-section); font-weight: 700; margin: 0 0 12px; color: var(--accent); } /* ---------- atenção / minhas tarefas (dashboard) ---------- */ .attn-list, .mini-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .attn-secao { margin-bottom: 26px; } .attn-item { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; font-size: 13.5px; } /* nível erro/warn não depende só do pontinho — a borda esquerda + fundo leve fazem o item saltar aos olhos numa varredura rápida, sem precisar ler o texto */ .attn-item.erro { border-color: var(--erro); background: var(--erro-soft); border-left: 3px solid var(--erro); padding-left: 16px; } .attn-item.warn { border-color: var(--warn); background: var(--warn-soft); border-left: 3px solid var(--warn); padding-left: 16px; } .attn-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .attn-dot.erro { background: var(--erro); } .attn-dot.warn { background: var(--warn); } .attn-dot.info { background: var(--info); } .attn-dot.ok { background: var(--ok); } .attn-cliente { font-weight: 700; } /*
não pode herdar o display:flex de .attn-item — senão o (cabeçalho) e o