/* ======================================== ESTILOS PARA DIALOG DE DETALHAR CONTRATO ======================================== */ /* Garantir que o dialog apareça por cima do template admin */ .contract-detail-dialog { z-index: 10000 !important; border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; overflow: hidden !important; border: none !important; } .contract-detail-dialog.ui-dialog { z-index: 10000 !important; position: fixed !important; } .contract-detail-dialog .ui-dialog-mask { z-index: 9999 !important; } .contract-detail-dialog .ui-widget-overlay { z-index: 9998 !important; } /* Cabeçalho do Dialog */ .contract-detail-dialog .ui-dialog-titlebar { background: linear-gradient(135deg, #006e96 0%, #0088cc 100%) !important; color: white !important; border: none !important; padding: 20px 24px !important; font-size: 20px !important; font-weight: 600 !important; position: relative; z-index: 10001 !important; } .contract-detail-dialog .ui-dialog-titlebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); pointer-events: none; } /* Botão de Fechar - Versão Corrigida */ .contract-detail-dialog .ui-dialog-titlebar-close { background: #ffffff !important; border: none !important; border-radius: 50% !important; width: 32px !important; height: 32px !important; transition: all 0.3s ease !important; position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; box-sizing: border-box !important; } .contract-detail-dialog .ui-dialog-titlebar-close:hover { background: #f8f9fa !important; transform: scale(1.1) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } .contract-detail-dialog .ui-dialog-titlebar-close:active { transform: scale(0.95) !important; } .contract-detail-dialog .ui-dialog-titlebar-close .ui-icon-closethick { color: white !important; font-size: 16px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; display: block !important; text-align: center !important; } /* Ajuste para o container do botão */ .contract-detail-dialog .ui-dialog-titlebar-close .ui-button-icon-left { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } /* Garantir que o botão não tenha espaçamento extra */ .contract-detail-dialog .ui-dialog-titlebar-close .ui-button-text { display: none !important; } /* Ajustes adicionais para compatibilidade */ .contract-detail-dialog .ui-dialog-titlebar-close * { box-sizing: border-box !important; } .contract-detail-dialog .ui-dialog-titlebar-close .ui-button-icon-only { padding: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important; } /* Ajuste para o posicionamento no cabeçalho */ .contract-detail-dialog .ui-dialog-titlebar { display: flex !important; align-items: center !important; justify-content: space-between !important; } .contract-detail-dialog .ui-dialog-title { flex: 1 !important; margin-right: 16px !important; } /* Conteúdo do Dialog */ .contract-detail-dialog .ui-dialog-content { padding: 0 !important; background: #f8f9fa !important; border: none !important; } /* Seção de Informações do Contrato */ .contract-info-section { background: white; padding: 32px; border-bottom: 1px solid #e9ecef; position: relative; } .contract-info-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #006e96 0%, #0088cc 50%, #0099dd 100%); } /* Grid de Informações */ .contract-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 24px; } /* Itens de Informação */ .contract-info-item { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; border-radius: 12px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; } .contract-info-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 110, 150, 0.1), transparent); transition: left 0.5s ease; } .contract-info-item:hover::before { left: 100%; } .contract-info-item:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: #006e96; } /* Labels das Informações */ .contract-info-label { font-weight: 600; color: #495057; font-size: 14px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; } .contract-info-label .ui-icon { color: #006e96; font-size: 16px; } /* Valores das Informações */ .contract-info-value { color: #212529; font-size: 16px; font-weight: 500; line-height: 1.4; word-break: break-word; margin-top: 8px; } .contract-info-value.null-value { color: #6c757d; font-style: italic; } /* Seção de Documentos */ .documents-section { padding: 32px; background: white; position: relative; } /* Cabeçalho dos Documentos */ .documents-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #006e96; position: relative; } .documents-header::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: linear-gradient(90deg, #006e96 0%, #0088cc 100%); } .documents-header h3 { color: #333; font-size: 20px; font-weight: 600; margin: 0; } .documents-header .ui-icon { color: #006e96; font-size: 24px; } /* Tabela de Documentos */ .documents-table { border: 1px solid #e0e0e0 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; background: white !important; } /* Cabeçalho da Tabela */ .documents-table .ui-datatable-header { background: linear-gradient(135deg, #006e96 0%, #0088cc 100%) !important; color: white !important; padding: 20px 24px !important; font-weight: 600 !important; font-size: 18px !important; border: none !important; position: relative; } .documents-table .ui-datatable-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); pointer-events: none; } /* Cabeçalhos das Colunas */ .documents-table .ui-datatable-thead th { background: #f8f9fa !important; color: #333 !important; font-weight: 600 !important; padding: 16px 12px !important; border-bottom: 2px solid #e0e0e0 !important; text-align: center !important; font-size: 14px !important; position: relative; } .documents-table .ui-datatable-thead th:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: #e0e0e0; } /* Células da Tabela */ .documents-table .ui-datatable-tbody td { padding: 12px 8px !important; border-bottom: 1px solid #f0f0f0 !important; vertical-align: middle !important; font-size: 14px !important; transition: background-color 0.2s ease; } /* Centralizar coluna de número */ .documents-table .ui-datatable-tbody td:first-child { text-align: center !important; } .documents-table .ui-datatable-tbody tr:hover { background-color: #f8f9fa !important; } .documents-table .ui-datatable-tbody tr:nth-child(even) { background-color: #fafafa !important; } .documents-table .ui-datatable-tbody tr:nth-child(even):hover { background-color: #f0f0f0 !important; } /* Botão de Download */ .download-button { background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important; border: none !important; color: white !important; padding: 8px 16px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.3s ease !important; position: relative; overflow: hidden; } .download-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .download-button:hover::before { left: 100%; } .download-button:hover { background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%) !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3); } /* Paginação */ .pagination-info { background: #f8f9fa; padding: 16px 24px; border-top: 1px solid #e9ecef; color: #6c757d; font-size: 14px; text-align: center; } /* Responsividade */ @media (max-width: 768px) { .contract-info-grid { grid-template-columns: 1fr; gap: 16px; } .contract-info-section, .documents-section { padding: 20px; } .contract-info-item { padding: 16px; } .documents-header { flex-direction: column; align-items: flex-start; gap: 8px; } .documents-header h3 { font-size: 18px; } } @media (max-width: 480px) { .contract-detail-dialog { width: 95vw !important; height: 95vh !important; } .contract-info-section, .documents-section { padding: 16px; } .contract-info-item { padding: 12px; } .documents-table .ui-datatable-thead th, .documents-table .ui-datatable-tbody td { padding: 8px 4px !important; font-size: 12px !important; } } /* Animações */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .contract-info-item { animation: fadeInUp 0.4s ease-out; } .contract-info-item:nth-child(1) { animation-delay: 0.1s; } .contract-info-item:nth-child(2) { animation-delay: 0.2s; } .contract-info-item:nth-child(3) { animation-delay: 0.3s; } .contract-info-item:nth-child(4) { animation-delay: 0.4s; } .contract-info-item:nth-child(5) { animation-delay: 0.5s; } .contract-info-item:nth-child(6) { animation-delay: 0.6s; } /* Estados de Loading */ .contract-detail-dialog.loading .ui-dialog-content { opacity: 0.7; pointer-events: none; } .contract-detail-dialog.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 4px solid #f3f3f3; border-top: 4px solid #006e96; border-radius: 50%; animation: spin 1s linear infinite; z-index: 1000; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Estilos globais para garantir que dialogs apareçam acima do template admin */ .ui-dialog { z-index: 9999 !important; } .ui-dialog-mask { z-index: 9998 !important; } .ui-widget-overlay { z-index: 9997 !important; } /* Garantir que o modal apareça acima de qualquer header */ .ui-dialog.ui-widget { z-index: 10000 !important; position: fixed !important; } /* Ajuste adicional para headers fixos */ .ui-dialog-titlebar { z-index: 10001 !important; }