ngx-vector-components 5.172.0 → 6.0.0

package/assets/styles/_primeng-custom-theme.scss

@@ -299,6 +299,50 @@ p-button {
   }
 }
 
+.p-inputgroup {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  > input,
+  > p-inputmask {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  vector-button {
+    flex: 0 0 auto;
+
+    p-button,
+    button {
+      width: auto !important;
+    }
+  }
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+  position: relative;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  margin-top: -0.5rem;
+  z-index: 1;
+}
+
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  margin-top: -0.5rem;
+  z-index: 1;
+}
+
 .p-autocomplete-input {
   border-right: none !important;
   border-top-right-radius: 0px !important;
@@ -330,12 +374,12 @@ p-button {
   padding-bottom: 5px !important;
 }
 
-.p-dropdown,
+.p-select,
 .p-multiselect {
   height: 40px;
   background-color: var(--gray-medium) !important;
 
-  .p-dropdown-label,
+  .p-select-label,
   .p-multiselect-label {
     font-family: 'Poppins';
     color: var(--theme-dark) !important;
@@ -345,6 +389,31 @@ p-button {
   }
 }
 
+.p-paginator .p-select {
+  width: auto !important;
+  height: auto !important;
+  background-color: transparent !important;
+  border: 1px solid var(--gray-medium) !important;
+  border-radius: 8px !important;
+
+  .p-select-label {
+    padding: 8px 12px !important;
+    color: var(--theme-dark) !important;
+    font-weight: 600;
+  }
+
+  .p-select-dropdown {
+    color: var(--theme-dark) !important;
+  }
+}
+
+.p-paginator .p-paginator-first,
+.p-paginator .p-paginator-prev,
+.p-paginator .p-paginator-next,
+.p-paginator .p-paginator-last {
+  color: var(--theme-dark) !important;
+}
+
 p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
   border-color: var(--error-color) !important;
   background-color: var(--error-color-transparent) !important;
@@ -376,13 +445,81 @@ p-inputnumber.currency-input:not(.outlined) {
   }
 }
 
-.p-inputnumber-buttons-horizontal .p-button {
-  color: var(--theme-primary) !important;
-  border: none !important;
-  background: var(--gray-light) !important;
+.p-inputnumber-buttons-horizontal,
+.p-inputnumber.p-inputnumber-horizontal {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: stretch !important;
+  width: 100% !important;
 
-  span {
-    font-weight: 600 !important;
+  p-button,
+  .p-inputnumber-button-group {
+    width: auto !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    display: inline-flex !important;
+    align-items: stretch !important;
+  }
+
+  .p-inputnumber-input {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    text-align: center !important;
+    border-radius: 0 !important;
+  }
+
+  .p-inputnumber-button,
+  button.p-inputnumber-increment-button,
+  button.p-inputnumber-decrement-button,
+  .p-button {
+    width: 36px !important;
+    min-width: 36px !important;
+    flex: 0 0 36px !important;
+    padding: 0 !important;
+    color: var(--theme-primary) !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: var(--gray-light) !important;
+    box-shadow: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    &:hover:not(:disabled) {
+      background: var(--gray-medium) !important;
+      color: var(--theme-dark) !important;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    span,
+    .p-button-icon,
+    svg {
+      color: inherit !important;
+      font-weight: 600 !important;
+      border-radius: 0 !important;
+    }
+  }
+
+  .p-inputnumber-decrement-button,
+  .p-inputnumber-button:first-of-type {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .p-inputnumber-increment-button,
+  .p-inputnumber-button:last-of-type {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
   }
 }
 
@@ -399,6 +536,64 @@ p-inputnumber.currency-input:not(.outlined) {
       color: #fff !important;
     }
   }
+
+  // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
+  // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
+  &.p-multiselect-display-chip {
+    .p-multiselect-label {
+      display: inline-flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: 4px !important;
+      padding: 0.15rem 0.5rem 0.15rem 0 !important;
+      min-height: 28px !important;
+    }
+
+    .p-multiselect-chip-item {
+      display: inline-flex !important;
+      align-items: center !important;
+    }
+
+    .p-multiselect-chip,
+    .p-chip {
+      height: 24px !important;
+      padding: 0 6px 0 10px !important;
+      background: #ffffff !important;
+      border: 1px solid #e5e7eb !important;
+      border-radius: 16px !important;
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      line-height: 1 !important;
+      color: var(--theme-dark) !important;
+      gap: 4px !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
+
+      .p-chip-label,
+      .p-multiselect-chip-label {
+        max-width: 140px !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        color: inherit !important;
+      }
+
+      .p-chip-remove-icon,
+      .p-multiselect-chip-icon,
+      svg {
+        width: 14px !important;
+        height: 14px !important;
+        color: var(--theme-dark) !important;
+        opacity: 0.6 !important;
+        cursor: pointer !important;
+
+        &:hover {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
 }
 
 input.p-inputtext:not(.currency-input),
@@ -457,7 +652,7 @@ input.p-inputtext:not(.currency-input),
   height: unset !important;
 }
 
-.p-calendar {
+.p-datepicker {
   width: 100% !important;
   .p-inputtext {
     color: var(--theme-dark) !important;
@@ -469,7 +664,7 @@ input.p-inputtext:not(.currency-input),
     &:focus {
       border-right: none !important;
 
-      + .p-datepicker-trigger {
+      + .p-datepicker-dropdown {
         border-right: 2px solid var(--theme-dark) !important;
         border-top: 2px solid var(--theme-dark) !important;
         border-bottom: 2px solid var(--theme-dark) !important;
@@ -478,7 +673,7 @@ input.p-inputtext:not(.currency-input),
     }
   }
 
-  .p-datepicker-trigger {
+  .p-datepicker-dropdown {
     background-color: var(--gray-light) !important;
     border: none !important;
     border-top-right-radius: var(--border-radius) !important;
@@ -489,8 +684,8 @@ input.p-inputtext:not(.currency-input),
     }
   }
 }
-p-calendar.ng-touched.ng-invalid {
-  .p-calendar {
+p-datepicker.ng-touched.ng-invalid {
+  .p-datepicker {
     width: 100% !important;
     input.p-inputtext:not(.currency-input),
     .p-inputtextarea {
@@ -501,7 +696,7 @@ p-calendar.ng-touched.ng-invalid {
     }
   }
 
-  .p-datepicker-trigger {
+  .p-datepicker-dropdown {
     border-color: var(--error-color) !important;
     background-color: var(--error-color-transparent) !important;
   }
@@ -512,7 +707,7 @@ p-calendar.ng-touched.ng-invalid {
       border-color: var(--error-color) !important;
       background-color: var(--error-color-transparent) !important;
     }
-    .p-datepicker-trigger {
+    .p-datepicker-dropdown {
       border-right: 2px solid var(--error-color) !important;
       border-top: 2px solid var(--error-color) !important;
       border-bottom: 2px solid var(--error-color) !important;
@@ -546,41 +741,59 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   border-color: var(--error-color) !important;
 }
 
-.p-radiobutton-box.p-highlight {
-  background-color: var(--success-color) !important;
-  border-color: var(--success-color) !important;
+.p-radiobutton {
+  width: 24px;
+  height: 24px;
 
-  // &::before {
-  //   content: '\f00c';
-  //   color: #ffffff;
-  //   font-weight: 200;
-  //   width: 10px;
-  //   height: 10px;
-  // }
-  // .p-radiobutton-icon {
-  //   background-color: var(--success-color) !important;
-  // }
-}
+  .p-radiobutton-box {
+    border: 2px solid #d1d5db !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+  }
+
+  &:not(.p-disabled):hover .p-radiobutton-box {
+    border-color: #1545de !important;
+  }
 
-.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: var(--success-color) !important;
+  &.p-radiobutton-checked .p-radiobutton-box {
+    border-color: #1545de !important;
+    background: #1545de !important;
+
+    .p-radiobutton-icon {
+      background: #ffffff !important;
+    }
+  }
+
+  .p-radiobutton-input:focus-visible + .p-radiobutton-box,
+  &.p-focus .p-radiobutton-box {
+    border-color: #1545de !important;
+    box-shadow: 0 0 0 3px #ced9fa !important;
+  }
 }
 
 .p-steps .p-steps-item.p-highlight {
   background-color: transparent !important;
 
-  .p-menuitem-link .p-steps-number {
+  .p-menu-item-link .p-steps-number {
     color: #fff !important;
     background-color: var(--theme-medium) !important;
   }
 }
 
+.p-menu-list {
+  padding: 0px !important;
+}
+
+.p-menu-item-link {
+  padding: 0.75rem 1rem !important;
+}
+
 .p-steps .p-steps-item:not(.p-highlight) {
   .p-steps-title {
     opacity: 0.4 !important;
   }
 
-  .p-menuitem-link .p-steps-number {
+  .p-menu-item-link .p-steps-number {
     color: var(--theme-medium) !important;
   }
 }
@@ -593,7 +806,7 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   opacity: 1 !important;
 }
 
-.p-steps .p-steps-item .p-menuitem-link {
+.p-steps .p-steps-item .p-menu-item-link {
   background: transparent !important;
 
   .p-steps-number {
@@ -625,13 +838,13 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   color: var(--success-color-dark) !important;
 }
 
-.p-steps .p-steps-item.checked .p-menuitem-link .p-steps-number {
+.p-steps .p-steps-item.checked .p-menu-item-link .p-steps-number {
   background-color: var(--success-color-dark) !important;
   color: #fff !important;
   border: 2px solid var(--success-color-dark) !important;
 }
 
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number.disabled {
+.p-steps .p-steps-item .p-menu-item-link .p-steps-number.disabled {
   color: var(--gray-dark) !important;
   border: 2px solid var(--gray-dark) !important;
 }
@@ -655,26 +868,158 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   }
 }
 
-.p-datepicker table td > span:focus {
-  box-shadow: unset !important;
-}
-
-.p-datepicker table td > span.p-highlight {
-  color: #ffffff !important;
-}
-
-.p-datepicker table td > span {
-  color: var(--font-color) !important;
-}
-
-.p-datepicker {
+.p-datepicker-panel {
   border: 2px solid var(--theme-dark) !important;
   border-radius: var(--border-radius) !important;
   z-index: 15000 !important;
 
-  .p-datepicker-calendar thead tr th span {
+  .p-datepicker-weekday {
     color: var(--theme-dark) !important;
   }
+
+  .p-datepicker-day {
+    color: var(--font-color) !important;
+
+    &:focus {
+      box-shadow: unset !important;
+    }
+  }
+
+  .p-datepicker-day-selected {
+    color: #ffffff !important;
+  }
+
+  p-button {
+    width: auto !important;
+    background: transparent !important;
+    box-shadow: none !important;
+
+    button {
+      width: auto !important;
+      min-width: 2rem !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      color: var(--theme-dark) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--gray-light) !important;
+        border: none !important;
+      }
+    }
+
+    .p-button-icon {
+      color: var(--theme-dark) !important;
+    }
+  }
+}
+
+.p-toast {
+  .p-toast-message {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    border: none !important;
+    padding: 16px !important;
+    color: #1f2937 !important;
+  }
+
+  .p-toast-message-content {
+    gap: 12px !important;
+    align-items: center !important;
+    padding: 0 !important;
+  }
+
+  .p-toast-message-text {
+    gap: 4px !important;
+  }
+
+  .p-toast-summary {
+    color: #111827 !important;
+    font-family: 'Poppins', 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+  }
+
+  .p-toast-detail {
+    color: #4b5563 !important;
+    font-family: 'Poppins', 'Inter', sans-serif !important;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+  }
+
+  .p-toast-message-icon {
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    border-radius: 50% !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    color: #ffffff !important;
+
+    svg,
+    .p-icon {
+      width: 22px !important;
+      height: 22px !important;
+      color: #ffffff !important;
+      fill: #ffffff !important;
+    }
+  }
+
+  .p-toast-message-warn {
+    background: #fde6c0 !important;
+    .p-toast-message-icon {
+      background: #f59e0b !important;
+    }
+  }
+
+  .p-toast-message-error {
+    background: #fee2e2 !important;
+    .p-toast-message-icon {
+      background: #ef4444 !important;
+    }
+  }
+
+  .p-toast-message-success {
+    background: #dcfce7 !important;
+    .p-toast-message-icon {
+      background: #22c55e !important;
+    }
+  }
+
+  p-button,
+  .p-toast-close-button {
+    width: auto !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    align-self: center !important;
+
+    button {
+      width: 2rem !important;
+      min-width: 2rem !important;
+      height: 2rem !important;
+      padding: 0 !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      color: #6b7280 !important;
+      border-radius: 50% !important;
+
+      &:hover:not(:disabled) {
+        background: rgba(0, 0, 0, 0.06) !important;
+        border: none !important;
+        color: #1f2937 !important;
+      }
+    }
+
+    .p-button-icon,
+    .p-toast-close-icon {
+      color: inherit !important;
+      width: 1rem !important;
+      height: 1rem !important;
+    }
+  }
 }
 
 .p-overlaypanel:not(.background-white) {
@@ -712,6 +1057,38 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   font-weight: 600 !important;
 }
 
+.p-dialog .p-dialog-header p-button,
+.p-drawer .p-drawer-header p-button {
+  width: auto !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  button {
+    width: 2rem !important;
+    height: 2rem !important;
+    min-width: 2rem !important;
+    padding: 0 !important;
+    border-radius: 50% !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: var(--gray-dark) !important;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  &:hover button:not(:disabled) {
+    background: var(--gray-light) !important;
+    color: var(--theme-dark) !important;
+  }
+
+  .p-dialog-header-close-icon,
+  .p-button-icon {
+    font-size: 1rem !important;
+  }
+}
+
 .p-confirm-dialog {
   .p-dialog-footer .actions {
     display: flex;
@@ -730,39 +1107,88 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
 }
 
 .p-selectbutton {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 4px !important;
+  height: 42px !important;
   background-color: var(--gray-light) !important;
-  border-radius: 10px !important;
+  border-radius: 12px !important;
   width: fit-content !important;
 
-  .p-ripple {
+  .p-togglebutton {
+    display: inline-flex !important;
+    align-items: center !important;
+    height: 34px !important;
+    margin: 0 !important;
+    padding: 0 16px !important;
     border: none !important;
-    margin: 3px !important;
     border-radius: 8px !important;
+    background: transparent !important;
+    transition: all 0.2s ease;
 
-    .p-button-label {
-      color: var(--gray-dark) !important;
+    .p-togglebutton-content {
+      gap: 6px !important;
+      font-size: 14px !important;
       font-weight: 500 !important;
+      line-height: 1 !important;
     }
 
-    &:not(.p-highlight) {
+    .p-togglebutton-label,
+    .p-togglebutton-icon {
+      color: var(--theme-dark) !important;
+    }
+
+    &:not(.p-togglebutton-checked) {
       background-color: transparent !important;
     }
 
-    &.p-highlight {
-      background-color: #fff !important;
+    &.p-togglebutton-checked {
+      background-color: #ffffff !important;
+      box-shadow:
+        0 1px 2px 0 rgba(17, 55, 178, 0.1),
+        0 2px 4px 0 rgba(17, 55, 178, 0.1),
+        0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
 
-      .p-button-label {
-        color: var(--theme-medium) !important;
+      .p-togglebutton-label,
+      .p-togglebutton-icon {
+        color: var(--brand-blue) !important;
+        font-weight: 600 !important;
+      }
+    }
+
+    &:disabled,
+    &.p-disabled {
+      background-color: transparent !important;
+      box-shadow: none !important;
+
+      .p-togglebutton-label,
+      .p-togglebutton-icon {
+        color: var(--gray-dark) !important;
       }
     }
   }
 }
 
-.p-multiselect-panel:not(.has-filter) .p-multiselect-header {
-  .p-checkbox::after {
-    content: 'Selecionar Todos';
-    margin-left: 0.5rem;
+vector-select-button-field.is-secondary {
+  .p-selectbutton {
+    background-color: var(--brand-light) !important;
+    border-radius: 9999px !important;
   }
+
+  .p-togglebutton {
+    padding: 0 20px !important;
+    border-radius: 9999px !important;
+  }
+}
+
+.p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
+  content: 'Selecionar Todos';
+  display: inline-block;
+  margin-left: 0.5rem;
+  color: var(--theme-dark);
+  font-weight: 500;
+  white-space: nowrap;
 }
 
 .p-multiselect-header {
@@ -771,20 +1197,48 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   }
 }
 
-.rounded-checkbox .p-checkbox-box {
-  border-radius: 20px !important;
+p-checkbox.rounded-checkbox,
+.rounded-checkbox {
+  --p-checkbox-border-radius: 50%;
+  --p-checkbox-checked-border-radius: 50%;
+}
+
+.rounded-checkbox .p-checkbox,
+.rounded-checkbox .p-checkbox.p-checkbox-checked {
+  background: transparent !important;
+  border-radius: 50% !important;
+}
+
+.rounded-checkbox .p-checkbox-input {
+  background: transparent !important;
+  border-radius: 50% !important;
+}
+
+.rounded-checkbox .p-checkbox-box,
+.rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
+  border-radius: 50% !important;
   border: none !important;
+  overflow: hidden !important;
+}
+
+.rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
   background-color: var(--gray-light) !important;
+}
 
-  .p-checkbox-icon {
-    font-size: 0.8em !important;
-    padding-top: 2px !important;
-  }
+.rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
+  background-color: var(--brand-blue) !important;
 }
 
-.p-checkbox-box.p-highlight {
-  background: var(--theme-primary) !important;
-  border-color: var(--theme-primary) !important;
+p-checkbox.rounded-checkbox .p-checkbox-icon,
+.rounded-checkbox .p-checkbox-icon {
+  font-size: 0.8em !important;
+  padding-top: 2px !important;
+}
+
+.p-checkbox-box.p-highlight,
+.p-checkbox.p-checkbox-checked .p-checkbox-box {
+  background: var(--brand-blue) !important;
+  border-color: var(--brand-blue) !important;
 }
 
 .p-checkbox-box {
@@ -796,7 +1250,7 @@ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
   }
 }
 
-.p-dropdown,
+.p-select,
 .p-autocomplete {
   width: 100%;
 }
@@ -820,9 +1274,9 @@ p-multiselect.ng-touched.ng-invalid .p-multiselect {
   background-color: var(--error-color-transparent) !important;
 }
 
-.p-dropdown-panel,
+.p-select-overlay,
 .p-autocomplete-panel,
-.p-multiselect-panel {
+.p-multiselect-overlay {
   // max-width: 250px !important;
   min-width: 100%;
   border: 1px solid var(--theme-dark) !important;
@@ -830,7 +1284,7 @@ p-multiselect.ng-touched.ng-invalid .p-multiselect {
   border-radius: var(--border-radius) !important;
 
   & .p-autocomplete-items,
-  & .p-multiselect-items {
+  & .p-multiselect-list {
     padding-top: 0px !important;
     padding-bottom: 0px !important;
     padding-right: 1px !important;
@@ -854,7 +1308,7 @@ p-multiselect.ng-touched.ng-invalid .p-multiselect {
   }
 }
 
-.p-dropdown-item,
+.p-select-option,
 .p-autocomplete-item,
 .p-multiselect-item {
   text-overflow: ellipsis;
@@ -866,15 +1320,15 @@ p-multiselect.ng-touched.ng-invalid .p-multiselect {
   }
 }
 
-.p-dropdown,
+.p-select,
 .p-multiselect {
   border: none !important;
   .p-highlight {
     background-color: #ffffff !important;
   }
 }
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+.p-select-overlay .p-select-list .p-select-option.p-highlight,
+.p-multiselect-overlay .p-multiselect-list .p-multiselect-item.p-highlight {
   background-color: var(--theme-dark) !important;
   color: #ffffff !important;
 }
@@ -898,28 +1352,69 @@ p-multiselect.ng-touched.ng-invalid .p-multiselect {
 }
 
 .p-fileupload {
-  p-messages {
+  p-messages,
+  p-message {
+    display: none !important;
+  }
+
+  .p-fileupload-filelabel,
+  [class*='filelabel'] {
     display: none !important;
   }
+
+  input[type='file'] {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    opacity: 0 !important;
+  }
+
+  p-button {
+    width: 100% !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .p-fileupload-choose-button,
   .p-fileupload-choose {
     background: transparent !important;
-    border: 2px solid var(--theme-dark) !important;
-    border-radius: var(--border-radius) !important;
+    border: 1px solid var(--theme-dark) !important;
+    border-radius: 30px !important;
+    box-shadow: none !important;
+    color: var(--theme-dark) !important;
+    width: 100% !important;
+    padding: 0.875rem 1.5rem !important;
+    font-weight: 600 !important;
+    justify-content: center !important;
+    gap: 0.5rem !important;
 
-    .p-button-label {
-      color: var(--theme-dark) !important;
-      max-width: 200px !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-      overflow: hidden !important;
+    &:hover:not(:disabled) {
+      background: var(--theme-dark) !important;
+      border-color: var(--theme-dark) !important;
+      color: #ffffff !important;
 
-      @media (max-width: 768px) {
-        max-width: 150px !important;
+      .p-button-label,
+      .p-button-icon {
+        color: #ffffff !important;
       }
     }
 
+    .p-button-label {
+      color: inherit !important;
+      flex: 0 0 auto !important;
+      max-width: unset !important;
+      overflow: visible !important;
+    }
+
     .p-button-icon {
-      display: none !important;
+      color: inherit !important;
     }
   }
 }
@@ -939,6 +1434,12 @@ vector-data-table {
       border-radius: 15px !important;
     }
 
+    // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
+    // em cada celula por getCellContent) precisa ser escondido manualmente.
+    .p-column-title {
+      display: none;
+    }
+
     .p-datatable-thead {
       border-radius: 15px !important;
       z-index: 0 !important;
@@ -949,6 +1450,11 @@ vector-data-table {
           position: relative;
           padding: 10px 10px 10px 35px !important;
           background-color: var(--gray-light) !important;
+          color: #1f2937 !important;
+
+          > div {
+            gap: 8px;
+          }
 
           &:first-child {
             border-top-left-radius: 15px !important;
@@ -1024,19 +1530,15 @@ vector-data-table {
   }
 
   p-tabview {
-    .p-tabview-panels {
+    .p-tabpanels {
       display: none !important;
     }
 
-    .p-tabview-nav {
-      li {
-        .p-tabview-nav-link {
-          justify-content: center;
-        }
+    .p-tablist .p-tab {
+      justify-content: center;
 
-        &.p-highlight .p-tabview-nav-link {
-          color: var(--theme-primary) !important;
-        }
+      &.p-tab-active {
+        color: var(--theme-primary) !important;
       }
     }
   }
@@ -1060,48 +1562,97 @@ vector-data-table {
 }
 
 p-tabview {
-  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-    border-color: var(--theme-dark) !important;
+  background: transparent !important;
+
+  .p-tabpanels,
+  .p-tabpanel,
+  .p-tabview-panel {
+    background: transparent !important;
   }
 
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    border-top-right-radius: 0px !important;
-    border-top-left-radius: 0px !important;
+  .p-tablist-tab-list {
+    background: none !important;
+    .p-tab.p-tab-active {
+      border-color: var(--theme-primary) !important;
+    }
 
-    &:hover {
-      border-color: var(--theme-dark) !important;
+    .p-tab {
+      border-top-right-radius: 0px !important;
+      border-top-left-radius: 0px !important;
+      color: var(--theme-primary) !important;
+
+      &:hover {
+        border-color: var(--theme-primary) !important;
+        border-bottom-width: 2px !important;
+      }
+    }
+    .p-tablist-active-bar {
+      height: 2px !important;
+      background: var(--theme-primary) !important;
     }
   }
 }
 
-.p-accordion-header {
-  .p-accordion-header-link {
+.p-accordion {
+  .p-accordionpanel {
+    margin: 20px 0;
+    border: none !important;
+    background: transparent !important;
     border-radius: 16px !important;
     box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
+    overflow: hidden;
+  }
+
+  .p-accordionheader {
+    position: relative !important;
     border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: #ffffff !important;
+    color: var(--theme-dark) !important;
+    padding: 1.25rem 1.5rem !important;
+    font-weight: 600 !important;
 
-    .p-accordion-toggle-icon {
-      margin-right: 0.5rem !important;
-      position: absolute !important;
-      right: 0.5em !important;
+    &:hover {
+      background: #ffffff !important;
+      color: var(--theme-dark) !important;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      box-shadow: none !important;
     }
   }
-  &.p-highlight {
-    background: none !important;
+
+  .p-accordionheader-toggle-icon {
+    position: absolute !important;
+    right: 1.5rem !important;
+    top: 50% !important;
+    left: auto !important;
+    margin: 0 !important;
+    color: var(--theme-dark) !important;
+    transform: translateY(-50%) rotate(-90deg);
+    transition: transform 0.2s ease;
   }
-}
 
-.p-accordion .p-accordion-content {
-  border: none !important;
-  background: #ffffff !important;
-  border-radius: 16px !important;
-  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
-  margin-top: -25px !important;
-  padding-top: 35px !important;
-}
+  .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
+    transform: translateY(-50%) rotate(0deg);
+  }
+
+  .p-accordioncontent {
+    border: none !important;
+    background: #ffffff !important;
+  }
 
-.p-accordion-tab {
-  margin: 20px 0px;
+  .p-accordioncontent-content {
+    border: none !important;
+    background: #ffffff !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 0 1.5rem 1.5rem !important;
+    color: inherit !important;
+  }
 }
 
 .p-chip {
@@ -1182,40 +1733,45 @@ p-tabview {
       border-radius: 4px;
     }
 
-    .p-menuitem-link {
+    .p-menu-item-content {
       border-radius: 4px;
+      background-color: transparent !important;
     }
 
-    .p-menuitem-content {
-      background-color: transparent !important;
+    .p-menu-item-link {
+      border-radius: 4px;
     }
 
-    .p-menuitem-icon,
-    .p-menuitem-text {
+    .p-menu-item-icon,
+    .p-menu-item-label {
       color: #434560 !important;
     }
 
-    .p-menuitem-text {
+    .p-menu-item-label {
       font-weight: 500 !important;
     }
 
-    .p-menuitem-link:hover,
-    .p-menuitem.p-focus > .p-menuitem-link {
+    .p-menu-item-content:hover,
+    .p-menu-item.p-focus .p-menu-item-content {
       background-color: var(--theme-medium) !important;
 
-      .p-menuitem-icon,
-      .p-menuitem-text {
+      .p-menu-item-icon,
+      .p-menu-item-label {
         color: #ffffff !important;
       }
     }
   }
 }
 
-.p-inputswitch.p-focus .p-inputswitch-slider {
+.p-toggleswitch {
+  flex: 0 0 auto;
+}
+
+.p-toggleswitch.p-focus .p-toggleswitch-slider {
   box-shadow: none !important;
 }
 
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
   background-color: var(--theme-primary) !important;
 }
 
@@ -1283,7 +1839,7 @@ p-tabview {
 }
 
 .multiselect-flags {
-  .p-multiselect-panel .p-multiselect-items {
+  .p-multiselect-overlay .p-multiselect-list {
     .p-multiselect-item {
       span {
         color: #757b8a;