estilos de modales

src/components/prerequisites/RequirementComponent.vue

 <template>
-    <div class="blocking-requirement">
+    <div>
       <div
         v-for="(requirement, idx) in requirements"
         :key="idx"
@@ -242,19 +242,19 @@
 
 </script>
 <style scoped>
-/* Estilos para el contenedor principal */
-.blocking-requirement {
-  color: #2c3e50;
+/* Variables de colores */
+
+/* Estilos generales */
+.requirement {
+  padding: 0 1em 1em;
 }
 
-/* Estilos para el título del requisito */
 .requirement-title {
   font-size: 1.125rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
-/* Estilos para la descripción del requisito */
 .requirement-description {
   font-size: 1rem;
   line-height: 1.5;
@@ -262,33 +262,29 @@
   margin-bottom: 1rem;
 }
 
-/* Estilos para el enlace de acción */
 .link {
   color: #0066cc;
   text-decoration: none;
   font-weight: 500;
+  transition: text-decoration 0.2s ease-in-out;
 }
 
-/* Estilos para el hover del enlace */
 .link:hover {
   text-decoration: underline;
 }
 
-/* Estilos para los detalles de pago */
 .payment-details {
   text-align: center;
   margin: 1.5rem 0;
 }
 
-/* Estilos para el monto */
 .amount {
   font-size: 1.25rem;
   font-weight: 600;
-  color: var(--color-primary);
+  color: #0066cc;
   margin-top: 1rem;
 }
 
-/* Estilos para las acciones del modal */
 .modal-actions {
   display: flex;
   gap: 1rem;
@@ -296,17 +292,13 @@
   margin-top: 1.5rem;
 }
 
-.completed-section {
-  padding-top: 1rem;
-  border-top: 1px solid #e5e7eb;
-}
+
 
 .completed-header {
+  color: #059669;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1rem;
-  color: #059669;
 }
 
 .completed-icon {
@@ -314,77 +306,70 @@
   font-weight: bold;
 }
 
-.requirement.completed {
-  opacity: 0.7;
-  padding: 0.5rem;
-  background-color: #f0fdf4;
-  border-radius: 0.375rem;
-  margin-bottom: 0.5rem;
-}
 
-.requirement.completed .requirement-title {
-  color: #059669;
-  font-size: 1rem;
-  margin: 0;
-}
-.btnPayment{
-    display: inline-flex;
-    align-items: center;
-    width: 30vw;
-    justify-content: space-evenly;
-    height: 8vh;
-    padding: 0.5rem 1rem;
-    background-color: white;
-   
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin: 0 1em;
+
+.btnPayment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 30vw;
+  height: 8vh;
+  padding: 0.5rem 1rem;
+  background-color: white;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin: 0 1em;
+  border: 2px solid transparent;
 }
+
 .btnPayment:hover {
   background-color: #f5f5f5;
-  border: 2px solid #255aa3;
+  border-color: #0066cc;
 }
 
-:deep(.modal-content){
+:deep(.modal-content) {
   max-width: 70vw !important;
 }
-
-.aviso{
+.modal-content{
+  margin: 1em;
+}
+.aviso {
   display: flex;
   gap: 1rem;
   margin: 1rem 0;
-  background-color: #255aa3;
+  background-color: #0066cc;
   padding: 1rem;
   color: #f0fdf4;
 }
 
-.datos{
+.datos {
   display: flex;
   gap: 1em;
   margin: 1em 0;
 }
+
 .datos > * {
   padding: 1em;
 }
-.datos h4{
+
+.datos h4 {
   min-width: 100px;
 }
-.datos p{
+
+.datos p {
   border: 1px solid;
   border-radius: 10px;
 }
 
-.actions{
+.actions {
   display: flex;
   justify-content: end;
   gap: 2rem;
   margin-top: 2rem;
 }
 
-
-
-/* Ocultamos estilos antiguos ya que usamos el componente Button */
+/* Ocultar botones innecesarios */
 .resolve-button,
 .cancel-button,
 .resolve-button:hover,
@@ -398,10 +383,7 @@
 
 .upload-formats {
   font-size: 0.875rem;
-  color: var(--color-secondary);
+  color: #4a5568;
   margin-bottom: 1rem;
 }
-
-
-
-</style>
\ No newline at end of file
+</style>