@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Identidade visual — INC Empreendimentos Extraída do Brandbook oficial (3629 - Brandbook INC - A4 - Abril - 2025) e dos arquivos vetoriais da logo (INC logotipo.pdf / .eps): Laranja: #FF6000 Preto: #0A0A0A Off-white: #F7F5F2 Branco: #FFFFFF Fonte oficial da marca é a "Primeform Pro" (licenciada); como não temos os arquivos da fonte, usamos aqui a Poppins (Google Fonts), uma geométrica livre com a mesma sensação visual, como substituta próxima. */ :root { --laranja: #FF6000; --laranja-escuro: #D94F00; --preto: #0A0A0A; --offwhite: #F7F5F2; --branco: #FFFFFF; --cinza-borda: #e4e1dc; --cinza-texto: #6b6b6b; --amarelo: #fff3b0; --azul: #cfe2ff; --laranja-claro: #ffe2cc; --verde: #c8f2c8; } * { box-sizing: border-box; } /* Reduz a escala geral da página em ~20% — o sistema tem muita informação em tela, e o usuário confirmou que 80% do tamanho original (testado via zoom do navegador) cabe mais conteúdo sem prejudicar a leitura. */ html { zoom: 80%; } body { font-family: "Poppins", "Segoe UI", Arial, sans-serif; margin: 0; background: var(--offwhite); color: var(--preto); overflow: hidden; /* 125vh, não 100vh: o "zoom: 80%" do não recalcula unidades vh para compensar — 100vh continua se referindo à altura real da janela, então o conteúdo (encolhido para 80%) sobrava um vão vazio embaixo. 125vh = 100vh / 0.8, para preencher a tela de novo depois do zoom. */ height: 125vh; } h1, h2, h3 { font-weight: 600; } /* ---------- SGI shell (sidebar + área do módulo) ---------- */ .sgi-shell { display: flex; height: 125vh; /* ver comentário no `body` sobre zoom + vh */ overflow: hidden; } .sidebar { width: 84px; flex: none; background: var(--preto); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 20px; } .sidebar-marca { display: flex; flex-direction: column; align-items: center; gap: 4px; } .sidebar-marca .logo-marca { height: 26px; width: auto; } .sidebar-marca-texto { font-size: 10px; letter-spacing: 0.12em; opacity: 0.6; } .sidebar-modulos { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; } .sidebar-admin { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; margin-top: auto; } .modulo-item { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 68px; padding: 8px 4px; border-radius: 8px; color: #e8e6e2; text-decoration: none; font-size: 11px; font-weight: 500; } .modulo-item:hover { background: rgba(255,255,255,0.08); } .modulo-item.ativo { background: var(--laranja); color: #fff; font-weight: 600; } .modulo-icone { font-size: 20px; } .modulo-nome { line-height: 1.1; text-align: center; } .modulo-desabilitado { opacity: 0.35; cursor: not-allowed; } .modulo-desabilitado:hover { background: none; } .sgi-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 125vh; /* ver comentário no `body` sobre zoom + vh */ } /* Faixa do SGI: identidade do usuário e ações da conta — igual em qualquer módulo */ .topbar-sgi { display: flex; align-items: center; gap: 24px; background: var(--preto); color: #fff; padding: 10px 24px; flex-wrap: wrap; } .topbar-sgi-espaco { flex: 1; } /* Faixa do módulo: sub-navegação própria de cada módulo (hoje só o GPP) */ .topbar-modulo { display: flex; gap: 4px; background: var(--offwhite); border-bottom: 1px solid var(--cinza-borda); padding: 8px 24px; flex-wrap: wrap; } .topbar-modulo a { color: var(--preto); opacity: 0.7; text-decoration: none; padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; } .topbar-modulo a:hover { background: rgba(0,0,0,0.06); opacity: 1; } .topbar-modulo a.ativo { background: var(--laranja); color: #fff; opacity: 1; font-weight: 600; } .sync-info { font-size: 12px; opacity: 0.65; white-space: nowrap; } .user-info { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; } .user-info .user-nome { font-weight: 600; } .user-info .user-papel { font-size: 11px; text-transform: uppercase; background: rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 10px; } .user-info a { color: #e8e6e2; text-decoration: none; padding: 4px 8px; border-radius: 5px; } .user-info a:hover { background: rgba(255,255,255,0.1); text-decoration: underline; } /* ---------- Login ---------- */ body.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 125vh; /* ver comentário no `body` sobre zoom + vh */ overflow: auto; background: radial-gradient(circle at 30% 20%, #1a1a1a, var(--preto) 65%); } .login-box { background: #fff; padding: 36px 34px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); width: 340px; text-align: center; } .login-logo-img { height: 46px; width: auto; margin: 0 auto 14px; display: block; } .login-box h1 { font-size: 18px; margin: 0 0 2px; } .login-subtitulo { font-size: 12px; color: #888; margin: 0 0 20px; } .login-box form { display: flex; flex-direction: column; gap: 4px; text-align: left; } .login-box label { font-size: 12px; color: #555; margin-top: 8px; } .login-box input { padding: 9px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 14px; font-family: inherit; } .login-box button { margin-top: 18px; background: var(--preto); color: #fff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; } .login-box button:hover { background: var(--laranja); } .login-rodape { font-size: 11px; color: #999; margin-top: 18px; line-height: 1.6; } .login-rodape a { color: var(--laranja-escuro); font-weight: 600; text-decoration: none; } .login-rodape a:hover { text-decoration: underline; } .senha-wrap { position: relative; display: flex; align-items: center; } .senha-wrap input { flex: 1; padding-right: 36px; } .senha-toggle { position: absolute; right: 6px; background: none; border: none; cursor: pointer; color: #999; padding: 4px; margin: 0; display: flex; align-items: center; } .senha-toggle:hover { color: var(--preto); } .alerta-erro { background: #ffe5e5; border: 1px solid #f3a4a4; color: #a02020; padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 10px; } .alerta-info { background: #fff1e6; border: 1px solid #ffc794; color: #8a3b00; padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; } .form-senha { display: flex; flex-direction: column; gap: 4px; max-width: 340px; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 20px; } .form-senha label { font-size: 12px; color: #555; margin-top: 8px; } .form-senha input { padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 14px; } .form-senha button { margin-top: 18px; background: var(--preto); color: #fff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; } .form-senha button:hover { background: var(--laranja); } main { padding: 20px 16px 60px; width: 100%; box-sizing: border-box; overflow-y: auto; flex: 1; min-height: 0; /* Sem "margin: auto" — dentro de .sgi-main (flex-direction: column), margens automáticas no eixo horizontal (cruzado) fazem o flexbox encolher a caixa para o conteúdo e centralizá-la em vez de esticar, o que reduzia a largura em páginas com tabelas mais estreitas (Resumo, Solicitações de Terceiros) enquanto passava despercebido em páginas com tabelas largas (Em Aberto, Pagas). */ } h1 { font-size: 22px; margin-bottom: 16px; } h2 { font-size: 17px; margin-top: 32px; margin-bottom: 10px; } .cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cabecalho-pagina h1 { margin-bottom: 0; } .controles-superior { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .seletor-meses { display: flex; align-items: center; gap: 8px; } .seletor-meses label { font-size: 13px; color: #666; font-weight: 500; } .seletor-meses select { padding: 8px 12px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 13px; font-family: inherit; background: #fff; cursor: pointer; transition: all 0.2s; } .seletor-meses select:hover { border-color: var(--laranja); } .seletor-meses select:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(255, 96, 0, 0.1); } /* Filtro tipo Excel */ .filtro-excel-wrapper { display: flex; align-items: center; gap: 8px; } .filtro-excel-wrapper label { font-size: 13px; color: #666; font-weight: 500; white-space: nowrap; } .filtro-excel { position: relative; } .btn-filtro-excel { background: #fff; border: 1px solid var(--cinza-borda); padding: 8px 12px; border-radius: 6px; font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.2s; min-width: 150px; text-align: left; } .btn-filtro-excel:hover { border-color: var(--laranja); background: #f9f9f9; } .btn-filtro-excel.ativo { border-color: var(--laranja); background: var(--laranja); color: #fff; } /* Dropdown tipo Excel */ .dropdown-excel { position: fixed; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 250px; max-width: 300px; } .dropdown-excel.oculto { display: none; } .dropdown-header { padding: 8px; border-bottom: 1px solid var(--cinza-borda); } .search-excel { width: 100%; padding: 6px 8px; border: 1px solid var(--cinza-borda); border-radius: 4px; font-size: 12px; font-family: inherit; } .search-excel:focus { outline: none; border-color: var(--laranja); } .dropdown-buttons { padding: 6px 8px; display: flex; gap: 6px; border-bottom: 1px solid var(--cinza-borda); } .btn-dropdown-action { flex: 1; padding: 6px 8px; border: 1px solid var(--cinza-borda); background: #fff; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s; } .btn-dropdown-action:hover { background: var(--offwhite); border-color: var(--laranja); } .dropdown-lista { max-height: 250px; overflow-y: auto; padding: 4px 0; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; transition: background 0.15s; } .dropdown-item:hover { background: #f0f8ff; } .dropdown-item input[type="checkbox"] { cursor: pointer; width: 14px; height: 14px; accent-color: var(--laranja); } .dropdown-item label { flex: 1; cursor: pointer; margin: 0; } /* Customizar Choices.js */ .choices { margin: 0; } .choices__inner { border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 6px 12px; font-size: 13px; background: #fff; } .choices__inner:focus-within { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(255, 96, 0, 0.1); } .choices__item { background: var(--laranja); border-color: var(--laranja-escuro); color: #fff; font-size: 12px; } .choices__item.is-highlighted { background: var(--laranja-escuro); } /* Seletor de colunas */ .btn-colunas { background: var(--preto); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.2s; } .btn-colunas:hover { background: var(--laranja); } .painel-colunas { position: absolute; background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 14px; width: 300px; max-height: 400px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; margin-top: 4px; } .painel-colunas.oculto { display: none; } .painel-colunas-header { font-weight: 600; font-size: 13px; margin-bottom: 12px; color: var(--preto); } .lista-colunas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .lista-colunas label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; user-select: none; } .lista-colunas input[type="checkbox"] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--laranja); } .btn-aplicar-colunas { width: 100%; background: var(--laranja); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; font-weight: 600; } .btn-aplicar-colunas:hover { background: var(--laranja-escuro); } .btn-atualizar { display: inline-flex; align-items: center; gap: 6px; background: var(--laranja); color: #fff; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; margin-bottom: 14px; } .btn-atualizar:hover { background: var(--laranja-escuro); } .btn-atualizar:disabled { opacity: 0.7; cursor: default; } .icone-atualizar { display: inline-block; } .icone-atualizar.girando { animation: girar 0.9s linear infinite; } @keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Botão de exportação */ .btn-exportar { background: #4CAF50; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.2s; } .btn-exportar:hover { background: #45a049; } .btn-exportar:disabled { opacity: 0.7; cursor: default; } .dica-tabela, .dica-pagas { font-size: 12px; color: var(--cinza-texto); margin: 0 0 10px; } .filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; background: #fff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--cinza-borda); } .filtros input[type="text"], .filtros select { padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 14px; font-family: inherit; } .filtros .chk { display: flex; align-items: center; gap: 6px; font-size: 14px; } .filtros button { background: var(--preto); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; } .filtros button:hover { background: var(--laranja); } .filtros .limpar { font-size: 13px; color: #666; text-decoration: none; } .filtros .limpar:hover { text-decoration: underline; } .filtros-data { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; background: #fff; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--cinza-borda); } .filtros-data label { font-size: 13px; color: #555; } .filtros-data input[type="date"] { padding: 7px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 14px; font-family: inherit; } .filtros-data button { background: var(--preto); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: all 0.2s; } .filtros-data button:hover { background: var(--laranja); transform: translateY(-1px); } .btn-reiniciar { background: var(--cinza-borda) !important; color: var(--preto) !important; } .btn-reiniciar:hover { background: #ccc !important; } .dica-pagas { font-size: 12px; color: #777; margin-left: auto; } .cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .card { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 14px 18px; min-width: 160px; flex: 1; } .card-label { display: block; font-size: 12px; color: #777; margin-bottom: 4px; } .card-valor { display: block; font-size: 20px; font-weight: 700; } .card-alerta { border-left: 4px solid var(--laranja); } /* ---------- Tabela ---------- */ /* Barra de scroll superior sincronizada */ .scroll-top-sync { background: #fff; border: 1px solid var(--cinza-borda); border-bottom: none; border-radius: 8px 8px 0 0; overflow-x: auto; overflow-y: hidden; height: 10px; margin-bottom: -1px; z-index: 9; position: relative; } .scroll-top-sync::-webkit-scrollbar { height: 10px; } .scroll-top-sync::-webkit-scrollbar-track { background: var(--offwhite); } .scroll-top-sync::-webkit-scrollbar-thumb { background: var(--laranja); border-radius: 5px; } .scroll-top-sync::-webkit-scrollbar-thumb:hover { background: var(--laranja-escuro); } .scroll-spacer { height: 1px; } .tabela-wrap { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 0 0 8px 8px; overflow: auto; /* Mantém a barra de rolagem horizontal sempre visível dentro da tela, sem depender de rolar a página inteira para baixo (item 7). */ max-height: calc(125vh - 250px); /* ver comentário no `body` sobre zoom + vh */ min-height: 300px; } /* Barra de scroll horizontal sempre visível e customizada */ .tabela-wrap::-webkit-scrollbar { height: 10px; } .tabela-wrap::-webkit-scrollbar-track { background: var(--offwhite); } .tabela-wrap::-webkit-scrollbar-thumb { background: var(--cinza-borda); border-radius: 5px; transition: background 0.2s; } .tabela-wrap::-webkit-scrollbar-thumb:hover { background: var(--laranja); } table.tabela-aps { border-collapse: collapse; width: 100%; font-size: 13px; } table.tabela-aps th { background: var(--preto); color: #fff; text-align: left; padding: 10px 10px; position: sticky; top: 0; white-space: nowrap; z-index: 10; font-weight: 600; } .btn-filtro-coluna { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; padding: 2px 4px; margin-left: 4px; opacity: 0.7; transition: opacity 0.2s; } .btn-filtro-coluna:hover { opacity: 1; } .col-menu-btn { cursor: pointer; opacity: 0.7; font-size: 18px; font-weight: bold; transition: all 0.2s; font-style: normal; margin-left: auto; padding: 0 4px; display: inline-block; } table.tabela-aps th { cursor: pointer; user-select: none; } table.tabela-aps th:hover .col-menu-btn { opacity: 1; color: var(--laranja); } .col-menu-dropdown { position: fixed; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000; min-width: 180px; } .col-menu-item { padding: 12px 16px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; color: var(--preto); transition: all 0.15s; } .col-menu-item:last-child { border-bottom: none; } .col-menu-item:hover { background: var(--offwhite); color: var(--laranja); font-weight: 600; } .col-menu-popup { position: fixed; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; min-width: 160px; } .col-menu-popup .menu-item { padding: 10px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f0f0; color: var(--preto); transition: background 0.15s; } .col-menu-popup .menu-item:last-child { border-bottom: none; } .col-menu-popup .menu-item:hover { background: var(--offwhite); color: var(--laranja); font-weight: 600; } table.tabela-aps td { padding: 6px 10px; border-top: 1px solid #eee; white-space: nowrap; } table.tabela-aps tbody tr.linha { height: 44px; } table.tabela-aps tbody tr.linha:hover { background: #fff6ee; cursor: pointer; } table.tabela-aps tbody tr.linha td { padding: 4px 8px; vertical-align: middle; } table.tabela-aps td.col-valor { text-align: right; font-variant-numeric: tabular-nums; } table.tabela-aps td.col-atraso { text-align: center; } table.tabela-aps td.col-atraso-programado { text-align: center; } table.tabela-aps td.atraso-positivo { color: var(--laranja-escuro); font-weight: 600; } .col-status { padding: 4px 8px !important; min-width: 100px; } .col-status-edit { padding: 4px 8px !important; min-width: 180px; } .badge-status { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .badge-status-vencida { background: #ffe0e0; color: #a02020; } .badge-status-a-vencer { background: #eef0f2; color: #444; } .badge-status-previsao-vigente { background: var(--azul); color: #1f4a8a; } .badge-status-previsao-falha { background: #ffe0e0; color: #a02020; } .badge-status-a-programar { background: var(--laranja-claro); color: var(--laranja-escuro); } .badge-status-paga { background: var(--verde); color: #206020; } .edit-status { flex-shrink: 0; min-width: 150px; font-size: 11px; } .col-cor { width: 4px; padding: 0 !important; } .col-editavel-wrap { background: #f0f8ff; border-radius: 4px; padding: 3px 6px !important; } .edit-campo { width: 100%; min-width: 110px; padding: 4px 6px; background: transparent; border: 1px solid transparent; border-radius: 3px; transition: all 0.15s; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 13px; font-family: inherit; box-sizing: border-box; } .edit-campo:hover { border-color: var(--cinza-borda); background: #fff; } .edit-campo:focus { border-color: var(--preto); background: #fff; outline: none; } .edit-observacao { min-width: 180px; } .edit-data { min-width: 130px; } /* Input de data: permite digitação + ícone de calendário clicável */ input[type="date"] { cursor: text; } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; padding: 2px; } input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Datas de Emissão/Vencimento corrigidas manualmente — item 6 */ .edit-data.editado-manual { color: #c0201f; font-weight: 700; } .edit-campo.salvo { animation: piscar-verde 0.9s ease; } @keyframes piscar-verde { 0% { background: #d8f5d8; } 100% { background: transparent; } } .edit-campo.erro { border-color: #d9534f !important; background: #ffe5e5 !important; } td.vazio, p.vazio-msg { padding: 24px; text-align: center; color: #888; } /* ---------- Modal de detalhes da AP ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(10,10,10,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-overlay.oculto { display: none; } .modal-caixa { background: #fff; border-radius: 10px; padding: 28px 30px; width: 640px; max-width: 92vw; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .modal-caixa h2 { margin-top: 0; border-bottom: 3px solid var(--laranja); padding-bottom: 10px; } .modal-fechar { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; } .modal-fechar:hover { color: var(--preto); } .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 16px; } .modal-campo { display: flex; flex-direction: column; gap: 2px; } .modal-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #999; } .modal-valor { font-size: 14px; font-weight: 600; word-break: break-word; } /* ---------- Painel de Filtro Moderno ---------- */ .painel-filtro-moderno { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; } .painel-filtro-caixa { background: var(--branco); border-radius: 12px; padding: 28px 32px; width: 420px; max-width: 92vw; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); animation: slideDown 0.25s ease-out; } .painel-filtro-caixa h3 { margin-top: 0; margin-bottom: 16px; color: var(--preto); font-size: 18px; border-bottom: 3px solid var(--laranja); padding-bottom: 12px; } .input-filtro-campo { width: 100%; padding: 12px 14px; font-size: 14px; border: 2px solid var(--cinza-borda); border-radius: 8px; font-family: inherit; margin-bottom: 16px; transition: border-color 0.2s; } .input-filtro-campo:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(255, 96, 0, 0.1); } .painel-filtro-botoes { display: flex; gap: 10px; justify-content: flex-end; } .btn-aplicar-filtro, .btn-limpar-filtro { padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s; font-family: inherit; } .btn-aplicar-filtro { background: var(--laranja); color: var(--branco); } .btn-aplicar-filtro:hover { background: var(--laranja-escuro); transform: translateY(-2px); } .btn-limpar-filtro { background: var(--cinza-borda); color: var(--preto); } .btn-limpar-filtro:hover { background: #ccc; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Select2 Customização */ .select2-container--default .select2-selection--single { border: 1px solid var(--cinza-borda) !important; border-radius: 4px !important; height: auto !important; padding: 4px 6px !important; } .select2-dropdown-status { max-width: 180px !important; } .select2-dropdown-status .select2-results__option { padding: 8px 12px !important; font-size: 13px !important; } /* ---------- Chat de IA (SGI) ---------- */ .topbar-btn-chat { background: var(--laranja); color: #fff; border: none; padding: 4px 12px 4px 4px; border-radius: 100px; cursor: pointer; font-size: 12px; font-weight: bold; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; } .topbar-btn-chat:hover { background: var(--laranja-escuro); } .julia-avatar-mini { width: 22px; height: 22px; border-radius: 50%; display: block; } .julia-avatar-header { width: 26px; height: 26px; border-radius: 50%; display: block; } .chat-painel-titulo { display: inline-flex; align-items: center; gap: 8px; } .chat-painel { position: fixed; top: 0; right: 0; height: 125vh; /* ver comentário no `body` sobre zoom + vh */ width: 380px; max-width: 112.5vw; /* 90vw / 0.8, mesmo motivo */ background: var(--branco); border-left: 1px solid var(--cinza-borda); box-shadow: -8px 0 24px rgba(0,0,0,0.15); z-index: 500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; } .chat-painel:not(.oculto) { transform: translateX(0); } .chat-painel-cabecalho { background: var(--preto); color: #fff; padding: 14px 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; flex: none; } .chat-painel-fechar { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 2px 6px; } .chat-painel-fechar:hover { opacity: 0.7; } .chat-painel-mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .chat-msg { max-width: 85%; padding: 8px 12px; border-radius: 10px; line-height: 1.4; white-space: pre-wrap; } .chat-msg p { margin: 0 0 8px; } .chat-msg p:last-child { margin-bottom: 0; } .chat-msg ul { margin: 4px 0 8px; padding-left: 20px; } .chat-msg ul:last-child { margin-bottom: 0; } .chat-msg li { margin-bottom: 3px; } .chat-msg-user { align-self: flex-end; background: var(--laranja); color: #fff; border-bottom-right-radius: 2px; } .chat-msg-model { align-self: flex-start; background: var(--offwhite); border: 1px solid var(--cinza-borda); border-bottom-left-radius: 2px; } .chat-msg-erro { align-self: flex-start; background: #fdecea; border: 1px solid #f5c2c0; color: #7a1f1a; } .chat-msg-carregando { opacity: 0.6; font-style: italic; } .chat-confirmacao { align-self: stretch; border: 1px solid var(--laranja); background: var(--laranja-claro); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .chat-confirmacao-botoes { display: flex; gap: 8px; margin-top: 8px; } .chat-confirmacao-botoes button { flex: 1; padding: 6px 10px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; } .chat-btn-confirmar { background: var(--laranja); color: #fff; } .chat-btn-confirmar:hover { background: var(--laranja-escuro); } .chat-btn-cancelar { background: #fff; border: 1px solid var(--cinza-borda) !important; } .chat-btn-cancelar:hover { background: var(--offwhite); } .chat-painel-form { flex: none; display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--cinza-borda); } .chat-painel-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--cinza-borda); border-radius: 6px; font-size: 13px; font-family: inherit; } .chat-painel-form button { background: var(--laranja); color: #fff; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; } .chat-painel-form button:hover { background: var(--laranja-escuro); } /* ---------- Manual (documentos de consulta) ---------- */ .manual-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; } .manual-card { display: block; background: #fff; border: 1px solid var(--cinza-borda); border-top: 3px solid var(--laranja); border-radius: 10px; padding: 18px 20px; text-decoration: none; color: var(--preto); transition: box-shadow 0.15s, transform 0.15s; } .manual-card:hover { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.25); transform: translateY(-2px); } .manual-card-titulo { font-weight: 700; font-size: 15px; margin-bottom: 6px; } .manual-card-desc { font-size: 12.5px; color: var(--cinza-texto); line-height: 1.5; } .manual-card-abrir { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--laranja); } /* ===================================================================== GPE — Follow-up automático (card gerado a partir do cronograma .mpp) ===================================================================== */ .gpe-followup-pagina { padding: 24px 32px; } .gpe-titulo { font-size: 20px; font-weight: 700; color: var(--preto); margin-bottom: 18px; } .gpe-card { background: var(--preto); color: var(--branco); border-radius: 12px; padding: 24px 28px; max-width: 720px; } .gpe-card-erro { background: var(--offwhite); color: var(--preto); border: 1px solid var(--cinza-borda); } .gpe-aviso { padding: 12px 18px; font-size: 13px; font-weight: 600; } .gpe-aviso-sucesso { background: var(--verde); color: var(--preto); } .gpe-aviso-erro { background: #ffe5e5; color: #a02020; } .gpe-upload { background: var(--offwhite); color: var(--preto); border: 1px solid var(--cinza-borda); padding: 16px 18px; } .gpe-upload form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gpe-upload button { background: var(--laranja); color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; } .gpe-upload button:hover { background: var(--laranja-escuro); } .gpe-upload-info { font-size: 12px; color: var(--cinza-texto); } .gpe-card-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .gpe-card-nome { font-size: 24px; font-weight: 700; margin: 0; } .gpe-card-cidade { font-size: 13px; color: var(--laranja); } .gpe-card-logo { height: 24px; width: auto; } .gpe-tabela-categorias { width: 100%; border-collapse: collapse; } .gpe-tabela-categorias th { text-align: left; font-size: 11px; letter-spacing: 0.05em; opacity: 0.6; font-weight: 500; padding: 4px 8px; } .gpe-tabela-categorias td { padding: 6px 8px; vertical-align: middle; } .gpe-categoria-nome { font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--laranja); } .gpe-andamento-celula { width: 100%; } .gpe-barra, .gpe-barra-fundo { height: 24px; border-radius: 4px; display: flex; align-items: center; font-size: 11.5px; font-weight: 700; min-width: 180px; } .gpe-barra-liberada { background: var(--laranja); justify-content: center; } .gpe-barra-fundo { background: rgba(255,255,255,0.15); overflow: hidden; } .gpe-barra-preenchida { background: var(--laranja); height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 32px; } .gpe-erro-inline { font-size: 11.5px; color: #ff9d6b; } .gpe-data { font-size: 12px; white-space: nowrap; } .gpe-data-critica { color: #ffd27a; } .gpe-data-final { color: #7ed99a; } .gpe-legenda { display: flex; gap: 18px; margin-top: 16px; font-size: 11px; opacity: 0.75; } .gpe-legenda-item { display: flex; align-items: center; gap: 6px; } .gpe-legenda-cor { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .gpe-legenda-critica { background: #ffd27a; } .gpe-legenda-final { background: #7ed99a; } /* ===== Priorização inline (coluna Em Aberto) ===== */ .col-prioridade { position: relative; white-space: nowrap; } .pri-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } .pri-tag-urgente { background: #fde8e8; color: #b91c1c; } .pri-tag-alta { background: #fff3e0; color: #c2410c; } .pri-tag-importante { background: #fef9c3; color: #a16207; } .btn-definir-pri { background: none; border: 1px dashed #ccc; border-radius: 4px; cursor: pointer; color: #999; font-size: 14px; padding: 1px 8px; } .btn-definir-pri:hover { border-color: #1a5c3f; color: #1a5c3f; } .btn-remover-pri-inline { background: none; border: none; cursor: pointer; color: #ccc; font-size: 12px; padding: 0 4px; margin-left: 2px; } .btn-remover-pri-inline:hover { color: #b91c1c; } .pri-modal { position: absolute; z-index: 1000; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); width: 220px; } .pri-modal.oculto { display: none; }