@keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .slide-in-up {
      animation: slideInUp 0.6s ease-out;
    }
    
    /* Efecto de progreso del password */
    .password-strength {
      height: 4px;
      border-radius: 2px;
      transition: all 0.3s ease;
      margin-top: 0.5rem;
    }
    
    .strength-weak { background: linear-gradient(to right, #ef4444, #f87171); width: 25%; }
    .strength-medium { background: linear-gradient(to right, #f59e0b, #fbbf24); width: 50%; }
    .strength-good { background: linear-gradient(to right, #10b981, #34d399); width: 75%; }
    .strength-strong { background: linear-gradient(to right, #059669, #10b981); width: 100%; }
    
    /* Input focus states */
    .input-focus {
      transform: translateY(-1px);
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    }
    
    /* Checkboxes personalizados */
    .custom-checkbox {
      appearance: none;
      width: 18px;
      height: 18px;
      border: 2px solid #d1d5db;
      border-radius: 4px;
      position: relative;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    
    .custom-checkbox:checked {
      background-color: #10b981;
      border-color: #10b981;
    }
    
    .custom-checkbox:checked::after {
      content: '✓';
      position: absolute;
      top-0.5;
      left-0.5;
      color: white;
      font-size: 12px;
      font-weight: bold;
    }
    
    /* Toggle password */
    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #6b7280;
      cursor: pointer;
      padding: 4px;
      transition: color 0.2s ease;
    }
    
    .password-toggle:hover {
      color: #374151;
    }
    
    /* Validación states */
    .input-valid { border-color: #10b981 !important; }
    .input-invalid { border-color: #ef4444 !important; }
    .input-valid ~ .input-icon { color: #10b981; }
    .input-invalid ~ .input-icon { color: #ef4444; }
    
    .input-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
      transition: color 0.2s ease;
      pointer-events: none;
    }