Dev/angular microservicios

angular/RestClient/src/app/core/features/auth/login/login.component.css

+/* General container styles */
+.container {
+    max-width: 400px;
+    margin: 50px auto;
+    padding: 30px;
+    background: linear-gradient(135deg, #1e1e2f, #2a2a45);
+    border-radius: 12px;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+  }
+  
+  h2 {
+    text-align: center;
+    font-size: 1.8em;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #fff;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  /* Form fields */
+  form div {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    font-size: 0.9em;
+    font-weight: bold;
+    margin-bottom: 8px;
+    display: block;
+    letter-spacing: 0.5px;
+    color: #b3b3d1;
+  }
+  
+  input {
+    width: 100%;
+    padding: 12px 15px;
+    font-size: 0.95em;
+    border: 1px solid #3e3e5e;
+    border-radius: 8px;
+    background: #252540;
+    color: #fff;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease-in-out;
+  }
+  
+  input:focus {
+    outline: none;
+    border-color: #7f7fd5;
+    background: #2e2e50;
+    box-shadow: 0 0 8px rgba(127, 127, 213, 0.8);
+  }
+  
+  /* Buttons */
+  button {
+    width: 100%;
+    padding: 12px;
+    font-size: 1em;
+    font-weight: bold;
+    color: #fff;
+    background: linear-gradient(90deg, #7f7fd5, #86a8e7, #91eae4);
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  
+  button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(127, 127, 213, 0.5);
+  }
+  
+  button:disabled {
+    background: #3e3e5e;
+    cursor: not-allowed;
+    opacity: 0.7;
+    box-shadow: none;
+  }
+  
+  /* Small error messages */
+  small {
+    display: block;
+    margin-top: 5px;
+    font-size: 0.85em;
+    color: #ff6b6b;
+  }
+  
+  /* Extra animations and effects */
+  .container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(120deg, rgba(127, 127, 213, 0.2), rgba(86, 168, 231, 0.1));
+    z-index: -1;
+    filter: blur(20px);
+  }
+  
+  input::placeholder {
+    color: #b3b3d1;
+  }
+  
+  form div:last-child {
+    margin-top: 30px;
+  }
+  
+  /* Responsiveness */
+  @media (max-width: 768px) {
+    .container {
+      padding: 20px;
+      margin: 20px;
+    }
+  
+    h2 {
+      font-size: 1.5em;
+    }
+  
+    input,
+    button {
+      font-size: 0.9em;
+    }
+  }
+  
\ No newline at end of file