/* --- ESTILOS DA SELEÇÃO EM MASSA --- */ /* Checkbox ao lado da tarefa */ .item-selection-checkbox { margin-right: 12px; width: 20px; height: 20px; cursor: pointer; accent-color: #27ae60; /* Cor verde quando marcado */ } /* Barra flutuante de ações */ #bulk-action-bar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); /* Começa escondida embaixo */ background-color: #2c3e50; color: white; padding: 15px 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 15px; z-index: 10001; /* Acima de tudo */ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); max-width: 95%; flex-wrap: wrap; justify-content: center; } #bulk-action-bar.visible { transform: translateX(-50%) translateY(0); /* Sobe para aparecer */ } /* Botões de Coluna na barra */ .btn-bulk-dest { border: none; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s; } .btn-bulk-dest:hover { transform: scale(1.1); filter: brightness(1.2); } .btn-bulk-cancel { background: transparent; border: 1px solid #e74c3c; color: #e74c3c; padding: 8px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; } .btn-bulk-cancel:hover { background: #e74c3c; color: white; } /* Garante que o contador da coluna não fique gigante */ .contador-dinamico-coluna .counter-label { max-width: 100px; /* Limita a largura */ white-space: nowrap; /* Não quebra linha */ overflow: hidden; /* Esconde o excesso */ text-overflow: ellipsis; /* Coloca ... no final */ display: block; /* Garante que o width funcione */ } /* --- RODAPÉ DA COLUNA KANBAN --- */ .kanban-footer { padding: 8px; text-align: center; font-size: 13px; font-weight: bold; color: white; border-radius: 0 0 8px 8px; /* Arredonda só embaixo */ margin-top: 5px; opacity: 0.9; user-select: none; /* Não selecionável */ } /* --- CORREÇÃO PARA IPHONE (Adicione isto ao seu CSS) --- */ .filtro-projeto-btn, .filtro-papel-btn, .filtro-filial-btn, .filtro-departamento-btn, .filtro-equipe-btn, .filtro-cargo-btn, .filtro-processo-btn, .filtro-resp-btn { -webkit-touch-callout: none !important; /* Impede menu do sistema iOS */ -webkit-user-select: none !important; /* Impede seleção de texto */ user-select: none !important; } /* --- Variáveis de Cor --- */ :root { /* 1. Adicione dentro do :root { ... } */ --cor-projeto: #9c27b0; /* Roxo para Projetos */ /* 2. Adicione junto com os outros estilos de botões */ .projeto-badge { background-color: var(--cor-projeto); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .filtro-projeto-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-projeto); border: 1px solid var(--cor-projeto); } .filtro-projeto-btn:hover { background-color: var(--cor-projeto); color: white; } .filtro-projeto-btn.active { background-color: var(--cor-projeto); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); border-color: var(--cor-projeto); } --cor-processo: #d35400; /* Laranja Escuro */ --cor-papel: #e91e63; /* Nova cor para Papéis */ /* ... suas outras cores ... */ --cor-rotina-badge: #607d8b; /* Cinza Azulado para o Badge */ --cor-rotina-bg: #eceff1; /* Fundo suave para o card */ --cor-primaria: #005a9c; --cor-secundaria: #f8f9fa; --cor-borda: #dee2e6; --cor-texto: #212529; /* COR PADRÃO ESCURA */ --cor-sucesso: #28a745; --cor-perigo: #dc3545; --cor-aviso: #fd7e14; --cor-editar: #ffc107; --cor-concluido: #6c757d; --cor-tag: #17a2b8; --cor-tag-filtro-inativo: #e9ecef; --cor-tag-filtro-ativo: #005a9c; --cor-exportar: #6f42c1; --cor-importar: #e83e8c; --cor-prioridade: #e74c3c; --cor-contador-dia: #34495e; --cor-voltar-estoque: #8e44ad; --cor-proximas: #2c3e50; /* ESTADOS ESPECIAIS */ --cor-emergencia-bg: #ffebee; --cor-emergencia-border: #d32f2f; --cor-importante-bg: #fffde7; --cor-importante-border: #fbc02d; /* CORES PARETO */ --pareto-gold: #f1c40f; --pareto-importante: #3498db; --pareto-rotina: #95a5a6; --pareto-descarte: #e74c3c; --cor-vinculo: #9b59b6; --cor-agendamento: #6610f2; --cor-recorrencia: #00bcd4; /* CORES ENGAJAMENTO */ --eng-foco: #5e35b1; --eng-duas: #d35400; --eng-uma: #27ae60; --eng-kids: #3f51b5; /* NOVA COR: Índigo Noturno */ /* --- Menu de Contexto (Botão Direito) --- */ #custom-context-menu { display: none; position: absolute; /* <--- MUDE PARA ABSOLUTE */ z-index: 10000; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.2); border-radius: 6px; padding: 5px 0; width: 160px; font-size: 13px; font-weight: 600; } .ctx-item { padding: 8px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s; color: #333; } .ctx-item:hover { background-color: #f1f1f1; } .ctx-color-bubble { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); display: inline-block; } /* Cores das bolinhas do menu */ .bubble-default { background-color: #fff; border: 2px solid #ccc; } .bubble-black { background-color: #2c3e50; } .bubble-red { background-color: #c0392b; } .bubble-orange { background-color: #d35400; } .bubble-yellow { background-color: #f1c40f; } .bubble-green { background-color: #27ae60; } .bubble-blue { background-color: #2980b9; } /* CORES DE ENTIDADES */ --cor-filial: #795548; --cor-departamento: #009688; --cor-equipe: #673ab7; --cor-cargo: #2c3e50; } /* --- ESTILOS DE PAPÉIS (Cópia de Processos) --- */ .papel-badge { background-color: var(--cor-papel); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .filtro-papel-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-papel); border: 1px solid var(--cor-papel); } .filtro-papel-btn:hover { background-color: var(--cor-papel); color: white; } .filtro-papel-btn.active { background-color: var(--cor-papel); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } /* Badge de Rotina na Lista */ .rotina-badge { background-color: var(--cor-rotina-badge); color: white; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } /* Esconder campos de rotina no modal por padrão */ .rotina-campos-wrapper { display: none; /* Só aparece se o checkbox for marcado */ gap: 10px; margin-top: 10px; padding: 10px; background-color: #f1f8e9; border-radius: 6px; border: 1px dashed #8bc34a; } .rotina-campos-wrapper.ativo { display: flex; flex-wrap: wrap; } /* --- Estilos Gerais --- */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; background-color: var(--cor-secundaria); color: var(--cor-texto); margin: 0; padding: 20px; } /* Estilo padrão para Engajamentos Personalizados */ .filtro-eng-btn.eng-custom { background-color: #607d8b; /* Cinza azulado */ color: white; } .engajamento-badge.eng-custom { background-color: #607d8b; } /* Botão Filtrar Urgentes */ .estoque-comida-wrapper #filtro-urgentes-btn { background-color: #d32f2f; /* Vermelho Urgência */ color: white; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #filtro-urgentes-btn:hover { background-color: #b71c1c; } /* Estado Ativo */ .estoque-comida-wrapper #filtro-urgentes-btn.active { background-color: #c62828; box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.4); transform: scale(1.05); } /* Botão IMPORTANTES */ .estoque-comida-wrapper #filtro-importantes-btn { background-color: #f39c12; display: flex; align-items: center; gap: 5px; color: white; } .estoque-comida-wrapper #filtro-importantes-btn:hover { background-color: #d68910; } .estoque-comida-wrapper #filtro-importantes-btn.active { background-color: #f1c40f; box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.4); transform: scale(1.05); color: #333; } /* Botão Filtrar Delegadas */ .estoque-comida-wrapper #filtro-delegadas-btn { background-color: #8e44ad; /* Roxo */ color: white; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #filtro-delegadas-btn:hover { background-color: #7d3c98; } /* Estado Ativo */ .estoque-comida-wrapper #filtro-delegadas-btn.active { background-color: #6c3483; /* Roxo mais escuro */ box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.4); transform: scale(1.05); } /* Botão Ocultar Recorrentes */ .estoque-comida-wrapper #toggle-recorrentes-btn { background-color: #00838f; /* Cyan Escuro */ color: white; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #toggle-recorrentes-btn:hover { background-color: #006064; } /* Estado Ativo */ .estoque-comida-wrapper #toggle-recorrentes-btn.active { background-color: #004d40; box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); border: 2px solid #4db6ac; } /* Estilo das Sugestões Rápidas */ .tag-sugestao { background-color: #eceff1; color: #455a64; border: 1px solid #cfd8dc; padding: 4px 10px; border-radius: 15px; font-size: 12px; cursor: pointer; margin-right: 5px; margin-bottom: 5px; display: inline-block; transition: all 0.2s; font-weight: 600; } .tag-sugestao:hover { background-color: #b0bec5; color: #fff; transform: scale(1.05); } .tag-sugestao.ja-selecionado { background-color: #a5d6a7; /* Verde claro se já estiver incluso */ color: #1b5e20; border-color: #81c784; opacity: 0.6; cursor: default; } /* Botão Ocultar Importantes */ .estoque-comida-wrapper #toggle-importantes-btn { background-color: #6a1b9a; /* Roxo escuro */ color: white; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #toggle-importantes-btn:hover { background-color: #4a148c; } /* Estado Ativo (Quando estiver ocultando) */ .estoque-comida-wrapper #toggle-importantes-btn.active { background-color: #38006b; box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); border: 2px solid #ba68c8; } /* --- BARRA DE STATUS DA NUVEM --- */ #cloud-status-bar { position: sticky; top: 0; z-index: 2000; background-color: #333; color: #fff; padding: 10px; text-align: center; font-weight: bold; margin: -20px -20px 20px -20px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .status-loading { background-color: #ffc107 !important; color: #333 !important; } .status-success { background-color: #28a745 !important; } .status-error { background-color: #dc3545 !important; } .estoque-comida-wrapper h1, .estoque-comida-wrapper h2 { text-align: center; color: #2c3e50; position: relative; font-size: 1.5rem; } /* Botão Ocultar Urgentes */ .estoque-comida-wrapper #toggle-urgentes-btn { background-color: #546e7a; /* Azul acinzentado */ color: white; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #toggle-urgentes-btn:hover { background-color: #455a64; } /* Estado Ativo (Quando estiver ocultando) */ .estoque-comida-wrapper #toggle-urgentes-btn.active { background-color: #37474f; box-shadow: inset 0 3px 5px rgba(0,0,0,0.2); border: 2px solid #b0bec5; } .estoque-comida-wrapper h2 { border-bottom: 2px solid #e0e0e0; padding-bottom: 10px; } .estoque-comida-wrapper .emoji { margin-right: 8px; } /* --- PAINEL DE GESTÃO (Topo) --- */ .painel-gestao { padding: 15px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-bottom: 20px; display: flex; flex-direction: column; gap: 15px; } /* Backup Buttons */ .estoque-comida-wrapper #backup-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid #eee; } .estoque-comida-wrapper .backup-btn { font-size: 14px; padding: 10px 15px; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; font-weight: 600; } .estoque-comida-wrapper .backup-btn.export { background-color: #8e44ad; } .estoque-comida-wrapper .backup-btn.export:hover { background-color: #7a3a9b; } .estoque-comida-wrapper .backup-btn.import { background-color: #f39c12; } .estoque-comida-wrapper .backup-btn.import:hover { background-color: #e67e22; } .estoque-comida-wrapper .backup-btn.danger { background-color: #e74c3c; } .estoque-comida-wrapper .backup-btn.danger:hover { background-color: #c0392b; } .estoque-comida-wrapper #sync-btn { background-color: #1abc9c; } /* Botão UNDO */ .estoque-comida-wrapper #undo-btn { background-color: #607d8b; display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #undo-btn:hover { background-color: #455a64; } .estoque-comida-wrapper #undo-btn:disabled { background-color: #cfd8dc; cursor: not-allowed; opacity: 0.7; } /* Botão ATRASADAS */ .estoque-comida-wrapper #filtro-atrasadas-btn { background-color: #c0392b; /* Vermelho escuro */ display: flex; align-items: center; gap: 5px; } .estoque-comida-wrapper #filtro-atrasadas-btn:hover { background-color: #a93226; } .estoque-comida-wrapper #filtro-atrasadas-btn.active { background-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.4); transform: scale(1.05); } /* BOTÃO DE ORDENAÇÃO */ #toggle-sort-btn { background-color: #34495e; color: white; display: flex; align-items: center; gap: 5px; } #toggle-sort-btn:hover { background-color: #2c3e50; } #toggle-sort-btn .status-icon { font-size: 16px; } /* Filtros Gerais */ .filtro-container { width: 100%; } .filtro-titulo { width: 100%; text-align: center; margin: 0 0 10px 0; color: #555; font-size: 16px; font-weight: 600; } .filtro-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .filtro-tag-btn { background-color: #ecf0f1; color: #7f8c8d; padding: 6px 12px; border-radius: 15px; font-size: 14px; font-weight: 500; border: 2px solid transparent; cursor: pointer; transition: all 0.3s; } .filtro-tag-btn:hover { background-color: #dfe6e9; } .filtro-tag-btn.active { background-color: #3498db; color: white; border-color: #2980b9; } .filtro-resp-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.6; background-color: #fff; } .filtro-resp-btn:hover { opacity: 0.8; transform: translateY(-2px); } .filtro-resp-btn.active { opacity: 1; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transform: scale(1.05); } /* FILTROS DE ENTIDADES */ .filtro-filial-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-filial); border: 1px solid var(--cor-filial); } .filtro-filial-btn:hover { background-color: var(--cor-filial); color: white; } .filtro-filial-btn.active { background-color: var(--cor-filial); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } .filtro-departamento-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-departamento); border: 1px solid var(--cor-departamento); } .filtro-departamento-btn:hover { background-color: var(--cor-departamento); color: white; } /* --- CORES DE STATUS (FORÇADAS E REFORÇADAS) --- */ /* Aplica a cor de fundo e força a cor do texto para legibilidade */ /* PRETO */ button.dept-status-black, .dept-status-black, .filtro-filial-btn.dept-status-black { background-color: #2c3e50 !important; color: white !important; border-color: #000 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; } /* VERMELHO */ button.dept-status-red, .dept-status-red, .filtro-filial-btn.dept-status-red { background-color: #c0392b !important; color: white !important; border-color: #922b21 !important; box-shadow: 0 2px 5px rgba(192, 57, 43, 0.4) !important; } /* LARANJA */ button.dept-status-orange, .dept-status-orange, .filtro-filial-btn.dept-status-orange { background-color: #d35400 !important; color: white !important; border-color: #a04000 !important; box-shadow: 0 2px 5px rgba(211, 84, 0, 0.4) !important; } /* AMARELO (O problema estava aqui - contraste) */ button.dept-status-yellow, .dept-status-yellow, .filtro-filial-btn.dept-status-yellow { background-color: #f1c40f !important; color: #000000 !important; /* Força texto preto no amarelo */ border-color: #d4ac0d !important; font-weight: 800 !important; box-shadow: 0 2px 5px rgba(241, 196, 15, 0.4) !important; } /* VERDE */ button.dept-status-green, .dept-status-green, .filtro-filial-btn.dept-status-green { background-color: #27ae60 !important; color: white !important; border-color: #1e8449 !important; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.4) !important; } /* AZUL */ button.dept-status-blue, .dept-status-blue, .filtro-filial-btn.dept-status-blue { background-color: #2980b9 !important; color: white !important; border-color: #1f618d !important; box-shadow: 0 2px 5px rgba(41, 128, 185, 0.4) !important; } .filtro-departamento-btn.active { background-color: var(--cor-departamento); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } .filtro-equipe-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-equipe); border: 1px solid var(--cor-equipe); } .filtro-equipe-btn:hover { background-color: var(--cor-equipe); color: white; } .filtro-equipe-btn.active { background-color: var(--cor-equipe); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } .filtro-cargo-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-cargo); border: 1px solid var(--cor-cargo); } .filtro-cargo-btn:hover { background-color: var(--cor-cargo); color: white; } .filtro-cargo-btn.active { background-color: var(--cor-cargo); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } /* FILTROS DE ENGAJAMENTO */ .filtro-eng-btn { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 3; background-color: #fff; color: #555; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .filtro-eng-btn:hover { opacity: 0.6; transform: translateY(-1px); } .filtro-eng-btn.active { opacity: 1; transform: scale(1.05); color: white; border-color: transparent; } .filtro-eng-btn.active[data-eng="foco"] { background-color: var(--eng-foco); } .filtro-eng-btn.active[data-eng="duas_maos"] { background-color: var(--eng-duas); } .filtro-eng-btn.active[data-eng="uma_mao"] { background-color: var(--eng-uma); } /* NOVA COR FILTRO */ .filtro-eng-btn.active[data-eng="kids_sleeping"] { background-color: var(--eng-kids); } /* FILTRO DE DATA INPUT */ .filtro-data-wrapper { display: flex; justify-content: center; align-items: center; gap: 10px; } #filtro-data-input { padding: 8px 12px; border-radius: 8px; border: 2px solid #ddd; font-size: 16px; color: #333; } #filtro-data-input:focus { border-color: #3498db; outline: none; } #limpar-filtro-data { background-color: #e74c3c; color: white; border: none; border-radius: 8px; padding: 8px 12px; font-weight: bold; cursor: pointer; display: none; } /* Contadores */ .counters-bar { display: flex; justify-content: center; gap: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; flex-wrap: wrap; } .counter-box { text-align: center; min-width: 120px; padding: 5px; border-radius: 8px; background-color: #fff; border: 1px solid #ddd; } .counter-label { font-size: 12px; color: #777; font-weight: 700; text-transform: uppercase; display: block; } .counter-value { font-size: 24px; font-weight: 800; display: block; line-height: 1; } #counter-val-fazer { color: var(--cor-prioridade); } #counter-val-estoque { color: var(--cor-sucesso); } #counter-val-concluidos { color: var(--cor-concluido); } /* --- ÁREA DE AÇÃO (Meio) --- */ .area-acao-meio { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; background-color: #e3f2fd; padding: 20px; border-radius: 8px; border: 1px solid #bbdefb; } .estoque-comida-wrapper .container-add { display: flex; justify-content: center; width: 100%; } .estoque-comida-wrapper #abrir-modal-add-btn { font-size: 18px; padding: 12px 25px; background-color: #27ae60; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; font-weight: 600; width: 100%; max-width: 500px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .estoque-comida-wrapper #abrir-modal-add-btn:hover { background-color: #219d55; } .estoque-comida-wrapper #search-input { width: 100%; font-size: 16px; padding: 12px; border: 2px solid #fff; border-radius: 8px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .estoque-comida-wrapper #search-input:focus { border-color: #3498db; outline: none; } /* LISTAS VERTICAIS */ .estoque-comida-wrapper .container-listas { display: flex; flex-direction: column; gap: 25px; } .estoque-comida-wrapper .coluna { width: 100%; box-sizing: border-box; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 20px; } .estoque-comida-wrapper ul { list-style-type: none; padding: 0; margin: 0; min-height: 50px; } .estoque-comida-wrapper li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 15px; margin-bottom: 10px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; gap: 15px; transition: background-color 0.3s, border-color 0.3s; cursor: pointer; } /* NOVA ESTRUTURA DO CONTEÚDO DA TAREFA */ .item-conteudo { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; } .item-linha-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .item-nome-tarefa { font-size: 18px; font-weight: 600; color: #212529 !important; /* Cor forçada */ line-height: 1.3; word-break: break-word; } /* --- DESTAQUES --- */ .estoque-comida-wrapper li.destaque-agendado { border: 2px solid var(--cor-agendamento) !important; background-color: #f3effd !important; } .estoque-comida-wrapper li.destaque-recorrente { border: 2px solid var(--cor-recorrencia) !important; background-color: #e0f7fa !important; } /* ESTILO DE EMERGÊNCIA */ .estoque-comida-wrapper li.destaque-emergencia { border: 2px solid var(--cor-emergencia-border) !important; background-color: var(--cor-emergencia-bg) !important; animation: pulse-border 2s infinite; } @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); } } .badge-emergencia { background-color: #d32f2f; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; } /* --- Estilo para Tarefas Bloqueantes --- */ .badge-bloqueante { background-color: #2c3e50; /* Preto/Azul escuro */ color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; border: 1px solid white; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* Destaque visual no card inteiro (borda preta grossa) */ .estoque-comida-wrapper li.destaque-bloqueante { border-left: 6px solid #2c3e50 !important; background-color: #fff5f5 !important; /* Fundo levemente avermelhado */ } /* Botão de Filtro */ .estoque-comida-wrapper #filtro-bloqueantes-btn { background-color: #34495e; color: white; display: flex; align-items: center; gap: 5px; border: 1px solid #2c3e50; } .estoque-comida-wrapper #filtro-bloqueantes-btn:hover { background-color: #000; } .estoque-comida-wrapper #filtro-bloqueantes-btn.active { background-color: #000; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); transform: scale(1.05); } /* ESTILO EXECUÇÃO ATIVA (TIMER) */ .estoque-comida-wrapper li.execucao-ativa { border: 3px solid #2ecc71 !important; /* Verde forte */ background-color: #e8f8f5 !important; transform: scale(1.02); box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); z-index: 100; } /* ESTILO DELEGADO */ .estoque-comida-wrapper li.delegado-ativo { border: 3px dashed #8e44ad !important; /* Roxo tracejado */ background-color: #f3e5f5 !important; z-index: 90; /* Abaixo do Timer (100), mas acima do resto */ } .badge-delegado { background-color: #8e44ad; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; margin-right: 5px; } .btn-delegar-ativo { background-color: #8e44ad !important; color: white !important; border: 2px solid #6c3483 !important; } .estoque-comida-wrapper li.execucao-ativa .item-nome-tarefa { color: #27ae60 !important; font-weight: 800; } .btn-timer-ativo { background-color: #2ecc71 !important; animation: pulse-green 1.5s infinite; } .timer-display { font-family: monospace; font-size: 14px; font-weight: bold; color: #2ecc71; background: #2c3e50; padding: 4px 8px; border-radius: 4px; margin-right: 5px; display: inline-block; min-width: 60px; text-align: center; } .btn-reset-timer { background: none; border: none; cursor: pointer; font-size: 16px; color: #e74c3c; /* Vermelho */ margin-right: 5px; padding: 0 4px; line-height: 1; font-weight: bold; transition: transform 0.2s; } .btn-pular { background-color: #7f8c8d !important; /* Cinza */ color: white; margin-right: 5px; } .btn-pular:hover { background-color: #95a5a6 !important; transform: scale(1.05); } .btn-reset-timer:hover { transform: rotate(-45deg) scale(1.2); color: #c0392b; } .timer-display.parado { color: #95a5a6; background: #ecf0f1; } @keyframes pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } /* ESTILO DE IMPORTANTE */ .estoque-comida-wrapper li.destaque-importante { border: 2px solid var(--cor-importante-border) !important; background-color: var(--cor-importante-bg) !important; } .badge-importante { background-color: #fbc02d; color: #333; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; } /* ESTILO EXECUÇÃO ATIVA (TIMER) */ .estoque-comida-wrapper li.execucao-ativa { border: 3px solid #2ecc71 !important; /* Verde forte */ background-color: #e8f8f5 !important; transform: scale(1.02); box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); z-index: 100; } .estoque-comida-wrapper li.execucao-ativa .item-nome-tarefa { color: #27ae60 !important; font-weight: 800; } .btn-timer-ativo { background-color: #2ecc71 !important; animation: pulse-green 1.5s infinite; } @keyframes pulse-green { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .estoque-comida-wrapper li.item-concluido { opacity: 0.8; background-color: #e9ecef !important; border-color: #ccc !important; } .estoque-comida-wrapper li.item-concluido .item-nome-tarefa { text-decoration: line-through; color: #777 !important; } /* Nova coluna de próximas recorrências */ #coluna-proximas { border-top: 4px solid var(--cor-proximas); } .data-proxima-badge { background-color: var(--cor-proximas); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; display: inline-block; } /* Responsive Logic */ @media (max-width: 600px) { .estoque-comida-wrapper li { flex-direction: column; align-items: flex-start; padding-bottom: 8px; } .item-conteudo { width: 100%; margin-bottom: 10px; } .estoque-comida-wrapper li > div:last-of-type { width: 100%; display: flex; gap: 5px; justify-content: space-between; } .estoque-comida-wrapper li button:not(.btn-editar):not(.btn-apagar):not(.btn-duplicar) { flex-grow: 1; width: auto; font-size: 12px; padding: 8px 5px; text-align: center; } .estoque-comida-wrapper li .btn-editar, .estoque-comida-wrapper li .btn-apagar, .estoque-comida-wrapper li .btn-duplicar { display: none !important; visibility: hidden !important; } .responsavel-badge { margin-top: 0; } } .prioridade-badge { background-color: var(--cor-prioridade); color: white; font-size: 14px; font-weight: bold; padding: 2px 8px; border-radius: 4px; margin-right: 0; min-width: 25px; text-align: center; display: inline-block; cursor: pointer; transition: transform 0.2s, background-color 0.2s; } .vinculo-badge { background-color: var(--cor-vinculo); color: white; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; display: inline-block; } .agendamento-badge { background-color: var(--cor-agendamento); color: white; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .recorrencia-badge { background-color: var(--cor-recorrencia); color: white; font-size: 11px; font-weight: bold; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .engajamento-badge { color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .eng-foco { background-color: var(--eng-foco); } .eng-duas { background-color: var(--eng-duas); } .eng-uma { background-color: var(--eng-uma); } .eng-kids { background-color: var(--eng-kids); } /* NOVA CLASSE */ /* BADGES DE ENTIDADES */ .cargo-badge { background-color: var(--cor-cargo); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .filial-badge { background-color: var(--cor-filial); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .departamento-badge { background-color: var(--cor-departamento); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .equipe-badge { background-color: var(--cor-equipe); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } /* ESTILOS DE PROCESSO */ .processo-badge { background-color: var(--cor-processo); color: white; font-size: 11px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .filtro-processo-btn { padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; opacity: 0.8; background-color: #fff; color: var(--cor-processo); border: 1px solid var(--cor-processo); } .filtro-processo-btn:hover { background-color: var(--cor-processo); color: white; } .filtro-processo-btn.active { background-color: var(--cor-processo); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transform: scale(1.05); } .prioridade-badge:hover { transform: scale(1.1); background-color: #c0392b; } .contador-diario { background-color: var(--cor-contador-dia); color: white; font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 10px; margin-right: 0; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .responsavel-badge { font-size: 11px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: #fff; font-weight: 800; margin-right: 0; letter-spacing: 0.5px; text-shadow: 0 1px 1px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15); } .prioridade-input-inline { width: 50px; padding: 2px; font-size: 14px; border: none; border-radius: 4px; text-align: center; outline: 2px solid #f1c40f; } .pareto-badge { font-size: 11px; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; font-weight: 800; margin-right: 0; display: inline-block; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .pareto-gold { background-color: var(--pareto-gold); color: #333; border: 1px solid #d4ac0d; } .pareto-importante { background-color: var(--pareto-importante); color: #fff; } .pareto-rotina { background-color: var(--pareto-rotina); color: #fff; } .pareto-descarte { background-color: var(--pareto-descarte); color: #fff; } .estoque-comida-wrapper li button { font-size: 14px; padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s; font-weight: bold; flex-shrink: 0; } .estoque-comida-wrapper #lista-estoque button { background-color: #e67e22; color: white; } .estoque-comida-wrapper #lista-estoque button:hover { background-color: #d35400; } /* Botão Emergência */ .estoque-comida-wrapper .btn-emergencia { background-color: #d32f2f !important; color: white; margin-left: 5px; } .estoque-comida-wrapper .btn-emergencia:hover { background-color: #b71c1c !important; transform: scale(1.05); } /* Botão Importante */ .estoque-comida-wrapper .btn-importante { background-color: #fbc02d !important; color: #333; margin-left: 5px; } .estoque-comida-wrapper .btn-importante:hover { background-color: #f9a825 !important; transform: scale(1.05); } .estoque-comida-wrapper .btn-concluir { background-color: #3498db; color: white; } .estoque-comida-wrapper .btn-concluir:hover { background-color: #2980b9; } .estoque-comida-wrapper .btn-reabrir { background-color: #17a2b8; color: white; } .estoque-comida-wrapper .btn-reabrir:hover { background-color: #138496; } .estoque-comida-wrapper .btn-voltar-estoque { background-color: var(--cor-voltar-estoque); color: white; margin-right: 5px; } .estoque-comida-wrapper .btn-voltar-estoque:hover { background-color: #6c3483; } .estoque-comida-wrapper li { position: relative; } .estoque-comida-wrapper li .btn-apagar { background-color: #e74c3c !important; color: white; padding: 2px 8px; font-size: 16px; line-height: 1; position: absolute; top: -10px; right: -5px; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 5; } .estoque-comida-wrapper li .btn-apagar:hover { background-color: #c0392b !important; transform: scale(1.1); } .estoque-comida-wrapper li .btn-editar { background-color: #1abc9c !important; color: white; padding: 2px 8px; font-size: 14px; line-height: 1; position: absolute; top: -10px; right: 25px; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 5; } .estoque-comida-wrapper li .btn-editar:hover { background-color: #16a085 !important; transform: scale(1.1); } .estoque-comida-wrapper li .btn-duplicar { background-color: #8e44ad !important; color: white; padding: 2px 8px; font-size: 14px; line-height: 1; position: absolute; top: -10px; right: 55px; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 5; } .estoque-comida-wrapper li .btn-duplicar:hover { background-color: #6c3483 !important; transform: scale(1.1); } .estoque-comida-wrapper li .btn-editar, .estoque-comida-wrapper li .btn-apagar, .estoque-comida-wrapper li .btn-duplicar { visibility: hidden; opacity: 0; transition: opacity 0.2s ease, visibility 0.2s ease; } @media (min-width: 601px) { .estoque-comida-wrapper li:hover .btn-editar, .estoque-comida-wrapper li:hover .btn-apagar, .estoque-comida-wrapper li:hover .btn-duplicar { visibility: visible; opacity: 1; } } #btn-ativar-filtrados { display: none; background-color: #3498db; color: white; border: none; padding: 5px 12px; border-radius: 20px; font-size: 14px; font-weight: bold; cursor: pointer; margin-left: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: all 0.3s; vertical-align: middle; } #btn-ativar-filtrados:hover { background-color: #2980b9; transform: scale(1.05); } /* --- CORREÇÃO: CSS GLOBAL PARA MODAIS --- */ /* Removemos o .estoque-comida-wrapper do início para funcionar em qualquer lugar */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 10000; /* Garante que fique na frente de tudo */ justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } #add-item-modal .modal-content { background-color: #fff; width: 100%; max-width: 1000px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; max-height: 95vh; overflow: hidden; padding: 0; } #add-item-modal .modal-header { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; background-color: #FF6600; color: white; padding: 15px 20px; border-radius: 8px 8px 0 0; margin: 0; } #add-item-modal .modal-header h2 { margin: 0; padding: 0; border: none; color: white; } #add-item-form { overflow-y: auto; padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 15px; } #salvar-item-btn { font-size: 18px; padding: 15px; background-color: #27ae60; color: white; border: none; cursor: pointer; font-weight: 600; width: 100%; border-radius: 0 0 8px 8px; margin-top: 0; flex-shrink: 0; } #salvar-item-btn:hover { background-color: #219d55; } .estoque-comida-wrapper .modal-close-btn { font-size: 30px; font-weight: bold; color: white; cursor: pointer; line-height: 1; opacity: 0.8; } .estoque-comida-wrapper .modal-close-btn:hover { opacity: 1; } .estoque-comida-wrapper #item-modal .modal-content { background-color: #fff; padding: 20px 30px; border-radius: 8px; width: 100%; max-width: 1000px; box-sizing: border-box; display: flex; flex-direction: column; height: 90%; max-height: 900px; position: relative; } .estoque-comida-wrapper #item-modal .modal-close-btn { position: absolute; top: 10px; right: 15px; color: #888; } .estoque-comida-wrapper #item-modal .modal-close-btn:hover { color: #000; } .modal-body-container { display: flex; flex-direction: row; gap: 20px; flex-grow: 1; overflow: hidden; height: 100%; } .modal-view-header { width: 100%; border-bottom: 2px solid #eee; margin-bottom: 15px; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } #modal-view-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0; word-wrap: break-word; } #btn-editar-no-modal { background-color: #1abc9c; color: white; border: none; padding: 8px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px; margin-right: 20px; transition: background-color 0.3s; } #btn-editar-no-modal:hover { background-color: #16a085; } .modal-sidebar { width: 300px; display: flex; flex-direction: column; border-right: 1px solid #eee; padding-right: 15px; flex-shrink: 0; overflow-y: auto; } .modal-main-view { flex-grow: 1; display: flex; flex-direction: column; height: 100%; } #modal-description-area { margin-bottom: 15px; } #modal-description-textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; resize: vertical; font-family: inherit; font-size: 14px; box-sizing: border-box; background-color: #fcfcfc; } #modal-description-textarea:focus { border-color: #3498db; outline: none; background-color: #fff; } .desc-label { font-weight: 600; font-size: 13px; color: #777; margin-bottom: 5px; display: block; } #add-item-form textarea { width: 100%; min-height: 80px; padding: 10px; border: 2px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 16px; box-sizing: border-box; resize: vertical; } .estoque-comida-wrapper #modal-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .estoque-comida-wrapper .modal-tag { background-color: #ecf0f1; color: #7f8c8d; padding: 5px 10px; border-radius: 15px; font-size: 13px; font-weight: 500; } .estoque-comida-wrapper #modal-links-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .estoque-comida-wrapper .modal-link-btn { background-color: #e67e22; color: white; padding: 5px 12px; border-radius: 15px; font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color 0.3s; } .estoque-comida-wrapper .modal-link-btn:hover { background-color: #d35400; } .estoque-comida-wrapper #item-iframe { flex-grow: 1; border: 1px solid #ddd; width: 100%; height: 100%; border-radius: 4px; } /* Checklist */ #modal-checklist-area h3 { margin-top: 0; font-size: 16px; color: #555; border-bottom: 2px solid #eee; padding-bottom: 5px; } .checklist-item-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 8px; background-color: #f8f9fa; border-radius: 6px; transition: background-color 0.2s; position: relative; } .checklist-item-row:hover { background-color: #e9ecef; } .checklist-item-row input[type="checkbox"] { margin-top: 5px; transform: scale(1.2); cursor: pointer; flex-shrink: 0; } .checklist-text-span { font-size: 15px; line-height: 1.4; color: #333; word-break: break-word; flex-grow: 1; padding-top: 2px; } .checklist-item-row.checked .checklist-text-span { text-decoration: line-through; color: #888; } .checklist-item-row.checked { background-color: #e2e6ea; opacity: 0.9; } .checklist-actions { display: flex; gap: 5px; margin-left: auto; opacity: 0.3; transition: opacity 0.2s; } .checklist-item-row:hover .checklist-actions { opacity: 1; } .checklist-btn-icon { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px; color: #7f8c8d; } .checklist-btn-icon:hover { transform: scale(1.2); } .checklist-btn-icon.edit:hover { color: #3498db; } .checklist-btn-icon.del:hover { color: #e74c3c; } .checklist-edit-input { flex-grow: 1; font-size: 15px; padding: 4px; border: 1px solid #3498db; border-radius: 4px; } .checklist-quick-add { display: flex; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; } .checklist-quick-add input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .checklist-quick-add button { background-color: #27ae60; color: white; border: none; border-radius: 4px; width: 35px; font-size: 20px; cursor: pointer; line-height: 1; } .checklist-quick-add button:hover { background-color: #219d55; } .checklist-ordem-badge { background-color: #6c757d; color: white; font-size: 12px; padding: 2px 6px; border-radius: 4px; margin-right: 0; cursor: pointer; font-weight: bold; min-width: 20px; text-align: center; margin-top: 2px; user-select: none; } .checklist-ordem-badge:hover { background-color: #5a6268; } .checklist-ordem-input { width: 40px; text-align: center; padding: 2px; font-size: 12px; border-radius: 4px; border: 1px solid #3498db; } /* Form Controls */ .estoque-comida-wrapper #add-item-form .form-grupo { display: flex; flex-direction: column; } .estoque-comida-wrapper #add-item-form label { margin-bottom: 5px; font-weight: 600; color: #555; } .estoque-comida-wrapper #add-item-form input[type="text"], .estoque-comida-wrapper #add-item-form input[type="number"], .estoque-comida-wrapper #add-item-form input[type="datetime-local"], .estoque-comida-wrapper #add-item-form input[type="time"], .estoque-comida-wrapper #add-item-form select { font-size: 16px; padding: 10px; border: 2px solid #ddd; border-radius: 8px; font-family: inherit; background-color: #ffffff !important; color: #333333 !important; } .estoque-comida-wrapper #add-item-form small { font-size: 12px; color: #777; margin-top: 3px; } .estoque-comida-wrapper #add-item-form fieldset { border: 1px solid #ddd; border-radius: 8px; padding: 10px 15px; display: flex; flex-direction: column; gap: 10px; } .estoque-comida-wrapper #add-item-form legend { font-weight: 600; color: #555; padding: 0 5px; margin-left: 5px; } .estoque-comida-wrapper .outro-link-par { display: flex; gap: 10px; align-items: center; } .estoque-comida-wrapper .outro-link-par input { flex: 1; } .estoque-comida-wrapper .add-checklist-par { display: flex; gap: 10px; align-items: center; } .estoque-comida-wrapper .add-checklist-par input { flex: 1; } .estoque-comida-wrapper .remover-btn { font-size: 12px; background-color: #e74c3c; color: white; border: none; border-radius: 4px; padding: 5px 8px; cursor: pointer; font-weight: bold; } .estoque-comida-wrapper .btn-add-interno { font-size: 14px; background-color: #3498db; color: white; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; align-self: flex-start; } /* Estilos da Recorrência */ .recorrencia-wrapper { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; } .dia-checkbox-label { display: flex; align-items: center; gap: 5px; background: #eee; padding: 5px 10px; border-radius: 15px; font-size: 12px; cursor: pointer; } .dia-checkbox-label input { transform: scale(1.2); } .horarios-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .horario-tag { background: #00bcd4; color: white; padding: 2px 8px; border-radius: 4px; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 5px; } .remove-hora { cursor: pointer; font-size: 14px; line-height: 1; } /* Grade de Meses */ .meses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 5px; } .meses-grid label { font-size: 12px; background: #f8f9fa; border: 1px solid #ddd; padding: 5px; border-radius: 4px; text-align: center; cursor: pointer; font-weight: normal !important; } .meses-grid label:hover { background: #e9ecef; } /* Utility classes */ .hidden { display: none !important; } @media (max-width: 768px) { .estoque-comida-wrapper #item-modal .modal-content { height: 95%; } .modal-body-container { flex-direction: column; overflow-y: auto; } .modal-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; padding-bottom: 15px; padding-right: 0; max-height: 40%; flex-shrink: 0; } .modal-main-view { flex-grow: 1; height: 400px; flex-shrink: 0; } .counters-bar { gap: 10px; } .counter-box { min-width: 90px; } .estoque-comida-wrapper .container-listas { gap: 15px; } .estoque-comida-wrapper .coluna { min-width: 100%; } .meses-grid { grid-template-columns: repeat(3, 1fr); } } /* --- ESTILOS DO RELATÓRIO DE PRIORIDADES --- */ #modal-relatorio-prioridades .modal-content { background-color: #f4f6f7; height: 90vh; /* Ocupa 90% da altura da tela */ display: flex; flex-direction: column; padding: 0; max-width: 1200px; } .relatorio-header { background-color: #2c3e50; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; flex-shrink: 0; } .relatorio-body { flex-grow: 1; overflow-y: auto; /* Permite rolar a lista */ padding: 20px; } .tabela-prioridades { width: 100%; border-collapse: separate; border-spacing: 0 8px; /* Espaço entre as linhas */ } .tabela-prioridades th { text-align: left; color: #7f8c8d; font-weight: 700; padding: 0 15px; text-transform: uppercase; font-size: 12px; } .linha-relatorio { background-color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s; } .linha-relatorio:hover { transform: scale(1.01); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .linha-relatorio td { padding: 12px 15px; vertical-align: middle; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .linha-relatorio td:first-child { border-left: 5px solid transparent; /* Onde vai a cor */ border-radius: 6px 0 0 6px; } .linha-relatorio td:last-child { border-radius: 0 6px 6px 0; border-right: 1px solid #eee; } /* Input Gigante de Prioridade */ .input-prio-relatorio { width: 60px; padding: 8px; font-size: 18px; font-weight: bold; text-align: center; border: 2px solid #ddd; border-radius: 8px; color: var(--cor-prioridade); } .input-prio-relatorio:focus { border-color: var(--cor-prioridade); outline: none; background-color: #fffdf9; } /* Badges dentro do relatório */ .relatorio-contexto { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; } .ctx-pill { padding: 2px 6px; border-radius: 4px; background: #eceff1; color: #555; font-weight: 600; } /* Classes de Cores para a Borda Lateral (Visual igual aos botões) */ .border-black { border-left-color: #2c3e50 !important; } .border-red { border-left-color: #c0392b !important; } .border-orange { border-left-color: #d35400 !important; } .border-yellow { border-left-color: #f1c40f !important; } .border-green { border-left-color: #27ae60 !important; } .border-blue { border-left-color: #2980b9 !important; } /* Cabeçalhos de Seção de Cor */ .row-header-cor { background-color: #f0f3f4; font-weight: 800; text-transform: uppercase; color: #555; letter-spacing: 1px; font-size: 13px; } .row-header-cor td { padding: 15px !important; border-bottom: 2px solid #ddd !important; } /* Bolinha de cor na tabela */ .cor-indicator { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: 8px; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); } /* --- CORREÇÃO DE ROLAGEM DO RELATÓRIO DE FILTROS --- */ /* Força o modal de filtros a se comportar como uma caixa flexível */ #modal-relatorio-filtros .modal-content { background-color: #f4f6f7; height: 90vh; /* Ocupa 90% da altura da tela */ max-height: 90vh; /* Garante que não ultrapasse */ display: flex; /* Essencial para separar cabeçalho do corpo */ flex-direction: column; padding: 0; max-width: 1200px; width: 95%; overflow: hidden; /* Esconde o que vazar da borda arredondada */ } /* Garante que o corpo da tabela ocupe o espaço restante e tenha scroll */ #modal-relatorio-filtros .relatorio-body { flex-grow: 1; /* Cresce para ocupar o espaço */ overflow-y: auto; /* CRUCIAL: Cria a barra de rolagem vertical */ padding: 20px; height: 100%; /* Garante altura para o scroll funcionar */ } /* (Opcional) Estilo para a barra de rolagem ficar mais bonita/visível */ #modal-relatorio-filtros .relatorio-body::-webkit-scrollbar { width: 10px; } #modal-relatorio-filtros .relatorio-body::-webkit-scrollbar-track { background: #e0e0e0; } #modal-relatorio-filtros .relatorio-body::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; } #modal-relatorio-filtros .relatorio-body::-webkit-scrollbar-thumb:hover { background: #555; } /* --- ESTILOS DO KANBAN TEMPORAL --- */ .kanban-wrapper { display: flex; overflow-x: auto; /* Permite rolar para o lado se não caber na tela */ gap: 10px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 2px dashed #ccc; scrollbar-width: thin; } .kanban-coluna { min-width: 200px; flex: 1; background-color: #f1f2f6; border-radius: 8px; border: 1px solid #dfe6e9; display: flex; flex-direction: column; } .kanban-header { background-color: #34495e; color: white; padding: 8px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: bold; text-align: center; cursor: pointer; /* Indica que dá para clicar e editar */ } .kanban-header:hover { background-color: #2c3e50; } .kanban-dropzone { flex-grow: 1; padding: 10px; min-height: 100px; /* Altura mínima para conseguir soltar */ display: flex; flex-direction: column; gap: 8px; } /* Efeito visual quando arrasta do Kanban para a lista Para Fazer */ #lista-para-fazer.drag-over-list { background-color: #d1f2eb; border: 2px dashed #27ae60; min-height: 100px; border-radius: 8px; transition: all 0.2s; } /* Visual quando está arrastando um item por cima */ .kanban-dropzone.drag-over { background-color: #d1f2eb; /* Verde claro */ border: 2px dashed #27ae60; } /* Ajustes nos cards quando estão dentro do Kanban (para ficarem menores) */ .kanban-dropzone li { font-size: 12px; padding: 8px; flex-direction: column; /* Em colunas pequenas, melhor empilhar */ align-items: flex-start; } .kanban-dropzone .item-nome-tarefa { font-size: 14px; } .kanban-dropzone .item-linha-badges { display: none; /* Esconde badges para economizar espaço (opcional) */ } /* Mostra badges essenciais se quiser */ .kanban-dropzone .badge-emergencia, .kanban-dropzone .prioridade-badge { display: inline-block !important; } /* --- CORREÇÃO VISUAL PARA CARDS NO KANBAN (ATUALIZADO) --- */ /* 1. Estrutura do Cartão no Kanban */ .kanban-dropzone li { flex-direction: column !important; /* Obriga ficar um item embaixo do outro */ align-items: stretch !important; /* Estica para ocupar a largura da coluna */ padding: 10px 8px !important; /* Padding menor */ gap: 8px !important; min-width: 0 !important; /* Evita que itens forcem largura */ border-left-width: 4px !important; /* Borda colorida mais fina */ } /* 2. Conteúdo e Nome da Tarefa */ .kanban-dropzone .item-conteudo { width: 100%; } .kanban-dropzone .item-nome-tarefa { font-size: 13px !important; /* Fonte menor */ line-height: 1.3 !important; white-space: normal !important; /* Permite quebra de linha do texto */ margin-bottom: 5px; display: block; } /* 3. CORREÇÃO DA LINHA DE BADGES */ .kanban-dropzone .item-linha-badges { display: flex !important; /* ATENÇÃO: Mudado de none para flex */ flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } /* 4. Ocultar badges que ocupam muito espaço no Kanban (Limpeza) */ .kanban-dropzone .papel-badge, .kanban-dropzone .engajamento-badge, .kanban-dropzone .contador-diario, .kanban-dropzone .vinculo-badge, .kanban-dropzone .responsavel-badge, .kanban-dropzone .recorrencia-badge, .kanban-dropzone .agendamento-badge, .kanban-dropzone .processo-badge, .kanban-dropzone .filial-badge, .kanban-dropzone .departamento-badge, .kanban-dropzone .equipe-badge, .kanban-dropzone .cargo-badge { display: none !important; } /* 5. Exibir Prioridade e Emergência (Clicáveis) */ .kanban-dropzone .badge-emergencia, .kanban-dropzone .prioridade-badge { display: inline-block !important; font-size: 10px !important; padding: 2px 6px !important; cursor: pointer !important; /* Importante para indicar que é editável */ } /* Efeito ao passar o mouse na prioridade dentro do Kanban */ .kanban-dropzone .prioridade-badge:hover { transform: scale(1.2); background-color: #c0392b; } /* Ajuste do Input de Edição dentro do card pequeno do Kanban */ .kanban-dropzone .prioridade-input-inline { width: 35px !important; font-size: 12px !important; padding: 1px !important; height: 18px !important; } /* 6. Área dos Botões (Rodapé do Card) */ .kanban-dropzone li > div:last-child { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; justify-content: space-between !important; width: 100% !important; } /* 7. Estilo dos Botões individuais */ .kanban-dropzone button { font-size: 10px !important; padding: 4px 6px !important; flex-grow: 1; text-align: center; max-width: 100%; } /* 8. Ajuste Especial para o Timer dentro do Kanban */ .kanban-dropzone li > div:last-child > div { width: 100% !important; justify-content: center !important; margin-bottom: 4px !important; background-color: rgba(0,0,0,0.03); border-radius: 4px; padding: 2px; } .kanban-dropzone .timer-display { font-size: 11px !important; min-width: auto !important; padding: 2px 6px !important; } /* 9. Esconde botões de edição complexa para limpar o visual */ .kanban-dropzone .btn-editar, .kanban-dropzone .btn-duplicar, .kanban-dropzone .btn-apagar { display: none !important; } /* 7. Badges (Etiquetas) menores */ .kanban-dropzone .item-linha-badges { margin-bottom: 4px; } .kanban-dropzone .papel-badge, .kanban-dropzone .engajamento-badge, .kanban-dropzone .prioridade-badge, .kanban-dropzone .contador-diario { font-size: 9px !important; padding: 1px 4px !important; } /* --- NOVO ESTILO: BADGE DE SEQUÊNCIA --- */ .sequencia-badge { background-color: #00bcd4; /* Azul Cyan */ color: white; font-size: 14px; font-weight: bold; padding: 2px 8px; border-radius: 4px; margin-right: 5px; /* Espaço entre ela e a prioridade */ min-width: 25px; text-align: center; display: inline-block; cursor: pointer; transition: transform 0.2s; border: 1px solid #00acc1; } .sequencia-badge:hover { transform: scale(1.1); background-color: #0097a7; } /* Input inline quando clica para editar */ .sequencia-input-inline { width: 50px; padding: 2px; font-size: 14px; border: none; border-radius: 4px; text-align: center; outline: 2px solid #00bcd4; color: #006064; font-weight: bold; } /* --- NOVO ESTILO: BADGE DE SEQUÊNCIA --- */ .sequencia-badge { background-color: #00bcd4; /* Azul Cyan */ color: white; font-size: 14px; font-weight: bold; padding: 2px 8px; border-radius: 4px; margin-right: 5px; /* Espaço entre ela e a prioridade */ min-width: 25px; text-align: center; display: inline-block; cursor: pointer; transition: transform 0.2s; border: 1px solid #00acc1; } .sequencia-badge:hover { transform: scale(1.1); background-color: #0097a7; } /* Input inline quando clica para editar */ .sequencia-input-inline { width: 50px; padding: 2px; font-size: 14px; border: none; border-radius: 4px; text-align: center; outline: 2px solid #00bcd4; color: #006064; font-weight: bold; } /* --- CSS NOVO PARA ARRASTAR COLUNAS --- */ .kanban-coluna.dragging-col { opacity: 0.4; border: 2px dashed #333; transform: scale(0.95); } .kanban-coluna.drag-over-col { border-left: 4px solid var(--cor-primaria); /* Indica onde vai cair */ background-color: #e3f2fd; /* Azulzinho claro */ transition: all 0.2s; } /* O cursor precisa indicar que é arrastável no cabeçalho */ .kanban-header { cursor: grab; } .kanban-header:active { cursor: grabbing; } /* 1. Bloqueia a rolagem da página inteira */ body { overflow-x: hidden; /* Remove a barra inferior da tela */ width: 100%; box-sizing: border-box; } /* 2. Garante que a rolagem aconteça APENAS dentro do Kanban */ .kanban-wrapper { display: flex; overflow-x: auto; /* A rolagem fica aqui dentro */ width: 100%; /* Ocupa a largura disponível */ max-width: 100vw; /* Garante que não passe da tela */ padding-bottom: 15px; /* Espaço para a barrinha de rolagem interna */ /* Opcional: Estilo da barra de rolagem para ficar mais bonita/fina */ scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } /* Estilo para a barra de rolagem superior ficar sutil */ #kanban-top-scroll-container::-webkit-scrollbar { height: 10px; } #kanban-top-scroll-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; } #kanban-top-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; } /* Badge do contador dentro do cabeçalho da coluna Kanban */ .kanban-col-counter { background-color: rgba(0, 0, 0, 0.2); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 12px; margin-left: 5px; font-weight: 800; vertical-align: middle; } /* Botão de Adicionar Tarefa dentro da Coluna Kanban */ .btn-add-kanban { width: 100%; padding: 10px; background-color: transparent; border: 2px dashed #bdc3c7; color: #7f8c8d; border-radius: 6px; cursor: pointer; margin-top: 8px; font-weight: bold; font-size: 13px; transition: all 0.2s; } .btn-add-kanban:hover { background-color: #e3f2fd; border-color: #3498db; color: #3498db; } /* Animação infinita para chamar atenção */ @keyframes pulse-border-infinite { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); transform: scale(1); } } .highlight-alvo { /* Borda vermelha grossa */ border: 3px solid #ff0000 !important; /* Fundo amarelo claro */ background-color: #fff9c4 !important; /* Animação que nunca para */ animation: pulse-border-infinite 2s infinite; z-index: 9999; transition: all 0.3s; } /* Badge visual para identificar que é um atalho */ .atalho-badge { background-color: #2c3e50; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; border: 1px dashed #fff; } /* Botão flutuante que aparece só quando a tarefa está em destaque */ .btn-parar-destaque { position: absolute; top: -20px; /* Sobe um pouco mais para não sobrepor o topo do card */ right: 50%; transform: translateX(50%); background-color: #ff0000; color: white; border: 2px solid white; padding: 3px 10px; /* Padding menor para ficar mais compacto */ border-radius: 12px; /* Bordas mais arredondadas */ font-weight: bold; cursor: pointer; z-index: 10000; box-shadow: 0 2px 5px rgba(0,0,0,0.3); animation: none !important; font-size: 11px; /* Fonte ligeiramente menor */ white-space: nowrap; /* OBRIGATÓRIO: Impede quebra de linha */ } .btn-parar-destaque:hover { background-color: #cc0000; /* Removemos o scale para evitar problemas de layout no hover */ } /* Garantir que o card pai tenha posição relativa para o botão absoluto funcionar */ li.highlight-alvo { position: relative !important; } /* Fundo escuro do teletransporte */ /* --- ESTILOS DO TELETRANSPORTE (POP-UP VISUAL) --- */ /* Fundo escuro que cobre a tela inteira */ #teleport-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); /* Mais escuro para focar a atenção */ backdrop-filter: blur(5px); /* Desfoque forte no fundo */ z-index: 99999; display: none; justify-content: center; align-items: center; flex-direction: column; } /* --- CORREÇÃO DO VISUAL DO TELETRANSPORTE --- */ /* 1. O Container que segura o card */ #teleport-card-container { padding: 20px; display: flex; justify-content: center; align-items: center; } /* 2. O ESTILO DO CARTÃO (A MÁGICA ACONTECE AQUI) */ /* Usamos !important para garantir que sobrescreva o estilo da lista comum */ #teleport-card-container li { background-color: #ffffff !important; /* Fundo Branco Sólido */ width: 350px !important; /* Largura fixa de cartão */ max-width: 90vw !important; /* Não estourar no celular */ display: flex !important; flex-direction: column !important; /* Força itens um embaixo do outro */ align-items: flex-start !important; /* Alinha tudo à esquerda */ gap: 10px !important; /* Espaço entre linhas */ padding: 20px !important; border-radius: 12px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.6) !important; /* Sombra forte */ border: 1px solid #e0e0e0 !important; list-style: none !important; margin: 0 !important; transform: scale(1); transition: transform 0.2s; cursor: pointer; } /* Efeito ao passar o mouse */ #teleport-card-container li:hover { transform: scale(1.02); } /* Força o conteúdo interno a ocupar a largura toda */ #teleport-card-container .item-conteudo { width: 100% !important; } /* Garante que os botões function irParaTarefaAlvo(nomeAlvo) {dentro do teletransporte fiquem bonitos */ #teleport-card-container button { padding: 8px 12px !important; font-size: 12px !important; } /* --- CORREÇÃO DO RELATÓRIO SEQUENCIAL --- */ /* 1. Garante que a janela ocupe a altura certa e tenha estrutura flexível */ #modal-relatorio-sequencial .modal-content { width: 95% !important; max-width: 1200px !important; height: 90vh !important; /* 90% da altura da tela */ display: flex !important; /* Permite cabeçalho fixo + corpo com scroll */ flex-direction: column !important; padding: 0 !important; /* Remove padding para o cabeçalho colar na borda */ background-color: #f4f6f7 !important; /* Fundo cinza claro agradável */ border-radius: 12px !important; overflow: hidden !important; /* Impede barras de rolagem duplas */ } /* 2. Arruma o Cabeçalho Roxo */ #modal-relatorio-sequencial .relatorio-header { background-color: #8e44ad !important; /* Roxo */ color: white !important; padding: 15px 25px !important; display: flex !important; justify-content: space-between !important; /* Separa o Título do X */ align-items: center !important; flex-shrink: 0 !important; /* Não deixa o cabeçalho esmagar */ } /* 3. CONSERTA O BOTÃO DE FECHAR (X) */ #modal-relatorio-sequencial .modal-close-btn { position: static !important; /* Remove o absolute que joga ele pra fora */ color: #ffffff !important; /* Força BRANCO puro */ font-size: 32px !important; font-weight: bold !important; cursor: pointer !important; opacity: 0.8; line-height: 1 !important; margin-left: 20px; } #modal-relatorio-sequencial .modal-close-btn:hover { opacity: 1; transform: scale(1.1); } /* 4. Área da Tabela com Rolagem Independente */ #modal-relatorio-sequencial .relatorio-body { flex-grow: 1 !important; /* Ocupa todo o espaço restante */ overflow-y: auto !important; /* Apenas esta área rola */ padding: 20px !important; } /* 5. Embelezar a Tabela */ #modal-relatorio-sequencial table { width: 100%; border-collapse: separate; border-spacing: 0 8px; /* Espacinho entre as linhas */ } #modal-relatorio-sequencial thead th { text-align: left; color: #7f8c8d; padding: 0 15px 10px 15px; text-transform: uppercase; font-size: 12px; position: sticky; top: 0; background-color: #f4f6f7; /* Mantém o cabeçalho da tabela visível ao rolar */ z-index: 10; } #modal-relatorio-sequencial .linha-relatorio { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.1s; } #modal-relatorio-sequencial .linha-relatorio:hover { transform: scale(1.005); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } #modal-relatorio-sequencial td { padding: 12px 15px; vertical-align: middle; border: 1px solid #eee; border-left: none; border-right: none; } /* Bordas arredondadas nas linhas */ #modal-relatorio-sequencial td:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #eee; } #modal-relatorio-sequencial td:last-child { border-radius: 0 6px 6px 0; border-right: 1px solid #eee; } /* Estilo para o Gerenciador de Colunas */ .coluna-toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #eee; cursor: pointer; transition: background 0.2s; } .coluna-toggle-row:hover { background-color: #e3f2fd; } .coluna-toggle-row input { transform: scale(1.3); cursor: pointer; } .coluna-toggle-row span { font-weight: 600; color: #333; } /* Estilos para itens arrastáveis no gerenciador */ .item-arrastavel { transition: all 0.2s ease; cursor: grab; user-select: none; background: white; } .item-arrastavel:active { cursor: grabbing; } /* Quando o item está sendo arrastado (fica meio transparente) */ .item-arrastavel.dragging { opacity: 0.5; background-color: #e3f2fd; border: 2px dashed #2196f3 !important; } /* Quando você passa um item por cima de outro (indica onde vai cair) */ .item-arrastavel.drag-over-target { border-top: 3px solid #2196f3 !important; /* Linha azul indicando inserção */ transform: translateY(2px); } /* --- CSS DO PASSO 2: ESTILOS DA ORDENAÇÃO --- */ /* Estilo dos itens dentro do modal de ordenação */ .item-ordenavel { background: white; padding: 12px; border-radius: 6px; border: 1px solid #ddd; border-left: 5px solid #ccc; /* Cor padrão */ display: flex; justify-content: space-between; align-items: center; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; } .item-ordenavel:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-1px); } .item-ordenavel.dragging { opacity: 0.5; background-color: #e3f2fd; border: 2px dashed #2980b9; } .item-ordenavel.drag-over-target { border-top: 3px solid #2980b9; /* Linha azul indicando onde vai cair */ margin-top: 5px; } .ordenavel-handle { font-size: 20px; color: #999; margin-right: 10px; cursor: grab; } .ordenavel-prio-badge { background-color: #e74c3c; color: white; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: bold; } /* Filtros de Avaliação */ .filtro-aval-btn { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; border: 1px solid #f1c40f; cursor: pointer; background-color: #fff; color: #f39c12; transition: all 0.2s; } .filtro-aval-btn:hover { background-color: #fff8e1; } .filtro-aval-btn.active { background-color: #f1c40f; color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transform: scale(1.05); } /* Estrelas no Card */ .badge-avaliacao { background-color: #fff9c4; color: #f39c12; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; border: 1px solid #fbc02d; cursor: pointer; display: inline-block; } .badge-avaliacao:hover { background-color: #fff59d; transform: scale(1.1); } /* Modal de Estrelas Gigantes */ .estrelas-wrapper { display: flex; justify-content: center; gap: 10px; flex-direction: row-reverse; /* ⚠️ TRUQUE: Inverte a ordem visual */ } .estrela-votacao { font-size: 40px; color: #ddd; cursor: pointer; transition: color 0.2s; } /* Agora, ao passar o mouse, ele pinta a estrela atual e as que estão "depois" no DOM (que visualmente estão antes) */ .estrela-votacao:hover, .estrela-votacao:hover ~ .estrela-votacao, .estrela-votacao.ativa, .estrela-votacao.ativa ~ .estrela-votacao { color: #f1c40f; } /* --- DESTAQUE AGRESSIVO PARA TAREFAS BLOQUEANTES --- */ /* 1. O Cartão da Tarefa Inteiro */ .estoque-comida-wrapper li.destaque-bloqueante { /* Troca a borda lateral preta por uma borda TOTAL vermelha escura */ border: 3px solid #c0392b !important; /* Fundo avermelhado de alerta */ background-color: #ffebee !important; /* Leve aumento no tamanho para "saltar" na tela */ transform: scale(1.01); /* Animação de pulsação vermelha constante */ animation: pulse-red-alert 2s infinite; } /* 2. A Animação (Pulsação) */ @keyframes pulse-red-alert { 0% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(192, 57, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); } } /* 3. A Etiqueta (Badge) Escrita "⛔ Bloqueante" */ .badge-bloqueante { background-color: #c0392b !important; /* Vermelho Sangue */ color: #fff !important; font-size: 13px !important; padding: 4px 10px !important; border-radius: 4px; border: 1px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); text-transform: uppercase; letter-spacing: 1px; } /* --- TORNAR CONTADORES CLICÁVEIS --- */ .counter-box { cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; user-select: none; position: relative; /* Para o efeito de clique funcionar bem */ } .counter-box:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); background-color: #fffdf9; /* Leve destaque de cor */ border-width: 1px; } .counter-box:active { transform: scale(0.97); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* Torna os contadores clicáveis visualmente */ .counter-box { cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s; user-select: none; } .counter-box:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); background-color: #fffdf9; /* Leve destaque */ border-width: 2px; /* Engrossa a borda levemente */ } .counter-box:active { transform: scale(0.98); } /* --- CORREÇÃO DE ROLAGEM: RELATÓRIO DE INDICADORES --- */ /* 1. Configura a janela principal do modal */ #modal-relatorio-indicadores .modal-content { display: flex; flex-direction: column; max-height: 90vh; height: 90vh; overflow: hidden; padding: 0 !important; width: 95%; max-width: 1200px; /* <-- MUDAMOS AQUI PARA FICAR LARGÃO */ } /* 2. Trava o Cabeçalho (Onde está o X) */ #modal-relatorio-indicadores .relatorio-header { flex-shrink: 0; /* PROIBIDO ENCOLHER: Mantém o tamanho fixo */ width: 100%; box-sizing: border-box; position: relative; /* Garante contexto para o botão X */ z-index: 10; /* Fica acima do conteúdo rolante */ } /* 3. Cria a rolagem APENAS no corpo da lista */ #modal-relatorio-indicadores .relatorio-body { flex-grow: 1; /* Ocupa todo o espaço restante disponível */ overflow-y: auto; /* CRUCIAL: A barra de rolagem aparece SÓ AQUI */ padding: 20px; /* Espaçamento interno */ } /* (Opcional) Deixa a barra de rolagem mais bonita e moderna */ #modal-relatorio-indicadores .relatorio-body::-webkit-scrollbar { width: 8px; } #modal-relatorio-indicadores .relatorio-body::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; } /* --- ESTILOS PARA ARRASTAR NO RELATÓRIO --- */ .linha-arrastavel { cursor: grab; transition: background-color 0.2s, transform 0.2s; } .linha-arrastavel:active { cursor: grabbing; } /* Quando está sendo arrastado (item original fica meio transparente) */ .linha-arrastavel.dragging { opacity: 0.5; background-color: #e3f2fd; border: 2px dashed #2980b9; } /* Quando passa por cima de outro item (alvo) */ .linha-arrastavel.drag-over-target { border-top: 3px solid #2980b9 !important; /* Linha azul indicando onde vai cair */ transform: translateY(2px); } .drag-handle { cursor: grab; font-size: 18px; color: #999; margin-right: 8px; user-select: none; } .drag-handle:hover { color: #333; } /* --- CORREÇÃO DE VAZAMENTO (LAYOUT DO CARD) --- */ /* 1. Garante que os botões quebrem linha se faltar espaço */ .estoque-comida-wrapper li > div:last-child { display: flex !important; flex-wrap: wrap !important; /* <--- O SEGRED0: Permite cair pra linha de baixo */ gap: 5px !important; justify-content: center !important; /* Centraliza os botões */ width: 100% !important; box-sizing: border-box !important; } /* 2. Força os botões a não terem largura fixa gigante */ .estoque-comida-wrapper li button { flex-shrink: 1 !important; /* Permite encolher levemente se necessário */ white-space: nowrap !important; /* O texto do botão não quebra */ max-width: 100% !important; } /* 3. Ajuste específico para o Teletransporte (o popup da imagem) */ #teleport-card-container li { width: 350px !important; /* Largura fixa */ max-width: 90vw !important; /* Segurança para celular */ height: auto !important; /* Altura automática para crescer se os botões descerem */ padding-bottom: 15px !important; /* Espaço extra no final */ overflow: visible !important; /* Permite ver sombras/badges */ } /* 4. Garante que o texto longo da tarefa quebre linha corretamente */ .item-nome-tarefa { word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100% !important; } /* --- CORREÇÃO DE VAZAMENTO (LAYOUT DO CARD) --- */ /* 1. Garante que os botões quebrem linha (FUNCIONA NA LISTA E NO POPUP) */ .estoque-comida-wrapper li > div:last-child, #teleport-card-container li > div:last-child { display: flex !important; flex-wrap: wrap !important; /* Permite cair pra linha de baixo */ gap: 5px !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; margin-top: auto !important; /* Empurra para o fundo se sobrar espaço */ } /* 2. Força os botões a não terem largura fixa gigante */ .estoque-comida-wrapper li button, #teleport-card-container li button { flex-shrink: 1 !important; white-space: nowrap !important; max-width: 100% !important; min-width: auto !important; /* Remove largura mínima forçada */ } /* 3. Ajuste específico para o Teletransporte (o popup) */ #teleport-card-container li { width: 350px !important; max-width: 90vw !important; height: auto !important; padding: 20px !important; padding-bottom: 25px !important; /* Mais espaço embaixo para os botões */ overflow: visible !important; /* Garante que o layout interno do card seja vertical */ display: flex !important; flex-direction: column !important; align-items: center !important; } /* 4. Garante que o texto longo da tarefa quebre linha corretamente */ .item-nome-tarefa { word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; max-width: 100% !important; text-align: center; /* Centraliza o texto no popup */ } /* --- CORREÇÃO DE CORES DOS BOTÕES NO TELETRANSPORTE --- */ /* 1. Estilo base dos botões no popup */ #teleport-card-container button { border: none !important; border-radius: 6px !important; color: white !important; /* Texto branco */ font-weight: bold !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; opacity: 1 !important; visibility: visible !important; cursor: pointer !important; transition: transform 0.2s !important; } #teleport-card-container button:hover { transform: scale(1.05) !important; filter: brightness(1.1); } /* 2. Devolvendo as cores específicas para cada botão */ /* Botão Editar (Verde Água) */ #teleport-card-container .btn-editar { background-color: #1abc9c !important; } /* Botão Apagar (Vermelho) */ #teleport-card-container .btn-apagar { background-color: #e74c3c !important; } /* Botão Duplicar (Roxo) */ #teleport-card-container .btn-duplicar { background-color: #8e44ad !important; } /* Botão Delegar (Roxo Claro) */ #teleport-card-container .btn-delegar { background-color: #9b59b6 !important; } /* Botão Emergência (Vermelho Alerta) */ #teleport-card-container .btn-emergencia { background-color: #d32f2f !important; } /* Botão Importante (Amarelo) - Texto Escuro */ #teleport-card-container .btn-importante { background-color: #fbc02d !important; color: #333 !important; } /* Botão Concluir (Azul) */ #teleport-card-container .btn-concluir { background-color: #3498db !important; } /* Botão Voltar (Roxo Escuro ou Laranja dependendo do contexto) */ #teleport-card-container .btn-voltar-estoque { background-color: #8e44ad !important; } /* Botão Timer (Azul Escuro quando parado, Verde quando rodando) */ #teleport-card-container .btn-timer { background-color: #34495e !important; } #teleport-card-container .btn-timer-ativo { background-color: #2ecc71 !important; animation: pulse-green 1.5s infinite; } /* Botão Reset Timer (Vermelho texto) */ #teleport-card-container .btn-reset-timer { background: transparent !important; color: #e74c3c !important; box-shadow: none !important; font-size: 18px !important; } /* Botão Pular (Cinza) */ #teleport-card-container .btn-pular { background-color: #7f8c8d !important; } /* --- NOVO CSS PARA O BOTÃO X E TEXTO LARANJA --- */ /* Estilo do Botão X no canto do card */ .teleport-close-btn { position: absolute; top: 5px; right: 12px; font-size: 28px; color: #95a5a6; /* Cinza claro */ cursor: pointer; font-weight: bold; z-index: 100; line-height: 1; transition: color 0.2s; } .teleport-close-btn:hover { color: #e74c3c; /* Vermelho ao passar o mouse */ transform: scale(1.1); } /* Estilo do Texto de Dica (Laranja) */ .teleport-hint { color: #ff9f43 !important; /* Laranja vibrante */ font-weight: 800; /* Negrito */ font-size: 15px; margin-top: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* Sombra preta para ler melhor */ text-align: center; } /* --- CORREÇÃO DE LAYOUT: BOTÕES VAZANDO --- */ /* 1. Permite que o cartão cresça em altura para caber o conteúdo */ #teleport-card-container li.kanban-card { height: auto !important; /* Remove altura fixa */ min-height: 250px; /* Define uma altura mínima razoável */ display: flex; /* Usa flexbox para organizar o conteúdo */ flex-direction: column; /* Organiza em coluna (topo a baixo) */ padding-bottom: 15px; /* Adiciona um espaço extra no fundo */ } /* 2. Faz o corpo do texto ocupar o espaço disponível */ #teleport-card-container .item-conteudo { flex: 1 1 auto; /* Cresce para ocupar espaço */ margin-bottom: 10px; /* Espaço entre o texto e os botões */ } /* 3. Configura o container dos botões para quebrar linha */ #teleport-card-container .item-acoes { display: flex; flex-wrap: wrap; /* Permite que os botões pulem para a próxima linha */ justify-content: center; /* Centraliza os botões */ gap: 8px; /* Espaço entre os botões (horizontal e vertical) */ width: 100%; /* Garante que o container ocupe a largura total */ margin-top: auto; /* Empurra o container para o final do cartão */ } /* Opcional: Ajusta um pouco a margem dos botões individuais para o wrap ficar bonito */ #teleport-card-container .btn-acao-item { margin: 0 !important; /* Remove margens antigas, pois agora usamos 'gap' */ } /* --- CORREÇÃO FINAL: ALINHAMENTO E VAZAMENTO --- */ /* 1. Obriga o cartão a crescer com o conteúdo (para não vazar nada) */ #teleport-card-container li { height: auto !important; /* Altura automática */ min-height: auto !important; /* Remove travas de altura */ padding: 25px 20px !important; /* Padding interno confortável */ display: flex !important; flex-direction: column !important; align-items: center !important; /* Centraliza tudo */ box-sizing: border-box !important; } /* 2. Organiza a área dos botões para preencher a largura total */ #teleport-card-container li > div:last-child { display: flex !important; flex-wrap: wrap !important; /* Permite quebra de linha */ justify-content: center !important; gap: 8px !important; /* Espaço uniforme entre botões */ width: 100% !important; /* Ocupa a largura toda do cartão */ margin-top: 15px !important; /* Separa do texto da tarefa */ } /* 3. O SEGREDO DO ALINHAMENTO: Faz os botões crescerem iguais (tira o torto) */ #teleport-card-container li > div:last-child > * { flex: 1 1 auto !important; /* Estica para preencher espaços vazios */ min-width: 50px !important; /* Tamanho mínimo para ícones */ height: 40px !important; /* Altura padrão para todos ficarem iguais */ margin: 0 !important; /* Remove margens antigas */ display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; /* Arredondamento suave */ } /* 4. Dá preferência de tamanho para botões com texto (Voltar/Concluir) */ #teleport-card-container .btn-voltar-estoque, #teleport-card-container .btn-concluir { flex-grow: 2 !important; /* Crescem mais que os ícones */ min-width: 100px !important; } /* Botão de Adicionar Rápido no Cabeçalho do Relatório */ .btn-add-relatorio { background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.5); padding: 6px 12px; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px; margin-right: 15px; /* Afasta do X de fechar */ } .btn-add-relatorio:hover { background-color: white; color: #333; transform: scale(1.05); } .atalho-badge { cursor: pointer; /* Mãozinha apenas no badge */ transition: all 0.2s; z-index: 10; /* Garante que fique acima */ position: relative; } .atalho-badge:hover { transform: scale(1.1); /* Aumenta um pouco */ filter: brightness(1.2); /* Fica mais brilhante */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* --- ESTILO DOS ATALHOS RÁPIDOS --- */ .btn-atalho-interno { display: inline-block; background-color: #2980b9; /* Azul forte */ color: white; padding: 4px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; text-decoration: none; margin: 3px; cursor: pointer; border: 1px solid #3498db; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-atalho-interno:hover { background-color: #1abc9c; /* Verde água ao passar o mouse */ transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* Oculta a barra de ações em massa sem remover sua existência no código */ /* --- CORREÇÃO DA BARRA DE AÇÕES EM MASSA --- */ #bulk-action-bar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(150%); /* Começa escondida para baixo */ background-color: #2c3e50; color: white; padding: 15px 25px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; /* Define layout flexivel */ align-items: center; gap: 15px; z-index: 10001; /* Acima de tudo */ transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); visibility: hidden; /* Invisível por padrão */ } /* Quando a classe 'visible' for adicionada pelo JS, ela aparece */ #bulk-action-bar.visible { transform: translateX(-50%) translateY(0); /* Sobe para o lugar certo */ visibility: visible; display: flex !important; /* Força aparecer */ } /* Estilo para Tarefas Espelhadas (Clones) */ .item-espelhado { border-right: 8px double #3498db !important; /* Borda dupla azul na direita */ background-image: linear-gradient(45deg, #ffffff 25%, #f1f7ff 25%, #f1f7ff 50%, #ffffff 50%, #ffffff 75%, #f1f7ff 75%, #f1f7ff 100%); background-size: 20px 20px; /* Fundo levemente listrado para diferenciar */ } .badge-espelho { background-color: #3498db; color: white; font-size: 10px; padding: 2px 5px; border-radius: 4px; font-weight: bold; margin-right: 5px; } /* Estilos para o Modal de Seleção de Coluna na Clonagem */ .modal-selecao-colunas .modal-content { background-color: #ffffff !important; /* Fundo branco sólido */ max-width: 500px; height: 80vh; display: flex; flex-direction: column; opacity: 1 !important; /* Garante que não esteja transparente */ box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra para destacar do fundo */ border-radius: 12px; overflow: hidden; } .lista-opcoes-clonagem { background-color: #ffffff !important; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; padding: 15px; } .btn-opcao-coluna { background-color: #f8f9fa; /* Cor de fundo leve para os itens */ display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; text-align: left; color: #333; } .btn-opcao-coluna:hover { background-color: #e3f2fd; border-color: #2196f3; transform: translateX(5px); } /* Estilos para a lista de ordenação nos indicadores */ .linha-arrastavel { cursor: grab; transition: background-color 0.2s, transform 0.2s; } .linha-arrastavel:active { cursor: grabbing; } .linha-arrastavel.dragging { opacity: 0.4; background-color: #e3f2fd; border: 2px dashed #2980b9; } .linha-arrastavel.drag-over-target { border-top: 3px solid #2980b9 !important; transform: translateY(2px); } .drag-handle { cursor: grab; font-size: 18px; color: #999; margin-right: 12px; user-select: none; } /* Estilo para a busca dentro do modal de indicadores */ .modal-search-container { padding: 12px 20px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; position: sticky; top: 0; z-index: 100; } .modal-search-input { width: 100%; padding: 10px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; } .modal-search-input:focus { border-color: #3498db; } /* Bloqueia o menu nativo do iOS para permitir o menu de cores */ .filtro-projeto-btn, .filtro-papel-btn, .filtro-filial-btn, .filtro-departamento-btn, .filtro-equipe-btn, .filtro-cargo-btn, .filtro-processo-btn, .filtro-resp-btn { -webkit-touch-callout: none !important; /* Impede o menu do sistema iOS */ -webkit-user-select: none !important; /* Impede a seleção de texto */ user-select: none !important; touch-action: manipulation; /* Melhora a resposta ao toque */ } .filtro-projeto-btn, .filtro-papel-btn, .filtro-filial-btn, .filtro-departamento-btn, .filtro-equipe-btn, .filtro-cargo-btn, .filtro-processo-btn, .filtro-resp-btn { -webkit-tap-highlight-color: transparent; /* Remove o flash cinza ao tocar */ touch-action: none; /* Impede o scroll da página enquanto você segura o botão */ } /* Container do botão de filtro para aceitar a bolinha */ .filtro-wrapper button { display: inline-flex; align-items: center; gap: 8px; /* Espaço entre bolinha e texto */ padding-left: 10px !important; } /* A bolinha (paleta) */ .btn-color-trigger { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; background-color: rgba(0,0,0,0.08); border-radius: 50%; font-size: 12px; cursor: pointer; transition: all 0.2s; border: 1px solid rgba(0,0,0,0.1); } .btn-color-trigger:hover { transform: scale(1.15); background-color: rgba(0,0,0,0.15); border-color: rgba(0,0,0,0.3); } /* Garante que o iPhone reconheça o clique na bolinha */ .btn-color-trigger { cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); /* Remove o flash cinza do iOS */ user-select: none; touch-action: manipulation; display: inline-flex !important; /* Garante que o tamanho seja respeitado */ position: relative; z-index: 10; } /* Evita que o menu de contexto suma por erro de renderização no iOS */ #custom-context-menu { -webkit-overflow-scrolling: touch; backface-visibility: hidden; } .btn-acao-indicador { transition: transform 0.2s; font-size: 14px; } .btn-acao-indicador:hover { transform: scale(1.1); } /* Garante que o novo botão de editar no Kanban seja visível */ .kanban-dropzone .btn-editar-kanban { display: inline-block !important; /* Sobrescreve o display:none geral do kanban */ visibility: visible !important; opacity: 1 !important; min-width: 30px !important; flex-grow: 0 !important; padding: 4px 8px !important; font-size: 12px !important; } /* Ajuste opcional para o container de botões no Kanban para caber o novo botão */ .kanban-dropzone li > div:last-child > div { flex-wrap: wrap !important; gap: 2px !important; } body.clean-view-active .estoque-comida-wrapper li > div:last-child, body.clean-view-active .kanban-dropzone li > div:last-child { display: none !important; } body.clean-view-active .estoque-comida-wrapper li { padding-bottom: 12px !important; } /* Regra da Visão Clean */ body.clean-view-active .estoque-comida-wrapper li > div:last-child, body.clean-view-active .kanban-dropzone li > div:last-child { display: none !important; } /* Ajuste visual para o card não ficar com espaço vazio embaixo */ body.clean-view-active .estoque-comida-wrapper li { padding-bottom: 12px !important; min-height: auto !important; } /* Força o sumiço dos botões e cronômetros */ body.clean-view-active .estoque-comida-wrapper li > div:last-child, body.clean-view-active .kanban-dropzone li > div:last-child { display: none !important; } /* Ajusta a altura do card para não ficar um buraco vazio */ body.clean-view-active .estoque-comida-wrapper li { padding-bottom: 12px !important; min-height: auto !important; } /* Esconde a área de botões por padrão (FORÇADO) */ .area-botoes-tarefa { display: none !important; /* <--- Adicione !important aqui */ flex-wrap: wrap; gap: 5px; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ccc; } /* Mostra apenas se tiver a classe 'visivel' */ .area-botoes-tarefa.visivel { display: flex !important; } /* Estilo do botão de expansão (os três pontinhos ou seta) */ .btn-expandir-tarefa { background-color: #f1f2f6 !important; color: #2c3e50 !important; border: 1px solid #ccc !important; border-radius: 4px; padding: 2px 8px !important; font-size: 16px !important; cursor: pointer; } .btn-expandir-tarefa:hover { background-color: #dfe4ea !important; } .area-botoes-tarefa.visivel { display: flex !important; } /* Correção: Se eu clicar na engrenagem, MOSTRAR os botões mesmo com a Visão Clean ativa */ body.clean-view-active .area-botoes-tarefa.visivel { display: flex !important; flex-wrap: wrap !important; width: 100% !important; } /* Garante que o container comece oculto */ .area-botoes-tarefa { display: none !important; } /* Regra normal para mostrar quando não está no modo clean */ .area-botoes-tarefa.visivel { display: flex !important; } /* --- CORREÇÃO DA ENGRENAGEM NO MODO CLEAN --- */ /* 1. Regra padrão: Esconde botões no modo clean */ body.clean-view-active .estoque-comida-wrapper li > div:last-child, body.clean-view-active .kanban-dropzone li > div:last-child { display: none !important; } /* 2. EXCEÇÃO (O PULO DO GATO): Se tiver a classe .visivel, MOSTRA (força flex) */ body.clean-view-active .estoque-comida-wrapper li > div:last-child.visivel, body.clean-view-active .kanban-dropzone li > div:last-child.visivel { display: flex !important; } /* --- CORREÇÃO DA ENGRENAGEM NO MODO CLEAN --- */ /* 1. Regra padrão: Esconde botões no modo clean */ body.clean-view-active .estoque-comida-wrapper li > div:last-child, body.clean-view-active .kanban-dropzone li > div:last-child { display: none !important; } /* 2. EXCEÇÃO: Se o elemento tiver a classe .visivel (adicionada pela engrenagem), MOSTRA! */ body.clean-view-active .estoque-comida-wrapper li > div:last-child.visivel, body.clean-view-active .kanban-dropzone li > div:last-child.visivel { display: flex !important; } /* --- ESTILO DA IMAGEM DE CAPA NOS CARDS --- */ /* --- ESTILO DA IMAGEM DE CAPA NOS CARDS --- */ .card-imagem-capa { width: 100%; height: 120px; /* <--- ESTE É O VALOR QUE VOCÊ VAI MUDAR */ object-fit: cover; /* Corta a imagem para preencher sem esticar */ border-radius: 6px; margin-bottom: 8px; display: block; background-color: #f0f0f0; /* Fundo cinza enquanto carrega */ } /* Ajuste para quando a visão clean estiver ativa (opcional: pode diminuir a imagem) */ body.clean-view-active .card-imagem-capa { height: 140px; /* Fica mais fininha no modo clean */ } /* --- BADGE DE ORÇAMENTO --- */ .orcamento-badge { background-color: #2ecc71; /* Verde Dinheiro */ color: white; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid #27ae60; } /* --- ESTILOS DO ARRASTO NO RELATÓRIO --- */ .linha-arrastavel { cursor: grab; transition: background-color 0.2s, transform 0.2s; } .linha-arrastavel:active { cursor: grabbing; } /* Item sendo arrastado (fica transparente) */ .linha-arrastavel.dragging { opacity: 0.5; background-color: #e3f2fd !important; border: 2px dashed #2980b9; } /* Indicador de onde vai cair */ .linha-arrastavel.drag-over-target { border-top: 3px solid #2980b9 !important; transform: translateY(2px); } /* Ícone de mãozinha */ .drag-handle-rel { cursor: grab; font-size: 16px; color: #999; margin-right: 8px; user-select: none; } .drag-handle-rel:hover { color: #333; } /* --- BADGE DE ORÇAMENTO SONHOS --- */ .orcamento-sonhos-badge { background-color: #9b59b6; /* Roxo Sonho */ color: white; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid #8e44ad; } /* --- BADGE DE DÍVIDAS --- */ .dividas-badge { background-color: #e74c3c; /* Vermelho Suave */ color: white; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid #c0392b; } /* --- BADGE DE CONTATO/TEMPO --- */ .contato-badge { background-color: #00bcd4; /* Cyan */ color: white; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid #0097a7; } /* Estilo para quando estoura o tempo limite */ .contato-badge.estourado { background-color: #c0392b !important; /* Vermelho Alerta */ border-color: #922b21 !important; animation: pulse-border 2s infinite; } /* Botão de Adicionar dentro do Relatório */ .btn-add-relatorio-top { background-color: rgba(255, 255, 255, 0.2); /* Fundo transparente branco */ color: white; border: 1px solid rgba(255, 255, 255, 0.6); padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.2s; margin-right: 15px; /* Afasta do X */ display: flex; align-items: center; gap: 5px; } .btn-add-relatorio-top:hover { background-color: white; color: #8e44ad; /* Texto fica Roxo ao passar o mouse */ transform: scale(1.05); } /* --- BOTÕES VISÍVEIS NO KANBAN --- */ /* 1. Força a barra de botões a aparecer no Kanban, mesmo no modo Clean */ body.clean-view-active .kanban-dropzone li .kanban-card-actions { display: flex !important; gap: 4px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #eee; justify-content: flex-end; /* Alinha à direita */ } /* 2. Estilo dos botões pequenos do Kanban */ .btn-mini-kanban { border: none; border-radius: 4px; color: white; font-size: 12px; font-weight: bold; cursor: pointer; width: 28px; /* Largura fixa quadrada */ height: 28px; /* Altura fixa quadrada */ display: flex; align-items: center; justify-content: center; transition: transform 0.2s; line-height: 1; padding: 0; } .btn-mini-kanban:hover { transform: scale(1.1); filter: brightness(1.1); } /* --- ESTILO DOS BOTÕES RÁPIDOS (RODAPÉ DO CARD) --- */ .quick-actions-row { display: flex; align-items: center; justify-content: space-between; /* Engrenagem na esq, Ações na dir */ margin-top: 8px; padding-top: 6px; border-top: 1px solid #eee; width: 100%; } .quick-actions-right { display: flex; gap: 5px; } .btn-quick-action { background-color: transparent; border: 1px solid #ddd; border-radius: 4px; padding: 3px 8px; font-size: 14px; cursor: pointer; transition: all 0.2s; } .btn-quick-action:hover { transform: scale(1.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Garante que a gaveta oculta ocupe 100% quando abrir */ .area-botoes-tarefa { width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #ccc; display: none; /* Começa escondida */ flex-wrap: wrap; gap: 5px; } .area-botoes-tarefa.visivel { display: flex; } /* --- ESTILO DO DESTAQUE DA PESQUISA DE COLUNAS --- */ .destaque-busca { background-color: #fff176 !important; /* Amarelo vibrante */ border: 2px solid #fbc02d !important; /* Borda dourada */ box-shadow: 0 0 15px rgba(251, 192, 45, 0.5) !important; transform: scale(1.02); z-index: 10; transition: all 0.3s ease; } /* Item selecionado para mover em grupo */ .item-arrastavel.selecionado { background-color: #d1ecf1 !important; /* Azul claro */ border: 1px solid #17a2b8 !important; } /* Quando estiver arrastando o grupo */ .item-arrastavel.ghost-hidden { opacity: 0.2; } /* --- BOTÃO FLUTUANTE DE ADICIONAR (+) --- */ .fab-add-btn { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; background-color: #27ae60; /* Verde igual ao original */ color: white; border: none; border-radius: 50%; /* Faz ficar redondo */ font-size: 35px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Sombra para dar destaque */ cursor: pointer; z-index: 9990; /* Fica acima de tudo, mas abaixo dos modais */ display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; padding-bottom: 4px; /* Ajuste fino visual do + */ } .fab-add-btn:hover { transform: scale(1.1); /* Aumenta um pouco ao passar o mouse */ background-color: #219d55; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-add-btn:active { transform: scale(0.95); /* Efeito de clique */ } /* Ajuste para Celular */ @media (max-width: 600px) { .fab-add-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 28px; } } /* --- ESTILO DA LISTA DE SUGESTÕES DE PESQUISA --- */ #search-suggestions-dropdown { position: absolute; background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 8px 8px; width: 100%; /* 👇 LIMITA A ALTURA PARA NÃO COBRIR TUDO 👇 */ max-height: 40vh; /* Ocupa no máximo 40% da altura da tela */ overflow-y: auto; /* Cria barra de rolagem se passar disso */ z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: none; } .search-suggestion-item { padding: 10px 15px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.1s; } .search-suggestion-item:hover { background-color: #f1f8ff; /* Azulzinho claro ao passar o mouse */ } .search-suggestion-item:last-child { border-bottom: none; } /* Ajuste no container da barra de pesquisa para posicionar o dropdown */ .search-bar-container { position: relative; /* Necessário para o absolute funcionar */ } /* --- BOTÃO FLUTUANTE DE PESQUISA (🔍) --- */ .fab-search-btn { position: fixed; bottom: 110px; /* Fica acima do botão de adicionar (40px + 60px altura + 10px espaço) */ right: 40px; width: 60px; height: 60px; background-color: #2980b9; /* Azul para diferenciar */ color: white; border: none; border-radius: 50%; font-size: 24px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; } .fab-search-btn:hover { transform: scale(1.1); background-color: #3498db; /* Azul mais claro no hover */ box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-search-btn:active { transform: scale(0.95); } /* Ajuste para Celular - Mantém a pilha alinhada */ @media (max-width: 600px) { .fab-search-btn { bottom: 80px; /* Ajuste proporcional ao botão de add mobile */ right: 20px; width: 50px; height: 50px; font-size: 20px; } } /* --- BOTÃO FLUTUANTE DE FILTRO DE BOTÕES (🎛️) --- */ .fab-filter-btn { position: fixed; bottom: 180px; /* Fica acima do botão de pesquisa (110px + 60px + 10px) */ right: 40px; width: 60px; height: 60px; background-color: #8e44ad; /* Roxo para diferenciar */ color: white; border: none; border-radius: 50%; font-size: 24px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; } .fab-filter-btn:hover { transform: scale(1.1); background-color: #9b59b6; /* Roxo mais claro */ box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-filter-btn:active { transform: scale(0.95); } /* Ajuste para Celular - Mantém a pilha alinhada */ @media (max-width: 600px) { .fab-filter-btn { bottom: 140px; /* Ajuste proporcional ao mobile */ right: 20px; width: 50px; height: 50px; font-size: 20px; } } /* --- BOTÃO FLUTUANTE DE ADICIONAR COLUNA (➕ Coluna) --- */ .fab-add-col-btn { position: fixed; bottom: 250px; /* Fica acima do botão de filtro (180px + 60px + 10px) */ right: 40px; width: 60px; height: 60px; background-color: #2c3e50; /* Cinza escuro/Preto para diferenciar */ color: white; border: none; border-radius: 50%; font-size: 24px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; border: 2px solid white; /* Borda branca para destacar no fundo escuro */ } .fab-add-col-btn:hover { transform: scale(1.1); background-color: #34495e; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-add-col-btn:active { transform: scale(0.95); } /* Ajuste para Celular */ @media (max-width: 600px) { .fab-add-col-btn { bottom: 200px; /* Ajuste proporcional ao mobile */ right: 20px; width: 50px; height: 50px; font-size: 20px; } } /* --- BOTÃO FLUTUANTE DE IR PARA O KANBAN (📋) --- */ .fab-kanban-scroll-btn { position: fixed; bottom: 320px; /* Fica acima do botão de add coluna (250px + 60px + 10px) */ right: 40px; width: 60px; height: 60px; background-color: #e67e22; /* Laranja para diferenciar */ color: white; border: none; border-radius: 50%; font-size: 24px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; } .fab-kanban-scroll-btn:hover { transform: scale(1.1); background-color: #d35400; /* Laranja mais escuro no hover */ box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-kanban-scroll-btn:active { transform: scale(0.95); } /* Ajuste para Celular */ @media (max-width: 600px) { .fab-kanban-scroll-btn { bottom: 260px; /* Ajuste proporcional ao mobile */ right: 20px; width: 50px; height: 50px; font-size: 20px; } } /* --- BOTÃO FLUTUANTE DE IR PARA 'PARA FAZER' (🔥) --- */ .fab-todo-scroll-btn { position: fixed; bottom: 390px; /* Fica acima do botão do Kanban (320px + 60px + 10px) */ right: 40px; width: 60px; height: 60px; background-color: #c0392b; /* Vermelho escuro para diferenciar */ color: white; border: none; border-radius: 50%; font-size: 28px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; line-height: 1; } .fab-todo-scroll-btn:hover { transform: scale(1.1); background-color: #e74c3c; /* Vermelho mais claro no hover */ box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .fab-todo-scroll-btn:active { transform: scale(0.95); } /* Ajuste para Celular */ @media (max-width: 600px) { .fab-todo-scroll-btn { bottom: 320px; /* Ajuste proporcional ao mobile */ right: 20px; width: 50px; height: 50px; font-size: 24px; } } /* --- CORREÇÃO DOS BOTÕES DE AÇÃO DO CARD (Rodapé) --- */ /* 1. Alinha o container dos botões à direita */ .quick-actions-right { display: flex !important; align-items: center !important; gap: 6px !important; /* Espaço uniforme entre os botões */ } /* 2. Estilo UNIFICADO para todos os botões (Ícones e Texto) */ .btn-quick-action { /* Tamanho e Forma */ height: 32px !important; /* Altura fixa igual para todos */ min-width: 32px !important; /* Largura mínima para ficarem quadradinhos */ border-radius: 6px !important; /* Centralização do Ícone/Texto */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Fonte e Cor */ font-size: 15px !important; /* Ícone um pouco maior */ background-color: #fff !important; /* Fundo branco limpo */ border-width: 1px !important; border-style: solid !important; /* Espaçamento */ padding: 0 !important; /* Remove padding excessivo dos ícones */ margin: 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; transition: transform 0.2s, background-color 0.2s !important; } /* 3. Regra especial para botões que têm TEXTO (Ex: "Voltar", "Concluir") */ /* Se o botão tiver mais que 2 letras, aumentamos o padding lateral */ .btn-quick-action:not([title="Editar"]):not([title="Duplicar"]):not([title="Excluir"]):not([title="Concluir Tarefa"]) { padding: 0 10px !important; /* Espaço para o texto respirar */ font-size: 12px !important; /* Texto um pouco menor que o ícone */ font-weight: bold !important; width: auto !important; /* Largura automática para caber o texto */ } /* Efeito ao passar o mouse */ .btn-quick-action:hover { transform: translateY(-2px) !important; /* Sobe levemente */ filter: brightness(0.95); /* Escurece um pouco */ box-shadow: 0 3px 5px rgba(0,0,0,0.15) !important; } /* --- CORREÇÃO FINAL DOS BOTÕES (Vazamento e Proporção) --- */ /* 1. Container Principal da Linha de Ações */ .quick-actions-row { display: flex !important; flex-wrap: wrap !important; /* O PULO DO GATO: Permite quebrar linha */ align-items: center !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; gap: 5px !important; } /* 2. Container dos Botões da Direita */ .quick-actions-right { display: flex !important; flex-wrap: wrap !important; /* Permite que os botões caiam se apertar */ justify-content: flex-end !important; /* Alinha tudo à direita */ gap: 4px !important; flex: 1 !important; /* Ocupa todo o espaço disponível */ } /* 3. Estilo UNIFICADO dos Botões (Quadrados e Retangulares) */ .btn-quick-action { /* Altura fixa para todos ficarem iguais */ height: 30px !important; /* Centralização perfeita */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Reset de bordas e preenchimento */ padding: 0 !important; border-radius: 6px !important; border: 1px solid #ddd !important; background-color: white !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; /* Tamanho mínimo para os ícones (Quadrados) */ min-width: 30px !important; font-size: 14px !important; line-height: 1 !important; margin: 0 !important; /* Remove margens extras que causam vazamento */ } /* 4. Regra Especial para Botões com TEXTO (Ex: Voltar, Concluir) */ /* Seleciona botões que NÃO são apenas ícones conhecidos */ .btn-quick-action:not([title="Editar"]):not([title="Duplicar"]):not([title="Excluir"]):not([title="Mais ações"]) { padding: 0 10px !important; /* Dá ar para o texto */ width: auto !important; /* Largura automática */ font-size: 11px !important; /* Texto levemente menor para caber */ font-weight: 700 !important; } /* 5. Ajuste no botão da Engrenagem (Esquerda) para não ser esmagado */ .btn-expandir-tarefa { flex-shrink: 0 !important; height: 30px !important; width: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid transparent !important; } /* --- CORREÇÃO DO BOTÃO ENGRENAGEM (Proporção) --- */ .btn-expandir-tarefa { /* 1. Tamanho idêntico aos outros botões */ height: 30px !important; width: 30px !important; min-width: 30px !important; /* 2. Visual idêntico (Fundo branco e borda) */ background-color: #ffffff !important; border: 1px solid #ddd !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; color: #333 !important; /* 3. Centralização do ícone */ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; /* 4. Ajuste da fonte do emoji */ font-size: 16px !important; cursor: pointer !important; transition: transform 0.2s, background-color 0.2s !important; } /* Efeito ao passar o mouse */ .btn-expandir-tarefa:hover { background-color: #f8f9fa !important; transform: translateY(-2px) !important; box-shadow: 0 3px 5px rgba(0,0,0,0.15) !important; } /* --- AJUSTE FINAL: ENGRENAGEM E BOTÃO VOLTAR --- */ /* 1. Deixa a Engrenagem IDÊNTICA aos outros botões */ .btn-expandir-tarefa { height: 30px !important; width: 30px !important; min-width: 30px !important; /* Garante que não esmague */ background-color: #ffffff !important; border: 1px solid #ddd !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; color: #555 !important; /* Cor do ícone */ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; font-size: 16px !important; cursor: pointer !important; transition: all 0.2s !important; } .btn-expandir-tarefa:hover { background-color: #f8f9fa !important; transform: translateY(-2px) !important; } /* 2. Força o botão de VOLTAR a ficar quadrado (após mudarmos o texto no JS) */ .btn-quick-action[title="Voltar para a lista vertical"], .btn-voltar-estoque { width: 30px !important; min-width: 30px !important; padding: 0 !important; /* Remove o espaçamento lateral */ justify-content: center !important; } /* --- CORREÇÃO DEFINITIVA: ALINHAMENTO E PROPORÇÃO DOS BOTÕES --- */ /* 1. O Container dos botões da direita */ .quick-actions-right { display: flex !important; align-items: center !important; /* Centraliza verticalmente */ justify-content: flex-end !important; gap: 4px !important; /* Espacinho igual entre eles */ height: 30px !important; /* Altura fixa para o container */ } /* 2. Regra MESTRA para TODOS os botões dessa área (Editar, Duplicar, Excluir, Voltar, Concluir) */ .quick-actions-right button { /* Força o tamanho quadrado igual */ height: 30px !important; width: 30px !important; min-width: 30px !important; /* Centraliza o ícone perfeitamente */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Reseta estilos que atrapalham */ padding: 0 !important; margin: 0 !important; /* Visual padrão limpo */ background-color: #fff !important; border: 1px solid #ccc !important; border-radius: 6px !important; font-size: 14px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; transition: all 0.2s !important; } /* Efeito ao passar o mouse (pulo leve) */ .quick-actions-right button:hover { transform: translateY(-2px); box-shadow: 0 3px 5px rgba(0,0,0,0.15) !important; z-index: 2; /* Fica por cima se sobrepor */ } /* --- Cores Específicas para os Ícones (opcional, para ficar bonito) --- */ /* Botão Voltar (Laranja) */ .quick-actions-right button[title*="Voltar"], .quick-actions-right button:first-child { color: #e67e22 !important; border-color: #e67e22 !important; } /* Botão Concluir/Check (Verde) */ .quick-actions-right button[title*="Concluir"], .quick-actions-right button:nth-child(2) { /* Geralmente é o segundo */ color: #27ae60 !important; border-color: #27ae60 !important; } /* Botão Editar (Verde Água) */ .quick-actions-right button[title="Editar"] { color: #1abc9c !important; } /* Botão Duplicar (Roxo) */ .quick-actions-right button[title="Duplicar"] { color: #8e44ad !important; } /* Botão Excluir (Vermelho) */ .quick-actions-right button[title="Excluir"] { color: #c0392b !important; border-color: #fab1a0 !important; } /* --- CORREÇÃO FINAL: FORÇAR LINHA ÚNICA HORIZONTAL --- */ /* 1. A Linha Principal (Pai de todos os botões) */ .quick-actions-row { display: flex !important; flex-direction: row !important; /* Força direção horizontal */ flex-wrap: nowrap !important; /* ⛔ PROIBIDO quebrar linha */ align-items: center !important; /* Centraliza verticalmente */ justify-content: flex-end !important; /* Joga tudo para a direita (ou space-between se preferir separado) */ width: 100% !important; gap: 4px !important; /* Espaço entre a engrenagem e o grupo da direita */ /* Segurança: Se a coluna for muito fina, cria rolagem lateral em vez de quebrar */ overflow-x: auto !important; overflow-y: hidden !important; padding-bottom: 2px !important; /* Espaço para a barra de rolagem sutil */ } /* 2. O Grupo da Direita (Lápis, Lixo, etc) */ .quick-actions-right { display: flex !important; flex-wrap: nowrap !important; /* ⛔ PROIBIDO quebrar linha aqui também */ align-items: center !important; gap: 3px !important; /* Botões bem juntinhos */ } /* 3. Estilo UNIFICADO para TODOS os botões (Engrenagem + Ações) */ .btn-quick-action, .btn-expandir-tarefa { /* Tamanho Compacto e Igual */ height: 28px !important; width: 28px !important; min-width: 28px !important; /* Centralização */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Reset de margens e padding */ margin: 0 !important; padding: 0 !important; /* Garante que o botão não encolha */ flex-shrink: 0 !important; /* Visual */ border-radius: 4px !important; font-size: 13px !important; /* Ícone levemente menor */ background-color: white !important; border: 1px solid #ccc !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; } /* 4. Estilização da Barra de Rolagem (para ficar discreta se aparecer) */ .quick-actions-row::-webkit-scrollbar { height: 2px; /* Barra bem fininha */ } .quick-actions-row::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; } /* --- CORREÇÃO FINAL: MODO COMPACTO PARA CABER TUDO --- */ /* 1. Container Principal: Removemos a rolagem e ajustamos o espaçamento */ .quick-actions-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; /* Engrenagem na esquerda, resto na direita */ width: 100% !important; gap: 2px !important; /* Espaço mínimo entre a engrenagem e o grupo */ overflow: visible !important; /* Remove a barra de rolagem, pois agora vai caber */ } /* 2. Grupo da Direita: Aperta os botões */ .quick-actions-right { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; /* Botões bem juntinhos (3px de distância) */ flex-shrink: 0 !important; /* Impede que esse grupo seja esmagado */ } /* 3. BOTÕES MENORES (A Mágica acontece aqui) */ /* Afeta: Ações Rápidas, Engrenagem e Botão Voltar */ .btn-quick-action, .btn-expandir-tarefa, .btn-voltar-estoque { /* Tamanho reduzido para 26px (era 30px) */ height: 26px !important; width: 26px !important; min-width: 26px !important; /* Fonte ajustada */ font-size: 13px !important; /* Reset total de espaçamentos */ padding: 0 !important; margin: 0 !important; /* Centralização e Visual */ display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; border: 1px solid #ccc !important; background-color: white !important; box-shadow: 0 1px 1px rgba(0,0,0,0.05) !important; flex-shrink: 0 !important; /* Garante que o botão nunca fique menor que 26px */ } /* 4. Ajuste fino na Engrenagem para garantir que ela apareça */ .btn-expandir-tarefa { margin-right: auto !important; /* Empurra ela totalmente para a esquerda */ } /* 5. Efeito visual ao passar o mouse (Zoom leve) */ .btn-quick-action:hover, .btn-expandir-tarefa:hover, .btn-voltar-estoque:hover { transform: scale(1.1) !important; z-index: 10; border-color: #aaa !important; } /* --- CORREÇÃO FINAL: MODO COMPACTO PARA CABER TUDO --- */ /* 1. Container Principal: Removemos a rolagem e ajustamos o espaçamento */ .quick-actions-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; /* Engrenagem na esquerda, resto na direita */ width: 100% !important; gap: 2px !important; /* Espaço mínimo entre a engrenagem e o grupo */ overflow: visible !important; /* Remove a barra de rolagem, pois agora vai caber */ } /* 2. Grupo da Direita: Aperta os botões */ .quick-actions-right { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; /* Botões bem juntinhos (3px de distância) */ flex-shrink: 0 !important; /* Impede que esse grupo seja esmagado */ } /* 3. BOTÕES MENORES (A Mágica acontece aqui) */ /* Afeta: Ações Rápidas, Engrenagem e Botão Voltar */ .btn-quick-action, .btn-expandir-tarefa, .btn-voltar-estoque { /* Tamanho reduzido para 26px (era 30px) */ height: 10px !important; width: 10px !important; min-width: 10px !important; /* Fonte ajustada */ font-size: 13px !important; /* Reset total de espaçamentos */ padding: 0 !important; margin: 0 !important; /* Centralização e Visual */ display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; border: 1px solid #ccc !important; background-color: white !important; box-shadow: 0 1px 1px rgba(0,0,0,0.05) !important; flex-shrink: 0 !important; /* Garante que o botão nunca fique menor que 26px */ } /* 4. Ajuste fino na Engrenagem para garantir que ela apareça */ .btn-expandir-tarefa { margin-right: auto !important; /* Empurra ela totalmente para a esquerda */ } /* 5. Efeito visual ao passar o mouse (Zoom leve) */ .btn-quick-action:hover, .btn-expandir-tarefa:hover, .btn-voltar-estoque:hover { transform: scale(1.1) !important; z-index: 10; border-color: #aaa !important; } /* --- CORREÇÃO SUPREMA: ALINHAMENTO E TAMANHO UNIFICADO --- */ /* 1. A régua onde ficam os botões (Pai) */ .quick-actions-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* Obriga ficar na mesma linha */ align-items: center !important; justify-content: space-between !important; /* Engrenagem na ponta, resto na outra */ width: 100% !important; padding-top: 5px !important; margin-top: 5px !important; border-top: 1px solid #eee !important; gap: 2px !important; overflow: visible !important; /* Nada de barra de rolagem */ } /* 2. O grupo da direita (para ficarem juntos) */ .quick-actions-right { display: flex !important; align-items: center !important; gap: 3px !important; /* Distância entre os botões */ } /* 3. A REGRA DE OURO: Aplica para QUALQUER botão dentro dessa área */ /* Isso garante que a Engrenagem E os outros botões obedeçam ao mesmo tamanho */ .quick-actions-row button { /* Tamanho Fixo e Quadrado */ height: 20px !important; /* Altura compacta */ width: 20px !important; /* Largura fixa igual a altura */ min-width: 20px !important; /* Impede de esmagar */ max-width: 20px !important; /* Impede de esticar */ /* Centralização do Ícone */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Reset total de espaçamento */ padding: 0 !important; margin: 0 !important; /* Visual */ font-size: 13px !important; /* Tamanho do ícone/emoji */ border-radius: 4px !important; border: 1px solid #ddd !important; background-color: white !important; box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important; cursor: pointer !important; line-height: 0 !important; /* Remove altura de linha fantasma */ } /* 4. Ajuste para o botão da engrenagem ficar fixo na esquerda */ .btn-expandir-tarefa { margin-right: auto !important; /* Empurra os outros pra direita */ } /* 5. Efeito ao passar o mouse (para todos) */ .quick-actions-row button:hover { transform: scale(1.15) !important; z-index: 100; border-color: #999 !important; background-color: #f9f9f9 !important; } /* --- CORREÇÃO SUPREMA: BOTÕES GÊMEOS IDÊNTICOS --- */ /* 1. O Pai de todos (A Linha) */ .quick-actions-row { display: flex !important; flex-wrap: nowrap !important; /* Nunca quebra linha */ align-items: center !important; /* Centraliza verticalmente */ width: 100% !important; height: 30px !important; /* Altura da linha */ margin-top: 6px !important; padding-top: 4px !important; border-top: 1px solid #eee !important; gap: 4px !important; /* Espaço exato entre cada botão */ } /* 2. O TRUQUE MÁGICO: Ignora o container da direita para alinhar tudo junto */ .quick-actions-right { display: contents !important; /* Isso faz com que os botões de dentro se comportem como se fossem irmãos diretos da engrenagem */ } /* 3. ESTILO UNIVERSAL (Aplica em TODOS os botões da linha) */ .quick-actions-row button { /* Dimensões Travadas (Quadrado Perfeito) */ width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important; /* Previne esmagamento */ flex-shrink: 0 !important; flex-grow: 0 !important; /* Centralização Absoluta do Ícone */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Limpeza de Estilos */ padding: 0 !important; margin: 0 !important; border: 1px solid #ccc !important; border-radius: 4px !important; background-color: white !important; /* Fonte */ font-size: 13px !important; line-height: 1 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; cursor: pointer !important; } /* 4. Empurra a Engrenagem para a esquerda e o resto para a direita */ /* Como usamos display:contents, o botão da direita agora é "irmão" visual */ .btn-expandir-tarefa { margin-right: auto !important; /* Esse comando joga os outros pro canto */ } /* 5. Hover para todos */ .quick-actions-row button:hover { transform: scale(1.15) !important; z-index: 100; border-color: #888 !important; background-color: #f1f2f6 !important; } /* --- HIERARQUIA DE BOTÕES: EDITAR/DUPLICAR MAIORES --- */ /* 1. O Pai de todos (A Linha) */ .quick-actions-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; /* Centraliza verticalmente itens de tamanhos diferentes */ justify-content: space-between !important; width: 100% !important; height: 36px !important; /* Aumentei um pouco a linha para caber os botões maiores */ margin-top: 6px !important; padding-top: 4px !important; border-top: 1px solid #eee !important; gap: 2px !important; overflow: visible !important; } /* 2. Ignora containers intermediários */ .quick-actions-right { display: contents !important; } /* 3. ESTILO BASE (Pequeno) - Aplica a Voltar, Concluir, Excluir, Engrenagem */ .quick-actions-row button { /* Tamanho Compacto (Padrão) */ height: 24px !important; width: 24px !important; min-width: 24px !important; /* Centralização */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Limpeza */ padding: 0 !important; margin: 0 !important; border: 1px solid #ddd !important; border-radius: 4px !important; background-color: white !important; /* Fonte Pequena */ font-size: 12px !important; box-shadow: 0 1px 1px rgba(0,0,0,0.1) !important; cursor: pointer !important; } /* 4. ESTILO DESTAQUE (Grande) - Apenas Editar e Duplicar */ .quick-actions-row button[title="Editar"], .quick-actions-row button[title="Duplicar"] { /* Tamanho Maior */ height: 32px !important; width: 32px !important; min-width: 32px !important; /* Destaque visual */ font-size: 16px !important; /* Ícone maior */ border-color: #bbb !important; /* Borda levemente mais forte */ background-color: #fcfcfc !important; z-index: 5; /* Fica acima se houver sobreposição */ border-radius: 6px !important; /* Arredondamento um pouco maior */ } /* 5. Empurra a Engrenagem (Pequena) para a esquerda */ .btn-expandir-tarefa { margin-right: auto !important; } /* 6. Hover geral */ .quick-actions-row button:hover { transform: scale(1.1) !important; z-index: 100; border-color: #888 !important; } /* --- ESTILO PARA COLUNA FIXADA (CONGELADA) --- */ .kanban-coluna.fixada-esquerda { position: sticky !important; left: 0 !important; z-index: 900 !important; /* Fica acima das outras colunas */ box-shadow: 5px 0 15px rgba(0,0,0,0.3) !important; /* Sombra na direita para dar profundidade */ border-right: 2px solid #7f8c8d !important; /* Borda para separar */ transform: translateZ(0); /* Melhora performance no navegador */ } /* Ajuste para quando tiver mais de uma fixada não ficarem transparentes */ .kanban-coluna.fixada-esquerda { background-color: inherit; /* Garante que pegue a cor de fundo cinza, não transparente */ } /* --- DESTAQUE VISUAL PARA ABRIR TAREFA --- */ /* 1. Define a área clicável como relativa para posicionar o aviso */ .item-conteudo { position: relative !important; transition: all 0.2s ease !important; border-radius: 6px !important; padding: 5px !important; /* Um pouco de respiro */ } /* 2. Quando passar o mouse: Fundo Azul Claro + Borda Azul */ .item-conteudo:hover { background-color: #e3f2fd !important; /* Azul bem clarinho */ box-shadow: 0 0 0 2px #2196f3 !important; /* Borda Azul Brilhante */ z-index: 5; /* Traz para frente */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Garante que o cursor seja uma mãozinha */ .item-conteudo { cursor: pointer !important; } /* --- CORREÇÃO URGENTE: FORÇAR APARIÇÃO DOS BOTÕES NO POPUP --- */ /* 1. Garante que a barra de ações seja visível no Teleporte */ #teleport-card-container .quick-actions-row { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; gap: 5px !important; margin-top: 15px !important; padding-top: 10px !important; border-top: 1px solid #eee !important; visibility: visible !important; opacity: 1 !important; } /* 2. Garante que os botões dentro dela tenham tamanho e cor corretos */ #teleport-card-container .quick-actions-row button { display: inline-flex !important; height: 32px !important; /* Altura confortável */ min-width: 32px !important; align-items: center !important; justify-content: center !important; background-color: white !important; border: 1px solid #ccc !important; border-radius: 6px !important; cursor: pointer !important; color: #555 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } /* 3. Restaura as cores específicas dos botões no Popup */ #teleport-card-container button[title*="Concluir"] { color: #27ae60 !important; border-color: #27ae60 !important; } #teleport-card-container button[title*="Voltar"] { color: #e67e22 !important; border-color: #e67e22 !important; } #teleport-card-container button[title="Editar"] { color: #1abc9c !important; } #teleport-card-container button[title="Duplicar"] { color: #8e44ad !important; } #teleport-card-container button[title="Excluir"] { color: #c0392b !important; } /* 4. Força o botão de fechar (X) para o topo, sem atrapalhar o layout */ .teleport-close-btn { position: absolute !important; top: 8px !important; right: 10px !important; z-index: 200 !important; } /* --- CORREÇÃO URGENTE: FORÇAR APARIÇÃO DOS BOTÕES NO POPUP --- */ /* 1. Aponta diretamente para a classe da barra, ignorando a ordem dos elementos */ #teleport-card-container .quick-actions-row { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; gap: 5px !important; margin-top: 15px !important; padding-top: 10px !important; border-top: 1px solid #eee !important; visibility: visible !important; opacity: 1 !important; justify-content: center !important; } /* 2. Garante que os botões dentro dela tenham tamanho e cor corretos */ #teleport-card-container .quick-actions-row button { display: inline-flex !important; height: 32px !important; /* Altura confortável */ min-width: 32px !important; align-items: center !important; justify-content: center !important; background-color: white !important; border: 1px solid #ccc !important; border-radius: 6px !important; cursor: pointer !important; color: #555 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; padding: 0 10px !important; /* Espaço lateral interno */ margin: 0 !important; } /* 3. Restaura as cores específicas dos botões no Popup */ #teleport-card-container button[title*="Concluir"] { color: #27ae60 !important; border-color: #27ae60 !important; } #teleport-card-container button[title*="Voltar"] { color: #e67e22 !important; border-color: #e67e22 !important; } #teleport-card-container button[title="Editar"] { color: #1abc9c !important; } #teleport-card-container button[title="Duplicar"] { color: #8e44ad !important; } #teleport-card-container button[title="Excluir"] { color: #c0392b !important; } /* 4. Força o botão de fechar (X) para o topo, sem atrapalhar o layout */ .teleport-close-btn { position: absolute !important; top: 8px !important; right: 10px !important; z-index: 200 !important; } /* --- BOTÕES FLUTUANTES (NOVA ORDEM SOLICITADA) --- */ /* 1. BASE: Ir para Fazer (🔥) */ .fab-todo-scroll-btn { position: fixed; bottom: 20px; /* Posição 1 */ right: 20px; width: 60px; height: 60px; background-color: #c0392b; /* Vermelho */ color: white; border: none; border-radius: 50%; font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 2. Adicionar Tarefa (+) */ .fab-add-btn { position: fixed; bottom: 90px; /* Posição 2 */ right: 20px; width: 60px; height: 60px; background-color: #27ae60; /* Verde */ color: white; border: none; border-radius: 50%; font-size: 35px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 3. Adicionar Coluna (➕ Dark) */ .fab-add-col-btn { position: fixed; bottom: 160px; /* Posição 3 */ right: 20px; width: 60px; height: 60px; background-color: #2c3e50; /* Cinza Escuro */ color: white; border: 2px solid white; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 4. Ir para Kanban (📋) */ .fab-kanban-scroll-btn { position: fixed; bottom: 230px; /* Posição 4 */ right: 20px; width: 60px; height: 60px; background-color: #e67e22; /* Laranja */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 5. Filtros (🎛️) */ .fab-filter-btn { position: fixed; bottom: 300px; /* Posição 5 */ right: 20px; width: 60px; height: 60px; background-color: #8e44ad; /* Roxo */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 6. TOPO: Pesquisa (🔍) */ .fab-search-btn { position: fixed; bottom: 370px; /* Posição 6 (Topo) */ right: 20px; width: 60px; height: 60px; background-color: #2980b9; /* Azul */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* Efeito Hover Geral */ .fab-todo-scroll-btn:hover, .fab-add-btn:hover, .fab-add-col-btn:hover, .fab-kanban-scroll-btn:hover, .fab-filter-btn:hover, .fab-search-btn:hover { transform: scale(1.1); filter: brightness(1.1); } /* --- VERSÃO MOBILE (Mesma ordem, ajustada para tamanho menor) --- */ @media (max-width: 600px) { .fab-todo-scroll-btn { bottom: 15px; right: 15px; width: 50px; height: 50px; font-size: 22px; } .fab-add-btn { bottom: 75px; right: 15px; width: 50px; height: 50px; font-size: 28px; } .fab-add-col-btn { bottom: 135px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-kanban-scroll-btn { bottom: 195px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-filter-btn { bottom: 255px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-search-btn { bottom: 315px; right: 15px; width: 50px; height: 50px; font-size: 20px; } } /* --- BOTÕES FLUTUANTES (ORDEM 1 a 6) --- */ /* 1. BASE: Ir para Fazer (🔥) */ .fab-todo-scroll-btn { position: fixed; bottom: 20px; /* Posição 1 */ right: 20px; width: 60px; height: 60px; background-color: #c0392b; /* Vermelho */ color: white; border: none; border-radius: 50%; font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 2. Ir para Kanban (🗂️) */ .fab-kanban-scroll-btn { position: fixed; bottom: 90px; /* Posição 2 */ right: 20px; width: 60px; height: 60px; background-color: #e67e22; /* Laranja */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 3. Pesquisa (🔍) */ .fab-search-btn { position: fixed; bottom: 160px; /* Posição 3 */ right: 20px; width: 60px; height: 60px; background-color: #2980b9; /* Azul */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 4. Filtros (🎯) */ .fab-filter-btn { position: fixed; bottom: 230px; /* Posição 4 */ right: 20px; width: 60px; height: 60px; background-color: #8e44ad; /* Roxo */ color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 5. Add Coluna (➕) */ .fab-add-col-btn { position: fixed; bottom: 300px; /* Posição 5 */ right: 20px; width: 60px; height: 60px; background-color: #2c3e50; /* Cinza Escuro */ color: white; border: 2px solid white; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 6. TOPO: Adicionar Tarefa (+) */ .fab-add-btn { position: fixed; bottom: 370px; /* Posição 6 (Topo) */ right: 20px; width: 60px; height: 60px; background-color: #27ae60; /* Verde */ color: white; border: none; border-radius: 50%; font-size: 35px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* Efeito Hover Geral */ .fab-todo-scroll-btn:hover, .fab-add-btn:hover, .fab-add-col-btn:hover, .fab-kanban-scroll-btn:hover, .fab-filter-btn:hover, .fab-search-btn:hover { transform: scale(1.1); filter: brightness(1.1); } /* --- VERSÃO MOBILE (Ajustada para a nova ordem) --- */ @media (max-width: 600px) { .fab-todo-scroll-btn { bottom: 15px; right: 15px; width: 50px; height: 50px; font-size: 22px; } .fab-kanban-scroll-btn { bottom: 75px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-search-btn { bottom: 135px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-filter-btn { bottom: 195px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-add-col-btn { bottom: 255px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-add-btn { bottom: 315px; right: 15px; width: 50px; height: 50px; font-size: 28px; } } /* --- ATUALIZAÇÃO DE CORES (INVERTIDO) --- */ /* 5. Botão Add Coluna (➕) - Agora LARANJA */ .fab-add-col-btn { position: fixed; bottom: 300px; /* Mantendo a posição da ordem anterior */ right: 20px; width: 60px; height: 60px; /* MUDANÇA AQUI: De Cinza para Laranja */ background-color: #e67e22; color: white; border: 2px solid white; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* 2. Botão Ir para Kanban (🗂️) - Agora CINZA */ .fab-kanban-scroll-btn { position: fixed; bottom: 90px; /* Mantendo a posição da ordem anterior */ right: 20px; width: 60px; height: 60px; /* MUDANÇA AQUI: De Laranja para Cinza Escuro */ background-color: #2c3e50; color: white; border: none; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } /* Efeito Hover para ambos */ .fab-add-col-btn:hover, .fab-kanban-scroll-btn:hover { transform: scale(1.1); filter: brightness(1.1); } /* Ajuste Mobile */ @media (max-width: 600px) { .fab-add-col-btn { bottom: 255px; right: 15px; width: 50px; height: 50px; font-size: 20px; } .fab-kanban-scroll-btn { bottom: 75px; right: 15px; width: 50px; height: 50px; font-size: 20px; } } /* --- ESTILO DO INDICADOR DE ARRASTAR --- */ /* Estilo do cartão para garantir o cursor correto */ .kanban-item { cursor: grab; /* Muda o cursor para uma mãozinha aberta */ position: relative; /* Para facilitar posicionamentos */ /* ... (seus outros estilos de .kanban-item) ... */ } /* Estilo do cartão quando está sendo arrastado (opcional, para feedback) */ .kanban-item:active { cursor: grabbing; /* Muda o cursor para uma mãozinha fechada ao clicar */ } /* Estilo do ícone "Grip" (⋮⋮) */ .drag-handle { display: inline-block; margin-right: 8px; /* Espaço entre o ícone e o checkbox */ color: #bdc3c7; /* Cor cinza sutil */ font-size: 16px; line-height: 1; vertical-align: middle; cursor: grab; /* Garante a mãozinha no ícone também */ user-select: none; /* Impede que o ícone seja selecionado como texto */ } /* Muda a cor do ícone quando passa o mouse no cartão para chamar atenção */ .kanban-item:hover .drag-handle { color: #7f8c8d; /* Cinza um pouco mais escuro */ } /* --- ESTILO PARA COLUNAS FIXADAS (MÚLTIPLAS) --- */ .kanban-coluna.fixada-esquerda { position: sticky !important; /* O 'left' será calculado pelo JS, mas deixamos 0 como fallback */ left: 0; z-index: 900 !important; /* Garante que fique acima das outras */ box-shadow: 5px 0 15px rgba(0,0,0,0.3) !important; border-right: 2px solid #7f8c8d !important; background-color: inherit; /* Mantém a cor de fundo original */ transform: translateZ(0); /* Melhora performance */ } /* --- ESTILO PARA COLUNAS FIXADAS (MÚLTIPLAS LADO A LADO) --- */ .kanban-coluna.fixada-esquerda { position: sticky !important; /* O 'left' será calculado dinamicamente pelo JS */ z-index: 900; /* Sombra na direita da ÚLTIMA coluna fixada para dar profundidade */ box-shadow: 4px 0 10px rgba(0,0,0,0.15) !important; /* Borda para separar visualmente */ border-right: 1px solid #bdc3c7 !important; /* CRUCIAL: Remove transparência. O JS vai aplicar a cor correta se falhar */ background-clip: padding-box; transform: translateZ(0); /* Força aceleração de hardware para não tremer */ } /* --- CORREÇÃO: COLUNAS FIXADAS LADO A LADO --- */ .kanban-coluna.fixada-esquerda { position: sticky !important; /* Removemos o left: 0 para o Javascript controlar a posição */ z-index: 900; /* Cor de fundo sólida é OBRIGATÓRIA para não ver o que passa por baixo */ background-color: #f1f2f6 !important; /* Borda e sombra para dar efeito de painel congelado */ border-right: 2px solid #bdc3c7 !important; box-shadow: 5px 0 10px rgba(0,0,0,0.1) !important; transform: translateZ(0); /* Melhora performance */ } /* --- CORREÇÃO: CABEÇALHO DA COLUNA FIXO NO TOPO (STICKY HEADER) --- */ .kanban-header { position: sticky !important; /* Define a distância do topo. Coloquei 45px para não ficar escondido atrás da barra preta de status. Se achar que ficou muito longe ou muito perto, ajuste este número. */ top: 45px !important; /* Garante que o cabeçalho fique acima dos cards ao rolar */ z-index: 800; /* Sombra para destacar que ele está flutuando */ box-shadow: 0 4px 5px rgba(0,0,0,0.2); /* Garante que não fique transparente */ background-clip: padding-box; } /* Ajuste para garantir que o cabeçalho das colunas FIXADAS NA ESQUERDA fique acima do cabeçalho das colunas normais quando cruzar */ .kanban-coluna.fixada-esquerda .kanban-header { z-index: 1005 !important; /* Maior que o z-index da coluna (1000) e do header normal (800) */ } /* --- FIX DEFINITIVO: TÍTULOS DO KANBAN SEMPRE VISÍVEIS --- */ /* 1. Define uma altura fixa para a área do Kanban baseada na tela */ #kanban-temporal.kanban-wrapper { /* Calcula: Altura total - (Cabeçalho + Barra de Pesquisa + Espaços) */ height: calc(100vh - 20px) !important; min-height: 400px !important; /* Altura mínima de segurança */ overflow-y: hidden !important; /* Remove a rolagem vertical externa */ align-items: flex-start !important; /* Alinha as colunas ao topo */ padding-bottom: 5px !important; } /* 2. Força a coluna a ocupar a altura do container e travar lá */ .kanban-coluna { height: 100% !important; max-height: 100% !important; display: flex !important; flex-direction: column !important; /* Removemos position sticky antigo para usar o layout flexível */ position: relative !important; } /* 3. O Header fica parado porque não faz parte da área de rolagem */ .kanban-header { flex-shrink: 0 !important; /* Impede que o título seja esmagado */ width: 100% !important; z-index: 20 !important; /* Removemos o top/sticky antigo pois agora ele é fixo por estrutura */ position: relative !important; top: 0 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; } /* 4. A MÁGICA: Apenas a área das tarefas ganha barra de rolagem */ .kanban-dropzone { flex-grow: 1 !important; /* Ocupa todo o espaço restante na coluna */ overflow-y: auto !important; /* A barra de rolagem aparece AQUI dentro */ overflow-x: hidden !important; min-height: 0 !important; /* Correção para Firefox/Flexbox */ padding-bottom: 20px !important; /* Espaço extra no final das tarefas */ scroll-behavior: smooth; } /* 5. Embelezar a barra de rolagem interna das colunas */ .kanban-dropzone::-webkit-scrollbar { width: 6px; } .kanban-dropzone::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 4px; } .kanban-dropzone::-webkit-scrollbar-thumb { background-color: #bdc3c7; border-radius: 4px; } .kanban-dropzone::-webkit-scrollbar-thumb:hover { background-color: #95a5a6; } /* 6. Garante que os botões de adicionar tarefa (topo e base) fiquem visíveis */ .kanban-coluna .btn-add-kanban { flex-shrink: 0 !important; } .kanban-footer { flex-shrink: 0 !important; } /* Ajuste para quando uma coluna for arrastada */ .kanban-coluna.dragging-col { height: auto !important; max-height: 90vh !important; } /* --- FIX: BOTÕES SUMINDO (PERMITIR QUEBRA DE LINHA) --- */ /* 1. Permite que a linha de botões cresça e quebre linha se faltar espaço */ .quick-actions-row { display: flex !important; flex-wrap: wrap !important; /* O SEGREDO: Permite cair para a linha de baixo */ height: auto !important; /* Altura automática para caber duas linhas */ min-height: 32px !important; /* Altura mínima garantida */ gap: 3px !important; /* Espaço entre os botões */ justify-content: flex-end !important; /* Alinha tudo à direita */ padding-bottom: 5px !important; /* Espaço extra embaixo */ overflow: visible !important; /* Garante que nada fique escondido */ } /* 2. Ajuste fino para os botões */ .quick-actions-row button { flex-shrink: 0 !important; /* Não deixa o botão ser esmagado */ margin-bottom: 3px !important; /* Espaço vertical se quebrar linha */ } /* 3. Força absoluta de visibilidade para o botão de excluir */ .quick-actions-row button[title="Excluir"] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; background-color: #fff !important; color: #c0392b !important; border-color: #fab1a0 !important; } /* 7. Botão Limpar Filtros (🧹) - Fica no TOPO da pilha */ .fab-clear-filters-btn { position: fixed; bottom: 440px; /* Posição 7 */ right: 20px; width: 60px; height: 60px; background-color: #455a64; /* Cinza Azulado */ color: white; border: 2px solid white; /* Borda para destacar */ border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; /* Exibe sempre, ou use 'none' para controlar via JS */ align-items: center; justify-content: center; transition: transform 0.3s; } .fab-clear-filters-btn:hover { transform: scale(1.1); background-color: #607d8b; filter: brightness(1.2); } .fab-clear-filters-btn:active { transform: scale(0.95); } /* Ajuste Mobile para a nova pilha */ @media (max-width: 600px) { .fab-clear-filters-btn { bottom: 375px; right: 15px; width: 50px; height: 50px; font-size: 20px; } } /* 8. Botão Sequência Global (🔢) - Fica no TOPO da pilha */ .fab-global-seq-btn { position: fixed; bottom: 510px; /* Posição 8 (Acima da Vassoura) */ right: 20px; width: 60px; height: 60px; background-color: #9b59b6; /* Roxo Sequência */ color: white; border: 2px solid white; border-radius: 50%; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s; } .fab-global-seq-btn:hover { transform: scale(1.1); background-color: #8e44ad; filter: brightness(1.2); } /* Ajuste Mobile */ @media (max-width: 600px) { .fab-global-seq-btn { bottom: 435px; right: 15px; width: 50px; height: 50px; font-size: 20px; } } /* 9. Botão Desfazer (↩️) - Fica no TOPO da pilha */ .fab-undo-btn { position: fixed; bottom: 580px; /* Posição 9 */ right: 20px; width: 60px; height: 60px; background-color: #607d8b; /* Cinza Azulado (Cor original do Undo) */ color: white; border: 2px solid white; border-radius: 50%; font-size: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, opacity 0.3s; } .fab-undo-btn:hover { transform: scale(1.1); background-color: #546e7a; filter: brightness(1.2); } .fab-undo-btn:active { transform: scale(0.95); } /* Ajuste Mobile */ @media (max-width: 600px) { .fab-undo-btn { bottom: 495px; right: 15px; width: 50px; height: 50px; font-size: 24px; } } /* Barra de Pesquisa dentro da Coluna Kanban */ .kanban-search-input { width: 90%; margin: 5px auto; padding: 6px; border: 1px solid #ccc; border-radius: 15px; /* Arredondado para ficar bonito */ font-size: 12px; text-align: center; background-color: #fff; box-sizing: border-box; display: block; transition: border-color 0.2s; } .kanban-search-input:focus { outline: none; border-color: #3498db; background-color: #f1f8ff; } /* --- AUMENTAR LARGURA DO RELATÓRIO DE ORDENAÇÃO --- */ #modal-ordenar-coluna .modal-content { max-width: 1100px !important; /* Aumentado de 600px para 1100px */ width: 95% !important; /* Garante que use quase toda a tela */ } /* --- ESTILO AGUARDANDO RESPOSTA --- */ /* 1. O Destaque no Cartão */ .estoque-comida-wrapper li.destaque-aguardando { border: 3px dashed #ff9800 !important; /* Laranja Tracejado */ background-color: #fff3e0 !important; /* Fundo Laranja Bem Claro */ transform: scale(0.98); /* Leve recuo para indicar "pausa" */ opacity: 0.9; } /* 2. O Badge (Etiqueta) */ .badge-aguardando { background-color: #ff9800; color: white; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* 3. O Botão Ativo (CORRIGIDO) */ .btn-aguardando-ativo { background-color: #ff9800 !important; color: white !important; border: none !important; /* Remove a borda física que estava desalinhando */ /* Simula a borda de 2px com uma sombra interna, sem mudar o tamanho do botão */ box-shadow: inset 0 0 0 2px #e65100, inset 0 2px 5px rgba(0,0,0,0.2); } /* --- CORREÇÃO DE ESPAÇAMENTO DOS BOTÕES --- */ .area-botoes-wrapper { display: flex; /* Garante que fiquem em linha */ align-items: center; /* Alinha todos pelo centro verticalmente */ justify-content: flex-start; /* Alinha tudo à esquerda */ /* O SEGREDO ESTÁ AQUI: */ gap: 10px; /* Cria um espaço de 10px entre CADA botão */ margin-top: 10px; /* Dá um espaço acima da linha de botões */ padding-top: 5px; /* Um pequeno respiro interno */ border-top: px dotted #eee; /* Opcional: uma linha sutil para separar do resto do card */ } /* --- BADGE DE AGUARDANDO DELEGAÇÃO --- */ .badge-aguardando-delegacao { background-color: #f39c12; /* Laranja/Amarelo */ color: white; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); border: 1px solid #e67e22; animation: pulse-border 2s infinite; /* Pisca para chamar atenção */ } /* --- CORES DOS CARTÕES DE TAREFA --- */ /* Padrão (Normal) - Não precisa de CSS específico, usa o padrão */ /* Preta */ li.card-bg-black { background-color: #2c3e50 !important; border-left-color: #000 !important; color: white !important; } li.card-bg-black .item-nome-tarefa { color: white !important; } /* Vermelha */ li.card-bg-red { background-color: #c0392b !important; border-left-color: #922b21 !important; color: white !important; } li.card-bg-red .item-nome-tarefa { color: white !important; } /* Laranja */ li.card-bg-orange { background-color: #d35400 !important; border-left-color: #a04000 !important; color: white !important; } li.card-bg-orange .item-nome-tarefa { color: white !important; } /* Amarela (Texto Escuro) */ li.card-bg-yellow { background-color: #f1c40f !important; border-left-color: #d4ac0d !important; color: #333 !important; } li.card-bg-yellow .item-nome-tarefa { color: #000 !important; } /* Verde */ li.card-bg-green { background-color: #27ae60 !important; border-left-color: #1e8449 !important; color: white !important; } li.card-bg-green .item-nome-tarefa { color: white !important; } /* Azul */ li.card-bg-blue { background-color: #2980b9 !important; border-left-color: #1f618d !important; color: white !important; } li.card-bg-blue .item-nome-tarefa { color: white !important; } /* --- OBJETIVO CENTRAL (O QUADRO DESTAQUE) --- */ .objetivo-central-wrapper { background: linear-gradient(135deg, #fff 0%, #fff9c4 100%); /* Degradê suave amarelo */ border: 2px solid #fbc02d; /* Borda Dourada */ border-radius: 12px; padding: 20px; margin-bottom: 25px; display: flex; align-items: center; gap: 20px; box-shadow: 0 4px 15px rgba(251, 192, 45, 0.3); position: relative; transition: transform 0.2s; } .objetivo-central-wrapper:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251, 192, 45, 0.4); } /* Área da Imagem */ .obj-img-container { flex-shrink: 0; width: 150px; height: 150px; border-radius: 8px; overflow: hidden; background-color: #eee; border: 2px dashed #f9a825; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; } .obj-img-container img { width: 100%; height: 100%; object-fit: cover; } .obj-placeholder { font-size: 40px; color: #f9a825; opacity: 0.5; } /* Área do Texto */ .obj-content { flex-grow: 1; } .obj-label { font-size: 12px; text-transform: uppercase; color: #f57f17; font-weight: 800; letter-spacing: 1px; margin-bottom: 5px; display: block; } .obj-titulo { font-size: 24px; font-weight: bold; color: #333; margin: 0 0 10px 0; cursor: text; border-bottom: 1px dashed transparent; } .obj-titulo:hover { border-bottom-color: #ccc; } .obj-descricao { font-size: 15px; color: #555; line-height: 1.5; cursor: text; white-space: pre-wrap; /* Mantém quebras de linha */ min-height: 40px; } /* Responsivo para celular */ @media (max-width: 600px) { .objetivo-central-wrapper { flex-direction: column; text-align: center; } .obj-titulo { font-size: 20px; } } /* --- ROADMAP ESTRATÉGICO --- */ .roadmap-wrapper { display: flex; gap: 15px; margin-bottom: 25px; justify-content: space-between; } .roadmap-card { background-color: #fff; border: 1px solid #ddd; /* Borda sutil */ border-radius: 8px; padding: 15px; flex: 1; /* Faz todos terem a mesma largura */ display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; position: relative; border-top: 4px solid #3498db; /* Cor padrão Azul */ } /* Cores diferentes para cada etapa (Opcional, mas ajuda visualmente) */ .roadmap-card:nth-child(1) { border-top-color: #e74c3c; } /* Etapa 1: Vermelho */ .roadmap-card:nth-child(2) { border-top-color: #f39c12; } /* Etapa 2: Laranja */ .roadmap-card:nth-child(3) { border-top-color: #2980b9; } /* Etapa 3: Azul */ .roadmap-card:nth-child(4) { border-top-color: #27ae60; } /* Etapa 4: Verde */ .roadmap-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* Badge do Número */ .step-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #34495e; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } /* Imagem da Etapa */ .roadmap-img { width: 100%; height: 100px; background-color: #f1f2f6; border-radius: 6px; cursor: pointer; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; } .roadmap-img img { width: 100%; height: 100%; object-fit: cover; } .roadmap-placeholder { font-size: 24px; color: #ccc; } /* Textos */ .roadmap-title { font-weight: 700; font-size: 15px; color: #333; text-align: center; cursor: pointer; margin: 5px 0; } .roadmap-title:hover { color: #3498db; } .roadmap-desc { font-size: 12px; color: #666; text-align: center; cursor: pointer; line-height: 1.4; min-height: 40px; /* Garante alinhamento */ } .roadmap-desc:hover { background-color: #f9f9f9; border-radius: 4px; } /* Responsivo */ @media (max-width: 768px) { .roadmap-wrapper { flex-direction: column; /* Empilha no celular */ } } /* --- ROADMAP POWER 8 (GRID) --- */ .roadmap-wrapper { display: grid; /* Cria 4 colunas de tamanho igual no computador */ grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; } .roadmap-card { background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; position: relative; border-top: 4px solid #3498db; } /* Ciclo de Cores para as 8 etapas */ .roadmap-card:nth-child(1), .roadmap-card:nth-child(5) { border-top-color: #e74c3c; } /* Vermelho */ .roadmap-card:nth-child(2), .roadmap-card:nth-child(6) { border-top-color: #f39c12; } /* Laranja */ .roadmap-card:nth-child(3), .roadmap-card:nth-child(7) { border-top-color: #2980b9; } /* Azul */ .roadmap-card:nth-child(4), .roadmap-card:nth-child(8) { border-top-color: #27ae60; } /* Verde */ .roadmap-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); z-index: 5; } /* Badge do Número */ .step-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: #34495e; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } /* Imagem da Etapa */ .roadmap-img { width: 100%; height: 80px; /* Um pouco menor para caber tudo */ background-color: #f1f2f6; border-radius: 6px; cursor: pointer; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; } .roadmap-img img { width: 100%; height: 100%; object-fit: cover; } .roadmap-placeholder { font-size: 20px; color: #ccc; } /* Textos Principais */ .roadmap-title { font-weight: 800; font-size: 14px; color: #333; text-align: center; cursor: pointer; margin-top: 5px; } .roadmap-title:hover { color: #3498db; text-decoration: underline; } /* --- NOVAS SUB-ETAPAS (Inputs) --- */ .roadmap-substeps { display: flex; flex-direction: column; gap: 4px; background: #f9f9f9; padding: 8px; border-radius: 6px; border: 1px solid #eee; } .sub-step-row { display: flex; align-items: center; gap: 5px; } .sub-step-check { cursor: pointer; } .sub-step-input { border: none; background: transparent; border-bottom: 1px dashed #ccc; font-size: 11px; width: 100%; color: #555; padding: 2px 0; } .sub-step-input:focus { outline: none; border-bottom: 1px solid #3498db; background-color: #fff; } .sub-step-row.done .sub-step-input { text-decoration: line-through; color: #aaa; } /* Responsivo */ @media (max-width: 1100px) { .roadmap-wrapper { grid-template-columns: repeat(2, 1fr); } /* Tablet: 2 por linha */ } @media (max-width: 600px) { .roadmap-wrapper { grid-template-columns: 1fr; } /* Celular: 1 por linha */ } /* 10. Botão Mostrar Todas as Colunas (👁️) - TOPO DA PILHA */ .fab-show-all-cols-btn { position: fixed; bottom: 650px; /* Posição 10 */ right: 20px; width: 60px; height: 60px; background-color: #34495e; /* Cor padrão (Desativado) */ color: white; border: 2px solid white; border-radius: 50%; font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; z-index: 9990; display: flex; align-items: center; justify-content: center; transition: transform 0.3s, background-color 0.3s; } .fab-show-all-cols-btn:hover { transform: scale(1.1); filter: brightness(1.2); } .fab-show-all-cols-btn:active { transform: scale(0.95); } /* Estado ATIVO (Quando estiver mostrando as ocultas) */ .fab-show-all-cols-btn.ativo { background-color: #00bcd4; /* Cyan vibrante */ box-shadow: 0 0 15px #00bcd4; border-color: #e0f7fa; } /* Ajuste Mobile */ @media (max-width: 600px) { .fab-show-all-cols-btn { bottom: 555px; right: 15px; width: 50px; height: 50px; font-size: 24px; } } /* --- ESTILOS PARA MINIMIZAR COLUNAS --- */ .coluna.minimizada ul, .coluna.minimizada .lista-vertical-drop { display: none !important; } .coluna.minimizada { height: auto !important; min-height: 0 !important; padding-bottom: 10px !important; } .btn-toggle-min { background: transparent; border: none; cursor: pointer; font-size: 14px; margin-left: 8px; transition: transform 0.3s; opacity: 0.7; } .btn-toggle-min:hover { opacity: 1; transform: scale(1.2); } .coluna.minimizada .btn-toggle-min { transform: rotate(-90deg); /* Gira a setinha quando fechado */ } /* Ajuste para alinhar o botão ao lado do título */ .coluna h2 { display: flex; justify-content: space-between; align-items: center; } /* Estilo para o campo de edição do título da lista vertical */ .input-edicao-titulo-lista { font-size: 1.4rem; font-weight: bold; border: 2px solid var(--cor-primaria); border-radius: 4px; padding: 2px 5px; width: 80%; outline: none; font-family: inherit; color: var(--cor-texto); } /* Estilo para o campo de edição do título das listas verticais */ .input-edicao-titulo-lista { font-size: 1.4rem; font-weight: bold; border: 2px solid #3498db; border-radius: 4px; padding: 2px 5px; width: 85%; outline: none; font-family: inherit; background-color: #fff !important; color: #333 !important; } /* --- ESTILO PARA EDIÇÃO DE TÍTULO DAS LISTAS --- */ .input-edicao-titulo-lista { font-size: 1.4rem; font-weight: bold; border: 2px solid #3498db; /* Borda azul ao editar */ border-radius: 4px; padding: 2px 5px; width: 80%; outline: none; font-family: inherit; background-color: #fff !important; color: #333 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn-quick-action[title="Concluir Tarefa"] { color: #27ae60 !important; border-color: #27ae60 !important; font-weight: bold !important; } /* Estilo para a tarefa concluída */ .tarefa-item.concluida { opacity: 0.5; /* Deixa apagada */ background-color: #f9f9f9; pointer-events: none; /* Impede interação com o que está dentro */ } /* Esconde os botões normais de ação quando concluída */ .tarefa-item.concluida .botoes-acao-normais { display: none !important; } /* Mostra apenas o botão de Reabrir */ .tarefa-item.concluida .btn-reabrir { display: inline-block !important; pointer-events: auto; /* Permite clicar no Reabrir mesmo com o item esmaecido */ } /* Botão Reabrir estilizado como na imagem */ .btn-reabrir { display: none; background-color: #4db6ac; /* Cor turquesa/azul do botão na imagem */ color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } /* --- ESTILO PARA ITEM CONCLUÍDO (Apagado e com botão Reabrir) --- */ li.item-concluido { opacity: 0.6 !important; /* Deixa o item meio transparente */ background-color: #f9f9f9 !important; /* Fundo cinza bem claro */ border: 1px solid #eee !important; /* Borda suave */ pointer-events: none; /* Impede cliques no cartão (exceto no botão reabrir) */ position: relative; } li.item-concluido .item-nome-tarefa { text-decoration: line-through; /* Risca o nome da tarefa */ color: #999 !important; } /* Garante que a área de botões ocupe a largura e alinhe à direita */ li.item-concluido .area-botoes-concluidos { width: 100%; display: flex; justify-content: flex-end; /* Joga o botão para a direita */ margin-top: 5px; pointer-events: auto; /* Reativa o clique APENAS para esta área */ } /* O Botão Reabrir Azul/Verde Água (igual ao seu desenho) */ .btn-reabrir-destaque { background-color: #4db6ac !important; /* Cor turquesa */ color: white !important; border: none !important; padding: 6px 15px !important; border-radius: 6px !important; font-weight: bold !important; font-size: 13px !important; cursor: pointer !important; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.2s; } .btn-reabrir-destaque:hover { background-color: #26a69a !important; transform: scale(1.05); } /* Permite clicar no botão mesmo que o cartão esteja "desativado" */ li.item-concluido .area-botoes-concluidos, li.item-concluido .btn-reabrir-destaque { pointer-events: auto !important; } /* --- ESTILO PARA ITEM CONCLUÍDO (Reforçado) --- */ li.item-concluido { opacity: 0.6 !important; background-color: #f1f2f6 !important; border: 1px solid #ccc !important; pointer-events: auto !important; position: relative; } li.item-concluido .item-nome-tarefa { text-decoration: line-through; color: #888 !important; } /* Botão de Ativar dentro da Lista (Estilo) */ .btn-ativar-massa-cabecalho { font-size: 11px; background: #3498db; color: white; border: none; padding: 2px 6px; border-radius: 4px; margin-left: 5px; cursor: pointer; vertical-align: middle; } /* Campo de Fixar no Form */ .fixar-coluna-container { background-color: #f3e5f5; padding: 10px; border-radius: 8px; border: 1px solid #ce93d8; margin-top: 10px; } /* Garante que o botão de reativar sempre seja clicável e visível */ .area-botoes-concluidos, .btn-reabrir-destaque { pointer-events: auto !important; z-index: 100; } .coluna.minimizada ul, .coluna.minimizada .lista-vertical-drop, .coluna.minimizada .area-acao-meio, .coluna.minimizada .kanban-search-input { display: none !important; } /* --- AJUSTE: PERMITIR DROP EM LISTA MINIMIZADA --- */ /* 1. Esconde os ITENS (li) dentro da lista, mas mantém a lista viva */ .coluna.minimizada ul li, .coluna.minimizada .lista-vertical-drop li { display: none !important; } /* 2. Transforma a lista (ul) em uma "Zona de Aterrissagem" compacta */ .coluna.minimizada ul, .coluna.minimizada .lista-vertical-drop { display: flex !important; /* Força aparecer */ min-height: 40px !important; /* Altura do alvo */ height: 40px !important; /* Trava a altura */ background-color: #f8f9fa !important; border: 2px dashed #bdc3c7 !important; border-radius: 6px; margin-top: 5px; align-items: center; justify-content: center; overflow: hidden; /* Garante que nada vaze */ transition: all 0.2s; } /* 3. Texto de orientação visual "Solte aqui" */ .coluna.minimizada ul::after, .coluna.minimizada .lista-vertical-drop::after { content: "📥 Solte aqui"; color: #7f8c8d; font-size: 11px; font-weight: 700; text-transform: uppercase; pointer-events: none; } /* 4. Feedback Visual ao passar o mouse com item (DragOver) */ /* Quando a classe drag-over-list é adicionada pelo JS ou hover */ .coluna.minimizada ul:hover, .coluna.minimizada .lista-vertical-drop:hover, .coluna.minimizada ul.drag-over-list, .coluna.minimizada .lista-vertical-drop.drag-over-list { background-color: #d1f2eb !important; /* Verde claro */ border-color: #27ae60 !important; /* Borda verde */ transform: scale(1.02); } /* 5. Esconde apenas inputs e áreas de ação extras, mantendo o título e a zona de drop */ .coluna.minimizada .area-acao-meio, .coluna.minimizada .kanban-search-input { display: none !important; } /* --- FORÇAR EXIBIÇÃO DA DATA NO KANBAN --- */ .kanban-dropzone .agendamento-badge { display: inline-block !important; /* Sobrescreve o ocultamento padrão */ background-color: #6610f2; /* Roxo */ color: white; font-size: 11px !important; padding: 2px 6px !important; border-radius: 4px; margin-right: 4px; margin-bottom: 4px; font-weight: bold; border: 1px solid #520dc2; } /* --- ESTILO PARA ITEM CONCLUÍDO (Reforçado) --- */ li.item-concluido { opacity: 0.5 !important; background-color: #f1f2f6 !important; border: 1px solid #ccc !important; pointer-events: auto !important; position: relative; cursor: default !important; } li.item-concluido .item-nome-tarefa { text-decoration: line-through; color: #888 !important; } /* Esconde os badges e botões normais para o card ficar limpo */ li.item-concluido .item-linha-badges, li.item-concluido .quick-actions-row, li.item-concluido .area-botoes-tarefa, li.item-concluido .drag-handle { display: none !important; } /* Container do botão de reativação */ li.item-concluido .area-botoes-concluidos { width: 100%; display: flex !important; justify-content: flex-end; margin-top: 5px; pointer-events: auto !important; } /* Botão Reativar (Turquesa) */ .btn-reabrir-destaque { background-color: #4db6ac !important; color: white !important; border: none !important; padding: 6px 14px !important; border-radius: 6px !important; font-weight: bold !important; font-size: 12px !important; cursor: pointer !important; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-reabrir-destaque:hover { background-color: #26a69a !important; transform: scale(1.05); } /* Estilo para o botão Ativar dentro de cada lista vertical */ .btn-ativar-filtro-local { background-color: #3498db; color: white; border: none; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; cursor: pointer; margin-left: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: all 0.2s; vertical-align: middle; display: none; /* Começa escondido, o JS mostra se houver filtro */ } .btn-ativar-filtro-local:hover { background-color: #2980b9; transform: scale(1.05); } /* Botão Selecionar Todos da Coluna Kanban */ .btn-select-all-col { cursor: pointer; font-size: 14px; padding: 0 5px; transition: transform 0.2s; filter: grayscale(100%); } .btn-select-all-col:hover { transform: scale(1.2); filter: grayscale(0%); } /* --- ESTILOS DO RELATÓRIO DE DATAS --- */ .badge-data-tipo { font-size: 10px; text-transform: uppercase; font-weight: 800; padding: 2px 6px; border-radius: 4px; color: white; margin-right: 5px; } .bg-unica { background-color: #6610f2; } /* Roxo */ .bg-recorrente { background-color: #00bcd4; } /* Cyan */ .data-destaque-relatorio { font-weight: bold; color: #333; background-color: #f3e5f5; padding: 4px 8px; border-radius: 4px; display: inline-block; } /* --- CORREÇÃO DE ROLAGEM: RELATÓRIO DE DATAS --- */ #modal-relatorio-datas .modal-content { height: 90vh !important; /* Força altura de 90% da tela */ display: flex !important; /* Layout flexível */ flex-direction: column !important; /* Cabeçalho em cima, lista embaixo */ overflow: hidden !important; /* Impede que a janela vaze */ padding: 0 !important; /* Remove bordas internas */ background-color: #f4f6f7; } #modal-relatorio-datas .relatorio-body { flex-grow: 1 !important; /* Ocupa todo o espaço que sobra */ overflow-y: auto !important; /* CRUCIAL: Cria a barra de rolagem aqui */ padding: 20px; min-height: 0; /* Fix para Firefox/Flexbox */ } /* --- ESTILOS DAS GAVETAS DE BOTÕES --- */ .painel-expansivel-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 10px 0 20px 0; width: 100%; } .gaveta-botoes { background: #ffffff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease; } .gaveta-botoes summary { list-style: none; padding: 12px; font-weight: 800; cursor: pointer; background: #f8f9fa; color: #2c3e50; display: flex; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; font-size: 12px; } .gaveta-botoes summary::-webkit-details-marker { display: none; } .gaveta-botoes summary:hover { background: #e9ecef; } .gaveta-botoes[open] { box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .gaveta-botoes[open] summary { border-bottom: 1px solid #eee; background: #e3f2fd; color: #2980b9; } .conteudo-gaveta { padding: 15px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; background: #fff; } @media (max-width: 600px) { .painel-expansivel-container { grid-template-columns: 1fr 1fr; } } /* --- PAINEL LATERAL DE FILTROS --- */ /* 1. O fundo escuro (Overlay) */ .overlay-filtros { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: 100000; /* Fica acima de tudo, inclusive das gavetas superiores */ opacity: 0; transition: opacity 0.3s; } /* 2. O Painel em si */ .painel-lateral-filtros { position: fixed; top: 0; right: -400px; /* Escondido fora da tela na direita */ width: 350px; /* Largura do painel */ max-width: 90vw; /* Segurança para não vazar no celular */ height: 100vh; /* Ocupa a altura total da tela */ background: #f4f6f7; z-index: 100001; /* Fica acima do overlay escuro */ box-shadow: -5px 0 20px rgba(0,0,0,0.2); display: flex; flex-direction: column; transition: right 0.3s ease-in-out; /* Animação de deslizar suave */ } /* Classes que o JS vai adicionar para abrir o painel */ .painel-lateral-filtros.aberto { right: 0; /* Desliza para dentro da tela */ } .overlay-filtros.aberto { display: block; opacity: 1; /* Faz o escurecimento aparecer suavemente */ } /* 3. Estrutura interna do painel */ .painel-filtros-header { background: #8e44ad; /* Roxo para combinar com o seu botão Flutuante */ color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; /* Impede que o cabeçalho seja esmagado */ } .painel-filtros-header h2 { margin: 0; font-size: 18px; border: none; } .btn-fechar-painel { background: transparent; border: none; color: white; font-size: 32px; font-weight: bold; cursor: pointer; line-height: 1; transition: transform 0.2s; } .btn-fechar-painel:hover { transform: scale(1.1); } .painel-filtros-body { padding: 20px; flex-grow: 1; /* Ocupa todo o resto do espaço para baixo */ overflow-y: auto; /* IMPORTANTE: Permite rolar OS FILTROS sem rolar a página inteira */ display: flex; flex-direction: column; gap: 15px; } /* Ajustes visuais para os filtros se encaixarem bonitos dentro do painel estreito */ .painel-filtros-body .filtro-container { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 0; width: 100%; box-sizing: border-box; } .painel-filtros-body .filtro-titulo { text-align: left; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; color: #8e44ad; /* Roxo do tema */ } .painel-filtros-body .filtro-wrapper { justify-content: flex-start; /* Alinha os botõezinhos de filtro à esquerda */ } /* --- GAVETA ESTRATÉGICA (Norte Verdadeiro e Roadmap) --- */ .gaveta-estrategica { background: #fff; border: 2px dashed #f1c40f; /* Borda dourada pontilhada para dar destaque */ border-radius: 10px; margin-bottom: 25px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .gaveta-estrategica summary { padding: 15px 20px; font-size: 16px; font-weight: 800; color: #d35400; /* Texto laranja escuro */ cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #fffdf7; /* Fundo amarelinho bem suave */ border-radius: 10px; transition: background 0.2s; } .gaveta-estrategica summary:hover { background: #fff9e6; } .gaveta-estrategica summary::-webkit-details-marker { display: none; /* Esconde a seta feia padrão do navegador */ } /* Quando a gaveta é aberta */ .gaveta-estrategica[open] { border-style: solid; /* Borda fica contínua */ box-shadow: 0 5px 15px rgba(241, 196, 15, 0.2); } .gaveta-estrategica[open] summary { border-bottom: 1px solid #f1c40f; border-radius: 10px 10px 0 0; } .gaveta-estrategica[open] .icone-expandir { transform: rotate(180deg); /* Vira a setinha pra cima */ } /* Onde o conteúdo mora */ .conteudo-estrategico { padding: 20px; background: #fdfefe; border-radius: 0 0 10px 10px; } /* Ajustes para remover margens sobrando dentro da gaveta */ .conteudo-estrategico .objetivo-central-wrapper { margin-bottom: 20px; box-shadow: none; /* Remove a sombra dupla */ } .conteudo-estrategico .roadmap-wrapper { margin-bottom: 0; } /* --- GAVETA DE INDICADORES (Contadores) --- */ .gaveta-indicadores { background: #fff; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .gaveta-indicadores summary { padding: 12px 20px; font-size: 14px; font-weight: 800; color: #2c3e50; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; border-radius: 10px; transition: background 0.2s; } .gaveta-indicadores summary:hover { background: #e9ecef; } .gaveta-indicadores summary::-webkit-details-marker { display: none; /* Esconde a setinha padrão do navegador */ } /* Quando a gaveta é aberta */ .gaveta-indicadores[open] { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #bdc3c7; } .gaveta-indicadores[open] summary { border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0; } .gaveta-indicadores[open] .icone-expandir-ind { transform: rotate(180deg); } /* Remove a cor de fundo duplicada da barra original para ficar limpo */ .gaveta-indicadores .counters-bar { background: transparent; box-shadow: none; padding: 15px; margin: 0; } /* --- GAVETA DE LINKS RÁPIDOS --- */ .gaveta-links { background: #fff; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .gaveta-links summary { padding: 12px 20px; font-size: 14px; font-weight: 800; color: #2980b9; /* Azul combinando com o botão */ cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #f1f8ff; /* Fundo azul bem clarinho */ border-radius: 10px; transition: background 0.2s; } .gaveta-links summary:hover { background: #e1f0fa; } .gaveta-links summary::-webkit-details-marker { display: none; /* Esconde a setinha padrão */ } .gaveta-links[open] { box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15); border-color: #3498db; } .gaveta-links[open] summary { border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0; } .gaveta-links[open] .icone-expandir-link { transform: rotate(180deg); } .conteudo-links { padding: 15px; background: #fff; border-radius: 0 0 10px 10px; } /* --- 1. TOOLTIPS (PONTOS DE INTERROGAÇÃO) --- */ .ajuda-tooltip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background-color: #3498db; color: white; border-radius: 50%; font-size: 11px; font-weight: bold; cursor: help; margin-left: 8px; position: relative; vertical-align: middle; } .ajuda-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background-color: #2c3e50; color: #fff; padding: 10px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; width: 220px; text-align: center; z-index: 100000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-weight: normal; line-height: 1.4; } .ajuda-tooltip:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; } /* --- 2. EMPTY STATE (ESTADO VAZIO) --- */ .empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; text-align: center; color: #7f8c8d; height: 100%; min-height: 150px; background-color: rgba(255,255,255,0.5); border: 2px dashed #eee; border-radius: 8px; margin: 5px; } .empty-state-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.6; } .empty-state-title { font-weight: 800; font-size: 16px; margin-bottom: 5px; color: #34495e; } .empty-state-text { font-size: 13px; margin-bottom: 15px; max-width: 250px; } .empty-state-btn { background-color: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); } .empty-state-btn:hover { background-color: #219d55; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4); } /* --- ESCONDER O BOTÃO VERDE GIGANTE --- */ .container-add { display: none !important; } /* --- 1. TOOLTIPS (PONTOS DE INTERROGAÇÃO) --- */ .ajuda-tooltip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background-color: #3498db; color: white; border-radius: 50%; font-size: 11px; font-weight: bold; cursor: help; margin-left: 8px; position: relative; vertical-align: middle; } .ajuda-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background-color: #2c3e50; color: #fff; padding: 10px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; width: 220px; text-align: center; z-index: 100000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-weight: normal; line-height: 1.4; } .ajuda-tooltip:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; } /* --- 2. EMPTY STATE (ESTADO VAZIO) --- */ .empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; text-align: center; color: #7f8c8d; height: 100%; min-height: 150px; background-color: rgba(255,255,255,0.5); border: 2px dashed #eee; border-radius: 8px; margin: 5px; } .empty-state-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.6; } .empty-state-title { font-weight: 800; font-size: 16px; margin-bottom: 5px; color: #34495e; } .empty-state-text { font-size: 13px; margin-bottom: 15px; max-width: 250px; } .empty-state-btn { background-color: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); } .empty-state-btn:hover { background-color: #219d55; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4); } /* --- 1. TOOLTIPS (PONTOS DE INTERROGAÇÃO) --- */ .ajuda-tooltip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background-color: #3498db; color: white; border-radius: 50%; font-size: 11px; font-weight: bold; cursor: help; margin-left: 8px; position: relative; vertical-align: middle; } .ajuda-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background-color: #2c3e50; color: #fff; padding: 10px; border-radius: 6px; font-size: 12px; white-space: pre-wrap; width: 220px; text-align: center; z-index: 100000; box-shadow: 0 4px 10px rgba(0,0,0,0.2); font-weight: normal; line-height: 1.4; } .ajuda-tooltip:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #2c3e50 transparent transparent transparent; } /* --- 2. EMPTY STATE (ESTADO VAZIO) --- */ .empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; text-align: center; color: #7f8c8d; height: 100%; min-height: 150px; background-color: rgba(255,255,255,0.5); border: 2px dashed #eee; border-radius: 8px; margin: 5px; } .empty-state-icon { font-size: 40px; margin-bottom: 10px; opacity: 0.6; } .empty-state-title { font-weight: 800; font-size: 16px; margin-bottom: 5px; color: #34495e; } .empty-state-text { font-size: 13px; margin-bottom: 15px; max-width: 250px; } .empty-state-btn { background-color: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; font-size: 13px; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); } .empty-state-btn:hover { background-color: #219d55; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(39, 174, 96, 0.4); } /* --- 3. GAVETA DE LINKS RÁPIDOS --- */ .gaveta-links { background: #fff; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .gaveta-links summary { padding: 12px 20px; font-size: 14px; font-weight: 800; color: #2980b9; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #f1f8ff; border-radius: 10px; transition: background 0.2s; } .gaveta-links summary:hover { background: #e1f0fa; } .gaveta-links summary::-webkit-details-marker { display: none; } .gaveta-links[open] { box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15); border-color: #3498db; } .gaveta-links[open] summary { border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0; } .gaveta-links[open] .icone-expandir-link { transform: rotate(180deg); } .conteudo-links { padding: 15px; background: #fff; border-radius: 0 0 10px 10px; } /* --- Menu de Contexto (Botão Direito) --- */ #custom-context-menu { display: none; position: absolute; z-index: 100000; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 4px 15px rgba(0,0,0,0.3); border-radius: 8px; padding: 5px 0; width: 200px; /* Um pouco mais largo para caber os textos */ font-size: 13px; font-weight: 600; max-height: 80vh; /* Se ficar muito grande, cria rolagem */ overflow-y: auto; } /* --- ESTILOS DO NOVO DOCK HORIZONTAL INFERIOR --- */ .fab-dock { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; background-color: rgba(44, 62, 80, 0.95); /* Fundo escuro com leve transparência */ padding: 10px 20px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 9990; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .fab-item-wrapper { display: flex; flex-direction: column; align-items: center; gap: 6px; } .fab-btn { width: 45px; height: 45px; border-radius: 50%; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: white; transition: transform 0.2s, background-color 0.2s; } .fab-btn:hover { transform: scale(1.15) translateY(-5px); /* Efeito de pular ao passar o mouse */ } .fab-btn:active { transform: scale(0.95); } /* Cores específicas para cada botão reaproveitando a identidade visual */ .fab-toggle-cor { background-color: #34495e; border: 2px solid #fff; } .fab-color-1 { background-color: #34495e; } /* Raio X */ .fab-color-2 { background-color: #607d8b; } /* Desfazer */ .fab-color-3 { background-color: #9b59b6; } /* Sequência */ .fab-color-4 { background-color: #455a64; } /* Limpar */ .fab-color-5 { background-color: #2980b9; } /* Buscar */ .fab-color-6 { background-color: #8e44ad; } /* Filtros */ .fab-divider { width: 2px; height: 40px; background-color: rgba(255,255,255,0.2); margin: 0 5px; margin-bottom: 5px; } /* Rótulos de Texto (Nomes) - Escondidos por padrão */ .fab-label { color: white; font-size: 11px; font-weight: bold; text-align: center; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s, max-height 0.3s, margin-top 0.3s; } /* O Segredo: A classe que o JS aciona para revelar os textos */ .fab-dock.show-labels .fab-label { opacity: 1; max-height: 20px; } /* Responsivo para Celular não quebrar a tela */ @media (max-width: 600px) { .fab-dock { width: 95%; padding: 10px; gap: 8px; justify-content: space-around; bottom: 10px; border-radius: 15px; } .fab-btn { width: 38px; height: 38px; font-size: 16px; } .fab-label { font-size: 9px; } } /* --- CORREÇÃO DEFINITIVA DO BOTÃO ⋯ E MODO CLEAN --- */ /* 1. Esconde o container principal no modo clean */ body.clean-view-active .master-acoes-container { display: none !important; } /* 2. MÁGICA: Mas se ele ganhar a classe 'visivel' pelo clique, FORÇA APARECER! */ body.clean-view-active .master-acoes-container.visivel, .master-acoes-container.visivel { display: flex !important; width: 100% !important; flex-wrap: wrap !important; } /* 3. Garante que os botões dentro dele mantenham o formato correto ao expandir */ .master-acoes-container.visivel .quick-actions-row { display: flex !important; } .filtro-tag-btn.excluded { background-color: #ffebee; color: #c0392b; border-color: #e74c3c; text-decoration: line-through; } /* --- FORÇAR EXIBIÇÃO DA RECORRÊNCIA NO KANBAN --- */ .kanban-dropzone .recorrencia-badge { display: inline-block !important; /* Sobrescreve o ocultamento padrão do Kanban */ background-color: #00bcd4 !important; /* Azul Cyan vibrante */ color: white !important; font-size: 11px !important; padding: 2px 6px !important; border-radius: 4px !important; margin-right: 4px !important; margin-bottom: 4px !important; font-weight: bold !important; border: 1px solid #0097a7 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; } /* --- EFEITOS VISUAIS PARA ARRASTAR OS INDICADORES --- */ .counter-box.arrastavel { cursor: grab !important; } .counter-box.arrastavel:active { cursor: grabbing !important; } /* Efeito de quem está voando (sendo arrastado) */ .counter-box.dragging { opacity: 0.4; transform: scale(0.9); border: 2px dashed #9b59b6 !important; background-color: #f3e5f5 !important; } /* Linhas azuis indicando onde vai cair */ .counter-box.drag-over-target { border-left: 6px solid #3498db !important; transform: translateX(4px); } .counter-box.drag-over-target-right { border-right: 6px solid #3498db !important; transform: translateX(-4px); } /* ======================================================== */ /* ======================================================== */ /* MÁGICA: VISÃO GRADE (CARDS CATÁLOGO) - VERSÃO ESTÁVEL */ /* ======================================================== */ /* 1. Modal Largo para acomodar as 8 colunas em monitores grandes */ #modal-relatorio-indicadores .modal-content, #modal-relatorio-prioridades .modal-content, #modal-relatorio-datas .modal-content, #modal-relatorio-sequencial .modal-content, #modal-relatorio-filtros .modal-content, #modal-ordenar-coluna .modal-content { max-width: 96vw !important; /* 96% da largura da tela */ width: 96vw !important; } /* 2. O MODO GRADE NO CSS SÓ ORGANIZA OS CARDS NO TBODY */ .tabela-prioridades.modo-grade tbody { display: grid !important; /* 🔥 Aqui forçamos as 8 colunas iguais sem scroll horizontal 🔥 */ grid-template-columns: repeat(8, 1fr) !important; gap: 10px; width: 100%; padding: 10px 0; } /* 3. Estilo dos Cards (Renderizados como DIVs no JS) */ .grade-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; height: 100%; overflow: hidden; /* Corta vazamentos */ transition: all 0.2s; text-align: center; /* Centraliza o conteúdo no modo grade */ } .grade-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 10; } /* 4. Esconde o cabeçalho antigo na visão grade */ .tabela-prioridades.modo-grade thead { display: none !important; } /* 5. Estrutura interna dos elementos no Card */ .grade-card-section { width: 100%; padding: 2px 0; min-width: 0; } /* --- Título (Nome da Tarefa Adaptado) --- */ .grade-card-title { font-size: 11px !important; font-weight: bold; color: #333; margin-top: 15px; /* Espaço para checkbox e badges absolutos */ white-space: normal !important; word-break: break-word; line-height: 1.2; } /* --- Badges/Pilulas (Posicionamento absoluto no card) --- */ .grade-card-badge-container { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 3px; } .grade-card span[style*="background"] { font-size: 9px !important; padding: 1px 4px !important; } /* --- Checkbox (Posicionamento absoluto) --- */ .grade-card-checkbox { position: absolute; top: 8px; left: 8px; z-index: 5; } /* --- Status e Ações --- */ .grade-card-status, .grade-card-actions { border-top: 1px dashed #eee; margin-top: 5px; padding-top: 5px; } .grade-card-status span { font-size: 9px !important; padding: 2px 4px !important; } .grade-card-actions { margin-top: auto; padding-top: 8px; /* Força os botões para o fundo do card */ display: flex; justify-content: center; gap: 3px; flex-wrap: wrap; } .grade-card-actions button { padding: 3px 5px !important; font-size: 10px !important; min-width: 25px !important; } /* --- Drag & Drop Target --- */ .grade-card.drag-over-target { border: 2px dashed #3498db !important; transform: scale(1.02); } /* ========================================== */ /* BOTÃO FLUTUANTE DE SUPORTE */ /* ========================================== */ .fab-suporte { position: fixed; bottom: 30px; left: 30px; background-color: #2c3e50; /* Azul escuro elegante */ color: white; padding: 12px 24px; border-radius: 30px; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 8px; z-index: 100000; /* Fica acima de tudo */ transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s; border: 2px solid rgba(255,255,255,0.1); } /* Efeito ao passar o mouse */ .fab-suporte:hover { transform: translateY(-5px) scale(1.05); /* Dá um pulinho */ background-color: #34495e; box-shadow: 0 8px 25px rgba(0,0,0,0.4); color: white; } /* Responsivo para Celular */ @media (max-width: 600px) { .fab-suporte { bottom: 20px; left: 20px; padding: 0; width: 50px; height: 50px; border-radius: 50%; /* Vira uma bolinha perfeita */ justify-content: center; font-size: 22px; } /* Esconde a palavra "Suporte" no celular para economizar espaço */ .fab-suporte .suporte-text { display: none; } } /* ========================================== */ /* POST-IT VIRTUAL (LEMBRETE) */ /* ========================================== */ /* O Container do Post-it */ .postit-container { position: fixed; bottom: 100px; /* Fica acima do botão de suporte */ left: 30px; width: 300px; background-color: #fff9c4; /* Amarelo clássico */ border: 1px solid #fbc02d; border-radius: 0 0 8px 8px; /* Arredondado só embaixo (estilo bloco) */ box-shadow: 5px 15px 25px rgba(0,0,0,0.3); z-index: 100000; display: none; /* Começa invisível, o JS vai mostrar */ flex-direction: column; overflow: hidden; transform-origin: bottom left; animation: popUpPostIt 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Animação de entrada */ @keyframes popUpPostIt { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* O Cabeçalho (A fitinha de cima) */ .postit-header { background-color: #fbc02d; /* Amarelo escuro */ color: #333; padding: 8px 15px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; font-size: 14px; cursor: grab; /* <-- ADICIONE ESTA LINHA AQUI */ user-select: none; /* <-- ADICIONE ESTA LINHA: Impede seleção de texto */ } .postit-header button { background: transparent; border: none; font-size: 24px; color: #333; cursor: pointer; line-height: 1; transition: transform 0.2s; } .postit-header button:hover { transform: scale(1.2); color: #c0392b; } /* A área de digitar */ #postit-texto { width: 100%; height: 100%; /* <-- ADICIONE ESTA LINHA: Preenche o container principal */ border: none; background: transparent; padding: 15px; min-height: 150px; resize: none; /* <-- MODIFIQUE AQUI: Mude de 'both' para 'none' */ min-width: 250px; font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; font-size: 15px; color: #2c3e50; line-height: 1.4; box-sizing: border-box; } #postit-texto:focus { outline: none; background-color: #fffde7; } /* Botão pequeno para reabrir (fica escondido quando o post-it tá aberto) */ #btn-reabrir-postit { position: fixed; bottom: 100px; left: 30px; background-color: #fbc02d; border: 2px solid white; border-radius: 50%; width: 50px; height: 50px; font-size: 24px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 99999; display: none; transition: transform 0.2s; } #btn-reabrir-postit:hover { transform: scale(1.1); } /* ========================================== */ /* ESTADO 3 DA TAG: MODO EXCLUSÃO (ALERTA) */ /* ========================================== */ .filtro-tag-btn.delete-mode { background-color: #f39c12 !important; /* Laranja Alerta */ color: #fff !important; border-color: #d35400 !important; box-shadow: 0 0 10px rgba(243, 156, 18, 0.8) !important; animation: tremor-tag 0.5s infinite; /* Efeito de tremer indicando perigo */ } /* Animação que faz o botão tremer suavemente */ @keyframes tremor-tag { 0% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } /* NOVO CONTROLE DE REDIMENSIONAMENTO CUSTOMIZADO */ .postit-resize-handle { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; cursor: nwse-resize; /* Cursor de seta diagonal */ z-index: 10001; /* Fica acima do textarea */ display: flex; align-items: center; justify-content: center; } /* Cria as linhas diagonais estilo browser */ .postit-resize-handle::after { content: ''; width: 12px; height: 12px; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; opacity: 0.6; margin-bottom: 3px; margin-right: 3px; } /* ========================================== */ /* MODO FOCO (POMODORO FLUTUANTE) */ /* ========================================== */ .pomodoro-widget { position: fixed; bottom: 30px; right: 30px; width: 260px; background: #2c3e50; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: white; z-index: 100000; display: none; flex-direction: column; border: 2px solid #e74c3c; transition: all 0.3s ease; } .pomodoro-header { background: #e74c3c; padding: 8px 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .pomodoro-header button { background: transparent; border: none; color: white; font-weight: bold; cursor: pointer; font-size: 18px; line-height: 1; } .pomodoro-body { padding: 20px; text-align: center; } .pomodoro-timer-display { font-size: 45px; font-weight: 900; font-family: monospace; letter-spacing: 2px; color: #ecf0f1; margin-bottom: 15px; } .pomodoro-timer-display.acabou { color: #e74c3c; animation: pomodoro-piscar 1s infinite; } @keyframes pomodoro-piscar { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .pomodoro-actions { display: flex; gap: 10px; } .pomodoro-actions button { flex: 1; padding: 10px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: transform 0.2s; } .pomodoro-actions button:hover { transform: scale(1.05); } .pom-btn-cancel { background: #7f8c8d; color: white; } .pom-btn-done { background: #27ae60; color: white; } /* Botão Minimizadinho */ .pomodoro-mini { position: fixed; bottom: 30px; right: 30px; background: #e74c3c; color: white; padding: 12px 20px; border-radius: 30px; font-weight: 900; font-family: monospace; font-size: 18px; cursor: pointer; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.5); z-index: 100000; display: none; border: 2px solid white; transition: transform 0.2s; } .pomodoro-mini:hover { transform: scale(1.1); } /* ======================================================== */ /* MÁGICA: MODO GRADE (ESTILO KANBAN / CARDS COMPACTOS) */ /* ======================================================== */ /* 1. Grid Base: Cartões menores para caber ~8 por linha */ .tabela-prioridades.modo-grade tbody { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; /* MÁGICA AQUI: Largura menor */ gap: 12px !important; /* Espaço um pouco menor entre eles */ padding: 15px !important; background-color: #f4f7f6 !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; } /* 2. O Cartão (Mais enxuto) */ .tabela-prioridades.modo-grade .linha-relatorio { display: flex !important; flex-direction: column !important; padding: 12px !important; /* Menos preenchimento interno */ background-color: #ffffff !important; border: 1px solid #e0e6ed !important; border-radius: 10px !important; box-shadow: 0 3px 8px rgba(0,0,0,0.06) !important; height: 100% !important; position: relative !important; transition: transform 0.2s, box-shadow 0.2s !important; border-left: 5px solid var(--cor-borda-card, #9b59b6) !important; } .tabela-prioridades.modo-grade .linha-relatorio:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; } /* 3. Reconstruindo as Células */ .tabela-prioridades.modo-grade .linha-relatorio td { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; text-align: left !important; } /* Ordenação interna do cartão */ .tabela-prioridades.modo-grade td:nth-child(1) { order: 1 !important; margin-bottom: 8px !important; } .tabela-prioridades.modo-grade td:nth-child(2) { order: 2 !important; margin-bottom: 8px !important; } .tabela-prioridades.modo-grade td:nth-child(3) { order: 3 !important; flex-grow: 1 !important; } .tabela-prioridades.modo-grade td:nth-child(4) { order: 4 !important; margin-top: 8px !important; } .tabela-prioridades.modo-grade td:nth-child(5), .tabela-prioridades.modo-grade td:last-child { order: 5 !important; margin-top: 12px !important; } /* Checkbox (Topo) */ .tabela-prioridades.modo-grade td:nth-child(1) { display: flex !important; align-items: center !important; gap: 6px !important; } .tabela-prioridades.modo-grade .item-selection-checkbox { width: 14px !important; /* Checkbox menor */ height: 14px !important; margin: 0 !important; cursor: pointer !important; } /* Título da Tarefa */ .tabela-prioridades.modo-grade .linha-relatorio strong { font-size: 13px !important; /* Fonte do título menor */ color: #2c3e50 !important; display: block !important; margin-bottom: 8px !important; line-height: 1.3 !important; } /* Badges (Etiquetas) */ .tabela-prioridades.modo-grade td:nth-child(3) > div { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; margin-bottom: 6px !important; } .tabela-prioridades.modo-grade span[style*="padding:"] { padding: 3px 6px !important; font-size: 10px !important; /* Texto das pílulas menor */ border-radius: 4px !important; font-weight: 700 !important; } /* Rodapé (Botões de Ação) */ .tabela-prioridades.modo-grade td:last-child { padding-top: 8px !important; border-top: 1px solid #f0f3f5 !important; display: flex !important; justify-content: space-around !important; align-items: center !important; flex-wrap: wrap !important; /* Quebra linha se ficar muito apertado */ gap: 4px !important; } /* Botões de Ação Menores */ .tabela-prioridades.modo-grade .btn-acao-indicador { padding: 4px !important; font-size: 12px !important; min-width: 26px !important; /* Botões menores */ height: 26px !important; border-radius: 6px !important; border: none !important; background: #f8f9fa !important; transition: background 0.2s, transform 0.2s !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; } .tabela-prioridades.modo-grade .btn-acao-indicador:hover { background: #e2e6ea !important; transform: scale(1.1) !important; } .tabela-prioridades.modo-grade thead { display: none !important; } .tabela-prioridades.modo-grade td:nth-child(3) div[style*="color:#777"] { display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; font-size: 11px !important; /* Texto da descrição menor */ margin-top: 4px !important; } /* ======================================================== */ /* MÁGICA: IMAGENS DE CAPA NOS CARTÕES DO RELATÓRIO (NOVO) */ /* ======================================================== */ /* 1. Abre um "buraco" de 115px no topo do cartão para a imagem entrar */ .tabela-prioridades.modo-grade .linha-relatorio.com-capa { padding-top: 115px !important; } /* 2. Fixa a imagem no topo absoluto do cartão */ .tabela-prioridades.modo-grade .capa-grade-relatorio { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100px !important; /* Imagem um pouco mais fina */ object-fit: cover !important; border-radius: 10px 10px 0 0 !important; border-bottom: 2px solid #eee !important; display: block !important; z-index: 1 !important; } /* 3. Esconde a imagem se o usuário voltar para o modo Lista */ .tabela-prioridades:not(.modo-grade) .capa-grade-relatorio { display: none !important; } /* ======================================================== */ /* MÁGICA: RODAPÉ DOS CARTÕES COM MENU EXPANSÍVEL (NOVO) */ /* ======================================================== */ /* 1. Prepara a base do rodapé */ .tabela-prioridades.modo-grade td:last-child { padding-top: 0 !important; border-top: none !important; display: flex !important; flex-direction: column !important; /* Pilha o '...' e o Menu de Ações */ justify-content: flex-end !important; align-items: center !important; width: 100% !important; margin-top: auto !important; /* Empurra pro fundo do cartão */ gap: 0 !important; } /* 2. Força o botão de reticências (⋯) a colar no fundo e receber a bordinha */ .tabela-prioridades.modo-grade td:last-child > div:first-child { width: 100% !important; border-top: 1px solid #eee !important; margin-top: 8px !important; } /* 3. Se estiver no modo Tabela Normal (Lista), mantém a largura legal */ .tabela-prioridades:not(.modo-grade) .td-acoes-mestra { min-width: 220px; } /* ======================================================== */ /* MÁGICA: BOTÕES DE CONCLUÍDOS NO MODO GRADE */ /* ======================================================== */ .tabela-prioridades.modo-grade .area-botoes-concluidos { display: flex !important; flex-direction: column !important; /* Coloca um em cima do outro */ gap: 5px !important; width: 100% !important; margin-top: auto !important; /* Empurra pro fundo do cartão */ padding-top: 8px !important; border-top: 1px solid #f0f3f5 !important; } .tabela-prioridades.modo-grade .area-botoes-concluidos button { width: 100% !important; /* Preenche o cartão inteiro */ font-size: 10px !important; padding: 6px !important; margin: 0 !important; } /* ======================================================== */ /* MÁGICA: RODAPÉ DOS CARTÕES COM MENU EXPANSÍVEL */ /* ======================================================== */ /* 1. Prepara a base do rodapé */ .tabela-prioridades.modo-grade td:last-child { padding-top: 0 !important; border-top: none !important; display: flex !important; flex-direction: column !important; /* Pilha o '...' e o Menu de Ações */ justify-content: flex-end !important; align-items: center !important; width: 100% !important; margin-top: auto !important; /* Empurra pro fundo do cartão */ gap: 0 !important; } /* 2. Força o botão de reticências (⋯) a colar no fundo e receber a bordinha */ .tabela-prioridades.modo-grade td:last-child > div:first-child { width: 100% !important; border-top: 1px solid #eee !important; margin-top: 8px !important; } /* 3. Empilha os botões de Reativar das tarefas Concluídas */ .tabela-prioridades.modo-grade .area-botoes-concluidos { display: flex !important; flex-direction: column !important; gap: 5px !important; width: 100% !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid #f0f3f5 !important; } /* 4. Se estiver no modo Tabela Normal (Lista), mantém a largura espaçosa */ .tabela-prioridades:not(.modo-grade) .td-acoes-mestra { min-width: 220px; } /* ======================================================== */ /* MÁGICA: CORREÇÃO DE CAMADAS (Z-INDEX SUPREMO) */ /* ======================================================== */ /* Garante que o menu de cores abra na frente do painel lateral */ #custom-context-menu { z-index: 999999 !important; } /* Garante que qualquer janela (modal) abra na frente do painel lateral */ .modal-overlay { z-index: 999998 !important; } /* ======================================================== */ /* MÁGICA: BARRA DE AÇÕES EM MASSA SEMPRE NA FRENTE TUDO */ /* ======================================================== */ #bulk-action-bar { z-index: 9999999 !important; /* Força a barra a ficar na frente de qualquer janela ou modal */ } /* ======================================================== */ /* CORREÇÕES PARA CELULAR (MOBILE RESPONSIVO) */ /* ======================================================== */ @media (max-width: 600px) { /* 1. Faz a barra preta caber todos os botões com rolagem lateral oculta */ .fab-dock { width: 96% !important; padding: 8px 10px !important; gap: 6px !important; justify-content: flex-start !important; /* Alinha no começo para poder rolar */ overflow-x: auto !important; /* Permite arrastar pro lado */ -webkit-overflow-scrolling: touch !important; /* Rolagem suave no iPhone */ bottom: 15px !important; } /* Esconde a barrinha de rolagem visualmente, mas o dedo continua puxando */ .fab-dock::-webkit-scrollbar { display: none; } /* Garante que os botões não sejam esmagados */ .fab-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; /* Trava o tamanho */ font-size: 16px !important; } /* 2. Sobe a tachinha amarela do Post-it para não bater na barra */ #btn-reabrir-postit { bottom: 95px !important; left: 20px !important; width: 45px !important; height: 45px !important; font-size: 20px !important; } /* Sobe a janela do post-it também */ .postit-container { bottom: 95px !important; left: 20px !important; } } /* ======================================================== */ /* MÁGICA: ROLAGEM HORIZONTAL NA BARRA DE AÇÕES EM MASSA */ /* ======================================================== */ /* 1. Transforma o container de botões em um "carrossel" rolável */ #bulk-columns-container { display: flex !important; flex-wrap: nowrap !important; /* Proíbe quebrar linha */ overflow-x: auto !important; /* Permite deslizar o dedo para os lados */ -webkit-overflow-scrolling: touch !important; /* Rolagem super suave no iPhone */ gap: 8px !important; padding-bottom: 5px !important; /* Espacinho extra na base */ scrollbar-width: none; /* Esconde a barra cinza feia no Firefox */ max-width: 100% !important; /* Não deixa vazar da barra preta */ } /* Esconde a barra de rolagem visual no Chrome/Safari/iOS, mas mantém a função do dedo */ #bulk-columns-container::-webkit-scrollbar { display: none !important; } /* 2. Impede que os botões sejam esmagados pela falta de espaço */ .btn-bulk-dest { flex-shrink: 0 !important; /* O botão defende o seu tamanho original */ white-space: nowrap !important; /* O texto não quebra para a linha de baixo */ } /* 3. Reorganização inteligente EXCLUSIVA para celular (Mobile) */ @media (max-width: 768px) { #bulk-action-bar { flex-direction: column !important; /* Empilha: Contador ⬇️ Carrossel ⬇️ Botão Cancelar */ align-items: center !important; padding: 12px !important; bottom: 10px !important; width: 95% !important; border-radius: 16px !important; gap: 12px !important; } /* Faz o carrossel ocupar toda a largura disponível no celular */ #bulk-columns-container { width: 100% !important; justify-content: flex-start !important; /* Prende os botões na esquerda para iniciar a rolagem */ } /* Esconde aquele risquinho separador vertical ( | ) que perde o sentido no celular */ #bulk-action-bar > div:nth-child(2) { display: none !important; } /* Estica o botão Cancelar para ficar um alvo fácil pro dedão */ .btn-bulk-cancel { width: 100% !important; text-align: center !important; padding: 10px !important; } } /* ======================================================== */ /* CORREÇÃO DEFINITIVA: BARRA DE AÇÕES EM MASSA NO CELULAR */ /* ======================================================== */ @media (max-width: 768px) { #bulk-action-bar { width: 95% !important; max-width: 95vw !important; flex-direction: column !important; /* O SEGREDO 1: Obriga todo mundo a respeitar a largura da caixa preta */ align-items: stretch !important; padding: 15px 10px !important; border-radius: 12px !important; box-sizing: border-box !important; } /* Centraliza apenas o contador (✅ 1 selecionado) */ #bulk-action-bar > div:first-child { align-self: center !important; margin-bottom: 5px !important; } /* Esconde a barrinha vertical (|) que só faz sentido no PC */ #bulk-action-bar > div:nth-child(2) { display: none !important; } /* O Carrossel de botões */ #bulk-columns-container { display: flex !important; flex-wrap: nowrap !important; /* Proíbe de pular linha */ /* O SEGREDO 2: Cria a rolagem invisível para o dedo */ overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; /* Fica lisinho no iPhone */ width: 100% !important; padding: 5px 0 10px 0 !important; /* Espaço pro dedo não bater no fundo */ gap: 10px !important; justify-content: flex-start !important; /* Começa colado na esquerda */ box-sizing: border-box !important; } /* Ocultar a barrinha de rolagem nativa feia, mas mantém a função do dedo */ #bulk-columns-container::-webkit-scrollbar { display: none !important; } /* O SEGREDO 3: Impede o botão de ser esmagado */ .btn-bulk-dest { flex-shrink: 0 !important; white-space: nowrap !important; } /* Estica o botão cancelar na base */ .btn-bulk-cancel { width: 100% !important; text-align: center !important; } } /* ======================================================== */ /* MÁGICA: BOTÃO DE COMPARTILHAMENTO (CAIXA DE ENTRADA) */ /* ======================================================== */ .share-widget-btn { position: fixed; bottom: 220px; /* Fica acima do botão do chat que está no 160px */ left: 30px; width: 50px; height: 50px; background: #8e44ad; /* Roxo para diferenciar */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 999999; transition: transform 0.3s; border: 2px solid white; } .share-widget-btn:hover { transform: scale(1.1); background: #9b59b6; } /* Animação quando a Camila mandar algo pra você */ @keyframes pulse-share-alerta { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0.8); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(155, 89, 182, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); } } .share-widget-btn.piscar-notificacao { animation: pulse-share-alerta 1.5s infinite !important; background-color: #f39c12 !important; /* Fica laranja pra chamar atenção */ border-color: #e67e22 !important; } @media (max-width: 600px) { .share-widget-btn { bottom: 210px !important; left: 20px !important; width: 45px !important; height: 45px !important; font-size: 18px !important; } } /* ======================================================== */ /* CORREÇÃO: BARRA DE ROLAGEM MODERNA PARA AÇÕES EM MASSA */ /* ======================================================== */ /* 1. Força o container a não quebrar linha e permitir rolagem horizontal em qualquer tela */ #bulk-columns-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important; padding-bottom: 8px !important; /* Espaço para a barrinha respirar sem encostar nos botões */ max-width: 100% !important; scroll-behavior: smooth; /* Configuração fina para o Firefox */ scrollbar-width: thin !important; scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important; } /* 2. O MODO SAAS: Estiliza a barra para navegadores baseados no Chrome/Edge/Safari */ #bulk-columns-container::-webkit-scrollbar { height: 6px !important; /* Altura fininha e elegante */ display: block !important; /* FORÇA a aparecer no PC! */ } /* Fundo do trilho da barra (Levemente escuro) */ #bulk-columns-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2) !important; border-radius: 10px; } /* A barrinha que você puxa com o mouse (Translúcida branca) */ #bulk-columns-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3) !important; border-radius: 10px; cursor: pointer; } /* Efeito ao passar o mouse na barrinha */ #bulk-columns-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5) !important; } /* Garante que os botões não sejam esmagados */ .btn-bulk-dest { flex-shrink: 0 !important; white-space: nowrap !important; } /* ======================================================== */ /* CORREÇÃO DO FUNDO VAZADO NO RELATÓRIO MODO LISTA */ /* ======================================================== */ #modal-relatorio-indicadores .modal-content { background-color: #f4f6f7 !important; } .tabela-prioridades thead th { background-color: #f4f6f7 !important; position: sticky; top: 0; z-index: 20; border-bottom: 2px solid #ddd; } /* ======================================================== */ /* CORREÇÃO DO FUNDO VAZADO NO RELATÓRIO MODO LISTA */ /* ======================================================== */ #modal-relatorio-indicadores .modal-content, #modal-relatorio-prioridades .modal-content, #modal-relatorio-datas .modal-content { background-color: #f4f6f7 !important; } .tabela-prioridades thead th { background-color: #f4f6f7 !important; position: sticky; top: 0; z-index: 20; border-bottom: 2px solid #ddd; } /* ======================================================== */ /* BARRA DE PROGRESSO DINÂMICA NOS CARTÕES */ /* ======================================================== */ /* Estilo do botão que o usuário puxa (Thumb) para navegadores Chrome/Safari/Edge/iOS */ .custom-range-progresso::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: white; /* Usa a cor calculada dinamicamente pelo JavaScript */ border: 4px solid var(--thumb-color, #e74c3c); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: transform 0.1s; } .custom-range-progresso::-webkit-slider-thumb:hover { transform: scale(1.2); } /* O mesmo estilo, mas para o Firefox */ .custom-range-progresso::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: white; border: 4px solid var(--thumb-color, #e74c3c); cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: transform 0.1s; } .custom-range-progresso::-moz-range-thumb:hover { transform: scale(1.2); } /* ======================================================== */ /* MÁGICA: JANELA DE CONCLUSÃO SEMPRE NO TOPO */ /* ======================================================== */ #choice-modal { z-index: 9999999 !important; /* Força ficar acima de qualquer outro relatório */ } /* ======================================================== */ /* MÁGICA: CORREÇÃO DE CAMADAS DO TELETRANSPORTE */ /* ======================================================== */ /* 1. Força a tela de teletransporte a ficar na frente de QUALQUER relatório */ #teleport-overlay { z-index: 9999999 !important; } /* 2. Garante que se você usar o botão direito (menu de cores) dentro do teletransporte, ele abra na frente também */ #custom-context-menu { z-index: 99999999 !important; } /* 3. A Janela de conclusão (quando você aperta no Check ✅) também precisa ficar no topo absoluto */ #choice-modal { z-index: 99999999 !important; } /* ========================================== */ /* MÁGICA: MURAL DE NOTÍCIAS (JORNAL) */ /* ========================================== */ .news-widget-btn { position: fixed; bottom: 280px; /* Fica acima do botão de Compartilhar */ left: 30px; width: 50px; height: 50px; background: #e67e22; /* Laranja Jornal */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 999999; transition: transform 0.3s; border: 2px solid white; } .news-widget-btn:hover { transform: scale(1.1); background: #d35400; } @keyframes pulse-news-alerta { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.8); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(230, 126, 34, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); } } .news-widget-btn.piscar-notificacao { animation: pulse-news-alerta 1.5s infinite !important; background-color: #f1c40f !important; /* Fica Amarelo Ouro */ border-color: #f39c12 !important; } @media (max-width: 600px) { .news-widget-btn { bottom: 270px !important; left: 20px !important; width: 45px !important; height: 45px !important; font-size: 20px !important; } } /* ========================================== */ /* CORREÇÃO SUPREMA: MENU EXPANSÍVEL (⋯) */ /* ========================================== */ .master-acoes-container.visivel { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; /* Força ocupar a largura toda do cartão */ } .quick-actions-row { display: flex !important; flex-wrap: wrap !important; /* Permite quebrar linha horizontalmente */ justify-content: center !important; /* Centraliza os botões */ gap: 4px !important; width: 100% !important; height: auto !important; min-height: 28px !important; border-top: none !important; /* Removemos a linha para ficar mais limpo */ padding-top: 0 !important; margin-top: 0 !important; } .quick-actions-right { display: contents !important; } .btn-quick-action { width: 28px !important; /* Volta a ser quadradinho */ min-width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Os botões com texto (Ex: Editar, Concluir) crescem automaticamente */ .btn-quick-action:not([title="Editar"]):not([title="Duplicar"]):not([title="Excluir"]) { width: auto !important; padding: 0 8px !important; } /* ========================================== */ /* MÁGICA: BOTÃO FLUTUANTE DE TREINAMENTOS 🎓 */ /* ========================================== */ .training-widget-btn { position: fixed; bottom: 340px; /* Fica acima do botão do Jornal */ left: 30px; width: 50px; height: 50px; background: #2c3e50; /* Azul Escuro */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 999999; transition: transform 0.3s; border: 2px solid white; } .training-widget-btn:hover { transform: scale(1.1); background: #34495e; } @keyframes pulse-training-alerta { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.8); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(41, 128, 185, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(41, 128, 185, 0); } } .training-widget-btn.piscar-notificacao { animation: pulse-training-alerta 1.5s infinite !important; background-color: #3498db !important; /* Fica Azul Claro e vibrante */ border-color: #2980b9 !important; } @media (max-width: 600px) { .training-widget-btn { bottom: 330px !important; left: 20px !important; width: 45px !important; height: 45px !important; font-size: 20px !important; } }