/* ===================================================================== Central de Tarefas — Design System (temas claro + escuro) Tokens em :root (claro) e :root[data-tema="escuro"] (escuro). O tema é aplicado por JS via atributo data-tema no . ===================================================================== */ :root { /* Superfícies */ --bg: #f5f6f8; --bg-2: #ffffff; --bg-3: #eef0f4; --input-bg: #ffffff; --borda: #e4e7ec; --borda-forte: #d5dae2; /* Texto */ --texto: #101828; --texto-2: #5a6474; --texto-3: #98a1b0; /* Marca / acento */ --primaria: #4f46e5; --primaria-hover: #4338ca; --acento: #f59e0b; --acento-hover: #d97706; --acento-txt: #3d2c07; /* Semânticas (tons legíveis sobre fundo claro) */ --verde: #15a34a; --amarelo: #c2870a; --vermelho: #dc2626; --laranja: #ea580c; --roxo: #7c3aed; --ciano: #0e8eaa; /* Sombra / elevação */ --sombra-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --sombra-elev: 0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06); --sombra: 0 16px 40px rgba(16,24,40,.18); --anel: 0 0 0 3px color-mix(in srgb, var(--primaria) 22%, transparent); --raio: 14px; --raio-sm: 9px; --raio-pill: 999px; --fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --transicao: 150ms cubic-bezier(.4,0,.2,1); } :root[data-tema="escuro"] { /* Paleta "GX": fundo quase preto azulado + accent blurple, roxo e ciano neon */ --bg: #0a0b11; --bg-2: #12141d; --bg-3: #1b1e2b; --input-bg: #0d0f17; --borda: #232637; --borda-forte: #333852; --texto: #e8eaf3; --texto-2: #99a0ba; --texto-3: #626983; --primaria: #6473ff; /* blurple elétrico (accent principal) */ --primaria-hover: #8590ff; --acento: #f6b64b; /* âmbar quente como CTA/alerta (contraste com o frio) */ --acento-hover: #ffca6e; --acento-txt: #241804; --verde: #34d399; --amarelo: #fbbf24; --vermelho: #f87171; --laranja: #fb923c; --roxo: #a78bff; /* roxo neon */ --ciano: #2dd4f7; /* ciano neon */ --sombra-card: 0 1px 2px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.5); --sombra-elev: 0 8px 22px rgba(0,0,0,.52), 0 2px 6px rgba(0,0,0,.42); --sombra: 0 24px 54px rgba(0,0,0,.66); } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--fonte); background: var(--bg); color: var(--texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--transicao), color var(--transicao); } /* Ícones SVG (inline) */ .ic { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; } /* ===== Layout ===== */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 244px; flex-shrink: 0; background: var(--bg-2); border-right: 1px solid var(--borda); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; transition: width .22s cubic-bezier(.4,0,.2,1); } .logo { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; } .logo-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--primaria), var(--roxo)); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--primaria) 45%, transparent); } .logo-icon .ic { width: 22px; height: 22px; stroke-width: 2.6; } .logo-text { font-size: 13px; color: var(--texto-2); line-height: 1.2; letter-spacing: .2px; } .logo-text strong { color: var(--texto); font-size: 15.5px; font-weight: 700; } .nav { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--texto-2); text-decoration: none; font-weight: 550; font-size: 14.5px; position: relative; transition: background var(--transicao), color var(--transicao); } .nav-item:hover { background: var(--bg-3); color: var(--texto); } .nav-item.ativo { background: color-mix(in srgb, var(--primaria) 14%, transparent); color: var(--primaria); } .nav-item.ativo::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--primaria); } .nav-icon { display: grid; place-items: center; width: 22px; } .nav-icon .ic { width: 19px; height: 19px; } .sidebar-footer { padding: 14px; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--borda); } /* ===== Sidebar retrátil (desktop): trilho de ícones que expande no hover ===== */ @media (min-width: 901px) { /* Modo "auto": trilho fixo de 76px; o conteúdo reserva esse espaço. */ :root[data-sidebar="auto"] .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: 76px; z-index: 70; overflow: hidden; } :root[data-sidebar="auto"] .main-wrap { margin-left: 76px; } :root[data-sidebar="auto"] .logo { justify-content: center; } :root[data-sidebar="auto"] .logo-text, :root[data-sidebar="auto"] .rotulo, :root[data-sidebar="auto"] .atalhos-hint { display: none; } :root[data-sidebar="auto"] .nav-item { justify-content: center; gap: 0; } :root[data-sidebar="auto"] .nav-item.ativo::before { left: 0; height: 24px; } :root[data-sidebar="auto"] .sidebar-footer .btn { padding-left: 0; padding-right: 0; } /* Hover: expande SOBRE o conteúdo (sem reflow). */ :root[data-sidebar="auto"] .sidebar:hover { width: 244px; box-shadow: var(--sombra); } :root[data-sidebar="auto"] .sidebar:hover .logo { justify-content: flex-start; } :root[data-sidebar="auto"] .sidebar:hover .logo-text, :root[data-sidebar="auto"] .sidebar:hover .rotulo { display: inline; } :root[data-sidebar="auto"] .sidebar:hover .atalhos-hint { display: block; } :root[data-sidebar="auto"] .sidebar:hover .nav-item { justify-content: flex-start; gap: 12px; } :root[data-sidebar="auto"] .sidebar:hover .sidebar-footer .btn { padding-left: 16px; padding-right: 16px; } } .main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; padding: 12px 24px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 40; } .topbar-title { font-size: 19px; font-weight: 750; white-space: nowrap; letter-spacing: -.2px; } .topbar-busca { flex: 1; max-width: 440px; margin-left: auto; position: relative; } .topbar-busca .busca-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; display: grid; } .topbar-busca .busca-ic .ic { width: 17px; height: 17px; } .topbar-busca input { width: 100%; padding-left: 38px; } .menu-toggle { display: inline-grid; } .btn-rapida-top { display: none; } .tema-toggle { color: var(--texto-2); } .tema-toggle:hover { color: var(--texto); } .conteudo { padding: 24px; max-width: 1320px; width: 100%; margin: 0 auto; padding-bottom: 96px; } /* ===== Botões ===== */ .btn { border: 1px solid transparent; border-radius: var(--raio-sm); padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn .ic { width: 17px; height: 17px; } .btn-primary { background: var(--primaria); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primaria) 35%, transparent); } .btn-primary:hover { background: var(--primaria-hover); } .btn-accent { background: var(--acento); color: var(--acento-txt); font-weight: 700; } .btn-accent:hover { background: var(--acento-hover); } .btn-ghost { background: var(--bg-2); color: var(--texto); border-color: var(--borda-forte); } .btn-ghost:hover { background: var(--bg-3); border-color: var(--texto-3); } .btn-perigo { background: color-mix(in srgb, var(--vermelho) 14%, transparent); color: var(--vermelho); } .btn-perigo:hover { background: color-mix(in srgb, var(--vermelho) 26%, transparent); } .btn-block { width: 100%; } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-icon { background: none; border: none; color: var(--texto); cursor: pointer; padding: 8px; border-radius: var(--raio-sm); display: inline-grid; place-items: center; transition: background var(--transicao), color var(--transicao); } .btn-icon .ic { width: 20px; height: 20px; } .btn-icon:hover { background: var(--bg-3); } /* ===== Formulários ===== */ input, select, textarea { background: var(--input-bg); border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); color: var(--texto); padding: 10px 12px; font-size: 14px; font-family: inherit; transition: border-color var(--transicao), box-shadow var(--transicao); } input::placeholder, textarea::placeholder { color: var(--texto-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaria); box-shadow: var(--anel); } textarea { resize: vertical; min-height: 72px; } label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); display: block; margin-bottom: 6px; } .campo { margin-bottom: 14px; } .campos-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .campos-linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .campo input, .campo select, .campo textarea { width: 100%; } /* ===== Cards / grid resumo ===== */ .grid-resumo { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-bottom: 24px; } .card-kpi { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; cursor: pointer; box-shadow: var(--sombra-card); transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .card-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kpi-cor, var(--primaria)); opacity: .9; } .card-kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-elev); border-color: var(--borda-forte); } .card-kpi .kpi-num { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .card-kpi .kpi-rotulo { font-size: 12.5px; color: var(--texto-2); margin-top: 4px; font-weight: 500; } .kpi-vermelho { --kpi-cor: var(--vermelho); } .kpi-vermelho .kpi-num { color: var(--vermelho); } .kpi-amarelo { --kpi-cor: var(--amarelo); } .kpi-amarelo .kpi-num { color: var(--amarelo); } .kpi-verde { --kpi-cor: var(--verde); } .kpi-verde .kpi-num { color: var(--verde); } .kpi-azul { --kpi-cor: var(--primaria); } .kpi-azul .kpi-num { color: var(--primaria); } .kpi-roxo { --kpi-cor: var(--roxo); } .kpi-roxo .kpi-num { color: var(--roxo); } .kpi-ciano { --kpi-cor: var(--ciano); } .kpi-ciano .kpi-num { color: var(--ciano); } .painel { background: var(--bg-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; margin-bottom: 18px; box-shadow: var(--sombra-card); } .painel h3 { font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* ===== Lista de tarefas ===== */ .tarefa-item { display: flex; align-items: flex-start; gap: 13px; background: var(--bg-2); border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio-sm); padding: 13px 15px; margin-bottom: 9px; cursor: pointer; box-shadow: var(--sombra-card); transition: border-color var(--transicao), background var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .tarefa-item:hover { transform: translateX(2px); box-shadow: var(--sombra-elev); } .tarefa-item.sem-verde { border-left-color: var(--verde); } .tarefa-item.sem-amarelo { border-left-color: var(--amarelo); } .tarefa-item.sem-vermelho { border-left-color: var(--vermelho); } .tarefa-item.sem-neutro { border-left-color: var(--texto-3); opacity: .62; } .tarefa-corpo { flex: 1; min-width: 0; } .tarefa-titulo { font-weight: 650; font-size: 14.5px; } .tarefa-titulo .num { color: var(--texto-3); font-weight: 500; font-size: 12.5px; margin-right: 6px; } .tarefa-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-2); margin-top: 7px; } .tarefa-meta .atraso { color: var(--vermelho); font-weight: 700; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: var(--raio-pill); white-space: nowrap; } .badge-critica { background: color-mix(in srgb, var(--vermelho) 16%, transparent); color: var(--vermelho); } .badge-alta { background: color-mix(in srgb, var(--laranja) 16%, transparent); color: var(--laranja); } .badge-media { background: color-mix(in srgb, var(--amarelo) 18%, transparent); color: var(--amarelo); } .badge-baixa { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); } .badge-status { background: var(--bg-3); color: var(--texto-2); border: 1px solid var(--borda); } .badge-nova { background: color-mix(in srgb, var(--primaria) 16%, transparent); color: var(--primaria); } .badge-em_andamento { background: color-mix(in srgb, var(--ciano) 18%, transparent); color: var(--ciano); } .badge-aguardando_terceiros { background: color-mix(in srgb, var(--roxo) 16%, transparent); color: var(--roxo); } .badge-aguardando_aprovacao { background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--acento); } .badge-concluida { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); } .badge-cancelada { background: var(--bg-3); color: var(--texto-2); } /* Semáforo */ .semaforo { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; } .semaforo.verde { background: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 20%, transparent); } .semaforo.amarelo { background: var(--amarelo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amarelo) 20%, transparent); } .semaforo.vermelho { background: var(--vermelho); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vermelho) 22%, transparent); animation: pulsar 1.7s infinite; } .semaforo.neutro { background: var(--texto-3); } @keyframes pulsar { 50% { opacity: .4; } } /* ===== Chips de status (filtros rápidos) ===== */ .chips-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .chip { border: 1px solid var(--borda-forte); background: var(--bg-2); color: var(--texto-2); border-radius: var(--raio-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color var(--transicao), color var(--transicao), background var(--transicao); } .chip:hover { border-color: var(--primaria); color: var(--texto); } .chip-ativo { background: color-mix(in srgb, var(--primaria) 14%, transparent); border-color: var(--primaria); color: var(--primaria); } @media (max-width: 900px) { .chips-status { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .chip { white-space: nowrap; flex-shrink: 0; } } .chip-n { background: var(--bg-3); border-radius: var(--raio-pill); padding: 1px 7px; font-size: 11px; color: var(--texto-2); margin-left: 3px; } .chip-ativo .chip-n { background: color-mix(in srgb, var(--primaria) 25%, transparent); color: var(--primaria); } /* Conclusão rápida (1 clique na lista) */ .check-rapido { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--texto-3); background: transparent; color: transparent; font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; margin-top: 1px; transition: border-color var(--transicao), background var(--transicao), color var(--transicao); display: grid; place-items: center; } .check-rapido:hover { border-color: var(--verde); color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent); } .check-rapido.feito { border-color: var(--verde); background: var(--verde); color: #fff; cursor: default; } /* Prazos em linguagem humana */ .prazo-vencido { color: var(--vermelho); font-weight: 700; } .prazo-hoje { color: var(--amarelo); font-weight: 700; } .prazo-perto { color: var(--texto); } .prazo-neutro { color: var(--texto-2); } .badge-parada { background: color-mix(in srgb, var(--texto-3) 16%, transparent); color: var(--texto-2); border: 1px dashed var(--texto-3); } /* Dica de atalhos */ .atalhos-hint { font-size: 11px; color: var(--texto-3); text-align: center; margin-top: 2px; } .atalhos-hint kbd { background: var(--bg-3); border: 1px solid var(--borda); border-radius: 5px; padding: 1px 5px; font-family: inherit; font-size: 10.5px; } .toast-desfazer { background: none; border: none; cursor: pointer; color: var(--primaria); font-weight: 700; font-size: 13.5px; margin-left: 12px; font-family: inherit; text-decoration: underline; } /* ===== Filtros ===== */ .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; } .filtros select, .filtros input { min-width: 132px; } /* ===== Kanban ===== */ .kanban { display: grid; grid-template-columns: repeat(5, minmax(238px, 1fr)); gap: 14px; align-items: start; overflow: auto; /* o quadro rola por dentro... */ max-height: calc(100dvh - 140px); /* ...deixando os cabeçalhos fixos */ padding-bottom: 12px; } .kanban-coluna { background: var(--bg-2); border: 1px solid var(--borda); border-radius: var(--raio); min-height: 200px; display: flex; flex-direction: column; box-shadow: var(--sombra-card); } .kanban-cabecalho { padding: 13px 15px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 3; background: var(--bg-2); border-radius: var(--raio) var(--raio) 0 0; } .kanban-cabecalho .contagem { background: var(--bg-3); border-radius: var(--raio-pill); padding: 1px 9px; font-size: 11.5px; color: var(--texto-2); } .kanban-corpo { padding: 11px; flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 120px; } .kanban-coluna.arrastando-sobre { outline: 2px dashed var(--primaria); outline-offset: -4px; } .kanban-card { background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 11px 13px; cursor: grab; transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao), opacity var(--transicao); } .kanban-card:hover { border-color: var(--primaria); transform: translateY(-2px); box-shadow: var(--sombra-elev); } .kanban-card.arrastando { opacity: .4; } .kanban-card .kc-titulo { font-size: 13.5px; font-weight: 650; margin-bottom: 7px; } .kanban-card .kc-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11.5px; color: var(--texto-2); } .kanban-card select.mover-mobile { display: none; } /* ===== Tabelas ===== */ .tabela-wrap { overflow-x: auto; } table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tabela th { text-align: left; padding: 10px 12px; color: var(--texto-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--borda-forte); } .tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); } .tabela tbody tr { transition: background var(--transicao); } .tabela tbody tr:hover { background: var(--bg-3); } .tabela .num-col { text-align: right; font-variant-numeric: tabular-nums; } /* Barra de progresso */ .barra { background: var(--bg-3); border-radius: var(--raio-pill); height: 8px; overflow: hidden; min-width: 60px; } .barra > div { height: 100%; border-radius: var(--raio-pill); background: var(--verde); transition: width var(--transicao); } /* ===== Modal ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, #0a0d12 55%, transparent); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(4px); } .modal-overlay[hidden] { display: none; } .modal { background: var(--bg-2); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 24px; animation: surgir .2s cubic-bezier(.4,0,.2,1); } .modal.modal-grande { max-width: 780px; } @keyframes surgir { from { transform: translateY(16px) scale(.99); opacity: 0; } } .modal-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .modal-cabecalho h2 { font-size: 18px; font-weight: 700; letter-spacing: -.2px; } .modal-acoes { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; } .acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--borda); } /* Alertas */ .alerta-item { display: flex; gap: 11px; align-items: center; padding: 12px 15px; border-radius: var(--raio-sm); margin-bottom: 9px; font-size: 14px; font-weight: 550; border: 1px solid transparent; } .alerta-info { background: color-mix(in srgb, var(--primaria) 12%, transparent); color: var(--primaria); border-color: color-mix(in srgb, var(--primaria) 25%, transparent); } .alerta-critico { background: color-mix(in srgb, var(--vermelho) 13%, transparent); color: var(--vermelho); border-color: color-mix(in srgb, var(--vermelho) 26%, transparent); } .alerta-atraso { background: color-mix(in srgb, var(--laranja) 13%, transparent); color: var(--laranja); border-color: color-mix(in srgb, var(--laranja) 26%, transparent); } .alerta-aviso { background: color-mix(in srgb, var(--amarelo) 14%, transparent); color: var(--amarelo); border-color: color-mix(in srgb, var(--amarelo) 28%, transparent); } /* Histórico */ .historico { border-left: 2px solid var(--borda); padding-left: 16px; margin-left: 6px; } .historico-item { position: relative; padding-bottom: 14px; font-size: 13px; } .historico-item::before { content: ''; position: absolute; left: -21.5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--primaria); border: 2px solid var(--bg-2); } .historico-item .h-data { color: var(--texto-3); font-size: 12px; } /* Anexos */ .anexo-item { display: flex; align-items: center; gap: 8px; background: var(--bg-3); border-radius: var(--raio-sm); padding: 8px 12px; margin-bottom: 6px; font-size: 13px; } .anexo-item a { color: var(--primaria); text-decoration: none; flex: 1; word-break: break-all; } .anexo-item a:hover { text-decoration: underline; } /* ===== Etapas do projeto ===== */ .badge-etapa { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .etapa { border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio-sm); padding: 11px 13px; margin-bottom: 8px; background: var(--bg-3); } .etapa-concluida { border-left-color: var(--verde); opacity: .72; } .etapa-em_andamento { border-left-color: var(--acento); border-color: color-mix(in srgb, var(--acento) 40%, var(--borda)); background: color-mix(in srgb, var(--acento) 7%, var(--bg-3)); } .etapa-pendente { border-left-color: var(--texto-3); } .etapa-cab { display: flex; align-items: flex-start; gap: 10px; } .etapa-num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--bg-2); border: 1px solid var(--borda); color: var(--texto-2); } .etapa-concluida .etapa-num { background: color-mix(in srgb, var(--verde) 20%, transparent); color: var(--verde); border-color: var(--verde); } .etapa-em_andamento .etapa-num { background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--acento); border-color: var(--acento); } .etapa-info { flex: 1; min-width: 0; } .etapa-titulo { font-weight: 650; font-size: 14px; cursor: pointer; } .etapa-titulo:hover { color: var(--primaria); } .etapa-concluida .etapa-titulo { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texto-2) 50%, transparent); } .etapa-sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; } .etapa-acoes { display: flex; gap: 3px; flex-shrink: 0; } .btn-mini { background: none; border: 1px solid transparent; color: var(--texto-3); font-size: 12px; cursor: pointer; padding: 4px 7px; border-radius: 6px; display: inline-grid; place-items: center; } .btn-mini .ic { width: 15px; height: 15px; } .btn-mini:hover { background: var(--bg-2); color: var(--texto); border-color: var(--borda); } .btn-mini-perigo:hover { color: var(--vermelho); border-color: var(--vermelho); } .etapa-upds { margin: 8px 0 0 36px; border-left: 2px solid var(--borda); padding-left: 10px; } .etapa-upd { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 2px 0; } .upd-data { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .upd-texto { flex: 1; } .upd-autor { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; white-space: nowrap; } .usuario-select { max-width: 176px; font-size: 13px; padding: 8px 10px; border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda-forte)); } .etapa-upd .btn-mini { opacity: 0; } .etapa-upd:hover .btn-mini { opacity: 1; } .etapa-form-upd { display: flex; gap: 6px; margin: 8px 0 0 36px; } .etapa-form-upd input { flex: 1; padding: 7px 10px; font-size: 13px; } .etapa-form-nova { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .etapa-form-nova input { flex: 2; min-width: 180px; } .etapa-form-nova select { flex: 1; min-width: 140px; } @media (max-width: 900px) { .etapa-upds, .etapa-form-upd { margin-left: 12px; } .etapa-upd .btn-mini { opacity: 1; } } /* Toast */ .toast-container { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: var(--bg-2); border: 1px solid var(--borda-forte); color: var(--texto); border-radius: var(--raio-sm); padding: 12px 20px; font-size: 14px; font-weight: 550; box-shadow: var(--sombra); animation: surgir .2s ease; } .toast-erro { border-color: var(--vermelho); color: var(--vermelho); } .toast-ok { border-color: var(--verde); color: var(--verde); } /* Sugestão tarefa rápida */ .sugestao-box { background: color-mix(in srgb, var(--primaria) 8%, transparent); border: 1px dashed var(--primaria); border-radius: var(--raio-sm); padding: 15px; margin-top: 14px; } .sugestao-box .s-titulo { font-size: 12px; color: var(--primaria); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } /* Vazio */ .vazio { text-align: center; color: var(--texto-3); padding: 44px 20px; font-size: 14px; } .vazio .vazio-icone { font-size: 38px; display: block; margin-bottom: 10px; opacity: .5; } .medalha { font-size: 16px; margin-right: 4px; } /* Bottom nav (mobile) */ .bottom-nav { display: none; } /* ===== Responsivo ===== */ @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1); box-shadow: var(--sombra); } .sidebar.aberta { transform: translateX(0); } .menu-toggle { display: inline-grid; } .btn-rapida-top { display: inline-flex; } .topbar { padding: 10px 15px; gap: 10px; } .topbar-title { font-size: 16px; } .conteudo { padding: 16px; padding-bottom: 96px; } .grid-2col { grid-template-columns: 1fr; } .campos-linha, .campos-linha-3 { grid-template-columns: 1fr; } .grid-resumo { grid-template-columns: repeat(2, 1fr); gap: 10px; } .card-kpi { padding: 14px; } .card-kpi .kpi-num { font-size: 26px; } .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--borda); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); justify-content: space-around; } .bottom-nav .nav-item { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 6px 10px; } .bottom-nav .nav-item.ativo::before { display: none; } .bottom-nav .nav-icon .ic { width: 21px; height: 21px; } .nav-fab { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--primaria), var(--roxo)); color: #fff; border: none; margin-top: -24px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px color-mix(in srgb, var(--primaria) 55%, transparent); } .nav-fab .ic { width: 26px; height: 26px; } .nav-fab-wrap { padding: 0 !important; } .kanban { grid-template-columns: repeat(5, 82vw); } .kanban-card { cursor: default; } .kanban-card select.mover-mobile { display: block; width: 100%; margin-top: 8px; font-size: 12px; padding: 7px 9px; } .modal { padding: 18px; max-height: 88vh; border-radius: 20px 20px 0 0; align-self: end; } .modal-overlay { padding: 0; place-items: end center; } .topbar-busca { max-width: none; } .topbar-busca input { font-size: 16px; } .usuario-select { max-width: 120px; } } @media (max-width: 480px) { .topbar-title { display: none; } } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--texto-3); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ===== Login / primeiro acesso ===== */ .auth-overlay { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: grid; place-items: center; padding: 20px; } .auth-card { width: 100%; max-width: 384px; background: var(--bg-2); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra); padding: 32px 28px; animation: surgir .25s cubic-bezier(.4,0,.2,1); } .auth-logo { display: flex; justify-content: center; margin-bottom: 16px; } .auth-logo-icon { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primaria), var(--roxo)); box-shadow: 0 10px 24px color-mix(in srgb, var(--primaria) 45%, transparent); } .auth-logo-icon .ic { width: 30px; height: 30px; stroke-width: 2.5; } .auth-card h1 { font-size: 21px; text-align: center; font-weight: 750; letter-spacing: -.3px; } .auth-sub { text-align: center; color: var(--texto-2); font-size: 13.5px; margin: 6px 0 20px; } .auth-card .campo input { width: 100%; } .auth-card .btn-block { margin-top: 8px; padding: 11px; font-size: 15px; } .auth-erro { background: color-mix(in srgb, var(--vermelho) 13%, transparent); color: var(--vermelho); border: 1px solid color-mix(in srgb, var(--vermelho) 30%, transparent); padding: 9px 12px; border-radius: var(--raio-sm); font-size: 13px; margin-bottom: 14px; } .auth-ok { background: color-mix(in srgb, var(--verde) 13%, transparent); color: var(--verde); border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent); padding: 9px 12px; border-radius: var(--raio-sm); font-size: 13px; margin-bottom: 14px; } .auth-alt { text-align: center; font-size: 13px; color: var(--texto-2); margin-top: 16px; } .auth-alt a { color: var(--primaria); font-weight: 600; text-decoration: none; } .auth-alt a:hover { text-decoration: underline; } /* Chip do usuário no topo */ .usuario-chip { display: flex; align-items: center; gap: 8px; } .usuario-chip .uc-info { display: flex; flex-direction: column; line-height: 1.15; text-align: right; } .usuario-chip .uc-nome { font-weight: 650; font-size: 13.5px; } .usuario-chip .uc-papel { font-size: 10.5px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .3px; } @media (max-width: 640px) { .usuario-chip .uc-info { display: none; } } a.uc-info { text-decoration: none; color: inherit; cursor: pointer; } a.uc-info:hover .uc-nome { color: var(--primaria); } /* Grade de setores (checkboxes) no formulário de usuário */ .setores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; max-height: 220px; overflow-y: auto; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); padding: 12px; } .chk-setor { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--texto); cursor: pointer; } .chk-setor input { width: auto; } .tag-setor { display: inline-block; background: var(--bg-3); border: 1px solid var(--borda); border-radius: var(--raio-pill); padding: 2px 9px; font-size: 11px; margin: 1px 3px 1px 0; white-space: nowrap; }