/* Created on : 13 de mar. de 2026, 21:39:08 Author : edson */ /** * ============================================================================ * MODERN PRIMEFACES 15 - Enterprise Premium Theme Override * ============================================================================ * * Design System inspired by Material Design 3, Ant Design, and Apple UI * All rules use !important to override PrimeFaces defaults * * Version: 1.0.0 * Compatible with: PrimeFaces 15.x * ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ============================================================================ SECTION 1: DESIGN TOKENS (CSS CUSTOM PROPERTIES) ============================================================================ */ :root { /* Primary Colors - Using existing system palette */ --mpf-primary: #152f60 !important; --mpf-primary-hover: #0f2340 !important; --mpf-primary-light: rgba(21, 47, 96, 0.12) !important; --mpf-primary-glow: rgba(21, 47, 96, 0.25) !important; /* Semantic Colors */ --mpf-success: #28a745 !important; --mpf-success-hover: #218838 !important; --mpf-success-light: rgba(40, 167, 69, 0.12) !important; --mpf-danger: #dc3545 !important; --mpf-danger-hover: #c82333 !important; --mpf-danger-light: rgba(220, 53, 69, 0.12) !important; --mpf-warning: #fd7e14 !important; --mpf-warning-hover: #e96d00 !important; --mpf-warning-light: rgba(253, 126, 20, 0.12) !important; --mpf-info: #17a2b8 !important; --mpf-info-hover: #138496 !important; --mpf-info-light: rgba(23, 162, 184, 0.12) !important; /* Neutral Colors */ --mpf-text-primary: #1a1a2e !important; --mpf-text-secondary: #4a5568 !important; --mpf-text-muted: #6c757d !important; --mpf-text-placeholder: #a0aec0 !important; --mpf-bg-body: #f7fafc !important; --mpf-bg-surface: #ffffff !important; --mpf-bg-elevated: #ffffff !important; --mpf-bg-hover: #f8f9fa !important; --mpf-bg-active: #e9ecef !important; --mpf-border-light: #e2e8f0 !important; --mpf-border-default: #dee2e6 !important; --mpf-border-focus: #152f60 !important; /* Spacing */ --mpf-space-xs: 4px !important; --mpf-space-sm: 8px !important; --mpf-space-md: 12px !important; --mpf-space-lg: 16px !important; --mpf-space-xl: 24px !important; /* Border Radius */ --mpf-radius-sm: 6px !important; --mpf-radius-md: 10px !important; --mpf-radius-lg: 14px !important; --mpf-radius-xl: 20px !important; --mpf-radius-full: 9999px !important; /* Shadows */ --mpf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06) !important; --mpf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08) !important; --mpf-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12) !important; --mpf-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16) !important; --mpf-shadow-focus: 0 0 0 3px var(--mpf-primary-glow) !important; /* Transitions */ --mpf-transition-fast: 0.15s ease !important; --mpf-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; --mpf-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Typography */ --mpf-font-family: 'Inter', 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important; --mpf-font-size-xs: 0.875rem !important; --mpf-font-size-sm: 0.95rem !important; --mpf-font-size-md: 1rem !important; --mpf-font-size-lg: 1.25rem !important; --mpf-font-weight-normal: 400 !important; --mpf-font-weight-medium: 500 !important; --mpf-font-weight-semibold: 600 !important; --mpf-font-weight-bold: 700 !important; } /* ============================================================================ SECTION 2: BASE & TYPOGRAPHY ============================================================================ */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--mpf-font-family) !important; background: var(--mpf-bg-body) !important; color: var(--mpf-text-primary) !important; } /* ============================================================================ SECTION 3: FORM INPUTS (InputText, Password, TextArea) ============================================================================ */ /* Base Input Styles – estacados, bem definidos */ body .ui-inputfield, body .ui-inputtext, body input.ui-inputfield, body textarea.ui-inputfield { font-family: var(--mpf-font-family) !important; font-size: var(--mpf-font-size-md) !important; color: var(--mpf-text-primary) !important; background: var(--mpf-bg-surface) !important; border: 2px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; transition: var(--mpf-transition-normal) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important; outline: none !important; width: 100% !important; max-width: 100% !important; min-height: 48px !important; padding: 12px 16px !important; box-sizing: border-box !important; } /* Overrides for composite components where the input is a flex child */ body .ui-calendar .ui-inputfield, body .ui-calendar input.ui-inputfield, body .ui-inputnumber .ui-inputfield, body .ui-inputnumber input.ui-inputfield { width: 1px !important; /* Allow flex-grow to take over */ flex: 1 1 auto !important; } body .ui-inputfield:hover, body .ui-inputtext:hover { border-color: var(--mpf-primary) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; } body .ui-inputfield:focus, body .ui-inputtext:focus, body .ui-inputfield.ui-state-focus, body .ui-inputtext.ui-state-focus { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus), 0 2px 8px rgba(0, 0, 0, 0.08) !important; background: var(--mpf-bg-surface) !important; } /* Placeholder */ body .ui-inputfield::placeholder, body .ui-inputtext::placeholder { color: var(--mpf-text-placeholder) !important; opacity: 1 !important; } /* Disabled State – modo visualizar: fundo e texto visíveis (não “muito branco”) */ body .ui-inputfield:disabled, body .ui-inputfield.ui-state-disabled, body .ui-inputtext:disabled { background: #e9ecef !important; border: 1.5px solid #ced4da !important; color: #495057 !important; opacity: 1 !important; cursor: not-allowed !important; } body .ui-inputfield:disabled::placeholder, body .ui-inputtext:disabled::placeholder { color: #6c757d !important; } /* Error State */ body .ui-inputfield.ui-state-error, body .ui-inputtext.ui-state-error { border-color: var(--mpf-danger) !important; box-shadow: 0 0 0 3px var(--mpf-danger-light) !important; background: #fff5f5 !important; } /* TextArea */ body textarea.ui-inputfield, body .ui-inputtextarea { min-height: 100px !important; resize: vertical !important; line-height: 1.5 !important; } /* Password Input */ body .ui-password { position: relative !important; } body .ui-password input { padding-right: 40px !important; } /* Float Label Enhancements */ body .ui-float-label>label { color: var(--mpf-text-muted) !important; transition: var(--mpf-transition-normal) !important; font-size: var(--mpf-font-size-md) !important; } body .ui-float-label>input:focus~label, body .ui-float-label>.ui-inputwrapper-focus~label, body .ui-float-label>input.ui-state-filled~label, body .ui-float-label>.ui-inputwrapper-filled~label { color: var(--mpf-primary) !important; font-size: var(--mpf-font-size-sm) !important; font-weight: var(--mpf-font-weight-medium) !important; } /* ============================================================================ SECTION 4: SELECT COMPONENTS (SelectOneMenu, MultiSelect, AutoComplete) ============================================================================ */ /* SelectOneMenu */ body .ui-selectonemenu { background: var(--mpf-bg-surface) !important; border: 1.5px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; transition: var(--mpf-transition-normal) !important; box-shadow: var(--mpf-shadow-sm) !important; height: auto !important; min-height: 45px !important; } body .ui-selectonemenu:not(.ui-state-disabled):hover { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-md) !important; } body .ui-selectonemenu.ui-state-disabled, body .ui-selectonemenu:disabled { background: #e9ecef !important; border-color: #ced4da !important; } body .ui-selectonemenu.ui-state-disabled .ui-selectonemenu-label, body .ui-selectonemenu.ui-state-disabled .ui-selectonemenu-trigger { color: #495057 !important; } body .ui-selectonemenu.ui-state-focus { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus), var(--mpf-shadow-md) !important; } body .ui-selectonemenu .ui-selectonemenu-label { padding: 10px 14px !important; color: var(--mpf-text-primary) !important; background: transparent !important; border: none !important; box-shadow: none !important; min-height: auto !important; border-radius: 0 !important; } /* Remove double-border from autocomplete internal input */ body .ui-autocomplete .ui-autocomplete-input, body .ui-autocomplete input.ui-inputfield { border: none !important; box-shadow: none !important; background: transparent !important; min-height: auto !important; padding: 10px 14px !important; } body .ui-selectonemenu .ui-selectonemenu-trigger { background: transparent !important; border-left: none !important; color: var(--mpf-text-muted) !important; border-radius: 0 var(--mpf-radius-md) var(--mpf-radius-md) 0 !important; width: 36px !important; transition: var(--mpf-transition-fast) !important; } body .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 18px !important; width: 18px !important; height: 18px !important; position: absolute !important; left: 50% !important; top: 50% !important; margin: 0 !important; transform: translate(-50%, -50%) !important; text-indent: -9999px !important; /* Hide default icon */ overflow: hidden !important; } body .ui-selectonemenu:hover .ui-selectonemenu-trigger { color: var(--mpf-primary) !important; } /* Custom Chevron for AutoComplete */ body .ui-autocomplete::after { content: '' !important; display: block !important; position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 18px !important; pointer-events: none !important; /* Let clicks pass through to input */ z-index: 2 !important; } /* SelectOneMenu Panel */ body .ui-selectonemenu-panel { border: none !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-lg) !important; margin-top: 4px !important; overflow: hidden !important; z-index: 10000 !important; background: #ffffff !important; } body .ui-selectonemenu-panel .ui-selectonemenu-items { padding: var(--mpf-space-xs) !important; } body .ui-selectonemenu-panel .ui-selectonemenu-item { padding: 10px 14px !important; border-radius: var(--mpf-radius-sm) !important; margin: 2px 0 !important; transition: var(--mpf-transition-fast) !important; color: var(--mpf-text-primary) !important; } body .ui-selectonemenu-panel .ui-selectonemenu-item:hover { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } body .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight { background: var(--mpf-primary) !important; color: white !important; } /* AutoComplete */ body .ui-autocomplete { position: relative !important; background: var(--mpf-bg-surface) !important; border: 1.5px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; transition: var(--mpf-transition-normal) !important; box-shadow: var(--mpf-shadow-sm) !important; height: auto !important; min-height: 45px !important; } body .ui-autocomplete:hover { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-md) !important; } body .ui-autocomplete.ui-state-focus, body .ui-autocomplete:focus-within { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus), var(--mpf-shadow-md) !important; } body .ui-autocomplete-input { padding-right: 40px !important; } /* Ajuste para filtros dentro de Selects se houver lupa */ body .ui-selectonemenu-filter-container .ui-inputfield { padding-left: 35px !important; } body .ui-autocomplete .ui-autocomplete-dropdown { position: absolute !important; right: 0 !important; top: 0 !important; height: 95% !important; background: transparent !important; border: none !important; color: var(--mpf-text-muted) !important; border-radius: 0 var(--mpf-radius-md) var(--mpf-radius-md) 0 !important; width: 36px !important; } body .ui-autocomplete .ui-autocomplete-dropdown:hover { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } body .ui-autocomplete-panel { border: none !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-lg) !important; margin-top: 4px !important; z-index: 10000 !important; background: #ffffff !important; } body .ui-autocomplete-panel .ui-autocomplete-items { padding: var(--mpf-space-xs) !important; } body .ui-autocomplete-panel .ui-autocomplete-item { padding: 10px 14px !important; border-radius: var(--mpf-radius-sm) !important; margin: 2px 0 !important; transition: var(--mpf-transition-fast) !important; } body .ui-autocomplete-panel .ui-autocomplete-item:hover, body .ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } /* MultiSelect */ body .ui-selectcheckboxmenu { background: var(--mpf-bg-surface) !important; border: 1.5px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; transition: var(--mpf-transition-normal) !important; } body .ui-selectcheckboxmenu:hover { border-color: var(--mpf-primary) !important; } body .ui-selectcheckboxmenu.ui-state-focus { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus) !important; } /* InputNumber – Bloco moderno */ body .ui-inputnumber { display: flex !important; width: 100% !important; align-items: stretch !important; border: 2px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; overflow: hidden !important; background: var(--mpf-bg-surface) !important; transition: var(--mpf-transition-normal) !important; } body .ui-inputnumber:hover { border-color: var(--mpf-primary) !important; } body .ui-inputnumber.ui-state-focus { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus) !important; } body .ui-inputnumber .ui-inputfield { border: none !important; box-shadow: none !important; min-height: 44px !important; padding: 10px 14px !important; } body .ui-selectcheckboxmenu-panel { border: none !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-lg) !important; } body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item { padding: 10px 14px !important; border-radius: var(--mpf-radius-sm) !important; margin: 2px var(--mpf-space-xs) !important; } body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-item:hover { background: var(--mpf-primary-light) !important; } /* ============================================================================ SECTION 5: CALENDAR / DATEPICKER ============================================================================ */ /* Calendar – cor original do sistema (azul #152f60) */ body .ui-datepicker { background: var(--mpf-bg-surface) !important; border: 1px solid var(--mpf-border-light) !important; border-radius: var(--mpf-radius-lg) !important; box-shadow: var(--mpf-shadow-xl) !important; padding: var(--mpf-space-md) !important; min-width: 340px !important; width: auto !important; z-index: 10000 !important; } body .ui-datepicker table { width: 100% !important; border-collapse: separate !important; border-spacing: 2px !important; } body .ui-datepicker .ui-datepicker-header { background: linear-gradient(135deg, #1e4a8a, #152f60) !important; border: none !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border-radius: var(--mpf-radius-md) !important; margin-bottom: 8px !important; } body .ui-datepicker .ui-datepicker-title { font-weight: var(--mpf-font-weight-semibold) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 14px !important; margin: 0 8px !important; flex: 1 !important; } body .ui-datepicker .ui-datepicker-title select { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 6px !important; padding: 4px 8px !important; font-size: 13px !important; cursor: pointer !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; min-width: 72px !important; max-width: 86px !important; text-align: center !important; } body .ui-datepicker .ui-datepicker-title select option { background: #ffffff !important; color: #1e293b !important; } body .ui-datepicker .ui-datepicker-prev, body .ui-datepicker .ui-datepicker-next { width: 32px !important; height: 32px !important; border-radius: var(--mpf-radius-full) !important; background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; transition: var(--mpf-transition-fast) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; position: relative !important; } body .ui-datepicker .ui-datepicker-prev span, body .ui-datepicker .ui-datepicker-next span { display: none !important; } body .ui-datepicker .ui-datepicker-prev::before, body .ui-datepicker .ui-datepicker-next::before { font-family: FontAwesome !important; font-size: 13px !important; line-height: 1 !important; color: #fff !important; } body .ui-datepicker .ui-datepicker-prev::before { content: "\f053" !important; } body .ui-datepicker .ui-datepicker-next::before { content: "\f054" !important; } body .ui-datepicker .ui-datepicker-prev:hover, body .ui-datepicker .ui-datepicker-next:hover { background: rgba(255, 255, 255, 0.35) !important; color: #fff !important; } body .ui-datepicker th { color: var(--mpf-text-muted) !important; font-weight: var(--mpf-font-weight-medium) !important; font-size: var(--mpf-font-size-xs) !important; text-transform: uppercase !important; padding: 6px 4px !important; text-align: center !important; } body .ui-datepicker td { padding: 2px !important; text-align: center !important; } body .ui-datepicker td>a, body .ui-datepicker td>span { width: 34px !important; height: 34px !important; border-radius: var(--mpf-radius-full) !important; transition: var(--mpf-transition-fast) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; font-size: 13px !important; } body .ui-datepicker td>a:hover { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } body .ui-datepicker td.ui-datepicker-today>a { background: var(--mpf-bg-active) !important; font-weight: var(--mpf-font-weight-bold) !important; } body .ui-datepicker td>a.ui-state-active { background: linear-gradient(135deg, #1e4a8a, #152f60) !important; color: white !important; } /* ============================================================================ CAMPOS CALENDAR (DATA) – bloco único input + botão, visual alinhado ============================================================================ */ body .ui-calendar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; border: 2px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-md) !important; overflow: hidden !important; /* Importante para o botão não vazar o border-radius */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; background: var(--mpf-bg-surface) !important; transition: var(--mpf-transition-normal) !important; min-height: 48px !important; position: relative !important; } body .ui-calendar > .ui-datepicker { position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 4px !important; width: auto !important; min-width: 320px !important; } body .ui-calendar:hover { border-color: #152f60 !important; box-shadow: 0 2px 8px rgba(21, 47, 96, 0.12) !important; } body .ui-calendar.ui-state-focus, body .ui-calendar:focus-within { border-color: #152f60 !important; box-shadow: 0 0 0 3px rgba(21, 47, 96, 0.2) !important; } body .ui-calendar.ui-state-disabled { background: #e9ecef !important; border-color: #ced4da !important; } body .ui-calendar.ui-state-disabled .ui-inputfield, body .ui-calendar.ui-state-disabled input { background: #e9ecef !important; color: #495057 !important; } body .ui-calendar.ui-state-disabled .ui-datepicker-trigger, body .ui-calendar.ui-state-disabled .ui-calendar-button { background: #adb5bd !important; color: #495057 !important; cursor: not-allowed !important; } /* Input dentro do calendar – sem borda própria, integrado ao bloco */ body .ui-calendar .ui-inputfield, body .ui-calendar input.ui-inputfield { flex: 1 1 auto !important; min-width: 0 !important; width: 1px !important; /* Força o flexbox a calcular corretamente */ border: none !important; box-shadow: none !important; padding: 10px 16px !important; min-height: 44px !important; } body .ui-calendar .ui-inputfield:focus, body .ui-calendar input.ui-inputfield:focus { box-shadow: none !important; } /* Botão do calendário – azul, mesmo bloco */ body .ui-calendar .ui-datepicker-trigger, body .ui-calendar .ui-calendar-button { width: 44px !important; min-width: 44px !important; height: auto !important; right: 0 !important; min-height: 44px !important; padding: 0 !important; border: none !important; border-radius: 0 !important; /* Removido para usar o border-radius do parent overflow:hidden */ background: linear-gradient(135deg, #1e4a8a, #152f60) !important; color: #fff !important; cursor: pointer !important; transition: background-color 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; } body .ui-calendar .ui-datepicker-trigger:hover, body .ui-calendar .ui-calendar-button:hover { background: #1e4a8a !important; color: #fff !important; } body .ui-calendar .ui-datepicker-trigger .ui-icon, body .ui-calendar .ui-calendar-button .ui-icon { color: #fff !important; } body .ui-calendar .ui-datepicker-trigger .ui-icon, body .ui-calendar .ui-calendar-button .ui-icon { background: none !important; text-indent: 0 !important; width: auto !important; height: auto !important; } body .ui-calendar .ui-datepicker-trigger::before, body .ui-calendar .ui-calendar-button::before { content: "\f073" !important; font-family: FontAwesome !important; font-size: 16px !important; line-height: 1 !important; color: #fff !important; } /* ============================================================================ SECTION 6: BUTTONS ============================================================================ */ /* Botões – cor 100% preenchida; texto e ícone na mesma linha */ body .ui-button { font-family: var(--mpf-font-family) !important; font-size: var(--mpf-font-size-md) !important; font-weight: var(--mpf-font-weight-medium) !important; padding: 5px 10px !important; border: none !important; cursor: pointer !important; transition: background-color 0.2s, color 0.2s !important; background-color: #152f60 !important; color: #fff !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 45px !important; box-sizing: border-box !important; overflow: hidden !important; } /* Filhos do botão sem fundo próprio – cor 100% preenchida no botão */ body .ui-button .ui-button-text, body .ui-button .ui-button-icon { color: inherit !important; border: none !important; } /* Preserva icones legados do PrimeFaces (sprite .ui-icon-*) */ body .ui-button .ui-button-icon-left:not(.pi), body .ui-button .ui-button-icon-right:not(.pi) { background-color: initial !important; } body .ui-button:hover { background: #1a3d72 !important; } body .ui-button:active { background: #0f2340 !important; } body .ui-button.ui-button-secondary, body .ui-button.ui-button-flat { background: var(--mpf-bg-surface) !important; color: var(--mpf-text-primary) !important; border: 1.5px solid var(--mpf-border-default) !important; } body .ui-button.ui-button-secondary:hover { background: var(--mpf-bg-hover) !important; border-color: var(--mpf-primary) !important; color: var(--mpf-primary) !important; } body .ui-button.ui-button-success { background: var(--mpf-success) !important; } body .ui-button.ui-button-success:hover { background: var(--mpf-success-hover) !important; } body .ui-button.ui-button-danger { background: var(--mpf-danger) !important; } body .ui-button.ui-button-danger:hover { background: var(--mpf-danger-hover) !important; } body .ui-button.ui-button-warning { background: var(--mpf-warning) !important; } body .ui-button.ui-button-warning:hover { background: var(--mpf-warning-hover) !important; } body .ui-button.ui-button-info { background: var(--mpf-info) !important; } body .ui-button.ui-button-info:hover { background: var(--mpf-info-hover) !important; } body .ui-button:disabled, body .ui-button.ui-state-disabled { background: #adb5bd !important; color: #495057 !important; opacity: 1 !important; cursor: not-allowed !important; transform: none !important; } /* Split Button (Ações com dropdown) – um único bloco, sem “quebra” no meio */ body .ui-splitbutton { display: inline-flex !important; align-items: stretch !important; border-radius: var(--mpf-radius-md) !important; overflow: hidden !important; box-shadow: var(--mpf-shadow-sm) !important; } body .ui-splitbutton .ui-button { border-radius: 0 !important; margin: 0 !important; min-width: 0 !important; } body .ui-splitbutton .ui-button:first-child { border-top-left-radius: var(--mpf-radius-md) !important; border-bottom-left-radius: var(--mpf-radius-md) !important; border-right: 1px solid rgba(255, 255, 255, 0.35) !important; padding-left: var(--mpf-space-lg) !important; padding-right: var(--mpf-space-md) !important; } body .ui-splitbutton .ui-splitbutton-menubutton .ui-button-icon-left, body .ui-splitbutton .ui-splitbutton-menubutton .ui-button-icon-right { opacity: 0 !important; } body .ui-splitbutton .ui-splitbutton-menubutton::before { content: "\25BE"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1; pointer-events: none; } body .ui-splitbutton:hover .ui-button:first-child { background: #1a3d72 !important; } body .ui-splitbutton .ui-button:first-child .ui-button-text, body .ui-splitbutton .ui-button:first-child .ui-icon { background: transparent !important; color: inherit !important; } /* Ícone e texto do botão na mesma linha (evita "Pesq uisar" / "Limp ar") */ body .ui-button .ui-button-text, body .ui-button .ui-button-icon { flex-shrink: 0 !important; } body .ui-button .ui-button-icon-left { order: -1 !important; } /* Botões de excluir (lixeira) – vermelho */ body .ui-button.colored-delete-button, body .ui-button:has(.pi-trash) { background: #dc3545 !important; background-color: #dc3545 !important; color: #fff !important; } body .ui-button.colored-delete-button:hover, body .ui-button:has(.pi-trash):hover { background: #c82333 !important; background-color: #c82333 !important; color: #fff !important; } body .ui-button.colored-delete-button .ui-button-text, body .ui-button.colored-delete-button .ui-icon, body .ui-button:has(.pi-trash) .ui-button-text, body .ui-button:has(.pi-trash) .ui-icon { background: transparent !important; color: inherit !important; } /* ============================================================================ SECTION 7: DATATABLE ============================================================================ */ body .ui-datatable { background: var(--mpf-bg-surface) !important; border: none !important; border-radius: var(--mpf-radius-lg) !important; box-shadow: var(--mpf-shadow-md) !important; overflow: hidden !important; } body .ui-datatable .ui-datatable-header { background: linear-gradient(135deg, var(--mpf-primary) 0%, var(--mpf-primary-hover) 100%) !important; color: white !important; border: none !important; padding: 8px 16px !important; font-weight: var(--mpf-font-weight-semibold) !important; font-size: var(--mpf-font-size-sm) !important; } body .ui-datatable thead th { background: var(--mpf-bg-hover) !important; border: none !important; border-bottom: 2px solid var(--mpf-border-light) !important; padding: 11px 16px !important; font-weight: var(--mpf-font-weight-bold) !important; color: var(--mpf-text-secondary) !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.3 !important; white-space: nowrap !important; } body .ui-datatable th.ui-sortable-column { cursor: pointer !important; transition: var(--mpf-transition-fast) !important; } body .ui-datatable th.ui-sortable-column:hover { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } body .ui-datatable tbody td, body .ui-datatable .ui-datatable-data td { background: var(--mpf-bg-surface) !important; border: none !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: 10px 16px !important; font-size: 0.875rem !important; transition: var(--mpf-transition-fast) !important; } body .ui-datatable tbody tr:hover td, body .ui-datatable .ui-datatable-data tr:hover td { background: var(--mpf-primary-light) !important; } body .ui-datatable tbody tr.ui-state-highlight td, body .ui-datatable .ui-datatable-data tr.ui-state-highlight td { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } /* Paginator – compacto e discreto (não grande nem pesado) */ body .ui-datatable .ui-paginator, body .ui-paginator { background: #f8f9fa !important; border: none !important; border-top: 1px solid var(--mpf-border-light) !important; padding: 8px 12px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; min-height: 40px !important; } body .ui-paginator .ui-paginator-current, body .ui-paginator .ui-paginator-current * { font-size: 0.8125rem !important; color: var(--mpf-text-secondary) !important; margin-right: 6px !important; } body .ui-paginator .ui-paginator-pages { display: flex !important; align-items: center !important; gap: 2px !important; } body .ui-paginator .ui-paginator-element { min-width: 28px !important; height: 28px !important; padding: 0 6px !important; border-radius: 6px !important; background: var(--mpf-bg-surface) !important; border: 1px solid var(--mpf-border-light) !important; transition: var(--mpf-transition-fast) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.8125rem !important; color: var(--mpf-text-primary) !important; } body .ui-paginator .ui-paginator-element:hover { background: var(--mpf-primary-light) !important; border-color: #152f60 !important; color: #152f60 !important; } body .ui-paginator .ui-paginator-element.ui-state-disabled { opacity: 0.5 !important; cursor: not-allowed !important; } body .ui-paginator .ui-paginator-page.ui-state-active { background: #152f60 !important; border-color: #152f60 !important; color: white !important; } body .ui-paginator .ui-paginator-rpp-options { margin-left: 6px !important; } body .ui-paginator .ui-paginator-rpp-options label, body .ui-paginator select { font-size: 0.8125rem !important; margin: 0 2px !important; } /* Mobile Responsive DataTable – TODAS as tabelas viram cards (evita quebra com muitas colunas) */ @media screen and (max-width: 768px) { body .ui-datatable, body .ui-datatable.ui-datatable-responsive { display: block !important; } body .ui-datatable table, body .ui-datatable .ui-datatable-data { display: block !important; width: 100% !important; } body .ui-datatable thead, body .ui-datatable .ui-datatable-thead { display: none !important; } body .ui-datatable tbody, body .ui-datatable .ui-datatable-data { display: block !important; } body .ui-datatable tbody tr, body .ui-datatable .ui-datatable-data tr { display: block !important; background: var(--mpf-bg-surface) !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-sm) !important; margin-bottom: var(--mpf-space-md) !important; padding: var(--mpf-space-md) !important; border: 1px solid var(--mpf-border-light) !important; counter-reset: dt-col !important; } body .ui-datatable tbody td, body .ui-datatable .ui-datatable-data td { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--mpf-space-sm) !important; padding: var(--mpf-space-sm) var(--mpf-space-xs) !important; border-bottom: 1px solid var(--mpf-border-light) !important; background: transparent !important; width: 100% !important; box-sizing: border-box !important; counter-increment: dt-col !important; } body .ui-datatable tbody td:last-child, body .ui-datatable .ui-datatable-data td:last-child { border-bottom: none !important; } /* Label da coluna: nome real do cabeçalho (preenchido por datatable-responsive-labels.js) */ body .ui-datatable tbody td::before, body .ui-datatable .ui-datatable-data td::before { content: attr(data-label) !important; font-weight: var(--mpf-font-weight-semibold) !important; color: var(--mpf-text-secondary) !important; font-size: var(--mpf-font-size-xs) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; flex-shrink: 0 !important; } /* Paginador em mobile – wrap e menor */ body .ui-datatable .ui-paginator, body .ui-paginator { display: flex !important; flex-wrap: wrap !important; gap: var(--mpf-space-xs) !important; justify-content: center !important; align-items: center !important; padding: var(--mpf-space-sm) !important; } body .ui-paginator .ui-paginator-element { min-width: 28px !important; height: 28px !important; font-size: 0.8125rem !important; } } /* ============================================================================ SECTION 8: DATATABLE – SCROLL, FILTROS, REFINAMENTOS ============================================================================ */ body .ui-datatable .ui-datatable-scrollable-body, body .ui-datatable .ui-datatable-scrollable-view { scrollbar-width: thin !important; scrollbar-color: var(--mpf-border-default) transparent !important; } body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar, body .ui-datatable .ui-datatable-scrollable-view::-webkit-scrollbar { height: 8px !important; width: 8px !important; } body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar-track, body .ui-datatable .ui-datatable-scrollable-view::-webkit-scrollbar-track { background: var(--mpf-bg-hover) !important; border-radius: var(--mpf-radius-full) !important; } body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar-thumb, body .ui-datatable .ui-datatable-scrollable-view::-webkit-scrollbar-thumb { background: var(--mpf-border-default) !important; border-radius: var(--mpf-radius-full) !important; } body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar-thumb:hover, body .ui-datatable .ui-datatable-scrollable-view::-webkit-scrollbar-thumb:hover { background: var(--mpf-text-muted) !important; } body .ui-datatable .ui-column-filter, body .ui-datatable input.ui-column-filter, body .ui-datatable .ui-filter-column input { border-radius: var(--mpf-radius-sm) !important; border: 1.5px solid var(--mpf-border-default) !important; padding: 6px 10px !important; font-size: var(--mpf-font-size-sm) !important; transition: var(--mpf-transition-fast) !important; } body .ui-datatable .ui-column-filter:focus, body .ui-datatable input.ui-column-filter:focus { border-color: var(--mpf-primary) !important; box-shadow: var(--mpf-shadow-focus) !important; } body .ui-datatable.ui-datatable-striped tbody tr:nth-child(even) td { background: var(--mpf-bg-hover) !important; } body .ui-datatable.ui-datatable-striped tbody tr:nth-child(even):hover td { background: var(--mpf-primary-light) !important; } /* ============================================================================ SECTION 9: DIALOG & CONFIRM DIALOG ============================================================================ */ body .ui-dialog { background: var(--mpf-bg-surface) !important; border: none !important; border-radius: var(--mpf-radius-lg) !important; box-shadow: var(--mpf-shadow-xl) !important; overflow: hidden !important; animation: mpf-dialog-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } @keyframes mpf-dialog-in { from { opacity: 0 !important; transform: scale(0.95) translateY(-10px) !important; } to { opacity: 1 !important; transform: scale(1) translateY(0) !important; } } body .ui-dialog .ui-dialog-titlebar { background: linear-gradient(135deg, var(--mpf-primary) 0%, var(--mpf-primary-hover) 100%) !important; color: white !important; border: none !important; padding: var(--mpf-space-lg) var(--mpf-space-xl) !important; font-weight: var(--mpf-font-weight-semibold) !important; font-size: var(--mpf-font-size-lg) !important; } body .ui-dialog .ui-dialog-title { color: white !important; } body .ui-dialog .ui-dialog-titlebar-close, body .ui-dialog .ui-dialog-titlebar-icon { background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.9) !important; width: 36px !important; height: 36px !important; border-radius: var(--mpf-radius-full) !important; transition: var(--mpf-transition-fast) !important; } body .ui-dialog .ui-dialog-titlebar-close:hover, body .ui-dialog .ui-dialog-titlebar-icon:hover { background: rgba(255, 255, 255, 0.2) !important; color: white !important; } body .ui-dialog .ui-dialog-content::-webkit-scrollbar { width: 8px !important; } body .ui-dialog .ui-dialog-content::-webkit-scrollbar-track { background: var(--mpf-bg-hover) !important; border-radius: var(--mpf-radius-full) !important; } body .ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb { background: var(--mpf-border-default) !important; border-radius: var(--mpf-radius-full) !important; } body .ui-dialog .ui-dialog-footer { background: var(--mpf-bg-hover) !important; border: none !important; border-top: 1px solid var(--mpf-border-light) !important; padding: var(--mpf-space-md) var(--mpf-space-xl) !important; } body .ui-confirm-dialog .ui-dialog-titlebar { background: var(--mpf-bg-surface) !important; color: var(--mpf-text-primary) !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: var(--mpf-space-lg) var(--mpf-space-xl) !important; } body .ui-confirm-dialog .ui-dialog-title { color: var(--mpf-text-primary) !important; font-size: 1.25rem !important; font-weight: 700 !important; } body .ui-confirm-dialog .ui-dialog-content { padding: 30px var(--mpf-space-xl) !important; font-size: 1.05rem !important; color: var(--mpf-text-secondary) !important; } body .ui-confirm-dialog .ui-dialog-content .ui-confirm-dialog-severity { font-size: 28px !important; margin-right: 20px !important; color: var(--mpf-danger) !important; /* Mudei para danger para o ícone de lixeira/aviso */ animation: mpf-float 3s ease-in-out infinite !important; } @keyframes mpf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } body .ui-confirm-dialog .ui-dialog-footer { background: #f8f9fa !important; padding: 15px 25px !important; border-top: 1px solid #eee !important; display: flex !important; justify-content: flex-end !important; gap: 12px !important; } /* Botões do ConfirmDialog */ body .ui-confirm-dialog .ui-dialog-footer .ui-button { min-width: 100px !important; border-radius: 8px !important; padding: 8px 20px !important; font-weight: 600 !important; transition: all 0.2s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; } body .ui-confirm-dialog .ui-dialog-footer .ui-button.ui-confirmdialog-yes { background: var(--mpf-primary) !important; border: none !important; color: white !important; } body .ui-confirm-dialog .ui-dialog-footer .ui-button.ui-confirmdialog-yes:hover { background: var(--mpf-primary-hover) !important; box-shadow: 0 4px 8px rgba(21, 47, 96, 0.25) !important; transform: translateY(-1px) !important; } body .ui-confirm-dialog .ui-dialog-footer .ui-button.ui-confirmdialog-no { background: white !important; color: var(--mpf-text-primary) !important; border: 1px solid var(--mpf-border-default) !important; } body .ui-confirm-dialog .ui-dialog-footer .ui-button.ui-confirmdialog-no:hover { background: #f1f3f5 !important; border-color: #adb5bd !important; } body .ui-dialog-mask { background: rgba(26, 26, 46, 0.6) !important; backdrop-filter: blur(4px) !important; animation: mpf-mask-in 0.2s ease !important; } @keyframes mpf-mask-in { from { opacity: 0 !important; } to { opacity: 1 !important; } } /* ============================================================================ DIALOGS RESPONSIVOS - adaptação a qualquer tela ============================================================================ */ /* Todos os diálogos: limitar à viewport e permitir scroll interno */ body .ui-dialog { max-width: 800px !important; /* Cap default dialogs at a smaller maximum instead of 95vw */ max-height: 90vh !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; border: 1px solid rgba(0,0,0,0.1) !important; } body .ui-dialog.dialogo-confirmacao { max-width: 450px !important; /* Modals with this class should be small */ } body .ui-dialog .ui-dialog-content { overflow: auto !important; max-height: calc(90vh - 120px) !important; } /* Telas pequenas: diálogo ocupa quase toda a tela */ @media screen and (max-width: 768px) { body .ui-dialog .ui-dialog-content { max-height: calc(90vh - 100px) !important; } } /* Diálogos com largura em %: garantir que não ultrapassem a viewport */ body .ui-dialog[style*="width"] .ui-dialog-content { min-height: 0 !important; } /* ConfirmDialog também responsivo */ body .ui-confirm-dialog.ui-dialog { max-width: 95vw !important; } /* ============================================================================ SECTION 10: TABS & ACCORDION ============================================================================ */ body .ui-tabs { border: none !important; border-radius: var(--mpf-radius-md) !important; overflow: hidden !important; background: var(--mpf-bg-surface) !important; box-shadow: var(--mpf-shadow-sm) !important; } body .ui-tabs .ui-tabs-nav { background: #f1f3f500 !important; border: none !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; } body .ui-tabs .ui-tabs-nav::-webkit-scrollbar { height: 4px !important; } body .ui-tabs .ui-tabs-nav::-webkit-scrollbar-thumb { background: var(--mpf-border-default) !important; border-radius: var(--mpf-radius-full) !important; } body .ui-tabs .ui-tabs-nav li { border: none !important; margin: 0 !important; border-radius: 0 !important; transition: var(--mpf-transition-fast) !important; flex-shrink: 0 !important; } body .ui-tabs .ui-tabs-nav li a { padding: 10px 16px !important; color: var(--mpf-text-secondary) !important; font-weight: var(--mpf-font-weight-medium) !important; font-size: var(--mpf-font-size-sm) !important; transition: var(--mpf-transition-fast) !important; border: none !important; white-space: nowrap !important; display: block !important; } body .ui-tabs .ui-tabs-nav li:not(.ui-state-active):hover a { color: #152f60 !important; background: rgba(37, 99, 235, 0.08) !important; } body .ui-tabs .ui-tabs-nav li.ui-state-active { background: var(--mpf-bg-surface) !important; border-bottom: 2px solid #152f60 !important; margin-bottom: -1px !important; } body .ui-tabs .ui-tabs-nav li.ui-state-active a { color: #152f60 !important; font-weight: var(--mpf-font-weight-semibold) !important; } body .ui-tabs .ui-tabs-panels { background: var(--mpf-bg-surface) !important; border: none !important; } body .ui-tabs .ui-tabs-panel { padding: var(--mpf-space-xl) !important; border: none !important; color: var(--mpf-text-primary) !important; } /* Accordion */ body .ui-accordion { border: none !important; border-radius: var(--mpf-radius-lg) !important; overflow: hidden !important; box-shadow: var(--mpf-shadow-md) !important; } body .ui-accordion .ui-accordion-header { background: var(--mpf-bg-surface) !important; border: none !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: var(--mpf-space-lg) var(--mpf-space-xl) !important; font-weight: var(--mpf-font-weight-semibold) !important; color: var(--mpf-text-primary) !important; transition: var(--mpf-transition-fast) !important; } body .ui-accordion .ui-accordion-header:hover { background: var(--mpf-bg-hover) !important; color: var(--mpf-primary) !important; } body .ui-accordion .ui-accordion-header.ui-state-active { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; border-bottom-color: var(--mpf-border-light) !important; } body .ui-accordion .ui-accordion-header .ui-icon { transition: var(--mpf-transition-fast) !important; } body .ui-accordion .ui-accordion-content { border: none !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: var(--mpf-space-xl) !important; background: var(--mpf-bg-surface) !important; color: var(--mpf-text-primary) !important; } body .ui-accordion .ui-accordion-content:last-child { border-bottom: none !important; } /* ============================================================================ SECTION 11: MENU, MENUBAR, SIDEBAR ============================================================================ */ body .ui-menu, body .ui-menubar { border: none !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-lg) !important; background: var(--mpf-bg-surface) !important; padding: var(--mpf-space-xs) !important; } body .ui-menu .ui-menu-list .ui-menuitem, body .ui-menubar .ui-menubar-root-list > .ui-menuitem { border-radius: var(--mpf-radius-sm) !important; margin: 2px 0 !important; transition: var(--mpf-transition-fast) !important; } body .ui-menu .ui-menu-list .ui-menuitem-link, body .ui-menubar .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link { padding: 10px 5px !important; color: var(--mpf-text-primary) !important; transition: var(--mpf-transition-fast) !important; gap: 4px !important; display: flex !important; align-items: center !important; } body .ui-menu .ui-menu-list .ui-menuitem-link:hover, body .ui-menubar .ui-menubar-root-list > .ui-menuitem:hover > .ui-menuitem-link { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; } body .ui-menu .ui-menu-list .ui-menuitem.ui-state-active > .ui-menuitem-link, body .ui-menubar .ui-menubar-root-list > .ui-menuitem.ui-state-active > .ui-menuitem-link { background: var(--mpf-primary) !important; color: white !important; } body .ui-menubar { border-radius: var(--mpf-radius-md) !important; padding: var(--mpf-space-xs) var(--mpf-space-md) !important; } body .ui-menubar .ui-submenu-list { border: none !important; border-radius: var(--mpf-radius-md) !important; box-shadow: var(--mpf-shadow-lg) !important; padding: var(--mpf-space-xs) !important; margin-top: 4px !important; animation: mpf-menu-in 0.2s ease !important; } @keyframes mpf-menu-in { from { opacity: 0 !important; transform: translateY(-4px) !important; } to { opacity: 1 !important; transform: translateY(0) !important; } } body .ui-sidebar { background: var(--mpf-bg-surface) !important; box-shadow: var(--mpf-shadow-xl) !important; border: none !important; } body .ui-sidebar .ui-sidebar-close { color: var(--mpf-text-secondary) !important; border-radius: var(--mpf-radius-full) !important; transition: var(--mpf-transition-fast) !important; } body .ui-sidebar .ui-sidebar-close:hover { background: var(--mpf-bg-hover) !important; color: var(--mpf-primary) !important; } /* ============================================================================ SECTION 12: TOAST / GROWL / MESSAGES – opacas, cores escuras e destacadas ============================================================================ */ .ui-growl { z-index: 10000 !important; top: 1rem !important; right: 1rem !important; } .ui-growl-item-container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: .5rem !important; } .ui-growl-item { position: relative; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .ui-growl-image, .ui-growl-image-error, .ui-growl-image-info, .ui-growl-image-warn, .ui-growl-image-fatal, .ui-growl-image-success { display: none !important; } /* Botao X para usuario fechar a mensagem */ .ui-growl-icon-close { display: inline-flex !important; align-items: center; justify-content: center; position: absolute !important; top: 0.5rem !important; right: 0.5rem !important; width: 1.75rem !important; height: 1.75rem !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 6px !important; background-color: rgba(255, 255, 255, 0.2) !important; background-image: none !important; text-indent: 0 !important; cursor: pointer !important; font-size: 1rem !important; line-height: 1 !important; opacity: 0.9 !important; transition: background-color 0.2s ease, opacity 0.2s ease !important; } .ui-growl-icon-close::before { content: "\e90b" !important; font-family: 'primeicons' !important; color: inherit !important; } .ui-growl-icon-close:hover { background-color: rgba(255, 255, 255, 0.35) !important; opacity: 1 !important; } .ui-growl-item-container { position: relative !important; } .ui-growl-item-container .ui-growl-message { padding-right: 2.75rem !important; } .ui-growl-message { border-radius: 10px !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .25) !important; padding: 16px 20px !important; min-width: 300px !important; animation: mpfToastIn .3s cubic-bezier(.4, 0, .2, 1) !important; } @keyframes mpf-toast-in { from { opacity: 0 !important; transform: translateX(100%) !important; } to { opacity: 1 !important; transform: translateX(0) !important; } } /* Info – azul escuro, texto branco, 100% opaco */ body .ui-toast .ui-toast-message-info, body .ui-growl .ui-growl-message-info { background: #1971c2 !important; background-color: #1971c2 !important; border-left: 5px solid #1864ab !important; color: #ffffff !important; opacity: 1 !important; } body .ui-toast .ui-toast-message-info .ui-growl-icon, body .ui-growl .ui-growl-message-info .ui-growl-icon, body .ui-toast .ui-toast-message-info *, body .ui-growl .ui-growl-message-info * { color: #ffffff !important; } /* Success – verde escuro, texto branco */ body .ui-toast .ui-toast-message-success, body .ui-growl .ui-growl-message-success { background: #2f9e44 !important; background-color: #2f9e44 !important; border-left: 5px solid #2b8a3e !important; color: #ffffff !important; opacity: 1 !important; } body .ui-toast .ui-toast-message-success .ui-growl-icon, body .ui-growl .ui-growl-message-success .ui-growl-icon, body .ui-toast .ui-toast-message-success *, body .ui-growl .ui-growl-message-success * { color: #ffffff !important; } /* Warn – amarelo/laranja escuro, texto preto */ body .ui-toast .ui-toast-message-warn, body .ui-toast .ui-toast-message-warning, body .ui-growl .ui-growl-message-warn { background: #f59f00 !important; background-color: #f59f00 !important; border-left: 5px solid #e67700 !important; color: #1c1917 !important; opacity: 1 !important; } body .ui-growl .ui-growl-message-warn .ui-growl-icon, body .ui-toast .ui-toast-message-warn *, body .ui-growl .ui-growl-message-warn * { color: #1c1917 !important; } /* Error – vermelho escuro, texto branco (bem destacado, sem transparência) */ body .ui-toast .ui-toast-message-error, body .ui-growl .ui-growl-message-error { background: #c92a2a !important; background-color: #c92a2a !important; border-left: 5px solid #a61e1e !important; color: #ffffff !important; opacity: 1 !important; } body .ui-toast .ui-toast-message-error .ui-growl-icon, body .ui-growl .ui-growl-message-error .ui-growl-icon, body .ui-toast .ui-toast-message-error *, body .ui-growl .ui-growl-message-error * { color: #ffffff !important; } body .ui-growl .ui-growl-message .ui-growl-title, body .ui-growl .ui-growl-message .ui-growl-message, body .ui-growl .ui-growl-message *, body .ui-toast .ui-toast-message * { color: inherit !important; } /* PrimeFaces Growl: cor só na mensagem interna (evita efeito de "dois blocos") */ body .ui-growl .ui-growl-item:has(.ui-growl-image-error), body .ui-growl .ui-growl-item:has(.ui-growl-image-fatal), body .ui-growl .ui-growl-item-container:has(.ui-growl-image-error), body .ui-growl .ui-growl-item-container:has(.ui-growl-image-fatal) { background: transparent !important; background-color: transparent !important; border: none !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-error) .ui-growl-message, body .ui-growl .ui-growl-item:has(.ui-growl-image-fatal) .ui-growl-message, body .ui-growl .ui-growl-item-container:has(.ui-growl-image-error) .ui-growl-message, body .ui-growl .ui-growl-item-container:has(.ui-growl-image-fatal) .ui-growl-message { background: #c92a2a !important; background-color: #c92a2a !important; border-left: 5px solid #a61e1e !important; color: #ffffff !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-error) *, body .ui-growl .ui-growl-item:has(.ui-growl-image-fatal) *, body .ui-growl .ui-growl-item-container:has(.ui-growl-image-error) *, body .ui-growl .ui-growl-item-container:has(.ui-growl-image-fatal) * { color: #ffffff !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-info) { background: transparent !important; background-color: transparent !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-info) .ui-growl-message { background: #1971c2 !important; background-color: #1971c2 !important; border-left: 5px solid #1864ab !important; color: #ffffff !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-info) * { color: #ffffff !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-warn) { background: transparent !important; background-color: transparent !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-warn) .ui-growl-message { background: #f59f00 !important; background-color: #f59f00 !important; border-left: 5px solid #e67700 !important; color: #1c1917 !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-warn) * { color: #1c1917 !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-success) { background: transparent !important; background-color: transparent !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-success) .ui-growl-message { background: #2f9e44 !important; background-color: #2f9e44 !important; border-left: 5px solid #2b8a3e !important; color: #ffffff !important; } body .ui-growl .ui-growl-item:has(.ui-growl-image-success) * { color: #ffffff !important; } body .ui-messages { border-radius: var(--mpf-radius-md) !important; padding: 12px 16px !important; box-shadow: var(--mpf-shadow-md) !important; } body .ui-messages-info { background: #1971c2 !important; background-color: #1971c2 !important; border: 1px solid #1864ab !important; border-left: 5px solid #1864ab !important; color: #ffffff !important; } body .ui-messages-success { background: #2f9e44 !important; background-color: #2f9e44 !important; border: 1px solid #2b8a3e !important; border-left: 5px solid #2b8a3e !important; color: #ffffff !important; } body .ui-messages-warn { background: #f59f00 !important; background-color: #f59f00 !important; border: 1px solid #e67700 !important; border-left: 5px solid #e67700 !important; color: #1c1917 !important; } body .ui-messages-error { background: #c92a2a !important; background-color: #c92a2a !important; border: 1px solid #a61e1e !important; border-left: 5px solid #a61e1e !important; color: #ffffff !important; } body .ui-message { border-radius: var(--mpf-radius-sm) !important; padding: 8px 12px !important; } body .ui-message-info { background: #1971c2 !important; background-color: #1971c2 !important; border: 1px solid #1864ab !important; border-left: 5px solid #1864ab !important; color: #ffffff !important; } body .ui-message-success { background: #2f9e44 !important; background-color: #2f9e44 !important; border: 1px solid #2b8a3e !important; border-left: 5px solid #2b8a3e !important; color: #ffffff !important; } body .ui-message-warn { background: #f59f00 !important; background-color: #f59f00 !important; border: 1px solid #e67700 !important; border-left: 5px solid #e67700 !important; color: #1c1917 !important; } body .ui-message-error { background: #c92a2a !important; background-color: #c92a2a !important; border: 1px solid #a61e1e !important; border-left: 5px solid #a61e1e !important; color: #ffffff !important; } /* ============================================================================ SECTION 13: CHECKBOX & RADIO BUTTON (CUSTOM) ============================================================================ */ body .ui-chkbox { display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .ui-chkbox .ui-chkbox-box { width: 20px !important; height: 20px !important; border: 2px solid var(--mpf-border-default) !important; border-radius: 6px !important; background: var(--mpf-bg-surface) !important; transition: var(--mpf-transition-fast) !important; display: flex !important; align-items: center !important; justify-content: center !important; } body .ui-chkbox .ui-chkbox-box:hover { border-color: var(--mpf-primary) !important; background: var(--mpf-primary-light) !important; } body .ui-chkbox .ui-chkbox-box.ui-state-focus { box-shadow: var(--mpf-shadow-focus) !important; } body .ui-chkbox .ui-chkbox-box.ui-state-active { background: var(--mpf-primary) !important; border-color: var(--mpf-primary) !important; color: white !important; } body .ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon { color: white !important; } body .ui-chkbox .ui-chkbox-box.ui-state-disabled { background: var(--mpf-bg-hover) !important; border-color: var(--mpf-border-light) !important; opacity: 0.6 !important; } /* RadioButton – círculo e bolinha central visíveis, alinhados ao label */ body .ui-radiobutton { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 10px !important; vertical-align: middle !important; } body .ui-selectoneradio .ui-radiobutton { margin-right: 8px !important; } body .ui-radiobutton .ui-radiobutton-box { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; border: 2px solid var(--mpf-border-default) !important; border-radius: var(--mpf-radius-full) !important; background: var(--mpf-bg-surface) !important; transition: var(--mpf-transition-fast) !important; display: flex !important; align-items: center !important; justify-content: center !important; } body .ui-radiobutton .ui-radiobutton-box:hover { border-color: var(--mpf-primary) !important; background: var(--mpf-primary-light) !important; } body .ui-radiobutton .ui-radiobutton-box.ui-state-focus { box-shadow: var(--mpf-shadow-focus) !important; } body .ui-radiobutton .ui-radiobutton-box.ui-state-active { border-color: #152f60 !important; background: var(--mpf-bg-surface) !important; } body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon { display: block !important; background: #152f60 !important; border-radius: var(--mpf-radius-full) !important; } body .ui-radiobutton .ui-radiobutton-box.ui-state-disabled { background: var(--mpf-bg-hover) !important; border-color: var(--mpf-border-light) !important; opacity: 0.6 !important; } /* SelectOneRadio em linha – alinhamento e espaçamento */ body .ui-selectoneradio, body .ui-selectoneradio table { border: none !important; } body .ui-selectoneradio td { padding: 4px 12px 4px 0 !important; vertical-align: middle !important; border: none !important; } body .ui-selectoneradio label { cursor: pointer !important; margin-left: 2px !important; vertical-align: middle !important; font-weight: var(--mpf-font-weight-normal) !important; color: var(--mpf-text-primary) !important; } /* SelectBooleanButton (usado como sim/não) */ body .ui-selectbooleanbutton .ui-button { min-width: 80px !important; } body .ui-selectbooleanbutton .ui-button.ui-state-active { background: #152f60 !important; color: white !important; } /* SelectOneButton (Sim/Não etc.) – diferença clara entre selecionado e não selecionado */ body .ui-selectonebutton .ui-button { background: var(--mpf-bg-surface) !important; background-color: var(--mpf-bg-surface) !important; color: var(--mpf-text-secondary) !important; border: 2px solid var(--mpf-border-default) !important; } body .ui-selectonebutton .ui-button .ui-button-text, body .ui-selectonebutton .ui-button .ui-icon { background: transparent !important; color: inherit !important; } body .ui-selectonebutton .ui-button:hover { border-color: var(--mpf-primary) !important; color: var(--mpf-primary) !important; background: var(--mpf-bg-hover) !important; } body .ui-selectonebutton .ui-button.ui-state-active { background: linear-gradient(135deg, #1e4a8a, #152f60) !important; background-color: #152f60 !important; color: #fff !important; border-color: #152f60 !important; font-weight: var(--mpf-font-weight-semibold) !important; } body .ui-selectonebutton .ui-button.ui-state-active .ui-button-text, body .ui-selectonebutton .ui-button.ui-state-active .ui-icon { color: #fff !important; background: transparent !important; } body .ui-selectonebutton .ui-button.ui-state-active:hover { background: #1e4a8a !important; border-color: #1e4a8a !important; } body .ui-selectonebutton .ui-button.ui-state-disabled, body .ui-selectonebutton .ui-button:disabled { background: #e9ecef !important; color: #6c757d !important; border-color: #ced4da !important; } /* ============================================================================ SECTION 14: INPUT SWITCH ============================================================================ */ body .ui-inputswitch { width: 44px !important; height: 24px !important; border-radius: var(--mpf-radius-full) !important; background: var(--mpf-border-default) !important; border: none !important; transition: var(--mpf-transition-normal) !important; } body .ui-inputswitch:hover { background: var(--mpf-text-muted) !important; } body .ui-inputswitch.ui-inputswitch-checked { background: var(--mpf-primary) !important; } body .ui-inputswitch.ui-inputswitch-checked:hover { background: var(--mpf-primary-hover) !important; } body .ui-inputswitch .ui-inputswitch-handle { width: 20px !important; height: 20px !important; border-radius: var(--mpf-radius-full) !important; background: white !important; box-shadow: var(--mpf-shadow-md) !important; top: 2px !important; transition: var(--mpf-transition-normal) !important; } body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-handle { left: 22px !important; } body .ui-inputswitch.ui-state-focus { box-shadow: var(--mpf-shadow-focus) !important; } body .ui-inputswitch.ui-state-disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============================================================================ SECTION 15: PANEL / CARD / FIELDSET ============================================================================ */ body .ui-panel { border: none !important; border-radius: var(--mpf-radius-lg) !important; box-shadow: var(--mpf-shadow-md) !important; overflow: hidden !important; } body .ui-panel .ui-panel-titlebar { background: var(--mpf-bg-hover) !important; border: none !important; border-bottom: 1px solid var(--mpf-border-light) !important; padding: var(--mpf-space-lg) var(--mpf-space-xl) !important; font-weight: var(--mpf-font-weight-semibold) !important; color: var(--mpf-text-primary) !important; } body .ui-panel .ui-panel-content { padding: var(--mpf-space-xl) !important; background: var(--mpf-bg-surface) !important; overflow: visible !important; } body .ui-panel { overflow: visible !important; } body .ui-outputpanel, body .ui-panel-content .ui-outputpanel { overflow: visible !important; } body .ui-fieldset { border: 1px solid var(--mpf-border-light) !important; border-radius: var(--mpf-radius-md) !important; padding: 0 !important; overflow: hidden !important; } body .ui-fieldset .ui-fieldset-legend { padding: var(--mpf-space-md) var(--mpf-space-lg) !important; background: var(--mpf-bg-hover) !important; border: none !important; font-weight: var(--mpf-font-weight-semibold) !important; color: var(--mpf-text-primary) !important; } body .ui-fieldset .ui-fieldset-content { padding: var(--mpf-space-lg) !important; } /* ============================================================================ SECTION 16: MOBILE – DATATABLE CARDS COM LABELS ============================================================================ */ @media screen and (max-width: 768px) { body .ui-datatable.ui-datatable-responsive tbody td[data-label]::before { content: attr(data-label) !important; font-weight: var(--mpf-font-weight-semibold) !important; color: var(--mpf-text-secondary) !important; font-size: var(--mpf-font-size-xs) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin-right: var(--mpf-space-sm) !important; flex-shrink: 0 !important; } body .ui-datatable.ui-datatable-responsive tbody td { display: flex !important; align-items: center !important; padding: var(--mpf-space-sm) 0 !important; } } /* ============================================================================ SECTION 16b: PÁGINA CONFIGURAÇÃO – LAYOUT E RESPONSIVIDADE ============================================================================ */ /* Sidebar da página Configuração: em tablet/mobile sticky, largura 100% */ @media screen and (max-width: 990px) { .card-respo .card.confi-relative { position: sticky !important; top: 3.5rem; width: 100% !important; max-width: 100% !important; z-index: 10; } .tab-content.confi .card { margin-top: var(--mpf-space-md) !important; } } /* Sidebar: em mobile mantém formato COLUNA (vertical) */ @media screen and (max-width: 768px) { .card-respo .card.confi-relative .list-group { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; overflow-y: auto !important; max-height: 180px; } .card-respo .card.confi-relative .list-group-item { padding: var(--mpf-space-sm) var(--mpf-space-md) !important; } } /* Grid “Dados Gerais”: 1 coluna em mobile, 2 em tablet, 3 em desktop */ .config-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--mpf-space-xl) var(--mpf-space-lg) !important; } @media screen and (max-width: 991px) { .config-grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media screen and (max-width: 575px) { .config-grid-3 { grid-template-columns: 1fr !important; } } .config-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: var(--mpf-space-sm) !important; min-width: 0 !important; } /* Form Config: selects e inputs em mobile sem min-width fixo */ @media screen and (max-width: 768px) { .tab-content.confi .form-group .ui-selectonemenu, .tab-content.confi .ui-selectonemenu { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } .tab-content.confi .form-group .ui-selectonemenu .ui-selectonemenu-label, .tab-content.confi .ui-selectonemenu .ui-selectonemenu-label { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; } .tab-content.confi .form-group.mb-4 { margin-bottom: var(--mpf-space-lg) !important; } .tab-content.confi .row.d-flex.align-items-end { flex-direction: column !important; align-items: stretch !important; } } /* Configuração do app: URLs longas quebram em mobile */ .tab-content.confi .form-control, .tab-content.confi .ui-inputfield { max-width: 100% !important; } @media screen and (max-width: 768px) { .tab-content.confi input[type="text"].form-control, .tab-content.confi .ui-inputfield { word-break: break-all !important; } } .form-control { padding: 0px !important; } /* ============================================================================ SECTION 17: UTILITÁRIOS E RESET LEGADO ============================================================================ */ /*body .ui-widget.ui-state-default { border-color: var(--mpf-border-light) !important; background: var(--mpf-bg-surface) !important; color: var(--mpf-text-primary) !important; }*/ /*body .ui-state-highlight { background: var(--mpf-primary-light) !important; color: var(--mpf-primary) !important; border-color: transparent !important; }*/ body .ui-state-error { border-color: var(--mpf-danger) !important; color: var(--mpf-danger) !important; } body .ui-corner-all { border-radius: var(--mpf-radius-md) !important; } /* Garantir que PrimeIcons herdem cor em botões */ body .ui-button .ui-icon.pi { color: inherit !important; background: transparent !important; } /* Porcentagem GLOBAL em TODAS as barras de progresso PrimeFaces */ body .ui-progressbar, body .ui-fileupload .ui-progressbar, body .ui-fileupload .ui-fileupload-progressbar { position: relative !important; min-height: 1.5rem !important; border-radius: 12px !important; overflow: hidden; background: linear-gradient(90deg, #e8f0fe 0%, #f0f4f8 100%) !important; } body .ui-progressbar.ui-progressbar-sm { min-height: 18px !important; border-radius: 9px !important; } body .ui-progressbar .ui-progressbar-label { color: #fff !important; font-size: 0.75rem !important; font-weight: 700 !important; line-height: 18px !important; text-align: center !important; display: block !important; width: 100% !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; } body .ui-progressbar-value, body .ui-fileupload .ui-progressbar-value, body .ui-fileupload .ui-fileupload-progressbar .ui-progressbar-value { background: linear-gradient(90deg, #152f60 0%, #0f2340 50%, #152f60 100%) !important; border-radius: 12px; transition: width 0.35s ease; display: flex !important; align-items: center !important; justify-content: flex-end !important; padding-right: 1rem !important; } body .pf-progressbar-pct-global { font-weight: 700; font-size: 0.875rem; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); position: relative; left: 1rem; } /* ===== Skeleton Loading ===== */ .skeleton-wrapper { animation: skeletonFadeIn 0.3s ease-in; } @keyframes skeletonFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes skeletonPulse { 0% { background-color: #e9ecef; } 50% { background-color: #d3d8de; } 100% { background-color: #e9ecef; } } .skeleton-pulse { animation: skeletonPulse 1.5s ease-in-out infinite; border-radius: 4px; } .skeleton-line { width: 100%; border-radius: 4px; } .skeleton-tabs { display: flex; gap: 8px; padding: 12px 0; border-bottom: 2px solid #dee2e6; overflow-x: auto; } .skeleton-tab { height: 36px; border-radius: 6px 6px 0 0; flex-shrink: 0; } /* ============================================================================ SECTION 18: MODERNIZAÇÃO SEGURA (SEM QUEBRAR LAYOUT LEGADO) ============================================================================ */ /* Mantém o popup oculto até a abertura via JS legado */ .js__toggle { display: none; } .js__toggle.active { display: block; } /* Ajustes visuais da home sem alterar estrutura */ .card-animado .box-content.bg-terras { border: 1px solid #dce8f7 !important; border-radius: 12px !important; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10) !important; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important; } .card-animado .box-content.bg-terras p, .card-animado .box-content.bg-terras .text-white { color: #0f172a !important; font-weight: 600 !important; } /* ============================================================================ SECTION 19: SKIN MODERNA DO LAYOUT (SEM MEXER NA ESTRUTURA) ============================================================================ */ :root { --ux-sidebar-bg-1: #0f172a; --ux-sidebar-bg-2: #111f3d; --ux-sidebar-text: #dbe7ff; --ux-sidebar-muted: #93a8cc; --ux-sidebar-active: rgba(59, 130, 246, 0.24); --ux-topbar-bg: rgba(255, 255, 255, 0.92); --ux-border: #e6edf7; --ux-shadow: 0 10px 30px rgba(37, 99, 235, 0.10); } body { background: radial-gradient(circle at 0% -10%, rgba(59, 130, 246, 0.08), transparent 32%), radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.07), transparent 30%), #f5f8fd !important; } /* Sidebar: mantém dimensões originais, só muda visual */ .main-menu { background: linear-gradient(180deg, var(--ux-sidebar-bg-1) 0%, var(--ux-sidebar-bg-2) 100%) !important; border-right: 1px solid rgba(148, 163, 184, 0.20) !important; box-shadow: 8px 0 24px rgba(2, 6, 23, 0.22) !important; } .main-menu .header { background: rgba(10, 16, 32, 0.92) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important; } .main-menu .header .logo { color: #ffffff !important; font-weight: 700 !important; letter-spacing: 0.2px !important; } .main-menu .header .logo .ico { color: #7fb1ff !important; } .main-menu .button-close { color: #a6bcdf !important; } .navigation .title { color: var(--ux-sidebar-muted) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; } .navigation .menu > li > a { color: var(--ux-sidebar-text) !important; border-radius: 10px !important; margin: 1px 8px !important; transition: background-color 0.18s ease, color 0.18s ease !important; } .navigation .menu > li > a .menu-icon, .navigation .menu > li > a i { color: #9dc0ff !important; } .navigation .menu > li > a:hover, .navigation .menu > li.active > a, .navigation .menu > li.current > a { background: var(--ux-sidebar-active) !important; color: #ffffff !important; } .navigation .menu .sub-menu { background: transparent !important; } .navigation .menu .sub-menu a { color: #c7d9f7 !important; border-radius: 8px !important; } .navigation .menu .sub-menu a:hover { background: rgba(148, 163, 184, 0.18) !important; color: #ffffff !important; } /* Bloco usuário da sidebar */ .user { border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 10px !important; background: rgba(37, 99, 235, 0.40) !important; } .user .name, .user .name a { color: #f2f7ff !important; } .user .position { color: #b2c4e2 !important; } /* Topbar moderna */ .fixed-navbar { background: var(--ux-topbar-bg) !important; backdrop-filter: blur(7px) !important; border-bottom: 1px solid var(--ux-border) !important; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06) !important; min-height: 50px !important; max-height: 50px !important; padding: 0 20px !important; } .fixed-navbar .page-title { color: #0f172a !important; font-weight: 700 !important; } .fixed-navbar .layout-user-menu { position: relative !important; display: inline-block !important; margin-top: 4px !important; /* Ajustado para alinhar verticalmente com a navbar de 50px (50 - 42 height = 8 / 2 = 4) */ } .fixed-navbar .layout-user-menu-btn { width: 42px !important; height: 42px !important; border: 1px solid #d7e2f0 !important; border-radius: 12px !important; background: #ffffff !important; color: #334155 !important; font-size: 16px !important; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important; } .fixed-navbar .layout-user-menu-btn:hover { background: #f8fafc !important; } .fixed-navbar .layout-user-menu-panel { position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; min-width: 230px !important; padding: 10px !important; border: 1px solid #dce7f5 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 20px 34px rgba(37, 99, 235, 0.16) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important; transition: all 0.2s ease !important; z-index: 300 !important; } .fixed-navbar .layout-user-menu:hover .layout-user-menu-panel, .fixed-navbar .layout-user-menu:focus-within .layout-user-menu-panel { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .fixed-navbar .layout-user-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 12px !important; border-radius: 10px !important; color: #1e293b !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.18s ease !important; } .fixed-navbar .layout-user-item i { width: 18px !important; color: #64748b !important; text-align: center !important; } .fixed-navbar .layout-user-item:hover { background: #f1f5f9 !important; color: #0f172a !important; } .fixed-navbar .layout-user-item.danger { margin-top: 8px !important; justify-content: center !important; background: #1e4a8a !important; color: #ffffff !important; font-weight: 700 !important; } .fixed-navbar .layout-user-item.danger i { color: #ffffff !important; } .fixed-navbar .layout-user-item.danger:hover { background: #152f60 !important; color: #ffffff !important; } .menu-mobile-button { border: 1px solid #d7e2f0 !important; border-radius: 10px !important; background: #ffffff !important; color: #334155 !important; } /* Conteúdo e cards */ .main-content .box-content { background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important; border: 1px solid var(--ux-border) !important; border-radius: 12px !important; box-shadow: var(--ux-shadow) !important; } .card-animado .box-content.bg-terras { border-radius: 14px !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.10) !important; } .card-animado .box-content.bg-terras:hover { border-color: #bfdbfe !important; box-shadow: 0 18px 34px rgba(37, 99, 235, 0.16) !important; } /* ============================================================================ SECTION 20: SIDEBAR UX FIX (VISUAL + USABILIDADE) ============================================================================ */ /* Base da sidebar - cores e visual (dimensões em Section 24) */ .main-menu { background: linear-gradient(180deg, #0b1428 0%, #122347 100%) !important; border-right: 1px solid rgba(148, 163, 184, 0.24) !important; box-shadow: 10px 0 30px rgba(2, 6, 23, 0.26) !important; } .header { height: 75px !important; padding-top: 0 !important; } .main-menu .header .logo { background: linear-gradient(90deg, #0b1428 0%, #152f60 100%) !important; border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important; } .navigation .title { margin: 10px 12px 6px !important; padding: 8px 12px !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: #b3c7e8 !important; background: rgba(148, 163, 184, 0.16) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; border-radius: 999px !important; } .navigation .menu > li { margin: 3px 8px !important; background: transparent !important; } .navigation .menu > li > a { min-height: 42px !important; padding: 10px 14px 10px 44px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; color: #dbe8ff !important; border: 1px solid transparent !important; transition: all 0.2s ease !important; } .navigation .menu > li > a:hover { background: rgba(59, 130, 246, 0.2) !important; border-color: rgba(125, 168, 255, 0.35) !important; color: #ffffff !important; } .navigation .menu > li > a .menu-icon { width: 36px !important; line-height: 40px !important; font-size: 18px !important; color: #9fc2ff !important; } .navigation .menu > li > a .menu-arrow { top: 11px !important; right: 12px !important; font-size: 13px !important; color: #9fc2ff !important; } .navigation .menu > li.active, .navigation .menu > li.current { background: transparent !important; } .navigation .menu > li.active > a, .navigation .menu > li.current > a { background: linear-gradient(90deg, rgba(21, 47, 96, 0.35) 0%, rgba(15, 35, 64, 0.25) 100%) !important; border: 1px solid rgba(21, 47, 96, 0.42) !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(15, 35, 64, 0.25) !important; } .navigation .menu > li.active > a .menu-icon, .navigation .menu > li.current > a .menu-icon, .navigation .menu > li.active > a .menu-arrow, .navigation .menu > li.current > a .menu-arrow { color: #dbeafe !important; } .navigation .menu .sub-menu { margin: 4px 0 6px !important; padding: 4px 0 !important; background: rgba(2, 6, 23, 0.24) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; } .navigation .menu .sub-menu li { margin: 2px 0 !important; } .navigation .menu .sub-menu a { margin: 0 8px !important; padding: 8px 10px 8px 34px !important; border-radius: 8px !important; font-size: 13px !important; color: #c7d9f7 !important; } .navigation .menu .sub-menu a:hover, .navigation .menu .sub-menu a.current, .navigation .menu .sub-menu .current > a { /* background: rgba(148, 163, 184, 0.2) !important;*/ color: #ffffff !important; } /* Evita modo compactado quebrado no desktop - dimensões alinhadas com Section 24 */ @media (min-width: 800px) { html.menu-active .main-menu { position: fixed !important; width: 280px !important; } html.menu-active .fixed-navbar { left: 280px !important; } html.menu-active .main-content { margin-left: 300px !important; } html.menu-active .navigation .title { display: block !important; } html.menu-active .navigation .menu > li > a { height: auto !important; padding: 10px 14px 10px 44px !important; } html.menu-active .navigation .menu > li > a span, html.menu-active .navigation .menu > li > a .menu-arrow { display: inline !important; } html.menu-active .navigation .menu .sub-menu { position: static !important; width: auto !important; left: auto !important; } } /* ============================================================================ SECTION 21: BODY LAYOUT FIX (ALINHAMENTO GLOBAL) ============================================================================ */ /* Evita corte horizontal do conteudo em telas de dashboard/cards */ #wrapper.main-content, #Geral.main-content, .main-content { overflow-x: hidden !important; } /* Home: normaliza grid legado (a > col-md-3) para nao quebrar alinhamento */ #formIndex .small-spacing { display: flex !important; flex-wrap: wrap !important; margin-left: -8px !important; margin-right: -8px !important; } #formIndex .small-spacing > a { display: block !important; width: 25% !important; padding-left: 8px !important; padding-right: 8px !important; text-decoration: none !important; } #formIndex .small-spacing > a > .col-md-3.card-animado { width: 100% !important; float: none !important; padding: 0 !important; } #formIndex .small-spacing > a > .col-md-3.card-animado > .col-lg-12, #formIndex .small-spacing > a > .col-md-3.card-animado > .col-md-12, #formIndex .small-spacing > a > .col-md-3.card-animado > .col-sm-12, #formIndex .small-spacing > a > .col-md-3.card-animado > .col-xs-12 { width: 100% !important; float: none !important; padding: 0 !important; } #formIndex .small-spacing .box-content.bg-terras { margin-bottom: 16px !important; } @media (max-width: 1199px) { #formIndex .small-spacing > a { width: 33.3333% !important; } } @media (max-width: 991px) { #formIndex .small-spacing > a { width: 50% !important; } } @media (max-width: 640px) { #formIndex .small-spacing > a { width: 100% !important; } } /* ============================================================================ SECTION 22: BODY GLOBAL STANDARD (TODAS AS TELAS) ============================================================================ */ /* Padrao unico de area de trabalho - dimensões finais em Section 24 */ /* Remove variacao de grid no primeiro nivel do corpo */ .main-content > .row.small-spacing { margin-left: 0 !important; margin-right: 0 !important; } .main-content > .row.small-spacing > .col-xs-12, .main-content > .row.small-spacing > .col-sm-12, .main-content > .row.small-spacing > .col-md-12, .main-content > .row.small-spacing > .col-lg-12 { padding-left: 0 !important; padding-right: 0 !important; } /* Card/caixa principal padronizada em qualquer tela */ .main-content .layout-content-shell, .main-content .box-content { width: 100% !important; max-width: 100% !important; margin-top: 20px !important; margin-bottom: 20px !important; border-radius: 12px !important; padding: 20px !important; box-sizing: border-box !important; } /* Conteudo interno nao estoura e preserva responsividade */ .main-content .layout-content-shell > *:not(script):not(style), .main-content .box-content > *:not(script):not(style) { max-width: 100% !important; } .main-content [class*="col-"] { box-sizing: border-box !important; } /* Tabelas e paines largos passam a rolar dentro do corpo sem quebrar layout */ .main-content .ui-datatable-tablewrapper, .main-content .ui-datatable .ui-datatable-scrollable-body, .main-content .ui-panel-content { max-width: 100% !important; } /* Ajuste mobile global - dimensões finais em Section 24 media queries */ /* Header de conteudo nao pode herdar header da sidebar */ .main-content .header { position: static !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* DataTable: padrao mais estavel nas telas de pesquisa */ .main-content .ui-datatable table { width: 100% !important; } .main-content .ui-datatable .ui-button { min-width: 0 !important; } .main-content .ui-datatable .ui-button.ui-button-icon-only, .main-content .ui-datatable a.ui-button.ui-button-icon-only { width: 35px !important; min-width: 35px !important; height: 30px !important; padding-right: 0px !important; } .main-content .ui-datatable .col-acoes { white-space: nowrap !important; } .main-content .ui-datatable .col-acoes .ui-button, .main-content .ui-datatable .col-acoes a.ui-button { margin-right: 4px !important; } /* Botao de exclusao sempre vermelho (FontAwesome e PrimeIcons) */ body .ui-button.colored-delete-button, body .ui-button.colored-delete-button .ui-button-text, body .ui-button.colored-delete-button .ui-icon, body .ui-button.colored-delete-button .fa, body .ui-button:has(.pi-trash), body .ui-button:has(.fa-trash), body .ui-button:has(.fa-trash-o) { background: #dc3545 !important; background-color: #dc3545 !important; border-color: #dc3545 !important; color: #ffffff !important; } body .ui-button.colored-delete-button:hover, body .ui-button:has(.pi-trash):hover, body .ui-button:has(.fa-trash):hover, body .ui-button:has(.fa-trash-o):hover { background: #c82333 !important; background-color: #c82333 !important; border-color: #c82333 !important; } /* ============================================================================ SECTION 23: LOGIN - ACAO SAIR ============================================================================ */ .frm-single .login-layout-actions { display: flex !important; justify-content: flex-end !important; margin: -4px 0 10px !important; } .frm-single .login-exit-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 10px !important; border-radius: 8px !important; background: #e2e8f0 !important; color: #334155 !important; font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important; } .frm-single .login-exit-link:hover { background: #cbd5e1 !important; color: #1e293b !important; } /* ============================================================================ SECTION 24: GLOBAL LAYOUT STABILIZATION ============================================================================ */ html, body { width: 100% !important; max-width: 100% !important; min-height: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; } /* Override leaked #wrapper styles from style.css broken comment */ #wrapper, #wrapper.main-content { width: auto !important; max-width: none !important; overflow: visible !important; transform: none !important; } body, body * { box-sizing: border-box !important; } body a { text-decoration: none !important; } .main-menu, .fixed-navbar, .main-content { transition: all 0.25s ease !important; } .main-menu { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 280px !important; height: 100vh !important; padding-top: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: 1003 !important; } .main-menu .header { position: relative !important; flex: 0 0 75px !important; height: 75px !important; display: flex !important; align-items: center !important; } .main-menu .header .logo { min-height: 75px !important; width: 100% !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 0 18px 0 22px !important; font-size: 18px !important; } .main-menu .button-close { position: absolute !important; top: 18px !important; right: 14px !important; border: none !important; background: transparent !important; } .main-menu .navigation { flex: 1 1 auto !important; height: auto !important; padding: 14px 0 24px !important; overflow-y: auto !important; overflow-x: hidden !important; } .navigation .menu, .navigation .sub-menu { list-style: none !important; margin: 0 !important; padding-left: 0 !important; } .navigation .menu > li { position: relative !important; } .navigation .menu > li > a { position: relative !important; display: flex !important; align-items: center !important; min-height: 46px !important; padding: 10px 14px 10px 50px !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; } .navigation .menu > li > a .menu-icon { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 24px !important; line-height: 1 !important; text-align: center !important; } .navigation .menu > li > a > span:not(.menu-arrow) { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; } .navigation .menu > li > a .menu-arrow { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-left: 8px !important; width: 18px !important; flex: 0 0 18px !important; } .navigation .menu .sub-menu { display: none !important; } .navigation .menu > li.active > .sub-menu, .navigation .menu > li.current > .sub-menu { display: block !important; } .navigation .menu .sub-menu a { display: block !important; line-height: 1.35 !important; white-space: normal !important; } .fixed-navbar { position: fixed !important; top: 0 !important; left: 280px !important; right: 0 !important; min-height: 75px !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; z-index: 1000 !important; } .fixed-navbar .pull-left, .fixed-navbar .pull-right { float: none !important; } .fixed-navbar .navbar-left-group { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; } .fixed-navbar .page-title { margin: 0 !important; line-height: 1.2 !important; } .menu-mobile-button { display: none !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; cursor: pointer !important; } #wrapper.main-content, #Geral.main-content, .main-content { margin-left: 300px !important; margin-right: 16px !important; padding-top: 70px !important; /* Ajustado por conta da navbar mais fina */ padding-left: 0 !important; padding-right: 0 !important; width: auto !important; min-width: 0 !important; min-height: calc(100vh - 50px) !important; } .main-content > .row.small-spacing, .main-content .box-content > .row, .main-content fieldset > .row, .main-content .ui-panel-content > .row { margin-left: -10px !important; margin-right: -10px !important; } .main-content .box-content, .main-content .layout-content-shell, .main-content fieldset, .main-content .ui-panel { width: 100% !important; max-width: 100% !important; } .main-content fieldset { margin: 0 0 18px !important; padding: 20px 20px 6px !important; border: 1px solid #dbe6f3 !important; border-radius: 14px !important; background: #ffffff !important; } .main-content fieldset legend { margin: 0 0 10px !important; padding: 0 8px !important; border: none !important; font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; width: auto !important; } .main-content .form-horizontal, .main-content .ui-panel-content { width: 100% !important; } .main-content .form-horizontal::after, .main-content fieldset::after, .main-content .ui-panel-content::after, .main-content .box-content::after { content: "" !important; display: block !important; clear: both !important; } .main-content .form-horizontal [class*="col-"], .main-content fieldset [class*="col-"], .main-content .ui-panel-content [class*="col-"] { margin-bottom: 16px !important; } .main-content .control-label, .main-content label { display: block !important; margin-bottom: 8px !important; font-weight: 600 !important; line-height: 1.4 !important; } .main-content .ui-selectonemenu, .main-content .ui-autocomplete, .main-content .ui-calendar, .main-content .ui-password, .main-content .ui-inputfield, .main-content .ui-inputtext, .main-content textarea.ui-inputfield { width: 100% !important; max-width: 100% !important; } .main-content center { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 18px 0 22px !important; text-align: center !important; } .main-content center .ui-button, .main-content center .btn, .main-content .ui-dialog center .ui-button, .main-content .ui-dialog center .btn { min-width: 130px !important; } .main-content .ui-panel .ui-panel-content, .main-content .ui-panel-content { padding: 18px !important; } .main-content .ui-datatable, .main-content .ui-panel, .main-content .ui-fieldset, .main-content .ui-tabs, .main-content .ui-accordion { overflow: hidden !important; } .main-content img { max-width: 100% !important; height: auto !important; } @media (min-width: 800px) { .menu-mobile-button { display: none !important; } .main-menu .button-close { display: none !important; } html.menu-active .main-menu { width: 280px !important; transform: none !important; } html.menu-active .fixed-navbar { left: 280px !important; } html.menu-active .main-content { margin-left: 300px !important; } html:not(.menu-active) .navigation .menu > li > a > span:not(.menu-arrow), html:not(.menu-active) .navigation .menu > li > a .menu-arrow { display: block !important; } } @media (max-width: 799px) { .main-menu { width: min(280px, calc(100vw - 28px)) !important; max-width: calc(100vw - 28px) !important; transform: translateX(-105%) !important; box-shadow: 18px 0 40px rgba(2, 6, 23, 0.30) !important; } html.menu-active .main-menu { transform: translateX(0) !important; } .main-menu .button-close { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .fixed-navbar { left: 0 !important; padding: 12px 14px !important; } .menu-mobile-button { display: inline-flex !important; } .fixed-navbar .layout-user-menu { margin-top: 0 !important; } .fixed-navbar .page-title { font-size: 18px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #wrapper.main-content, #Geral.main-content, .main-content { margin-left: 12px !important; margin-right: 12px !important; padding-top: 88px !important; } .main-content .box-content, .main-content .layout-content-shell { padding: 16px !important; } .main-content fieldset { padding: 16px 14px 2px !important; } .main-content center .ui-button, .main-content center .btn { width: 100% !important; max-width: 320px !important; } .main-content .form-horizontal [class*="col-"], .main-content fieldset [class*="col-"], .main-content .ui-panel-content [class*="col-"] { width: 100% !important; float: none !important; } } @media (max-width: 575px) { .fixed-navbar { gap: 10px !important; } .fixed-navbar .layout-user-menu-btn { width: 38px !important; height: 38px !important; } .main-content .box-content, .main-content .layout-content-shell { padding: 14px !important; } } /* ============================================================================ SECTION 25: VISUAL REFINEMENT (FONTES, BOTOES, DATATABLE) ============================================================================ */ body { font-size: 14px !important; line-height: 1.45 !important; } .page-title-wrap { margin-bottom: 18px !important; } .page-title-wrap .page-title, .main-content .page-title { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 22px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 20px !important; line-height: 50px !important; } .main-content .page-title .pi, .main-content .page-title .fa { font-size: 22px !important; } .main-content .control-label, .main-content label, .main-content .ui-outputlabel { font-size: 15px !important; } body .ui-inputfield, body .ui-inputtext, body input.ui-inputfield, body textarea.ui-inputfield, body .ui-selectonemenu .ui-selectonemenu-label, body .ui-calendar .ui-inputfield { font-size: 15px !important; } body .ui-button, body a.ui-button, body .btn { min-height: 40px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; text-align: center !important; } body .ui-button .ui-button-text, body a.ui-button .ui-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1.1 !important; } body .ui-button-text-icon-left .ui-button-text, body .ui-button-text-icons-left .ui-button-text { padding-left: 0 !important; } body .ui-button-text-icon-left .ui-button-icon-left, body .ui-button-text-icons-left .ui-button-icon-left, body .ui-button .fa, body .ui-button .pi { position: static !important; margin: 0 !important; font-size: 15px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Mantem sprites legacy do PrimeFaces visiveis em botoes somente-icone */ body .ui-button-icon-only .ui-icon { display: block !important; width: 16px !important; height: 16px !important; text-indent: -999999px !important; overflow: hidden !important; } .main-content center .ui-button, .main-content center .btn { min-width: 108px !important; } .main-content .ui-datatable { border-radius: 12px !important; } .main-content .ui-datatable .ui-datatable-header { padding: 12px 16px !important; font-size: 15px !important; } .main-content .ui-datatable thead th { padding: 12px 14px !important; font-size: 13px !important; line-height: 1.3 !important; text-align: left !important; vertical-align: middle !important; } .main-content .ui-datatable tbody td, .main-content .ui-datatable .ui-datatable-data td { padding: 12px 14px !important; font-size: 14px !important; line-height: 1.4 !important; vertical-align: middle !important; color: #334155 !important; } .main-content .ui-datatable tbody td .ui-button, .main-content .ui-datatable .ui-datatable-data td .ui-button, .main-content .ui-datatable tbody td a.ui-button, .main-content .ui-datatable .ui-datatable-data td a.ui-button { vertical-align: middle !important; } .main-content .ui-datatable .col-acoes, .main-content .ui-datatable td.col-acoes, .main-content .ui-datatable th.col-acoes { text-align: center !important; width: 86px !important; min-width: 86px !important; } .main-content .ui-datatable .col-acoes .ui-button, .main-content .ui-datatable .col-acoes a.ui-button { margin: 0 2px !important; } .main-content .ui-datatable .ui-paginator, .main-content .ui-paginator { padding: 8px 12px !important; min-height: 38px !important; } .main-content .ui-paginator .ui-paginator-current, .main-content .ui-paginator .ui-paginator-current * { font-size: 13px !important; } .main-content .ui-paginator .ui-paginator-element { min-width: 30px !important; height: 30px !important; font-size: 13px !important; } .main-content .ui-paginator .ui-paginator-first, .main-content .ui-paginator .ui-paginator-prev, .main-content .ui-paginator .ui-paginator-next, .main-content .ui-paginator .ui-paginator-last { position: relative !important; width: 34px !important; min-width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 8px !important; font-size: 0 !important; border: 1px solid #d7e3f1 !important; background: #ffffff !important; color: transparent !important; } .main-content .ui-paginator .ui-paginator-first .ui-icon, .main-content .ui-paginator .ui-paginator-prev .ui-icon, .main-content .ui-paginator .ui-paginator-next .ui-icon, .main-content .ui-paginator .ui-paginator-last .ui-icon { display: none !important; } .main-content .ui-paginator .ui-paginator-first::before, .main-content .ui-paginator .ui-paginator-prev::before, .main-content .ui-paginator .ui-paginator-next::before, .main-content .ui-paginator .ui-paginator-last::before { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: #334155 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; } .main-content .ui-paginator .ui-paginator-first::before { content: "<<" !important; } .main-content .ui-paginator .ui-paginator-prev::before { content: "<" !important; } .main-content .ui-paginator .ui-paginator-next::before { content: ">" !important; } .main-content .ui-paginator .ui-paginator-last::before { content: ">>" !important; } .main-content .ui-paginator .ui-paginator-first:hover, .main-content .ui-paginator .ui-paginator-prev:hover, .main-content .ui-paginator .ui-paginator-next:hover, .main-content .ui-paginator .ui-paginator-last:hover { background: #eff6ff !important; border-color: #152f60 !important; } .main-content .ui-paginator .ui-paginator-first:hover::before, .main-content .ui-paginator .ui-paginator-prev:hover::before, .main-content .ui-paginator .ui-paginator-next:hover::before, .main-content .ui-paginator .ui-paginator-last:hover::before { color: #152f60 !important; } .main-content .ui-paginator .ui-paginator-first.ui-state-disabled, .main-content .ui-paginator .ui-paginator-prev.ui-state-disabled, .main-content .ui-paginator .ui-paginator-next.ui-state-disabled, .main-content .ui-paginator .ui-paginator-last.ui-state-disabled { background: #f8fafc !important; border-color: #e2e8f0 !important; opacity: 1 !important; } .main-content .ui-paginator .ui-paginator-first.ui-state-disabled::before, .main-content .ui-paginator .ui-paginator-prev.ui-state-disabled::before, .main-content .ui-paginator .ui-paginator-next.ui-state-disabled::before, .main-content .ui-paginator .ui-paginator-last.ui-state-disabled::before { color: #94a3b8 !important; } @media (max-width: 799px) { .page-title-wrap .page-title, .main-content .page-title { font-size: 18px !important; } .main-content .ui-datatable thead th { font-size: 12px !important; } .main-content .ui-datatable tbody td, .main-content .ui-datatable .ui-datatable-data td { font-size: 13px !important; } } /* ============================================================================ LOADING DIALOG (spinner global - p:ajaxStatus) ============================================================================ */ body .ui-dialog.cl-loading-dialog { padding: 0 !important; border: none !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important; border-radius: 14px !important; overflow: hidden !important; z-index: 99999 !important; } body .ui-dialog.cl-loading-dialog .ui-dialog-content { padding: 0 !important; border: none !important; overflow: visible !important; } body .ui-dialog.cl-loading-dialog .ui-dialog-titlebar, body .ui-dialog.cl-loading-dialog .ui-dialog-buttonpane { display: none !important; } .cl-loading-dialog-body { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 28px 36px !important; min-width: 180px !important; background: white; } .cl-loading-dialog-icon-wrap { display: flex !important; align-items: center !important; justify-content: center !important; } .cl-loading-dialog-icon { font-size: 28px !important; color: #152f60 !important; } .cl-loading-dialog-copy { text-align: center !important; } .cl-loading-dialog-text { font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; } /* ============================================================================ SECTION 26: FLOATING LABELS (Material Design Style) ============================================================================ Label fica dentro do campo; ao focar ou quando tem valor, sobe com animação. Aplicado automaticamente via JS (modern-primefaces.js). ============================================================================ */ /* Container - position relative para o label posicionar-se sobre o input */ .form-group { position: relative !important; margin-bottom: 24px !important; padding-top: 14px !important; } /* Label base - posicionado sobre o campo */ .form-group > label, .form-group > .ui-outputlabel { position: absolute !important; top: 30px !important; left: 19px !important; z-index: 5 !important; margin: 0 !important; padding: 0 4px !important; font-size: 15px !important; font-weight: 500 !important; color: #64748b !important; background: transparent !important; pointer-events: none !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; transform-origin: left center !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: calc(100% - 30px) !important; } /* Label elevado (quando campo focado OU tem valor) */ .form-group.fg-focused > label, .form-group.fg-focused > .ui-outputlabel, .form-group.fg-has-value > label, .form-group.fg-has-value > .ui-outputlabel { top: 5px !important; left: 12px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--mpf-primary, #152f60) !important; background: #ffffff !important; padding: 0 7px !important; z-index: 12 !important; max-width: none !important; border: none; } /* Quando nao focado mas tem valor, label fica cinza escuro */ .form-group.fg-has-value:not(.fg-focused) > label, .form-group.fg-has-value:not(.fg-focused) > .ui-outputlabel { color: #475569 !important; } /* Asterisco obrigatorio herda cor */ .form-group > label .ui-outputlabel-rfi, .form-group > .ui-outputlabel .ui-outputlabel-rfi { transition: color 0.2s ease !important; } .form-group.fg-focused > label .ui-outputlabel-rfi, .form-group.fg-focused > .ui-outputlabel .ui-outputlabel-rfi { color: #ef4444 !important; } /* SelectOneMenu dentro de form-group */ .form-group .ui-selectonemenu .ui-selectonemenu-label { padding-top: 14px !important; padding-bottom: 8px !important; } /* Calendar dentro de form-group */ .form-group .ui-calendar .ui-inputfield, .form-group .ui-calendar input.ui-inputfield { padding-top: 14px !important; padding-bottom: 8px !important; } /* AutoComplete dentro de form-group */ .form-group .ui-autocomplete .ui-inputfield, .form-group .ui-autocomplete input.ui-inputfield { padding-top: 14px !important; padding-bottom: 8px !important; } /* InputMask dentro de form-group */ .form-group .ui-inputmask { padding-top: 14px !important; padding-bottom: 8px !important; } /* Ajuste z-index do label para ficar acima da borda do select */ .form-group .ui-selectonemenu { z-index: 1 !important; } /* Quando select esta aberto (focused), a borda azul nao esconde o label */ .form-group.fg-focused .ui-selectonemenu { z-index: 1 !important; } /* Label nao se aplica em form-group dentro de center (botoes) */ .main-content center .form-group { padding-top: 0 !important; } /* Label nao se aplica em colunas da datatable */ .ui-datatable .form-group { padding-top: 0 !important; } /* Label disabled — ajuste de fundo para combinar com input disabled */ .form-group.fg-disabled.fg-has-value > label, .form-group.fg-disabled.fg-has-value > .ui-outputlabel, .form-group.fg-disabled.fg-focused > label, .form-group.fg-disabled.fg-focused > .ui-outputlabel { background: #e9ecef !important; } /* Mobile: reduz padding-top do form-group */ @media (max-width: 799px) { .form-group { padding-top: 12px !important; } .form-group > label, .form-group > .ui-outputlabel { top: 26px !important; font-size: 14px !important; } .form-group.fg-focused > label, .form-group.fg-focused > .ui-outputlabel, .form-group.fg-has-value > label, .form-group.fg-has-value > .ui-outputlabel { top: 4px !important; font-size: 12px !important; } } /* Container dos botões: Força o grid 2x2 */ .ui-picklist .ui-picklist-buttons { display: grid !important; grid-template-columns: 1fr 1fr !important; /* 2 colunas */ grid-gap: 8px !important; width: 115px !important; padding: 10px !important; justify-items: center; align-content: center; } /* Estilo dos botões (Quadrados Cinzas Arredondados) */ .ui-picklist .ui-picklist-buttons .ui-button { width: 48px !important; height: 48px !important; background-color: #adb5bd !important; /* Cinza da imagem */ border: none !important; border-radius: 12px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; } /* Forçando o ícone (setinhas) a aparecer em branco */ .ui-picklist .ui-picklist-buttons .ui-button .ui-icon { display: none !important; /* Esconde o ícone original para usarmos o PrimeIcon limpo */ } /* Injetando os ícones do PrimeIcons (\e901 = seta, etc) */ .ui-picklist .ui-picklist-buttons .ui-button::before { font-family: 'primeicons' !important; color: white !important; font-size: 1.2rem !important; } /* Seta para direita (Add) */ .ui-picklist .ui-picklist-buttons .ui-picklist-button-add::before { content: "\e901"; } /* Duas setas para direita (Add All) */ .ui-picklist .ui-picklist-buttons .ui-picklist-button-add-all::before { content: "\e902"; } /* Seta para esquerda (Remove) */ .ui-picklist .ui-picklist-buttons .ui-picklist-button-remove::before { content: "\e900"; } /* Duas setas para esquerda (Remove All) */ .ui-picklist .ui-picklist-buttons .ui-picklist-button-remove-all::before { content: "\e903"; } .ui-picklist .ui-picklist-buttons .ui-button:hover { background-color: #868e96 !important; transform: translateY(-1px); } /* Esconde os botões de ordenar que não usamos */ .ui-picklist-source-controls, .ui-picklist-target-controls { display: none !important; } /* ============================================================================ SECTION: INTERACTIVITY & ANIMATIONS ============================================================================ */ .hover-shadow { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .hover-shadow:hover { transform: translateY(-5px) scale(1.02) !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; border-color: var(--mpf-primary) !important; cursor: pointer !important; } /* Data Table Row Fade-in Animation */ body .ui-datatable .ui-datatable-data > tr { animation: fadeInRow 0.4s ease-out forwards !important; opacity: 0; } @keyframes fadeInRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Staggered row animation */ body .ui-datatable .ui-datatable-data > tr:nth-child(1) { animation-delay: 0.05s !important; } body .ui-datatable .ui-datatable-data > tr:nth-child(2) { animation-delay: 0.1s !important; } body .ui-datatable .ui-datatable-data > tr:nth-child(3) { animation-delay: 0.15s !important; } body .ui-datatable .ui-datatable-data > tr:nth-child(4) { animation-delay: 0.2s !important; } body .ui-datatable .ui-datatable-data > tr:nth-child(5) { animation-delay: 0.25s !important; } /* Global Voice Assistant Highlighting */ .word-reading-highlight { background-color: #ffeb3b !important; color: #000 !important; border-radius: 4px; padding: 0 2px; box-shadow: 0 0 8px rgba(255, 235, 59, 0.8); transition: all 0.2s ease; } .word-read { background-color: rgba(63, 81, 181, 0.1) !important; border-radius: 4px; padding: 0 2px; transition: background-color 0.8s ease; }