Melhora modais e confirmacoes

src/main/webapp/css/app.css

@@ -664,24 +664,25 @@ th {
   display: grid;
   place-items: center;
   padding: 24px;
+  overflow: auto;
 }
 
 .modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 23, 42, .50);
-  backdrop-filter: blur(2px);
+  background: rgba(15, 23, 42, .56);
+  backdrop-filter: blur(3px);
 }
 
 .modal-panel {
   position: relative;
-  width: min(860px, 100%);
+  width: min(920px, 100%);
   max-height: calc(100vh - 48px);
   overflow: auto;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
-  padding: 18px;
+  padding: 24px;
   box-shadow: var(--shadow-lg);
 }
 
@@ -689,8 +690,83 @@ th {
   display: flex;
   justify-content: space-between;
   gap: 12px;
+  align-items: flex-start;
+  margin-bottom: 22px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.modal-head h2 {
+  margin: 0;
+  font-size: 22px;
+}
+
+.modal-head .btn {
+  min-height: 38px;
+  padding: 8px 13px;
+}
+
+.modal-form {
+  display: grid;
+  gap: 20px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.field-wide {
+  grid-column: 1 / -1;
+}
+
+.check-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel-muted);
+}
+
+.check-grid label,
+#notif-modal-body label,
+#aviso-notif-body label {
+  min-height: 38px;
+  display: flex;
   align-items: center;
-  margin-bottom: 16px;
+  gap: 8px;
+  margin: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: #fff;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding-top: 16px;
+  border-top: 1px solid var(--line);
+}
+
+.modal-actions .btn {
+  min-width: 120px;
+}
+
+.confirm-panel {
+  width: min(460px, 100%);
+}
+
+.confirm-panel p {
+  margin: 0 0 6px;
+  color: var(--muted-strong);
 }
 
 .modal-grid {
@@ -1087,10 +1163,15 @@ th {
 }
 
 @media (max-width: 720px) {
-  .modal-grid {
+  .modal-grid,
+  .form-grid {
     grid-template-columns: 1fr;
   }
 
+  .check-grid {
+    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+  }
+
   .modal {
     padding: 12px;
   }
@@ -1134,12 +1215,28 @@ th {
 
   .modal-head {
     align-items: flex-start;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 10px;
   }
 
   .modal-head .btn {
     width: auto;
   }
 
+  .modal-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .modal-actions .btn {
+    width: 100%;
+  }
+
+  .check-grid {
+    grid-template-columns: 1fr;
+  }
+
   .calendar-grid {
     font-size: 12px;
   }