.campo-error {
    border: 2px solid #e11d48 !important;
    background-color: #ffe4e6 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23e11d48" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.shake { animation: shake 0.4s; }

@keyframes shake {
  0% {transform: translateX(0);}
  25% {transform: translateX(-6px);}
  50% {transform: translateX(6px);}
  75% {transform: translateX(-6px);}
  100% {transform: translateX(0);}
}

   :root {
       --primary-color: #5A27FF;
       --secondary-color: rgb(75, 121, 219);
       --background-color: #f0f4f8;
       --card-background: #ffffff;
       --text-color: #333333;
       --placeholder-color: #a0a0a0;
       --border-color: #e0e0e0;
       --shadow-color: rgba(0, 0, 0, 0.05);
       --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
   }

   body {
       font-family: 'Inter', sans-serif;
       background-color: var(--background-color);
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
       margin: 0;
       padding: 20px;
       box-sizing: border-box;
   }

   .container {
       width: 100%;
       max-width: 450px;
       background-color: var(--card-background);
       padding: 40px;
       border-radius: 16px;
       box-shadow: 0 10px 30px var(--shadow-color);
       text-align: center;
       transition: all 0.3s ease;
   }

   .logo {
       width: 20%;
       height: auto;
       margin-bottom: 20px;
   }

   .form-toggle {
       display: flex;
       justify-content: center;
       margin-bottom: 30px;
       background-color: #f0f0f0;
       border-radius: 9999px;
       padding: 4px;
   }

   .tab-button {
       flex: 1;
       padding: 12px 24px;
       font-size: 16px;
       font-weight: 600;
       color: var(--text-color);
       background: none;
       border: none;
       cursor: pointer;
       border-radius: 9999px;
       transition: all 0.3s ease;
   }

   .tab-button.active {
       color: white;
       background-color: var(--primary-color);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   }

   .form-content {
       display: none;
       animation: fadeIn 0.5s ease-in-out forwards;
   }

   .form-content.active {
       display: block;
   }

   h2 {
       font-size: 24px;
       font-weight: 700;
       color: var(--text-color);
       margin-top: 0;
       margin-bottom: 20px;
   }

   form {
       text-align: left;
   }

   .input-group {
       margin-bottom: 20px;
   }

   label {
       display: block;
       font-size: 14px;
       color: var(--text-color);
       margin-bottom: 8px;
       font-weight: 500;
   }

   input,
   select {
       width: 100%;
       padding: 12px;
       font-size: 16px;
       border: 1px solid var(--border-color);
       border-radius: 8px;
       box-sizing: border-box;
       background-color: #f8f8f8;
       color: var(--text-color);
       transition: border-color 0.3s ease;
   }

   input:focus,
   select:focus {
       outline: none;
       border-color: var(--primary-color);
       box-shadow: 0 0 0 3px rgba(90, 39, 255, 0.2);
   }

   input::placeholder {
       color: var(--placeholder-color);
   }

   button[type="submit"] {
       width: 100%;
       padding: 15px;
       font-size: 18px;
       font-weight: 600;
       color: white;
       background: var(--gradient);
       border: none;
       border-radius: 8px;
       cursor: pointer;
       transition: transform 0.2s ease, box-shadow 0.2s ease;
       margin-top: 10px;
   }

   button[type="submit"]:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(90, 39, 255, 0.2);
   }

   button[type="submit"]:active {
       transform: translateY(0);
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media (max-width: 500px) {
       .container {
           padding: 30px 20px;
       }

       .logo {
           width: 100px;
       }

       h2 {
           font-size: 22px;
       }
   }